:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-ui);
  --bg: #f2f3f5;
  --card: #ffffff;
  --ink: #1b1e23;
  --muted: #69717d;
  --line: #e0e4e9;
  --accent: #1b64ed;
  --accent-strong: #07379f;
  --on-accent: #ffffff;
  --accent-soft: #edf2ff;
  --brand-gradient: linear-gradient(135deg, #07379f 0%, #1b64ed 100%);
  --brand-gradient-hover: linear-gradient(135deg, #0a43b7 0%, #3477f2 100%);
  --signal: #ce2b37;
  --signal-soft: #fff0f2;
  --success: #087a43;
  --success-soft: #e3f5eb;
  --info: #0b6884;
  --info-soft: #e8f4f7;
  --warning: #aa6814;
  --warning-soft: #fff2d7;
  --surface: #f7f8f9;
  --surface-strong: #eceff2;
  --control-bg: #ffffff;
  --control-bg-hover: #f2f4f7;
  --control-border: #d4d9df;
  --control-shadow: 2px 2px 0 rgba(20, 24, 30, 0.05);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  --danger: #bd3f38;
  --danger-soft: #fdebe7;
  /* Serie dei grafici per settore d'eta' (Statistiche): ordine fisso
     Giovanili, Seniores, Veterani, validato anche per i daltonici. */
  --series-youth: #2a78d6;
  --series-senior: #eb6834;
  --series-veteran: #1baf7a;
  --text: var(--ink);
  --radius-card: 6px 18px 6px 18px;
  --radius-control: 4px 10px 4px 10px;
  --radius-pill: 6px;
  --loading-track: rgba(15, 70, 194, 0.18);
  --loading-surface: rgba(255, 255, 255, 0.78);
  --warn: #fff0cf;
  --sidebar-bg: #f7f8fa;
  --sidebar-expanded-width: 232px;
  --sidebar-collapsed-width: 68px;
  --scope-control-width: 660px;
  --shadow: 5px 5px 0 rgba(20, 24, 30, 0.045), 0 1px 0 rgba(20, 24, 30, 0.04);
  --auth-bg: linear-gradient(140deg, #eef0f3 0%, #fafafa 52%, #f1f2f4 100%);
}

html {
  scrollbar-gutter: stable;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: linear-gradient(180deg, #fbfcfd 0%, var(--bg) 280px, var(--bg) 100%);
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d0f;
  --card: #171c1f;
  --ink: #ecedef;
  --muted: #a4a9b3;
  --line: #2b3035;
  --accent: #7a84ff;
  --accent-strong: #9da5ff;
  --on-accent: #0c0d12;
  --accent-soft: #292d57;
  --brand-gradient: linear-gradient(135deg, #6f7aff 0%, #8d96ff 100%);
  --brand-gradient-hover: linear-gradient(135deg, #808aff 0%, #9da5ff 100%);
  --signal: #ff7180;
  --signal-soft: #48232d;
  --success: #67d49d;
  --success-soft: #173a2c;
  --info: #8bcce7;
  --info-soft: #193342;
  --warning: #e5b35c;
  --warning-soft: #3a2d19;
  --surface: #111517;
  --surface-strong: #20262a;
  --control-bg: #1b2024;
  --control-bg-hover: #252b30;
  --control-border: #353c42;
  --control-shadow: 2px 2px 0 rgba(0, 0, 0, 0.22);
  --focus-ring: 0 0 0 3px rgba(120, 167, 255, 0.24);
  --danger: #ff928a;
  --danger-soft: #3a2224;
  --series-youth: #3987e5;
  --series-senior: #d95926;
  --series-veteran: #199e70;
  --loading-track: rgba(120, 167, 255, 0.24);
  --loading-surface: rgba(24, 29, 33, 0.84);
  --warn: #342a18;
  --sidebar-bg: #111517;
  --shadow: 5px 5px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.035);
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 10020;
  padding: 9px 13px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  color: var(--on-accent);
  background: var(--accent);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  transform: translateY(calc(-100% - 20px));
  transition: transform 0.15s ease;
}

/* L'ombra solo quando il link compare: nascosto sopra la pagina, la sua
   ombra sporcava il bordo alto di ogni schermata. */
.skip-link:focus {
  box-shadow: 0 8px 24px rgba(20, 24, 30, 0.18);
  transform: translateY(0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  letter-spacing: -0.028em;
  overflow-wrap: anywhere;
}

.app-shell {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 20px 16px 26px;
}

.sidebar {
  position: sticky;
  top: 16px;
  align-self: flex-start;
  flex: 0 0 var(--sidebar-expanded-width);
  width: var(--sidebar-expanded-width);
  min-width: var(--sidebar-expanded-width);
  max-width: var(--sidebar-expanded-width);
  min-height: calc(100vh - 36px);
  margin-bottom: 0;
  background: var(--sidebar-bg);
  border-color: var(--line);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: width 0.18s ease;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-toggle {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 10px;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.sidebar-toggle:hover {
  border-color: var(--accent);
}

.sidebar-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.18s ease;
}

.sidebar-icon-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  text-decoration: none;
}

.sidebar-icon-home:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--card) 30%);
}

.sidebar-icon-home img {
  width: 28px;
  height: 28px;
  display: block;
  border-radius: 8px;
}

body.sidebar-collapsed .sidebar {
  flex: 0 0 var(--sidebar-collapsed-width);
  width: var(--sidebar-collapsed-width);
  min-width: var(--sidebar-collapsed-width);
  max-width: var(--sidebar-collapsed-width);
  min-height: 0;
  padding: 10px 8px;
}

.side-nav {
  display: grid;
  gap: 5px;
  margin-top: 14px;
}

.side-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink);
  padding: 9px 11px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.side-nav-link:hover {
  border-color: var(--line);
  background: color-mix(in srgb, var(--card) 86%, transparent);
}

.side-nav-link.active {
  background: var(--accent);
  color: var(--on-accent);
}

.side-nav-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: color-mix(in srgb, currentColor 82%, var(--muted) 18%);
}

.side-nav-link-locked {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--line) 80%, var(--accent) 20%);
  color: color-mix(in srgb, var(--muted) 75%, var(--ink) 25%);
}

.side-nav-link-locked:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line) 40%);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--card) 45%);
  color: var(--ink);
}

.side-nav-label {
  display: inline;
}

.side-nav-admin-divider {
  display: block;
  grid-column: 1 / -1;
  height: 1px;
  margin: 10px 4px 2px;
  background: color-mix(in srgb, var(--line) 84%, transparent);
}

.side-nav-admin-title {
  display: flex;
  align-items: center;
  gap: 6px;
  grid-column: 1 / -1;
  margin: 0 6px 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  color: #7a8f86;
}

.admin-crown {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--warning);
  fill: var(--warning-soft);
}

.sidebar-bottom {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.sidebar-email {
  margin-top: 0;
  margin-bottom: 10px;
  word-break: break-word;
}

.side-logout-form {
  margin: 0;
}

.side-logout-link {
  display: inline-flex;
  text-decoration: none;
  color: #b54242;
  border: 1px solid #d59c9c;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}

body.sidebar-collapsed .sidebar-top {
  justify-content: center;
}

body.sidebar-collapsed .sidebar-icon-home,
body.sidebar-collapsed .sidebar-bottom {
  display: none;
}

body.sidebar-collapsed .sidebar-toggle svg {
  transform: rotate(180deg);
}

body.sidebar-collapsed .side-nav {
  display: grid;
  margin-top: 10px;
}

body.sidebar-collapsed .side-nav-link {
  justify-content: center;
  min-height: 42px;
  padding: 8px;
}

body.sidebar-collapsed .side-nav-label,
body.sidebar-collapsed .side-nav-admin-divider,
body.sidebar-collapsed .side-nav-admin-title {
  display: none;
}

.page {
  max-width: 1100px;
  margin: 0;
  padding: 0 16px 24px;
  overflow-x: hidden;
}

.app-main {
  flex: 1 1 auto;
  max-width: none;
}

.about-kicker {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
  min-width: 0;
  overflow-wrap: anywhere;
}

.empty-state {
  min-width: 0;
  color: var(--muted);
}

.empty-state--section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  padding: 32px 20px;
  background: var(--card);
  text-align: center;
}

.empty-state--compact {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 11px 13px;
  background: var(--surface);
}

.empty-state__title {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.empty-state__text {
  max-width: 540px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.empty-state--section .empty-state__text {
  margin-top: 9px;
}

.empty-state__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.empty-state__link {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.empty-state__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero {
  background:
    linear-gradient(135deg, #ffffff 0%, #f8fcff 100%);
}

.hero-header-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.brand-row {
  margin-bottom: 8px;
  flex: 1 1 auto;
}

.brand-home-link {
  display: inline-flex;
  text-decoration: none;
  line-height: 1;
}

.hero-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  margin: 8px 0 6px;
}

.hero-search-row>* {
  min-width: 0;
}

.hero-search-main {
  min-width: 0;
}

/* Controlli delle Classifiche: tab e filtri, ambito, poi ricerca e Il mio
   atleta sempre visibili; la paginazione sta in alto a destra su desktop e
   subito sopra l'elenco altrove (e di nuovo in fondo, .rank-pagination-bottom).
   Le righe senza contenuto (pannello filtri chiuso) non lasciano spazi. */
.classifiche-controls-row {
  display: grid;
  grid-template-columns: minmax(0, max-content) 44px minmax(0, 1fr);
  grid-template-areas:
    "tabs toggle pager"
    "hint hint hint"
    "panel panel panel"
    "scope scope scope"
    "quick quick quick";
  align-items: center;
  gap: 0 10px;
  margin-bottom: 14px;
}

.classifiche-controls-row>.rank-switch {
  grid-area: tabs;
  margin: 0;
}

.classifiche-controls-row>.rank-toolbar-toggle {
  grid-area: toggle;
}

.classifiche-controls-row>.rankings-mode-hint {
  grid-area: hint;
  margin: 8px 0 0;
}

.classifiche-controls-row>.rank-toolbar {
  grid-area: panel;
  width: 100%;
  margin: 0;
}

.classifiche-controls-row .rank-scope-control {
  grid-area: scope;
  margin: 12px 0 0;
}

.classifiche-controls-row>.rank-quick-bar {
  grid-area: quick;
  margin-top: 10px;
}

.classifiche-controls-row>.rank-pagination {
  grid-area: pager;
  justify-self: end;
  margin: 0;
}

/* Trova atleta e Il mio atleta: a portata, fuori dal pannello filtri. */
.rank-quick-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
}

.rank-quick-bar>.rank-find {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 460px;
}

.rank-quick-bar>.rank-my-athlete {
  flex: 0 0 auto;
  gap: 6px;
  min-height: 40px;
  padding: 0 13px;
  font-weight: 750;
  text-decoration: none;
}

.rank-my-athlete svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.rank-pagination-bottom {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.rank-scope-control {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 1 var(--scope-control-width);
  width: min(100%, var(--scope-control-width));
  max-width: var(--scope-control-width);
  min-width: 0;
}

.rank-scope-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.rank-scope-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1 1 auto;
  min-width: min(100%, 190px);
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-strong);
}

.rank-scope-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.rank-scope-option:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 70%, transparent);
}

.rank-scope-option.is-active {
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 24%, transparent);
}

.rank-scope-option:disabled {
  cursor: wait;
  opacity: .62;
}

.rank-scope-setup {
  color: var(--accent);
  background: var(--card);
}

/* Switch Maschile/Femminile: stessa forma dello switch ambito, ma con
   collegamenti, perche' il genere cambia la pagina e non solo i dati. */
.gender-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 2px;
  max-width: 100%;
  margin-top: 14px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-strong);
}

.hero-search-main > .gender-switch {
  margin: 0 0 12px;
}

.gender-switch-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 38px;
  border-radius: 8px;
  padding: 7px 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
}

.gender-switch-option:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 70%, transparent);
}

.gender-switch-option.is-active {
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 24%, transparent);
}

.gender-switch-option:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gender-switch-badge {
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--muted);
  background: var(--card);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.gender-switch-option.is-active .gender-switch-badge {
  color: var(--on-accent);
  background: color-mix(in srgb, var(--on-accent) 22%, transparent);
}

/* Sezione costruita su una classifica non ancora supportata. */
.gender-pending {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(28px, 5vw, 48px) 20px;
  text-align: center;
}

.gender-pending-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--accent);
  background: var(--accent-soft);
}

.gender-pending-icon svg {
  width: 26px;
  height: 26px;
}

.gender-pending h2 {
  margin: 4px 0 0;
  font-size: 20px;
  line-height: 1.25;
}

.gender-pending p {
  max-width: 540px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.gender-pending-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

/* Lo switch copre Italia e regione preferita; ogni altra regione resta
   raggiungibile dalla tendina affiancata. */
.rank-scope-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
}

.rank-scope-more-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.rank-scope-select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 6px 9px;
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.rank-scope-select:disabled {
  cursor: wait;
  opacity: .62;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: min(100%, 460px);
  border-radius: 22px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 90%, #eef7ff 10%);
  padding: 12px 14px;
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(18, 28, 26, 0.08);
}

.brand-lockup-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  flex: 0 0 auto;
  display: block;
}

.brand-lockup-copy {
  display: grid;
  gap: 2px;
}

.brand-lockup-title {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(30px, 2.8vw, 44px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.brand-lockup-subtitle {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 600;
  color: var(--muted);
  line-height: 1.2;
}

.auth-brand {
  margin-inline: auto;
  width: min(100%, 500px);
}

.hero h1 {
  margin: 10px 0 2px;
  font-size: 34px;
  line-height: 1.1;
}

.hero p {
  margin: 8px 0;
  color: var(--muted);
}

.meta {
  font-size: 13px;
}

.search-scope-note {
  margin-top: -2px;
}

#dashboard-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  align-items: end;
  gap: 8px;
}

#dashboard-search-form>label {
  grid-column: 1 / -1;
}

#dashboard-search-form>.athlete-search-control,
#dashboard-search-form>#search {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  min-width: 0;
}

#dashboard-search-form>button[type="submit"] {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  height: 44px;
  min-height: 44px;
  padding-block: 0;
}

#dashboard-search-form>.search-meta-details {
  display: contents;
}

.search-meta-details>summary {
  display: inline-grid;
  grid-column: 3;
  grid-row: 2;
  width: 44px;
  height: 44px;
  min-height: 44px;
  align-self: end;
  margin: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 0;
  background: color-mix(in srgb, var(--card) 92%, var(--accent-soft) 8%);
  color: var(--accent);
  box-shadow: var(--control-shadow);
  cursor: pointer;
  list-style: none;
}

.search-meta-details>summary::-webkit-details-marker {
  display: none;
}

.search-meta-details>summary:hover,
.search-meta-details[open]>summary {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
  background: var(--accent-soft);
}

.search-meta-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-meta-details:not([open])>.search-meta-content {
  display: none;
}

.search-meta-content {
  grid-column: 1 / -1;
  padding: 7px 9px 1px;
}

#dashboard-search-form>.inline-loading {
  grid-column: 1 / -1;
}

.search-meta-content .meta {
  margin: 8px 0;
}

.message {
  background: var(--warn);
  border: 1px solid #efdca0;
  border-radius: 8px;
  padding: 8px 10px;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 2px solid var(--loading-track);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: loadingSpin 0.72s linear infinite;
}

.inline-loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  min-width: 30px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.is-submitting .inline-loading,
.is-loading .inline-loading,
.is-busy .inline-loading {
  display: inline-flex;
}

/* Navigazione fra le pagine (app_ui.js): lo skeleton della pagina di arrivo
   prende subito il posto della colonna del contenuto, con il titolo della
   sezione quando e' una voce del menu. Menu laterale, tab bar e sheet "Altro"
   restano sopra e usabili; posizione e margini arrivano dal <main> attuale. */
.app-loading-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--loading-left, 0px);
  z-index: 150;
  width: var(--loading-width, 100%);
  overflow: hidden;
  padding: var(--loading-pad-top, 18px) var(--loading-pad-right, 0px) 0 var(--loading-pad-left, 0px);
  background: linear-gradient(180deg, #fbfcfd 0%, var(--bg) 280px, var(--bg) 100%);
  pointer-events: none;
}

.app-loading-overlay[hidden] {
  display: none;
}

.page-skeleton {
  display: grid;
  gap: 14px;
  animation: pageSkeletonIn 0.14s ease-out;
}

.page-skeleton-hero {
  display: grid;
  justify-items: start;
  gap: 9px;
}

.page-skeleton-kicker {
  width: 112px;
  height: 11px;
}

.page-skeleton-title {
  display: none;
  margin: 2px 0 4px;
  color: var(--ink);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.page-skeleton-title-bar {
  width: min(280px, 64%);
  height: 32px;
}

.app-loading-overlay.has-title .page-skeleton-title {
  display: block;
}

.app-loading-overlay.has-title .page-skeleton-title-bar {
  display: none;
}

.page-skeleton-hero .skeleton-lines {
  width: min(560px, 100%);
  margin-top: 2px;
}

.page-skeleton-hero .skeleton-pills {
  margin: 4px 0 0;
}

@keyframes pageSkeletonIn {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@keyframes loadingSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Dashboard: skeleton delle sezioni dell'atleta finche' il contenuto, chiesto a
   parte, non arriva. Le tinte nascono da inchiostro e card, quindi seguono il
   tema chiaro e scuro senza colori propri. */
.skeleton-block {
  --skeleton-base: color-mix(in srgb, var(--ink) 8%, var(--card) 92%);
  --skeleton-shine: color-mix(in srgb, var(--ink) 3%, var(--card) 97%);
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 37%, var(--skeleton-base) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
}

.skeleton-card h2 {
  color: var(--muted);
}

.skeleton-title {
  width: min(320px, 60%);
  height: 22px;
}

.skeleton-lines,
.skeleton-rows {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.skeleton-rows {
  gap: 8px;
}

.skeleton-line {
  height: 12px;
}

.skeleton-line:nth-child(3n + 2) {
  width: 82%;
}

.skeleton-line:nth-child(3n) {
  width: 58%;
}

.skeleton-row {
  height: 34px;
}

.skeleton-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.skeleton-pill {
  width: 76px;
  height: 30px;
  border-radius: 999px;
}

.skeleton-figure {
  width: 132px;
  height: 56px;
  margin: 6px 0 4px;
  border-radius: 12px;
}

.skeleton-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.skeleton-panel {
  min-height: 112px;
  border-radius: 12px;
}

.skeleton-field {
  height: 40px;
  margin-top: 12px;
  border-radius: 10px;
}

@keyframes skeletonShimmer {
  from {
    background-position: 100% 50%;
  }

  to {
    background-position: 0 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-block,
  .page-skeleton {
    animation: none;
  }

  .skeleton-block {
    background: var(--skeleton-base);
  }
}

.dashboard-load-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-load-error p {
  margin: 0;
}

.record-alert {
  margin: 6px 0 10px;
  background: #eaf8ef;
  border: 1px solid #b9e4c6;
  color: #155a30;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
}

.athlete-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}

.athlete-form label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.athlete-form input {
  min-width: 280px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
}

.athlete-form select {
  min-width: 280px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: #fff;
}

.athlete-form button {
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  padding: 10px 14px;
  font-weight: 600;
  font: inherit;
  cursor: pointer;
}

.athlete-form button:hover {
  filter: brightness(1.06);
}

.athlete-form button:disabled,
.fav-btn:disabled,
.database-download-button:disabled,
.rank-tab:disabled,
.jump-to-me-btn:disabled {
  opacity: 0.58;
  cursor: wait;
}

.fav-inline-form {
  margin: 0;
}

.fav-btn {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 9px;
  padding: 7px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.fav-btn.secondary {
  background: transparent;
  color: var(--accent);
}

.fav-btn.danger {
  background: #a93939;
  border-color: #a93939;
  color: #fff;
}

.h2h-card .table-wrap table {
  min-width: 0;
}

.h2h-card .table-wrap td {
  white-space: normal;
}

#h2h-card-section {
  grid-column: 1 / -1;
}

.h2h-summary-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.3fr) minmax(260px, 0.9fr);
  gap: 12px;
  margin: 10px 0 12px;
}

.h2h-summary-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 90%, #eef5ff 10%);
  padding: 12px;
}

.h2h-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.h2h-kpi-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 8px;
}

.h2h-kpi-box span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.h2h-kpi-box strong {
  display: block;
  margin-top: 3px;
  font-size: 24px;
  line-height: 1;
}

.h2h-kpi-win strong {
  color: #1c8c60;
}

.h2h-kpi-loss strong {
  color: #c54545;
}

.h2h-pie-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.h2h-pie {
  width: 114px;
  height: 114px;
  border-radius: 50%;
  border: 1px solid var(--line);
  position: relative;
}

.h2h-pie.is-ready {
  background: conic-gradient(#1c8c60 0 var(--h2h-win), #c54545 var(--h2h-win) 100%);
}

.h2h-pie.is-empty {
  background: conic-gradient(#7b8894 0 100%);
}

.h2h-pie-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
}

.h2h-pie-legend {
  display: grid;
  gap: 6px;
}

.h2h-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.h2h-dot-win {
  background: #1c8c60;
}

.h2h-dot-loss {
  background: #c54545;
}

.h2h-table-wrap td {
  white-space: nowrap;
}

.h2h-outcome-pill {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.h2h-outcome-win {
  background: #e7f7ee;
  border-color: #b8e3cb;
  color: #1d7750;
}

.h2h-outcome-loss {
  background: #fdecec;
  border-color: #efbcbc;
  color: #a43232;
}

.h2h-outcome-unknown {
  background: #eef2f7;
  border-color: #d5dce7;
  color: #5e6f80;
}

.h2h-row-win td {
  background: color-mix(in srgb, #1c8c60 10%, transparent);
}

.h2h-row-loss td {
  background: color-mix(in srgb, #c54545 9%, transparent);
}

.default-pill {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid #9bcfb7;
  background: #dff3e9;
  color: #1b664a;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 800;
}

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.grid>* {
  min-width: 0;
}

.summary-grid .card p {
  margin: 6px 0;
}

.live-focus {
  border: 1px solid #cddaf0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%);
  padding: 12px;
  margin-bottom: 10px;
}

.live-focus-label {
  font-size: 12px;
  color: #4f6483;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.live-focus-rank {
  font-size: 52px;
  line-height: 1;
  font-weight: 800;
  color: #122443;
}

.live-focus-sub {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-focus-vs {
  font-size: 13px;
  color: #4f6483;
  font-weight: 600;
}

.live-scope-panel {
  display: none;
}

.live-scope-panel.active {
  display: block;
}

.live-quick-stats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 8px;
}

.live-quick-stats-record {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.live-stat {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
}

.live-stat>span {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.live-stat strong {
  font-size: 20px;
  line-height: 1.1;
}

.live-stat-value {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.live-stat .live-points-delta {
  display: inline-flex;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.live-stat-record {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line) 66%);
  background: color-mix(in srgb, var(--accent-soft) 52%, #ffffff 48%);
}

.live-stat-record strong {
  color: var(--accent);
}

.live-stat-record small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}

.athlete-static-card {
  background: linear-gradient(135deg, #f7fbff 0%, #ffffff 100%);
  padding: 12px 14px;
}

.athlete-static-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
}

.athlete-static-card[open]>.athlete-static-title-row {
  margin-bottom: 7px;
}

.athlete-static-title-row::-webkit-details-marker {
  display: none;
}

.athlete-static-card:not([open])>.athlete-static-content {
  display: none;
}

.athlete-static-chevron {
  display: block;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 7px;
  padding: 5px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: var(--accent-soft);
  transition: transform 0.16s ease;
}

.athlete-static-card[open] .athlete-static-chevron {
  transform: rotate(180deg);
}

.athlete-static-head {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid #c8ddeb;
  background: #eef6fc;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.athlete-official-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}

.athlete-official-link:hover {
  color: color-mix(in srgb, var(--accent) 72%, var(--ink) 28%);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.athlete-official-link .icon-link {
  width: 14px;
  height: 14px;
}

.athlete-static-card>.meta {
  margin: 2px 0 8px;
}

.athlete-static-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.athlete-field {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  padding: 7px 9px;
}

.athlete-field-name,
.athlete-field-club {
  grid-column: span 2;
}

.athlete-label {
  font-size: 10px;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.athlete-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.athlete-value-club {
  font-size: 14px;
  line-height: 1.15;
}

.athlete-default-note {
  margin: 5px 0 0;
  font-size: 11px;
}

.athlete-category-box {
  margin-top: 12px;
  border: 1px solid #c8ddeb;
  border-radius: 12px;
  background: #f4f9ff;
  padding: 10px 12px;
}

.athlete-category-box .meta {
  margin: 6px 0;
}

.category-range {
  color: #4f6483;
}

.summary-grid h2,
.grid h2,
.card h2 {
  margin: 0 0 10px;
}

.ranking-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ranking-card-head h2 {
  margin-bottom: 0;
}

.ranking-share-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--control-bg);
  color: var(--accent);
  box-shadow: var(--control-shadow);
  cursor: pointer;
}

.ranking-share-btn svg {
  width: 19px;
  height: 19px;
}

.ranking-share-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--control-border) 55%);
  background: var(--control-bg-hover);
  color: var(--ink);
}

.rank-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}

.rank-tab {
  border: 1px solid #c8ddeb;
  background: #f1f7fb;
  color: var(--accent);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.rank-tab.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #ffffff 12%) 0%, var(--accent) 100%);
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 78%, #082a73 22%);
  font-weight: 800;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 34%, transparent), 0 6px 14px rgba(8, 42, 115, 0.2);
}

.rank-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rank-tab.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rank-tab-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.rank-tab-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.65);
  animation: rank-live-dot-pulse 1.2s ease-in-out infinite;
}

@keyframes rank-live-dot-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.65);
  }

  50% {
    opacity: 0.35;
    transform: scale(0.78);
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
  }
}

.rank-panel {
  display: none;
}

.rank-panel.active {
  display: block;
}

/* Classifiche: tabella piu' alta per vedere piu' atleti in una schermata. */
.rank-panel .table-wrap {
  max-height: min(85vh, 1400px);
}

/* Barra strumenti classifiche: ricerca a sinistra, scorciatoie a destra. */
.rank-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}

.rank-toolbar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line) 72%);
  border-radius: 11px;
  padding: 7px;
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 92%, var(--accent-soft) 8%);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  list-style: none;
}

.rank-toolbar-toggle-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 8px;
  color: var(--accent);
  background: var(--accent-soft);
}

.rank-toolbar-toggle-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rank-toolbar[hidden] {
  display: none;
}

.classifiche-controls-row>.rank-toolbar {
  margin: 8px 0 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--card) 96%, var(--bg) 4%);
}

.rank-toolbar .classifiche-jump-wrap {
  margin: 0;
}

.rank-toolbar>.rank-scope-more {
  flex: 1 1 230px;
  max-width: 360px;
}

.rank-toolbar>.rank-scope-more .rank-scope-select {
  min-width: 140px;
}

.rank-pagination {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
}

.rank-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.rank-page-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
  background: color-mix(in srgb, var(--accent) 10%, var(--card) 90%);
}

.rank-page-btn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.rank-page-status {
  min-width: 190px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.rank-page-loading .rank-panel.active .table-wrap {
  opacity: 0.62;
  transition: opacity 0.15s ease;
}

/* Ricerca "trova in pagina": evidenzia e scorre alla riga trovata. */
.rank-find {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.rank-find-input {
  flex: 0 1 320px;
  min-width: 0;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
}

.rank-find-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
}

.rank-find-count {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.rank-find-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rank-find-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.rank-find-nav-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
  background: color-mix(in srgb, var(--accent) 10%, var(--card) 90%);
}

.jump-wrap {
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
  justify-content: flex-end;
}

.classifiche-jump-wrap {
  grid-column: 1 / -1;
  width: 100%;
  margin-left: auto;
}

.nearby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.nearby-header h2 {
  margin-bottom: 0;
}

.nearby-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.nearby-rankings-link,
.rank-entries-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line) 72%);
  border-radius: 9px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--card) 94%, var(--accent-soft) 6%);
  color: var(--accent);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

/* Il filtro iscrizioni vive dentro la barra strumenti, accanto a ricerca e
   paginazione: resta una pill compatta senza perdere leggibilita'. */
.rank-toolbar>.rank-entries-filter {
  flex: 0 0 auto;
  order: -1;
}

.rank-entries-filter {
  gap: 5px;
  min-height: 30px;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 10.5px;
  letter-spacing: .01em;
}

.nearby-rankings-link:hover,
.rank-entries-filter:hover,
.rank-entries-filter.is-active {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line) 38%);
  background: var(--accent-soft);
}

.rank-entries-filter.is-active {
  color: var(--on-accent);
  background: var(--accent);
}

.rank-entries-filter svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nearby-jump-wrap {
  margin: 0;
}

.jump-to-me-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #9ec4d3;
  background: transparent;
  color: var(--accent);
  border-radius: 8px;
  min-height: 32px;
  padding: 0 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.jump-to-me-btn:hover {
  border-color: var(--accent);
  color: #0c556b;
}

.jump-to-me-btn:active {
  opacity: 0.85;
}

.jump-to-me-btn:focus-visible {
  outline: 2px solid #b6dce8;
  outline-offset: 2px;
}

.mini-chart {
  display: grid;
  gap: 8px;
}

.results-insights-card {
  display: grid;
  gap: 16px;
}

.results-insights-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.results-insights-header h2 {
  margin-bottom: 4px;
}

.summary-mode-controls {
  display: grid;
  justify-self: end;
  justify-items: end;
  align-content: start;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
}

.summary-mode-controls .rank-switch {
  justify-self: end;
  margin-bottom: 0;
}

.summary-mode-hint {
  justify-self: end;
  max-width: min(100%, 520px);
  margin: 0;
  text-align: right;
}

.results-viz-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 14px;
}

.results-viz-block {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding-top: 2px;
}

.results-viz-block h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.results-viz-block-wide {
  grid-column: 1 / -1;
}

.results-viz-block-wide p {
  margin: 0;
}

.pie-wrap {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: center;
}

.pie-chart {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 1px solid var(--line);
  position: relative;
}

.pie-points {
  background:
    conic-gradient(#f97316 0 var(--p1),
      #7c3aed var(--p1) calc(var(--p1) + var(--p2)),
      #facc15 calc(var(--p1) + var(--p2)) 100%);
}

.pie-results {
  background:
    conic-gradient(#1f9d55 0 var(--p1),
      #b23c3c var(--p1) 100%);
}

.pie-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}

.pie-legend {
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dot {
  width: 11px;
  height: 11px;
  min-width: 11px;
  min-height: 11px;
  flex: 0 0 11px;
  border-radius: 50%;
  display: inline-block;
}

.dot-team {
  background: #1f9d55;
}

.dot-team-points {
  background: #f97316;
}

.dot-individual {
  background: #7c3aed;
}

.dot-bonus {
  background: #facc15;
}

.dot-loss {
  background: #b23c3c;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr 64px;
  gap: 10px;
  align-items: center;
}

.bar-label {
  font-size: 13px;
  color: var(--muted);
}

.bar-track {
  height: 13px;
  background: #eaf0f8;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0f6a87, #1594ba);
}

.bar-fill.alt {
  background: linear-gradient(90deg, #38bdf8, #0ea5e9);
}

.bar-fill.team {
  background: linear-gradient(90deg, #f97316, #fb923c);
}

.bar-fill.individual {
  background: linear-gradient(90deg, #7c3aed, #8b5cf6);
}

.bar-value {
  text-align: right;
  font-weight: 600;
}

.tournament-slots-card {
  display: grid;
  gap: 16px;
  overflow: hidden;
}

.slot-card-header {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}

.slot-card-header h2 {
  margin-bottom: 4px;
}

.slot-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 12px;
}

.slot-summary-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 188px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 17px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.slot-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.slot-summary-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.slot-mini-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.slot-summary-value {
  color: var(--ink);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  min-height: 38px;
}

.slot-summary-value span {
  color: var(--muted);
  font-size: 20px;
  font-weight: 700;
}

.slot-summary-meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  gap: 6px;
}

.slot-summary-meta span,
.slot-detail-list span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.slot-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.slot-section-heading h3 {
  margin: 0;
  font-size: 16px;
}

.slot-detail-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.slot-bonus-table-wrap table {
  min-width: 900px;
}

.slot-bonus-table-wrap th,
.slot-bonus-table-wrap td {
  vertical-align: middle;
}

.slot-bonus-table-wrap td:nth-child(2) {
  white-space: nowrap;
}

.slot-bonus-table-wrap td:nth-child(3) {
  min-width: 280px;
  max-width: 360px;
}

.slot-bonus-table-wrap tr.slot-row-valido td {
  background: color-mix(in srgb, #1f9d55 7%, transparent);
}

.slot-bonus-table-wrap tr.slot-row-valido td:first-child {
  box-shadow: inset 3px 0 0 color-mix(in srgb, #1f9d55 60%, transparent);
}

.slot-bonus-table-wrap tr.slot-row-non-valido {
  opacity: 0.6;
}

.slot-bonus-table-wrap tr.slot-row-non-valido td {
  background: color-mix(in srgb, var(--muted) 6%, transparent);
}

.slot-bonus-theoretical {
  color: var(--muted);
  font-weight: 800;
}

.slot-period {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  min-width: 68px;
  padding: 3px 8px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.slot-period-recente {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line) 58%);
  color: var(--accent);
}

.slot-period-live,
.result-live-badge {
  border-color: color-mix(in srgb, #ef4444 58%, var(--line) 42%);
  color: #b91c1c;
  background: color-mix(in srgb, #fee2e2 82%, transparent);
}

.result-live-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  margin-left: 6px;
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  vertical-align: middle;
}

.recent-tournament-status {
  flex: 0 0 auto;
}

/* Marker LIVE omologato in tutta l'app: pallino rosso pulsante condiviso */
.result-live-badge::before,
.slot-period-live::before,
.calendar-status-badge.status-live::before,
.calendar-day-status.status-live::before {
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #ef4444;
  content: "";
  animation: rank-live-dot-pulse 1.2s ease-in-out infinite;
}

.slot-period-storico {
  border-color: color-mix(in srgb, var(--muted) 45%, var(--line) 55%);
}

/* Cella "Evento" con titolo (nome evento, grassetto) + sottotitolo (tipo gara).
   Stile condiviso da tutte le tabelle risultati della dashboard. */
.event-cell-title,
.event-cell-sub {
  display: block;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-cell-titlerow {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 340px;
}

/* Titolo nel flex-row: consenti l'ellissi accanto al badge LIVE. */
.event-cell-titlerow .event-cell-title {
  min-width: 0;
  flex: 0 1 auto;
}

/* Nel flex-row il bottone classifica non deve restringersi (altrimenti l'icona
   appare schiacciata accanto a titoli lunghi); qui è centrato verticalmente,
   quindi niente margin-top come nella sezione risultati. */
.event-cell-titlerow .admin-results-standings-btn {
  flex: 0 0 auto;
  margin-top: 0;
}

.event-cell-title {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
}

/* Titolo cliccabile quando il torneo e' ancora in calendario: apre il dettaglio
   con il tabellone archiviato, anche per le righe dello Storico. */
a.event-cell-title {
  text-decoration: none;
}

a.event-cell-title:hover,
a.event-cell-title:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.event-cell-sub {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.slot-status {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  background: #f8fafc;
  white-space: nowrap;
}

.slot-status-valido {
  border-color: color-mix(in srgb, #1f9d55 46%, var(--line) 54%);
  color: #1f7a45;
  background: #eefaf3;
}

.slot-status-non-valido {
  border-color: var(--line);
  color: var(--muted);
  background: #f1f3f5;
}

.slot-status-storico {
  border-color: color-mix(in srgb, var(--muted) 45%, var(--line) 55%);
  color: var(--muted);
  background: #fff;
}

.best-live-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.best-live-card {
  margin-bottom: 0;
}

.best-live-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.best-live-athlete-box {
  border: 1px solid #cddaf0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
  padding: 10px 12px;
}

.best-live-card .best-live-athlete-box:not(:last-of-type) {
  margin-bottom: 10px;
}

.best-live-athlete-name {
  font-size: 18px;
  font-weight: 700;
  color: #122443;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.best-live-athlete-meta {
  font-size: 14px;
  color: #4f6483;
  margin: 2px 0;
}

.best-live-rank-card .best-live-athlete-box:first-of-type {
  margin-top: 8px;
}

.best-live-improve {
  color: #0f6a2f;
  font-weight: 700;
}

/* ===== Sezione Statistiche ===== */
.stat-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.stat-mode-controls {
  display: grid;
  flex: 1 1 100%;
  gap: 6px;
  min-width: 0;
}

.stat-mode-controls>.rank-switch {
  justify-self: start;
}

/* Anche le Statistiche montano il menu ambito condiviso: qui gli sta accanto
   lo spinner del refresh asincrono. */
.stat-scope-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Riga propria sotto lo switch periodo, come nelle Classifiche: in linea il
     menu resterebbe schiacciato e la tendina illeggibile. */
  flex: 1 1 100%;
  min-width: 0;
  margin: 4px 0 0;
}

.stat-mode-hint {
  margin: 0;
}

.statistics-sections {
  display: grid;
  gap: 28px;
}

.statistics-section {
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.statistics-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.statistics-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.statistics-section-head h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
  align-items: stretch;
}

.stat-card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.stat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stat-card-head h3 {
  margin: 0;
  font-size: 16px;
}

.stat-unit-chip {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
}

.stat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.stat-podium {
  flex: 1 1 auto;
  align-content: start;
}

.stat-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 92%, var(--bg) 8%);
}

.stat-item.stat-rank-1 {
  border-color: color-mix(in srgb, #e2b530 55%, var(--line) 45%);
  background: linear-gradient(160deg, color-mix(in srgb, #f6e6ad 40%, var(--card) 60%) 0%, var(--card) 100%);
}

.stat-item.stat-rank-2 {
  border-color: color-mix(in srgb, #9fb2c2 55%, var(--line) 45%);
  background: linear-gradient(160deg, color-mix(in srgb, #dbe4ec 45%, var(--card) 55%) 0%, var(--card) 100%);
}

.stat-item.stat-rank-3 {
  border-color: color-mix(in srgb, #cd8b52 50%, var(--line) 50%);
  background: linear-gradient(160deg, color-mix(in srgb, #eecbaa 42%, var(--card) 58%) 0%, var(--card) 100%);
}

.stat-badge {
  min-width: 1.8em;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
}

.stat-rank-1 .stat-badge,
.stat-rank-2 .stat-badge,
.stat-rank-3 .stat-badge {
  font-size: 19px;
}

.stat-item-main {
  min-width: 0;
}

.stat-item-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.stat-item-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.stat-item-value {
  flex: none;
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
}

.stat-more-btn {
  width: 100%;
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 90%, var(--bg) 10%);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.stat-more-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--card) 45%);
}

.stat-unavailable {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  font-style: italic;
}

/* Modal top 10 */
.stat-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
}

.stat-modal[hidden] {
  display: none !important;
}

.stat-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 14, 0.56);
}

.stat-modal-dialog {
  position: relative;
  width: min(100%, 560px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.35);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.stat-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stat-modal-head h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
}

.stat-modal-note {
  margin: 0;
}

.stat-modal-close {
  flex: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 90%, var(--bg) 10%);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
}

.stat-modal-close:hover {
  border-color: var(--accent);
}

@media (max-width: 620px) {
  .statistics-grid {
    grid-template-columns: 1fr;
  }
}

.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  max-height: 420px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.table-wrap.small {
  max-height: 320px;
}

.admin-results-table-wrap {
  max-height: 680px;
}

.table-mobile-scroll {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Tabelle a colonna singola (es. "Atleti Club"): niente min-width, cosi' non
   generano uno scroll orizzontale inutile. La specificita' (3 classi) batte
   sia la base `table { min-width }` sia `.table-mobile-scroll table` mobile. */
.table-wrap.table-natural table {
  min-width: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 620px;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #eaf1f9;
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 8px;
  /* Le intestazioni sono etichette brevi: non devono spezzarsi (la .card
     imposta overflow-wrap:anywhere, ereditato, che senza questo le
     spaccherebbe carattere per carattere quando la colonna e' stretta su
     mobile). La tabella scrolla orizzontalmente in .table-wrap. */
  white-space: nowrap;
}

td {
  border-bottom: 1px solid #edf1f7;
  padding: 7px 8px;
  white-space: nowrap;
}

.rank-scope-pos {
  font-weight: 800;
}

/* Punteggio mostrato accanto al nome atleta: su desktop c'e' gia' la colonna
   "Punti", quindi resta nascosto; su mobile lo si vede sulla stessa riga. */
.rank-inline-points {
  display: none;
}

@media (max-width: 900px) {
  .rank-inline-points {
    display: inline-block;
    margin: 0 0 0 6px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--accent);
    vertical-align: baseline;
    white-space: nowrap;
  }

  /* Le tabelle compatte secondarie mantengono il punteggio accanto al nome.
     Nella pagina Classifiche resta invece una colonna autonoma. */
  .table-wrap:has(.rank-inline-points):not(.rankings-table-mobile) thead th:nth-child(3),
  .table-wrap:has(.rank-inline-points):not(.rankings-table-mobile) tbody td:nth-child(3) {
    display: none;
  }
}

.rank-national-pos {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
  line-height: 1.15;
  white-space: nowrap;
}

.upcoming-entry-popover {
  position: relative;
  display: inline-block;
}

.upcoming-entry-popover summary {
  list-style: none;
}

.upcoming-entry-popover summary::-webkit-details-marker {
  display: none;
}

.upcoming-entry-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #0f6a87 42%, var(--line) 58%);
  background: #eef8fb;
  color: #0f637c;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}

.upcoming-entry-badge:hover,
.upcoming-entry-popover[open] .upcoming-entry-badge {
  border-color: #0f6a87;
  background: #e2f3f8;
  color: #0d5368;
}

.upcoming-entry-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  z-index: 30;
  width: min(320px, 78vw);
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid color-mix(in srgb, #0f6a87 28%, var(--line) 72%);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 12px 28px rgba(22, 34, 51, 0.16);
  white-space: normal;
  text-align: left;
}

.upcoming-entry-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

/* Intestazione del pannello: l'atleta e' il titolo, "Prossimi tornei" scende
   a sottotitolo. */
.upcoming-entry-panel-heading {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.upcoming-entry-panel-heading strong {
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.upcoming-entry-panel-subtitle {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.upcoming-entry-close {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.upcoming-entry-modal-backdrop {
  display: none;
}

.upcoming-entry-modal-backdrop[hidden] {
  display: none !important;
}

.upcoming-entry-panel::before {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 22px;
  width: 10px;
  height: 10px;
  border-right: 1px solid color-mix(in srgb, #0f6a87 28%, var(--line) 72%);
  border-bottom: 1px solid color-mix(in srgb, #0f6a87 28%, var(--line) 72%);
  background: var(--card);
  transform: rotate(45deg);
}

.upcoming-entry-popover-below .upcoming-entry-panel {
  top: calc(100% + 7px);
  bottom: auto;
}

.upcoming-entry-popover-below .upcoming-entry-panel::before {
  top: -6px;
  bottom: auto;
  transform: rotate(225deg);
}

.upcoming-entry-event+.upcoming-entry-event {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.upcoming-entry-date {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.upcoming-entry-title {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
  white-space: normal;
}

a.upcoming-entry-title:hover {
  color: var(--accent);
  text-decoration: underline;
}

.upcoming-entry-competition {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  white-space: normal;
}

.upcoming-entry-empty {
  color: var(--muted);
}

/* Colonna Info delle classifiche: link alla scheda ufficiale e, con il filtro
   iscrizioni attivo, la pill dei prossimi tornei dell'atleta. */
.rank-info-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.upcoming-entry-more {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.invoice-table {
  min-width: 0;
  table-layout: fixed;
}

.invoice-table th,
.invoice-table td {
  white-space: normal;
  overflow-wrap: anywhere;
}

.invoice-table th:nth-child(1),
.invoice-table td:nth-child(1) {
  width: 30%;
}

.invoice-table th:nth-child(2),
.invoice-table td:nth-child(2) {
  width: 18%;
}

.invoice-table th:nth-child(3),
.invoice-table td:nth-child(3) {
  width: 22%;
}

.invoice-table th:nth-child(4),
.invoice-table td:nth-child(4) {
  width: 16%;
}

.invoice-table th:nth-child(5),
.invoice-table td:nth-child(5) {
  width: 14%;
  min-width: 108px;
}

.invoice-download-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
}

.invoice-download-link:visited,
.invoice-download-link:active {
  color: var(--ink);
}

.invoice-download-link:hover {
  color: var(--accent);
}

.invoice-download-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.delta-pill {
  display: inline-block;
  min-width: 54px;
  text-align: center;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.delta-pos {
  color: #0f6a2f;
  background: #e9f8ee;
  border-color: #b7e5c4;
}

.delta-neg {
  color: #a72121;
  background: #fdecec;
  border-color: #f5bcbc;
}

.delta-zero {
  color: #4f637d;
  background: #eef3f9;
  border-color: #cfdaea;
}

.delta-points-note {
  margin-left: 4px;
  font-size: 11px;
  font-style: italic;
  color: #6a7f9f;
  white-space: nowrap;
}

.info-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #c8ddeb;
  background: #f1f7fb;
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
}

.info-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.icon-link {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Nomi degli atleti collegati alla Dashboard: restano del colore del testo
   intorno, cosi' si leggono come nomi e non come link sparsi; la
   sottolineatura leggera dice che si aprono, anche senza hover. */
.club-athlete-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.12s ease;
}

.club-athlete-link:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

/* Nome atleta senza scheda (piano Free): stesso peso del link, colore del testo. */
.rank-athlete-name {
  font-weight: 600;
}

.club-row-me td {
  background: #fff7df !important;
  font-weight: 700;
}

.club-row-me td:first-child {
  border-left: 5px solid #d97706;
}

.club-row-me .club-athlete-link {
  color: #9a4f00;
}

tr.me {
  background: #eef7ff;
  font-weight: 600;
}

/* Link interno verso un dettaglio ("Dettagli torneo →", "Dettagli campionato →"):
   stesso aspetto in Dashboard, Risultati e Preferiti. I link esterni usano ↗. */
.detail-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

.detail-link:hover,
.detail-link:focus-visible {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.recent-matches-table .detail-link {
  margin-top: 5px;
}

.recent-esito-cell {
  text-align: center;
  font-weight: 700;
}

/* Colonna riepilogativa riservata alla riga compatta mobile. */
.recent-mobile-points {
  display: none;
}

.recent-points-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

.recent-points-positive {
  border-color: color-mix(in srgb, var(--success) 30%, var(--line) 70%);
  background: var(--success-soft);
  color: var(--success);
}

.recent-points-zero {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
}

/* Punti vittoria nel riepilogo incontri. */
.pts-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.recent-esito-win {
  color: #159447;
}

.recent-esito-loss {
  color: #c54545;
}

tr.row-focus {
  animation: rowFlash 1s ease;
}

/* Risultato della ricerca "trova in pagina": evidenziazione persistente. */
tr.rank-find-hit td {
  background: color-mix(in srgb, #fde68a 55%, var(--card) 45%);
}

tr.rank-find-hit td:first-child {
  box-shadow: inset 3px 0 0 #f59e0b;
}

/* Risultato "corrente" durante la navigazione su/giu tra i match filtrati. */
tr.rank-find-current td {
  background: color-mix(in srgb, #f59e0b 32%, var(--card) 68%);
}

tr.rank-find-current td:first-child {
  box-shadow: inset 4px 0 0 #d97706;
}

@keyframes rowFlash {
  0% {
    background: #fff7d6;
  }

  100% {
    background: #eef7ff;
  }
}

.error {
  border-color: #e56b6b;
  color: #7d1212;
  background: #ffeded;
}

.auth-body {
  background: var(--auth-bg);
}

.auth-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 16px 36px;
}

.auth-hero {
  text-align: center;
  margin-bottom: 16px;
}

.auth-hero h1 {
  margin: 8px 0 4px;
}

.auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.auth-card {
  margin-bottom: 0;
}

.auth-form {
  display: grid;
  gap: 8px;
}

.auth-message-success {
  border-color: color-mix(in srgb, var(--success) 40%, var(--line) 60%);
  color: var(--success);
  background: var(--success-soft);
}

.auth-verification-resend {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.auth-verification-resend p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.auth-form .auth-resend-button {
  border-color: var(--control-border);
  color: var(--ink);
  background: var(--control-bg);
  box-shadow: var(--control-shadow);
}

.auth-form .auth-resend-button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--control-border) 55%);
  color: var(--accent);
  background: var(--control-bg-hover);
  box-shadow: var(--control-shadow);
}

.auth-form label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.auth-form input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
}

.auth-form button,
.settings-form button {
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  padding: 10px 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.settings-form {
  display: grid;
  gap: 12px;
}

.settings-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: auto;
  inline-size: fit-content;
  max-width: 100%;
  min-height: 42px;
  padding-inline: 16px;
  text-align: center;
}

.admin-results-filter {
  grid-template-columns: minmax(220px, 1fr) minmax(130px, auto) auto;
  align-items: end;
}

.admin-results-page,
.admin-results-page .card,
.admin-results-filter label {
  min-width: 0;
}

.admin-results-filter input[type="search"],
.admin-results-filter select,
.admin-results-inline-form input,
.admin-results-inline-form select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 9px;
  font: inherit;
  font-size: 12px;
  background: var(--card);
  color: var(--ink);
  min-width: 0;
}

.admin-results-filter input[type="search"],
.admin-results-filter select,
.admin-results-inline-form input,
.admin-results-inline-form select {
  width: 100%;
}

.admin-results-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}

.admin-results-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-results-section-head h2 {
  margin: 0;
}

/* "Gare in corso": titolo + marker Live + conteggio raggruppati e vicini a
   sinistra, invece di sparpagliati dallo space-between della section-head. */
.admin-results-live-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-results-live-heading .result-live-badge {
  margin-left: 0;
}

.admin-results-switch {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  background: color-mix(in srgb, var(--card) 90%, var(--accent-soft) 10%);
}

.admin-results-switch-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.admin-results-switch-link.active {
  background: var(--accent);
  color: #fff;
}

.admin-results-detail-search {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 5px;
  min-width: min(320px, 100%);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-results-detail-search label {
  grid-column: 1 / -1;
}

.admin-results-detail-search input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 9px;
  font: inherit;
  font-size: 12px;
  background: var(--card);
  color: var(--ink);
  min-width: 0;
}

.admin-results-detail-search button {
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  padding: 8px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.admin-classification-warnings > details {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.admin-classification-warnings summary {
  cursor: pointer;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.admin-classification-warnings summary::marker {
  color: var(--accent);
}

.admin-results-table,
.admin-results-competitions-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-results-competitions-table {
  min-width: 1480px;
}

.admin-results-corrections-table {
  min-width: 1280px;
}

.admin-results-table th,
.admin-results-table td,
.admin-results-competitions-table th,
.admin-results-competitions-table td {
  vertical-align: top;
}

.admin-results-table th,
.admin-results-competitions-table th {
  white-space: nowrap;
}

.admin-results-table td,
.admin-results-competitions-table td {
  font-size: 12px;
  line-height: 1.35;
}

.admin-results-competitions-table .col-date,
.admin-results-corrections-table .col-date {
  width: 92px;
}

.admin-results-competitions-table .col-kind,
.admin-results-corrections-table .col-kind {
  width: 104px;
}

.admin-results-competitions-table .col-event {
  width: 240px;
}

.admin-results-competitions-table .col-competition {
  width: 210px;
}

.admin-results-competitions-table .col-region {
  width: 160px;
}

.admin-results-competitions-table .col-classification {
  width: 250px;
}

.admin-results-competitions-table .col-bucket {
  width: 150px;
}

.admin-results-competitions-table .col-override {
  width: 310px;
}

.admin-results-competitions-table .col-athletes {
  width: 88px;
}

.admin-results-corrections-table .col-event {
  width: 280px;
}

.admin-results-corrections-table .col-competition {
  width: 240px;
}

.admin-results-corrections-table .col-classification {
  width: 220px;
}

.admin-results-corrections-table .col-notes {
  width: 190px;
}

.admin-results-corrections-table .col-athletes {
  width: 96px;
}

.admin-results-text-cell,
.admin-results-muted-cell {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-results-event-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
}

.admin-results-clip-cell {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
}

.admin-results-muted-cell {
  color: var(--muted);
}

.admin-results-kind-badge,
.admin-results-bucket-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--accent-soft) 54%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-results-bucket-badge {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-results-override-cell {
  padding-top: 7px;
}

.admin-results-count-cell {
  text-align: left;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.admin-results-count-cell strong,
.admin-results-count-cell .meta {
  display: block;
}

/* La tinta verde di "corretto" resta solo nella tabella Correzioni attive:
   nella tabella Gare aggiunte le righe restano tutte bianche. */
.admin-results-corrections-table .admin-results-overridden {
  background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
}

/* Accordion Risultati: una riga "torneo" apribile che raggruppa le sue gare.
   Sfondo bianco come tutte le righe; l'affordance e' data da cursore, grassetto,
   caret e hover. */
.admin-results-tour-head {
  cursor: pointer;
}

.admin-results-tour-head:hover {
  background: color-mix(in srgb, var(--accent-soft) 30%, transparent);
}

.admin-results-tour-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.admin-results-tour-head>td {
  font-weight: 600;
}

/* Il flex va sul wrapper interno, NON sul <td>: un td in display:flex smette di
   essere una cella di tabella e il colspan verrebbe ignorato, lasciando visibili
   e vuote le colonne (Voci, Classificazione, Bucket, Override) della riga-torneo. */
.admin-results-tour-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.admin-results-tour-caret {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
  opacity: 0.7;
}

.admin-results-tour-head.is-open .admin-results-tour-caret {
  transform: rotate(90deg);
}

.admin-results-tour-name {
  flex: 1 1 auto;
}

.admin-results-tour-count {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Badge regione nella colonna Regione. I nomi lunghi (es. "Trentino-Alto
   Adige/Südtirol") vengono troncati con ellissi entro la cella, senza sbordare
   sulla colonna Atleti; il nome completo resta nel tooltip (title). */
.admin-results-region-badge {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line) 70%);
  padding: 1px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Titolo sezione + tasto espandi/comprimi tutto. */
.admin-results-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Controlli a destra della testata: filtro regione + switch tipo gara. */
.admin-results-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-results-region-filter {
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

/* Riga torneo (e relative gare) esclusa dal filtro regione. */
.admin-results-tour-head.is-filtered,
.admin-results-tour-child.is-filtered {
  display: none !important;
}

.admin-results-expand-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-results-expand-toggle:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

.admin-results-expand-toggle svg {
  width: 16px;
  height: 16px;
}

.admin-results-expand-toggle .icon-collapse {
  display: none;
}

.admin-results-expand-toggle.is-expanded .icon-expand {
  display: none;
}

.admin-results-expand-toggle.is-expanded .icon-collapse {
  display: inline;
}

/* Righe figlie (singole gare): sfondo bianco, anche quando hanno una correzione. */
.admin-results-tour-child>td {
  background: var(--card);
}

.admin-results-tour-child-gap {
  border-left: 2px solid color-mix(in srgb, var(--accent-soft) 60%, transparent);
}

/* Pulsante-icona "Classifica finale" nelle righe-gara dei tornei. */
.admin-results-standings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line) 55%);
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s ease;
}

.admin-results-standings-btn:hover {
  background: color-mix(in srgb, var(--accent-soft) 90%, transparent);
}

.admin-results-standings-btn svg {
  width: 15px;
  height: 15px;
}

/* Modal classifica finale tabellone. */
.standings-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 16, 14, 0.55);
  backdrop-filter: blur(2px);
}

/* display:flex sopra sovrascriverebbe l'attributo [hidden] del browser: lo
   ripristiniamo esplicitamente cosi' il modal resta chiuso finche' non si apre. */
.standings-modal-overlay[hidden] {
  display: none;
}

.standings-modal {
  width: min(640px, 100%);
  max-height: min(82vh, 880px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.standings-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.standings-modal-title {
  margin: 0;
  font-size: 18px;
}

.standings-modal-sub {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.standings-modal-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.standings-modal-close:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--muted) 16%, transparent);
}

.standings-modal-body {
  padding: 18px 20px 22px;
  overflow-y: auto;
}

/* Podio. */
.standings-podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: 10px;
  margin-bottom: 18px;
}

.standings-podium-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-soft) 30%, transparent);
  text-align: center;
}

.standings-podium-1 {
  order: 2;
  background: color-mix(in srgb, #f5c518 26%, var(--card));
  border-color: color-mix(in srgb, #f5c518 55%, var(--line));
  padding-top: 22px;
}

.standings-podium-2 {
  order: 1;
}

.standings-podium-3 {
  order: 3;
}

.standings-podium-medal {
  font-size: 24px;
  line-height: 1;
}

.standings-podium-names {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Sezioni per turno. */
.standings-rounds {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.standings-round {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.standings-round>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 13px;
}

.standings-round>summary::-webkit-details-marker {
  display: none;
}

.standings-round-count {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.standings-round-names {
  padding: 4px 12px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  overflow-wrap: anywhere;
}

body.standings-modal-open {
  overflow: hidden;
}

.share-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 16, 14, 0.58);
  backdrop-filter: blur(3px);
}

.share-modal-overlay[hidden] {
  display: none;
}

.share-modal {
  width: min(760px, 100%);
  max-height: min(88vh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

.share-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.share-modal-title {
  margin: 0;
  font-size: 18px;
}

.share-modal-sub {
  margin: 4px 0 0;
}

.share-modal-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--control-bg);
  color: var(--muted);
  box-shadow: var(--control-shadow);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.share-modal-close:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--control-border) 55%);
  background: var(--control-bg-hover);
  color: var(--accent);
}

.share-modal-body {
  display: grid;
  gap: 14px;
  padding: 18px 20px 20px;
  overflow-y: auto;
}

.share-graphic-frame {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 45%, transparent), transparent 42%),
    var(--surface);
  padding: 14px;
}

.share-graphic-preview {
  display: block;
  width: min(360px, 100%);
  aspect-ratio: 4 / 5;
  object-fit: contain;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: 0 16px 36px rgba(18, 28, 26, 0.18);
}

.share-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.share-actions.share-actions-single {
  grid-template-columns: 1fr;
}

.share-action-btn {
  min-height: 40px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--control-bg);
  color: var(--ink);
  box-shadow: var(--control-shadow);
  padding: 10px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.share-actions .share-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.share-action-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.share-action-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--control-border) 55%);
  background: var(--control-bg-hover);
  color: var(--accent);
}

.share-action-primary {
  border-color: color-mix(in srgb, var(--accent) 88%, #082a73 12%);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 20%, transparent);
}

.share-action-primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, #ffffff 12%);
  color: #fff;
}

.share-help,
.share-status {
  min-height: 18px;
  margin: 0;
}

.share-help {
  font-size: 11px;
  line-height: 1.45;
}

body.share-modal-open {
  overflow: hidden;
}

.database-export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.database-export-card,
.database-bundle-card {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.database-export-card {
  flex-direction: column;
}

.database-bundle-card {
  align-items: center;
}

.database-export-meta {
  display: grid;
  gap: 8px;
  margin: 0;
}

.database-export-meta div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.database-export-meta dt {
  color: var(--muted);
}

.database-export-meta dd {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  text-align: right;
}

.settings-dual-grid.settings-single-column {
  grid-template-columns: minmax(0, 1fr);
}

.database-download-button {
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  padding: 10px 14px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.database-download-button:hover {
  filter: brightness(0.95);
}

.tournament-entries-freshness {
  margin: 10px 0 0;
}

.calendar-refresh-card {
  display: grid;
  gap: 16px;
}

.calendar-refresh-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.calendar-refresh-head h2 {
  margin: 0 0 4px;
}

.calendar-refresh-head .meta {
  margin: 0;
}

.calendar-refresh-badge {
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.calendar-refresh-badge[data-status="running"] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
  color: var(--accent);
}

.calendar-refresh-badge[data-status="success"] {
  border-color: color-mix(in srgb, #16a34a 55%, var(--line) 45%);
  color: #16a34a;
}

.calendar-refresh-badge[data-status="skipped"] {
  border-color: color-mix(in srgb, #d97706 55%, var(--line) 45%);
  color: #d97706;
}

.calendar-refresh-badge[data-status="failed"] {
  border-color: color-mix(in srgb, #dc2626 55%, var(--line) 45%);
  color: #dc2626;
}

.calendar-refresh-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}

.calendar-refresh-status {
  margin: 0;
}

.calendar-refresh-log summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.calendar-refresh-log pre {
  margin: 8px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--line) 22%, var(--surface) 78%);
  padding: 10px 12px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.calendar-refresh-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}

.calendar-refresh-form {
  display: grid;
  gap: 6px;
  align-content: start;
}

.calendar-refresh-button {
  width: 100%;
}

.calendar-refresh-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.4);
  opacity: 0.6;
}

.calendar-refresh-mode-help {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.admin-results-inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  align-items: center;
  max-width: 100%;
}

.admin-results-classification-form {
  grid-template-columns: minmax(120px, 1.2fr) minmax(72px, 1fr) auto auto;
  min-width: 0;
}

.admin-results-inline-form button {
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  padding: 8px 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.admin-results-inline-form .admin-results-link-button {
  border-color: var(--line);
  background: var(--card);
  color: var(--ink);
}

/* Reset come pulsante-icona compatto: occupa poco e non sborda nella colonna
   Atleti adiacente. */
.admin-results-inline-form .admin-results-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  padding-left: 0;
  padding-right: 0;
  color: var(--muted);
}

.admin-results-inline-form .admin-results-reset-btn:hover {
  color: var(--ink);
}

.admin-results-reset-btn svg {
  width: 15px;
  height: 15px;
}

.regulation-page,
.regulation-page .card {
  min-width: 0;
}

.regulation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.regulation-panel {
  --reg-panel-color: var(--accent);
  --reg-panel-soft: var(--accent-soft);
  display: grid;
  gap: 12px;
}

.regulation-panel-green {
  --reg-panel-color: #1f7a5b;
  --reg-panel-soft: #e6f6ef;
}

.regulation-panel-blue {
  --reg-panel-color: #2f6fae;
  --reg-panel-soft: #e8f1fb;
}

.regulation-panel-amber {
  --reg-panel-color: #a86918;
  --reg-panel-soft: #fff1d9;
}

.regulation-panel-red {
  --reg-panel-color: #a94d5b;
  --reg-panel-soft: #fdebed;
}

body[data-theme="dark"] .regulation-panel-green {
  --reg-panel-color: #63c79d;
  --reg-panel-soft: #183a2c;
}

body[data-theme="dark"] .regulation-panel-blue {
  --reg-panel-color: #79aee9;
  --reg-panel-soft: #1b3048;
}

body[data-theme="dark"] .regulation-panel-amber {
  --reg-panel-color: #e0a753;
  --reg-panel-soft: #3d2d16;
}

body[data-theme="dark"] .regulation-panel-red {
  --reg-panel-color: #e28b98;
  --reg-panel-soft: #3f2027;
}

.regulation-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.regulation-panel-head h2 {
  margin: 0;
}

.regulation-small-table,
.regulation-team-table,
.regulation-bonus-table {
  width: 100%;
  table-layout: fixed;
}

.regulation-small-table {
  min-width: 360px;
}

/* Le tabelle "piccole" del regolamento hanno solo 2 colonne (Tipo + valore):
   devono stare nello schermo. La regola mobile `.table-wrap table { min-width:
   700px }` (pensata per le tabelle larghe) le forzava a 700px, gonfiando la 1a
   colonna e spingendo fuori il valore. Qui le adattiamo alla larghezza e
   teniamo la colonna del numero compatta a destra, sempre visibile. */
.regulation-small-table-wrap .regulation-small-table {
  min-width: 0;
}

.regulation-small-table th:nth-child(2),
.regulation-small-table td:nth-child(2) {
  width: 84px;
}

.regulation-small-table td {
  white-space: normal;
}

.regulation-effective-open-table,
.regulation-level-rank-table {
  min-width: 600px;
}

.regulation-effective-open-table th:nth-child(n + 2),
.regulation-effective-open-table td:nth-child(n + 2),
.regulation-level-rank-table th:nth-child(n + 2),
.regulation-level-rank-table td:nth-child(n + 2) {
  width: 190px;
}

.regulation-team-table {
  min-width: 760px;
}

.regulation-bonus-table {
  min-width: 920px;
}

.regulation-bonus-table-wrap .regulation-open-points-table {
  min-width: 1220px;
}

.regulation-open-points-table th:first-child,
.regulation-open-points-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--reg-panel-soft) 72%, var(--card) 28%);
}

.regulation-open-points-table th:nth-child(2),
.regulation-open-points-table td:nth-child(2),
.regulation-open-points-table th:nth-child(3),
.regulation-open-points-table td:nth-child(3),
.regulation-open-points-table th:nth-child(4),
.regulation-open-points-table td:nth-child(4) {
  width: 96px;
}

.regulation-small-table th,
.regulation-team-table th,
.regulation-bonus-table th {
  white-space: nowrap;
  background: color-mix(in srgb, var(--reg-panel-soft) 58%, var(--card) 42%);
  color: color-mix(in srgb, var(--reg-panel-color) 68%, var(--ink) 32%);
}

.regulation-small-table th:not(:first-child),
.regulation-bonus-table th:not(:first-child),
.regulation-team-table th:nth-child(even) {
  text-align: right;
}

.regulation-small-table td,
.regulation-team-table td,
.regulation-bonus-table td {
  font-size: 12px;
}

.regulation-small-table tbody tr:nth-child(even),
.regulation-team-table tbody tr:nth-child(even),
.regulation-bonus-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--reg-panel-soft) 22%, transparent);
}

.regulation-bonus-table th:first-child,
.regulation-bonus-table td:first-child {
  width: 138px;
  text-align: left;
  font-weight: 800;
  color: color-mix(in srgb, var(--reg-panel-color) 58%, var(--ink) 42%);
}

.regulation-team-table th:nth-child(odd),
.regulation-team-table td:nth-child(odd) {
  width: 120px;
  overflow-wrap: anywhere;
}

.num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.settings-dual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.settings-inline-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.settings-inline-section h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.2;
}

.settings-form label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.settings-form input[type="text"],
.settings-form input[type="password"],
.settings-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  background: color-mix(in srgb, var(--card) 92%, #ffffff 8%);
  color: var(--ink);
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.settings-form input[type="text"]:focus,
.settings-form input[type="password"]:focus,
.settings-form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.settings-form input[type="text"]::placeholder,
.settings-form input[type="password"]::placeholder {
  color: var(--muted);
}

.password-checklist {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--card) 94%, var(--accent-soft) 6%);
}

.password-checklist-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.password-checklist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.password-checklist-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.password-checklist-list li::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--line) 80%, var(--muted) 20%);
  background: transparent;
  flex-shrink: 0;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.password-checklist-list li.is-valid {
  color: #116536;
  font-weight: 700;
}

.password-checklist-list li.is-valid::before {
  border-color: #22c55e;
  background: #22c55e;
}

.input-invalid {
  border-color: #c83333 !important;
  background: #fff1f1 !important;
}

.password-feedback {
  display: none;
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #9e1b1b;
}

.password-feedback.is-visible {
  display: block;
}

.settings-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.settings-toggle-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.settings-toggle-ui {
  width: 48px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 84%, #9bb2a7 16%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.settings-toggle-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f4fbf8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, background 0.2s ease;
}

.settings-toggle-copy {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.settings-toggle-row:hover .settings-toggle-ui {
  border-color: var(--accent);
}

.settings-toggle-input:checked+.settings-toggle-ui {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 90%, #fff 10%);
}

.settings-toggle-input:checked+.settings-toggle-ui::after {
  transform: translateX(22px);
  background: #ffffff;
}

.settings-toggle-input:focus-visible+.settings-toggle-ui {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}

.calendar-component-wrap {
  margin: 0 0 38px;
}

.calendar-component-wrap h2 {
  margin: 0 0 10px;
  font-size: 20px;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
}

.calendar-legend-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

.calendar-legend-item.legend-torneo::before {
  background: #0ea5a5;
}

.calendar-legend-item.legend-campionato::before {
  background: #ea580c;
}

.calendar-legend-item.legend-mixed::before {
  background: linear-gradient(135deg, #0ea5a5 0%, #0ea5a5 48%, #ea580c 52%, #ea580c 100%);
}

.calendar-legend-item.legend-status-live::before {
  background: #ef4444;
  box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 18%, transparent);
}

.calendar-legend-item.legend-status-draws::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.calendar-legend-item.legend-status-finished::before {
  background: #64748b;
}

.calendar-legend-item.legend-status-scheduled::before {
  border: 1px solid var(--muted);
  background: transparent;
}

.calendar-status-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

/* Il calendario riusa il menu ambito delle classifiche: la form serve solo a
   inviare la scelta, la larghezza resta quella del controllo condiviso. */
.calendar-region-form {
  display: block;
  margin: 10px 0 6px;
}

.calendar-upcoming-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 18px 0 10px;
}

.calendar-upcoming-heading h2 {
  margin: 0;
}

/* Selettore riutilizzato dal Calcolatore per scegliere una tipologia torneo. */
.competition-select-field {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.competition-select-field>span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.competition-select-field select {
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  padding: 9px 11px;
  color: var(--ink);
  background: var(--control-bg);
  box-shadow: var(--control-shadow);
  font: inherit;
  font-size: 14px;
}

.competition-select-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.calendar-tournament-type-filter {
  width: min(100%, 300px);
}

.calendar-tournament-type-filter select,
.calendar-tournament-type-filter option,
#calculator-tournament,
#calculator-tournament optgroup,
#calculator-tournament option {
  text-transform: capitalize;
}

.calendar-filter-empty[hidden],
.calendar-tournaments-table[hidden],
.calendar-status-badge[hidden] {
  display: none;
}

.calendar-status-badge,
.calendar-day-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.15;
  white-space: nowrap;
}

.calendar-status-badge.status-live,
.calendar-day-status.status-live {
  border-color: color-mix(in srgb, #ef4444 62%, var(--line) 38%);
  background: color-mix(in srgb, #fee2e2 82%, var(--card) 18%);
  color: #b91c1c;
}

.calendar-status-badge.status-draws,
.calendar-day-status.status-draws {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--line) 44%);
  background: color-mix(in srgb, var(--accent-soft) 78%, var(--card) 22%);
  color: var(--accent);
}

.calendar-status-badge.status-finished,
.calendar-day-status.status-finished {
  border-color: color-mix(in srgb, #64748b 56%, var(--line) 44%);
  background: color-mix(in srgb, #e2e8f0 72%, var(--card) 28%);
  color: #475569;
}

.calendar-status-badge.status-scheduled,
.calendar-day-status.status-scheduled {
  border-color: var(--line);
  background: color-mix(in srgb, var(--muted) 8%, var(--card) 92%);
  color: var(--muted);
}

.calendar-legend-item.legend-today {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line) 42%);
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--card) 28%);
  color: var(--accent);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}

.calendar-legend-item.legend-today::before {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card) 88%);
}

.calendar-months-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

/* Il calendario carica tutta la stagione ma ne mostra un mese alla volta: le
   frecce scorrono i mesi gia' in pagina, il titolo vive nella barra e non nella
   scheda del mese. */
.calendar-month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 2px 0 14px;
}

.calendar-month-nav-label {
  min-width: 168px;
  color: var(--ink);
  font-weight: 700;
  text-align: center;
}

.calendar-month-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--control-border);
  border-radius: 10px;
  background: var(--control-bg);
  box-shadow: var(--control-shadow);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.calendar-month-nav-btn:hover:not(:disabled) {
  background: var(--control-bg-hover);
}

.calendar-month-nav-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.calendar-month-nav-btn:disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.55;
}

.calendar-month-card .calendar-month-title {
  display: none;
}

.calendar-month-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: color-mix(in srgb, var(--card) 92%, #f2f8ff 8%);
}

.calendar-month-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

.calendar-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}

.calendar-weekday-cell {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
}

.calendar-day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-day-cell {
  min-height: 66px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  background: var(--card);
}

.calendar-day-cell.is-outside {
  opacity: 0.42;
}

.calendar-day-cell.is-window {
  opacity: 1;
}

.calendar-day-cell.is-today {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

body[data-theme="dark"] .calendar-legend-item.legend-today {
  border-color: #facc15;
  background: color-mix(in srgb, #facc15 26%, #171f1c 74%);
  color: #fff2b3;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.35);
}

body[data-theme="dark"] .calendar-legend-item.legend-today::before {
  border-color: #fde68a;
  background: #facc15;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.55);
}

.calendar-day-cell.has-events {
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--card) 55%);
}

.calendar-day-cell.has-events.kind-torneo {
  border-color: color-mix(in srgb, #0ea5a5 50%, var(--line) 50%);
  background: color-mix(in srgb, #0ea5a5 18%, var(--card) 82%);
}

.calendar-day-cell.has-events.kind-campionato {
  border-color: color-mix(in srgb, #ea580c 50%, var(--line) 50%);
  background: color-mix(in srgb, #ea580c 16%, var(--card) 84%);
}

.calendar-day-cell.has-events.kind-mixed {
  border-color: color-mix(in srgb, #b45309 45%, var(--line) 55%);
  background: linear-gradient(135deg,
      color-mix(in srgb, #0ea5a5 16%, var(--card) 84%) 0%,
      color-mix(in srgb, #0ea5a5 16%, var(--card) 84%) 48%,
      color-mix(in srgb, #ea580c 15%, var(--card) 85%) 52%,
      color-mix(in srgb, #ea580c 15%, var(--card) 85%) 100%);
}

.calendar-day-cell.has-tournament-status-live {
  border-color: #ef4444;
  box-shadow: inset 0 3px 0 #ef4444;
}

.calendar-day-cell.has-tournament-status-draws {
  border-color: var(--accent);
  box-shadow: inset 0 3px 0 var(--accent);
}

.calendar-day-cell.has-tournament-status-finished {
  border-color: #64748b;
  box-shadow: inset 0 3px 0 #64748b;
}

.calendar-day-cell.has-default-athlete-entry {
  border-color: #d97706;
  background: color-mix(in srgb, #f59e0b 22%, var(--card) 78%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d97706 30%, transparent);
}

.calendar-day-cell.has-default-athlete-entry .calendar-day-number {
  color: #92400e;
}

body[data-theme="dark"] .calendar-day-cell.is-today,
body[data-theme="dark"] .calendar-day-cell.is-today.has-events,
body[data-theme="dark"] .calendar-day-cell.is-today.has-events.kind-torneo,
body[data-theme="dark"] .calendar-day-cell.is-today.has-events.kind-campionato,
body[data-theme="dark"] .calendar-day-cell.is-today.has-events.kind-mixed {
  border-color: #facc15;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.4);
}

body[data-theme="dark"] .calendar-day-cell.is-today .calendar-day-number {
  color: #fff2b3;
}

body[data-theme="dark"] .calendar-day-cell.has-default-athlete-entry {
  border-color: #facc15;
  background: color-mix(in srgb, #f59e0b 28%, var(--card) 72%);
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.32);
}

body[data-theme="dark"] .calendar-day-cell.has-default-athlete-entry .calendar-day-number {
  color: #fef3c7;
}

.calendar-day-cell.is-clickable {
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.calendar-day-cell.is-clickable:hover,
.calendar-day-cell.is-clickable:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent);
  transform: translateY(-1px);
}

.calendar-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.calendar-day-number {
  font-size: 12px;
  font-weight: 700;
}

.calendar-day-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 0 4px;
}

.calendar-day-badge.kind-torneo {
  background: #0ea5a5;
}

.calendar-day-badge.kind-campionato {
  background: #ea580c;
}

.calendar-day-badge.kind-mixed {
  background: linear-gradient(135deg, #0ea5a5 0%, #0ea5a5 48%, #ea580c 52%, #ea580c 100%);
}

.calendar-day-title {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.15;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.calendar-day-status {
  max-width: 100%;
  margin-top: 5px;
  padding: 2px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 8px;
}

.calendar-day-events {
  display: none;
}

.calendar-event-detail {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 90%, var(--bg) 10%);
}

.calendar-event-detail.event-kind-torneo {
  border-left: 4px solid #0ea5a5;
}

.calendar-event-detail.event-kind-campionato {
  border-left: 4px solid #ea580c;
}

.calendar-event-detail-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.calendar-event-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.calendar-event-kind-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid var(--line);
}

.calendar-event-kind-pill.pill-torneo {
  border-color: color-mix(in srgb, #0ea5a5 55%, var(--line) 45%);
  background: color-mix(in srgb, #0ea5a5 16%, var(--card) 84%);
}

.calendar-event-kind-pill.pill-campionato {
  border-color: color-mix(in srgb, #ea580c 55%, var(--line) 45%);
  background: color-mix(in srgb, #ea580c 14%, var(--card) 86%);
}

.calendar-tournament-open-levels,
.calendar-mobile-open-levels {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 5px;
  vertical-align: middle;
}

.calendar-mobile-open-levels {
  display: none;
}

/* Nella tabella tornei la colonna "Tipologia" e' stretta: come box inline i
   badge Open traboccavano nella colonna "Stato", finendo sotto il badge LIVE.
   Come box di blocco vanno a capo restando dentro la cella. */
.calendar-tournaments-table .calendar-tournament-open-levels {
  display: flex;
  max-width: 100%;
  margin-left: 0;
  margin-top: 4px;
}

.calendar-open-level-label {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  border: 1px solid color-mix(in srgb, #0ea5a5 42%, var(--line) 58%);
  border-radius: 999px;
  padding: 2px 6px;
  color: #0f766e;
  background: color-mix(in srgb, #0ea5a5 9%, var(--card) 91%);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.calendar-tournament-actions {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-width: 0;
}

.tournament-internal-action,
.tournament-external-link {
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
}

.tournament-internal-action {
  border: 1px solid var(--accent-strong);
  color: var(--on-accent);
  background: var(--accent);
}

.tournament-internal-action:hover {
  border-color: var(--accent);
  color: var(--on-accent);
  background: color-mix(in srgb, var(--accent) 88%, #ffffff 12%);
}

.tournament-external-group {
  display: grid;
  justify-items: start;
  gap: 5px;
  min-width: 0;
}

.tournament-link-group-label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.tournament-external-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tournament-external-link {
  gap: 4px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-strong);
}

.tournament-external-link:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--card));
}

.tournament-external-link span {
  color: currentColor;
  font-size: 12px;
  line-height: 1;
}

.tournament-external-link-icon {
  min-width: 34px;
  padding: 6px;
}

.tournament-external-link-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-draw-reroll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, #0ea5a5 48%, var(--line) 52%);
  border-radius: 9px;
  padding: 6px 9px;
  color: color-mix(in srgb, #0f766e 80%, var(--ink) 20%);
  background: color-mix(in srgb, #0ea5a5 11%, var(--card) 89%);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.calendar-draw-reroll:hover {
  border-color: #0ea5a5;
  background: color-mix(in srgb, #0ea5a5 18%, var(--card) 82%);
}

.calendar-event-detail.is-tournament-link,
.calendar-tournaments-table tbody tr[data-tournament-detail-url] {
  cursor: pointer;
}

.calendar-event-detail.is-tournament-link:hover,
.calendar-event-detail.is-tournament-link:focus-visible {
  border-color: #0ea5a5;
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, #0ea5a5 20%, transparent);
}

.tournament-simulation-page {
  min-width: 0;
}

/* Intestazione condivisa dei dettagli (torneo, girone, pagina non trovata):
   ritorno, titolo, link esterni e stato dati con la stessa spaziatura. */
.detail-hero {
  display: grid;
  gap: 9px;
}

.detail-hero > .meta,
.detail-hero > .about-kicker {
  margin: 0;
}

.detail-hero h1 {
  max-width: 1050px;
  margin: 0;
  font-size: clamp(25px, 4vw, 42px);
  line-height: 1.08;
}

/* Ritorno delle pagine secondarie: solo l'icona, accanto all'etichetta della
   pagina (partials/back_link.html). */
.page-hero-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0 0 6px;
}

.page-hero-nav > .about-kicker {
  min-width: 0;
  margin: 0;
}

.detail-hero > .page-hero-nav {
  margin: 0;
}

.page-back-link {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 0;
  color: var(--ink);
  background: var(--card);
  box-shadow: var(--control-shadow);
  text-decoration: none;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}

.page-back-link:hover,
.page-back-link:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}

.page-back-link:focus-visible {
  box-shadow: var(--focus-ring);
}

.page-back-link svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.detail-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 13px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.tournament-registration-closed {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--danger) 62%, var(--line) 38%);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--danger);
  background: var(--danger-soft);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.15;
  white-space: nowrap;
}

.tournament-simulation-links {
  margin-top: 2px;
}

.tournament-simulation-card {
  min-width: 0;
}

.tournament-ranking-controls {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 16px;
}

.tournament-ranking-controls .competition-select-field {
  flex: 0 1 280px;
  max-width: 100%;
}

.tournament-ranking-controls .calendar-draw-ranking-note {
  flex: 1 1 280px;
}

.tournament-ranking-controls select:disabled {
  cursor: wait;
  opacity: 0.62;
}

/* Torneo LIVE: gironi e tabellone leggibili senza lasciare l'app. */
.live-tournament-board {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.live-tournament-board-head,
.live-stage-head,
.live-tournament-source-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.live-tournament-board-head {
  align-items: flex-start;
}

.live-tournament-board-head h2,
.live-stage-head h3 {
  margin: 0;
}

.live-tournament-board-head h2 {
  font-size: clamp(21px, 3vw, 28px);
}

.live-tournament-board-head .meta {
  max-width: 720px;
  margin: 5px 0 0;
}

.live-tournament-board-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
}

.live-tournament-now,
.live-stage-progress,
.live-competition-phases span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.live-tournament-now {
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--signal) 44%, var(--line) 56%);
  padding: 5px 8px;
  color: var(--signal);
  background: color-mix(in srgb, var(--signal) 9%, var(--card) 91%);
  text-transform: uppercase;
}

.live-tournament-now i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 13%, transparent);
}

.live-tournament-updated {
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.live-competition-index {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 5px;
  scrollbar-width: thin;
}

.live-competition-index a {
  flex: 0 0 auto;
  max-width: min(320px, 78vw);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  background: var(--card);
  font-size: 10px;
  font-weight: 750;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-competition-index a:hover,
.live-competition-index a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.live-competition-list {
  display: grid;
  gap: 9px;
}

.live-competition {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--card) 96%, var(--accent-soft) 4%);
  scroll-margin-top: 12px;
}

.live-competition-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 22px;
  gap: 10px;
  align-items: center;
  min-height: 56px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.live-competition-summary::-webkit-details-marker,
.live-group-matches summary::-webkit-details-marker {
  display: none;
}

.live-competition[open]>.live-competition-summary {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--card) 58%);
}

.live-competition-summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 27%, transparent);
  outline-offset: -3px;
}

.live-competition-title {
  min-width: 0;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.live-competition-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 9px;
}

.live-competition-progress {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--line) 55%);
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

.live-competition-progress i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: currentColor;
}

.live-competition-progress strong {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.live-competition-progress.is-complete {
  border-color: color-mix(in srgb, var(--success) 42%, var(--line) 58%);
  background: var(--success-soft);
  color: var(--success);
}

.live-competition-progress.is-pending {
  border-color: var(--line);
  background: var(--surface-strong);
  color: var(--muted);
}

.live-competition-phases {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.live-competition-phases span {
  padding: 3px 7px;
  color: var(--accent);
  background: var(--accent-soft);
}

.live-competition-summary svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 160ms ease;
}

.live-competition[open]>.live-competition-summary svg {
  transform: rotate(180deg);
}

.live-competition-content {
  display: grid;
  gap: 16px;
  padding: 12px;
}

.live-stage {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--card) 98%, var(--accent-soft) 2%);
}

.live-stage+.live-stage {
  margin-top: 0;
}

.live-stage-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  margin: 0;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
}

.live-stage-head::-webkit-details-marker {
  display: none;
}

.live-stage-head:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 27%, transparent);
  outline-offset: -3px;
}

.live-stage[open]>.live-stage-head {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent-soft) 38%, var(--card) 62%);
}

.live-stage-content {
  padding: 10px;
}

.live-stage-chevron {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 160ms ease;
}

.live-stage[open]>.live-stage-head .live-stage-chevron {
  transform: rotate(180deg);
}

.live-stage-head h3 {
  font-size: 17px;
}

.live-stage-progress {
  padding: 4px 8px;
  color: var(--muted);
  background: var(--surface-strong);
}

.live-groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 9px;
}

.live-group-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
}

.live-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 7px 9px;
  color: color-mix(in srgb, #0f766e 82%, var(--ink) 18%);
  background: color-mix(in srgb, #0ea5a5 11%, var(--card) 89%);
}

.live-group-head h4 {
  margin: 0;
  font-size: 13px;
}

.live-group-head span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.live-group-standings-wrap {
  overflow-x: auto;
}

.live-group-standings {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 10px;
}

.live-group-standings th,
.live-group-standings td {
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  padding: 6px 5px;
  background: transparent;
  text-align: center;
  white-space: nowrap;
}

.live-group-standings th {
  position: static;
  color: var(--muted);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.live-group-standings th:nth-child(2),
.live-group-standings td:nth-child(2) {
  width: 100%;
  text-align: left;
  white-space: normal;
}

.live-group-standings td:nth-child(2) strong {
  font-size: 10px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.live-group-standings tbody tr:last-child td {
  border-bottom: 0;
}

.live-standing-position {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface-strong);
  font-weight: 900;
}

.live-group-standings tbody tr:nth-child(-n+2) .live-standing-position {
  color: var(--accent);
  background: var(--accent-soft);
}

.live-group-matches {
  border-top: 1px solid var(--line);
}

.live-group-matches summary {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  color: var(--accent);
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
  list-style: none;
}

.live-group-matches summary span:last-child {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.live-group-matches[open] summary {
  border-bottom: 1px solid var(--line);
}

.live-group-match-list {
  display: grid;
}

.live-group-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 9px;
  align-items: center;
  padding: 7px 9px;
}

.live-group-match+.live-group-match {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.live-match-players {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.live-match-players span {
  overflow-wrap: anywhere;
}

.live-match-players .is-winner {
  color: var(--ink);
  font-weight: 850;
}

.live-match-score {
  color: var(--success);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.live-match-pending {
  border-radius: 999px;
  padding: 3px 6px;
  color: var(--muted);
  background: var(--surface-strong);
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

.live-group-match small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
}

.live-bracket-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px;
  background: color-mix(in srgb, var(--bg) 58%, var(--card) 42%);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.live-bracket-scroll:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 27%, transparent);
  outline-offset: 2px;
}

.live-bracket {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(238px, 276px);
  grid-auto-flow: column;
  align-items: stretch;
  gap: 34px;
  width: max-content;
  min-width: 100%;
}

.live-bracket-round {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  scroll-snap-align: start;
}

.live-bracket-round>header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 35px;
  padding: 3px 4px 7px;
}

.live-bracket-round>header h4 {
  margin: 0;
  font-size: 12px;
}

.live-bracket-round>header span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
}

.live-bracket-match-list {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-around;
  gap: 16px;
  min-height: 100%;
}

.live-bracket-round.has-placement {
  position: relative;
}

.live-bracket-match {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 7%, transparent);
}

.live-bracket-links {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.live-bracket-links path {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 42%, var(--line) 58%);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.live-bracket-player {
  display: flex;
  min-height: 35px;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.live-bracket-player+.live-bracket-player {
  border-top: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
}

.live-bracket-player span {
  overflow-wrap: anywhere;
}

.live-bracket-player>span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.live-bracket-player-result {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 28px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.live-bracket-player-result strong {
  font-size: 13px;
}

.live-bracket-player.is-winner {
  color: var(--ink);
  background: color-mix(in srgb, var(--success-soft) 68%, var(--card) 32%);
  font-weight: 850;
}

.live-bracket-player.is-winner .live-bracket-player-result {
  color: var(--success);
}

.live-bracket-player b {
  display: grid;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  color: var(--success);
  background: var(--success-soft);
  font-size: 9px;
}

.live-bracket-match footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 5px 8px;
  color: var(--muted);
  background: var(--surface);
  font-size: 8px;
  line-height: 1.35;
}

.live-bracket-match.is-scheduled {
  border-style: dashed;
}

.live-bracket-placement {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 8px;
  margin-top: 24px;
  border-top: 1px dashed color-mix(in srgb, var(--muted) 48%, var(--line) 52%);
  padding-top: 12px;
}

.live-bracket-placement>header {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  padding-inline: 4px;
}

.live-bracket-placement>header h5 {
  margin: 0;
  color: var(--ink);
  font-size: 11px;
}

.live-bracket-placement-matches {
  display: grid;
  gap: 10px;
}

.live-bracket-round .live-bracket-placement .live-bracket-match::before,
.live-bracket-round .live-bracket-placement .live-bracket-match::after {
  content: none;
}

.live-bracket-round-switch {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: stretch;
  gap: 7px;
  margin-bottom: 9px;
}

.live-bracket-round-tabs {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 1px;
  scrollbar-width: thin;
}

.live-bracket-round-arrow,
.live-bracket-round-tab {
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--card);
  font: inherit;
  cursor: pointer;
}

.live-bracket-round-arrow {
  display: grid;
  width: 38px;
  min-height: 38px;
  place-items: center;
  border-radius: 10px;
}

.live-bracket-round-arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.live-bracket-round-arrow:disabled {
  cursor: not-allowed;
  opacity: .38;
}

.live-bracket-round-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.live-bracket-round-tab small {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-strong);
  font-size: 8px;
}

.live-bracket-round-tab:hover,
.live-bracket-round-arrow:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line) 48%);
  color: var(--accent);
}

.live-bracket-round-tab.is-active {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}

.live-bracket-round-tab.is-active small {
  color: var(--accent);
  background: var(--on-accent);
}

.live-bracket-hint {
  margin: 6px 2px 0;
  color: var(--muted);
  font-size: 9px;
}

.live-tournament-fallback-note {
  margin: 0;
}

.live-tournament-source-note {
  justify-content: flex-start;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: var(--muted);
  font-size: 9px;
}

@media (max-width: 760px) {
  .live-tournament-board-head {
    display: grid;
  }

  .live-tournament-board-actions {
    justify-content: flex-start;
  }

  .live-competition-content {
    padding: 9px;
  }

  .live-groups-grid {
    grid-template-columns: 1fr;
  }

  .live-group-standings th,
  .live-group-standings td {
    padding-inline: 4px;
  }

  .live-bracket-scroll {
    overflow-x: hidden;
    padding: 9px;
  }

  .live-bracket-round-switch {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
  }

  .live-bracket-round-arrow {
    width: 42px;
    min-height: 42px;
  }

  .live-bracket-round-tab {
    min-height: 42px;
  }

  .live-bracket {
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
  }

  .live-bracket.is-round-switchable {
    display: block;
    min-width: 0;
  }

  .live-bracket.is-round-switchable .live-bracket-round {
    display: none;
  }

  .live-bracket.is-round-switchable .live-bracket-round.is-mobile-active {
    display: flex;
  }

  .live-bracket-match-list {
    gap: 10px;
  }

  .live-bracket-round.has-placement {
    position: static;
  }

  .live-bracket-round.has-placement .live-bracket-match-list {
    min-height: 0;
  }

  .live-bracket-placement {
    position: static;
  }

  .live-bracket-links {
    display: none;
  }

  .live-tournament-source-note {
    align-items: flex-start;
    justify-content: space-between;
  }
}

@media (max-width: 460px) {
  .live-competition-summary {
    grid-template-columns: minmax(0, 1fr) 20px;
  }

  .live-competition-phases {
    display: none;
  }

  .live-stage-head {
    align-items: flex-end;
  }

  .live-bracket-round>header {
    min-height: 32px;
  }
}

#tournament-draw-toolbar[hidden] {
  display: none;
}

/* display:inline-flex sopra sovrascriverebbe l'attributo [hidden]: senza questa
   regola il pulsante del sorteggio resterebbe visibile anche da nascosto. */
.calendar-draw-reroll[hidden] {
  display: none;
}

#tournament-draw-toolbar.tournament-draw-inline-toolbar {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
  border: 0;
  padding: 0;
  background: transparent;
}

#tournament-draw-toolbar .calendar-draw-reroll {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

#tournament-draw-content[hidden],
#tournament-draw-status[hidden] {
  display: none;
}

/* Criteri di sorteggio: indicatore di riepilogo e modale di scelta del criterio. */
.calendar-draw-summary .calendar-draw-criteria-stat {
  border-color: color-mix(in srgb, #0ea5a5 40%, var(--line) 60%);
  background: color-mix(in srgb, #0ea5a5 8%, var(--card) 92%);
}

.calendar-draw-summary .calendar-draw-criteria-stat strong {
  color: color-mix(in srgb, #0f766e 80%, var(--ink) 20%);
  font-size: 12px;
}

.draw-criteria-modal {
  position: fixed;
  inset: 0;
  /* Come le altre modali: deve stare sopra la tab bar mobile (z-index 200). */
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
}

.draw-criteria-modal[hidden] {
  display: none !important;
}

.draw-criteria-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 14, 0.56);
}

.draw-criteria-dialog {
  position: relative;
  width: min(100%, 560px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.35);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.draw-criteria-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.draw-criteria-head h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
}

.draw-criteria-close {
  flex: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 90%, var(--bg) 10%);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
}

.draw-criteria-close:hover {
  border-color: var(--accent);
}

.draw-criteria-note {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}

.draw-criteria-list {
  display: grid;
  gap: 10px;
}

.draw-criteria-option {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--card) 92%, var(--bg) 8%);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.draw-criteria-option:hover {
  border-color: #0ea5a5;
}

.draw-criteria-option:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.draw-criteria-option.is-active {
  border-color: #0ea5a5;
  background: color-mix(in srgb, #0ea5a5 12%, var(--card) 88%);
}

.draw-criteria-option-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 14px;
  font-weight: 800;
}

.draw-criteria-option-title small {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.draw-criteria-option.is-active .draw-criteria-option-title {
  color: color-mix(in srgb, #0f766e 78%, var(--ink) 22%);
}

.draw-criteria-option.is-active .draw-criteria-option-title::after {
  content: "\2713";
  font-size: 13px;
}

.draw-criteria-option-text {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}

.draw-criteria-priorities {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 13px;
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
}

.draw-criteria-priorities h4 {
  margin: 0 0 7px;
  font-size: 13px;
}

.draw-criteria-priorities ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.draw-criteria-priorities strong {
  color: var(--ink);
}

body[data-theme="dark"] .calendar-draw-summary .calendar-draw-criteria-stat strong,
body[data-theme="dark"] .draw-criteria-option.is-active .draw-criteria-option-title {
  color: #99f6e4;
}

.calendar-default-entry-row td {
  background: color-mix(in srgb, #f59e0b 16%, var(--card) 84%);
}

.calendar-default-entry-row td:first-child {
  border-left: 5px solid #d97706;
}

.calendar-status-row-live td {
  background: color-mix(in srgb, #ef4444 6%, var(--card) 94%);
}

.calendar-status-row-draws td {
  background: color-mix(in srgb, var(--accent) 6%, var(--card) 94%);
}

.calendar-status-row-draws td:first-child {
  border-left: 5px solid var(--accent);
}

.calendar-status-row-live td:first-child {
  border-left: 5px solid #ef4444;
}

.calendar-status-row-finished td {
  background: color-mix(in srgb, #64748b 6%, var(--card) 94%);
}

.calendar-status-row-finished td:first-child {
  border-left: 5px solid #64748b;
}

.calendar-table-event-title {
  display: block;
  line-height: 1.25;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-default-entry-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 6px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, #d97706 55%, var(--line) 45%);
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 18%, var(--card) 82%);
  color: #92400e;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.calendar-default-entry-detail {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.calendar-default-entry-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.calendar-default-entry-inline .calendar-default-entry-badge,
.calendar-default-entry-inline .calendar-default-entry-detail {
  margin-top: 0;
}

body[data-theme="dark"] .calendar-default-entry-row td {
  background: color-mix(in srgb, #f59e0b 22%, var(--card) 78%);
}

body[data-theme="dark"] .calendar-default-entry-row td:first-child {
  border-left-color: #facc15;
}

body[data-theme="dark"] .calendar-default-entry-badge {
  border-color: rgba(250, 204, 21, 0.55);
  background: rgba(250, 204, 21, 0.16);
  color: #fef3c7;
}

body[data-theme="dark"] .calendar-status-badge.status-live,
body[data-theme="dark"] .calendar-day-status.status-live {
  border-color: #7f3b3b;
  background: #351d1d;
  color: #fca5a5;
}

body[data-theme="dark"] .calendar-status-badge.status-finished,
body[data-theme="dark"] .calendar-day-status.status-finished {
  border-color: #536174;
  background: #252f3d;
  color: #cbd5e1;
}

body[data-theme="dark"] .calendar-status-badge.status-scheduled,
body[data-theme="dark"] .calendar-day-status.status-scheduled {
  border-color: var(--line);
  background: #17201d;
  color: var(--muted);
}

.calendar-modal {
  position: fixed;
  inset: 0;
  /* Deve stare sopra la tab bar mobile (z-index 200), altrimenti la barra di
     navigazione copre il fondo del dialog e l'ultimo elemento non e'
     raggiungibile scrollando. */
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
}

.calendar-modal[hidden] {
  display: none !important;
}

.calendar-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 14, 0.56);
}

.calendar-modal-dialog {
  position: relative;
  width: min(100%, 720px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.35);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.calendar-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.calendar-modal-head h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.calendar-modal-close {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 90%, var(--bg) 10%);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
}

.calendar-modal-close:hover {
  border-color: var(--accent);
}

.calendar-modal-list {
  display: grid;
  gap: 10px;
}

.calendar-draw-toolbar,
.calendar-draw-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.calendar-draw-toolbar {
  justify-content: flex-end;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 90%, var(--bg) 10%);
}

.calendar-draw-reroll:disabled {
  cursor: wait;
  opacity: 0.62;
}

.calendar-draw-status {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.calendar-draw-status.is-error {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line) 52%);
  color: var(--danger);
  background: var(--danger-soft);
}

/* Iscritti e sorteggio in arrivo: skeleton al posto del testo, che resta
   annunciato agli screen reader. */
.calendar-draw-status.is-loading {
  padding: 4px 0 0;
  border: 0;
  text-align: left;
}

.calendar-draw-status.is-loading .calendar-draw-status-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.calendar-draw-status:not(.is-loading) .calendar-draw-skeleton {
  display: none;
}

.calendar-draw-skeleton .skeleton-pills {
  margin-top: 0;
}

.calendar-draw-skeleton-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.calendar-draw-skeleton-stats .skeleton-block {
  height: 58px;
  border-radius: 10px;
}

.calendar-draw-competition-tabs {
  display: flex;
  gap: 7px;
  max-width: 100%;
  overflow-x: auto;
  padding: 1px 1px 7px;
}

.calendar-draw-competition-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  max-width: min(340px, 76vw);
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 92%, var(--bg) 8%);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.calendar-draw-competition-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-draw-competition-tab small {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  padding: 0 5px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

.calendar-draw-competition-tab.active {
  border-color: #0f766e;
  color: #fff;
  background: #0f766e;
}

.calendar-draw-competition-tab.active small {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

.calendar-draw-competition-panel:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 3px;
}

.calendar-draw-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
  gap: 7px;
  margin: 3px 0 10px;
}

.calendar-draw-stat {
  display: grid;
  align-content: center;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 94%, var(--accent-soft) 6%);
}

.calendar-draw-stat strong,
.calendar-draw-stat span {
  display: block;
}

.calendar-draw-stat strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-draw-stat span {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.calendar-draw-summary .calendar-draw-open-level {
  border-color: color-mix(in srgb, #0ea5a5 58%, var(--line) 42%);
  color: #0f766e;
  background: color-mix(in srgb, #0ea5a5 14%, var(--card) 86%);
}

.calendar-draw-summary .calendar-draw-open-level strong {
  color: #0f766e;
  font-size: 15px;
}

.calendar-draw-summary .calendar-draw-effective-open {
  border-color: color-mix(in srgb, var(--warning) 58%, var(--line) 42%);
  color: color-mix(in srgb, var(--warning) 72%, var(--ink) 28%);
  background: color-mix(in srgb, var(--warning) 12%, var(--card) 88%);
}

.calendar-draw-summary .calendar-draw-effective-open strong {
  color: color-mix(in srgb, var(--warning) 72%, var(--ink) 28%);
  font-size: 15px;
}

/* Iscrizione simulata dell'atleta predefinito: la riga aggiunta deve
   distinguersi dagli iscritti reali in ogni vista della scheda. */
.calendar-draw-summary .calendar-draw-simulated-chip {
  border-color: color-mix(in srgb, #6366f1 58%, var(--line) 42%);
  color: #4338ca;
  background: color-mix(in srgb, #6366f1 14%, var(--card) 86%);
}

/* Gli iscritti oltre il limite restano consultabili, ma il trattamento
   neutro li separa visivamente dai partecipanti effettivi al sorteggio. */
.calendar-draw-summary .calendar-draw-waitlist-chip {
  border-color: color-mix(in srgb, var(--muted) 58%, var(--line) 42%);
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, var(--card) 88%);
}

.calendar-draw-ranking-list li.is-waitlisted {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 8%, var(--card) 92%);
  box-shadow: inset 3px 0 0 var(--muted);
}

.calendar-draw-ranking-list li.is-waitlisted .calendar-draw-ranking-main strong {
  color: var(--muted);
}

.calendar-draw-ranking-list li.is-waitlisted .calendar-draw-ranking-position {
  min-width: 42px;
  white-space: nowrap;
}

.calendar-draw-ranking-list li.is-simulated,
.calendar-draw-group li.is-simulated {
  background: color-mix(in srgb, #6366f1 12%, var(--card) 88%);
  box-shadow: inset 3px 0 0 #6366f1;
}

.calendar-draw-ranking-list li.is-simulated .calendar-draw-ranking-main strong,
.calendar-draw-group li.is-simulated .calendar-draw-player-main strong {
  color: #4338ca;
}

.calendar-draw-reroll[aria-pressed="true"] {
  border-color: #6366f1;
  color: #4338ca;
  background: color-mix(in srgb, #6366f1 16%, var(--card) 84%);
}

.calendar-draw-section {
  min-width: 0;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px;
  background: color-mix(in srgb, var(--card) 96%, var(--bg) 4%);
}

.calendar-draw-section-head {
  min-width: 0;
  justify-content: space-between;
  margin-bottom: 9px;
}

.calendar-draw-section-actions,
.calendar-draw-entry-sort {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.calendar-draw-entry-sort {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.calendar-draw-entry-sort select {
  min-height: 30px;
  max-width: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 24px 4px 7px;
  color: var(--ink);
  background: var(--surface-strong);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.calendar-draw-entry-sort select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 2px;
}

.calendar-draw-section h4 {
  margin: 0;
  font-size: 14px;
}

.calendar-draw-detail-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: -3px -3px 10px;
  border-radius: 9px;
  padding: 4px;
  background: color-mix(in srgb, var(--bg) 72%, var(--card) 28%);
}

.calendar-draw-detail-tab {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 6px 8px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.calendar-draw-detail-tab.active {
  border-color: var(--line);
  color: var(--ink);
  background: var(--card);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 8%, transparent);
}

.calendar-draw-detail-tab:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 2px;
}

.calendar-draw-detail-panel[hidden] {
  display: none;
}

.calendar-draw-seed-pairs {
  width: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #0ea5a5 28%, var(--line) 72%);
  border-radius: 7px;
}

.calendar-draw-seed-pairs table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 11px;
}

.calendar-draw-seed-pairs td {
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  padding: 5px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-draw-seed-pairs tr:last-child td {
  border-bottom: 0;
}

.calendar-draw-seed-pairs .calendar-draw-seed-rank {
  width: 38px;
  color: #0f766e;
  font-weight: 850;
  text-align: center;
}

.calendar-draw-seed-pairs .calendar-draw-pair-arrow {
  width: 28px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.calendar-draw-sections {
  display: grid;
  grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1.38fr);
  gap: 12px;
  align-items: start;
}

.calendar-draw-detail-section {
  padding: 9px;
}

.calendar-draw-groups-section {
  border-color: color-mix(in srgb, #0ea5a5 42%, var(--line) 58%);
  padding: 14px;
  background: color-mix(in srgb, #0ea5a5 5%, var(--card) 95%);
  box-shadow: 0 10px 24px color-mix(in srgb, #0f766e 8%, transparent);
}

.calendar-draw-groups-section h4 {
  color: color-mix(in srgb, #0f766e 78%, var(--ink) 22%);
  font-size: 18px;
}

.calendar-draw-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.calendar-draw-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.calendar-draw-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  color: #0f766e;
  background: color-mix(in srgb, #0ea5a5 12%, var(--card) 88%);
  font-size: 12px;
}

.calendar-draw-group-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.calendar-draw-group ol,
.calendar-draw-ranking-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.calendar-draw-group li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
  min-height: 48px;
  padding: 6px 8px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.calendar-draw-group li.is-seed {
  background: color-mix(in srgb, #f59e0b 9%, var(--card) 91%);
}

.calendar-draw-group li.is-placeholder {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 5%, var(--card) 95%);
}

.calendar-draw-group li.is-placeholder .calendar-draw-player-main strong {
  color: var(--muted);
}

.calendar-draw-player-slot,
.calendar-draw-ranking-position {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.calendar-draw-player-main,
.calendar-draw-ranking-main {
  min-width: 0;
}

.calendar-draw-player-main strong,
.calendar-draw-ranking-main strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.calendar-draw-player-main small,
.calendar-draw-ranking-main small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-draw-player-points,
.calendar-draw-ranking-points {
  color: var(--ink);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.calendar-draw-player-points.is-adjusted,
.calendar-draw-ranking-points.is-adjusted {
  color: #be185d;
}

.calendar-draw-player-badge,
.calendar-draw-ranking-seed,
.calendar-draw-ranking-waitlist {
  border-radius: 999px;
  padding: 3px 6px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}

.calendar-draw-group li.is-seed .calendar-draw-player-badge,
.calendar-draw-ranking-seed {
  color: #92400e;
  background: color-mix(in srgb, #f59e0b 22%, transparent);
}

.calendar-draw-ranking-waitlist {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
}

.calendar-draw-ranking-list {
  max-height: 620px;
  overflow-y: auto;
  margin-top: 9px;
  /* Lo spazio sotto stacca la riga di chiusura dal bordo di taglio dello
     scroll: senza, il bordo finale sembra il ritaglio del contenitore. */
  padding-bottom: 6px;
}

.calendar-draw-ranking-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
  min-height: 44px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  padding: 5px 3px;
}

/* Riga di chiusura: separa "ultimo iscritto della lista" da "lista tagliata
   dallo scroll", che con i soli border-top erano indistinguibili. */
.calendar-draw-ranking-list li:last-child {
  border-bottom: 2px solid color-mix(in srgb, var(--line) 95%, transparent);
}

.calendar-draw-doubles-note,
.calendar-draw-ranking-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.calendar-draw-ranking-list.calendar-draw-doubles-list {
  max-height: none;
  overflow: visible;
}

.calendar-draw-ranking-list.calendar-draw-doubles-list li {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  padding-block: 8px;
}

.calendar-draw-doubles-list .calendar-draw-ranking-main strong,
.calendar-draw-doubles-list .calendar-draw-ranking-main small {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

.calendar-draw-doubles-list .calendar-draw-ranking-seed {
  grid-column: 3;
  grid-row: 1;
}

.calendar-draw-doubles-list .calendar-draw-ranking-points {
  grid-column: 2;
}

body[data-theme="dark"] .calendar-draw-reroll,
body[data-theme="dark"] .calendar-draw-group-head {
  color: #99f6e4;
}

body[data-theme="dark"] .calendar-draw-summary .calendar-draw-simulated-chip,
body[data-theme="dark"] .calendar-draw-reroll[aria-pressed="true"],
body[data-theme="dark"] .calendar-draw-ranking-list li.is-simulated .calendar-draw-ranking-main strong,
body[data-theme="dark"] .calendar-draw-group li.is-simulated .calendar-draw-player-main strong {
  color: #c7d2fe;
}

body[data-theme="dark"] .calendar-draw-player-points.is-adjusted,
body[data-theme="dark"] .calendar-draw-ranking-points.is-adjusted {
  color: #f9a8d4;
}

body[data-theme="dark"] .calendar-open-level-label {
  color: #99f6e4;
}

@media (max-width: 760px) {
  .calendar-draw-sections {
    grid-template-columns: 1fr;
  }

  .calendar-draw-ranking-list {
    max-height: 440px;
  }
}

@media (max-width: 520px) {
  /* La toolbar viene spostata dentro l'intestazione dei gironi: non deve
     conservare la larghezza intrinseca della riga di pulsanti desktop. */
  #tournament-draw-toolbar.tournament-draw-inline-toolbar:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
    gap: 6px;
  }

  #tournament-draw-toolbar .calendar-draw-reroll {
    min-height: 44px;
  }

  .calendar-draw-toolbar {
    align-items: stretch;
  }

  .calendar-draw-reroll {
    width: 100%;
    min-height: 40px;
  }

  .calendar-draw-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .calendar-draw-stat {
    min-height: 50px;
    padding: 6px 8px;
  }

  .calendar-draw-groups {
    grid-template-columns: 1fr;
  }

  .calendar-draw-seed-pairs td {
    padding-inline: 4px;
  }

  .calendar-draw-group li {
    grid-template-columns: 18px minmax(0, 1fr) auto;
  }

  .calendar-draw-player-badge {
    grid-column: 2 / -1;
    width: fit-content;
  }

  .calendar-draw-ranking-list li {
    grid-template-columns: 22px minmax(0, 1fr) auto;
  }

  .calendar-draw-ranking-seed {
    grid-column: 2 / -1;
    width: fit-content;
  }
}

body.modal-open {
  overflow: hidden;
}

.cookie-banner {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 60;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.cookie-banner[hidden],
.cookie-form[hidden] {
  display: none !important;
}

.cookie-banner p {
  margin: 0;
  font-size: 13px;
}

.cookie-banner button {
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
}

.cookie-form {
  margin: 0;
}

.site-footer {
  margin-top: 2px;
  border-top: 1px solid #c8ddeb;
  background: linear-gradient(180deg, #eaf3fa 0%, #dfeaf5 100%);
  width: 100%;
}

.site-footer-inner {
  max-width: none;
  margin: 0;
  padding: 18px 24px 14px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.footer-col h2,
.footer-col h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #122443;
}

.footer-col p {
  margin: 5px 0;
  font-size: 12px;
  color: #4f6483;
}

.footer-socials {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0f6a87;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.footer-social-link:hover {
  text-decoration: underline;
}

.footer-social-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.footer-bottom {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #c8ddeb;
  font-size: 12px;
  color: #4f6483;
}

/* Dark mode component-level overrides */
body[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #1b2522 0%, #17201d 100%);
}

body[data-theme="dark"] .message {
  border-color: #7a6535;
  color: #f7e2b2;
}

body[data-theme="dark"] .password-checklist {
  border-color: #344a41;
  background: #111815;
}

body[data-theme="dark"] .password-checklist-list li.is-valid {
  color: #7ee3aa;
}

body[data-theme="dark"] .password-checklist-list li.is-valid::before {
  border-color: #34d399;
  background: #34d399;
}

body[data-theme="dark"] .input-invalid {
  border-color: #d95a5a !important;
  background: #2b1719 !important;
}

body[data-theme="dark"] .password-feedback {
  color: #ffb8b8;
}

body[data-theme="dark"] .record-alert {
  background: #1d3328;
  border-color: #2f5a45;
  color: #9ce0b9;
}

body[data-theme="dark"] .athlete-form input,
body[data-theme="dark"] .athlete-form select,
body[data-theme="dark"] .auth-form input,
body[data-theme="dark"] .settings-form input[type="text"],
body[data-theme="dark"] .settings-form input[type="password"],
body[data-theme="dark"] .settings-form select,
body[data-theme="dark"] .admin-results-filter input[type="search"],
body[data-theme="dark"] .admin-results-filter select,
body[data-theme="dark"] .admin-results-inline-form input,
body[data-theme="dark"] .admin-results-inline-form select,
body[data-theme="dark"] .admin-results-detail-search input {
  background: #0f1513;
  color: #eaf2ef;
  border-color: #344a41;
}

body[data-theme="dark"] .athlete-form input::placeholder,
body[data-theme="dark"] .auth-form input::placeholder,
body[data-theme="dark"] .settings-form input[type="text"]::placeholder,
body[data-theme="dark"] .settings-form input[type="password"]::placeholder,
body[data-theme="dark"] .admin-results-filter input[type="search"]::placeholder,
body[data-theme="dark"] .admin-results-inline-form input::placeholder,
body[data-theme="dark"] .admin-results-detail-search input::placeholder {
  color: #93aaa1;
}

body[data-theme="dark"] .settings-form input[type="text"]:focus,
body[data-theme="dark"] .settings-form input[type="password"]:focus,
body[data-theme="dark"] .settings-form select:focus {
  border-color: #56bb91;
  box-shadow: 0 0 0 3px rgba(86, 187, 145, 0.18);
}

body[data-theme="dark"] .app-loading-overlay {
  background: linear-gradient(180deg, #141d1a 0%, var(--bg) 260px, var(--bg) 100%);
}

body[data-theme="dark"] .live-focus {
  border-color: #355045;
  background: linear-gradient(180deg, #1d2a25 0%, #18221f 100%);
}

body[data-theme="dark"] .live-focus-label,
body[data-theme="dark"] .live-focus-vs,
body[data-theme="dark"] .category-range,
body[data-theme="dark"] .best-live-athlete-meta,
body[data-theme="dark"] .delta-points-note,
body[data-theme="dark"] .footer-col p,
body[data-theme="dark"] .footer-bottom {
  color: #a9bdb4;
}

body[data-theme="dark"] .live-focus-rank,
body[data-theme="dark"] .best-live-athlete-name,
body[data-theme="dark"] .footer-col h2,
body[data-theme="dark"] .footer-col h3 {
  color: #edf4f1;
}

body[data-theme="dark"] .live-stat,
body[data-theme="dark"] .athlete-field,
body[data-theme="dark"] .pie-center {
  background: #111815;
  border-color: #32483f;
}

body[data-theme="dark"] .athlete-static-card {
  background: linear-gradient(135deg, #1b2522 0%, #17201d 100%);
}

body[data-theme="dark"] .athlete-static-head {
  border-color: #365448;
  background: #1e3029;
}

body[data-theme="dark"] .athlete-category-box {
  border-color: #375246;
  background: #1a2a24;
}

body[data-theme="dark"] .rank-tab {
  border-color: #355045;
  background: #1a2622;
  color: #b6d9ca;
}

body[data-theme="dark"] .rank-tab.active {
  background: linear-gradient(180deg, #67cfa6 0%, #4fb98e 100%);
  border-color: #8ae7c1;
  color: #0d1a15;
  box-shadow: 0 0 0 2px rgba(138, 231, 193, 0.35), 0 8px 18px rgba(0, 0, 0, 0.35);
}

body[data-theme="dark"] .jump-to-me-btn {
  border-color: #3c5a4d;
  color: #9ed2ba;
}

body[data-theme="dark"] .bar-track {
  background: #16201d;
  border-color: #33493f;
}

body[data-theme="dark"] .slot-summary-box {
  border-color: #355045;
  background: linear-gradient(180deg, #1b2622 0%, #141d1a 100%);
}

body[data-theme="dark"] .slot-mini-badge,
body[data-theme="dark"] .slot-summary-meta span,
body[data-theme="dark"] .slot-detail-list span,
body[data-theme="dark"] .slot-period,
body[data-theme="dark"] .slot-period-storico {
  border-color: #355045;
  background: #16211d;
  color: var(--muted);
}

body[data-theme="dark"] .slot-period-recente {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line) 50%);
  color: var(--accent);
}

body[data-theme="dark"] .slot-period-live,
body[data-theme="dark"] .result-live-badge {
  border-color: #7f3b3b;
  color: #fca5a5;
  background: #351d1d;
}

body[data-theme="dark"] .slot-status,
body[data-theme="dark"] .slot-status-storico,
body[data-theme="dark"] .slot-status-non-valido {
  border-color: #355045;
  background: #16211d;
  color: var(--muted);
}

body[data-theme="dark"] .slot-status-valido {
  border-color: #396b53;
  color: #8ce7b4;
  background: #1d3a2c;
}

body[data-theme="dark"] .database-export-meta div {
  border-color: var(--line);
}

body[data-theme="dark"] .database-export-meta dd {
  color: var(--ink);
}

body[data-theme="dark"] .slot-bonus-table-wrap tr.slot-row-valido td {
  background: color-mix(in srgb, #4cc987 12%, transparent);
}

body[data-theme="dark"] .slot-bonus-table-wrap tr.slot-row-valido td:first-child {
  box-shadow: inset 3px 0 0 #4cc987;
}

body[data-theme="dark"] .slot-bonus-table-wrap tr.slot-row-non-valido td {
  background: color-mix(in srgb, var(--muted) 9%, transparent);
}

body[data-theme="dark"] .best-live-athlete-box {
  border-color: #355045;
  background: linear-gradient(180deg, #1b2622 0%, #141d1a 100%);
}

body[data-theme="dark"] .best-live-improve {
  color: #7fdbab;
}

body[data-theme="dark"] thead th {
  background: #21312b;
  color: #dce8e3;
}

body[data-theme="dark"] td {
  border-bottom-color: #2d3f38;
}

body[data-theme="dark"] .table-wrap {
  border-color: #355045;
}

body[data-theme="dark"] .delta-pos {
  color: #8ce7b4;
  background: #1d3a2c;
  border-color: #396b53;
}

body[data-theme="dark"] .delta-neg {
  color: #ff9f9f;
  background: #3a2020;
  border-color: #6c3a3a;
}

body[data-theme="dark"] .delta-zero {
  color: #bbcbc5;
  background: #25322d;
  border-color: #3d5048;
}

body[data-theme="dark"] .info-link {
  border-color: #375246;
  background: #1a2521;
  color: #92d5b5;
}

body[data-theme="dark"] .club-row-me td {
  background: #3a2f19 !important;
}

body[data-theme="dark"] .club-row-me td:first-child {
  border-left-color: #d79b3d;
}

body[data-theme="dark"] .club-row-me .club-athlete-link {
  color: #ffcf7a;
}


body[data-theme="dark"] tr.me {
  background: #1d2c26;
}

body[data-theme="dark"] tr.rank-find-hit td {
  background: color-mix(in srgb, #f59e0b 26%, var(--card) 74%);
}

body[data-theme="dark"] tr.rank-find-current td {
  background: color-mix(in srgb, #f59e0b 40%, var(--card) 60%);
}

body[data-theme="dark"] .recent-esito-win {
  color: #75d9a2;
}

body[data-theme="dark"] .recent-esito-loss {
  color: #ff8a8a;
}

body[data-theme="dark"] .error {
  border-color: #8a4343;
  color: #ffb2b2;
  background: #3d2020;
}

body[data-theme="dark"] .site-footer {
  border-top-color: #31463d;
  background: linear-gradient(180deg, #17211e 0%, #131b18 100%);
}

body[data-theme="dark"] .footer-social-link {
  color: #9fd9bf;
}

body[data-theme="dark"] .brand-lockup {
  border-color: #375246;
  background: linear-gradient(145deg, #1c2a25 0%, #1a2421 100%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

body[data-theme="dark"] .h2h-summary-card {
  border-color: #355045;
  background: linear-gradient(180deg, #1b2722 0%, #151f1b 100%);
}

body[data-theme="dark"] .h2h-kpi-box,
body[data-theme="dark"] .h2h-pie-center {
  border-color: #355045;
  background: #101815;
}

body[data-theme="dark"] .h2h-kpi-win strong {
  color: #7fdbab;
}

body[data-theme="dark"] .h2h-kpi-loss strong {
  color: #ff9898;
}

body[data-theme="dark"] .h2h-outcome-win {
  background: #1d3a2d;
  border-color: #335b46;
  color: #98e7be;
}

body[data-theme="dark"] .h2h-outcome-loss {
  background: #3a2020;
  border-color: #6c3a3a;
  color: #ff9f9f;
}

body[data-theme="dark"] .h2h-outcome-unknown {
  background: #25322d;
  border-color: #3d5048;
  color: #bbcbc5;
}

body[data-theme="dark"] .h2h-row-win td {
  background: color-mix(in srgb, #1c8c60 18%, transparent);
}

body[data-theme="dark"] .h2h-row-loss td {
  background: color-mix(in srgb, #c54545 16%, transparent);
}

body[data-theme="dark"] .side-nav-link-locked {
  border-color: #365246;
  color: #97b1a6;
}

body[data-theme="dark"] .side-nav-link-locked:hover {
  border-color: #4f7e6a;
  background: #1b2a24;
  color: #dceae4;
}

@media (max-width: 760px) {
  .app-shell {
    display: block;
    padding: 10px 8px 18px;
  }

  .sidebar {
    position: static;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 0;
    margin-bottom: 12px;
  }

  .sidebar-top {
    align-items: center;
  }

  .side-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.sidebar-collapsed .sidebar {
    width: 60px;
    min-height: 0;
    padding: 10px 8px;
  }

  body.sidebar-collapsed .sidebar-top {
    justify-content: center;
    align-items: center;
  }

  body.sidebar-collapsed .sidebar-icon-home,
  body.sidebar-collapsed .side-nav,
  body.sidebar-collapsed .sidebar-bottom {
    display: none;
  }

  .side-nav-link {
    text-align: center;
    font-size: 12px;
    padding: 7px 6px;
  }

  .slot-card-header,
  .slot-section-heading {
    display: grid;
    justify-items: start;
  }

  .slot-summary-grid {
    grid-template-columns: 1fr;
  }

  .slot-detail-list {
    justify-content: flex-start;
  }

  .sidebar-bottom {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .sidebar-email {
    margin: 0;
    font-size: 12px;
    max-width: 68%;
  }

  .page {
    margin: 12px auto;
    padding: 0 10px 16px;
  }

  .card {
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
  }

  .card,
  .grid>*,
  .hero-search-row>* {
    min-width: 0;
  }

  .hero h1 {
    font-size: 28px;
  }

  .hero p {
    font-size: 14px;
  }

  .hero-header-row {
    flex-direction: column;
  }

  .hero-search-row {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 8px;
  }

  .hero .search-meta-content .meta {
    margin: 4px 0;
    font-size: 12px;
    line-height: 1.4;
  }

  .athlete-form {
    gap: 10px;
  }

  .athlete-form label {
    width: 100%;
  }

  .athlete-form input {
    min-width: 0;
    width: 100%;
  }

  .athlete-form select {
    min-width: 0;
    width: 100%;
  }

  .athlete-form button {
    width: 100%;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .best-live-grid {
    grid-template-columns: 1fr;
  }

  .summary-grid .card p {
    font-size: 14px;
  }

  .live-focus-rank {
    font-size: 42px;
  }

  .live-quick-stats {
    grid-template-columns: 1fr;
  }

  .live-quick-stats-record {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-quick-stats-record .live-stat-record {
    grid-column: 1 / -1;
  }

  .live-stat-value {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .live-stat-predicted .live-stat-value {
    display: inline-grid;
    grid-template-columns: max-content max-content;
    width: fit-content;
    max-width: 100%;
  }

  .live-stat .live-points-delta {
    display: inline-flex;
    flex: 0 0 auto;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100%;
    justify-self: start;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .athlete-static-card {
    padding: 10px;
  }

  .athlete-static-title-row {
    margin-bottom: 0;
  }

  .athlete-static-card[open]>.athlete-static-title-row {
    margin-bottom: 6px;
  }

  .athlete-static-chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }

  .athlete-static-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .athlete-static-card .athlete-field {
    padding: 6px 8px;
  }

  .athlete-static-card .athlete-value,
  .athlete-static-card .athlete-value-club {
    font-size: 13px;
  }

  .table-wrap {
    max-height: 360px;
    overflow-x: auto;
    overflow-y: auto;
  }

  .table-mobile-scroll {
    max-width: 100%;
  }

  .table-mobile-scroll table {
    min-width: 640px;
  }

  thead th,
  td {
    padding: 7px 6px;
    font-size: 12px;
  }

  .bar-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .bar-value {
    text-align: left;
  }

  .pie-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: left;
  }

  .h2h-summary-grid {
    grid-template-columns: 1fr;
  }

  .h2h-kpi-grid {
    grid-template-columns: 1fr;
  }

  .h2h-pie-card {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pie-chart {
    width: 150px;
    height: 150px;
  }

  .pie-center {
    width: 74px;
    height: 74px;
    font-size: 19px;
  }

  .pie-legend {
    width: 100%;
    font-size: 13px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .auth-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .settings-dual-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .settings-form button {
    justify-self: stretch;
    width: 100%;
  }

  .admin-results-filter,
  .admin-results-inline-form {
    grid-template-columns: 1fr;
  }

  .admin-results-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .share-modal-overlay {
    align-items: stretch;
    padding: 12px;
  }

  .share-modal {
    max-height: calc(100vh - 24px);
  }

  .share-modal-head,
  .share-modal-body {
    padding: 14px;
  }

  .share-graphic-frame {
    padding: 10px;
  }

  .share-actions {
    grid-template-columns: 1fr;
  }

  .share-action-btn {
    width: 100%;
    margin-left: 0;
  }

}

@media (max-width: 420px) {
  .brand-lockup {
    width: 100%;
    padding: 10px 11px;
    gap: 10px;
    border-radius: 18px;
  }

  .brand-lockup-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }

  .brand-lockup-title {
    font-size: 33px;
  }

  .brand-lockup-subtitle {
    font-size: 15px;
  }

  .hero h1 {
    font-size: 24px;
  }

  .athlete-form button {
    padding: 11px 14px;
  }

  .meta,
  .message {
    font-size: 12px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Dashboard responsive hardening */
.hero,
.summary-grid,
.tournament-slots-card,
.h2h-card,
#consultazione-classifiche-section {
  isolation: isolate;
}

/* Il menu dell'autocomplete esce visivamente dalla card. La hero deve avere
   un livello di stacking superiore alle card successive, altrimenti il loro
   background copre le opzioni anche se il listbox ha uno z-index elevato. */
.hero {
  position: relative;
  z-index: 50;
}

.live-focus-sub,
.legend-row,
.slot-summary-top,
.slot-card-header {
  flex-wrap: wrap;
}

.table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
  line-height: 1.25;
}

.table-wrap th,
.table-wrap td {
  vertical-align: middle;
}

.table-wrap td {
  max-width: 360px;
}

/* Solo le celle che contengono davvero il nome atleta (es. classifiche,
   calendario) devono poter andare a capo. Senza lo scope :has, questa regola
   colpiva la 2ª colonna di qualunque tabella in .table-wrap — es. "Tipo" in
   "Ultimi incontri" — facendola spezzare carattere per carattere
   su mobile (colonna schiacciata da min-width:700 + overflow-wrap:anywhere). */
.table-wrap td:nth-child(2):has(.club-athlete-link),
.table-wrap td:nth-child(2):has(.rank-athlete-name) {
  white-space: normal;
}

.table-wrap td:nth-child(2) .club-athlete-link,
.table-wrap td:nth-child(2) .rank-athlete-name {
  overflow-wrap: anywhere;
}

.upcoming-entry-popover {
  z-index: 1;
}

.upcoming-entry-popover[open] {
  z-index: 420;
}

.upcoming-entry-badge {
  position: relative;
}

.rank-panel .table-wrap,
.table-mobile-scroll {
  scrollbar-gutter: stable;
}

.jump-wrap {
  min-width: 0;
}

.jump-to-me-btn,
.rank-tab,
.fav-btn {
  min-width: 0;
}

/* La scorciatoia di dettaglio appartiene solo al layout mobile compatto. */
.mobile-row-toggle-cell {
  display: none;
}

@media (max-width: 980px) {

  .hero-search-row,
  .results-viz-grid,
  .h2h-summary-grid,
  .regulation-grid {
    grid-template-columns: 1fr;
  }

  .admin-results-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-results-filter {
    grid-template-columns: 1fr;
  }

  .admin-results-classification-form {
    grid-template-columns: 1fr 1fr;
  }

  .results-insights-header {
    display: grid;
    justify-items: stretch;
  }

  .summary-mode-controls {
    justify-self: end;
  }

  .classifiche-jump-wrap,
  .jump-wrap {
    justify-content: flex-start;
  }

  .rank-pagination {
    width: 100%;
    justify-content: flex-start;
  }

  .classifiche-controls-row {
    grid-template-areas:
      "tabs toggle ."
      "hint hint hint"
      "panel panel panel"
      "scope scope scope"
      "quick quick quick"
      "pager pager pager";
  }

  .classifiche-controls-row>.rank-pagination {
    justify-self: stretch;
    margin-top: 12px;
  }
}

@media (max-width: 760px) {
  .page {
    width: 100%;
  }

  .summary-mode-controls {
    justify-self: stretch;
    justify-items: center;
    width: 100%;
    margin-left: 0;
  }

  .summary-mode-controls .rank-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-self: center;
    width: min(100%, 340px);
    margin: 0 auto;
  }

  .summary-mode-controls .rank-tab {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-inline: 0;
    padding-inline: 8px;
  }

  .summary-mode-hint {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    text-align: left;
  }

  .brand-lockup {
    width: 100%;
  }

  .side-nav {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  }

  .summary-grid,
  .grid,
  .best-live-grid {
    gap: 10px;
  }

  .live-focus {
    padding: 10px;
  }

  .live-focus-rank {
    font-size: 38px;
  }

  .slot-summary-box,
  .h2h-summary-card,
  .athlete-field {
    padding: 10px;
  }

  .rank-switch,
  .rank-pagination,
  .jump-wrap {
    gap: 7px;
  }

  .rank-pagination {
    justify-content: space-between;
  }

  .rank-page-status {
    min-width: 0;
    flex: 1;
  }

  .rank-tab,
  .jump-to-me-btn {
    flex: 1 1 auto;
    min-height: 36px;
  }

  .classifiche-controls-row {
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas:
      "tabs toggle"
      "hint hint"
      "panel panel"
      "scope scope"
      "quick quick"
      "pager pager";
  }

  .rank-toolbar>.rank-scope-more {
    width: 100%;
    max-width: none;
  }

  .rank-scope-control {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
  }

  .stat-scope-wrap {
    width: 100%;
  }

  .table-wrap {
    border-radius: 8px;
  }

  .table-wrap table {
    min-width: 700px;
  }

  .h2h-card .table-wrap table {
    min-width: 620px;
  }

  .upcoming-entry-panel {
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(84px + env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    width: auto;
    max-height: min(64dvh, 520px);
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 20px;
    padding: 14px 15px 16px;
    box-shadow: 0 18px 52px color-mix(in srgb, var(--ink) 24%, transparent);
    transform: none;
    overscroll-behavior: contain;
  }

  .upcoming-entry-panel::before {
    display: none;
  }

  .upcoming-entry-panel-head {
    position: sticky;
    z-index: 1;
    top: -14px;
    margin: -2px 0 10px;
    padding: 4px 0 10px;
    background: var(--card);
    font-size: 15px;
  }

  .upcoming-entry-event {
    padding: 3px 1px;
  }

  .upcoming-entry-title {
    font-size: 14px;
    line-height: 1.35;
  }

  .upcoming-entry-competition {
    font-size: 12px;
    line-height: 1.4;
  }

  .upcoming-entry-modal-backdrop {
    position: fixed;
    z-index: 400;
    inset: 0;
    display: block;
    background: color-mix(in srgb, #08131f 48%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  body.upcoming-entry-modal-open {
    overflow: hidden;
  }

  #nearby-section:has(.upcoming-entry-popover[open]),
  .table-wrap:has(.upcoming-entry-popover[open]) {
    overflow: visible;
  }

  /* Il pannello e' fixed, ma card, table-wrap e pannello della classifica
     creano stacking context che lo confinano sotto il backdrop: finche' e'
     aperto vanno neutralizzati, altrimenti la modale si vede sfocata. */
  .card:has(.upcoming-entry-popover[open]),
  .table-wrap:has(.upcoming-entry-popover[open]),
  #consultazione-classifiche-section:has(.upcoming-entry-popover[open]) {
    isolation: auto;
  }

  .rank-panel:has(.upcoming-entry-popover[open]) {
    position: static;
  }
}

@media (max-width: 600px) {
  .calendar-months-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-month-card {
    min-width: 0;
    padding: 8px 6px;
  }

  .calendar-weekday-row,
  .calendar-day-grid {
    gap: 3px;
  }

  .calendar-weekday-cell {
    overflow: hidden;
    font-size: 10px;
    text-overflow: clip;
    white-space: nowrap;
  }

  .calendar-day-cell {
    position: relative;
    min-height: 48px;
    border-radius: 8px;
    padding: 5px 4px;
  }

  .calendar-day-head {
    display: block;
  }

  .calendar-day-number {
    display: block;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .calendar-day-badge {
    position: absolute;
    right: 3px;
    bottom: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    font-size: 9px;
  }

  /* La griglia mobile comunica presenza e quantita' tramite colore e badge.
     Titolo e stato completi restano disponibili aprendo il giorno. */
  .calendar-day-title,
  .calendar-day-status {
    display: none;
  }
}

@media (max-width: 420px) {
  .brand-lockup-title {
    font-size: 28px;
  }

  .brand-lockup-subtitle {
    font-size: 13px;
  }

  .side-nav {
    grid-template-columns: 1fr 1fr;
  }

  .live-focus-rank {
    font-size: 34px;
  }

  .slot-summary-value {
    font-size: 28px;
  }

  .slot-summary-value span {
    font-size: 17px;
  }

  .pie-chart {
    width: 136px;
    height: 136px;
  }

  .pie-center {
    width: 68px;
    height: 68px;
    font-size: 17px;
  }

}

@media (max-width: 760px) {
  .database-export-grid {
    grid-template-columns: 1fr;
  }

  .calendar-refresh-meta,
  .calendar-refresh-actions {
    grid-template-columns: 1fr;
  }

  .calendar-refresh-head {
    flex-direction: column;
  }

  .database-bundle-card {
    align-items: stretch;
    flex-direction: column;
  }

  .database-download-button {
    width: 100%;
  }
}

/* =====================================================================
   Navigazione mobile: tab bar in basso (Dashboard, Classifiche,
   Calendario, Risultati) + sheet "Altro" che riusa la .sidebar.
   Su desktop questi elementi sono nascosti e la sidebar resta il rail
   laterale di sempre.
   ===================================================================== */
.mobile-tabbar {
  display: none;
}

.mobile-menu-backdrop {
  display: none;
}

@media (max-width: 900px) {

  /* La vecchia card di navigazione in cima diventa un bottom-sheet,
     nascosto finche' non si tocca "Altro" nella tab bar. */
  .sidebar {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    max-height: 82vh;
    overflow-y: auto;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 40px rgba(18, 28, 26, 0.18);
    transform: translateY(102%);
    transition: transform 0.24s ease;
    z-index: 220;
    padding: 4px 14px calc(16px + env(safe-area-inset-bottom));
  }

  body.mobile-menu-open .sidebar {
    transform: translateY(0);
  }

  /* Nel bottom-sheet il logo + hamburger in alto non servono. */
  .sidebar .sidebar-top {
    display: none;
  }

  /* Grabber visivo della sheet. */
  .sidebar::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 6px auto 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 90%, transparent);
  }

  /* Annulla lo stato "collapsed" (pensato per il rail desktop) quando la
     sidebar e' usata come sheet: il menu deve restare completo. */
  body.sidebar-collapsed .sidebar {
    width: auto;
    max-width: none;
    min-height: 0;
  }

  body.sidebar-collapsed .side-nav {
    display: grid;
  }

  body.sidebar-collapsed .sidebar-bottom {
    display: flex;
  }

  body.sidebar-collapsed .side-nav-label {
    display: inline;
  }

  .app-shell {
    display: block;
    padding: 12px 10px calc(92px + env(safe-area-inset-bottom));
  }

  .page {
    width: 100%;
    max-width: none;
  }

  .side-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .side-nav-link {
    justify-content: flex-start;
    min-height: 44px;
    white-space: normal;
  }

  .side-logout-link {
    min-height: 44px;
    align-items: center;
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgba(12, 20, 18, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  body.mobile-menu-open .mobile-menu-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  /* Tab bar "liquid glass": pillola flottante, traslucida e sfocata, staccata
     dai bordi (stile iOS 26 / app Files). Il blur lascia intravedere il
     contenuto che scorre dietro. */
  .mobile-tabbar {
    display: flex;
    gap: 4px;
    position: fixed;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 440px;
    z-index: 200;
    padding: 7px;
    border-radius: 26px;
    background: color-mix(in srgb, var(--card) 64%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid color-mix(in srgb, #ffffff 55%, transparent);
    box-shadow:
      0 14px 36px rgba(18, 28, 26, 0.22),
      0 2px 8px rgba(18, 28, 26, 0.10),
      inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
  }

  .mobile-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 54px;
    padding: 7px 6px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    text-decoration: none;
    color: var(--muted);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
  }

  .mobile-tab svg {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
  }

  .mobile-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Voce attiva: "lozenge" traslucido in tinta accent dietro icona+etichetta. */
  .mobile-tab.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
  }

  .mobile-tab:active {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }

  .mobile-tab-locked {
    opacity: 0.65;
  }

  /* Spazio sotto al contenuto per non finire coperti dalla tab bar flottante. */
  .app-shell {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  /* Quando subito dopo l'app-shell c'e' il footer (es. dashboard), il footer
     fa gia' da chiusura pagina: niente gap ridondante sopra di esso e la
     clearance per la tab bar la mette il footer stesso (sotto). */
  .app-shell:has(~ .site-footer) {
    padding-bottom: 0;
  }

  .site-footer-inner {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 520px) {
  .side-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* UI coherence pass: shared controls, buttons, tabs and surfaces. */
body[data-theme="dark"] {
  background: linear-gradient(180deg, #141d1a 0%, var(--bg) 260px, var(--bg) 100%);
}

.card,
.sidebar,
.brand-lockup,
.live-focus,
.athlete-static-card,
.athlete-field,
.athlete-category-box,
.h2h-summary-card,
.h2h-kpi-box,
.standings-modal,
.share-modal,
.share-graphic-frame,
.share-graphic-preview,
.standings-podium-step,
.standings-round,
.database-export-card,
.database-bundle-card,
.calendar-modal {
  border-radius: var(--radius-card);
}

.card {
  background: color-mix(in srgb, var(--card) 96%, var(--surface) 4%);
  box-shadow: var(--shadow);
}

.hero,
.athlete-static-card,
.live-focus {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, var(--surface) 8%) 0%, var(--card) 100%);
}

.sidebar {
  background: color-mix(in srgb, var(--sidebar-bg) 92%, var(--card) 8%);
}

.brand-lockup {
  background: var(--card);
  box-shadow: var(--control-shadow);
}

.brand-lockup-icon {
  border-radius: var(--radius-control);
}

.side-nav-link,
.side-logout-link,
.sidebar-toggle,
.sidebar-icon-home {
  border-radius: var(--radius-control);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.side-nav-link:hover,
.sidebar-toggle:hover,
.sidebar-icon-home:hover {
  background: var(--control-bg-hover);
}

.side-nav-link.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 22%, transparent);
}

.athlete-form label,
.auth-form label,
.settings-form label:not(.settings-toggle-row),
.admin-results-filter label,
.admin-results-detail-search label,
.favorite-region-form label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.athlete-search-control {
  position: relative;
  display: block;
  flex: 1 1 280px;
  min-width: min(280px, 100%);
}

.athlete-search-control > input {
  width: 100%;
  min-width: 0;
}

.athlete-search-suggestions {
  position: absolute;
  z-index: 400;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  max-height: min(330px, 52vh);
  overflow-y: auto;
  border: 1px solid var(--control-border);
  border-radius: 12px;
  padding: 5px;
  background: var(--card);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 18%, transparent);
}

.athlete-search-suggestions[hidden] {
  display: none !important;
}

.athlete-form .athlete-search-option,
.athlete-search-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: none;
}

.athlete-form .athlete-search-option:hover,
.athlete-form .athlete-search-option.is-active,
.athlete-search-option:hover,
.athlete-search-option.is-active {
  border-color: transparent;
  color: var(--ink);
  background: var(--accent-soft);
  box-shadow: none;
  transform: none;
}

.athlete-search-option-name {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.athlete-search-option-meta {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.athlete-search-status {
  padding: 11px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.athlete-form input:not([type="hidden"]),
.athlete-form select,
.auth-form input:not([type="hidden"]),
.settings-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.settings-form select,
.admin-results-filter input[type="search"],
.admin-results-filter select,
.admin-results-inline-form input:not([type="hidden"]),
.admin-results-inline-form select,
.admin-results-detail-search input,
.rank-find-input,
.favorite-region-form select,
input.input-invalid {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--control-bg);
  color: var(--ink);
  box-shadow: var(--control-shadow);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  padding: 9px 12px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.admin-results-inline-form input:not([type="hidden"]),
.admin-results-inline-form select,
.admin-results-detail-search input,
.admin-results-detail-search button,
.admin-results-inline-form button {
  min-height: 36px;
  font-size: 12px;
}

.athlete-form select,
.settings-form select,
.admin-results-filter select,
.admin-results-inline-form select,
.favorite-region-form select {
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.athlete-form input:not([type="hidden"]):hover,
.athlete-form select:hover,
.auth-form input:not([type="hidden"]):hover,
.settings-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):hover,
.settings-form select:hover,
.admin-results-filter input[type="search"]:hover,
.admin-results-filter select:hover,
.admin-results-inline-form input:not([type="hidden"]):hover,
.admin-results-inline-form select:hover,
.admin-results-detail-search input:hover,
.rank-find-input:hover,
.favorite-region-form select:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--control-border) 58%);
  background-color: var(--control-bg-hover);
}

.athlete-form input:not([type="hidden"]):focus,
.athlete-form select:focus,
.auth-form input:not([type="hidden"]):focus,
.settings-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.settings-form select:focus,
.admin-results-filter input[type="search"]:focus,
.admin-results-filter select:focus,
.admin-results-inline-form input:not([type="hidden"]):focus,
.admin-results-inline-form select:focus,
.admin-results-detail-search input:focus,
.rank-find-input:focus,
.favorite-region-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring), var(--control-shadow);
  background-color: var(--control-bg);
}

.athlete-form input::placeholder,
.auth-form input::placeholder,
.settings-form input::placeholder,
.admin-results-filter input::placeholder,
.admin-results-inline-form input::placeholder,
.admin-results-detail-search input::placeholder,
.rank-find-input::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}

.athlete-form button,
.auth-form button,
.settings-form button,
.fav-btn,
.database-download-button,
.admin-results-detail-search button,
.admin-results-inline-form button,
.jump-to-me-btn,
.rank-find-nav-btn,
.admin-results-expand-toggle,
.admin-results-standings-btn,
.ranking-share-btn,
.share-action-btn,
.share-modal-close,
.standings-modal-close,
#cookie-accept-btn {
  border-radius: var(--radius-control);
  font-family: inherit;
  font-weight: 800;
  line-height: 1;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease,
    opacity 0.16s ease;
}

.athlete-form button,
.auth-form button,
.settings-form button,
.fav-btn,
.database-download-button,
.admin-results-detail-search button,
.admin-results-inline-form button,
.share-action-primary,
#cookie-accept-btn {
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--accent) 88%, #082a73 12%);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 20%, transparent);
  padding: 10px 14px;
}

.athlete-form button:hover,
.auth-form button:hover,
.settings-form button:hover,
.fav-btn:hover,
.database-download-button:hover,
.admin-results-detail-search button:hover,
.admin-results-inline-form button:hover,
.share-action-primary:hover,
#cookie-accept-btn:hover {
  filter: none;
  background: color-mix(in srgb, var(--accent) 88%, #ffffff 12%);
  border-color: color-mix(in srgb, var(--accent) 75%, #082a73 25%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 26%, transparent);
  transform: translateY(-1px);
}

.athlete-form button:active,
.auth-form button:active,
.settings-form button:active,
.fav-btn:active,
.database-download-button:active,
.admin-results-detail-search button:active,
.admin-results-inline-form button:active,
.share-action-btn:active,
#cookie-accept-btn:active {
  transform: translateY(0);
}

.fav-btn.secondary,
.jump-to-me-btn,
.rank-find-nav-btn,
.admin-results-inline-form .admin-results-link-button,
.admin-results-expand-toggle,
.ranking-share-btn,
.share-action-btn:not(.share-action-primary),
.share-modal-close,
.standings-modal-close {
  border-color: var(--control-border);
  background: var(--control-bg);
  color: var(--ink);
  box-shadow: var(--control-shadow);
}

.fav-btn.secondary:hover,
.jump-to-me-btn:hover,
.rank-find-nav-btn:hover,
.admin-results-inline-form .admin-results-link-button:hover,
.admin-results-expand-toggle:hover,
.ranking-share-btn:hover,
.share-action-btn:not(.share-action-primary):hover,
.share-modal-close:hover,
.standings-modal-close:hover {
  background: var(--control-bg-hover);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--control-border) 55%);
  color: var(--accent);
}

.fav-btn.danger,
.admin-results-inline-form .admin-results-reset-btn {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--danger) 18%, transparent);
}

.fav-btn.danger:hover,
.admin-results-inline-form .admin-results-reset-btn:hover {
  background: color-mix(in srgb, var(--danger) 88%, #ffffff 12%);
  color: #fff;
}

.athlete-form button:focus-visible,
.auth-form button:focus-visible,
.settings-form button:focus-visible,
.fav-btn:focus-visible,
.database-download-button:focus-visible,
.admin-results-detail-search button:focus-visible,
.admin-results-inline-form button:focus-visible,
.jump-to-me-btn:focus-visible,
.rank-find-nav-btn:focus-visible,
.admin-results-expand-toggle:focus-visible,
.admin-results-standings-btn:focus-visible,
.ranking-share-btn:focus-visible,
.share-action-btn:focus-visible,
.share-modal-close:focus-visible,
.standings-modal-close:focus-visible,
.rank-tab:focus-visible,
.admin-results-switch-link:focus-visible,
#cookie-accept-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--control-shadow);
}

.athlete-form button:disabled,
.fav-btn:disabled,
.database-download-button:disabled,
.rank-tab:disabled,
.jump-to-me-btn:disabled,
.settings-form button:disabled,
.auth-form button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.rank-switch,
.admin-results-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--control-bg) 88%, var(--surface-strong) 12%);
  box-shadow: var(--control-shadow);
}

.rank-tab,
.admin-results-switch-link {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
}

.rank-tab:hover,
.admin-results-switch-link:hover {
  background: var(--control-bg-hover);
  color: var(--ink);
}

.rank-tab.active,
.admin-results-switch-link.active {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 86%, #082a73 14%);
  color: #fff;
  box-shadow: 0 7px 16px color-mix(in srgb, var(--accent) 22%, transparent);
}

.admin-results-standings-btn {
  width: 30px;
  height: 30px;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--control-border) 62%);
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--control-bg) 42%);
  color: var(--accent);
}

.admin-results-standings-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--control-bg) 88%);
  border-color: var(--accent);
}

.settings-toggle-row {
  width: fit-content;
  padding: 8px 10px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--control-bg);
  box-shadow: var(--control-shadow);
}

.settings-toggle-ui {
  width: 44px;
  height: 24px;
  border-color: var(--control-border);
  background: var(--surface-strong);
}

.settings-toggle-ui::after {
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
}

.settings-toggle-input:checked+.settings-toggle-ui::after {
  transform: translateX(20px);
}

.settings-toggle-copy {
  font-size: 14px;
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--control-shadow);
}

.table-wrap table {
  background: transparent;
}

.table-wrap th {
  background: color-mix(in srgb, var(--surface-strong) 68%, var(--card) 32%);
  color: color-mix(in srgb, var(--ink) 72%, var(--muted) 28%);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.table-wrap td {
  border-color: color-mix(in srgb, var(--line) 74%, transparent);
}

.table-wrap tbody tr:hover td {
  background: color-mix(in srgb, var(--accent-soft) 28%, transparent);
}

.message {
  border-radius: var(--radius-control);
}

.default-pill,
.result-live-badge,
.slot-status,
.slot-period,
.h2h-outcome-pill {
  border-radius: var(--radius-pill);
}

body[data-theme="dark"] .card {
  background: color-mix(in srgb, var(--card) 96%, #0b0f0e 4%);
}

body[data-theme="dark"] .hero,
body[data-theme="dark"] .athlete-static-card,
body[data-theme="dark"] .live-focus {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, #26342f 6%) 0%, var(--card) 100%);
}

body[data-theme="dark"] .table-wrap th {
  background: color-mix(in srgb, var(--surface-strong) 78%, var(--card) 22%);
}

.admin-users-table-wrap {
  max-height: 520px;
}

.admin-users-table {
  table-layout: fixed;
  min-width: 1230px;
}

.admin-users-table th,
.admin-users-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-users-table th:nth-child(1),
.admin-users-table td:nth-child(1) {
  width: 36px;
}

.admin-users-table th:nth-child(2),
.admin-users-table td:nth-child(2) {
  width: 220px;
}

.admin-users-table th:nth-child(4),
.admin-users-table td:nth-child(4),
.admin-users-table th:nth-child(6),
.admin-users-table td:nth-child(6),
.admin-users-table th:nth-child(8),
.admin-users-table td:nth-child(8),
.admin-users-table th:nth-child(9),
.admin-users-table td:nth-child(9) {
  width: 76px;
}

.admin-users-table th:nth-child(3),
.admin-users-table td:nth-child(3) {
  width: 100px;
}

.admin-users-table th:nth-child(5),
.admin-users-table td:nth-child(5) {
  width: 208px;
}

/* Piano: stato attuale e modulo di cambio (Free/Premium con scadenza). */
.admin-users-table td:nth-child(5) {
  overflow: visible;
  vertical-align: top;
}

.admin-plan-until {
  display: block;
  margin-top: 2px;
  font-size: 11px;
}

.admin-plan-edit {
  margin-top: 6px;
}

.admin-plan-edit summary {
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.admin-plan-form {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.admin-plan-form label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.admin-plan-form select,
.admin-plan-form input {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 12px;
}

.admin-plan-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  white-space: normal;
}

.admin-users-table th:nth-child(7),
.admin-users-table td:nth-child(7) {
  width: 150px;
}

.admin-users-table th:nth-child(10),
.admin-users-table td:nth-child(10) {
  width: 206px;
}

.admin-users-table th:nth-child(11),
.admin-users-table td:nth-child(11) {
  width: 94px;
  text-align: right;
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--card);
  box-shadow: -8px 0 12px color-mix(in srgb, var(--bg) 70%, transparent);
}

.admin-users-table th:nth-child(11) {
  z-index: 21;
  background: color-mix(in srgb, var(--surface-strong) 68%, var(--card) 32%);
}

.admin-users-table .fav-inline-form {
  display: inline-flex;
}

.admin-users-table .fav-btn {
  min-height: 36px;
  padding-inline: 10px;
}

.auth-body:has(.cookie-banner:not([hidden])) .auth-page {
  padding-bottom: 124px;
}

.cookie-banner {
  left: 50%;
  right: auto;
  bottom: 14px;
  width: min(980px, calc(100% - 28px));
  transform: translateX(-50%);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: 0 16px 38px rgba(18, 28, 26, 0.14);
}

.cookie-banner p {
  flex: 1 1 260px;
}

.cookie-banner button {
  min-height: 40px;
}

@media (max-width: 900px) {
  .auth-body:has(.cookie-banner:not([hidden])) .auth-page {
    padding-bottom: 132px;
  }

  .cookie-banner {
    position: fixed;
    z-index: 240;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: calc(100% - 24px);
    max-height: min(44vh, 260px);
    overflow-y: auto;
    margin: 0;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
  }

  .cookie-banner p {
    flex-basis: 100%;
  }

  .cookie-form,
  .cookie-banner button {
    width: 100%;
  }

  body:has(.mobile-tabbar) .cookie-banner {
    bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

/* ---- Protezione classifica ITTF (art. 2.6) ---- */
.ittf-protection-callout {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #d9a441;
  border-left: 4px solid #d9a441;
  border-radius: 10px;
  background: #fff7e8;
}
.ittf-protection-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a5a11;
  background: #f6e4bf;
  padding: 2px 8px;
  border-radius: 999px;
}
.ittf-protection-value {
  margin-left: 8px;
  color: #8a5a11;
  font-size: 1.05rem;
}
.ittf-protection-callout .meta {
  margin-top: 6px;
  color: #6f6048;
}
.ittf-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #8a5a11;
  background: #f6e4bf;
  border: 1px solid #e6c987;
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
}
/* Dark mode comfort pass: neutral surfaces, readable states, soft contrast. */
body[data-theme="dark"] {
  background: linear-gradient(180deg, #161b1f 0%, var(--bg) 260px, var(--bg) 100%);
}

body[data-theme="dark"] .page,
body[data-theme="dark"] .app-main {
  color: var(--ink);
}

body[data-theme="dark"] .card,
body[data-theme="dark"] .sidebar,
body[data-theme="dark"] .table-wrap,
body[data-theme="dark"] .stat-modal-dialog,
body[data-theme="dark"] .calendar-modal,
body[data-theme="dark"] .share-modal,
body[data-theme="dark"] .standings-modal,
body[data-theme="dark"] .cookie-banner,
body[data-theme="dark"] .admin-users-table th:nth-child(11),
body[data-theme="dark"] .admin-users-table td:nth-child(11) {
  background: color-mix(in srgb, var(--card) 96%, var(--surface) 4%);
  border-color: var(--line);
}

body[data-theme="dark"] .hero,
body[data-theme="dark"] .athlete-static-card,
body[data-theme="dark"] .live-focus,
body[data-theme="dark"] .h2h-summary-card,
body[data-theme="dark"] .slot-summary-box,
body[data-theme="dark"] .best-live-athlete-box,
body[data-theme="dark"] .database-export-card,
body[data-theme="dark"] .database-bundle-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, var(--surface-strong) 8%) 0%, var(--card) 100%);
  border-color: var(--line);
}

body[data-theme="dark"] .brand-lockup,
body[data-theme="dark"] .live-stat,
body[data-theme="dark"] .athlete-field,
body[data-theme="dark"] .athlete-category-box,
body[data-theme="dark"] .h2h-kpi-box,
body[data-theme="dark"] .h2h-pie-center,
body[data-theme="dark"] .pie-center,
body[data-theme="dark"] .slot-mini-badge,
body[data-theme="dark"] .slot-summary-meta span,
body[data-theme="dark"] .slot-detail-list span,
body[data-theme="dark"] .slot-period,
body[data-theme="dark"] .slot-status,
body[data-theme="dark"] .stat-item {
  background: color-mix(in srgb, var(--surface) 78%, var(--card) 22%);
  border-color: var(--line);
}

body[data-theme="dark"] .message,
body[data-theme="dark"] .ittf-protection-callout {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 48%, var(--line) 52%);
  color: #f2d7a0;
}

body[data-theme="dark"] .record-alert,
body[data-theme="dark"] .delta-pos,
body[data-theme="dark"] .slot-status-valido,
body[data-theme="dark"] .h2h-outcome-win {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 45%, var(--line) 55%);
  color: #b7f1cf;
}

body[data-theme="dark"] .error,
body[data-theme="dark"] .delta-neg,
body[data-theme="dark"] .h2h-outcome-loss,
body[data-theme="dark"] .result-live-badge,
body[data-theme="dark"] .slot-period-live,
body[data-theme="dark"] .calendar-status-badge.status-live,
body[data-theme="dark"] .calendar-day-status.status-live {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line) 58%);
  color: #ffc4c4;
}

body[data-theme="dark"] .delta-zero,
body[data-theme="dark"] .slot-status-storico,
body[data-theme="dark"] .slot-status-non-valido,
body[data-theme="dark"] .h2h-outcome-unknown,
body[data-theme="dark"] .calendar-status-badge.status-finished,
body[data-theme="dark"] .calendar-day-status.status-finished {
  background: color-mix(in srgb, var(--surface-strong) 72%, var(--card) 28%);
  border-color: var(--line);
  color: var(--muted);
}

body[data-theme="dark"] .info-link,
body[data-theme="dark"] .admin-results-switch-link,
body[data-theme="dark"] .default-pill,
body[data-theme="dark"] .stat-unit-chip,
body[data-theme="dark"] .ittf-tag,
body[data-theme="dark"] .ittf-protection-badge {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--card) 30%);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line) 66%);
  color: #b8f0d4;
}

body[data-theme="dark"] .athlete-form button,
body[data-theme="dark"] .auth-form button,
body[data-theme="dark"] .settings-form button,
body[data-theme="dark"] .fav-btn,
body[data-theme="dark"] .database-download-button,
body[data-theme="dark"] .admin-results-detail-search button,
body[data-theme="dark"] .admin-results-inline-form button,
body[data-theme="dark"] .share-action-primary,
body[data-theme="dark"] #cookie-accept-btn,
body[data-theme="dark"] .rank-tab.active,
body[data-theme="dark"] .admin-results-switch-link.active,
body[data-theme="dark"] .side-nav-link.active {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 72%, #ffffff 28%);
  color: var(--on-accent);
}

body[data-theme="dark"] .athlete-form button:hover,
body[data-theme="dark"] .auth-form button:hover,
body[data-theme="dark"] .settings-form button:hover,
body[data-theme="dark"] .fav-btn:hover,
body[data-theme="dark"] .database-download-button:hover,
body[data-theme="dark"] .admin-results-detail-search button:hover,
body[data-theme="dark"] .admin-results-inline-form button:hover,
body[data-theme="dark"] .share-action-primary:hover,
body[data-theme="dark"] #cookie-accept-btn:hover {
  background: color-mix(in srgb, var(--accent) 88%, #ffffff 12%);
  color: var(--on-accent);
}

/* Le opzioni dell'autocomplete sono righe di menu, non pulsanti primari.
   Ripristina il loro aspetto dopo le regole dark condivise dei form. */
body[data-theme="dark"] .athlete-form .athlete-search-option,
body[data-theme="dark"] .athlete-search-option {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  transform: none;
}

body[data-theme="dark"] .athlete-form .athlete-search-option:hover,
body[data-theme="dark"] .athlete-form .athlete-search-option.is-active,
body[data-theme="dark"] .athlete-search-option:hover,
body[data-theme="dark"] .athlete-search-option.is-active {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--ink);
  box-shadow: none;
  transform: none;
}

body[data-theme="dark"] .fav-btn.secondary,
body[data-theme="dark"] .jump-to-me-btn,
body[data-theme="dark"] .rank-find-nav-btn,
body[data-theme="dark"] .admin-results-inline-form .admin-results-link-button,
body[data-theme="dark"] .admin-results-expand-toggle,
body[data-theme="dark"] .ranking-share-btn,
body[data-theme="dark"] .share-action-btn:not(.share-action-primary),
body[data-theme="dark"] .share-modal-close,
body[data-theme="dark"] .standings-modal-close,
body[data-theme="dark"] .stat-more-btn,
body[data-theme="dark"] .stat-modal-close,
body[data-theme="dark"] .sidebar-toggle,
body[data-theme="dark"] .sidebar-icon-home {
  background: var(--control-bg);
  border-color: var(--control-border);
  color: var(--ink);
}

body[data-theme="dark"] .fav-btn.secondary:hover,
body[data-theme="dark"] .jump-to-me-btn:hover,
body[data-theme="dark"] .rank-find-nav-btn:hover,
body[data-theme="dark"] .admin-results-inline-form .admin-results-link-button:hover,
body[data-theme="dark"] .admin-results-expand-toggle:hover,
body[data-theme="dark"] .ranking-share-btn:hover,
body[data-theme="dark"] .share-action-btn:not(.share-action-primary):hover,
body[data-theme="dark"] .share-modal-close:hover,
body[data-theme="dark"] .standings-modal-close:hover,
body[data-theme="dark"] .stat-more-btn:hover,
body[data-theme="dark"] .stat-modal-close:hover,
body[data-theme="dark"] .sidebar-toggle:hover,
body[data-theme="dark"] .sidebar-icon-home:hover,
body[data-theme="dark"] .side-nav-link:hover {
  background: var(--control-bg-hover);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--control-border) 58%);
  color: var(--ink);
}

body[data-theme="dark"] .fav-btn.danger,
body[data-theme="dark"] .admin-results-inline-form .admin-results-reset-btn {
  background: #c95f5f;
  border-color: #df8585;
  color: #16090a;
}

body[data-theme="dark"] .table-wrap th,
body[data-theme="dark"] thead th {
  background: color-mix(in srgb, var(--surface-strong) 76%, var(--card) 24%);
  color: #d8e2de;
}

body[data-theme="dark"] .table-wrap td,
body[data-theme="dark"] td {
  border-bottom-color: color-mix(in srgb, var(--line) 78%, transparent);
}

body[data-theme="dark"] .table-wrap tbody tr:hover td {
  background: color-mix(in srgb, var(--accent-soft) 36%, transparent);
}

body[data-theme="dark"] tr.me,
body[data-theme="dark"] .club-row-me td,
body[data-theme="dark"] tr.rank-find-hit td,
body[data-theme="dark"] tr.rank-find-current td,
body[data-theme="dark"] .calendar-default-entry-row td {
  background: color-mix(in srgb, var(--warning) 18%, var(--card) 82%) !important;
}

body[data-theme="dark"] .info-link,
body[data-theme="dark"] .footer-social-link {
  color: #9ed0ff;
}

body[data-theme="dark"] .info-link:hover,
body[data-theme="dark"] .footer-social-link:hover {
  color: #c5e1ff;
}

body[data-theme="dark"] .best-live-improve,
body[data-theme="dark"] .recent-esito-win {
  color: #8ee6b4;
}

body[data-theme="dark"] .recent-esito-loss {
  color: #ffaaaa;
}

body[data-theme="dark"] .stat-item.stat-rank-1 {
  border-color: color-mix(in srgb, #e3bd5f 52%, var(--line) 48%);
  background: linear-gradient(160deg, color-mix(in srgb, #6f5521 38%, var(--card) 62%) 0%, var(--card) 100%);
}

body[data-theme="dark"] .stat-item.stat-rank-2 {
  border-color: color-mix(in srgb, #a9b7c4 42%, var(--line) 58%);
  background: linear-gradient(160deg, color-mix(in srgb, #52616e 28%, var(--card) 72%) 0%, var(--card) 100%);
}

body[data-theme="dark"] .stat-item.stat-rank-3 {
  border-color: color-mix(in srgb, #d18f61 44%, var(--line) 56%);
  background: linear-gradient(160deg, color-mix(in srgb, #6a3f24 30%, var(--card) 70%) 0%, var(--card) 100%);
}

body[data-theme="dark"] .calendar-day-cell,
body[data-theme="dark"] .calendar-weekday {
  background: color-mix(in srgb, var(--surface) 78%, var(--card) 22%);
  border-color: var(--line);
}

body[data-theme="dark"] .site-footer {
  background: linear-gradient(180deg, #151a1e 0%, #111417 100%);
  border-top-color: var(--line);
}

/* PWA, footer condiviso e privacy. */
.footer-col h2 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #122443;
}

.footer-disclaimer {
  opacity: 0.86;
}

.footer-legal-link {
  display: inline-flex;
  color: #0f6a87;
  font-size: 12px;
  font-weight: 750;
  text-underline-offset: 3px;
}

.footer-install-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--accent) 66%, #ffffff 34%);
  border-radius: 10px;
  padding: 8px 11px;
  color: #ffffff;
  background: var(--accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 18%, transparent);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.footer-install-button:hover,
.footer-install-button.pwa-install-ready {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.footer-install-button svg {
  width: 17px;
  height: 17px;
}

.pwa-install-modal[hidden] {
  display: none !important;
}

.pwa-install-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 18px;
}

.pwa-install-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 28, 0.64);
  backdrop-filter: blur(5px);
}

.pwa-install-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px;
  color: var(--ink);
  background: var(--card);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.pwa-install-dialog img {
  display: block;
  margin: 0 auto 14px;
  border-radius: 15px;
}

.pwa-install-dialog h2 {
  margin: 0 34px 10px;
  font-size: 22px;
}

.pwa-install-dialog p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.55;
}

.pwa-install-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: var(--card);
  font: inherit;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.pwa-install-ok {
  min-height: 40px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 9px 16px;
  color: #ffffff;
  background: var(--accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

body.pwa-install-modal-open {
  overflow: hidden;
}

.cookie-banner a {
  color: var(--accent);
  font-weight: 750;
  text-underline-offset: 2px;
}

.auth-privacy-note {
  margin: 2px 0 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.auth-privacy-note a {
  color: var(--accent);
  font-weight: 750;
}

.public-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: min(100% - 32px, 1100px);
  margin: 18px auto 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: var(--shadow);
}

.public-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 850;
  text-decoration: none;
}

.public-brand img {
  width: 38px;
  height: 38px;
}

.public-login-link {
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 8px 12px;
  color: #ffffff;
  background: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.privacy-page {
  display: grid;
  align-content: start;
  gap: 18px;
}

.privacy-page-public {
  width: min(100%, 1100px);
  margin: 0 auto;
  padding-top: 22px;
}

.privacy-page > .card {
  margin-bottom: 0;
}

.privacy-hero {
  padding: clamp(22px, 4vw, 38px);
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--accent) 16%, transparent) 0, transparent 38%),
    var(--card);
}

.privacy-hero h1 {
  margin: 3px 0 12px;
}

.privacy-hero .legal-updated {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.privacy-hero p:not(.meta) {
  max-width: 820px;
  line-height: 1.6;
}

.privacy-index h2,
.privacy-section h2 {
  margin-top: 0;
}

.privacy-index ul,
.privacy-section ul {
  margin: 0;
  padding-left: 20px;
}

.privacy-index li,
.privacy-section li {
  margin: 7px 0;
  line-height: 1.55;
}

.privacy-section p {
  line-height: 1.65;
}

.privacy-section a {
  color: #0f6a87;
  font-weight: 700;
  text-underline-offset: 3px;
}

.privacy-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.privacy-data-grid article {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 82%, var(--card) 18%);
}

.privacy-data-grid h3 {
  margin: 0 0 7px;
  font-size: 15px;
}

.privacy-data-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.privacy-table-wrap {
  margin: 12px 0;
}

.privacy-table {
  min-width: 720px;
}

.privacy-table th:first-child,
.privacy-table td:first-child {
  width: 50%;
}

.privacy-table code {
  font-size: 12px;
}

body[data-theme="dark"] .footer-legal-link,
body[data-theme="dark"] .privacy-section a {
  color: #9ed0ff;
}

body[data-theme="dark"] .footer-install-button,
body[data-theme="dark"] .pwa-install-ok,
body[data-theme="dark"] .public-login-link {
  color: var(--on-accent);
}

@media (max-width: 720px) {
  .privacy-data-grid {
    grid-template-columns: 1fr;
  }

  .privacy-page-public {
    padding-inline: 12px;
  }

  .public-header {
    width: calc(100% - 24px);
  }

  .pwa-install-dialog {
    padding: 24px 18px 20px;
  }
}

/* Calcolatore punti */
.calculator-page {
  display: grid;
  align-content: start;
  gap: 18px;
}

.calculator-page > .card,
.calculator-layout > .card {
  margin-bottom: 0;
}

.calculator-mode-panel[hidden],
.calculator-result-empty[hidden],
#calculator-result-content[hidden],
.calculator-breakdown > div[hidden],
#calculator-spinner[hidden],
.calculator-error[hidden] {
  display: none !important;
}

/* Intestazione con un collegamento a destra del testo (page_hero con action). */
.page-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.page-hero-main {
  min-width: 0;
}

.calculator-hero {
  padding: clamp(22px, 4vw, 36px);
  background:
    radial-gradient(circle at 92% 15%, color-mix(in srgb, var(--accent) 16%, transparent) 0, transparent 36%),
    var(--card);
}

.calculator-hero h1 {
  margin: 3px 0 9px;
}

.calculator-hero .meta {
  max-width: 760px;
  margin-bottom: 0;
  line-height: 1.55;
}

.calculator-regulation-link {
  flex: 0 0 auto;
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.calculator-regulation-link:hover {
  background: var(--accent-soft);
}

.calculator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.75fr);
  align-items: start;
  gap: 18px;
}

.calculator-form {
  padding: clamp(18px, 3vw, 28px);
}

.calculator-form-section {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 4px 0 24px;
}

.calculator-form-section + .calculator-form-section {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.calculator-section-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--on-accent);
  background: var(--accent);
  font-size: 14px;
  font-weight: 850;
}

.calculator-section-body h2 {
  margin: 3px 0 16px;
  font-size: 18px;
}

.calculator-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.calculator-athlete-grid {
  grid-template-columns: minmax(220px, 1.4fr) minmax(170px, 0.6fr);
}

.calculator-field-wide {
  grid-column: auto;
}

.calculator-field {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.calculator-field[hidden] {
  display: none;
}

.calculator-field > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.calculator-field input,
.calculator-field select {
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  padding: 9px 11px;
  color: var(--ink);
  background: var(--control-bg);
  box-shadow: var(--control-shadow);
  font: inherit;
  font-size: 14px;
}

.calculator-field input:focus,
.calculator-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.calculator-field-help {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.calculator-opponent-search {
  grid-column: 1 / -1;
  align-items: center;
  margin: 0;
}

.calculator-opponent-search label {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.calculator-opponent-search input {
  flex: 1 1 280px;
  min-width: 0;
}

.calculator-opponent-search .athlete-search-control {
  min-width: 0;
}

.calculator-single-match-note {
  display: inline-flex;
  width: fit-content;
  margin: 12px 0 0;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 800;
}

.calculator-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
}

.calculator-check input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.calculator-submit-row {
  display: grid;
  gap: 10px;
  padding-left: 48px;
}

.calculator-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--accent);
  border-radius: 11px;
  padding: 10px 18px;
  color: var(--on-accent);
  background: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.calculator-submit:hover:not(:disabled) {
  filter: brightness(1.05);
}

.calculator-submit:disabled {
  cursor: wait;
  opacity: 0.72;
}

.calculator-error {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
  border-radius: 9px;
  padding: 9px 11px;
  color: var(--danger);
  background: var(--danger-soft);
  font-size: 12px;
  font-weight: 700;
}

.calculator-result {
  position: sticky;
  top: 16px;
  min-height: 420px;
  padding: clamp(20px, 3vw, 28px);
  overflow: hidden;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--accent-soft) 72%, var(--card) 28%), var(--card) 45%);
}

.calculator-result-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 360px;
  text-align: center;
}

.calculator-result-empty h2 {
  margin: 14px 0 7px;
  font-size: 18px;
}

.calculator-result-empty p {
  max-width: 260px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.calculator-result-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 18px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 28px;
  font-weight: 850;
}

#calculator-result-title {
  margin: 0 0 18px;
  font-size: 19px;
}

.calculator-earned-box {
  display: grid;
  gap: 4px;
  border-radius: 16px;
  padding: 18px;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #0f6a87 30%));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 22%, transparent);
}

.calculator-earned-box span,
.calculator-projected-box span {
  font-size: 12px;
  font-weight: 750;
}

.calculator-earned-box strong {
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1;
}

.calculator-projected-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--surface) 82%, var(--card) 18%);
}

.calculator-projected-box strong {
  color: var(--accent);
  font-size: 20px;
}

.calculator-breakdown {
  display: grid;
  gap: 0;
  margin: 0;
}

.calculator-breakdown > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

.calculator-breakdown dt {
  color: var(--muted);
  font-size: 12px;
}

.calculator-breakdown dd {
  margin: 0;
  max-width: 180px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
}

.calculator-result-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.calculator-disclaimer h2 {
  margin-top: 0;
  font-size: 17px;
}

.calculator-disclaimer p {
  max-width: 960px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 1050px) {
  .calculator-layout {
    grid-template-columns: 1fr;
  }

  .calculator-result {
    position: static;
    min-height: 0;
  }

  .calculator-result-empty {
    min-height: 220px;
  }
}

@media (max-width: 680px) {
  .page-hero-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .calculator-regulation-link {
    width: 100%;
    text-align: center;
  }

  .calculator-form-section {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
  }

  .calculator-section-number {
    width: 28px;
    height: 28px;
  }

  .calculator-field-grid,
  .calculator-athlete-grid {
    grid-template-columns: 1fr;
  }

  .calculator-submit-row {
    padding-left: 38px;
  }

  .calculator-breakdown > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .calculator-breakdown dd {
    max-width: none;
    text-align: left;
  }

  .athlete-search-suggestions {
    max-height: 260px;
  }

  .athlete-form .athlete-search-option,
  .athlete-search-option {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* Struttura condivisa delle sezioni applicative. */
.section-page {
  display: grid;
  align-content: start;
  gap: 18px;
}

.section-page > .card,
.section-page > .settings-dual-grid {
  margin-bottom: 0;
}

.section-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 4vw, 38px);
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 36%),
    var(--card);
}

.section-hero h1 {
  margin: 3px 0 9px;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.08;
}

.section-hero .meta {
  max-width: 800px;
  line-height: 1.6;
}

.data-status-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.data-freshness,
.data-refresh-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 84%, transparent);
}

.data-freshness svg,
.data-refresh-button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.data-refresh-button {
  appearance: none;
  width: 30px;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.data-refresh-button:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 68%, var(--card));
  box-shadow: none;
  transform: none;
}

.data-feedback-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line) 80%);
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
  font-weight: 750;
  text-decoration: none;
}

.data-feedback-link svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.data-feedback-link:hover,
.data-feedback-link:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line) 58%);
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
}

.data-refresh-button:disabled {
  cursor: wait;
  opacity: .7;
}

[data-page-refresh][aria-busy="true"] svg {
  animation: spin 900ms linear infinite;
}

.section-page > .card:not(.section-hero) {
  padding: clamp(18px, 2.5vw, 24px);
}

/* Feedback e contatti */
.feedback-page {
  display: grid;
  gap: 18px;
}

.feedback-success,
.feedback-unavailable {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}

.feedback-success {
  border-color: color-mix(in srgb, #16845b 35%, var(--line));
  background: color-mix(in srgb, #16845b 9%, var(--card));
}

.feedback-unavailable {
  display: block;
  border-color: color-mix(in srgb, #b7791f 35%, var(--line));
  background: color-mix(in srgb, #b7791f 8%, var(--card));
}

.feedback-status-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  background: #16845b;
  font-size: 20px;
  font-weight: 900;
}

.feedback-success h2,
.feedback-unavailable h2 {
  margin: 0 0 3px;
  font-size: 16px;
}

.feedback-success p,
.feedback-unavailable p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.feedback-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: start;
  gap: 16px;
}

.feedback-form {
  position: relative;
  display: grid;
  gap: 22px;
  padding: clamp(20px, 3.5vw, 32px);
  overflow: hidden;
}

.feedback-form-heading h2 {
  margin: 0 0 6px;
  font-size: 21px;
}

.feedback-form-heading > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.feedback-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.feedback-error {
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
  border-radius: 10px;
  padding: 11px 13px;
  color: var(--danger);
  background: var(--danger-soft);
  font-size: 13px;
  font-weight: 750;
}

.feedback-category-fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.feedback-category-fieldset legend {
  margin-bottom: 10px;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
}

.feedback-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.feedback-category-option {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 40px 12px 13px;
  background: color-mix(in srgb, var(--surface) 78%, var(--card) 22%);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.feedback-category-option:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  transform: translateY(-1px);
}

.feedback-category-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}

.feedback-category-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.feedback-category-option:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--accent) 25%, transparent);
  outline-offset: 2px;
}

.feedback-category-copy {
  display: grid;
  gap: 4px;
}

.feedback-category-copy strong {
  font-size: 13px;
}

.feedback-category-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.feedback-category-check {
  position: absolute;
  top: 50%;
  right: 13px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: transparent;
  background: var(--card);
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 900;
}

.feedback-category-option:has(input:checked) .feedback-category-check {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}

.feedback-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.feedback-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.feedback-field > span {
  font-size: 12px;
  font-weight: 800;
}

.feedback-field > span small {
  color: var(--muted);
  font-weight: 600;
}

.feedback-field input,
.feedback-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--text);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  box-sizing: border-box;
}

.feedback-field textarea {
  min-height: 170px;
  resize: vertical;
}

.feedback-field input::placeholder,
.feedback-field textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 76%, transparent);
}

.feedback-field input:focus,
.feedback-field textarea:focus {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.feedback-message-field > small {
  justify-self: end;
  color: var(--muted);
  font-size: 10px;
}

.feedback-reply-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 80%, var(--card) 20%);
}

.feedback-reply-note svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: var(--accent);
}

.feedback-reply-note p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.feedback-form-actions {
  display: grid;
  gap: 9px;
}

.feedback-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  border: 1px solid var(--accent);
  border-radius: 11px;
  padding: 10px 18px;
  color: var(--on-accent);
  background: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.feedback-submit svg {
  width: 18px;
  height: 18px;
}

.feedback-submit:hover:not(:disabled) {
  filter: brightness(1.06);
}

.feedback-submit:disabled,
.feedback-category-fieldset:disabled,
.feedback-field input:disabled,
.feedback-field textarea:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.feedback-form-actions p {
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-size: 10px;
  line-height: 1.5;
}

.feedback-aside {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 16px;
}

.feedback-impact-card,
.feedback-tips-card {
  padding: 22px;
}

.feedback-impact-card h2,
.feedback-tips-card h2 {
  margin: 0 0 14px;
  font-size: 18px;
}

.feedback-impact-card ul {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feedback-impact-card li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.feedback-impact-card li > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 900;
}

.feedback-impact-card li p,
.feedback-tips-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.footer-privacy-col .footer-legal-link + .footer-legal-link {
  margin-top: 7px;
}

.footer-privacy-col .footer-legal-link {
  display: flex;
  width: fit-content;
}

@media (max-width: 980px) {
  .feedback-layout {
    grid-template-columns: 1fr;
  }

  .feedback-aside {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .feedback-category-grid,
  .feedback-field-grid,
  .feedback-aside {
    grid-template-columns: 1fr;
  }

  .feedback-category-option {
    min-height: 70px;
  }

  .feedback-success {
    align-items: flex-start;
  }
}

/* Rifiniture condivise per accessibilità, touch e coerenza visiva. */
::selection {
  color: var(--on-accent);
  background: var(--accent);
}

a,
button,
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 2px;
}

.calculator-field input,
.calculator-field select,
.feedback-field input,
.feedback-field textarea {
  border-color: var(--control-border);
  color: var(--ink);
  background-color: var(--control-bg);
  box-shadow: var(--control-shadow);
}

.calculator-field select {
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.calculator-field input:hover,
.calculator-field select:hover,
.feedback-field input:hover,
.feedback-field textarea:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--control-border) 58%);
  background-color: var(--control-bg-hover);
}

.calculator-regulation-link,
.footer-install-button,
.feedback-submit,
.calculator-submit {
  min-height: 44px;
}

.table-wrap {
  scrollbar-color: color-mix(in srgb, var(--muted) 52%, transparent) transparent;
  scrollbar-width: thin;
}

.table-wrap::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--muted) 48%, transparent);
  background-clip: padding-box;
}

@media (max-width: 900px) {
  /* In fondo a una tabella che scorre da se' il dito continua sulla pagina;
     in orizzontale lo scorrimento resta nella tabella. */
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
  }

  /* Classifiche e giocatori vicini non hanno bisogno dell'helper: nome e punti
     sono gia' visibili nella prima porzione della riga. */
  .rank-compact-mobile tbody td {
    padding-block: 5px;
  }

  .rank-compact-mobile tbody td:nth-child(2) {
    white-space: nowrap;
  }

  .table-wrap[tabindex="0"]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 26%, transparent);
    outline-offset: 2px;
  }

  .table-wrap.table-scrollable-x[data-scroll-position="start"] {
    box-shadow: inset -18px 0 15px -18px color-mix(in srgb, var(--ink) 46%, transparent);
  }

  .table-wrap.table-scrollable-x[data-scroll-position="middle"] {
    box-shadow:
      inset 18px 0 15px -18px color-mix(in srgb, var(--ink) 46%, transparent),
      inset -18px 0 15px -18px color-mix(in srgb, var(--ink) 46%, transparent);
  }

  .table-wrap.table-scrollable-x[data-scroll-position="end"] {
    box-shadow: inset 18px 0 15px -18px color-mix(in srgb, var(--ink) 46%, transparent);
  }

  .table-wrap.table-scrollable-x:not(.rank-compact-mobile) thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 24;
    background: color-mix(in srgb, var(--card) 76%, var(--accent-soft) 24%);
    box-shadow: 1px 0 0 var(--line);
  }

  .table-wrap.table-scrollable-x:not(.rank-compact-mobile) tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    background: color-mix(in srgb, var(--card) 94%, var(--accent-soft) 6%);
    box-shadow: 1px 0 0 var(--line);
  }

  .mobile-tabbar {
    max-width: 560px;
  }

  .section-page,
  .calculator-page,
  .feedback-page,
  .privacy-page {
    gap: 14px;
  }

  .calculator-field input,
  .calculator-field select,
  .feedback-field input,
  .feedback-submit,
  .calculator-submit,
  .calculator-regulation-link {
    min-height: 46px;
  }
}

@media (max-width: 620px) {
  /* Tabelle operative: ogni riga diventa una scheda leggibile senza scroll
     orizzontale. La classe ready e' applicata solo dopo aver associato a ogni
     cella l'etichetta della relativa intestazione. */
  .table-card-mobile.table-mobile-ready {
    width: 100%;
    max-height: min(72vh, 640px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    padding: 2px 3px 2px 0;
    background: transparent;
  }

  .table-card-mobile.table-mobile-ready table,
  .table-card-mobile.table-mobile-ready tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  .table-card-mobile.table-mobile-ready thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .table-card-mobile.table-mobile-ready tbody {
    display: grid;
    gap: 9px;
  }

  .table-card-mobile.table-mobile-ready tbody tr {
    display: grid;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--card) 96%, var(--accent-soft) 4%);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--ink) 6%, transparent);
    overflow: hidden;
  }

  .table-card-mobile.table-mobile-ready tbody tr[hidden] {
    display: none;
  }

  .table-card-mobile.table-mobile-ready tbody td {
    display: grid;
    grid-template-columns: minmax(84px, 34%) minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
    width: auto !important;
    min-width: 0 !important;
    max-width: none;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
    padding: 8px 10px;
    background: transparent;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .table-card-mobile.table-mobile-ready tbody td:last-child {
    border-bottom: 0;
  }

  .table-card-mobile.table-mobile-ready tbody td::before {
    content: attr(data-label);
    grid-column: 1;
    grid-row: 1 / span 20;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.055em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .table-card-mobile.table-mobile-ready tbody td > * {
    grid-column: 2;
    min-width: 0;
  }

  .table-card-mobile.table-mobile-ready tbody td[colspan] {
    grid-template-columns: 1fr;
  }

  .table-card-mobile.table-mobile-ready tbody td[colspan]::before {
    display: none;
  }

  .table-card-mobile.table-mobile-ready .calendar-table-event-title,
  .table-card-mobile.table-mobile-ready .event-cell-title {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .table-card-mobile.table-mobile-ready .fav-btn,
  .table-card-mobile.table-mobile-ready .invoice-download-link {
    min-height: 40px;
  }

  /* Tabelle dense della dashboard: una riga compatta mostra subito le
     informazioni essenziali; il pulsante a freccia apre i campi secondari. */
  .table-disclosure-mobile.table-mobile-ready tbody {
    gap: 6px;
  }

  .table-disclosure-mobile.table-mobile-ready tbody tr {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) auto 44px;
    grid-template-areas:
      "status primary meta toggle"
      "status secondary meta toggle";
    gap: 1px 8px;
    align-items: center;
    min-height: 56px;
    padding: 5px 4px 5px 7px;
    border-radius: 10px;
    box-shadow: 0 2px 7px color-mix(in srgb, var(--ink) 4%, transparent);
  }

  .table-disclosure-mobile.table-mobile-ready tbody td {
    display: none;
    width: auto !important;
    min-width: 0 !important;
    max-width: none;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal;
    overflow-wrap: normal;
  }

  .table-disclosure-mobile.table-mobile-ready tbody td::before {
    display: none;
  }

  .table-disclosure-mobile.table-mobile-ready .mobile-summary-status,
  .table-disclosure-mobile.table-mobile-ready .mobile-summary-primary,
  .table-disclosure-mobile.table-mobile-ready .mobile-summary-secondary,
  .table-disclosure-mobile.table-mobile-ready .mobile-summary-meta,
  .table-disclosure-mobile.table-mobile-ready .mobile-row-toggle-cell {
    display: block;
  }

  .table-disclosure-mobile.table-mobile-ready .mobile-summary-status {
    grid-area: status;
    align-self: center;
  }

  .table-disclosure-mobile.table-mobile-ready .mobile-summary-primary {
    grid-area: primary;
    align-self: end;
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table-disclosure-mobile.table-mobile-ready .mobile-summary-secondary {
    grid-area: secondary;
    align-self: start;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table-disclosure-mobile.table-mobile-ready .mobile-summary-meta {
    grid-area: meta;
    color: var(--muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
  }

  .table-disclosure-mobile.table-mobile-ready .mobile-row-toggle-cell {
    grid-area: toggle;
    align-self: center;
  }

  .table-disclosure-mobile.table-mobile-ready .mobile-row-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
    box-shadow: none;
    color: var(--accent);
    cursor: pointer;
  }

  .table-disclosure-mobile.table-mobile-ready .mobile-row-toggle:hover,
  .table-disclosure-mobile.table-mobile-ready .mobile-row-toggle:focus-visible {
    border: 0;
    background: color-mix(in srgb, var(--accent-soft) 90%, var(--card) 10%);
    color: var(--accent-strong);
    box-shadow: none;
    transform: none;
  }

  .table-disclosure-mobile.table-mobile-ready .mobile-row-toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
    outline-offset: 1px;
  }

  .table-disclosure-mobile.table-mobile-ready .mobile-row-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 160ms ease;
  }

  .table-disclosure-mobile.table-mobile-ready .mobile-row-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .table-disclosure-mobile.table-mobile-ready tbody tr:not(.mobile-row-expanded) .event-cell-sub {
    display: none;
  }

  .table-disclosure-mobile.table-mobile-ready tbody tr:not(.mobile-row-expanded) .event-cell-titlerow {
    display: flex;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .table-disclosure-mobile.table-mobile-ready tbody tr:not(.mobile-row-expanded) .event-cell-title {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table-disclosure-mobile.table-mobile-ready tbody tr.mobile-row-expanded {
    padding-bottom: 8px;
  }

  .table-disclosure-mobile.table-mobile-ready tbody tr.mobile-row-expanded .mobile-summary-primary,
  .table-disclosure-mobile.table-mobile-ready tbody tr.mobile-row-expanded .mobile-summary-secondary {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .table-disclosure-mobile.table-mobile-ready tbody tr.mobile-row-expanded .event-cell-title,
  .table-disclosure-mobile.table-mobile-ready tbody tr.mobile-row-expanded .event-cell-sub {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .table-disclosure-mobile.table-mobile-ready tbody tr.mobile-row-expanded .mobile-summary-primary {
    align-self: center;
  }

  .table-disclosure-mobile.table-mobile-ready tbody tr.mobile-row-expanded .mobile-detail-only {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(88px, 31%) minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
    margin-top: 3px;
    padding: 7px 4px 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .table-disclosure-mobile.table-mobile-ready tbody tr.mobile-row-expanded .mobile-detail-only::before {
    content: attr(data-label);
    display: block;
    grid-column: 1;
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.055em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .table-disclosure-mobile.table-mobile-ready tbody tr.mobile-row-expanded .mobile-detail-only > * {
    grid-column: 2;
    min-width: 0;
  }

  .recent-matches-table.table-mobile-ready .recent-esito-cell {
    display: grid;
    grid-template-columns: 1fr !important;
    width: 30px !important;
    height: 30px;
    place-items: center;
    border-radius: 999px !important;
    font-size: 12px;
    font-weight: 900;
  }

  .recent-matches-table.table-mobile-ready .recent-esito-win {
    background: color-mix(in srgb, #159447 13%, var(--card) 87%) !important;
  }

  .recent-matches-table.table-mobile-ready .recent-esito-loss {
    background: color-mix(in srgb, #c54545 13%, var(--card) 87%) !important;
  }

  .recent-matches-table.table-mobile-ready .recent-mobile-points {
    display: flex;
    align-items: center;
    overflow: visible;
    white-space: normal;
  }

  /* Riepilogo incontri: sotto l'avversario il periodo (Storico, Nuovo, LIVE)
     e i punti dell'incontro, come le colonne desktop. */
  .recent-matches-table.table-mobile-ready tbody tr {
    grid-template-columns: max-content max-content minmax(0, 1fr) auto 44px;
    grid-template-areas:
      "status primary primary meta toggle"
      "status period secondary meta toggle";
  }

  .recent-matches-table.table-mobile-ready .recent-period-cell {
    display: block;
    grid-area: period;
    align-self: start;
  }

  .recent-matches-table.table-mobile-ready .recent-period-cell .slot-period,
  .recent-matches-table.table-mobile-ready .recent-period-cell .calendar-status-badge {
    min-width: 0;
    padding: 2px 7px;
    font-size: 10px;
    line-height: 1.25;
  }

  .slot-bonus-table-wrap.table-disclosure-mobile.table-mobile-ready table {
    min-width: 0;
  }

  .slot-bonus-table-wrap.table-disclosure-mobile.table-mobile-ready tbody tr td:first-child {
    box-shadow: none;
  }

  .slot-bonus-table-wrap.table-disclosure-mobile.table-mobile-ready .slot-status,
  .h2h-table-wrap.table-disclosure-mobile.table-mobile-ready .h2h-outcome-pill {
    min-width: 0;
    padding: 3px 6px;
    font-size: 9px;
    white-space: nowrap;
  }

  /* Classifiche e giocatori vicini: layout compatto a tre aree con posizione,
     atleta/dettaglio e azione. I punti restano sotto il nome. */
  .rank-compact-mobile {
    max-height: min(76vh, 680px) !important;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    padding: 2px 3px 2px 0;
    background: transparent;
  }

  .rank-compact-mobile table,
  .rank-compact-mobile tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  .rank-compact-mobile thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .rank-compact-mobile tbody {
    display: grid;
    gap: 5px;
  }

  .rank-compact-mobile tbody tr {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 38px;
    grid-template-areas:
      "position athlete action"
      "position detail action";
    align-items: center;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 6px;
    background: color-mix(in srgb, var(--card) 96%, var(--accent-soft) 4%);
    box-shadow: 0 3px 9px color-mix(in srgb, var(--ink) 4%, transparent);
  }

  .rank-compact-mobile tbody tr[hidden] {
    display: none;
  }

  .rank-compact-mobile tbody td {
    min-width: 0;
    max-width: none;
    border: 0;
    padding: 1px 5px;
    background: transparent;
    line-height: 1.3;
    white-space: normal;
  }

  .rank-compact-mobile tbody td:nth-child(1) {
    grid-area: position;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--line);
    padding-left: 0;
  }

  /* La riga dell'atleta predefinito e' una singola card: il colore sulle
     singole celle spezzava l'evidenziazione nel layout CSS Grid mobile. */
  .rank-compact-mobile tbody tr.club-row-me {
    border-color: color-mix(in srgb, var(--warning) 52%, var(--line) 48%);
    background: color-mix(in srgb, var(--warning-soft) 86%, var(--card) 14%) !important;
    box-shadow:
      inset 4px 0 0 var(--warning),
      0 3px 9px color-mix(in srgb, var(--ink) 4%, transparent);
  }

  .rank-compact-mobile tbody tr.club-row-me td {
    background: transparent !important;
  }

  .rank-compact-mobile tbody tr.club-row-me td:first-child {
    border-left: 0;
  }

  body[data-theme="dark"] .rank-compact-mobile tbody tr.club-row-me {
    background: color-mix(in srgb, var(--warning) 15%, var(--card) 85%) !important;
  }

  .rank-compact-mobile tbody td:nth-child(2) {
    grid-area: athlete;
    display: flex;
    align-items: baseline;
    gap: 6px;
    overflow: hidden;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .rank-compact-mobile tbody td:nth-child(2) .club-athlete-link,
  .rank-compact-mobile tbody td:nth-child(2) .rank-athlete-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rank-compact-mobile tbody td:nth-child(3) {
    display: none;
  }

  .rank-compact-mobile tbody tr:has(td:nth-child(5)) td:nth-child(4) {
    grid-area: detail;
  }

  .rank-compact-mobile tbody tr:has(td:nth-child(5)) td:nth-child(5),
  .rank-compact-mobile tbody tr:not(:has(td:nth-child(5))) td:nth-child(4) {
    grid-area: action;
    justify-self: end;
  }

  .rank-compact-mobile.table-mobile-scroll tbody tr {
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    grid-template-areas: "position athlete detail action";
  }

  .rank-compact-mobile.table-mobile-scroll tbody tr:has(td:nth-child(5)) td:nth-child(5) {
    justify-self: end;
  }

  .rank-compact-mobile .rank-inline-points {
    flex: 0 0 auto;
    margin: 0;
    line-height: 1.25;
    vertical-align: baseline;
  }

  /* In Classifiche il punteggio resta separato dall'atleta. Su mobile la
     variazione della graduatoria Live prende il posto del link Scheda; nelle
     graduatorie storiche, dove non e' disponibile, il link viene omesso. */
  .rankings-table-mobile tbody tr {
    grid-template-columns: 44px minmax(0, 1fr) max-content;
    grid-template-areas: "position athlete points";
    column-gap: 8px;
  }

  .rankings-table-mobile tbody tr:has(td:nth-child(5)) {
    grid-template-columns: 44px minmax(0, 1fr) max-content max-content;
    grid-template-areas: "position athlete points variation";
  }

  .rankings-table-mobile tbody td:nth-child(3) {
    grid-area: points;
    display: block;
    justify-self: end;
    padding-inline: 4px;
    color: var(--accent);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .rankings-table-mobile tbody td:nth-child(3)::after {
    content: " pt";
    font-size: 10px;
    font-weight: 700;
  }

  .rankings-table-mobile tbody tr:has(td:nth-child(5)) td:nth-child(4) {
    grid-area: variation;
    display: flex;
    align-items: center;
    justify-self: end;
    padding-inline: 2px;
  }

  .rankings-table-mobile tbody tr:has(td:nth-child(5)) td:nth-child(5),
  .rankings-table-mobile tbody tr:not(:has(td:nth-child(5))) td:nth-child(4) {
    display: none;
  }

  /* Con il filtro iscrizioni la colonna Info torna visibile su una riga
     dedicata: e' l'unico posto dove il dettaglio dei prossimi tornei compare. */
  .rankings-table-mobile tbody tr:has(.upcoming-entry-popover) {
    grid-template-areas:
      "position athlete points"
      "info info info";
  }

  .rankings-table-mobile tbody tr:has(td:nth-child(5)):has(.upcoming-entry-popover) {
    grid-template-areas:
      "position athlete points variation"
      "info info info info";
  }

  .rankings-table-mobile tbody tr:has(td:nth-child(5)) td:nth-child(5):has(.upcoming-entry-popover),
  .rankings-table-mobile tbody tr:not(:has(td:nth-child(5))) td:nth-child(4):has(.upcoming-entry-popover) {
    grid-area: info;
    display: flex;
    justify-self: start;
    margin-top: 4px;
    padding-inline: 4px;
  }

  .rankings-table-mobile .delta-points-note {
    display: none;
  }

  .rankings-table-mobile .rank-inline-points {
    display: none;
  }

  .rank-compact-mobile .info-link {
    width: 34px;
    height: 34px;
  }

  .rankings-table-mobile .delta-pill {
    min-width: 34px;
    padding: 3px 6px;
  }

  .regulation-small-table th,
  .privacy-table-wrap th {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .privacy-table-wrap table {
    min-width: 0;
    table-layout: auto;
  }

  .privacy-table-wrap td {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 520px) {
  .mobile-tabbar {
    width: calc(100% - 16px);
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 6px;
    border-radius: 22px;
  }

  .mobile-tab {
    min-height: 52px;
    font-size: 10px;
  }

  .section-hero,
  .calculator-hero,
  .privacy-hero {
    padding: 20px 18px;
  }

  .cookie-banner {
    width: calc(100% - 16px);
  }
}

@media (max-width: 420px) {
  .rank-pagination {
    display: grid;
    grid-template-columns: repeat(4, 32px);
    justify-content: space-between;
    row-gap: 6px;
  }

  .rank-page-status {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .rank-page-btn {
    grid-row: 2;
  }
}

/* Home guest: una shell PWA compatta, piu' vicina a un'app che a un sito marketing. */
.guest-home-body {
  min-height: 100vh;
  overflow-x: clip;
  background:
    radial-gradient(circle at 82% 4%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 31%),
    radial-gradient(circle at 8% 28%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 27%),
    var(--bg);
}

.guest-appbar {
  position: sticky;
  top: 0;
  z-index: 120;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 5%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.guest-appbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1180px, calc(100% - 32px));
  min-height: 68px;
  margin: 0 auto;
}

.guest-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.guest-brand img {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

.guest-appbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.guest-install-button,
.guest-nav-login,
.guest-nav-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 11px;
  padding: 8px 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.guest-install-button {
  gap: 7px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 82%, transparent);
}

.guest-install-button svg {
  width: 16px;
  height: 16px;
}

.guest-install-button:hover,
.guest-nav-login:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line) 62%);
  color: var(--accent);
  background: var(--accent-soft);
}

.guest-nav-login {
  border: 1px solid transparent;
  color: var(--ink);
}

.guest-nav-register {
  border: 1px solid var(--accent);
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 22%, transparent);
}

.guest-nav-register:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.guest-main {
  display: grid;
  gap: clamp(56px, 8vw, 96px);
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(42px, 7vw, 86px) 0 72px;
}

.guest-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
  align-items: center;
  gap: clamp(38px, 7vw, 86px);
}

.guest-hero-copy {
  min-width: 0;
}

.guest-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0 0 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line) 76%);
  border-radius: var(--radius-pill);
  padding: 7px 11px;
  color: color-mix(in srgb, var(--accent) 72%, var(--ink) 28%);
  background: color-mix(in srgb, var(--accent-soft) 62%, var(--card) 38%);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.025em;
}

.guest-eyebrow > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 13%, transparent);
}

.guest-hero h1 {
  max-width: 720px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(42px, 5.1vw, 68px);
  font-weight: 850;
  letter-spacing: -0.052em;
  line-height: 0.99;
}

.guest-hero-lead {
  max-width: 640px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.6;
}

.guest-hero-actions,
.guest-final-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.guest-primary-action,
.guest-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  border-radius: 13px;
  padding: 11px 17px;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}

.guest-primary-action {
  border: 1px solid var(--accent);
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 25%, transparent);
}

.guest-primary-action svg {
  width: 18px;
  height: 18px;
}

.guest-primary-action:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.guest-secondary-action {
  border: 1px solid var(--line);
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 86%, transparent);
}

.guest-secondary-action:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line) 58%);
  color: var(--accent);
  background: var(--accent-soft);
}

.guest-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  margin: 22px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}

.guest-trust-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.guest-trust-list svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.guest-preview-wrap {
  position: relative;
  width: min(100%, 510px);
  justify-self: end;
}

.guest-preview-glow {
  position: absolute;
  inset: 8% -4% -2% 8%;
  border-radius: 48px;
  background: linear-gradient(145deg,
      color-mix(in srgb, var(--accent) 30%, transparent),
      color-mix(in srgb, #8b5cf6 16%, transparent));
  filter: blur(34px);
  opacity: 0.72;
}

.guest-app-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 17%, var(--line) 83%);
  border-radius: 20px;
  background: var(--bg);
  box-shadow: 0 28px 68px color-mix(in srgb, var(--ink) 18%, transparent);
}

.guest-preview-shell {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 408px;
}

.guest-preview-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  border-right: 1px solid var(--line);
  padding: 12px 8px;
  background: color-mix(in srgb, var(--sidebar-bg) 92%, var(--card) 8%);
}

.guest-preview-sidebar img {
  width: 32px;
  height: 32px;
  margin-bottom: 5px;
  border-radius: 10px;
}

.guest-preview-sidebar span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
}

.guest-preview-sidebar span.active {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 20%, transparent);
}

.guest-preview-sidebar svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guest-preview-dashboard {
  min-width: 0;
  padding: 12px;
  background: var(--bg);
}

.guest-preview-hero-card,
.guest-preview-dashboard-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 5%, transparent);
}

.guest-preview-hero-card {
  padding: 10px 11px 9px;
}

.guest-preview-hero-head,
.guest-preview-card-head,
.guest-preview-lockup,
.guest-preview-search,
.guest-preview-quick-stats > div,
.guest-preview-club-table > div:not(.guest-preview-club-head) {
  display: flex;
  align-items: center;
}

.guest-preview-hero-head,
.guest-preview-card-head,
.guest-preview-club-table > div:not(.guest-preview-club-head) {
  justify-content: space-between;
}

.guest-preview-lockup {
  gap: 7px;
}

.guest-preview-lockup img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.guest-preview-lockup > span {
  display: grid;
  gap: 1px;
}

.guest-preview-lockup strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
}

.guest-preview-lockup small {
  color: var(--muted);
  font-size: 6px;
  font-weight: 650;
}

.guest-preview-feedback {
  border: 1px solid var(--control-border);
  border-left: 2px solid var(--accent);
  border-radius: 7px;
  padding: 5px 7px;
  color: var(--muted);
  background: var(--control-bg);
  font-size: 7px;
  font-weight: 750;
}

.guest-preview-search {
  gap: 6px;
  margin-top: 9px;
}

.guest-preview-search > div {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 5px 8px;
  background: var(--control-bg);
}

.guest-preview-search small {
  color: var(--muted);
  font-size: 5px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.guest-preview-search span {
  color: var(--muted);
  font-size: 8px;
}

.guest-preview-search button {
  align-self: stretch;
  border: 0;
  border-radius: 8px;
  padding: 0 13px;
  color: var(--on-accent);
  background: var(--accent);
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  pointer-events: none;
}

.guest-preview-hero-card > p,
.guest-preview-club-card > p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 6.5px;
}

.guest-preview-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 9px;
  margin-top: 9px;
}

.guest-preview-dashboard-card {
  min-width: 0;
  padding: 10px;
}

.guest-preview-card-head {
  gap: 5px;
}

.guest-preview-card-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 10px;
}

.guest-preview-card-head h2 span {
  display: inline-flex;
  margin-left: 3px;
  border: 1px solid color-mix(in srgb, var(--signal) 35%, var(--line) 65%);
  border-radius: 99px;
  padding: 2px 4px;
  color: var(--signal);
  background: color-mix(in srgb, var(--signal) 10%, var(--card) 90%);
  font-size: 5px;
  vertical-align: 2px;
}

.guest-preview-card-head > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 6px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guest-preview-rank-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin-top: 9px;
  border: 1px solid var(--control-border);
  border-radius: 7px;
  padding: 2px;
  background: var(--surface-strong);
}

.guest-preview-rank-tabs span {
  overflow: hidden;
  border-radius: 5px;
  padding: 5px 2px;
  color: var(--muted);
  font-size: 5.5px;
  font-weight: 750;
  text-align: center;
  text-overflow: ellipsis;
}

.guest-preview-rank-tabs span.active {
  color: var(--on-accent);
  background: var(--accent);
}

.guest-preview-rank-focus {
  display: grid;
  justify-items: center;
  margin-top: 8px;
  border-radius: 9px;
  padding: 7px;
  background: var(--accent-soft);
}

.guest-preview-rank-focus > span {
  color: var(--muted);
  font-size: 6px;
  font-weight: 700;
}

.guest-preview-rank-focus > strong {
  margin-top: 1px;
  color: var(--ink);
  font-size: 29px;
  line-height: 1;
  letter-spacing: -0.05em;
}

.guest-preview-rank-focus small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 6px;
}

.guest-preview-rank-focus b {
  margin-left: 3px;
  border-radius: 99px;
  padding: 2px 4px;
  color: var(--success);
  background: var(--success-soft);
}

.guest-preview-quick-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}

.guest-preview-quick-stats > div {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 6px;
}

.guest-preview-quick-stats span {
  color: var(--muted);
  font-size: 5.5px;
}

.guest-preview-quick-stats strong {
  color: var(--ink);
  font-size: 9px;
}

.guest-preview-club-table {
  overflow: hidden;
  margin-top: 8px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--card);
}

.guest-preview-club-table > div {
  min-height: 34px;
  border-bottom: 1px solid var(--line);
  padding: 5px 7px;
}

.guest-preview-club-table > div:last-child {
  border-bottom: 0;
}

.guest-preview-club-table .guest-preview-club-head {
  min-height: 22px;
  padding: 6px 7px;
  color: var(--muted);
  background: var(--surface);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--accent) 36%, transparent);
  font-size: 5.5px;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.guest-preview-club-table strong {
  overflow: hidden;
  color: var(--accent);
  font-size: 6.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guest-preview-club-table span {
  flex: none;
  margin-left: 5px;
  color: var(--ink);
  font-size: 6px;
  font-weight: 750;
}

.guest-preview-athlete-card {
  overflow: hidden;
  margin-top: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 5%, transparent);
}

.guest-preview-athlete-card > strong {
  display: block;
  border-bottom: 1px solid var(--line);
  padding: 6px 9px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--accent) 36%, transparent);
  font-size: 7px;
}

.guest-preview-athlete-card > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 7px 9px 8px;
}

.guest-preview-athlete-card span {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 5.5px;
}

.guest-preview-athlete-card small {
  overflow: hidden;
  color: var(--ink);
  font-size: 6.5px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guest-preview-caption {
  position: relative;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.guest-features {
  display: grid;
  gap: 28px;
}

.guest-section-heading {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.guest-section-heading h2,
.guest-final-cta h2 {
  margin: 6px 0 10px;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.guest-final-cta h2 {
  margin-top: 0;
}

.guest-section-heading > p:last-child,
.guest-final-cta > div > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.guest-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.guest-feature-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 7%, transparent);
}

.guest-feature-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  color: var(--accent);
  background: var(--accent-soft);
}

.guest-feature-icon svg {
  width: 24px;
  height: 24px;
}

.guest-feature-icon-calendar {
  color: color-mix(in srgb, var(--success) 72%, var(--ink) 28%);
  background: color-mix(in srgb, var(--success) 12%, var(--card) 88%);
}

.guest-feature-icon-calculator {
  color: #8b5cf6;
  background: color-mix(in srgb, #8b5cf6 12%, var(--card) 88%);
}

.guest-feature-card h3 {
  margin: 18px 0 7px;
  color: var(--ink);
  font-size: 19px;
}

.guest-feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.guest-final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line) 78%);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 42px);
  background:
    radial-gradient(circle at 92% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 33%),
    color-mix(in srgb, var(--card) 94%, var(--accent-soft) 6%);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 8%, transparent);
}

.guest-final-actions {
  flex-wrap: nowrap;
  margin-top: 0;
}

.guest-home-body > .site-footer {
  margin-top: 0;
}

@media (max-width: 980px) {
  .guest-hero {
    grid-template-columns: 1fr;
  }

  .guest-preview-wrap {
    width: min(100%, 580px);
    justify-self: center;
  }

  .guest-hero-copy {
    text-align: center;
  }

  .guest-eyebrow,
  .guest-hero h1,
  .guest-hero-lead {
    margin-inline: auto;
  }

  .guest-hero-actions,
  .guest-trust-list {
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .guest-main {
    gap: 52px;
    padding-top: 34px;
  }

  .guest-feature-grid {
    grid-template-columns: 1fr;
  }

  .guest-feature-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 15px;
    align-items: start;
  }

  .guest-feature-card h3 {
    margin: 2px 0 6px;
  }

  .guest-feature-card p {
    grid-column: 2;
  }

  .guest-final-cta {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .guest-final-actions {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .guest-appbar-inner,
  .guest-main {
    width: min(100% - 20px, 1180px);
  }

  .guest-appbar-inner {
    min-height: 62px;
    gap: 8px;
  }

  .guest-brand {
    gap: 7px;
    font-size: 16px;
  }

  .guest-brand img {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .guest-install-button {
    display: none;
  }

  .guest-nav-login,
  .guest-nav-register {
    min-height: 40px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .guest-main {
    gap: 44px;
    padding: 28px 0 54px;
  }

  .guest-hero {
    gap: 32px;
  }

  .guest-eyebrow {
    margin-bottom: 15px;
    font-size: 10px;
  }

  .guest-hero h1 {
    font-size: clamp(36px, 11.5vw, 48px);
  }

  .guest-hero-lead {
    margin-top: 18px;
    font-size: 15px;
  }

  .guest-hero-actions,
  .guest-final-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .guest-primary-action,
  .guest-secondary-action {
    width: 100%;
  }

  .guest-trust-list {
    display: grid;
    justify-content: center;
    text-align: left;
  }

  .guest-app-preview {
    border-radius: 16px;
  }

  .guest-preview-glow {
    right: 0;
  }

  .guest-preview-shell {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 0;
  }

  .guest-preview-sidebar {
    gap: 7px;
    padding: 10px 5px;
  }

  .guest-preview-sidebar img {
    width: 29px;
    height: 29px;
  }

  .guest-preview-sidebar span {
    width: 31px;
    height: 31px;
  }

  .guest-preview-dashboard {
    padding: 9px;
  }

  .guest-preview-summary {
    grid-template-columns: 1fr;
  }

  .guest-preview-club-card {
    display: none;
  }

  .guest-preview-athlete-card {
    margin-top: 7px;
  }

  .guest-preview-rank-focus {
    padding: 9px;
  }

  .guest-feature-card {
    border-radius: 17px;
    padding: 17px;
  }

  .guest-feature-icon {
    width: 43px;
    height: 43px;
    border-radius: 13px;
  }

  .guest-section-heading h2,
  .guest-final-cta h2 {
    font-size: 30px;
  }

  .guest-final-cta {
    border-radius: 20px;
    padding: 22px 18px;
  }
}

/* =====================================================================
   Sistema visivo editoriale/sportivo "Rally".
   Geometrie da scorecard, contrasto netto e gerarchie piu' compatte
   sostituiscono il linguaggio "SaaS glass" senza cambiare i flussi.
   ===================================================================== */
html {
  background: var(--bg);
}

body {
  background-color: var(--bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 2.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 2.5%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--card) 88%, transparent) 0, transparent 300px);
  background-size: 44px 44px, 44px 44px, 100% 100%;
}

button,
input,
select,
textarea {
  font-family: var(--font-ui);
}

h1,
h2,
h3,
.brand-lockup-title,
.guest-brand,
.guest-hero h1,
.guest-section-heading h2,
.guest-final-cta h2,
.calendar-month-title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 92, "wght" 760;
}

h1,
.guest-hero h1 {
  font-weight: 800;
  letter-spacing: -0.052em;
  line-height: 0.98;
}

h2,
h3 {
  color: var(--ink);
  font-weight: 780;
}

.meta,
.brand-lockup-subtitle,
.guest-hero-lead {
  color: var(--muted);
}

.app-shell {
  gap: 22px;
  padding: 18px 18px 30px;
}

.page {
  padding-inline: 4px 18px;
}

.card {
  border: 1px solid var(--line);
  border-top-color: color-mix(in srgb, var(--accent) 22%, var(--line) 78%);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow);
}

.hero,
.section-hero,
.calculator-hero,
.privacy-hero,
.auth-hero {
  position: relative;
  border-top: 3px solid var(--accent-strong);
  background:
    linear-gradient(116deg, transparent 0 73%, color-mix(in srgb, var(--accent) 7%, transparent) 73% 74%, transparent 74%),
    linear-gradient(180deg, var(--card) 0%, var(--surface) 100%);
}

.hero::before,
.section-hero::before,
.calculator-hero::before,
.privacy-hero::before,
.auth-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -3px;
  left: 18px;
  width: 92px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0 72%, var(--signal) 72% 100%);
}

.hero > *,
.section-hero > *,
.calculator-hero > *,
.privacy-hero > *,
.auth-hero > * {
  position: relative;
  z-index: 1;
}

.hero h1,
.section-hero h1,
.calculator-hero h1,
.privacy-hero h1,
.auth-hero h1 {
  font-size: clamp(30px, 4vw, 44px);
}

.about-kicker,
.section-kicker,
.guest-eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.brand-lockup {
  width: auto;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  padding: 4px 0;
  background: transparent;
  box-shadow: none;
}

.brand-lockup-icon {
  border-radius: 4px 14px 4px 14px;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--accent) 16%, transparent);
}

.brand-lockup-title {
  font-size: clamp(32px, 3vw, 46px);
  font-weight: 800;
  letter-spacing: -0.055em;
}

.brand-lockup-subtitle {
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 650;
  letter-spacing: 0.01em;
}

/* Sidebar morbida e luminosa, coerente con la navigazione iOS originale. */
.sidebar.card {
  border-color: var(--line);
  border-top-color: var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--sidebar-bg) 92%, var(--card) 8%);
  box-shadow: var(--shadow);
}

.sidebar .side-nav-link {
  border-radius: 10px;
  color: var(--ink);
  font-weight: 700;
}

.sidebar .side-nav-link:hover,
.sidebar .side-nav-link-locked:hover {
  border-color: var(--line);
  color: var(--ink);
  background: var(--control-bg-hover);
}

.sidebar .side-nav-link.active {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 22%, transparent);
}

.sidebar .side-nav-link-locked {
  border-color: color-mix(in srgb, var(--line) 80%, var(--accent) 20%);
  color: color-mix(in srgb, var(--muted) 75%, var(--ink) 25%);
}

.sidebar .side-nav-admin-divider {
  background: color-mix(in srgb, var(--line) 84%, transparent);
}

.sidebar .sidebar-bottom {
  border-color: var(--line);
}

.sidebar .side-nav-admin-title,
.sidebar .sidebar-email {
  color: var(--muted);
}

.sidebar .sidebar-toggle,
.sidebar .sidebar-icon-home {
  border-color: var(--control-border);
  color: var(--ink);
  background: var(--control-bg);
  box-shadow: var(--control-shadow);
}

.sidebar .sidebar-toggle:hover,
.sidebar .sidebar-icon-home:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--control-bg-hover);
}

.sidebar .side-logout-link {
  border-color: color-mix(in srgb, var(--danger) 54%, var(--line) 46%);
  color: var(--danger);
  background: transparent;
}

/* Controlli compatti, con angoli alternati invece delle pillole generiche. */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea,
.athlete-search-suggestions,
.settings-toggle-row {
  border-radius: var(--radius-control);
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring), 3px 3px 0 color-mix(in srgb, var(--accent) 10%, transparent);
}

.athlete-form button,
.auth-form button,
.settings-form button,
.fav-btn,
.database-download-button,
.feedback-submit,
.calculator-submit,
.guest-primary-action,
.guest-nav-register,
.share-action-primary,
#cookie-accept-btn {
  border-radius: var(--radius-control);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent-strong) 35%, transparent);
}

.athlete-form button,
.auth-form button,
.settings-form button,
.fav-btn:not(.secondary):not(.danger),
.database-download-button,
.feedback-submit,
.calculator-submit,
.guest-primary-action,
.guest-nav-register,
.share-action-primary,
.public-login-link,
#cookie-accept-btn {
  border-color: var(--accent-strong);
  color: var(--on-accent);
  background: var(--accent);
}

.athlete-form button:hover,
.auth-form button:hover,
.settings-form button:hover,
.fav-btn:hover,
.database-download-button:hover,
.feedback-submit:hover,
.calculator-submit:hover,
.guest-primary-action:hover,
.guest-nav-register:hover,
.share-action-primary:hover,
#cookie-accept-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--accent-strong) 38%, transparent);
}

.athlete-form button:hover,
.auth-form button:hover,
.settings-form button:hover,
.fav-btn:not(.secondary):not(.danger):hover,
.database-download-button:hover,
.feedback-submit:hover,
.calculator-submit:hover,
.guest-primary-action:hover,
.guest-nav-register:hover,
.share-action-primary:hover,
.public-login-link:hover,
#cookie-accept-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 88%, #ffffff 12%);
  filter: none;
}

.rank-switch,
.admin-results-switch {
  gap: 2px;
  border-radius: var(--radius-control);
  padding: 3px;
  background: var(--surface-strong);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 7%, transparent);
}

.rank-tab,
.admin-results-switch-link {
  border-radius: 3px 8px 3px 8px;
  letter-spacing: 0.005em;
}

.rank-tab.active,
.admin-results-switch-link.active {
  border-color: var(--accent-strong);
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--accent-strong) 72%, transparent);
}

.rank-tab-live-dot,
.result-live-badge::before,
.calendar-status-badge.status-live::before,
.calendar-day-status.status-live::before {
  background: var(--signal);
}

.default-pill,
.result-live-badge,
.slot-status,
.slot-period,
.h2h-outcome-pill,
.calendar-status-badge,
.calendar-day-status,
.guest-eyebrow {
  border-radius: var(--radius-pill);
}

/* Tabelle: intestazioni leggere, leggibili e coerenti con le superfici dell'app. */
.table-wrap {
  border-color: var(--control-border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 6%, transparent);
  isolation: isolate;
}

.table-wrap thead th,
.admin-users-table th:nth-child(11) {
  border-bottom-color: var(--line);
  color: color-mix(in srgb, var(--ink) 90%, var(--muted) 10%);
  background: linear-gradient(
    180deg,
    var(--card) 0%,
    var(--surface) 100%
  );
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--accent) 38%, transparent);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.015em;
  line-height: 1.25;
  text-transform: none;
}

.table-wrap th,
.table-wrap td {
  padding-inline: 10px;
}

.table-wrap thead th {
  padding-block: 10px;
}

.table-wrap thead tr:first-child th:first-child {
  border-start-start-radius: 13px;
}

.table-wrap thead tr:first-child th:last-child {
  border-start-end-radius: 13px;
}

.table-wrap td {
  border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent);
}

.table-wrap tbody tr:nth-child(even):not(.me):not(.club-row-me):not(.rank-find-hit):not(.rank-find-current):not(.calendar-default-entry-row) td {
  background: color-mix(in srgb, var(--surface) 58%, transparent);
}

.table-wrap tbody tr:hover td {
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--card) 52%);
}

.calendar-month-card,
.calendar-day-cell,
.calendar-modal-dialog,
.stat-modal-dialog,
.standings-modal,
.share-modal,
.pwa-install-dialog {
  border-radius: var(--radius-card);
}

.calendar-month-card {
  border-top: 3px solid var(--ink);
  background: var(--card);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 6%, transparent);
}

.calendar-month-title {
  letter-spacing: -0.035em;
}

.calendar-day-cell.is-today {
  box-shadow: inset 0 0 0 2px var(--accent), 2px 2px 0 color-mix(in srgb, var(--accent) 14%, transparent);
}

.share-modal-overlay,
.standings-modal-overlay,
.stat-modal,
.calendar-modal {
  backdrop-filter: blur(2px);
}

.site-footer {
  border-top: 4px solid var(--accent);
  color: #dbe7ff;
  background: #111a34;
}

.site-footer .footer-col h2,
.site-footer .footer-col h3 {
  color: #ffffff;
}

.site-footer .footer-col p,
.site-footer .footer-bottom,
.site-footer .footer-install-button {
  color: #c5d6f7;
}

.site-footer .footer-bottom {
  border-color: rgba(197, 214, 247, 0.28);
}

.site-footer .footer-social-link,
.site-footer .footer-legal-link {
  color: #d9e7ff;
}

/* La landing guest usa la stessa grammatica dell'app, non un tema marketing separato. */
body.guest-home-body {
  background-color: var(--bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 2.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 2.5%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
}

.guest-appbar {
  border-bottom: 3px solid var(--accent);
  color: #ffffff;
  background: rgba(17, 26, 52, 0.97);
  box-shadow: 0 5px 0 rgba(7, 55, 159, 0.14);
  backdrop-filter: blur(12px);
}

.guest-brand,
.guest-nav-login {
  color: #ffffff;
}

.guest-brand img {
  border-radius: 3px 11px 3px 11px;
  box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.14);
}

.guest-install-button {
  border-color: #465472;
  color: #c1cbe0;
  background: #1a2744;
}

.guest-install-button:hover,
.guest-nav-login:hover {
  border-color: #7798dc;
  color: #ffffff;
  background: #223252;
}

.guest-eyebrow {
  border-left: 3px solid var(--signal);
  background: var(--card);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 6%, transparent);
}

.guest-app-preview,
.guest-feature-card,
.guest-final-cta {
  border-radius: var(--radius-card);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 7%, transparent);
}

.guest-app-preview,
.guest-feature-card {
  border-top: 3px solid var(--ink);
}

.guest-feature-card:nth-child(2) {
  transform: translateY(10px);
}

.guest-feature-icon {
  border-radius: 4px 14px 4px 14px;
}

.guest-final-cta {
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  background:
    linear-gradient(116deg, transparent 0 76%, color-mix(in srgb, var(--signal) 8%, transparent) 76%),
    var(--card);
}

.auth-body {
  background-color: var(--bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 2.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 2.5%, transparent) 1px, transparent 1px),
    var(--auth-bg);
  background-size: 44px 44px, 44px 44px, 100% 100%;
}

@media (max-width: 900px) {
  .app-shell {
    padding: 10px 9px calc(92px + env(safe-area-inset-bottom));
  }

  .page {
    padding-inline: 0;
  }

  /* Vetro condiviso da barra e pannello: il contenuto resta visibile sotto
     la superficie, mentre bordi e riflessi ne definiscono lo spessore. */
  body {
    --nav-glass-tint: rgba(246, 249, 255, 0.64);
    --nav-glass-sheet: rgba(246, 249, 255, 0.84);
    --nav-glass-edge: rgba(255, 255, 255, 0.66);
    --nav-glass-shine: rgba(255, 255, 255, 0.38);
    --nav-glass-shadow: rgba(20, 37, 65, 0.16);
    --nav-glass-text: #344154;
    --nav-glass-text-halo: rgba(255, 255, 255, 0.7);
  }

  body[data-theme="dark"] {
    --nav-glass-tint: rgba(20, 28, 43, 0.7);
    --nav-glass-sheet: rgba(20, 28, 43, 0.86);
    --nav-glass-edge: rgba(255, 255, 255, 0.23);
    --nav-glass-shine: rgba(255, 255, 255, 0.14);
    --nav-glass-shadow: rgba(0, 0, 0, 0.34);
    --nav-glass-text: #e4eaf4;
    --nav-glass-text-halo: rgba(0, 0, 0, 0.6);
  }

  .mobile-tabbar {
    isolation: isolate;
    overflow: hidden;
    gap: 2px;
    z-index: 230;
    width: calc(100% - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    padding: 6px;
    border: 1px solid var(--nav-glass-edge);
    border-radius: 34px;
    background: linear-gradient(155deg, var(--nav-glass-shine), transparent 38% 70%, rgba(255, 255, 255, 0.12)), var(--nav-glass-tint);
    box-shadow:
      0 12px 32px var(--nav-glass-shadow),
      0 2px 5px rgba(20, 37, 65, 0.08),
      inset 0 1px 1px var(--nav-glass-shine),
      inset 0 -1px 1px rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
  }

  .mobile-tabbar::before,
  .mobile-tabbar::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    inset: 1px;
    border-radius: inherit;
  }

  .mobile-tabbar::before {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background:
      linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.14) 42%, transparent 64%),
      linear-gradient(180deg, transparent 65%, rgba(144, 207, 235, 0.1));
  }

  .mobile-tabbar::after {
    background: radial-gradient(ellipse 120px 65px at var(--glass-x, 25%) var(--glass-y, 0%), var(--nav-glass-shine), transparent 75%);
    opacity: 0.35;
    transition: opacity 0.25s ease;
  }

  .mobile-tabbar:has(.mobile-tab:active)::after {
    opacity: 0.7;
  }

  .mobile-tab,
  .mobile-tab:hover,
  .mobile-tab:active {
    position: relative;
    z-index: 1;
    justify-content: center;
    min-height: 56px;
    padding: 6px 2px;
    border-radius: 27px;
    color: var(--nav-glass-text);
    background: transparent;
    box-shadow: none;
    text-shadow: 0 1px 2px var(--nav-glass-text-halo);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color 0.2s ease, transform 0.32s cubic-bezier(0.2, 0.8, 0.25, 1.25);
  }

  .mobile-tab::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    border: 1px solid var(--nav-glass-edge);
    background:
      linear-gradient(155deg, var(--nav-glass-shine), transparent 52%),
      color-mix(in srgb, var(--accent) 13%, transparent);
    box-shadow: 0 2px 7px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 1px var(--nav-glass-shine);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.22s ease, transform 0.34s cubic-bezier(0.2, 0.8, 0.25, 1.25);
    pointer-events: none;
  }

  .mobile-tab svg {
    color: inherit;
    filter: drop-shadow(0 1px 1px var(--nav-glass-text-halo));
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.25, 1.25);
  }

  .mobile-tab.active,
  .mobile-tab[aria-expanded="true"] {
    color: var(--accent-strong);
    background: transparent;
    box-shadow: none;
  }

  .mobile-tab.active::before,
  .mobile-tab[aria-expanded="true"]::before {
    opacity: 1;
    transform: scale(1);
  }

  .mobile-tab.active svg,
  .mobile-tab[aria-expanded="true"] svg {
    transform: translateY(-1px) scale(1.06);
  }

  .mobile-tab:active {
    transform: scale(0.94);
  }

  .mobile-tab:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: -3px;
  }

  body.mobile-menu-open .mobile-tab.active:not(.mobile-tab-more) {
    color: var(--nav-glass-text);
  }

  body.mobile-menu-open .mobile-tab.active:not(.mobile-tab-more)::before {
    opacity: 0;
  }

  body.mobile-menu-open .mobile-tab.active:not(.mobile-tab-more) svg {
    transform: none;
  }

  .sidebar.card,
  body.sidebar-collapsed .sidebar.card {
    left: 50%;
    right: auto;
    bottom: calc(94px + env(safe-area-inset-bottom));
    width: calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
    min-width: 0;
    min-height: 0;
    max-width: 560px;
    max-height: calc(100vh - 122px - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 122px - env(safe-area-inset-bottom));
    padding: 6px 14px 16px;
    border: 1px solid var(--nav-glass-edge);
    border-radius: 28px;
    background: linear-gradient(155deg, var(--nav-glass-shine), transparent 45%), var(--nav-glass-sheet);
    box-shadow: 0 18px 48px var(--nav-glass-shadow), inset 0 1px 1px var(--nav-glass-shine);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    transform: translate(-50%, 22px) scale(0.97);
    transform-origin: bottom center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overscroll-behavior: contain;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.2s ease, visibility 0.32s;
  }

  body.mobile-menu-open .sidebar.card {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .sidebar::before {
    flex-shrink: 0;
    background: color-mix(in srgb, var(--ink) 24%, transparent);
  }

  body.sidebar-collapsed .side-nav-admin-title {
    display: flex;
  }

  .mobile-menu-backdrop {
    background: rgba(12, 20, 36, 0.16);
  }

  /* Superficie opaca se il browser non supporta il blur del fondale. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mobile-tabbar,
    .sidebar.card,
    body.sidebar-collapsed .sidebar.card {
      background: var(--card);
      border-color: var(--line);
    }
  }

  .card {
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 5%, transparent);
  }

  .table-wrap {
    box-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 5%, transparent);
  }
}

@media (max-width: 900px) and (hover: hover) and (pointer: fine) {
  .mobile-tab:hover::before {
    opacity: 0.6;
    transform: scale(1);
  }

  .mobile-tab.active:hover::before,
  .mobile-tab[aria-expanded="true"]:hover::before {
    opacity: 1;
  }
}

@media (max-width: 360px) {
  .mobile-tab {
    font-size: 9px;
  }
}

@media (max-width: 900px) and (prefers-reduced-transparency: reduce),
       (max-width: 900px) and (prefers-contrast: more) {
  .mobile-tabbar,
  .sidebar.card,
  body.sidebar-collapsed .sidebar.card {
    background: var(--card);
    border-color: var(--line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .mobile-tabbar::before,
  .mobile-tabbar::after {
    display: none;
  }

  .mobile-tab::before {
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: none;
  }
}

@media (max-width: 600px) {
  .card,
  .calendar-month-card,
  .calendar-day-cell {
    border-radius: 4px 14px 4px 14px;
  }

  .table-wrap:not(.rank-compact-mobile) {
    border-radius: 12px;
  }

  .table-wrap thead tr:first-child th:first-child {
    border-start-start-radius: 11px;
  }

  .table-wrap thead tr:first-child th:last-child {
    border-start-end-radius: 11px;
  }

  .hero,
  .section-hero,
  .calculator-hero,
  .privacy-hero,
  .auth-hero {
    border-top-width: 3px;
  }

  .guest-feature-card:nth-child(2) {
    transform: none;
  }

  .table-wrap thead th {
    padding-block: 9px;
    font-size: 11px;
  }

  /* I controlli operativi restano compatti, ma hanno un'area di tocco
     adeguata anche sui telefoni piu' piccoli. */
  .rank-tab,
  .rank-entries-filter,
  .nearby-rankings-link,
  .rank-find-input,
  .jump-to-me-btn,
  .settings-form button,
  .settings-toggle-row,
  .guest-nav-login,
  .guest-nav-register,
  .table-card-mobile.table-mobile-ready .fav-btn,
  .table-card-mobile.table-mobile-ready .invoice-download-link {
    min-height: 44px;
  }

  .nearby-header-actions {
    width: 100%;
    justify-content: stretch;
  }

  .nearby-rankings-link,
  .nearby-jump-wrap {
    flex: 1 1 140px;
  }

  .nearby-jump-wrap .jump-to-me-btn {
    width: 100%;
  }

  .rank-find-nav-btn,
  .rank-page-btn {
    width: 40px;
    height: 40px;
  }

  .rank-find {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: 100%;
  }

  .rank-find-input {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .rank-pagination {
    grid-template-columns: repeat(4, 40px);
  }
}

@media (max-width: 620px) {
  .calendar-upcoming-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 9px;
  }

  .calendar-tournament-type-filter,
  .calendar-tournament-type-filter select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  /* Prossimi tornei: una scheda compatta al posto di sei righe etichettate. */
  .calendar-tournaments-table.table-card-mobile.table-mobile-ready tbody {
    gap: 7px;
  }

  .calendar-tournaments-table.table-card-mobile.table-mobile-ready tbody tr {
    grid-template-columns: max-content max-content minmax(0, 1fr);
    grid-template-areas:
      "event event event"
      "start end status"
      "links links links";
    column-gap: 10px;
    row-gap: 5px;
    padding: 9px 10px;
    border-radius: 10px;
  }

  .calendar-tournaments-table.table-card-mobile.table-mobile-ready tbody td {
    display: flex;
    width: auto !important;
    min-width: 0 !important;
    align-items: center;
    gap: 4px;
    border: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.3;
  }

  .calendar-tournaments-table.table-card-mobile.table-mobile-ready tbody td::before {
    display: none;
    grid-column: auto;
    grid-row: auto;
  }

  .calendar-tournaments-table.table-card-mobile.table-mobile-ready tbody td:nth-child(1) {
    grid-area: start;
  }

  .calendar-tournaments-table.table-card-mobile.table-mobile-ready tbody td:nth-child(1)::before {
    content: "Dal";
    display: inline;
  }

  .calendar-tournaments-table.table-card-mobile.table-mobile-ready tbody td:nth-child(2) {
    grid-area: end;
  }

  .calendar-tournaments-table.table-card-mobile.table-mobile-ready tbody td:nth-child(2)::before {
    content: "al";
    display: inline;
  }

  .calendar-tournaments-table.table-card-mobile.table-mobile-ready tbody td:nth-child(1)::before,
  .calendar-tournaments-table.table-card-mobile.table-mobile-ready tbody td:nth-child(2)::before {
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .calendar-tournaments-table.table-card-mobile.table-mobile-ready tbody td:nth-child(3) {
    grid-area: event;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-bottom: 2px;
    font-size: 14px;
  }

  .calendar-tournaments-table.table-card-mobile.table-mobile-ready .calendar-mobile-open-levels {
    display: inline-flex;
    flex: 0 0 100%;
    margin-left: 0;
  }

  .calendar-tournaments-table.table-card-mobile.table-mobile-ready tbody td:nth-child(4) {
    display: none;
  }

  .calendar-tournaments-table.table-card-mobile.table-mobile-ready tbody td:nth-child(5) {
    grid-area: status;
    justify-self: end;
    justify-content: flex-end;
  }

  .calendar-tournaments-table.table-card-mobile.table-mobile-ready tbody td:nth-child(6) {
    grid-area: links;
    padding-top: 5px;
    border-top: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  }

  .calendar-tournaments-table.table-card-mobile.table-mobile-ready .calendar-tournament-actions {
    grid-column: auto;
    width: 100%;
    gap: 7px;
  }

  .calendar-tournaments-table.table-card-mobile.table-mobile-ready .tournament-internal-action {
    min-height: 36px;
    font-size: 11px;
  }
}

/* Dashboard mobile: intestazione e ricerca restano in primo piano senza
   occupare gran parte della prima schermata. */
@media (max-width: 760px) {
  .hero.card {
    padding: 10px;
  }

  .hero-header-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .hero .brand-row {
    min-width: 0;
    margin-bottom: 0;
  }

  .hero .brand-lockup {
    min-width: 0;
    gap: 9px;
    padding: 0;
  }

  .hero .brand-lockup-icon {
    width: 48px;
    height: 48px;
    border-radius: 3px 11px 3px 11px;
  }

  .hero .brand-lockup-copy {
    min-width: 0;
  }

  .hero .brand-lockup-title {
    font-size: 27px;
    white-space: nowrap;
  }

  .hero .brand-lockup-subtitle {
    font-size: 11px;
    line-height: 1.15;
  }

  .hero-search-row {
    gap: 0;
    margin: 7px 0 0;
  }

  #dashboard-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 44px;
    align-items: end;
    gap: 6px;
    margin: 6px 0;
  }

  #dashboard-search-form>label {
    grid-column: 1 / -1;
    width: auto;
  }

  #dashboard-search-form>.athlete-search-control,
  #dashboard-search-form>#search {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }

  #dashboard-search-form>button[type="submit"] {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    min-width: 88px;
    min-height: 44px;
    padding-inline: 14px;
  }

  #dashboard-search-form>.inline-loading {
    grid-column: 1 / -1;
  }

  .hero .search-meta-content {
    padding-inline: 2px;
  }
}

/* Le intestazioni delle altre sezioni seguono la stessa densita' mobile
   della Dashboard, senza modificare la composizione desktop. */
@media (max-width: 760px) {
  .section-page,
  .calculator-page,
  .feedback-page,
  .privacy-page {
    gap: 10px;
  }

  .section-hero.card,
  .calculator-hero.card,
  .privacy-hero.card {
    padding: 12px 13px;
  }

  .section-hero .about-kicker,
  .calculator-hero .about-kicker,
  .privacy-hero .about-kicker {
    margin-bottom: 3px;
    font-size: 10px;
  }

  .section-hero h1,
  .calculator-hero h1,
  .privacy-hero h1 {
    margin: 1px 0 5px;
    font-size: clamp(24px, 7vw, 29px);
    line-height: 1.03;
  }

  .section-hero .meta,
  .calculator-hero .meta,
  .privacy-hero>p:not(.about-kicker) {
    margin-block: 4px;
    font-size: 12px;
    line-height: 1.4;
  }

  .data-status-bar {
    gap: 5px;
    margin-top: 8px;
    font-size: 10px;
  }

  .data-freshness,
  .data-refresh-button {
    min-height: 28px;
  }

  .data-freshness {
    padding: 4px 8px;
  }

  .data-refresh-button {
    width: 28px;
    padding: 0;
  }

  /* Su mobile solo icona, come il pulsante di aggiornamento accanto. */
  .data-feedback-link {
    width: 28px;
    min-height: 28px;
    justify-content: center;
    padding: 0;
  }

  .data-feedback-link span {
    display: none;
  }

  .calculator-hero {
    gap: 7px;
  }

  .calculator-regulation-link {
    align-self: flex-start;
    width: auto;
    min-height: 36px;
    padding: 8px 10px;
    font-size: 11px;
  }

  .calendar-region-form {
    margin: 6px 0 3px;
  }

  .calendar-hero>.meta {
    margin-block: 3px;
  }

  .calendar-status-summary {
    gap: 5px;
    margin-top: 6px;
  }

  .detail-hero {
    gap: 6px;
  }

  .page-hero-nav {
    gap: 9px;
    margin-bottom: 4px;
  }

  /* Analisi risultati: il selettore non deve cambiare posizione quando il
     testo della nota o il pannello attivo hanno larghezze differenti. */
  .results-insights-card {
    overflow-x: hidden;
  }

  .results-insights-header,
  .summary-mode-controls,
  .summary-panel,
  .results-viz-grid,
  .pie-wrap,
  .pie-legend {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .results-insights-header {
    display: block;
  }

  .summary-mode-controls {
    display: grid;
    justify-self: stretch;
    justify-items: stretch;
    margin-left: 0;
  }

  .summary-mode-controls .rank-switch {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .summary-mode-hint {
    overflow-wrap: anywhere;
  }
}

body[data-theme="dark"] {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, #111517 0, transparent 340px);
}

body[data-theme="dark"] .card,
body[data-theme="dark"] .table-wrap,
body[data-theme="dark"] .stat-modal-dialog,
body[data-theme="dark"] .calendar-modal-dialog,
body[data-theme="dark"] .share-modal,
body[data-theme="dark"] .standings-modal,
body[data-theme="dark"] .guest-feature-card,
body[data-theme="dark"] .guest-app-preview,
body[data-theme="dark"] .guest-final-cta {
  border-color: var(--line);
  border-top-color: #394047;
  background-color: var(--card);
}

body[data-theme="dark"] .hero,
body[data-theme="dark"] .section-hero,
body[data-theme="dark"] .calculator-hero,
body[data-theme="dark"] .privacy-hero,
body[data-theme="dark"] .auth-hero {
  border-top-color: color-mix(in srgb, var(--accent) 72%, var(--ink) 28%);
  background:
    linear-gradient(116deg, transparent 0 73%, color-mix(in srgb, var(--accent) 6%, transparent) 73% 74%, transparent 74%),
    linear-gradient(180deg, var(--card) 0%, var(--surface) 100%);
}

body[data-theme="dark"] .table-wrap thead th,
body[data-theme="dark"] .admin-users-table th:nth-child(11) {
  border-bottom-color: var(--line);
  color: var(--ink);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-strong) 72%, var(--card) 28%) 0%,
    color-mix(in srgb, var(--surface) 62%, var(--card) 38%) 100%
  );
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--accent) 40%, transparent);
}

body[data-theme="dark"] .table-wrap tbody tr:nth-child(even):not(.me):not(.club-row-me):not(.rank-find-hit):not(.rank-find-current):not(.calendar-default-entry-row) td {
  background: color-mix(in srgb, var(--surface-strong) 34%, transparent);
}

body[data-theme="dark"] .athlete-form input,
body[data-theme="dark"] .athlete-form select,
body[data-theme="dark"] .auth-form input,
body[data-theme="dark"] .settings-form input[type="text"],
body[data-theme="dark"] .settings-form input[type="password"],
body[data-theme="dark"] .settings-form select,
body[data-theme="dark"] .favorite-region-form select,
body[data-theme="dark"] .admin-results-filter input[type="search"],
body[data-theme="dark"] .admin-results-filter select,
body[data-theme="dark"] .admin-results-inline-form input,
body[data-theme="dark"] .admin-results-inline-form select,
body[data-theme="dark"] .admin-results-detail-search input,
body[data-theme="dark"] .calculator-field input,
body[data-theme="dark"] .calculator-field select,
body[data-theme="dark"] .feedback-field input,
body[data-theme="dark"] .feedback-field textarea {
  border-color: var(--control-border);
  color: var(--ink);
  background: var(--control-bg);
}

body[data-theme="dark"] .athlete-form input::placeholder,
body[data-theme="dark"] .auth-form input::placeholder,
body[data-theme="dark"] .settings-form input::placeholder,
body[data-theme="dark"] .admin-results-filter input::placeholder,
body[data-theme="dark"] .admin-results-inline-form input::placeholder,
body[data-theme="dark"] .admin-results-detail-search input::placeholder,
body[data-theme="dark"] .calculator-field input::placeholder,
body[data-theme="dark"] .feedback-field input::placeholder,
body[data-theme="dark"] .feedback-field textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 76%, transparent);
}

body[data-theme="dark"] .rank-tab:not(.active),
body[data-theme="dark"] .admin-results-switch-link:not(.active) {
  border-color: transparent;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
}

body[data-theme="dark"] .rank-tab:not(.active):hover,
body[data-theme="dark"] .admin-results-switch-link:not(.active):hover {
  color: var(--ink);
  background: var(--control-bg-hover);
}

body[data-theme="dark"] .live-focus,
body[data-theme="dark"] .athlete-static-card,
body[data-theme="dark"] .slot-summary-box,
body[data-theme="dark"] .best-live-athlete-box {
  border-color: var(--line);
  background: linear-gradient(180deg, var(--card) 0%, var(--surface) 100%);
}

body[data-theme="dark"] .live-stat,
body[data-theme="dark"] .athlete-field,
body[data-theme="dark"] .athlete-category-box,
body[data-theme="dark"] .athlete-static-head,
body[data-theme="dark"] .slot-mini-badge,
body[data-theme="dark"] .slot-summary-meta span,
body[data-theme="dark"] .slot-detail-list span,
body[data-theme="dark"] .bar-track,
body[data-theme="dark"] .pie-center {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface-strong) 54%, var(--card) 46%);
}

body[data-theme="dark"] .category-range,
body[data-theme="dark"] .live-focus-label,
body[data-theme="dark"] .live-focus-vs,
body[data-theme="dark"] .best-live-athlete-meta,
body[data-theme="dark"] .delta-points-note {
  color: var(--muted);
}

body[data-theme="dark"] .site-footer {
  border-top-color: var(--accent);
  background: #0b1020;
}

body[data-theme="dark"] .auth-message-success {
  border-color: color-mix(in srgb, var(--success) 40%, var(--line) 60%);
  color: var(--success);
  background: var(--success-soft);
}

body[data-theme="dark"] .auth-form .auth-resend-button,
body[data-theme="dark"] .auth-form .auth-resend-button:hover {
  border-color: var(--control-border);
  color: var(--ink);
  background: var(--control-bg);
  box-shadow: var(--control-shadow);
}

body[data-theme="dark"] .auth-form .auth-resend-button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--control-border) 55%);
  color: var(--accent);
  background: var(--control-bg-hover);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .mobile-tab:active,
  .mobile-tab.active svg,
  .mobile-tab[aria-expanded="true"] svg {
    transform: none;
  }
}

/* Componenti trasversali: composizione delle pagine, pannelli filtro e azioni. */
.section-controls-panel {
  min-width: 0;
  margin: 0;
  padding: clamp(14px, 2vw, 18px);
  background: var(--card);
}

.section-controls-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.section-controls-summary .meta {
  margin: 0;
}

.calendar-region-form {
  display: grid;
  gap: 12px;
  margin: 0;
}

.calendar-region-form .calendar-status-summary {
  margin-top: 0;
}

.stat-controls {
  margin-top: 0;
}

.stat-controls .stat-mode-hint {
  margin: 0;
}

.rankings-content-card {
  margin-bottom: 0;
}

.rankings-error {
  margin: 0 0 14px;
}

.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: var(--radius-control);
  padding: 10px 14px;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease,
    opacity 0.16s ease;
}

.button-primary {
  border: 1px solid var(--accent-strong);
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent-strong) 35%, transparent);
}

.button-primary:hover {
  border-color: var(--accent);
  color: var(--on-accent);
  background: color-mix(in srgb, var(--accent) 88%, #ffffff 12%);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--accent-strong) 38%, transparent);
  transform: translate(-1px, -1px);
}

.button-secondary {
  border: 1px solid var(--control-border);
  color: var(--accent);
  background: var(--control-bg);
  box-shadow: var(--control-shadow);
}

.button-secondary:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--control-border) 52%);
  color: var(--accent);
  background: var(--control-bg-hover);
  transform: translateY(-1px);
}

.button-primary:active,
.button-secondary:active {
  transform: none;
}

.button-primary:focus-visible,
.button-secondary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--control-shadow);
}

.button-primary:disabled,
.button-secondary:disabled,
.button-primary[aria-disabled="true"],
.button-secondary[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

@media (max-width: 760px) {
  .section-controls-panel {
    padding: 12px 13px;
  }

  .section-controls-summary {
    gap: 5px 12px;
    padding-top: 10px;
  }

  .button-primary,
  .button-secondary {
    min-height: 44px;
  }
}

/* Classifiche sui telefoni stretti: nome su una riga dedicata, numeri sotto. */
@media (max-width: 480px) {
  .rankings-table-mobile tbody tr,
  .rankings-table-mobile tbody tr:has(td:nth-child(5)) {
    grid-template-columns: 36px minmax(0, 1fr) max-content;
    grid-template-areas:
      "position athlete athlete"
      "position points variation";
    row-gap: 5px;
    align-items: start;
  }

  .rankings-table-mobile tbody td:nth-child(2) {
    flex-wrap: wrap;
    align-items: center;
    overflow: visible;
    white-space: normal;
  }

  .rankings-table-mobile tbody td:nth-child(2) .club-athlete-link,
  .rankings-table-mobile tbody td:nth-child(2) .rank-athlete-name {
    flex: 1 1 160px;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.4;
  }

  .rankings-table-mobile tbody td:nth-child(3) {
    justify-self: start;
    padding-inline: 0;
  }

  .rankings-table-mobile tbody tr:has(.upcoming-entry-popover),
  .rankings-table-mobile tbody tr:has(td:nth-child(5)):has(.upcoming-entry-popover) {
    grid-template-areas:
      "position athlete athlete"
      "position points variation"
      "info info info";
  }
}

/* Slot tornei: il contatore mostra i tornei validi sul massimale, le caselle
   ancora libere e, separati, i tornei giocati che non occupano uno slot. Le
   regole stanno in fondo perche' devono vincere sugli override del tema scuro. */
.slot-gauge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slot-gauge-track {
  display: flex;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
}

.slot-gauge-out {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
  padding-left: 10px;
  border-left: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent);
}

.slot-gauge-cell {
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-strong);
}

.slot-gauge-track .slot-gauge-cell {
  flex: 1 1 0;
  min-width: 10px;
}

.slot-gauge-cell.is-valid {
  border-color: color-mix(in srgb, var(--success) 55%, var(--line) 45%);
  background: var(--success);
}

.slot-gauge-cell.is-free {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--muted) 42%, var(--line) 58%);
  background: transparent;
}

.slot-gauge-cell.is-out {
  width: 10px;
  border-color: color-mix(in srgb, var(--muted) 45%, var(--line) 55%);
  background: repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--muted) 38%, transparent) 0 2px,
      transparent 2px 4px);
}

.slot-gauge-out-more {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.slot-gauge-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.slot-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.slot-legend::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.slot-legend-valid::before {
  border-color: color-mix(in srgb, var(--success) 55%, var(--line) 45%);
  background: var(--success);
}

.slot-legend-free::before {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--muted) 42%, var(--line) 58%);
}

.slot-legend-out {
  cursor: help;
}

.slot-legend-out::before {
  border-color: color-mix(in srgb, var(--muted) 45%, var(--line) 55%);
  background: repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--muted) 38%, transparent) 0 2px,
      transparent 2px 4px);
}

/* Massimale pieno: lo dice il badge, senza colorare tutto il box. */
.slot-summary-grid .slot-mini-badge.slot-mini-badge-locked {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line) 45%);
  background: var(--danger-soft);
  color: color-mix(in srgb, var(--danger) 72%, var(--ink) 28%);
  font-weight: 900;
}

.slot-detail-list span.slot-detail-locked {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--line) 50%);
  background: var(--danger-soft);
  color: color-mix(in srgb, var(--danger) 72%, var(--ink) 28%);
}

@media (max-width: 760px) {
  .slot-gauge-cell {
    height: 16px;
  }
}

/* Impostazioni: eliminazione account. */
.settings-danger-zone {
  border-left: 3px solid var(--danger);
}

.settings-form .settings-confirm-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.settings-confirm-row input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--danger);
}

.settings-form .settings-danger-button,
body[data-theme="dark"] .settings-form .settings-danger-button {
  border-color: var(--danger);
  background: var(--danger);
  color: #ffffff;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--danger) 32%, transparent);
}

.settings-form .settings-danger-button:hover,
body[data-theme="dark"] .settings-form .settings-danger-button:hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 86%, #ffffff 14%);
  color: #ffffff;
}

body[data-theme="dark"] .settings-form .settings-danger-button,
body[data-theme="dark"] .settings-form .settings-danger-button:hover {
  color: #16090a;
}

/* Statistiche: tesserati in classifica per settore, categoria, eta' e territorio. */
.stat-members {
  display: grid;
  gap: 14px;
  margin-bottom: 0;
}

.stat-members[hidden] {
  display: none;
}

.stat-members-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.stat-members-head h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.stat-members-head .meta {
  margin: 0;
}

.stat-members-body {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.stat-members-figure {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px;
  background: var(--surface);
}

.stat-members-figure-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stat-members-figure-value {
  color: var(--ink);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.stat-members-figure-sub {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.stat-members-summary {
  display: grid;
  gap: 12px;
  align-content: start;
}

.stat-members-sectors {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  background: var(--surface);
}

.stat-members-sectors h3,
.stat-members-chart h3 {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stat-members-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.stat-members-views {
  margin: 0;
  gap: 6px;
}

.stat-members-views .rank-tab {
  padding: 6px 12px;
  font-size: 13px;
}

.stat-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

/* Fasce d'eta': un gruppo per settore, separato da una riga tratteggiata. */
.stat-bar-group + .stat-bar-group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

/* Barre di composizione per settore: i segmenti si dividono la pila in
   proporzione ai conteggi, con 2px di stacco. */
.stat-bar-stack,
.stat-sector-bar {
  display: flex;
  gap: 2px;
  height: 100%;
}

.stat-bar-stack {
  width: var(--stat-bar-size, 0%);
}

.stat-sector-bar {
  height: 12px;
}

.stat-seg {
  flex: var(--stat-seg-grow, 1) 1 0;
  min-width: 2px;
  height: 100%;
}

.stat-bar-stack .stat-seg:last-child,
.stat-sector-bar .stat-seg:last-child {
  border-radius: 0 4px 4px 0;
}

.stat-bar-stack .stat-seg:first-child,
.stat-sector-bar .stat-seg:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.stat-sector-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.stat-sector-legend li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.stat-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.stat-sector-name {
  color: var(--ink);
  font-weight: 650;
}

.stat-sector-value {
  color: var(--ink);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat-sector-value small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

/* Colonna valori a larghezza fissa: le barre di righe diverse finiscono
   allo stesso punto, anche quelle di composizione al 100%. */
.stat-bar-row {
  display: grid;
  grid-template-columns: minmax(110px, 190px) minmax(0, 1fr) 96px;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  padding: 3px 6px;
}

.stat-bar-row:hover {
  background: var(--surface);
}

.stat-bar-label {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-bar-label small,
.stat-bar-value small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.stat-bar-track {
  display: block;
  height: 10px;
  border-radius: 0 4px 4px 0;
  background: var(--surface-strong);
}

.stat-bar-fill {
  display: block;
  width: var(--stat-bar-size, 0%);
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
}

/* Dopo .stat-bar-fill: il colore del settore prevale sull'accento. */
.stat-series-giovanili {
  background: var(--series-youth);
}

.stat-series-seniores {
  background: var(--series-senior);
}

.stat-series-veterani {
  background: var(--series-veteran);
}

.stat-bar-value {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat-members-note {
  margin: 0;
  font-size: 12px;
}

@media (prefers-reduced-motion: no-preference) {
  .stat-bar-fill {
    transition: width 0.25s ease;
  }
}

@media (max-width: 720px) {
  .stat-members-body {
    grid-template-columns: 1fr;
  }

  .stat-bar-row {
    grid-template-columns: minmax(84px, 34%) minmax(0, 1fr) 84px;
    gap: 8px;
    padding-inline: 2px;
  }
}

/* Impostazioni: scelte delle notifiche sui tornei preferiti. */
.settings-choice-group {
  display: grid;
  gap: 6px;
  margin: 0;
  border: 0;
  padding: 0;
}

.settings-choice-group legend {
  margin-bottom: 4px;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.settings-form label.settings-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 8px 12px;
  color: var(--ink);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
}

.settings-form label.settings-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.settings-form .settings-choice input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  min-width: 0;
  height: 18px;
  min-height: 0;
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  accent-color: var(--accent);
}

/* Modal dei preferiti: notifiche di un torneo o girone appena salvato (con i
   blocchi delle Impostazioni, stesso interruttore e stesse scelte) e conferma
   del proprio atleta al primo accesso. */
.favorite-notify-modal[hidden] {
  display: none;
}

.favorite-notify-modal {
  position: fixed;
  inset: 0;
  /* Sopra la tab bar mobile e sopra il modal del calendario (z-index 1000),
     da cui si puo' salvare un torneo. */
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 16px;
}

.favorite-notify-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 14, 0.56);
}

.favorite-notify-dialog {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(100%, 560px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  color: var(--ink);
  background: var(--card);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.35);
}

.favorite-notify-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.favorite-notify-head h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.favorite-notify-subtitle,
.favorite-notify-description,
.favorite-notify-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.favorite-notify-subtitle {
  margin-top: 2px;
}

.athlete-choice-final {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.athlete-choice-name {
  color: var(--ink);
  font-weight: 700;
}

.athlete-choice-name[hidden] {
  display: none;
}

.athlete-choice-modal-copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.favorite-notify-close {
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.favorite-notify-close:hover {
  border-color: var(--accent);
}

.favorite-notify-close:focus-visible,
.favorite-notify-quick-button:focus-visible,
.favorite-notify-option:has(input:focus-visible),
.favorite-notify-block summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.favorite-notify-form {
  display: grid;
  gap: 12px;
}

.favorite-notify-items {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
  transition: opacity 0.15s ease;
}

/* Con le notifiche spente le scelte restano modificabili: sceglierne una le accende. */
.favorite-notify-items.is-off {
  opacity: 0.6;
}

.favorite-notify-items legend {
  margin-bottom: 4px;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.favorite-notify-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.favorite-notify-quick .favorite-notify-quick-button {
  min-height: 34px;
  border: 1px solid var(--control-border);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--accent);
  background: var(--control-bg);
  box-shadow: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.favorite-notify-quick .favorite-notify-quick-button:hover {
  border-color: var(--accent);
}

.favorite-notify-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 6px;
}

.favorite-notify-dialog .favorite-notify-options {
  max-height: min(45dvh, 360px);
  overflow-y: auto;
  padding: 2px;
}

.favorite-notify-options label.favorite-notify-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 8px 12px;
  color: var(--ink);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  cursor: pointer;
}

.favorite-notify-options label.favorite-notify-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.favorite-notify-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  min-width: 0;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: var(--accent);
}

.favorite-notify-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.favorite-notify-error {
  margin: 0;
  border: 1px solid var(--danger);
  border-radius: var(--radius-control);
  padding: 8px 12px;
  color: var(--danger);
  background: var(--danger-soft);
  font-size: 13px;
  font-weight: 700;
}

.favorite-notify-error[hidden] {
  display: none;
}

.favorite-notify-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.favorite-notify-section {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.favorite-notify-section h3 {
  margin: 0;
  font-size: 16px;
}

/* Notifiche push su questo dispositivo (Impostazioni). */
.push-device-panel {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 12px 14px;
  background: var(--surface);
}

.push-device-panel h3 {
  margin: 0;
  font-size: 16px;
}

.push-device-panel .meta {
  margin: 0;
}

.push-device-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.push-device-actions [hidden] {
  display: none;
}

.push-device-feedback {
  margin: 0;
  border: 1px solid var(--success);
  border-radius: var(--radius-control);
  padding: 8px 12px;
  color: var(--success);
  background: var(--success-soft);
  font-size: 13px;
  font-weight: 700;
}

.push-device-feedback.is-error {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-soft);
}

.push-device-feedback[hidden] {
  display: none;
}

.favorite-notify-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.favorite-notify-block summary {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  border-radius: var(--radius-control);
  padding: 10px 40px 10px 12px;
  list-style: none;
  cursor: pointer;
}

.favorite-notify-block summary::-webkit-details-marker {
  display: none;
}

/* Il riepilogo si apre: freccia a destra, girata quando il blocco e' aperto. */
.favorite-notify-block summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
}

.favorite-notify-block[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.favorite-notify-block-title {
  flex: 1 1 220px;
  min-width: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.favorite-notify-block-meta {
  color: var(--muted);
  font-size: 13px;
}

.favorite-notify-status {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--muted);
  background: var(--card);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.favorite-notify-status.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.favorite-notify-block .favorite-notify-form {
  border-top: 1px solid var(--line);
  padding: 12px;
}

.favorite-notify-block .favorite-notify-form > .button-primary {
  justify-self: start;
}

@media (max-width: 640px) {
  .favorite-notify-modal {
    align-items: end;
    padding: 0;
  }

  .favorite-notify-dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 16px 16px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  }

  .favorite-notify-actions > * {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .favorite-notify-items {
    transition: none;
  }
}

/* Dove conta chi ha vinto (partite dei referti, tabelloni LIVE, risultati) il
   nome collegato prende anche il peso del risultato: vincitore in evidenza,
   perdente attenuato. */
.result-player .club-athlete-link,
.championship-game-player .club-athlete-link,
.live-match-players .club-athlete-link,
.live-bracket-player .club-athlete-link {
  font-weight: inherit;
}

/* =====================================================================
   Navigazione da app installata: ritorno, Il mio atleta, Classifiche da
   mobile. Le regole stanno in fondo perche' prevalgano sui ritocchi
   precedenti degli stessi componenti.
   ===================================================================== */

/* Badge "Il mio atleta" nella scheda della Dashboard. */
.my-athlete-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--on-accent);
  background: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.my-athlete-section .my-athlete-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 8px;
  font-size: 15px;
}

/* Dashboard: ritorno accanto al marchio quando la scheda non e' Il mio atleta. */
.hero-header-row>.page-back-link {
  align-self: center;
}

.hero .data-status-bar {
  margin-top: 4px;
}

.dashboard-empty {
  margin-bottom: 18px;
}

.rank-find-nav[hidden] {
  display: none;
}

/* Cambiando pagina dal fondo si riparte dalla prima riga, appena sotto il bordo. */
.rank-panel {
  scroll-margin-top: 10px;
}

@media (max-width: 900px) {
  /* Da mobile la classifica scorre con la pagina: niente scorrimento annidato
     che trattiene il dito, e la paginazione in fondo resta raggiungibile. */
  .rank-panel .table-wrap,
  .rank-panel .rank-compact-mobile {
    max-height: none !important;
    overflow: visible;
    overscroll-behavior: auto;
  }

  .rank-quick-bar>.rank-find {
    flex: 1 1 180px;
    max-width: none;
  }

  .rank-quick-bar>.rank-my-athlete {
    min-height: 44px;
  }
}

/* Classifica finale in arrivo: podio e turni. */
.standings-skeleton-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
}

.standings-skeleton-podium .skeleton-block {
  height: 64px;
  border-radius: 12px;
}

.standings-skeleton-podium .skeleton-block:first-child {
  height: 84px;
}

/* Classifica in arrivo (scheda mai aperta, nuovo ambito): righe segnaposto. */
.rank-skeleton-row td {
  border: 0;
  padding: 5px 6px;
  background: transparent;
}

.rank-skeleton-row .skeleton-row {
  height: 42px;
}

.card.is-refreshing {
  pointer-events: none;
}

.card.is-refreshing > * {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

@media (max-width: 900px) {
  .rank-compact-mobile tbody tr.rank-skeleton-row {
    display: block;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .rank-compact-mobile tbody tr.rank-skeleton-row td {
    display: block;
    border: 0;
    padding: 0;
  }

  .rank-skeleton-row .skeleton-row {
    height: 56px;
    border-radius: 10px;
  }
}

@media (max-width: 900px) {
  /* Safari su iPhone ingrandisce la pagina quando un campo sotto i 16px prende
     il fuoco, e nella PWA lo zoom resta: da telefono ogni campo sta a 16px,
     qualunque dimensione gli dia il suo componente. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}