/* Sportiva interface — final presentation layer, after the editable theme tokens.
 * Shell geometry follows the existing 800px navigation breakpoint.
 * Component colors inherit --s2-*; fixed light text is limited to the dark sidebar/hero.
 */
.s2-app {
  --sv-surface: var(--s2-card);
  --sv-surface-soft: var(--s2-card-2, var(--s2-bg));
  --sv-border: var(--s2-line);
  --sv-shadow: 0 2px 8px rgb(12 24 42 / 3%);
  --sv-radius: 16px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--s2-text);
  background: var(--s2-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.s2-app :where(button, input, select, textarea) { font-family: inherit; }
.s2-app :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--s2-blue);
  outline-offset: 3px;
}
.s2-app :where(h1, h2, h3) { text-wrap: pretty; }
.s2-app :where(button, .s2-btn, .svc-btn) { touch-action: manipulation; }
.s2-app :where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .6;
}

/* Sidebar: restrained selection, readable labels and an independent scrolling menu. */
.s2-app .s2-sidebar {
  width: 270px;
  display: flex;
  flex-direction: column;
  background: var(--s2-navy-2);
  background: linear-gradient(165deg, var(--s2-navy), var(--s2-navy-2) 72%);
  color: #f5f8fd;
  border-right: 1px solid rgb(255 255 255 / 7%);
  box-shadow: none;
}
.s2-app .s2-sidebar-brand {
  flex: 0 0 auto;
  min-height: 92px;
  height: auto;
  gap: 12px;
  padding: 20px;
  border-bottom-color: rgb(255 255 255 / 9%);
}
.s2-app .s2-sidebar-brand img {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 3px;
  border-radius: 12px;
  box-shadow: none;
}
.s2-app .s2-sidebar-brand > div { min-width: 0; flex: 1; }
.s2-app .s2-sidebar-brand strong {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.025em;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.s2-app .s2-sidebar-brand span {
  margin-top: 4px;
  color: #b8c7dc;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .09em;
}
.s2-app .s2-sidebar-brand .s2-sidebar-close { display: none; }
.s2-app .s2-nav {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 12px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 22%) transparent;
  scroll-padding-block: 12px;
}
.s2-app .s2-nav-title {
  display: block;
  margin: 16px 0 5px;
  padding: 0 12px;
  font-size: 11px;
  line-height: 1.6;
  font-weight: 650;
  letter-spacing: .1em;
  color: #a7b9d1;
}
.s2-app .s2-nav > .s2-nav-title:first-of-type { margin-top: 6px; }
.s2-app .s2-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 46px;
  gap: 12px;
  margin: 3px 0;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #d3deed;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 550;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.s2-app .s2-nav a > span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.s2-app .s2-nav a > svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px;
  stroke-width: 1.7;
  opacity: .85;
}
.s2-app .s2-nav a:hover {
  color: #fff;
  background: rgb(255 255 255 / 6%);
  transform: none;
}
.s2-app .s2-nav a.is-active {
  color: #fff !important;
  background: rgb(255 255 255 / 10%) !important;
  border-color: rgb(255 255 255 / 8%);
  font-weight: 650;
  box-shadow: none;
}
.s2-app .s2-nav a::before, .s2-app .s2-nav a::after { content: none; }
.s2-app .s2-nav a.is-active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--s2-orange);
}
.s2-app .s2-nav a.is-active > svg { color: var(--s2-orange); opacity: 1; }
.s2-app .s2-nav :where(.s2-fav-toggle, .s2-fav-star) { display: none !important; }
.s2-app .s2-nav a:focus-visible,
.s2-app .s2-sidebar-user a:focus-visible,
.s2-app .s2-sidebar-close:focus-visible { outline-color: #d9e7ff; outline-offset: 2px; }
.s2-app .s2-sidebar-user {
  position: static;
  flex: 0 0 auto;
  gap: 10px;
  margin-top: auto;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: rgb(0 0 0 / 12%);
  border-top: 1px solid rgb(255 255 255 / 10%);
}
.s2-app .s2-sidebar-user .s2-avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgb(255 255 255 / 11%);
  color: #eef4ff;
  box-shadow: none;
}
.s2-app .s2-sidebar-user :is(strong, small) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.s2-app .s2-sidebar-user strong { font-size: 13px; font-weight: 650; }
.s2-app .s2-sidebar-user small { color: #b8c7dc; font-size: 12px; }
.s2-app .s2-sidebar-user > a { flex: 0 0 40px; width: 40px; height: 40px; color: #c4d2e5; }

/* Main shell and utilities. No external font request is required. */
.s2-app .s2-main { min-width: 0; margin-left: 270px; }
.s2-app.is-collapsed .s2-main { margin-left: 0; }
.s2-app .s2-topbar {
  min-height: 72px;
  height: auto;
  gap: 16px;
  padding: 12px 32px;
  background: var(--sv-surface);
  border-bottom: 1px solid var(--sv-border);
  box-shadow: none;
}
.s2-app .s2-search {
  flex: 1 1 220px;
  width: auto;
  min-width: 0;
  max-width: 480px;
  margin-right: auto;
}
.s2-app .s2-search > input {
  width: 100%;
  min-height: 44px;
  height: 44px;
  border: 1px solid var(--sv-border);
  border-radius: 10px;
  background: var(--sv-surface-soft);
  color: var(--s2-text);
  padding-left: 42px;
  box-shadow: none;
}
.s2-app .s2-search > input::placeholder { color: var(--s2-muted); opacity: 1; }
.s2-app .s2-search > span { top: 50%; transform: translateY(-50%); color: var(--s2-muted); }
.s2-app .s2-search > input:focus { background: var(--sv-surface); border-color: var(--s2-blue); }
.s2-app .s2-top-actions { gap: 10px; }
.s2-app :is(.s2-desktop-collapse, .s2-mobile-menu, .s2-icon-btn, .s2-theme-trigger) {
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  border: 1px solid var(--sv-border);
  border-radius: 10px;
  background: var(--sv-surface-soft);
  color: var(--s2-text);
  box-shadow: none;
}
.s2-app :is(.s2-desktop-collapse, .s2-mobile-menu, .s2-icon-btn) { width: 44px; flex-shrink: 0; }
.s2-app .s2-theme-trigger { font-size: 13px; font-weight: 600; gap: 8px; }
.s2-app .s2-top-avatar { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; }
.s2-app :is(.s2-search-results, .s2-theme-popover) {
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  background: var(--sv-surface);
  color: var(--s2-text);
  box-shadow: 0 16px 40px rgb(9 23 42 / 14%);
}
.s2-app .s2-theme-option { background: var(--sv-surface-soft); border-radius: 10px; }
.s2-app .s2-theme-option.is-selected { border-color: var(--s2-blue); }
.s2-app .s2-content { max-width: 1520px; padding: 28px 32px 56px; }
.s2-app .s2-page-head { gap: 20px; margin-bottom: 24px; }
.s2-app .s2-page-head h1 { margin: 4px 0 8px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.035em; }
.s2-app .s2-page-head p { margin: 0; color: var(--s2-muted); font-size: 15px; line-height: 1.6; }
.s2-app .s2-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; }

/* Dashboard: quiet surfaces, clear metric hierarchy and generous reading space. */
.s2-app :is(.sportiva-dashboard, .sportiva-intelligence, .sportiva-reservations) { gap: 20px; }
.s2-app .sportiva-dash-hero {
  gap: 24px;
  padding: 28px;
  border-radius: 20px;
  background: var(--s2-navy);
  background: linear-gradient(115deg, var(--s2-navy), color-mix(in srgb, var(--s2-navy), var(--s2-navy-2) 55%));
  color: #fff;
  box-shadow: none;
}
.s2-app .sportiva-dash-hero > div { min-width: 0; }
.s2-app .sportiva-dash-hero .sportiva-kicker { color: #c9d6e8; font-size: 11px; letter-spacing: .12em; font-weight: 650; }
.s2-app .sportiva-dash-hero h1 { margin: 7px 0 10px; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.2; letter-spacing: -.035em; font-weight: 700; color: #fff; }
.s2-app .sportiva-dash-hero p { color: #d8e2ef; font-size: 15px; line-height: 1.65; max-width: 680px; }
.s2-app .sportiva-health { flex: 0 0 164px; padding: 16px; border-radius: 14px; background: rgb(255 255 255 / 5%); border-color: rgb(255 255 255 / 14%); }
.s2-app .sportiva-health span { color: #d0dcec; font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.s2-app .sportiva-health strong { font-size: 34px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.s2-app .sportiva-health em { font-size: 12px; }
.s2-app .sportiva-demo-banner { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; padding: 14px 16px; border-radius: 12px; gap: 12px; }
.s2-app .sportiva-demo-banner > div { min-width: 0; }
.s2-app .sportiva-demo-banner > span { padding-top: 2px; }
.s2-app .sportiva-demo-banner strong { font-weight: 650; }
.s2-app .sportiva-demo-banner p { line-height: 1.5; }
.s2-app .sportiva-demo-banner a { font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.s2-app[data-biazon-theme="kuro"] .sportiva-unit-filter label {
  background: var(--s2-card) !important;
  border-color: var(--s2-line) !important;
  box-shadow: none;
}
.s2-app[data-biazon-theme="kuro"] .sportiva-unit-filter span { color: var(--s2-muted) !important; }
.s2-app[data-biazon-theme="kuro"] .sportiva-unit-filter select {
  background: var(--s2-card-2) !important;
  color: var(--s2-text) !important;
  border-color: var(--s2-line) !important;
}
.s2-app[data-biazon-theme="kuro"] .sportiva-demo-banner a { color: var(--s2-blue) !important; }
.s2-app .sportiva-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.s2-app :is(.sportiva-kpis article, .s2-mini-kpis article, .s2-history-kpis article) {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow);
}
.s2-app .sportiva-kpis article > div { gap: 8px; align-items: flex-start; }
.s2-app .sportiva-kpis article > div > span { flex: 0 0 30px; border-radius: 8px; }
.s2-app .sportiva-kpis small { color: var(--s2-muted); font-size: 12px; font-weight: 600; line-height: 1.45; }
.s2-app .sportiva-kpis strong {
  margin: 16px 0 7px;
  color: var(--s2-text);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.s2-app .sportiva-kpis :is(p, em) { color: var(--s2-muted); font-size: 12px; line-height: 1.55; }
.s2-app .sportiva-kpis p.is-good { color: var(--s2-green); }
.s2-app .sportiva-kpis p.is-bad { color: var(--s2-red); }
.s2-app .sportiva-kpis em { margin-top: 5px; }
.s2-app :is(.sportiva-card, .s2-section, .s2-event-card, .s2-report-card, .s2-report-kpi) {
  min-width: 0;
  background: var(--sv-surface);
  color: var(--s2-text);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  padding: 22px;
  box-shadow: var(--sv-shadow);
}
.s2-app :is(.sportiva-dash-grid, .sportiva-dash-grid.lower) { gap: 20px; }
.s2-app :is(.sportiva-card > header, .s2-section-head) { gap: 12px; margin-bottom: 20px; }
.s2-app .sportiva-card header span { font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.s2-app :is(.sportiva-card h2, .s2-section-head h2) { color: var(--s2-text); font-size: 18px; font-weight: 650; letter-spacing: -.02em; line-height: 1.35; }
.s2-app .sportiva-card header :is(small, a) { font-size: 12px; line-height: 1.5; }
.s2-app .sportiva-card header a { font-weight: 650; }
.s2-app :is(.sportiva-card header small, .sportiva-risk-list p, .sportiva-risk-list > article > span, .sportiva-insights p, .sportiva-funnel span, .sportiva-funnel-rate span, .sportiva-quick small, .sportiva-chart-legend span) { color: var(--s2-muted); }
.s2-app .sportiva-risk-list article { padding-block: 14px; border-color: var(--sv-border); }
.s2-app .sportiva-risk-list article:last-child { border-bottom: 0; }
.s2-app :is(.sportiva-risk-list strong, .sportiva-insights strong) { color: var(--s2-text); font-weight: 600; line-height: 1.45; }
.s2-app :is(.sportiva-insights article, .sportiva-funnel > div) { background: var(--sv-surface-soft); border-color: var(--sv-border); border-radius: 10px; }
.s2-app .sportiva-insights article > span { background: var(--sv-surface); color: var(--s2-blue); }
.s2-app .sportiva-insights a { font-weight: 650; }
.s2-app .sportiva-funnel span { font-size: 11px; letter-spacing: .03em; line-height: 1.4; }
.s2-app .sportiva-funnel strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.s2-app .sportiva-link-btn { border-radius: 10px; font-weight: 650; }
.s2-app .sportiva-quick a { min-width: 0; padding: 16px; border-color: var(--sv-border); border-radius: 12px; color: var(--s2-text); background: var(--sv-surface); }
.s2-app .sportiva-quick a:hover { border-color: var(--s2-blue); background: var(--sv-surface-soft); }
.s2-app .sportiva-quick b { font-weight: 650; line-height: 1.5; }
.s2-app :is(.sportiva-empty, .s2-empty) { padding: 24px; border-radius: 12px; border-color: var(--sv-border); background: var(--sv-surface-soft); color: var(--s2-muted); line-height: 1.6; }
.s2-app .sportiva-ui-icon { display: block; width: 20px; height: 20px; flex: 0 0 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* Dark chart surfaces and labels; the light chart and its data geometry stay intact. */
.s2-app[data-biazon-theme="kuro"] .sportiva-month-chart { color: var(--s2-text); }
.s2-app[data-biazon-theme="kuro"] .sportiva-chart-totals > div {
  background: var(--s2-card-2) !important;
  border-color: var(--s2-line) !important;
}
.s2-app[data-biazon-theme="kuro"] .sportiva-month-chart :is(figcaption strong, .sportiva-chart-totals strong) { color: var(--s2-text) !important; }
.s2-app[data-biazon-theme="kuro"] .sportiva-month-chart :is(figcaption span, .sportiva-chart-totals span, .sportiva-chart-legend span, .sportiva-chart-scroll-hint, .sportiva-chart-source) { color: var(--s2-muted) !important; }
.s2-app[data-biazon-theme="kuro"] .sportiva-chart-viewport {
  background: var(--s2-card) !important;
  border-color: var(--s2-line) !important;
}
.s2-app[data-biazon-theme="kuro"] .sportiva-chart-svg .chart-grid { stroke: var(--s2-line); }
.s2-app[data-biazon-theme="kuro"] .sportiva-chart-svg :is(.chart-axis, .chart-year) { fill: var(--s2-muted); stroke: none; }
.s2-app[data-biazon-theme="kuro"] .sportiva-chart-svg :is(.chart-value, .chart-month-label) { fill: var(--s2-text); stroke: none; }
.s2-app[data-biazon-theme="kuro"] .sportiva-chart-details { border-color: var(--s2-line); }
.s2-app[data-biazon-theme="kuro"] .sportiva-chart-details summary { background: var(--s2-card-2) !important; color: var(--s2-text) !important; }
.s2-app[data-biazon-theme="kuro"] .sportiva-chart-details table { background: var(--s2-card); }
.s2-app[data-biazon-theme="kuro"] .sportiva-chart-details :is(th, td) { color: var(--s2-text); border-color: var(--s2-line); }
.s2-app[data-biazon-theme="kuro"] .sportiva-chart-details caption { color: var(--s2-muted); }
.s2-app[data-biazon-theme="kuro"] .sportiva-chart-details :is(thead, tfoot) { background: var(--s2-card-2); }
.s2-app[data-biazon-theme="kuro"] :is(.sportiva-chart-empty, .sportiva-chart-notice) { background: var(--s2-card-2); border-color: var(--s2-line); color: var(--s2-text) !important; }
.s2-app[data-biazon-theme="kuro"] .sportiva-chart-notice { border-color: var(--s2-yellow); }
.s2-app[data-biazon-theme="kuro"] :is(.sportiva-chart-viewport, .sportiva-chart-details summary):focus-visible { outline-color: var(--s2-blue); }

/* Actions and forms retain semantic success, warning and destructive variants. */
.s2-app .s2-btn {
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 650;
  gap: 8px;
  box-shadow: none;
  transition: background-color .16s ease, border-color .16s ease;
}
.s2-app .s2-btn:hover { transform: none; }
.s2-app .s2-btn-primary { background: var(--s2-blue); color: var(--s2-on-primary, #fff); box-shadow: none; }
.s2-app .s2-btn-primary:hover { background: color-mix(in srgb, var(--s2-blue), #000 12%); }
/* Earlier palette rules forced warm gradients and white text, including in dark mode. */
.s2-app[data-biazon-theme] .s2-btn.s2-btn-primary,
.s2-app[data-biazon-theme] .s2-content .s2-btn-primary,
.s2-app[data-biazon-theme] .s2-drawer .s2-btn-primary,
.s2-app[data-biazon-theme] .svc-btn.svc-btn-orange,
.s2-app[data-biazon-theme] .s2-content .svc-btn-orange {
  background: var(--s2-blue) !important;
  color: var(--s2-on-primary, #fff) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.s2-app[data-biazon-theme] .s2-btn.s2-btn-primary:hover,
.s2-app[data-biazon-theme] .s2-content .s2-btn-primary:hover,
.s2-app[data-biazon-theme] .s2-drawer .s2-btn-primary:hover,
.s2-app[data-biazon-theme] .svc-btn.svc-btn-orange:hover,
.s2-app[data-biazon-theme] .s2-content .svc-btn-orange:hover {
  background: color-mix(in srgb, var(--s2-blue), #000 10%) !important;
}
.s2-app .s2-btn-soft { background: var(--s2-blue-soft); color: var(--s2-blue); border: 1px solid transparent; }
.s2-app .s2-btn-ghost { background: var(--sv-surface); color: var(--s2-text); border: 1px solid var(--sv-border); }
.s2-app .s2-btn-danger { color: var(--s2-red); border: 1px solid currentColor; background: transparent; }
.s2-app :is(.s2-form, .sportiva-settings-form, .sportiva-form-grid, .s2c-admin-form) label { color: var(--s2-text); font-size: 14px; font-weight: 550; line-height: 1.5; }
.s2-app :is(.s2-form, .sportiva-settings-form, .sportiva-form-grid, .s2c-admin-form) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]) {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--sv-border);
  border-radius: 10px;
  background: var(--sv-surface);
  color: var(--s2-text);
  box-shadow: none;
  padding: 11px 12px;
}
.s2-app :is(input, textarea)::placeholder { color: var(--s2-muted); opacity: .9; }
.s2-app :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--s2-blue); }
.s2-app :is(.s2-form, .sportiva-settings-form) :is(small, .description) { color: var(--s2-muted); line-height: 1.55; }
.s2-app :is(.svc-table-wrap, .s2-table-wrap, .svc-table-responsive, .dbz-table-wrap) {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: 12px;
  border-color: var(--sv-border);
  background: var(--sv-surface);
}
.s2-app :is(.svc-table-wrap, .s2-table-wrap, .svc-table-responsive, .dbz-table-wrap) table { border-collapse: collapse; font-size: 14px; }
.s2-app :is(.svc-table-wrap, .s2-table-wrap, .svc-table-responsive, .dbz-table-wrap) :is(th, td) { padding: 13px 16px; border-color: var(--sv-border); line-height: 1.5; vertical-align: middle; }
.s2-app :is(.svc-table-wrap, .s2-table-wrap, .svc-table-responsive, .dbz-table-wrap) th { background: var(--sv-surface-soft); color: var(--s2-muted); font-size: 12px; font-weight: 650; text-align: left; }
.s2-app .s2-drawer-panel { background: var(--sv-surface); color: var(--s2-text); padding: 26px 28px 40px; overscroll-behavior-y: contain; }
.s2-app .s2-drawer-head { padding-bottom: 20px; margin-bottom: 24px; }
.s2-app .s2-drawer-head h2 { font-size: 26px; font-weight: 700; }
.s2-app .s2-drawer-head button { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; background: var(--sv-surface-soft); color: var(--s2-text); }
.s2-app .s2-form-actions { background: var(--sv-surface); border-color: var(--sv-border); gap: 10px; padding-block: 16px; }

@media (max-width: 1200px) and (min-width: 801px) {
  .s2-app .s2-topbar { padding-inline: 24px; }
  .s2-app .s2-content { padding-inline: 24px; }
  .s2-app .sportiva-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s2-app .sportiva-dash-hero { padding: 24px; }
}

@media (min-width: 1600px) {
  .s2-app .sportiva-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  body.s2-menu-open { overflow: hidden; }
  .s2-app { padding-bottom: 0; }
  .s2-app .s2-sidebar {
    width: min(320px, calc(100vw - 28px));
    height: 100vh;
    height: 100dvh;
    transform: translateX(-105%);
    box-shadow: 12px 0 40px rgb(0 0 0 / 18%);
  }
  .s2-app.is-collapsed .s2-sidebar { transform: translateX(-105%); }
  .s2-app.is-menu-open .s2-sidebar { transform: translateX(0); }
  .s2-app .s2-sidebar-brand { min-height: 88px; padding: 18px 14px; gap: 10px; }
  .s2-app .s2-sidebar-brand img { width: 40px; height: 40px; flex-basis: 40px; }
  .s2-app .s2-sidebar-brand strong { font-size: 16px; }
  .s2-app .s2-sidebar-brand span { font-size: 10px; letter-spacing: .06em; }
  .s2-app .s2-sidebar-brand .s2-sidebar-close {
    position: static;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 10px;
    background: rgb(255 255 255 / 6%);
    color: #eff5ff;
    box-shadow: none;
  }
  .s2-app .s2-sidebar-close svg { width: 20px; height: 20px; }
  .s2-app .s2-nav { padding-inline: 12px; }
  .s2-app .s2-nav a { min-height: 48px; font-size: 15px; padding: 12px; }
  .s2-app .s2-nav-title { margin-top: 20px; }
  .s2-app .s2-nav-mobile-search { margin: 2px 0 18px; padding: 4px 10px; border-radius: 10px; }
  .s2-app .s2-nav .s2-nav-mobile-search input { min-height: 44px; background: transparent !important; color: #fff !important; border: 0; padding: 6px 2px; }
  .s2-app .s2-nav .s2-nav-mobile-search input::placeholder { color: #d3deed !important; opacity: 1; }
  .s2-app .s2-nav-mobile-search input:focus-visible { outline-offset: 0; }
  .s2-app .s2-sidebar-user { padding-top: 14px; }
  .s2-app .s2-main, .s2-app.is-collapsed .s2-main { margin-left: 0; width: 100%; }
  .s2-app .s2-topbar { min-height: 68px; gap: 8px; padding: 10px 16px; flex-wrap: nowrap; }
  .s2-app .s2-desktop-collapse { display: none; }
  .s2-app .s2-mobile-menu { display: grid; }
  .s2-app .s2-search { width: auto; min-width: 0; flex: 1 1 100px; max-width: none; margin: 0; }
  .s2-app .s2-top-actions { gap: 8px; }
  .s2-app .s2-theme-trigger { width: 44px; padding: 0; }
  .s2-app .s2-theme-trigger > span { display: none; }
  .s2-app .s2-content { padding: 24px 20px calc(100px + env(safe-area-inset-bottom)); }
  .s2-app .s2-page-head { flex-wrap: wrap; margin-bottom: 20px; }
  .s2-app .sportiva-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s2-app .sportiva-dash-hero { padding: 24px; }
  .s2-app :is(.sportiva-card, .s2-section, .s2-event-card, .s2-report-card, .s2-report-kpi) { padding: 20px; }
  .s2-app .s2-bottom-nav {
    height: auto;
    min-height: 72px;
    padding: 7px 8px max(7px, env(safe-area-inset-bottom));
    gap: 4px;
    border-top: 1px solid var(--sv-border);
    background: var(--sv-surface);
    box-shadow: 0 -3px 16px rgb(12 24 42 / 4%);
  }
  .s2-app .s2-bottom-nav a {
    min-width: 0;
    min-height: 56px;
    gap: 4px;
    padding: 6px 2px;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 600;
    border-radius: 10px;
    color: var(--s2-muted);
  }
  .s2-app .s2-bottom-nav a > svg { width: 20px; height: 20px; flex: 0 0 20px; }
  .s2-app .s2-bottom-nav a.is-active { background: var(--s2-blue-soft); color: var(--s2-blue); }
  .s2-app .s2-bottom-nav a.is-main {
    margin-top: 0;
    height: auto;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    background: var(--s2-blue-soft);
    color: var(--s2-blue);
  }
  .s2-app[data-biazon-theme] .s2-bottom-nav a.is-main {
    background: var(--s2-blue-soft) !important;
    color: var(--s2-blue) !important;
    border: 0 !important;
  }
  .s2-app .s2-mobile-backdrop { background: rgb(8 18 32 / 55%); }
  .s2-app .s2-drawer-panel { width: min(680px, 100vw); padding: 22px 20px 28px; }
}

@media (max-width: 600px) {
  .s2-app .s2-content { padding-inline: 16px; }
  .s2-app .sportiva-dash-hero { flex-direction: column; gap: 20px; padding: 22px; border-radius: 16px; }
  .s2-app .sportiva-dash-hero h1 { font-size: 28px; }
  .s2-app .sportiva-dash-hero p { font-size: 14px; }
  .s2-app .sportiva-health { width: 100%; flex-basis: auto; padding: 14px; text-align: left; }
  .s2-app .sportiva-health strong { display: inline-block; margin: 7px 10px 0 0; font-size: 28px; }
  .s2-app .sportiva-health em { display: inline-block; }
  .s2-app .sportiva-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* The dashboard's final two metrics include currency: keep complete values readable. */
  .s2-app .sportiva-kpis article:nth-last-child(-n + 2) { grid-column: 1 / -1; }
  .s2-app .sportiva-demo-banner { grid-template-columns: 24px minmax(0, 1fr); }
  .s2-app .sportiva-demo-banner > a { grid-column: 2; justify-self: start; }
  .s2-app .sportiva-kpis article { padding: 16px 14px; }
  .s2-app .sportiva-kpis strong { font-size: 24px; }
  .s2-app .sportiva-kpis article > div { flex-wrap: wrap; }
  .s2-app :is(.sportiva-card, .s2-section, .s2-event-card, .s2-report-card, .s2-report-kpi) { padding: 18px; }
  .s2-app :is(.s2-grid-2, .s2-toggle-grid) { grid-template-columns: minmax(0, 1fr); }
  .s2-app .s2-form-actions { flex-wrap: wrap; }
  .s2-app .s2-form-actions > .s2-btn { flex: 1 1 140px; }
  .s2-app .s2-drawer-head h2 { font-size: 23px; }
  .s2-app .s2-theme-popover { max-height: min(72vh, 620px); overscroll-behavior: contain; }
}

@media (max-width: 480px) {
  .s2-app .s2-topbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; padding: 10px 14px; gap: 8px; }
  .s2-app .s2-mobile-menu { grid-column: 1; grid-row: 1; }
  .s2-app .s2-search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .s2-app .s2-top-actions { grid-column: 3; grid-row: 1; }
  .s2-app .s2-content { padding-top: 20px; padding-inline: 14px; }
  .s2-app .sportiva-dash-hero { padding: 20px; }
  .s2-app .sportiva-dash-hero h1 { font-size: 26px; }
  .s2-app .sportiva-kpis article { padding: 14px 12px; }
  .s2-app .sportiva-kpis strong { font-size: 22px; }
  .s2-app .sportiva-kpis small { font-size: 12px; }
  .s2-app .s2-bottom-nav { gap: 2px; padding-inline: 4px; }
  .s2-app .s2-bottom-nav a { font-size: 10px; }
  .s2-app .s2-bottom-nav a > span { font-size: inherit; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
  .s2-app .s2-mini-kpis { grid-template-columns: minmax(0, 1fr); }
  .s2-app .s2-drawer-panel { padding-inline: 16px; }
}

@media (max-width: 360px) {
  .s2-app .sportiva-kpis { grid-template-columns: minmax(0, 1fr); }
  .s2-app .sportiva-kpis article > div { flex-wrap: nowrap; }
  .s2-app .sportiva-kpis strong { font-size: 26px; }
  .s2-app :is(.sportiva-card, .s2-section, .s2-event-card, .s2-report-card, .s2-report-kpi) { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .s2-app *, .s2-app *::before, .s2-app *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}