:root {
  --bg: #f4f7fb;
  --bg-2: #eef3ff;
  --surface: rgba(255,255,255,0.88);
  --surface-solid: #ffffff;
  --line: rgba(15, 23, 42, 0.08);
  --text: #14213d;
  --muted: #64748b;
  --primary: #2f6df6;
  --primary-2: #5d8bff;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --shadow: 0 10px 35px rgba(31, 41, 55, 0.08);
  --shadow-soft: 0 5px 18px rgba(31, 41, 55, 0.05);
}

html, body { min-height: 100%; }
body.app-body, body.auth-body {
  background:
    radial-gradient(circle at top right, rgba(93,139,255,.14), transparent 28%),
    radial-gradient(circle at left top, rgba(22,163,74,.09), transparent 22%),
    linear-gradient(180deg, #f7faff 0%, #f2f6fb 40%, #eef3fa 100%);
  color: var(--text);
  font-feature-settings: "tnum" 1;
}

.mono { font-variant-numeric: tabular-nums; }
.muted, .small-muted { color: var(--muted) !important; }
.small-muted { font-size: .88rem; }
.badge-soft { background: rgba(47,109,246,.10); color: var(--primary); border: 1px solid rgba(47,109,246,.16); border-radius: 999px; }
.badge-walk { background: rgba(22,163,74,.10); color: var(--success); border: 1px solid rgba(22,163,74,.16); border-radius: 999px; }
.big { font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.8rem); font-weight: 800; }

.container { max-width: 1240px; }
main.container { padding-top: 1rem !important; padding-bottom: 6.25rem !important; }

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  padding: .9rem .6rem;
  backdrop-filter: blur(10px);
}
.app-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(27, 57, 123, .95), rgba(47, 109, 246, .95));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: .7rem .95rem;
  box-shadow: 0 12px 30px rgba(18, 33, 61, .22);
}
.app-brand-wrap { display:flex; align-items:center; gap:.75rem; min-width: 0; }
.app-brand {
  display:flex; align-items:center; gap:.75rem; text-decoration:none; color:#fff;
  min-width: 0;
}
.app-brand:hover { color:#fff; opacity:.95; }
.app-brand-mark {
  width: 42px; height: 42px; display:flex; align-items:center; justify-content:center;
  border-radius: 14px; background: rgba(255,255,255,.16); color:#fff; font-weight: 800; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.15);
}
.app-brand-text { display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.app-brand-text strong { font-size: 1rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-brand-text small { color: rgba(255,255,255,.75); font-size: .76rem; white-space: nowrap; }
.app-menu-toggle, .app-drawer-close {
  display:none; border:0; background: rgba(255,255,255,.14); color:#000000; border-radius: 12px;
  width:42px; height:42px; font-size:1.15rem; line-height:1; align-items:center; justify-content:center;
}
.app-nav-desktop { display:flex; align-items:center; gap:.5rem; flex-wrap: wrap; }
.app-nav-chip, .app-ghost-btn {
  display:inline-flex; align-items:center; gap:.4rem; padding:.66rem .88rem; border-radius:999px;
  text-decoration:none; font-size:.92rem; font-weight:600; transition:all .18s ease;
}
.app-nav-chip { color: rgba(33,150,243, 0.99); border:1px solid rgba(255,255,255,.12); }
.app-nav-chip:hover, .app-nav-chip.is-active {
  background:#fff; color: var(--primary); transform: translateY(-1px);
}
.app-ghost-btn {
  background:#fff; color: var(--primary); border:1px solid rgba(255,255,255,.4);
}
.app-ghost-btn:hover { color: var(--primary); box-shadow: var(--shadow-soft); }
.chip-emoji { line-height: 1; }

.page-hero {
  display:grid; grid-template-columns: 1.3fr .9fr; gap: 1rem;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.72));
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.15rem 1.2rem;
}
.eyebrow { display:inline-block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); font-weight:700; margin-bottom:.35rem; }
.page-title { margin:0; font-size: clamp(1.45rem, 1.2rem + 1vw, 2.1rem); font-weight:800; }
.page-subtitle { margin:.5rem 0 0; color:var(--muted); max-width: 62ch; }
.page-hero-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top: .9rem; }
.page-hero-visual { display:flex; align-items:stretch; justify-content:flex-end; }
.hero-visual-card {
  width:100%; min-height:160px; border-radius:20px; padding:1rem;
  background: linear-gradient(135deg, rgba(47,109,246,.12), rgba(93,139,255,.05)); border:1px dashed rgba(47,109,246,.22);
  display:grid; gap:.8rem; align-content:space-between;
}
.hero-visual-logo, .hero-visual-image, .app-image-placeholder {
  border-radius:16px; border:1px dashed rgba(47,109,246,.22); background:rgba(255,255,255,.55);
  color:#567; display:flex; align-items:center; justify-content:center; text-align:center;
}
.hero-visual-logo { min-height:52px; font-weight:700; }
.hero-visual-image { min-height:90px; font-size:.95rem; }
.app-image-placeholder { min-height: 120px; padding: 1rem; flex-direction:column; gap:.5rem; }
.placeholder-icon { font-size:1.5rem; }
.placeholder-text { font-size:.9rem; color:var(--muted); }

.card, .list-group-item, .table-responsive, .alert {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft);
}
.card { background: var(--surface); overflow: hidden; }
.card-header {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,249,255,.88));
  border-bottom: 1px solid var(--line);
  padding: .95rem 1.1rem;
}
.card-body { padding: 1.05rem 1.1rem; }
.table { margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .85rem .95rem; border-bottom-color: rgba(15,23,42,.06); }
.table thead th { color: #475569; font-size:.84rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.list-group { gap: .8rem; display:grid; }
.list-group-item { background: rgba(255,255,255,.92); }
.alert { background: rgba(255,255,255,.88); }

.form-control, .form-select {
  border-radius: 14px; border-color: rgba(15,23,42,.10); min-height: 46px;
  box-shadow: none !important; background: rgba(255,255,255,.96);
}
.form-control:focus, .form-select:focus {
  border-color: rgba(47,109,246,.35); box-shadow: 0 0 0 .2rem rgba(47,109,246,.12) !important;
}
textarea.form-control { min-height: 110px; }
.btn { border-radius: 14px; font-weight: 600; }
.btn-sm { border-radius: 12px; }
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(47,109,246,.22);
}
.btn-outline-primary { border-color: rgba(47,109,246,.22); color: var(--primary); }
.btn-outline-primary:hover { background: rgba(47,109,246,.08); color: var(--primary); border-color: rgba(47,109,246,.30); }
.btn-outline-secondary, .btn-outline-danger, .btn-outline-light { border-width:1px; }
.progress { border-radius: 999px; overflow:hidden; background: rgba(15,23,42,.06); }
.progress-bar { border-radius: inherit; }

.table-responsive { overflow:auto; }
.chart-box { min-height: 280px; }

.app-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1080; opacity:0; visibility:hidden; transition: .2s ease;
}
.app-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(88vw, 360px); background: #fff; z-index: 1090;
  transform: translateX(-100%); transition: transform .22s ease; box-shadow: 18px 0 36px rgba(15,23,42,.14);
  padding: 1rem; display:flex; flex-direction:column; gap: 1rem;
}
.app-drawer-header, .app-drawer-brand { display:flex; align-items:center; justify-content:space-between; gap: .75rem; }
.drawer-subtitle { font-size:.82rem; color:var(--muted); }
.app-drawer-nav { display:grid; gap:.45rem; }
.app-drawer-link {
  display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--text);
  border: 1px solid transparent; padding:.85rem .9rem; border-radius: 16px; font-weight:600;
}
.app-drawer-link.is-active, .app-drawer-link:hover { background: rgba(47,109,246,.08); color: var(--primary); border-color: rgba(47,109,246,.12); }
.app-drawer-footer { margin-top:auto; }
body.app-menu-open .app-drawer-backdrop { opacity: 1; visibility: visible; }
body.app-menu-open .app-drawer { transform: translateX(0); }

.app-bottom-nav {
  display:none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  padding: .45rem .5rem calc(.45rem + env(safe-area-inset-bottom));
  grid-template-columns: repeat(5, 1fr); gap: .25rem;
}
.app-bottom-link {
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none;
  gap:.18rem; color: #64748b; font-size: .72rem; padding: .48rem .2rem; border-radius: 14px; font-weight: 600;
}
.app-bottom-link.is-active { color: var(--primary); background: rgba(47,109,246,.09); }

.auth-shell { min-height: 100vh; display:grid; place-items:center; padding: 1.2rem; }
.auth-card {
  width: min(100%, 980px); display:grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; align-items: stretch;
}
.auth-showcase, .auth-form-card {
  background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow);
}
.auth-showcase { padding: 1.25rem; display:grid; gap: 1rem; }
.auth-badges { display:flex; flex-wrap:wrap; gap:.6rem; }
.auth-badge { padding:.55rem .85rem; border-radius:999px; background:rgba(47,109,246,.08); color:var(--primary); font-weight:700; font-size:.86rem; }
.auth-media-placeholder {
  min-height: 250px; border-radius: 20px; border:1px dashed rgba(47,109,246,.22); background:linear-gradient(135deg, rgba(47,109,246,.10), rgba(22,163,74,.06));
  display:grid; place-items:center; color:var(--muted); text-align:center; padding:1rem;
}
.auth-form-card { padding: 1.1rem; }
.auth-form-card .card { border:0 !important; box-shadow:none; background:transparent; }
.auth-links { text-align:center; margin-top: 1rem; }

@media (max-width: 991.98px) {
  .app-menu-toggle, .app-drawer-close { display:inline-flex; }
  .app-nav-desktop, .app-topbar-actions { display:none; }
  .page-hero { grid-template-columns: 1fr; }
  .page-hero-visual { order: -1; }
  .hero-visual-card { min-height: 130px; }
  .app-bottom-nav { display:grid; }
  main.container { padding-bottom: 6.9rem !important; }
}

@media (max-width: 767.98px) {
  .app-topbar { padding: .7rem .35rem; }
  .app-topbar-inner { border-radius: 24px; padding: .65rem .75rem; }
  .app-brand-text small { display:none; }
  .card-body, .card-header { padding-left: .9rem; padding-right: .9rem; }
  .table > :not(caption) > * > * { padding: .7rem .75rem; }
  .btn, .form-control, .form-select { min-height: 44px; }
  .auth-card { grid-template-columns: 1fr; }
  .auth-showcase { order: 2; }
  .auth-form-card { order: 1; }
}

.chip { display:inline-block; padding:.18rem .55rem; border-radius:999px; border:1px solid rgba(15,23,42,.10); background:#fff; font-size:.85rem; margin-right:.25rem; }
.accordion-collapse { display:none; }
.accordion-collapse.show { display:block; }


/* =========================================================
   RUNNING PREMIUM THEME v10
   Layer premium: glass, gradient, sports app feeling.
   ========================================================= */

:root {
  --premium-navy: #07111f;
  --premium-blue: #2563eb;
  --premium-blue-2: #60a5fa;
  --premium-cyan: #06b6d4;
  --premium-lime: #84cc16;
  --premium-orange: #fb923c;
  --premium-purple: #8b5cf6;
  --premium-card: rgba(255,255,255,.80);
  --premium-card-solid: #ffffff;
  --premium-line: rgba(15, 23, 42, .08);
  --premium-glow: 0 18px 48px rgba(37, 99, 235, .18);
  --premium-glow-soft: 0 14px 34px rgba(15, 23, 42, .08);
}

body.app-body,
body.auth-body {
  background:
    radial-gradient(circle at 8% 5%, rgba(132,204,22,.14), transparent 24%),
    radial-gradient(circle at 92% 0%, rgba(37,99,235,.22), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(6,182,212,.10), transparent 26%),
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 46%, #f7fafc 100%);
}

body.app-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, black 0%, transparent 70%);
  z-index: -1;
}

.app-topbar { padding-top: 1rem; }

.app-topbar-inner {
  background:
    linear-gradient(135deg, rgba(7,17,31,.97), rgba(17,34,64,.95) 50%, rgba(37,99,235,.92));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 18px 45px rgba(7,17,31,.28),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.app-brand-mark {
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.92), rgba(255,255,255,.22) 24%, transparent 25%),
    linear-gradient(135deg, var(--premium-lime), var(--premium-cyan), var(--premium-blue));
  color: #06101f;
  text-shadow: none;
  box-shadow: 0 10px 24px rgba(6,182,212,.25);
}

.app-nav-chip { position: relative; isolation: isolate; }

.app-nav-chip::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(132,204,22,.28), rgba(96,165,250,.18));
  opacity: 0;
  transition: opacity .18s ease;
  z-index: -1;
}

.app-nav-chip:hover::before,
.app-nav-chip.is-active::before { opacity: 1; }

.app-nav-chip:hover,
.app-nav-chip.is-active {
  background: rgba(255,255,255,.96);
  color: #12396f;
  box-shadow: 0 10px 25px rgba(7,17,31,.16);
}

.page-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.72)),
    radial-gradient(circle at 88% 22%, rgba(37,99,235,.22), transparent 28%),
    radial-gradient(circle at 72% 92%, rgba(132,204,22,.18), transparent 24%);
  border: 1px solid rgba(255,255,255,.68);
  box-shadow:
    0 22px 60px rgba(15,23,42,.09),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.page-hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -140px;
  top: -150px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37,99,235,.20), transparent 62%);
  pointer-events: none;
}

.eyebrow {
  color: var(--premium-blue);
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.12);
  border-radius: 999px;
  padding: .28rem .62rem;
}

.page-title {
  letter-spacing: -.035em;
  background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 62%, #0891b2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-subtitle { font-size: 1rem; line-height: 1.55; }

.hero-visual-card {
  min-height: 180px;
  background:
    linear-gradient(145deg, rgba(7,17,31,.92), rgba(37,99,235,.78)),
    radial-gradient(circle at 20% 20%, rgba(132,204,22,.35), transparent 32%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 20px 45px rgba(37,99,235,.20),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.hero-visual-logo,
.hero-visual-image {
  color: rgba(255,255,255,.86);
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}

.hero-visual-logo { justify-content: flex-start; padding: 0 1rem; }
.hero-visual-image { min-height: 104px; }

/* Cards premium */
.card {
  background:
    linear-gradient(180deg, rgba(33,150,243,.08), rgba(255,255,255,.76));
  backdrop-filter: blur(12px);
  box-shadow:
    0 16px 42px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.72) !important;
}

.card-header {
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(245,249,255,.82));
  font-weight: 800 !important;
  letter-spacing: -.01em;
}

.stat-card { position: relative; overflow: hidden; }

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--premium-lime), var(--premium-cyan), var(--premium-blue));
}

.stat-card .big {
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.table-responsive { background: rgba(255,255,255,.78); }
.table tbody tr { transition: background .16s ease, transform .16s ease; }
.table tbody tr:hover { background: rgba(37,99,235,.035); }

.btn-primary {
  border: 0;
  background: linear-gradient(135deg, #1d4ed8, #2563eb 48%, #06b6d4);
  box-shadow:
    0 12px 28px rgba(37,99,235,.26),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(37,99,235,.30);
}

.btn-outline-primary { background: rgba(255,255,255,.58); }

.form-label {
  font-weight: 700;
  color: #334155;
  font-size: .92rem;
}

.form-control,
.form-select {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.10);
}

.form-text { color: #7c8aa0; }

.badge {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.app-drawer { background: linear-gradient(180deg, #ffffff, #f7fbff); }

.app-drawer-header {
  background:
    linear-gradient(135deg, rgba(7,17,31,.96), rgba(37,99,235,.88));
  border-radius: 22px;
  padding: .9rem;
  color: #fff;
}

.app-drawer-header .app-brand-mark { width: 44px; height: 44px; }
.drawer-subtitle { color: rgba(255,255,255,.74); }
.app-drawer-close { display: inline-flex; }

.app-drawer .app-image-placeholder {
  background:
    linear-gradient(145deg, rgba(37,99,235,.10), rgba(132,204,22,.08));
  border-color: rgba(37,99,235,.18);
}

.app-bottom-nav {
  margin: 0 .65rem .5rem;
  left: .65rem;
  right: .65rem;
  bottom: .35rem;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 18px 40px rgba(15,23,42,.14);
}

.app-bottom-link.is-active {
  background:
    linear-gradient(135deg, rgba(37,99,235,.12), rgba(6,182,212,.10));
  color: #1d4ed8;
}

.app-image-placeholder,
.auth-media-placeholder {
  position: relative;
  overflow: hidden;
}

.app-image-placeholder::after,
.auth-media-placeholder::after,
.hero-visual-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.18) 42%, transparent 58%);
  transform: translateX(-100%);
  animation: premiumShine 4.8s ease-in-out infinite;
}

@keyframes premiumShine {
  0%, 55% { transform: translateX(-100%); }
  80%, 100% { transform: translateX(100%); }
}

.auth-card { max-width: 1040px; }

.auth-showcase {
  background:
    linear-gradient(145deg, rgba(7,17,31,.94), rgba(37,99,235,.78)),
    radial-gradient(circle at 20% 15%, rgba(132,204,22,.35), transparent 30%);
  color: #fff;
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 24px 70px rgba(7,17,31,.22);
}

.auth-showcase .page-title {
  background: linear-gradient(135deg, #ffffff, #dbeafe 48%, #a7f3d0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-showcase .page-subtitle { color: rgba(255,255,255,.78); }

.auth-showcase .eyebrow {
  color: #dbeafe;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.16);
}

.auth-badge {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
}

.auth-media-placeholder {
  background:
    radial-gradient(circle at 18% 20%, rgba(132,204,22,.24), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.78);
}

.auth-form-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80));
  backdrop-filter: blur(12px);
}

.premium-panel {
  border-radius: 28px;
  padding: 1.1rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.66));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 16px 42px rgba(15,23,42,.08);
}

.premium-cover {
  min-height: 180px;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(7,17,31,.92), rgba(37,99,235,.75)),
    radial-gradient(circle at 15% 15%, rgba(132,204,22,.28), transparent 30%);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
}

@media (max-width: 767.98px) {
  .page-hero {
    border-radius: 24px;
    padding: 1rem;
  }

  .page-title { font-size: 1.55rem; }

  .page-hero-actions .btn { width: 100%; }

  .card { border-radius: 22px !important; }

  .table-responsive { border-radius: 20px !important; }

  .app-bottom-nav {
    margin: 0 .45rem .35rem;
    left: .45rem;
    right: .45rem;
    bottom: .25rem;
  }

  .app-bottom-link { font-size: .67rem; }
}

/* Dashboard compatta v12 */
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.dashboard-kpi-card .card-body {
  display: grid;
  gap: .25rem;
}
.kpi-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(37,99,235,.08);
  margin-bottom: .45rem;
  font-size: 1.15rem;
}
.kpi-label,
.focus-label {
  color: #64748b;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.kpi-value {
  font-size: clamp(1.45rem, 1rem + 1.5vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
}
.kpi-note,
.focus-meta {
  color: #64748b;
  font-size: .9rem;
}
.dashboard-focus-card {
  min-height: 100%;
}
.focus-title {
  margin: .55rem 0 .25rem;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem);
  font-weight: 900;
  letter-spacing: -.035em;
}
.focus-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .48rem .75rem;
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(6,182,212,.08));
  color: #1d4ed8;
  font-weight: 800;
}
.dashboard-mini-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
.dashboard-mini-counts span {
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: .62rem .7rem;
  background: rgba(255,255,255,.62);
  color: #64748b;
  font-size: .88rem;
}
.dashboard-mini-counts strong {
  color: #0f172a;
  display: block;
  font-size: 1.05rem;
}
.dashboard-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
.dashboard-shortcut {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: #0f172a;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 20px;
  padding: .9rem;
  background: rgba(255,255,255,.70);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dashboard-shortcut:hover {
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
  border-color: rgba(37,99,235,.18);
}
.shortcut-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(132,204,22,.08));
  flex: 0 0 auto;
}
.dashboard-shortcut strong,
.dashboard-shortcut small {
  display: block;
}
.dashboard-shortcut small {
  color: #64748b;
  margin-top: .1rem;
}
@media (max-width: 991.98px) {
  .dashboard-kpi-grid,
  .dashboard-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .dashboard-kpi-grid,
  .dashboard-shortcut-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  .dashboard-kpi-card .card-body,
  .dashboard-focus-card .card-body {
    padding: .95rem;
  }
  .dashboard-shortcut {
    padding: .78rem;
  }
}


/* Dashboard compact charts v13 */
.section-title {
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -.02em;
  color: #0f172a;
}
.dashboard-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.dashboard-chart-card {
  min-width: 0;
}
.dashboard-chart-card .card-header {
  min-height: 54px;
}
.dashboard-chart-box {
  position: relative;
  height: 245px;
  width: 100%;
}
@media (max-width: 991.98px) {
  .dashboard-chart-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-chart-box {
    height: 225px;
  }
}
@media (max-width: 575.98px) {
  .dashboard-chart-section .d-flex {
    align-items: stretch !important;
    flex-direction: column;
  }
  .dashboard-chart-section .btn {
    width: 100%;
  }
  .dashboard-chart-box {
    height: 210px;
  }
}


/* Dashboard charts v14: tre grafici compatti su desktop */
@media (min-width: 1200px) {
  .dashboard-chart-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* =========================================================
   RUNNING v15 - Attività page
   ========================================================= */

.activity-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}

.activity-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.activity-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
  margin-bottom: 1rem;
}

.activity-kpi {
  border-radius: 22px;
  padding: 1rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.66));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 14px 34px rgba(15,23,42,.07);
  min-height: 112px;
}

.activity-kpi-label {
  color: var(--muted, #64748b);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.activity-kpi-value {
  margin-top: .45rem;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: 1;
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.activity-kpi-note {
  margin-top: .4rem;
  color: var(--muted, #64748b);
  font-size: .86rem;
}

.activity-chart-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.activity-chart-box {
  height: 260px;
  position: relative;
}

.activity-filters-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .2rem 0 1rem;
}

.activity-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .38rem .65rem;
  background: rgba(37,99,235,.08);
  color: #1d4ed8;
  border: 1px solid rgba(37,99,235,.13);
  font-size: .84rem;
  font-weight: 700;
}

.activity-list-card {
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
  overflow: hidden;
}

.activity-row {
  cursor: pointer;
}

.activity-row:hover {
  background: rgba(37,99,235,.04);
}

.activity-mobile-list {
  display: grid;
  gap: .8rem;
}

.activity-mobile-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 22px;
  padding: 1rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 30px rgba(15,23,42,.07);
}

.activity-mobile-card:active {
  transform: scale(.99);
}

.activity-mobile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.activity-mobile-title {
  font-weight: 850;
  letter-spacing: -.02em;
}

.activity-mobile-meta {
  color: var(--muted, #64748b);
  font-size: .87rem;
  margin-top: .18rem;
}

.activity-mobile-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
  margin-top: .9rem;
}

.activity-mobile-metric {
  border-radius: 16px;
  background: rgba(37,99,235,.055);
  padding: .65rem .55rem;
  text-align: center;
}

.activity-mobile-metric strong {
  display: block;
  font-size: .95rem;
}

.activity-mobile-metric span {
  display: block;
  color: var(--muted, #64748b);
  font-size: .72rem;
  margin-top: .12rem;
}

.activity-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  z-index: 1120;
  opacity: 0;
  visibility: hidden;
  transition: .2s ease;
  backdrop-filter: blur(4px);
}

.activity-modal {
  position: fixed;
  inset: auto 0 0 0;
  max-height: 92vh;
  overflow: auto;
  z-index: 1130;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -20px 50px rgba(15,23,42,.22);
  padding: 1rem;
  transform: translateY(100%);
  transition: transform .22s ease;
}

.activity-modal.is-open,
.activity-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.activity-modal.is-open {
  transform: translateY(0);
}

.activity-modal-dialog {
  max-width: 980px;
  margin: 0 auto;
}

.activity-modal-header {
  position: sticky;
  top: -1rem;
  z-index: 2;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0 .9rem;
  border-bottom: 1px solid rgba(15,23,42,.08);
  margin-bottom: 1rem;
}

.activity-modal-title {
  margin: 0;
  font-weight: 850;
  letter-spacing: -.03em;
}

.activity-modal-close {
  border: 0;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(15,23,42,.07);
  color: #0f172a;
  font-size: 1.35rem;
  line-height: 1;
}

.activity-segment-box {
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.08);
  padding: .85rem;
}

.activity-pagination {
  gap: .4rem;
}

.activity-pagination .page-link {
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  color: #1d4ed8;
}

.activity-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .85rem;
  margin-bottom: 1rem;
}

.activity-detail-card {
  border-radius: 22px;
  padding: 1rem;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
}

.activity-detail-label {
  color: var(--muted, #64748b);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.activity-detail-value {
  margin-top: .35rem;
  font-size: 1.15rem;
  font-weight: 850;
}

@media (min-width: 992px) {
  .activity-modal {
    inset: 5vh 50% auto auto;
    width: min(980px, calc(100vw - 2rem));
    border-radius: 30px;
    transform: translate(50%, 30px) scale(.98);
    max-height: 90vh;
  }

  .activity-modal.is-open {
    transform: translate(50%, 0) scale(1);
  }
}

@media (max-width: 991.98px) {
  .activity-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activity-chart-grid {
    grid-template-columns: 1fr;
  }

  .activity-chart-box {
    height: 240px;
  }

  .activity-detail-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 575.98px) {
  .activity-kpi-grid,
  .activity-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
  }

  .activity-kpi {
    min-height: 98px;
    padding: .85rem;
  }

  .activity-kpi-note {
    display: none;
  }

  .activity-mobile-metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .activity-modal {
    max-height: 94vh;
    padding: .85rem;
  }
}

/* =========================================================
   RUNNING v16 - Scarpe mobile friendly
   ========================================================= */

.shoes-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.75rem;
  margin-bottom:1rem;
}

.shoes-toolbar-actions { display:flex; flex-wrap:wrap; gap:.55rem; }

.shoes-kpi-grid {
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:.85rem;
  margin-bottom:1rem;
}

.shoe-kpi {
  border-radius:22px;
  padding:1rem;
  background:linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.66));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 14px 34px rgba(15,23,42,.07);
  min-height:112px;
}

.shoe-kpi-label {
  color:var(--muted,#64748b);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.shoe-kpi-value {
  margin-top:.45rem;
  font-size:clamp(1.35rem,1.1rem + 1vw,2rem);
  font-weight:850;
  letter-spacing:-.04em;
  line-height:1;
  background:linear-gradient(135deg,#0f172a,#1d4ed8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.shoe-kpi-note { margin-top:.4rem; color:var(--muted,#64748b); font-size:.86rem; }

.shoes-chart-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:1rem;
  margin-bottom:1rem;
}

.shoes-chart-box { height:260px; position:relative; }

.shoes-list-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:1rem;
}

.shoe-card {
  position:relative;
  display:block;
  text-align:left;
  width:100%;
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px;
  padding:1rem;
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  box-shadow:0 14px 34px rgba(15,23,42,.07);
  color:inherit;
  cursor:pointer;
  overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease;
}

.shoe-card:hover { transform:translateY(-2px); box-shadow:0 18px 42px rgba(15,23,42,.10); }
.shoe-card:active { transform:scale(.99); }

.shoe-card::before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--premium-lime,#84cc16),var(--premium-cyan,#06b6d4),var(--premium-blue,#2563eb));
}

.shoe-card-top { display:flex; justify-content:space-between; gap:.8rem; align-items:flex-start; }
.shoe-card-name { font-weight:850; letter-spacing:-.03em; font-size:1.05rem; }
.shoe-card-model { color:var(--muted,#64748b); font-size:.9rem; margin-top:.15rem; }
.shoe-card-status { display:flex; flex-wrap:wrap; gap:.35rem; justify-content:flex-end; }

.shoe-card-main { display:grid; grid-template-columns:1fr auto; gap:.8rem; align-items:end; margin-top:1rem; }
.shoe-km-big { font-size:1.55rem; font-weight:850; letter-spacing:-.04em; line-height:1; }
.shoe-km-small { color:var(--muted,#64748b); font-size:.86rem; margin-top:.22rem; }
.shoe-percent { font-weight:850; font-size:1.05rem; color:#1d4ed8; }
.shoe-progress-wrap { margin-top:.85rem; }
.shoe-progress-labels { display:flex; justify-content:space-between; gap:.8rem; color:var(--muted,#64748b); font-size:.78rem; margin-top:.35rem; }
.shoe-card-meta { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.8rem; }

.shoe-card-actions { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.9rem; }
.shoe-card-actions .btn { position:relative; z-index:2; }

.shoe-modal-detail-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.85rem;
  margin-bottom:1rem;
}

.shoe-detail-card {
  border-radius:20px;
  padding:1rem;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 12px 30px rgba(15,23,42,.06);
}

.shoe-detail-label {
  color:var(--muted,#64748b);
  font-size:.76rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.shoe-detail-value { margin-top:.35rem; font-size:1.12rem; font-weight:850; }
.shoe-detail-progress { margin:1rem 0; }

.shoe-empty-state {
  border-radius:24px;
  padding:1.2rem;
  background:rgba(255,255,255,.82);
  border:1px dashed rgba(37,99,235,.22);
  color:var(--muted,#64748b);
  text-align:center;
}

@media (max-width:991.98px) {
  .shoes-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shoes-chart-grid { grid-template-columns:1fr; }
  .shoes-list-grid { grid-template-columns:1fr; }
  .shoes-chart-box { height:240px; }
  .shoe-modal-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:575.98px) {
  .shoes-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
  .shoe-kpi { min-height:98px; padding:.85rem; }
  .shoe-kpi-note { display:none; }
  .shoe-card { border-radius:22px; padding:.9rem; }
  .shoe-card-main { grid-template-columns:1fr; }
  .shoe-percent { font-size:.95rem; }
  .shoe-modal-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
}


/* =========================================================
   RUNNING v17 - Gare page
   ========================================================= */

.race-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}

.race-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.race-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
  margin-bottom: 1rem;
}

.race-kpi {
  border-radius: 22px;
  padding: 1rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.68));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 14px 34px rgba(15,23,42,.07);
  min-height: 112px;
}

.race-kpi-label {
  color: var(--muted, #64748b);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.race-kpi-value {
  margin-top: .45rem;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: 1;
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.race-kpi-note {
  margin-top: .4rem;
  color: var(--muted, #64748b);
  font-size: .86rem;
}

.race-highlight {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.72);
  background:
    linear-gradient(135deg, rgba(7,17,31,.94), rgba(37,99,235,.82)),
    radial-gradient(circle at 18% 20%, rgba(132,204,22,.28), transparent 30%);
  box-shadow: 0 22px 55px rgba(15,23,42,.18);
  color: #fff;
  padding: 1.15rem;
  margin-bottom: 1rem;
}

.race-highlight::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -120px;
  width: 270px;
  height: 270px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 62%);
}

.race-highlight-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1rem;
  align-items: center;
}

.race-highlight .eyebrow {
  color: #dbeafe;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.16);
}

.race-highlight-title {
  margin: .45rem 0 0;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -.045em;
}

.race-highlight-meta {
  color: rgba(255,255,255,.78);
  margin-top: .45rem;
}

.race-highlight-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .65rem;
}

.race-highlight-metric {
  border-radius: 18px;
  padding: .85rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
}

.race-highlight-metric span {
  display: block;
  color: rgba(255,255,255,.70);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.race-highlight-metric strong {
  display: block;
  margin-top: .25rem;
  font-size: 1.12rem;
}

.race-chart-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.race-chart-box {
  height: 260px;
  position: relative;
}

.race-list-card {
  border-radius: 24px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
  overflow: hidden;
}

.race-row {
  cursor: pointer;
}

.race-row:hover {
  background: rgba(37,99,235,.04);
}

.race-mobile-list {
  display: grid;
  gap: .8rem;
}

.race-mobile-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 22px;
  padding: 1rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 30px rgba(15,23,42,.07);
}

.race-mobile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.race-mobile-title {
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.15;
}

.race-mobile-meta {
  color: var(--muted, #64748b);
  font-size: .87rem;
  margin-top: .2rem;
}

.race-mobile-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
  margin-top: .9rem;
}

.race-mobile-metric {
  border-radius: 16px;
  background: rgba(37,99,235,.055);
  padding: .65rem .55rem;
  text-align: center;
}

.race-mobile-metric strong {
  display: block;
  font-size: .95rem;
}

.race-mobile-metric span {
  display: block;
  color: var(--muted, #64748b);
  font-size: .72rem;
  margin-top: .12rem;
}

.race-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  z-index: 1120;
  opacity: 0;
  visibility: hidden;
  transition: .2s ease;
  backdrop-filter: blur(4px);
}

.race-modal {
  position: fixed;
  inset: auto 0 0 0;
  max-height: 92vh;
  overflow: auto;
  z-index: 1130;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -20px 50px rgba(15,23,42,.22);
  padding: 1rem;
  transform: translateY(100%);
  transition: transform .22s ease;
}

.race-modal.is-open,
.race-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.race-modal.is-open {
  transform: translateY(0);
}

.race-modal-dialog {
  max-width: 1040px;
  margin: 0 auto;
}

.race-modal-header {
  position: sticky;
  top: -1rem;
  z-index: 2;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0 .9rem;
  border-bottom: 1px solid rgba(15,23,42,.08);
  margin-bottom: 1rem;
}

.race-modal-title {
  margin: 0;
  font-weight: 900;
  letter-spacing: -.035em;
}

.race-modal-close {
  border: 0;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(15,23,42,.07);
  color: #0f172a;
  font-size: 1.35rem;
  line-height: 1;
}

.race-form-section {
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.08);
  padding: .9rem;
}

.race-pagination {
  gap: .4rem;
}

.race-pagination .page-link {
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  color: #1d4ed8;
}

@media (min-width: 992px) {
  .race-modal {
    inset: 5vh 50% auto auto;
    width: min(1040px, calc(100vw - 2rem));
    border-radius: 30px;
    transform: translate(50%, 30px) scale(.98);
    max-height: 90vh;
  }

  .race-modal.is-open {
    transform: translate(50%, 0) scale(1);
  }
}

@media (max-width: 991.98px) {
  .race-kpi-grid,
  .race-highlight-inner,
  .race-chart-grid {
    grid-template-columns: 1fr;
  }

  .race-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .race-chart-box {
    height: 240px;
  }
}

@media (max-width: 575.98px) {
  .race-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
  }

  .race-kpi {
    min-height: 98px;
    padding: .85rem;
  }

  .race-kpi-note {
    display: none;
  }

  .race-highlight {
    padding: 1rem;
    border-radius: 24px;
  }

  .race-highlight-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .race-mobile-metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .race-modal {
    max-height: 94vh;
    padding: .85rem;
  }
}


/* =========================================================
   RUNNING v20 - FIX modali desktop sempre visibili
   Problema: su desktop alcune modali restavano visibili anche
   senza classe .is-open.
   ========================================================= */

.activity-modal:not(.is-open),
.shoe-modal:not(.is-open),
.race-modal:not(.is-open),
.race-upload-modal:not(.is-open),
.activity-modal-backdrop:not(.is-open),
.shoe-modal-backdrop:not(.is-open),
.race-modal-backdrop:not(.is-open),
.race-upload-modal-backdrop:not(.is-open) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.activity-modal.is-open,
.shoe-modal.is-open,
.race-modal.is-open,
.race-upload-modal.is-open,
.activity-modal-backdrop.is-open,
.shoe-modal-backdrop.is-open,
.race-modal-backdrop.is-open,
.race-upload-modal-backdrop.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Mantiene chiuse le modali anche su desktop, non solo fuori schermo su mobile */
@media (min-width: 992px) {
  .activity-modal:not(.is-open),
  .shoe-modal:not(.is-open),
  .race-modal:not(.is-open),
  .race-upload-modal:not(.is-open) {
    transform: translate(50%, 30px) scale(.98) !important;
  }

  .activity-modal.is-open,
  .shoe-modal.is-open,
  .race-modal.is-open,
  .race-upload-modal.is-open {
    transform: translate(50%, 0) scale(1) !important;
  }
}

/* Mobile: mantiene l'animazione dal basso */
@media (max-width: 991.98px) {
  .activity-modal:not(.is-open),
  .shoe-modal:not(.is-open),
  .race-modal:not(.is-open),
  .race-upload-modal:not(.is-open) {
    transform: translateY(100%) !important;
  }

  .activity-modal.is-open,
  .shoe-modal.is-open,
  .race-modal.is-open,
  .race-upload-modal.is-open {
    transform: translateY(0) !important;
  }
}


/* =========================================================
   PACESOFT RUNNING BRAND FIX v22
   Applica logo/colori senza rompere layout, box, modali e allineamenti.
   Da applicare sopra il CSS completo v20.
   ========================================================= */

:root {
  --primary: #10245a;
  --primary-2: #1d4ed8;
  --accent-pink: #ff2c92;
  --accent-purple: #a54cf5;
  --accent-cyan: #15c6ff;
  --accent-orange: #ff9a30;
  --text: #0c1737;
  --muted: #5a6886;
}

body.app-body,
body.auth-body {
  background:
    radial-gradient(circle at top right, rgba(21,198,255,.12), transparent 24%),
    radial-gradient(circle at left top, rgba(255,44,146,.08), transparent 22%),
    linear-gradient(180deg, #fafbff 0%, #f4f7fd 44%, #eef2fb 100%);
}

/* Topbar */
.app-topbar-inner {
  background:
    linear-gradient(135deg, rgba(233, 30, 99, .00), rgba(33, 150, 243, .00)) !important;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 38px rgba(8,22,56,.24);
}

.app-brand {
  gap: .75rem;
}

.app-brand-logo {
  display: block;
  height: 46px;
  width: auto;
  max-width: min(52vw, 320px);
  object-fit: contain;
}

.app-brand-mark {
  background: transparent;
  border: 0;
}

.app-nav-chip:hover,
.app-nav-chip.is-active,
.app-ghost-btn {
  color: var(--primary) !important;
}

.app-bottom-link.is-active {
  color: var(--accent-pink);
  background: rgba(255,44,146,.08);
}

/* Drawer mobile */
.app-drawer {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,255,.98));
}

.app-drawer-brand {
  align-items: center;
  justify-content: flex-start;
  flex: 1;
}

.app-drawer-brand-icon {
  width: 58px;
  height: 58px;
  object-fit: contain;
  flex: 0 0 auto;
}

.app-drawer-hero {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(8,22,56,.08);
  box-shadow: var(--shadow-soft);
}

.app-drawer-hero-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Hero pagine */
.page-hero {
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.90)),
    url('../img/brand/pacesoft-running-hero-light.png') center right / cover no-repeat;
}

.eyebrow {
  color: var(--accent-pink);
}

.page-title {
  color: var(--primary);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple) 55%, var(--accent-cyan)) !important;
  border: 0 !important;
  box-shadow: 0 12px 24px rgba(165, 76, 245, .22);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #ff1d86, #8f42f0 55%, #0eb8ee) !important;
}

.btn-outline-primary {
  color: var(--primary);
  border-color: rgba(16, 36, 90, .16);
}

.btn-outline-primary:hover {
  background: rgba(16,36,90,.06);
  color: var(--primary);
  border-color: rgba(16,36,90,.22);
}

.badge-soft {
  background: rgba(255,44,146,.09);
  color: var(--accent-pink);
  border-color: rgba(255,44,146,.16);
}

/* Login / registrazione */
.auth-showcase.auth-showcase-brand {
  background:
    linear-gradient(180deg, rgba(8,22,56,.92), rgba(16,36,90,.92)),
    url('../img/brand/pacesoft-running-hero-dark.png') center/cover no-repeat;
  color: #fff;
}

.auth-showcase.auth-showcase-brand .page-title,
.auth-showcase.auth-showcase-brand .page-subtitle,
.auth-showcase.auth-showcase-brand .eyebrow {
  color: #fff;
}

.auth-brand-logo,
.auth-form-logo {
  width: min(100%, 330px);
  height: auto;
  display: block;
}

.auth-media-real {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 40px rgba(0,0,0,.22);
}

.auth-media-real img {
  display: block;
  width: 100%;
  height: auto;
}

.auth-badge {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
}

.auth-links a {
  color: var(--accent-pink);
  text-decoration: none;
  font-weight: 600;
}

.auth-links a:hover {
  text-decoration: underline;
}

@media (max-width: 991.98px) {
  .app-brand-logo {
    height: 38px;
    max-width: min(58vw, 230px);
  }

  .page-hero {
    background:
      linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
  }
}

@media (max-width: 767.98px) {
  .app-brand-logo {
    height: 34px;
    max-width: min(56vw, 190px);
  }

  .auth-brand-logo,
  .auth-form-logo {
    width: min(100%, 270px);
  }
}


/* =========================================================
   PACESOFT RUNNING v23 - Fix page hero
   Uniforma Dashboard, Calendario, Documenti e Profilo
   allo stile pulito di Attività / Scarpe / Gare.
   ========================================================= */

.page-hero.mb-3,
.page-hero {
  display: block !important;
  grid-template-columns: 1fr !important;
  min-height: auto !important;
  padding: 1.05rem 1.15rem !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,255,255,.91)),
    radial-gradient(circle at 92% 10%, rgba(21,198,255,.16), transparent 28%),
    radial-gradient(circle at 8% 0%, rgba(255,44,146,.10), transparent 30%) !important;
  overflow: hidden !important;
}

.page-hero-copy {
  max-width: 860px !important;
  position: relative !important;
  z-index: 2 !important;
}

.page-hero-visual,
.hero-visual-card,
.brand-hero-card,
.hero-brand-logo,
.hero-brand-image {
  display: none !important;
}

.page-hero .eyebrow {
  margin-bottom: .28rem !important;
  font-size: .76rem !important;
}

.page-hero .page-title {
  font-size: clamp(1.35rem, 1.05rem + 1vw, 2rem) !important;
  line-height: 1.08 !important;
}

.page-hero .page-subtitle {
  margin-top: .42rem !important;
  max-width: 70ch !important;
}

.page-hero-actions {
  margin-top: .8rem !important;
}

/* Evita che vecchie immagini/logo rimaste in qualche hero escano dal box */
.page-hero img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}


/* =========================================================
   PACESOFT RUNNING v24 - Page hero con logo sullo sfondo
   Ripristina il look più brandizzato, ma con logo controllato.
   ========================================================= */

.page-hero.mb-3,
.page-hero {
  position: relative !important;
  display: block !important;
  grid-template-columns: 1fr !important;
  min-height: auto !important;
  padding: 1.15rem 1.25rem !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 44%, rgba(255,255,255,.68) 100%),
    radial-gradient(circle at 92% 8%, rgba(21,198,255,.18), transparent 28%),
    radial-gradient(circle at 8% 0%, rgba(255,44,146,.10), transparent 30%),
    url('../img/brand/pacesoft-running-logo-horizontal.png') right 1.35rem center / min(430px, 42vw) auto no-repeat !important;
  border-radius: var(--radius-lg) !important;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.20) 58%, rgba(255,255,255,.58) 100%);
}

.page-hero-copy {
  max-width: 760px !important;
  position: relative !important;
  z-index: 2 !important;
}

.page-hero-visual,
.hero-visual-card,
.brand-hero-card,
.hero-brand-logo,
.hero-brand-image {
  display: none !important;
}

.page-hero .eyebrow {
  margin-bottom: .28rem !important;
  font-size: .76rem !important;
}

.page-hero .page-title {
  font-size: clamp(1.35rem, 1.05rem + 1vw, 2rem) !important;
  line-height: 1.08 !important;
}

.page-hero .page-subtitle {
  margin-top: .42rem !important;
  max-width: 64ch !important;
}

.page-hero-actions {
  margin-top: .8rem !important;
}

@media (max-width: 991.98px) {
  .page-hero.mb-3,
  .page-hero {
    background:
      linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.91)),
      radial-gradient(circle at 92% 8%, rgba(21,198,255,.14), transparent 28%),
      radial-gradient(circle at 8% 0%, rgba(255,44,146,.09), transparent 30%),
      url('../img/brand/pacesoft-running-logo-horizontal.png') right .85rem top .85rem / 210px auto no-repeat !important;
    padding-top: 1.25rem !important;
  }

  .page-hero::after {
    background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.72));
  }

  .page-hero-copy {
    max-width: 100% !important;
  }
}

@media (max-width: 575.98px) {
  .page-hero.mb-3,
  .page-hero {
    background:
      linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.93)),
      radial-gradient(circle at 92% 8%, rgba(21,198,255,.12), transparent 28%),
      radial-gradient(circle at 8% 0%, rgba(255,44,146,.08), transparent 30%),
      url('../img/brand/pacesoft-running-logo-horizontal.png') right .65rem top .7rem / 155px auto no-repeat !important;
    padding: 1.05rem .95rem !important;
  }

  .page-hero .page-subtitle {
    max-width: 100% !important;
  }
}


/* =========================================================
   RUNNING v27 - Calendario mobile friendly + popup
   ========================================================= */

.calendar-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:1rem;
}

.calendar-month-title {
  font-size:clamp(1.35rem,1.05rem + 1vw,2rem);
  font-weight:900;
  letter-spacing:-.045em;
  color:#0c1737;
}

.calendar-toolbar-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.45rem;
}

.calendar-nav-btn {
  min-width:42px;
  width:42px;
  padding-inline:0 !important;
  text-align:center;
  border-radius:14px !important;
}

.calendar-jump-form {
  min-width:150px;
}

.calendar-jump-form .form-select {
  min-height:38px;
  border-radius:14px;
  font-weight:700;
}

.calendar-add-mobile {
  min-width:42px;
  width:42px;
  padding-inline:0 !important;
  border-radius:14px !important;
}

.calendar-kpi-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.85rem;
  margin-bottom:1rem;
}

.calendar-kpi {
  border-radius:22px;
  padding:1rem;
  background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(255,255,255,.70));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 14px 34px rgba(15,23,42,.07);
  min-height:106px;
}

.calendar-kpi-label {
  color:var(--muted,#64748b);
  font-size:.78rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.calendar-kpi-value {
  margin-top:.45rem;
  font-size:clamp(1.35rem,1.1rem + 1vw,2rem);
  font-weight:900;
  letter-spacing:-.045em;
  line-height:1;
  background:linear-gradient(135deg,#0f172a,#1d4ed8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.calendar-kpi-note {
  margin-top:.38rem;
  color:var(--muted,#64748b);
  font-size:.84rem;
}

.calendar-layout {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr);
  gap:1rem;
  align-items:start;
}

.calendar-main-card,
.calendar-agenda-card {
  border-radius:24px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.86);
  box-shadow:0 14px 34px rgba(15,23,42,.07);
  overflow:hidden;
}

.calendar-weekdays {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(246,249,255,.88));
  border-bottom:1px solid rgba(15,23,42,.08);
}

.calendar-weekdays > div {
  padding:.8rem .55rem;
  text-align:center;
  color:#64748b;
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:0;
  background:rgba(15,23,42,.06);
  border-top:0;
}

.calendar-cell {
  min-height:132px;
  background:rgba(255,255,255,.88);
  padding:.55rem;
  border:0;
  box-shadow:none;
  overflow:hidden;
}

.calendar-cell.is-empty {
  background:rgba(248,250,252,.45);
}

.calendar-cell.is-weekend {
  background:rgba(248,250,252,.82);
}

.calendar-cell.is-today {
  background:
    linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.80)),
    radial-gradient(circle at top right,rgba(255,44,146,.14),transparent 32%);
  outline:2px solid rgba(255,44,146,.22);
  outline-offset:-2px;
}

.calendar-cell-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.35rem;
  margin-bottom:.45rem;
}

.calendar-day-number {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:30px;
  border-radius:999px;
  font-weight:900;
  color:#0c1737;
}

.calendar-cell.is-today .calendar-day-number {
  background:linear-gradient(135deg,var(--accent-pink,#ff2c92),var(--accent-cyan,#15c6ff));
  color:#fff;
}

.calendar-day-count {
  display:inline-flex;
  min-width:24px;
  height:24px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(16,36,90,.08);
  color:#10245a;
  font-size:.76rem;
  font-weight:900;
}

.calendar-events {
  display:grid;
  gap:.3rem;
}

.calendar-event {
  display:flex;
  align-items:center;
  gap:.35rem;
  min-width:0;
  padding:.35rem .45rem;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.06);
  background:rgba(255,255,255,.70);
  font-size:.76rem;
  font-weight:750;
}

.calendar-event.is-done {
  opacity:.55;
  text-decoration:line-through;
}

.calendar-event-dot {
  width:8px;
  height:8px;
  border-radius:999px;
  background:#64748b;
  flex:0 0 auto;
}

.calendar-event-title {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.calendar-more {
  color:#64748b;
  font-size:.76rem;
  font-weight:800;
  padding-left:.2rem;
}

.calendar-event.event-race,
.calendar-agenda-item.event-race { border-left-color:#ff2c92; }
.calendar-event.event-race .calendar-event-dot { background:#ff2c92; }

.calendar-event.event-deadline,
.calendar-agenda-item.event-deadline,
.calendar-event.event-medical,
.calendar-agenda-item.event-medical,
.calendar-event.event-card,
.calendar-agenda-item.event-card { border-left-color:#f59e0b; }
.calendar-event.event-deadline .calendar-event-dot,
.calendar-event.event-medical .calendar-event-dot,
.calendar-event.event-card .calendar-event-dot { background:#f59e0b; }

.calendar-event.event-training,
.calendar-agenda-item.event-training { border-left-color:#15c6ff; }
.calendar-event.event-training .calendar-event-dot { background:#15c6ff; }

.calendar-event.event-reminder,
.calendar-agenda-item.event-reminder { border-left-color:#a54cf5; }
.calendar-event.event-reminder .calendar-event-dot { background:#a54cf5; }

.calendar-agenda-card {
  position:sticky;
  top:96px;
}

.calendar-agenda-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
  padding:1rem;
  border-bottom:1px solid rgba(15,23,42,.08);
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(246,249,255,.88));
}

.calendar-agenda-list {
  display:grid;
  gap:.75rem;
  padding:1rem;
  max-height:690px;
  overflow:auto;
}

.calendar-agenda-item {
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:.75rem;
  border-left:4px solid #64748b;
  border-radius:18px;
  padding:.75rem;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.74));
  border-top:1px solid rgba(15,23,42,.06);
  border-right:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
}

.calendar-agenda-item.is-done {
  opacity:.58;
}

.calendar-agenda-date {
  border-radius:16px;
  background:rgba(16,36,90,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:58px;
}

.calendar-agenda-date strong {
  font-size:1.25rem;
  line-height:1;
}

.calendar-agenda-date span {
  color:#64748b;
  font-size:.74rem;
  font-weight:800;
  margin-top:.15rem;
  text-transform:uppercase;
}

.calendar-agenda-content {
  min-width:0;
}

.calendar-agenda-title {
  display:flex;
  align-items:flex-start;
  gap:.4rem;
  font-weight:850;
  letter-spacing:-.02em;
}

.calendar-agenda-title strong {
  min-width:0;
}

.calendar-agenda-meta {
  color:#64748b;
  font-size:.84rem;
  margin-top:.15rem;
}

.calendar-agenda-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:.55rem;
}

.calendar-empty-state {
  border-radius:20px;
  padding:1rem;
  text-align:center;
  color:#64748b;
  border:1px dashed rgba(16,36,90,.18);
  background:rgba(255,255,255,.72);
}

/* Modal calendario */
.calendar-modal-backdrop {
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  z-index:1120;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.2s ease;
  backdrop-filter:blur(4px);
}

.calendar-modal {
  position:fixed;
  inset:auto 0 0 0;
  max-height:92vh;
  overflow:auto;
  z-index:1130;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,255,.98));
  border-radius:28px 28px 0 0;
  box-shadow:0 -20px 50px rgba(15,23,42,.22);
  padding:1rem;
  transform:translateY(100%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:transform .22s ease, opacity .18s ease, visibility .18s ease;
}

.calendar-modal.is-open,
.calendar-modal-backdrop.is-open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.calendar-modal.is-open {
  transform:translateY(0);
}

.calendar-modal-dialog {
  max-width:880px;
  margin:0 auto;
}

.calendar-modal-header {
  position:sticky;
  top:-1rem;
  z-index:2;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.55rem 0 .9rem;
  border-bottom:1px solid rgba(15,23,42,.08);
  margin-bottom:1rem;
}

.calendar-modal-title {
  margin:0;
  font-weight:900;
  letter-spacing:-.035em;
}

.calendar-modal-close {
  border:0;
  width:42px;
  height:42px;
  border-radius:999px;
  background:rgba(15,23,42,.07);
  color:#0f172a;
  font-size:1.35rem;
  line-height:1;
}

@media (min-width:992px) {
  .calendar-modal {
    inset:6vh 50% auto auto;
    width:min(880px,calc(100vw - 2rem));
    border-radius:30px;
    transform:translate(50%,30px) scale(.98);
    max-height:88vh;
  }

  .calendar-modal.is-open {
    transform:translate(50%,0) scale(1);
  }
}

@media (max-width:1199.98px) {
  .calendar-layout {
    grid-template-columns:1fr;
  }

  .calendar-agenda-card {
    position:static;
  }
}

@media (max-width:991.98px) {
  .calendar-kpi-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .calendar-toolbar {
    align-items:flex-start;
  }

  .calendar-toolbar-actions {
    width:100%;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 42px 68px 42px;
    gap:.4rem;
  }

  .calendar-jump-form {
    min-width:0;
  }

  .calendar-today-btn {
    padding-inline:.45rem !important;
  }

  .calendar-main-card {
    overflow:auto;
  }

  .calendar-weekdays,
  .calendar-grid {
    min-width:760px;
  }
}

@media (max-width:575.98px) {
  .calendar-kpi-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.65rem;
  }

  .calendar-kpi {
    min-height:96px;
    padding:.85rem;
  }

  .calendar-kpi-note {
    display:none;
  }

  .calendar-month-title {
    font-size:1.45rem;
  }

  .calendar-weekdays,
  .calendar-grid {
    min-width:700px;
  }

  .calendar-cell {
    min-height:118px;
    padding:.45rem;
  }

  .calendar-agenda-item {
    grid-template-columns:50px minmax(0,1fr);
    padding:.65rem;
  }

  .calendar-modal {
    max-height:94vh;
    padding:.85rem;
  }
}


/* =========================================================
   RUNNING v28 - Calendario mobile: agenda prima e no scroll X
   ========================================================= */

@media (max-width: 991.98px) {
  .calendar-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  .calendar-agenda-card {
    order: -1 !important;
  }

  .calendar-main-card {
    order: 2 !important;
    overflow: visible !important;
  }

  .calendar-weekdays,
  .calendar-grid {
    min-width: 0 !important;
    width: 100% !important;
  }

  .calendar-weekdays {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .calendar-weekdays > div {
    padding: .55rem .15rem !important;
    font-size: .68rem !important;
    letter-spacing: .02em !important;
  }

  .calendar-cell {
    min-height: 88px !important;
    padding: .32rem !important;
  }

  .calendar-cell-head {
    margin-bottom: .25rem !important;
  }

  .calendar-day-number {
    min-width: 24px !important;
    height: 24px !important;
    font-size: .82rem !important;
  }

  .calendar-day-count {
    min-width: 20px !important;
    height: 20px !important;
    font-size: .68rem !important;
  }

  .calendar-events {
    gap: .2rem !important;
  }

  .calendar-event {
    padding: .22rem .28rem !important;
    border-radius: 9px !important;
    font-size: .66rem !important;
    line-height: 1.1 !important;
    gap: .22rem !important;
  }

  .calendar-event-dot {
    width: 6px !important;
    height: 6px !important;
  }

  .calendar-more {
    font-size: .64rem !important;
  }

  .calendar-agenda-list {
    max-height: none !important;
  }
}

@media (max-width: 575.98px) {
  .calendar-layout {
    gap: .85rem !important;
  }

  .calendar-toolbar-actions {
    grid-template-columns: 38px minmax(0,1fr) 38px 58px 38px !important;
  }

  .calendar-nav-btn,
  .calendar-add-mobile {
    min-width: 38px !important;
    width: 38px !important;
    min-height: 38px !important;
  }

  .calendar-today-btn {
    min-height: 38px !important;
    font-size: .78rem !important;
  }

  .calendar-jump-form .form-select {
    min-height: 38px !important;
    font-size: .82rem !important;
    padding-left: .55rem !important;
    padding-right: 1.8rem !important;
  }

  .calendar-weekdays > div {
    padding: .42rem .05rem !important;
    font-size: .61rem !important;
  }

  .calendar-cell {
    min-height: 72px !important;
    padding: .22rem !important;
  }

  .calendar-day-number {
    min-width: 21px !important;
    height: 21px !important;
    font-size: .75rem !important;
  }

  .calendar-day-count {
    min-width: 18px !important;
    height: 18px !important;
    font-size: .62rem !important;
  }

  .calendar-event {
    padding: .18rem .22rem !important;
    font-size: .58rem !important;
    border-radius: 8px !important;
  }

  .calendar-event-dot {
    display: none !important;
  }

  .calendar-event-title {
    max-width: 100%;
  }

  .calendar-more {
    font-size: .58rem !important;
    padding-left: 0 !important;
  }

  .calendar-agenda-header {
    padding: .85rem !important;
  }

  .calendar-agenda-list {
    padding: .85rem !important;
    gap: .65rem !important;
  }
}

@media (max-width: 390px) {
  .calendar-cell {
    min-height: 64px !important;
    padding: .16rem !important;
  }

  .calendar-event {
    font-size: .54rem !important;
    padding: .14rem .18rem !important;
  }

  .calendar-day-number {
    min-width: 19px !important;
    height: 19px !important;
    font-size: .7rem !important;
  }

  .calendar-day-count {
    display: none !important;
  }
}


/* =========================================================
   RUNNING v29 - Calendario larghezza stabile
   Evita che eventi lunghi allarghino la griglia.
   ========================================================= */

.calendar-main-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.calendar-weekdays,
.calendar-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.calendar-weekdays {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

.calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

.calendar-weekdays > div,
.calendar-cell,
.calendar-cell * {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.calendar-cell {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.calendar-events,
.calendar-event,
.calendar-event-title,
.calendar-more {
  min-width: 0 !important;
  max-width: 100% !important;
}

.calendar-event {
  width: 100% !important;
  overflow: hidden !important;
}

.calendar-event-title {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.calendar-more {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Anche l'agenda non deve mai spingere il layout */
.calendar-layout,
.calendar-agenda-card,
.calendar-agenda-list,
.calendar-agenda-item,
.calendar-agenda-content,
.calendar-agenda-title,
.calendar-agenda-title strong,
.calendar-agenda-meta {
  min-width: 0 !important;
  max-width: 100% !important;
}

.calendar-agenda-title strong,
.calendar-agenda-meta {
  overflow-wrap: anywhere !important;
}

/* Desktop/tablet: il calendario mantiene sempre la sua quota nella griglia */
@media (min-width: 1200px) {
  .calendar-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr) !important;
  }
}

/* Mobile: nessun contenuto deve generare scroll orizzontale */
@media (max-width: 991.98px) {
  .calendar-layout,
  .calendar-main-card,
  .calendar-weekdays,
  .calendar-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .calendar-weekdays,
  .calendar-grid {
    min-width: 0 !important;
  }
}

/* PACESOFT AUTH LAYOUT FIX v1 */

body.auth-body {
  margin: 0;
  min-height: 100vh;
}

.auth-shell {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2.5vw, 2rem);
}

.auth-card.auth-card-single {
  width: 100%;
  max-width: 560px;
  grid-template-columns: minmax(0, 1fr);
  margin-inline: auto;
}

.auth-card.auth-card-single.auth-card-register {
  max-width: 820px;
}

.auth-card.auth-card-single > .auth-form-card {
  width: 100%;
  min-width: 0;
}

.auth-form-logo {
  margin-inline: auto;
}

@media (min-width: 768px) {
  .auth-card-register label[for="password"],
  .auth-card-register label[for="password_confirm"] {
    display: block;
    min-height: 1.5rem;
    white-space: nowrap;
  }
}

/* END PACESOFT AUTH LAYOUT FIX v1 */

/* PACESOFT RUNNER PROFILE + ONBOARDING V2 */
.runner-profile-form .card-body {
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.runner-cardio-details {
  border-top: 1px solid rgba(13, 31, 72, .18);
  padding-top: 1rem;
}

.runner-cardio-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding: .85rem 1rem;
  border: 1px solid rgba(13, 31, 72, .14);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .72);
}

.runner-cardio-details > summary::-webkit-details-marker {
  display: none;
}

.runner-cardio-details > summary span:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.runner-cardio-details > summary small {
  color: var(--bs-secondary-color);
  font-weight: 400;
}

.runner-cardio-summary-hint::after {
  content: ' ↓';
}

.runner-cardio-details[open] .runner-cardio-summary-hint::after {
  content: ' ↑';
}

.runner-cardio-content {
  padding: 1rem .25rem 0;
}

.runner-cardio-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.runner-mode-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  min-width: 0;
  padding: .9rem;
  border: 1px solid rgba(13, 31, 72, .14);
  border-radius: .9rem;
  background: rgba(255, 255, 255, .74);
  cursor: pointer;
}

.runner-mode-option:has(input:checked) {
  border-color: rgba(62, 104, 255, .55);
  box-shadow: 0 0 0 3px rgba(62, 104, 255, .10);
}

.runner-mode-option input {
  margin-top: .2rem;
  flex: 0 0 auto;
}

.runner-mode-option span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.runner-mode-option small {
  color: var(--bs-secondary-color);
  font-weight: 400;
}

.runner-zone-box {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(13, 31, 72, .12);
  background: rgba(255, 255, 255, .58);
}

.runner-auto-zone-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
}

.runner-zone-chip {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .65rem .75rem;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(13, 31, 72, .12);
}

.runner-zone-chip small {
  color: var(--bs-secondary-color);
}

.runner-profile-actions,
.onboarding-footer-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}

.onboarding-essential-card,
.onboarding-recommended-card {
  overflow: hidden;
}

.onboarding-percent {
  font-size: 1.15rem;
  white-space: nowrap;
}

.onboarding-progress {
  height: .75rem;
  border-radius: 999px;
}

.onboarding-step-list {
  display: grid;
  gap: .75rem;
}

.onboarding-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(13, 31, 72, .12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .78);
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.onboarding-step:hover {
  transform: translateY(-1px);
  border-color: rgba(62, 104, 255, .35);
  box-shadow: 0 .35rem 1rem rgba(13, 31, 72, .08);
}

.onboarding-step.is-done {
  border-color: rgba(25, 135, 84, .28);
}

.onboarding-step-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .8rem;
  background: rgba(62, 104, 255, .10);
  font-size: 1.15rem;
}

.onboarding-step.is-done .onboarding-step-icon {
  background: rgba(25, 135, 84, .12);
}

.onboarding-step-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.onboarding-step-copy small {
  color: var(--bs-secondary-color);
}

.onboarding-step-status {
  color: var(--bs-secondary-color);
  font-size: .9rem;
  white-space: nowrap;
}

.onboarding-step:not(.is-done) .onboarding-step-status {
  color: #0d6efd;
  font-weight: 600;
}

.onboarding-footer-actions {
  padding: .25rem 0 1rem;
}

@media (max-width: 991.98px) {
  .runner-cardio-mode-grid {
    grid-template-columns: 1fr;
  }

  .runner-auto-zone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .runner-profile-actions {
    align-items: stretch;
  }

  .runner-profile-actions .btn {
    width: 100%;
  }

  .runner-auto-zone-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-step {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .onboarding-step-status {
    grid-column: 2;
  }

  .onboarding-footer-actions {
    align-items: stretch;
  }

  .onboarding-footer-actions form,
  .onboarding-footer-actions .btn {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .runner-zone-box .col-6 {
    width: 100%;
  }
}

/* END PACESOFT RUNNER PROFILE + ONBOARDING V2 */

/* PACESOFT MOBILE DRAWER SCROLL FIX v1 */

@media (max-width: 991.98px) {
  body.app-menu-open {
    overflow: hidden;
  }

  .app-drawer {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;

    padding-top: calc(1rem + env(safe-area-inset-top));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  .app-drawer-header,
  .app-drawer-hero,
  .app-drawer-footer {
    flex: 0 0 auto;
  }

  .app-drawer-hero-image {
    max-height: 180px;
    object-fit: cover;
  }

  .app-drawer-nav {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    align-content: start;
    padding-right: .25rem;
    padding-bottom: .5rem;

    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .app-drawer-footer {
    margin-top: 0;
    padding-top: .25rem;
  }
}

/* Nei telefoni bassi o in modalità orizzontale libera spazio al menu. */
@media (max-width: 991.98px) and (max-height: 700px) {
  .app-drawer-hero {
    display: none;
  }
}

/* END PACESOFT MOBILE DRAWER SCROLL FIX v1 */