:root {
  --bg: #0d0d0f;
  --surface: #17171b;
  --surface-2: #202027;
  --line: #32323b;
  --text: #f7f7f8;
  --muted: #aaaab4;
  --accent: #d71920;
  --accent-2: #ff454c;
  --success: #3dbb77;
  --warning: #f0ad43;
  --header-height: 64px;
  --bottom-height: 70px;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 90% -10%, #3a1115 0, transparent 32%), var(--bg); color: var(--text); }
button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
[hidden] { display: none !important; }

.offline-banner { position: fixed; z-index: 90; top: 0; left: 0; right: 0; padding: 8px 16px; background: var(--warning); color: #17120a; text-align: center; font-size: .82rem; font-weight: 700; }
.offline-banner:not([hidden]) + .app-header { top: 34px; }

.app-header { position: fixed; z-index: 50; inset: 0 0 auto 0; height: var(--header-height); display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left)); background: rgba(13,13,15,.9); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand strong, .drawer-header strong { display: block; font-size: .9rem; letter-spacing: .08em; white-space: nowrap; }
.brand small, .drawer-header small { display: block; margin-top: 2px; font-size: .62rem; color: var(--muted); letter-spacing: .16em; white-space: nowrap; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; border: 2px solid var(--text); border-radius: 50%; font-size: .72rem; font-weight: 900; letter-spacing: -.05em; box-shadow: inset 0 0 0 4px var(--accent); }
.brand-mark.large { width: 48px; height: 48px; font-size: .9rem; }
.icon-button { width: 42px; height: 42px; display: grid; place-content: center; gap: 4px; background: transparent; border: 0; cursor: pointer; }
.icon-button span { width: 22px; height: 2px; background: var(--text); border-radius: 10px; }
.install-button { min-height: 38px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); font-weight: 800; cursor: pointer; }

.drawer { position: fixed; z-index: 80; top: 0; bottom: 0; left: 0; width: min(84vw, 340px); padding: max(24px, env(safe-area-inset-top)) 18px 24px; background: #111114; transform: translateX(-105%); transition: transform .24s ease; box-shadow: 20px 0 60px rgba(0,0,0,.45); }
.drawer.open { transform: translateX(0); }
.drawer-header { display: flex; align-items: center; gap: 14px; padding: 8px 6px 22px; border-bottom: 1px solid var(--line); }
.drawer-nav { display: grid; gap: 5px; margin-top: 18px; }
.drawer-nav a { padding: 14px; border-radius: 12px; color: var(--muted); font-weight: 700; }
.drawer-nav a.active, .drawer-nav a:hover { color: var(--text); background: var(--surface-2); }
.drawer-backdrop { position: fixed; z-index: 70; inset: 0; background: rgba(0,0,0,.56); }

main { width: min(1100px, 100%); min-height: 100vh; margin: 0 auto; padding: calc(var(--header-height) + 20px) 16px calc(var(--bottom-height) + 28px); }
.page { animation: fade-in .22s ease both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(5px); } }
.page-header { margin: 4px 0 20px; }
.page-header h1 { margin: 0; font-size: clamp(1.7rem, 6vw, 2.8rem); line-height: 1; letter-spacing: -.04em; }
.page-header p { margin: 9px 0 0; color: var(--muted); line-height: 1.5; }
.eyebrow { display: block; margin-bottom: 9px; color: var(--accent-2); font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }

.hero { position: relative; overflow: hidden; min-height: 330px; display: flex; align-items: flex-end; padding: 28px 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 26px; background: linear-gradient(135deg, rgba(215,25,32,.92), rgba(30,10,13,.92) 55%, #111114); box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.hero::after { content: "RS"; position: absolute; right: -4%; top: -22%; font-size: 18rem; line-height: 1; font-weight: 1000; color: rgba(255,255,255,.055); transform: rotate(-8deg); }
.hero-content { position: relative; z-index: 1; max-width: 650px; }
.hero h1 { margin: 0 0 12px; max-width: 700px; font-size: clamp(2.5rem, 10vw, 5.8rem); line-height: .86; letter-spacing: -.065em; text-transform: uppercase; }
.hero p { max-width: 560px; margin: 0 0 20px; color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.5; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 17px; border: 1px solid transparent; border-radius: 12px; background: var(--accent); font-weight: 850; cursor: pointer; }
.button.secondary { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }
.button.ghost { background: transparent; border-color: var(--line); color: var(--muted); }

.section { margin-top: 28px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.section-heading h2 { margin: 0; font-size: 1.25rem; }
.section-heading a { color: var(--accent-2); font-size: .84rem; font-weight: 800; }
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.025), transparent), var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.card-body { padding: 17px; }
.card h3 { margin: 0 0 7px; }
.muted { color: var(--muted); }
.meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .82rem; }
.meta span { display: inline-flex; align-items: center; gap: 5px; }

.event-card { overflow: hidden; }
.event-accent { height: 7px; background: linear-gradient(90deg, var(--accent), transparent); }
.event-card .date-block { min-width: 62px; padding: 11px 10px; border-radius: 13px; background: var(--surface-2); text-align: center; }
.event-card .date-block strong { display: block; font-size: 1.55rem; line-height: 1; }
.event-card .date-block small { color: var(--accent-2); font-weight: 800; text-transform: uppercase; }
.event-card-row { display: flex; gap: 14px; align-items: flex-start; }

.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick-card { min-height: 112px; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.quick-card span { color: var(--accent-2); font-size: 1.6rem; }
.quick-card strong { line-height: 1.1; }
.quick-card small { color: var(--muted); }

.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.tab { min-height: 43px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-weight: 850; cursor: pointer; }
.tab.active { background: var(--accent); color: #fff; }
.controls { display: flex; gap: 10px; margin-bottom: 13px; }
.search-input, .select-input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--text); outline: none; }
.search-input:focus, .select-input:focus { border-color: var(--accent); }
.ranking-list { display: grid; gap: 8px; }
.ranking-row { display: grid; grid-template-columns: 46px 46px 1fr auto; align-items: center; gap: 10px; min-height: 70px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); cursor: pointer; }
.ranking-row:hover { border-color: #555560; }
.rank-number { font-size: 1.3rem; font-weight: 950; text-align: center; }
.ranking-row:nth-child(1) .rank-number { color: #ffd75e; }
.ranking-row:nth-child(2) .rank-number { color: #d8dde4; }
.ranking-row:nth-child(3) .rank-number { color: #c78a5d; }
.avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #3f3f48, #202027); font-weight: 900; border: 1px solid #555560; }
.athlete-visual { position: relative; overflow: hidden; }
.athlete-visual > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.athlete-visual > .athlete-initials { width: 100%; height: 100%; display: grid; place-items: center; }
.athlete-visual > .athlete-initials[hidden] { display: none; }
.row-title { min-width: 0; }
.row-title strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-title small { display: block; margin-top: 4px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .72rem; font-weight: 800; }
.badge.red { background: rgba(215,25,32,.16); color: #ff7479; }
.badge.green { background: rgba(61,187,119,.14); color: #6ce0a1; }
.badge.yellow { background: rgba(240,173,67,.14); color: #f5c573; }

.athlete-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.athlete-card { overflow: hidden; cursor: pointer; }
.athlete-photo { aspect-ratio: 1 / .92; display: grid; place-items: center; background: radial-gradient(circle at 50% 25%, #4e4e58, #1b1b20 62%); color: rgba(255,255,255,.85); font-size: 2.2rem; font-weight: 950; }
.athlete-card .card-body { padding: 13px; }
.athlete-card h3 { margin-bottom: 4px; font-size: .96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.athlete-card p { margin: 0; color: var(--muted); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.challenge-card { padding: 16px; }
.challenge-versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 14px 0; text-align: center; }
.challenge-person .avatar { margin: 0 auto 7px; }
.challenge-person strong { display: block; font-size: .85rem; }
.versus { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); font-size: .72rem; font-weight: 950; }

.timeline { display: grid; gap: 0; }
.timeline-item { position: relative; margin-left: 7px; padding: 0 0 20px 24px; border-left: 1px solid var(--line); }
.timeline-item::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(215,25,32,.14); }
.timeline-item p { margin: 4px 0 0; color: var(--muted); line-height: 1.45; }
.timeline-item time { color: var(--accent-2); font-size: .72rem; font-weight: 800; }

.rules-list { counter-reset: rules; display: grid; gap: 10px; padding: 0; list-style: none; }
.rules-list li { counter-increment: rules; display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); line-height: 1.5; }
.rules-list li::before { content: counter(rules); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); font-weight: 900; }

.empty-state { padding: 40px 20px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; }
.admin-card { padding: 20px; }
.admin-card code { display: block; overflow-x: auto; padding: 12px; border-radius: 10px; background: #0a0a0b; color: #e5e5e7; }

.bottom-nav { position: fixed; z-index: 45; bottom: 0; left: 0; right: 0; height: calc(var(--bottom-height) + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 6px env(safe-area-inset-bottom); background: rgba(17,17,20,.94); border-top: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(14px); }
.bottom-nav a { display: grid; place-content: center; gap: 3px; color: var(--muted); text-align: center; }
.bottom-nav a span { font-size: 1.2rem; line-height: 1; }
.bottom-nav a small { font-size: .64rem; font-weight: 750; }
.bottom-nav a.active { color: var(--text); }
.bottom-nav a.active span { color: var(--accent-2); }

.modal { width: min(92vw, 520px); max-height: 86vh; overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--text); box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.modal::backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(4px); }
.modal-close { position: sticky; z-index: 2; top: 0; float: right; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--surface-2); font-size: 1.5rem; cursor: pointer; }
.modal h2 { margin: 4px 42px 16px 0; }
.install-steps { display: grid; gap: 12px; padding-left: 20px; color: var(--muted); line-height: 1.5; }
.profile-hero { padding: 22px; margin: -24px -24px 20px; background: linear-gradient(135deg, #3a1014, #16161a 65%); text-align: center; }
.profile-hero .avatar { width: 86px; height: 86px; margin: 0 auto 13px; font-size: 1.5rem; }
.profile-hero h2 { margin: 0 0 5px; }
.profile-hero p { margin: 0; color: var(--muted); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.stat { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
.stat small { display: block; color: var(--muted); }
.stat strong { display: block; margin-top: 4px; font-size: 1.05rem; }

@media (min-width: 720px) {
  :root { --bottom-height: 0px; }
  .app-header { grid-template-columns: 44px 1fr auto; padding-left: 24px; padding-right: 24px; }
  .bottom-nav { display: none; }
  main { padding: calc(var(--header-height) + 30px) 28px 50px; }
  .grid.two { grid-template-columns: repeat(2, 1fr); }
  .grid.three { grid-template-columns: repeat(3, 1fr); }
  .quick-grid { grid-template-columns: repeat(4, 1fr); }
  .athlete-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: 45px; min-height: 430px; }
}
@media (min-width: 1000px) {
  .athlete-grid { grid-template-columns: repeat(4, 1fr); }
}

/* V2 - logo ufficiale, categorie e motore sfide */
.eyebrow.inline { display: inline-flex; margin: 0; }
.official-hero { min-height: 0; display: grid; padding: 0; align-items: stretch; background: #050506; }
.official-hero::after { display: none; }
.hero-logo-panel { position: relative; min-height: 180px; display: grid; place-items: center; padding: 10px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(215,25,32,.14), transparent 55%), #030304; }
.hero-logo-panel::after { content: ""; position: absolute; inset: auto 0 0; height: 54px; background: linear-gradient(transparent, #08080a); pointer-events: none; }
.hero-logo { position: relative; z-index: 1; display: block; width: 100%; max-height: 230px; object-fit: contain; }
.official-hero .hero-content { width: 100%; max-width: none; padding: 22px; background: linear-gradient(135deg, rgba(77,10,14,.95), rgba(17,17,20,.98) 64%); }
.official-hero h1 { max-width: 620px; font-size: clamp(2.1rem, 9vw, 4.9rem); }

.ranking-mode-tabs { margin-top: -5px; }
.ranking-controls { flex-direction: column; }
.ranking-summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 4px 0 13px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.ranking-summary strong { font-size: .9rem; }
.ranking-summary span { color: var(--muted); font-size: .76rem; text-align: right; }
.ranking-badges { display: grid; justify-items: end; gap: 4px; }
.athlete-category { display: inline-flex; margin-top: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(215,25,32,.13); color: #ff777c; font-size: .68rem; font-weight: 850; }
.athlete-controls { flex-direction: column; }

.rule-tester-card, .test-report-card, .official-document-card { padding: 20px; }
.rule-tester-card .section-heading { align-items: flex-start; }
.rule-tester-card .section-heading h2 { margin: 0; }
.challenge-form { display: grid; grid-template-columns: 1fr; gap: 12px; }
.challenge-form label:not(.check-label) { display: grid; gap: 7px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.check-label { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); color: var(--text); font-size: .82rem; cursor: pointer; }
.check-label input { width: 18px; height: 18px; accent-color: var(--accent); }
.form-submit { width: 100%; }
.validation-result { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); }
.validation-result h4 { margin: 14px 0 6px; }
.validation-result ul { display: grid; gap: 7px; margin: 8px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.4; }
.validation-title { display: flex; align-items: center; gap: 10px; }
.validation-title > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-weight: 950; }
.validation-ok { border-color: rgba(61,187,119,.45); background: rgba(61,187,119,.07); }
.validation-ok .validation-title > span { background: var(--success); color: #06140c; }
.validation-error { border-color: rgba(215,25,32,.52); background: rgba(215,25,32,.07); }
.validation-error .validation-title > span { background: var(--accent); color: #fff; }
.validation-result details { margin-top: 14px; }
.validation-result summary, .test-details summary { color: var(--text); font-weight: 800; cursor: pointer; }

.test-report-card { display: grid; gap: 17px; }
.test-score { min-width: 120px; display: grid; place-content: center; padding: 18px; border-radius: 15px; background: rgba(61,187,119,.11); text-align: center; }
.test-score strong { color: #76e1a8; font-size: 2rem; line-height: 1; }
.test-score span { margin-top: 6px; color: var(--muted); font-size: .72rem; }
.test-details { grid-column: 1 / -1; }
.test-details ul { display: grid; gap: 8px; padding: 0; list-style: none; }
.test-details li { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); line-height: 1.35; }
.test-details li span { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: .75rem; font-weight: 900; }
.test-details li.passed span { background: rgba(61,187,119,.16); color: #75dfa6; }
.test-details li.failed span { background: rgba(215,25,32,.16); color: #ff777c; }

.official-document-card { display: grid; gap: 17px; align-items: center; }
.official-document-card h3 { margin-bottom: 7px; }
.weight-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.weight-chips span { min-height: 35px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid rgba(215,25,32,.28); border-radius: 999px; background: rgba(215,25,32,.09); color: #ff8387; font-size: .82rem; font-weight: 850; }

@media (min-width: 720px) {
  .official-hero { min-height: 480px; grid-template-rows: minmax(250px, 1.25fr) auto; padding: 0; }
  .hero-logo-panel { min-height: 270px; padding: 20px 38px 0; }
  .hero-logo { max-height: 310px; }
  .official-hero .hero-content { padding: 32px 45px 40px; }
  .ranking-controls, .athlete-controls { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(200px, .7fr); }
  .challenge-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-submit { grid-column: 1 / -1; }
  .test-report-card { grid-template-columns: 150px 1fr; align-items: center; }
  .official-document-card { grid-template-columns: 1fr auto; }
}

/* V3 - account, ruoli, chat e workflow amministrativo */
.header-actions { display: flex; align-items: center; gap: 7px; }
.account-button { max-width: 86px; height: 36px; padding: 0 11px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text); font-weight: 850; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.account-button.logged-in { border-color: rgba(61,187,119,.35); background: rgba(61,187,119,.10); color: #89e6b3; }
.install-button { white-space: nowrap; }
.app-toast { position: fixed; z-index: 100; left: 50%; bottom: calc(var(--bottom-height) + env(safe-area-inset-bottom) + 18px); width: min(90vw, 520px); transform: translateX(-50%); padding: 13px 16px; border: 1px solid rgba(61,187,119,.45); border-radius: 13px; background: rgba(20,41,29,.98); color: #c9f6dc; box-shadow: 0 14px 50px rgba(0,0,0,.45); font-weight: 750; text-align: center; }
.app-toast.error { border-color: rgba(215,25,32,.55); background: rgba(55,17,20,.98); color: #ffd2d4; }
.button.compact { min-height: 38px; padding: 0 13px; font-size: .76rem; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.full-field { grid-column: 1 / -1; }
.form-note { margin: 12px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.form-note code { color: var(--text); }
textarea { width: 100%; padding: 12px 13px; resize: vertical; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); color: var(--text); font: inherit; }
textarea:focus { outline: 2px solid rgba(215,25,32,.38); border-color: var(--accent); }

.staff-alert, .account-cta, .staff-shortcut, .result-review-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; margin-top: 18px; }
.staff-alert strong, .account-cta strong { display: block; margin-top: 4px; }
.account-cta p { margin: 5px 0 0; color: var(--muted); }
.portal-panel { padding: 20px; }
.portal-panel h2 { margin: 5px 0 13px; }
.portal-panel .section-heading h2 { margin: 4px 0 0; }
.challenge-link { display: block; color: inherit; transition: transform .18s ease, border-color .18s ease; }
.challenge-link:hover { transform: translateY(-2px); border-color: rgba(215,25,32,.42); }
.challenge-detail-card { padding: 20px; }
.large-versus { margin: 5px 0 22px; }
.large-versus .avatar { width: 64px; height: 64px; font-size: 1.05rem; }
.challenge-person small { display: block; margin-top: 5px; color: var(--muted); font-size: .7rem; }
.challenge-facts { display: grid; grid-template-columns: 1fr; gap: 9px; }
.challenge-facts > div { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
.challenge-facts small { display: block; color: var(--muted); }
.challenge-facts strong { display: block; margin-top: 5px; font-size: .88rem; }
.decision-panel, .info-panel { padding: 20px; margin-top: 15px; }
.decision-panel h2 { margin-top: 0; }
.decision-panel p, .info-panel { color: var(--muted); line-height: 1.5; }
.back-link { display: inline-flex; margin-bottom: 17px; color: var(--muted); font-weight: 800; }
.back-link:hover { color: var(--text); }

.chat-layout { display: grid; grid-template-columns: 1fr; gap: 15px; }
.chat-card, .organization-card { padding: 18px; min-width: 0; }
.chat-card h2, .organization-card h2 { margin: 4px 0 14px; }
.chat-messages { max-height: 440px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 4px 2px 12px; }
.chat-message { align-self: flex-start; width: min(88%, 460px); padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; background: var(--surface-2); }
.chat-message.mine { align-self: flex-end; border-color: rgba(215,25,32,.28); border-radius: 14px 14px 4px 14px; background: rgba(215,25,32,.10); }
.chat-message strong { font-size: .72rem; }
.chat-message p { margin: 5px 0; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message time { display: block; color: var(--muted); font-size: .62rem; text-align: right; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: end; padding-top: 12px; border-top: 1px solid var(--line); }
.compact-empty { padding: 22px 13px; }
.stack-form { display: grid; gap: 12px; }
.stack-form label { display: grid; gap: 7px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.approval-box { margin-top: 14px; padding: 14px; border: 1px solid rgba(247,164,58,.34); border-radius: 13px; background: rgba(247,164,58,.08); }
.approval-box.approved { border-color: rgba(61,187,119,.35); background: rgba(61,187,119,.08); }
.approval-box p { margin: 6px 0 12px; color: var(--muted); }
.result-review-card p { color: var(--muted); }
.result-review-card a { color: #ff8e92; font-weight: 800; }

.demo-mode-banner { display: grid; gap: 4px; margin-bottom: 17px; padding: 13px 15px; border: 1px solid rgba(247,164,58,.30); border-radius: 13px; background: rgba(247,164,58,.07); }
.demo-mode-banner strong { color: #ffc371; }
.demo-mode-banner span { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.auth-grid { align-items: start; }
.demo-accounts { display: grid; gap: 7px; margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line); }
.demo-accounts p { margin: 0 0 3px; color: var(--muted); font-size: .75rem; }
.demo-accounts button { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; }
.demo-accounts button:hover { border-color: rgba(215,25,32,.42); }
.arm-choice { display: flex; gap: 18px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; }
.arm-choice legend { padding: 0 6px; color: var(--muted); font-size: .75rem; font-weight: 800; }
.arm-choice label { display: flex; align-items: center; gap: 7px; color: var(--text); }
.arm-choice input { width: 18px; height: 18px; accent-color: var(--accent); }

.profile-dashboard { display: grid; grid-template-columns: 1fr; gap: 12px; }
.account-profile-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 17px; }
.profile-avatar { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #d71920, #5b0c10); font-weight: 950; }
.account-profile-card h2 { margin: 0; }
.account-profile-card p { margin: 4px 0 0; color: var(--muted); font-size: .76rem; }
.account-stat-card { padding: 18px; }
.account-stat-card small, .account-stat-card span { color: var(--muted); }
.account-stat-card strong { display: block; margin: 6px 0 4px; font-size: 2rem; }
.application-status-card { padding: 19px; }
.application-status-card h2 { margin: 5px 0; }
.application-status-card p { margin-bottom: 0; color: var(--muted); line-height: 1.45; }
.helper-chip { margin-left: 4px; background: rgba(247,164,58,.12); color: #ffc371; }

.admin-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.admin-metrics article { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.admin-metrics strong { display: block; font-size: 1.8rem; }
.admin-metrics span { color: var(--muted); font-size: .72rem; }
.admin-list { display: grid; gap: 10px; }
.admin-row { display: grid; gap: 14px; padding: 17px; align-items: center; }
.admin-row p { margin: 5px 0; color: var(--muted); }
.admin-row small { display: block; color: var(--muted); line-height: 1.42; }
.admin-row a { color: #ff9094; font-weight: 800; font-size: .76rem; }
.audit-list { display: grid; gap: 0; }
.audit-list > div { display: grid; grid-template-columns: minmax(105px, .5fr) 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.audit-list > div:last-child { border-bottom: 0; }
.audit-list time, .audit-list small { color: var(--muted); font-size: .68rem; }
.audit-list strong { font-size: .78rem; text-transform: capitalize; }
.badge.orange { background: rgba(247,164,58,.13); color: #ffc371; }
.badge.muted { background: rgba(255,255,255,.06); color: var(--muted); }

@media (max-width: 440px) {
  .brand > span:last-child { display: none; }
  .app-header { grid-template-columns: 42px 1fr auto; }
  .account-button { max-width: 72px; }
  .header-actions { gap: 4px; }
  .install-button { padding: 0 9px; }
  .staff-alert, .account-cta, .staff-shortcut, .result-review-card { align-items: flex-start; flex-direction: column; }
  .account-profile-card { grid-template-columns: auto 1fr; }
  .account-profile-card .button { grid-column: 1 / -1; width: 100%; }
  .chat-form { grid-template-columns: 1fr; }
}

@media (min-width: 720px) {
  .account-button { max-width: 130px; }
  .challenge-facts { grid-template-columns: repeat(3, 1fr); }
  .chat-layout { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); align-items: start; }
  .organization-card { position: sticky; top: calc(var(--header-height) + 20px); }
  .profile-dashboard { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(170px, .5fr)); }
  .application-status-card { grid-column: span 2; }
  .admin-metrics { grid-template-columns: repeat(4, 1fr); }
  .admin-row { grid-template-columns: minmax(0, 1fr) auto; }
  .app-toast { bottom: 24px; }
}

/* V4 — Tornei, team e storico match */
.team-grid,
.tournament-list {
  display: grid;
  gap: 1rem;
}

.team-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.team-card {
  overflow: hidden;
}

.team-card-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.15rem 1.15rem 0;
}

.team-card-header h3,
.tournament-card h2 {
  margin: .2rem 0;
}

.team-card-header p {
  margin: 0;
  color: var(--muted);
}

.team-logo {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-weight: 900;
  letter-spacing: .06em;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.03));
  border: 1px solid var(--line);
}

.team-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.team-details dl {
  display: grid;
  gap: .65rem;
  margin: 1rem 0;
}

.team-details dl div {
  display: grid;
  grid-template-columns: minmax(110px, .7fr) 1.3fr;
  gap: .75rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}

.team-details dt {
  color: var(--muted);
  font-size: .82rem;
}

.team-details dd {
  margin: 0;
  text-align: right;
}

.tournament-list {
  margin-top: 1rem;
}

.tournament-card {
  display: grid;
  grid-template-columns: 86px 1fr;
  overflow: hidden;
}

.tournament-date {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: .1rem;
  padding: 1.2rem .7rem;
  background: linear-gradient(180deg, rgba(184, 22, 31, .95), rgba(107, 10, 17, .95));
}

.tournament-date strong {
  font-size: 2rem;
  line-height: 1;
}

.tournament-date small {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .08em;
}

.tournament-content {
  min-width: 0;
}

.tournament-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1rem;
  margin: .9rem 0;
  color: var(--muted);
  font-size: .88rem;
}

.tournament-registration-form,
.registration-confirmed,
.registration-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem;
  margin: 1rem 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.tournament-registration-form fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1rem;
  border: 0;
  padding: 0;
  margin: 0;
}

.tournament-registration-form legend {
  width: 100%;
  font-weight: 800;
  margin-bottom: .35rem;
}

.registration-confirmed div {
  display: grid;
  gap: .2rem;
}

.registration-confirmed span,
.registration-cta span {
  color: var(--muted);
  font-size: .9rem;
}

.participants-details {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  padding-top: .85rem;
}

.participants-details summary {
  cursor: pointer;
  font-weight: 800;
}

.participants-details ul {
  list-style: none;
  padding: 0;
  margin: .75rem 0 0;
  display: grid;
  gap: .5rem;
}

.participants-details li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .65rem;
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}

.participants-details small {
  color: var(--muted);
}

.admin-management-section {
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
}

.admin-forms-grid {
  align-items: start;
}

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

.admin-tournament-card {
  padding: 1rem;
}

.admin-tournament-card details {
  margin: .75rem 0;
}

.admin-tournament-card ul {
  margin: .6rem 0;
  padding-left: 1.15rem;
  color: var(--muted);
}

.athlete-match-history {
  margin-top: 1.4rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}

.match-history-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}

.match-history-row:last-child {
  border-bottom: 0;
}

.match-history-row > div:nth-child(2) {
  display: grid;
  gap: .15rem;
}

.match-history-row small {
  color: var(--muted);
}

.match-result {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.match-result.win {
  background: rgba(34, 197, 94, .15);
  color: #73e59a;
  border: 1px solid rgba(34, 197, 94, .35);
}

.match-result.loss {
  background: rgba(239, 68, 68, .15);
  color: #ff8c8c;
  border: 1px solid rgba(239, 68, 68, .35);
}

@media (max-width: 680px) {
  .tournament-card {
    grid-template-columns: 68px 1fr;
  }

  .tournament-registration-form,
  .registration-confirmed,
  .registration-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .match-history-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .match-history-row > a,
  .match-history-row > span {
    grid-column: 2;
    justify-self: start;
  }

  .team-details dl div {
    grid-template-columns: 1fr;
  }

  .team-details dd {
    text-align: left;
  }
}


/* V5.3 - home semplificata con banner logo più grande */
.simplified-hero { min-height: 0; }
.official-hero.simplified-hero { grid-template-rows: minmax(240px, auto) auto; }
.hero-logo-panel.large { min-height: 260px; padding: 18px 12px 8px; background: radial-gradient(circle at 50% 42%, rgba(215,25,32,.22), transparent 58%), linear-gradient(180deg, #0b0b0d 0%, #050506 100%); }
.hero-logo.large { width: 100%; max-width: 1200px; max-height: 340px; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(255,0,0,.12)); }
.hero-actions-only { display: grid; place-items: center; padding: 18px 22px 26px; background: linear-gradient(180deg, rgba(20,20,24,.98), rgba(10,10,12,.98)); }
.hero-actions.centered { justify-content: center; }

@media (min-width: 768px) {
  .official-hero.simplified-hero { grid-template-rows: minmax(340px, auto) auto; }
  .hero-logo-panel.large { min-height: 380px; padding: 28px 36px 10px; }
  .hero-logo.large { max-height: 420px; }
  .hero-actions-only { padding: 22px 32px 34px; }
}


/* V5.4 - gestione rimozione ranking */
.admin-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.button.danger { background: #8f151c; border-color: rgba(255,105,112,.55); color: #fff; }
.button.danger.ghost { background: transparent; color: #ff8b91; border-color: rgba(255,105,112,.42); }
.button.danger:hover { filter: brightness(1.08); }
@media (max-width: 680px) {
  .athlete-management-row { align-items: flex-start; }
  .admin-row-actions { width: 100%; justify-content: flex-start; margin-top: 10px; }
}


/* V5.5 - pulizia lato atleta, sezione sfide più semplice */
.page-header.compact { margin-bottom: 18px; }
.athlete-page-header p { max-width: 760px; }
.section-heading.align-start { align-items: flex-start; }
.section-subtext { margin: 6px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.athlete-clean-panel { padding: 22px; }
.clean-form { gap: 16px; }
.clean-form .form-submit { margin-top: 2px; }
.clean-summary { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.03); color: var(--muted); line-height: 1.45; }
.challenge-clean-grid { gap: 14px; }
.scheduled-challenges-panel { margin-top: 16px; }
.challenge-card { transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.challenge-card:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.challenge-form label:not(.check-label) { gap: 9px; }
.form-note, .info-panel { display: none; }
.button[disabled] { opacity: .55; cursor: not-allowed; }
.select-input:disabled { opacity: .8; }

@media (max-width: 767px) {
  .portal-panel .section-heading,
  .scheduled-challenges-panel .section-heading { gap: 10px; }
  .portal-panel .badge,
  .scheduled-challenges-panel .badge { align-self: flex-start; }
  .athlete-clean-panel { padding: 18px; }
  .clean-form { grid-template-columns: 1fr; gap: 14px; }
  .clean-form .form-submit { width: 100%; }
}

/* V5.6 - gestione admin compatta e scalabile */
.compact-admin-list { gap: 8px; }
.compact-admin-row { padding: 14px 15px; }
.admin-lock-note { align-self: center; color: var(--muted); font-size: .72rem; line-height: 1.25; max-width: 150px; text-align: right; }

.athlete-admin-directory { min-width: 0; }
.athlete-admin-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.athlete-pagination { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.athlete-pagination span { min-width: 110px; color: var(--muted); text-align: center; font-size: .78rem; font-weight: 700; }
.compact-athlete-list { display: grid; gap: 8px; }
.athlete-admin-item { padding: 0; overflow: hidden; }
.athlete-admin-item[hidden] { display: none !important; }
.athlete-admin-item > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 15px; }
.athlete-admin-item > summary::-webkit-details-marker { display: none; }
.athlete-admin-item > summary::after { content: '⌄'; color: var(--muted); font-size: 1rem; transition: transform .18s ease; }
.athlete-admin-item[open] > summary::after { transform: rotate(180deg); }
.athlete-admin-item summary strong { display: block; margin-bottom: 4px; }
.athlete-admin-item summary small { display: block; color: var(--muted); line-height: 1.35; }
.athlete-admin-positions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; font-size: .74rem; color: var(--muted); }
.athlete-admin-positions span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; }
.athlete-admin-positions .status-active { color: #68dda8; border-color: rgba(104,221,168,.25); }
.athlete-admin-positions .status-inactive { color: #ff9c9f; border-color: rgba(255,90,96,.28); }
.athlete-admin-item-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 15px 14px; border-top: 1px solid rgba(255,255,255,.05); padding-top: 12px; }
.tournament-actions { margin-top: 12px; justify-content: flex-start; }

@media (max-width: 767px) {
  .athlete-admin-toolbar { grid-template-columns: 1fr; }
  .athlete-pagination { justify-content: space-between; }
  .athlete-admin-item > summary { grid-template-columns: 1fr; }
  .athlete-admin-item > summary::after { position: absolute; right: 15px; }
  .athlete-admin-item > summary { position: relative; padding-right: 42px; }
  .athlete-admin-positions { justify-content: flex-start; }
  .athlete-admin-item-actions .button { flex: 1 1 auto; }
  .admin-lock-note { max-width: none; text-align: left; }
}

/* V5.7 - ulteriore pulizia atleta/admin */
.simple-title-header { margin-bottom: 18px; }
.simple-title-header h1 { margin-bottom: 0; }

.account-profile-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.password-modal { width: min(92vw, 460px); }
.password-dialog-copy { margin: -4px 0 18px; }
.password-modal .stack-form { clear: both; }

.helper-management-section { display: grid; gap: 12px; }
.helper-tabs { margin-bottom: 2px; }
.helper-tab-panel { min-width: 0; }
.helper-highlight-list { gap: 9px; }
.helper-highlight-card { border-color: rgba(247,164,58,.28); background: linear-gradient(135deg, rgba(247,164,58,.055), var(--surface) 58%); }
.helper-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.helper-search-box { margin-bottom: 10px; }
.helper-search-results { gap: 8px; }
.helper-search-card { padding: 14px 16px; }
.helper-search-card.is-helper { border-color: rgba(247,164,58,.28); }

@media (max-width: 440px) {
  .account-profile-actions { grid-column: 1 / -1; width: 100%; justify-content: stretch; }
  .account-profile-actions .button { width: 100%; }
  .helper-highlight-card,
  .helper-search-card { align-items: stretch; }
  .helper-highlight-card .button,
  .helper-search-card .button { width: 100%; }
}

/* V5.8 - upload foto profilo semplificato */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.photo-upload-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}
.photo-upload-preview { flex: 0 0 auto; }
.profile-photo-preview {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #d71920, #5b0c10);
  border: 1px solid rgba(255,255,255,.16);
  font-weight: 950;
}
.profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-upload-content { min-width: 0; flex: 1; }
.photo-upload-content > strong { display: block; margin-bottom: 3px; }
.photo-upload-content > p { margin: 0 0 10px; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.photo-upload-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-file-name { display: block; margin-top: 8px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .photo-upload-card { align-items: flex-start; }
  .profile-photo-preview { width: 68px; height: 68px; }
}


/* V5.9 - home essenziale: eventi + Top 3 DX/SX */
.clean-home .hero { margin-bottom: 4px; }
.home-upcoming-section { margin-top: 22px; }
.home-upcoming-list { display: grid; gap: 12px; }
.home-upcoming-card { display: block; color: inherit; text-decoration: none; transition: transform .18s ease, border-color .18s ease; }
.home-upcoming-card:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.home-event-content { min-width: 0; }
.home-event-content h3 { margin: 7px 0 5px; }
.home-event-content p { margin: 0 0 8px; }
.home-top3-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.home-ranking-card { padding: 18px; min-width: 0; }
.home-ranking-card .section-heading { align-items: flex-start; margin-bottom: 14px; }
.home-ranking-card .section-heading h2 { font-size: 1.55rem; margin-top: 3px; }
.compact-home-ranking .ranking-row { grid-template-columns: 38px 44px minmax(0,1fr) auto; padding: 10px; }
.compact-home-ranking .avatar { width: 44px; height: 44px; }
.compact-home-ranking .row-title small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 820px) {
  .home-upcoming-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-upcoming-list > :only-child { grid-column: 1 / -1; }
  .home-top3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 1150px) {
  .home-upcoming-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-upcoming-list > :only-child { grid-column: 1 / -1; }
}

/* V5.10 - video ufficiale inserito dallo staff */
.result-admin-confirm,
.result-admin-actions {
  display: grid;
  gap: 10px;
  min-width: min(100%, 360px);
}
.result-admin-confirm label,
.result-admin-actions label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
}
.result-admin-row { align-items: center; }
@media (min-width: 768px) {
  .result-admin-row { grid-template-columns: minmax(0, 1fr) minmax(290px, 380px); }
}
@media (max-width: 767px) {
  .result-admin-confirm,
  .result-admin-actions { width: 100%; min-width: 0; }
}