/* VolleyManager — design system (Geist + tinted shadows + perpetual motion) */

/* === DESIGN TOKENS === */
:root {
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --ink: #18181B;
  --ink-muted: #52525B;
  --line: #E4E4E7;
  --line-soft: #F4F4F5;
  --accent: #F97316;
  --accent-soft: rgba(249, 115, 22, 0.08);
  --primary: #1E3A8A;
  --primary-soft: rgba(30, 58, 138, 0.08);
  --shadow-sm: 0 1px 2px rgba(15, 30, 77, 0.04), 0 1px 1px rgba(15, 30, 77, 0.02);
  --shadow-md: 0 4px 12px -4px rgba(15, 30, 77, 0.08), 0 2px 4px -2px rgba(15, 30, 77, 0.04);
  --shadow-lg: 0 18px 36px -12px rgba(15, 30, 77, 0.12), 0 6px 12px -4px rgba(15, 30, 77, 0.06);
}

/* === PERPETUAL MOTION KEYFRAMES === */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
@keyframes orbit-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* === STAGGERED REVEAL on page load === */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
main > * {
  animation: fade-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
main > *:nth-child(1) { animation-delay: 0ms; }
main > *:nth-child(2) { animation-delay: 60ms; }
main > *:nth-child(3) { animation-delay: 120ms; }
main > *:nth-child(4) { animation-delay: 180ms; }
main > *:nth-child(5) { animation-delay: 240ms; }
main > *:nth-child(6) { animation-delay: 300ms; }
main > *:nth-child(n+7) { animation-delay: 360ms; }

/* === BENTO SURFACE === */
.bento {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  position: relative;
  transition: border-color 200ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.bento:hover {
  border-color: rgba(30, 58, 138, 0.22);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Spotlight on hover (pointer-tracking via CSS only) */
.bento-spotlight {
  position: relative;
}
.bento-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(249, 115, 22, 0.08), transparent 50%);
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
}
.bento-spotlight:hover::before { opacity: 1; }

/* === HERO ASYMMETRIC === */
.hero-asym {
  position: relative;
  background: linear-gradient(135deg, #0F1F4D 0%, #15306E 35%, #1E3A8A 70%, #2A4499 100%);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
}
.hero-asym::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.22), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.06), transparent 50%);
  z-index: -1;
}
.hero-asym::after {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  z-index: -1;
}

/* Volleyball court SVG decoration target */
.court-deco {
  position: absolute;
  right: -40px; bottom: -80px;
  width: 380px; height: 280px;
  opacity: 0.18;
  pointer-events: none;
  transform: rotate(-12deg);
}

/* === STAT TILE (no card overuse) === */
.stat-tile {
  position: relative;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.stat-tile-num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-feature-settings: 'tnum', 'ss01';
  font-weight: 600;
  letter-spacing: -0.04em;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--ink);
}
.stat-tile-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

/* === LIVE BREATHING DOT === */
.dot-live {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10B981;
}
.dot-live::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #10B981;
  opacity: 0.4;
  animation: breathe 2s ease-in-out infinite;
}

/* === SHIMMER (loading + accent strip) === */
.shimmer-line {
  background: linear-gradient(90deg, transparent 0%, rgba(249, 115, 22, 0.4) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

/* === MARQUEE === */
.marquee {
  display: flex;
  width: max-content;
  animation: scroll-x 40s linear infinite;
}
.marquee:hover { animation-play-state: paused; }

/* === DIRECTIONAL HOVER BUTTON === */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 38px;
  padding: 0 1rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #18181B 0%, #27272A 100%);
  color: white;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid #27272A;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 1px 2px rgba(0,0,0,0.1);
  transition: transform 160ms, box-shadow 160ms, border-color 160ms;
  overflow: hidden;
}
.btn-primary:hover {
  border-color: rgba(249, 115, 22, 0.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 6px 16px -4px rgba(249, 115, 22, 0.25);
}
.btn-primary:active { transform: translateY(1px); }
.btn-accent {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 38px;
  padding: 0 1rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  color: white;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 4px 12px -2px rgba(249, 115, 22, 0.35);
  transition: transform 160ms, box-shadow 160ms;
}
.btn-accent:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 20px -2px rgba(249, 115, 22, 0.5);
}
.btn-accent:active { transform: translateY(1px); }

/* === DIVIDER NUMBERED (anti-card-overuse) === */
.divide-data > * {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.divide-data > *:first-child { border-top: none; padding-top: 0; }
.divide-data > *:last-child  { padding-bottom: 0; }

/* === HERO TYPING/SHIMMER ROTATING TEXT === */
.rotate-line {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1.4em;
  vertical-align: bottom;
}
.rotate-line span {
  display: block;
  animation: rotate-words 12s steps(1) infinite;
}
@keyframes rotate-words {
  0%, 22%   { transform: translateY(0); }
  25%, 47%  { transform: translateY(-1.4em); }
  50%, 72%  { transform: translateY(-2.8em); }
  75%, 97%  { transform: translateY(-4.2em); }
}

/* === MATCH RESULT CHIPS (kept) === */
.chip-w { background: linear-gradient(135deg, #10B981 0%, #059669 100%); color: white; }
.chip-l { background: linear-gradient(135deg, #F87171 0%, #DC2626 100%); color: white; }
.chip-d { background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%); color: white; }

/* ============================================================ */
/* AUTO-RESTYLE: applica nuovo design system al markup esistente */
/* ============================================================ */

/* Cards Tailwind esistenti → bento aesthetic */
.rounded-xl.border.border-gray-200.bg-white.shadow-sm,
.rounded-xl.border.border-gray-200.bg-white,
.rounded-2xl.border.border-gray-200.bg-white {
  border-color: var(--line) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color 200ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hover only on cards that contain a link/button */
.rounded-xl.border.border-gray-200.bg-white:has(a[href]):hover,
.rounded-xl.border.border-gray-200.bg-white.shadow-sm:has(a[href]):hover {
  border-color: rgba(30, 58, 138, 0.2) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

/* Page-hero → upgrade to gradient navy hero */
.page-hero {
  background: linear-gradient(135deg, #18181B 0%, #0F1F4D 60%, #15306E 100%) !important;
  border: 1px solid #27272A !important;
  border-radius: 18px !important;
  padding: 22px 24px !important;
  color: white !important;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  pointer-events: none;
}
.page-hero h1 {
  color: white !important;
  letter-spacing: -0.025em !important;
}
.page-hero p {
  color: rgba(255, 255, 255, 0.65) !important;
}
.page-hero .text-orange-600 { color: #FDBA74 !important; }
.page-hero-icon {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 4px 12px -2px rgba(249, 115, 22, 0.4) !important;
}
.page-hero a {
  color: white !important;
}
.page-hero .text-gray-500,
.page-hero .text-gray-700 {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Page-hero: fix CTA buttons inside */
.page-hero .bg-white {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: white !important;
}
.page-hero .bg-white:hover {
  background: rgba(255,255,255,0.18) !important;
}
.page-hero .bg-navy-700 {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%) !important;
  border: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 4px 12px -2px rgba(249, 115, 22, 0.35) !important;
}

/* Tables: upgrade to design system */
table {
  font-feature-settings: 'tnum';
}
table thead th {
  background: #FAFAF9 !important;
  border-bottom: 1px solid var(--line) !important;
  color: #71717A !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
}
table tbody tr {
  transition: background-color 140ms ease;
}
table tbody tr.even\:bg-gray-50:nth-child(even) {
  background: #FAFAFA !important;
}
table tbody tr.hover\:bg-gray-100:hover,
table tbody tr.hover\:bg-gray-50:hover {
  background: rgba(249, 115, 22, 0.04) !important;
}

/* Inputs: refined focus */
input, textarea, select {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif !important;
  border-radius: 10px !important;
  transition: border-color 160ms, box-shadow 160ms;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--ink) !important;
  box-shadow: 0 0 0 4px rgba(24, 24, 27, 0.08) !important;
}

/* Primary buttons in body (non-hero) → ink-style */
.bg-navy-700:not(.no-restyle):not(.page-hero *) {
  background: linear-gradient(135deg, #18181B 0%, #27272A 100%) !important;
  border-color: #27272A !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 1px 2px rgba(0,0,0,0.1) !important;
  transition: all 160ms ease !important;
}
.bg-navy-700:not(.no-restyle):not(.page-hero *):hover,
.hover\:bg-navy-800:not(.no-restyle):not(.page-hero *):hover {
  background: linear-gradient(135deg, #27272A 0%, #3F3F46 100%) !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 6px 16px -4px rgba(249, 115, 22, 0.2) !important;
}

/* Sidebar refinement */
aside.bg-white {
  background: #FAFAFA !important;
  border-color: var(--line) !important;
}
aside.bg-white nav a {
  border-radius: 10px !important;
  font-weight: 500 !important;
  transition: all 140ms ease;
}
aside.bg-white nav a.bg-navy-50.text-navy-700 {
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.1) 0%, rgba(249, 115, 22, 0.04) 100%) !important;
  color: #18181B !important;
  font-weight: 600 !important;
  position: relative;
}
aside.bg-white nav a.bg-navy-50.text-navy-700::before {
  content: '';
  position: absolute;
  left: -3px; top: 8px; bottom: 8px;
  width: 3px;
  background: linear-gradient(180deg, #F97316 0%, #EA580C 100%);
  border-radius: 0 3px 3px 0;
}
aside.bg-white nav a i[data-lucide] {
  color: #71717A !important;
}
aside.bg-white nav a.bg-navy-50.text-navy-700 i[data-lucide] {
  color: #F97316 !important;
}

/* Topbar — refined */
header.h-16.bg-white {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--line) !important;
}
header .text-gray-900.font-medium {
  color: #18181B !important;
  letter-spacing: -0.01em !important;
}

/* Numeric values everywhere — Geist Mono */
.tabular-nums, [class*="tabular-nums"] {
  font-family: 'Geist Mono', ui-monospace, monospace !important;
  font-feature-settings: 'tnum', 'ss01' !important;
}

/* H1/H2 — tighter tracking with Geist */
h1, h2, h3 {
  letter-spacing: -0.025em !important;
  font-feature-settings: 'cv11', 'ss01' !important;
}

/* Search bar — sharper */
#globalSearch {
  background: rgba(244, 244, 245, 0.6) !important;
  border-color: transparent !important;
}
#globalSearch:focus {
  background: white !important;
  border-color: var(--ink) !important;
}

/* Status badges — softer, more refined */
.bg-emerald-100.text-emerald-800,
.bg-red-100.text-red-800,
.bg-amber-100.text-amber-800,
.bg-navy-50.text-navy-700,
.bg-gray-100.text-gray-700 {
  letter-spacing: 0.04em !important;
}

/* KPI/stat numbers — lighter weight + tracking */
.text-2xl.font-bold.tabular-nums,
.text-3xl.font-bold.tabular-nums,
.text-xl.font-bold.tabular-nums {
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
}

/* Color migration: gray → zinc tone */
.text-gray-900 { color: #18181B !important; }
.text-gray-800 { color: #27272A !important; }
.text-gray-700 { color: #3F3F46 !important; }
.text-gray-600 { color: #52525B !important; }
.text-gray-500 { color: #71717A !important; }
.text-gray-400 { color: #A1A1AA !important; }
.text-gray-300 { color: #D4D4D8 !important; }
.bg-gray-50 { background-color: #FAFAFA !important; }
.bg-gray-100 { background-color: #F4F4F5 !important; }
.border-gray-200 { border-color: #E4E4E7 !important; }
.border-gray-100 { border-color: #F4F4F5 !important; }
.divide-gray-100 > * + * { border-color: #F4F4F5 !important; }
.divide-gray-200 > * + * { border-color: #E4E4E7 !important; }


/* Hero gradient with volleyball net pattern */
.hero-gradient {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 25%, transparent 25%) 0 0,
    linear-gradient(225deg, rgba(255,255,255,0.04) 25%, transparent 25%) 0 0,
    linear-gradient(315deg, rgba(255,255,255,0.04) 25%, transparent 25%) 0 0,
    linear-gradient(45deg,  rgba(255,255,255,0.04) 25%, transparent 25%) 0 0,
    linear-gradient(135deg, #1E3A8A 0%, #172E6E 50%, #0F1E4D 100%);
  background-size: 18px 18px, 18px 18px, 18px 18px, 18px 18px, 100% 100%;
  position: relative;
  overflow: hidden;
}
.hero-gradient::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.hero-gradient::after {
  content: '';
  position: absolute;
  bottom: -60px; left: 30%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Card hover lift */
.card-hover {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(15, 30, 77, 0.12), 0 4px 8px -4px rgba(0, 0, 0, 0.04);
  border-color: rgba(30, 58, 138, 0.25);
}

/* Stat card colored accents */
.stat-accent {
  position: relative;
  overflow: hidden;
}
.stat-accent::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 140px; height: 140px;
  border-radius: 50%;
  transform: translate(40%, -40%);
  opacity: 0.08;
  pointer-events: none;
  background: currentColor;
}

/* Team color stripe */
.team-stripe {
  position: relative;
}
.team-stripe::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: var(--team-color, #9CA3AF);
  border-radius: 4px 0 0 4px;
}

/* Subtle pulse for live indicators */
@keyframes softPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.live-dot { animation: softPulse 2s ease-in-out infinite; }

/* Match result chips */
.chip-w { background: linear-gradient(135deg, #10B981 0%, #059669 100%); color: white; }
.chip-l { background: linear-gradient(135deg, #F87171 0%, #DC2626 100%); color: white; }
.chip-d { background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%); color: white; }

/* ============================================================ */
/* GLOBAL POLISH — applies automatically to existing markup     */
/* ============================================================ */

/* Subtle fade-in on page load */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main > * { animation: fadeUp 240ms ease-out both; }

/* Cards: smooth hover lift on all bordered white containers */
.rounded-xl.bg-white.shadow-sm,
.rounded-2xl.bg-white.shadow-sm {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.rounded-xl.bg-white.shadow-sm:has(a[href]):hover,
.rounded-xl.bg-white.shadow-sm:has(button):hover {
  border-color: rgba(30, 58, 138, 0.18);
}

/* Primary navy buttons: subtle gradient + shadow */
.bg-navy-700:not(.no-grad) {
  background: linear-gradient(135deg, #1E3A8A 0%, #15306E 100%);
  box-shadow: 0 1px 0 rgba(15, 30, 77, 0.12), 0 2px 6px -2px rgba(15, 30, 77, 0.18);
  transition: all 160ms ease;
}
.bg-navy-700:not(.no-grad):hover, .hover\:bg-navy-800:hover {
  background: linear-gradient(135deg, #15306E 0%, #0F1E4D 100%);
  box-shadow: 0 1px 0 rgba(15, 30, 77, 0.16), 0 4px 10px -2px rgba(15, 30, 77, 0.28);
}

/* Orange accent buttons */
.bg-orange-500:not(.no-grad) {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  box-shadow: 0 1px 0 rgba(194, 65, 12, 0.18), 0 2px 6px -2px rgba(249, 115, 22, 0.30);
  transition: all 160ms ease;
}
.bg-orange-500:not(.no-grad):hover, .hover\:bg-orange-600:hover {
  background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%);
}

/* Secondary buttons: smoother on hover */
.bg-white.border-gray-200, .bg-white.hover\:bg-gray-50 {
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

/* Inputs: stronger focus glow */
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: #1E3A8A !important;
  box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.10) !important;
}

/* Tables: header row visual lift */
table thead.bg-gray-50 th {
  background: linear-gradient(180deg, #F9FAFB 0%, #F3F4F6 100%);
  border-bottom: 1px solid #E5E7EB;
}

/* Status badges: small inner shadow for depth */
[class*="bg-emerald-100"][class*="text-emerald-800"],
[class*="bg-red-100"][class*="text-red-800"],
[class*="bg-amber-100"][class*="text-amber-800"],
[class*="bg-navy-50"][class*="text-navy-700"] {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Empty states: larger and warmer icons */
[data-lucide].w-10.h-10.mx-auto.text-gray-300 {
  width: 56px !important; height: 56px !important;
  color: #94A3B8 !important;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.04));
}

/* Sidebar nav: active state more prominent */
aside nav a.bg-navy-50.text-navy-700 {
  background: linear-gradient(90deg, rgba(30, 58, 138, 0.08) 0%, rgba(30, 58, 138, 0.04) 100%);
  position: relative;
}
aside nav a.bg-navy-50.text-navy-700::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: linear-gradient(180deg, #F97316 0%, #1E3A8A 100%);
  border-radius: 0 3px 3px 0;
}

/* Page heading typography refinement */
h1.text-2xl, h1.text-xl {
  letter-spacing: -0.02em;
}

/* ====== Page-hero (mini, applicabile a qualsiasi pagina) ====== */
.page-hero {
  background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 60%, rgba(249, 115, 22, 0.06) 100%);
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(30, 58, 138, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1E3A8A 0%, #15306E 100%);
  color: white;
  box-shadow: 0 4px 10px -2px rgba(30, 58, 138, 0.35);
}

/* Avatar circle: sport-themed */
.avatar-grad {
  background: linear-gradient(135deg, #1E3A8A 0%, #2A4DA0 100%) !important;
  box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.15);
}

/* Smooth color transitions on links */
a { transition: color 140ms ease; }

/* Section headers: subtle accent */
h2.text-base.font-semibold {
  position: relative;
}

/* Tabs nav: sportier active state */
nav[aria-label="Tabs"] a.border-navy-700 {
  border-image: linear-gradient(90deg, #1E3A8A 0%, #F97316 100%) 1;
  border-bottom-width: 2px;
}

/* Lucide icons inside colored badges: better alignment */
i[data-lucide].w-3 { display: inline-block; vertical-align: -0.1em; }

/* Scrollbar — sportier */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #E5E7EB 0%, #D1D5DB 100%);
}

/* Trofeo / volleyball decorative drop for trophy/match-related text */
.trophy-glow {
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.4));
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  main > * { animation: none; }
  .card-hover, .rounded-xl.bg-white.shadow-sm { transition: none !important; }
}


@media print {
  aside, header.no-print, .no-print, button, nav { display: none !important; }
  main, body, html { padding: 0 !important; margin: 0 !important; background: white !important; }
  body { color: black !important; font-size: 11pt; }
  a { color: black !important; text-decoration: none !important; }
  .print-clean,
  .rounded-xl, .rounded-lg, .border, .shadow-sm {
    border: none !important;
    box-shadow: none !important;
    background: white !important;
    padding: 0 !important;
    margin-bottom: 0.5cm !important;
    max-width: 100% !important;
  }
  .break-inside-avoid { break-inside: avoid; page-break-inside: avoid; }
  h1 { font-size: 18pt !important; }
  h2 { font-size: 13pt !important; }
  h3 { font-size: 11pt !important; }
  @page { margin: 1.5cm; }
}