:root {
  color-scheme: dark;
  --bg: #061008;
  --bg-2: #07150c;
  --panel: rgba(10, 22, 18, .86);
  --panel-2: rgba(16, 30, 25, .92);
  --panel-3: rgba(20, 40, 31, .78);
  --text: #f3fff7;
  --muted: #a8b9ad;
  --line: rgba(203, 255, 211, .13);
  --line-strong: rgba(133, 255, 87, .38);
  --accent: #7CFF45;
  --accent-soft: rgba(124,255,69,.12);
  --accent-2: #24d48a;
  --gold: #ffd76a;
  --danger: #ff6464;
  --blue: #80c8ff;
  --shadow: 0 28px 90px rgba(0,0,0,.38);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --sidebar: 270px;
  --bottom-nav: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% -10%, rgba(124,255,69,.22), transparent 34%),
    radial-gradient(circle at 88% 5%, rgba(36,212,138,.16), transparent 34%),
    linear-gradient(180deg, #030807 0%, var(--bg) 42%, #071607 100%);
  overflow-x: hidden;
}

.stadium-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .75;
  background:
    radial-gradient(ellipse at 75% 8%, rgba(255,255,255,.24) 0 1px, transparent 32%),
    radial-gradient(ellipse at 87% 12%, rgba(255,255,255,.18) 0 1px, transparent 30%),
    linear-gradient(110deg, transparent 0 58%, rgba(255,255,255,.06) 59%, transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 80px, rgba(124,255,69,.025) 81px 82px),
    linear-gradient(0deg, rgba(23,75,21,.42) 0, transparent 28%);
  filter: saturate(1.1);
}

button, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1; letter-spacing: -.05em; }
h2 { font-size: 1.1rem; line-height: 1.2; }
h3 { font-size: 1rem; }
strong { font-weight: 850; }

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(3,10,8,.94), rgba(7,20,13,.78));
  backdrop-filter: blur(20px);
}

.brand, .mobile-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: -.04em;
  line-height: .9;
}
.brand strong, .mobile-brand strong { display: block; font-size: 1.15rem; font-style: italic; }
.brand em, .mobile-brand em { display: block; color: var(--accent); font-style: italic; font-weight: 900; font-size: 1.02rem; }

.brand-ball {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at center, #fff 0 24%, transparent 25%),
    conic-gradient(from 15deg, #fff 0 14%, #111 14% 22%, #fff 22% 36%, #111 36% 45%, #fff 45% 61%, #111 61% 70%, #fff 70% 86%, #111 86% 93%, #fff 93% 100%);
  box-shadow: 0 0 0 4px rgba(124,255,69,.13), 0 0 28px rgba(124,255,69,.28);
}
.brand-ball::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 22px;
  width: 26px;
  height: 3px;
  border-radius: 999px;
  transform: rotate(-32deg);
  background: linear-gradient(90deg, var(--accent), transparent);
}
.brand-ball.mini { width: 34px; height: 34px; }
.brand-ball.large { width: 72px; height: 72px; margin-bottom: 14px; }

.brand-payoff {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .12em;
  line-height: 1.5;
  padding-left: 4px;
}

.side-nav { display: grid; gap: 8px; margin-top: 8px; }
.nav-item {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 16px;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 760;
  transition: .16s ease;
}
.nav-item span { width: 22px; text-align: center; color: var(--accent); }
.nav-item:hover, .nav-item.active {
  color: var(--text);
  border-color: var(--line-strong);
  background: linear-gradient(135deg, rgba(124,255,69,.14), rgba(36,212,138,.06));
  box-shadow: inset 3px 0 0 var(--accent);
}

.credit-card {
  margin-top: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(124,255,69,.08));
}
.credit-card small { display: block; color: var(--muted); margin-bottom: 4px; }
.credit-card strong, .credit-line strong { color: var(--accent); }
.credit-star { color: var(--gold); display: block; margin-bottom: 8px; }

.main-area {
  min-width: 0;
  padding: 20px 22px 44px;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 0 18px;
  background: linear-gradient(180deg, rgba(6,16,8,.96), rgba(6,16,8,.74), transparent);
  backdrop-filter: blur(18px);
}
.mobile-brand { display: none; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; width: 100%; }

.screen { display: none; animation: screenIn .18s ease; }
.screen.active { display: block; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.hero-panel, .panel-card, .summary-card, .preview-box, .detail-dialog, .control-panel {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(13,30,24,.92), rgba(5,12,11,.82));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.hero-panel {
  min-height: 224px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: end;
  padding: clamp(22px, 4vw, 40px);
  position: relative;
  overflow: hidden;
}
.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(124,255,69,.14), transparent 32%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(255,255,255,.025) 28px 29px),
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(255,255,255,.018) 45px 46px);
  mask-image: linear-gradient(90deg, #000, transparent 85%);
}
.hero-panel > * { position: relative; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 900; margin-bottom: 10px; }
.muted, .page-title p, .section-head p { color: var(--muted); line-height: 1.55; margin-top: 7px; }
.hero-panel .muted { max-width: 760px; font-size: 1.02rem; }
.hero-metric {
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  padding: 20px;
  background: radial-gradient(circle at top right, rgba(124,255,69,.22), rgba(10,27,18,.82));
}
.hero-metric span, .hero-metric small { display: block; color: var(--muted); }
.hero-metric strong { display: block; color: var(--accent); font-size: 2.25rem; margin: 8px 0 4px; }

.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.summary-card { padding: 16px; border-radius: var(--radius-lg); }
.summary-card span { color: var(--muted); font-size: .82rem; display: block; }
.summary-card strong { display: block; margin-top: 8px; color: var(--accent); font-size: 1.45rem; }

.dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.panel-card { padding: 18px; min-width: 0; }
.span-2 { grid-column: span 2; }
.highlight-card { border-color: var(--line-strong); background: radial-gradient(circle at top right, rgba(124,255,69,.18), rgba(9,25,18,.9)); }
.actions-card { display: grid; gap: 10px; align-content: start; }
.section-head, .page-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.section-head.compact { align-items: center; }

.compact-list, .card-grid, .tool-grid, .stats-grid, .stats-page-grid { display: grid; gap: 12px; }
.card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-page-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-grid { display: grid; grid-template-columns: 1.35fr .75fr; gap: 16px; }

.match-row, .data-card, .mini-card, .stat-tile, .action-tile, .tool-card {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.045);
  border-radius: var(--radius-md);
}
.match-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}
.team-name { font-weight: 850; }
.team-away { text-align: right; }
.vs { color: var(--muted); font-weight: 900; }
.flag-dot { width: 30px; height: 22px; border-radius: 6px; display: inline-block; margin-right: 8px; vertical-align: -5px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); background: linear-gradient(90deg, #315eea 0 33%, #fff 33% 66%, #e23d3d 66%); }
.flag-dot.ma { background: #b40f2f; }
.flag-dot.es { background: linear-gradient(#c70c25 0 25%, #ffc400 25% 75%, #c70c25 75%); }
.flag-dot.be { background: linear-gradient(90deg, #111 0 33%, #ffd200 33% 66%, #e62929 66%); }

.data-card { padding: 16px; position: relative; overflow: hidden; }
.data-card::after { content: ""; position: absolute; inset: auto -30px -35px auto; width: 90px; height: 90px; border-radius: 50%; background: rgba(124,255,69,.07); }
.card-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.card-head strong { font-size: 1.08rem; }
.card-meta { color: var(--muted); font-size: .88rem; line-height: 1.45; margin-top: 4px; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.metric { background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.055); border-radius: 14px; padding: 12px; min-width: 0; }
.metric span { display: block; color: var(--muted); font-size: .75rem; margin-bottom: 5px; }
.metric strong { display: block; color: var(--accent); font-size: 1.02rem; word-break: break-word; }
.explanation { color: #cbd8ce; line-height: 1.55; margin-top: 13px; font-size: .92rem; }

.best-card-content .pick { font-size: 2.2rem; color: var(--text); margin: 12px 0; }
.best-card-content .prob { font-size: 2.45rem; color: var(--accent); }
.progress-line { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.09); margin-top: 14px; }
.progress-line span { display: block; height: 100%; width: var(--value, 0%); background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.shield { width: 42px; height: 42px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; color: #071109; background: var(--accent); font-weight: 950; }

.status-pill, .counter, .badge, .mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 8px 12px;
  font-size: .82rem;
  font-weight: 850;
}
.status-pill.ok, .badge.low, .mini-badge { color: var(--accent); background: var(--accent-soft); border-color: rgba(124,255,69,.28); }
.status-pill.error, .badge.high { color: var(--danger); background: rgba(255,100,100,.1); border-color: rgba(255,100,100,.26); }
.status-pill.neutral, .badge.medium { color: var(--gold); background: rgba(255,215,106,.08); border-color: rgba(255,215,106,.24); }
.counter { min-width: 46px; color: var(--accent); background: var(--accent-soft); }

button, .link-btn, .ghost-btn, .soft-btn, .primary-btn, .inline-btn, .dialog-close {
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--text);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}
button:hover { border-color: var(--line-strong); }
button:active { transform: scale(.98); }
.ghost-btn, .soft-btn, .link-btn, .inline-btn { background: rgba(255,255,255,.055); }
.ghost-btn, .soft-btn, .primary-btn { padding: 11px 14px; font-weight: 850; }
.primary-btn { color: #061008; border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.link-btn { color: var(--accent); padding: 9px 12px; }
.inline-btn { margin-top: 14px; padding: 10px 12px; width: 100%; font-weight: 850; }
.action-tile, .tool-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-areas: "icon title" "icon sub";
  gap: 0 10px;
  text-align: left;
  padding: 14px;
}
.action-tile span { grid-area: icon; color: var(--accent); font-size: 1.25rem; align-self: center; }
.action-tile strong, .tool-card strong { grid-area: title; }
.action-tile small, .tool-card span { grid-area: sub; color: var(--muted); margin-top: 2px; }
.tool-card { grid-template-columns: 1fr; grid-template-areas: "title" "sub"; }

.control-panel { display: flex; gap: 12px; align-items: end; padding: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.control-panel label { display: grid; gap: 6px; color: var(--muted); font-size: .86rem; font-weight: 760; }
select { min-width: 170px; background: rgba(0,0,0,.25); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; }
.preview-box { padding: 16px; margin-bottom: 14px; }
.combination-preview-card .empty, .best-card-content .empty, .compact-list .empty { color: var(--muted); padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius-md); }
.combo-item, .mini-card { padding: 12px; }
.combo-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }
.combo-item:last-child { border-bottom: 0; }
.combo-footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }

.stat-tile { padding: 15px; min-height: 114px; }
.stat-tile span { color: var(--muted); font-size: .82rem; }
.stat-tile strong { display: block; color: var(--accent); font-size: 2rem; margin-top: 8px; }
.tiny-chart { display: flex; align-items: end; gap: 5px; height: 32px; margin-top: 12px; }
.tiny-chart i { flex: 1; border-radius: 999px 999px 2px 2px; background: linear-gradient(180deg, var(--accent), rgba(124,255,69,.25)); min-height: 7px; }

.log-box {
  background: rgba(0,0,0,.28);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: #cbe6d2;
  padding: 14px;
  min-height: 140px;
  overflow: auto;
  white-space: pre-wrap;
}
.credits-panel { text-align: center; }
.credits-panel p { color: var(--muted); line-height: 1.55; margin-top: 8px; }
.credit-line { margin: 18px 0; padding: 13px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--accent-soft); }
.legal-note { font-size: .86rem; }

.detail-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(86vh, 900px);
  padding: 22px;
  color: var(--text);
  overflow: auto;
}
.detail-dialog::backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(8px); }
.dialog-close {
  position: sticky;
  top: 0;
  float: right;
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.08);
  font-size: 1.4rem;
}
.detail-table { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
.detail-table div { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.045); }
.detail-table span { color: var(--muted); font-size: .8rem; }
.detail-table strong { float: right; color: var(--accent); }

.toast {
  position: fixed;
  z-index: 60;
  right: 18px;
  bottom: 18px;
  max-width: min(420px, calc(100vw - 36px));
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(8,20,13,.96);
  box-shadow: var(--shadow);
}
.hidden { display: none !important; }
.error-text { color: var(--danger); line-height: 1.5; }

.bottom-nav { display: none; }

@media (max-width: 1180px) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions-card { grid-column: span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions-card h2 { grid-column: 1 / -1; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .app-shell { display: block; min-height: auto; }
  .sidebar { display: none; }
  .main-area { padding: 12px 12px calc(var(--bottom-nav) + 24px); }
  .mobile-brand { display: inline-flex; }
  .topbar { align-items: flex-start; }
  .topbar-actions { width: auto; }
  .hero-panel { grid-template-columns: 1fr; min-height: 0; }
  .summary-grid, .card-grid, .settings-grid, .stats-page-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .span-2, .actions-card { grid-column: auto; }
  .actions-card { grid-template-columns: 1fr; }
  .bottom-nav {
    position: fixed;
    z-index: 50;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: var(--bottom-nav);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(5,14,10,.94);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow);
  }
  .bottom-nav .nav-item { padding: 6px 2px; border-radius: 16px; justify-content: center; flex-direction: column; gap: 2px; font-size: .68rem; }
  .bottom-nav .nav-item span { width: auto; }
  .bottom-nav .nav-item.active { box-shadow: none; }
  .toast { bottom: calc(var(--bottom-nav) + 24px); }
}

@media (max-width: 620px) {
  .topbar { flex-direction: column; }
  .topbar-actions { justify-content: flex-start; }
  .ghost-btn, .soft-btn, .primary-btn { padding: 10px 11px; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-row, .combo-footer, .detail-table { grid-template-columns: 1fr; }
  .match-row { grid-template-columns: 1fr auto 1fr; }
  .match-row .badge { grid-column: 1 / -1; justify-self: start; }
  .control-panel { align-items: stretch; }
  .control-panel > * { width: 100%; }
  select { width: 100%; }
  h1 { font-size: 2.1rem; }
}

/* v0.4.4 - rifiniture UX */
.compact-controls {
  margin: 0 0 14px;
  align-items: end;
}
.control-panel input[type="search"] {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--text);
  background: rgba(255,255,255,.055);
  outline: none;
}
.control-panel input[type="search"]:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 4px rgba(124,255,69,.08);
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.match-row button.badge {
  cursor: pointer;
}
.match-row button.badge:hover {
  filter: brightness(1.15);
}
.app-footer {
  margin: 28px 0 0;
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(4, 12, 9, .72);
  color: var(--muted);
}
.app-footer strong, .app-footer b { color: var(--accent); }
.detail-dialog .inline-btn { margin-top: 12px; }
@media (max-width: 760px) {
  .compact-controls { grid-template-columns: 1fr; }
  .app-footer { margin-bottom: calc(var(--bottom-nav) + 18px); }
}

/* v0.4.5 - stati chiari per modali e caricamento */
.loading-box {
  border: 1px dashed rgba(113, 255, 70, .28);
  border-radius: 18px;
  padding: 22px;
  color: var(--muted);
  background: rgba(255,255,255,.035);
}
.error-text {
  color: #ff8f8f;
  background: rgba(255, 70, 70, .08);
  border: 1px solid rgba(255, 70, 70, .24);
  padding: 16px;
  border-radius: 16px;
}


/* v0.4.6 - accessi e ruoli */
.admin-link { text-decoration: none; display: inline-flex; align-items: center; }
.locked-action { opacity: .48; cursor: not-allowed !important; filter: grayscale(.35); }
.status-pill.neutral { border-color: rgba(255,255,255,.16); color: var(--muted); background: rgba(255,255,255,.05); }
.admin-login-card { text-decoration: none; color: inherit; }
.admin-login-card:hover { border-color: var(--line-strong); }
@media (max-width: 760px) { .admin-link { display: none; } }


/* v0.4.7 - blocco consultazione pubblica */
body.public-locked .screen,
body.public-locked .app-footer {
  display: none !important;
}
body.public-locked .side-nav,
body.public-locked .bottom-nav {
  pointer-events: none;
  opacity: .42;
  filter: grayscale(.35);
}
body.public-locked .main-area main {
  min-height: calc(100vh - 96px);
  display: flex;
  align-items: center;
}
.access-gate {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 24px;
}
.access-card {
  border: 1px solid rgba(111, 255, 76, .28);
  border-radius: 32px;
  background:
    radial-gradient(circle at 15% 0%, rgba(111, 255, 76, .18), transparent 30%),
    linear-gradient(135deg, rgba(9, 31, 15, .96), rgba(2, 13, 8, .98));
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  padding: clamp(28px, 5vw, 58px);
}
.access-card h1 {
  max-width: 900px;
  font-size: clamp(2.1rem, 5vw, 5.2rem);
  line-height: .95;
  margin: 10px 0 18px;
}
.access-card .muted {
  max-width: 900px;
  font-size: 1.05rem;
}
.access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0;
}
.access-actions a,
.access-actions button {
  text-decoration: none;
}
.access-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.access-feature-grid article {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
  padding: 18px;
}
.access-feature-grid strong {
  display: block;
  color: var(--accent);
  margin-bottom: 8px;
}
.access-feature-grid span {
  color: var(--muted);
  line-height: 1.45;
}
@media (max-width: 800px) {
  body.public-locked .main-area main { align-items: flex-start; }
  .access-gate { padding: 14px; }
  .access-feature-grid { grid-template-columns: 1fr; }
}

/* v0.4.8 - accesso utenti */
.status-pill.warning {
  border-color: rgba(255, 209, 102, .55);
  color: #ffd166;
  background: rgba(255, 209, 102, .10);
}
.access-card-wide {
  max-width: 1180px;
}
.auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0 18px;
}
.auth-box {
  border: 1px solid rgba(119, 255, 77, .22);
  border-radius: 22px;
  background: rgba(4, 17, 10, .56);
  padding: 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.auth-box h2 {
  margin: 0 0 8px;
  color: #f4fff1;
}
.auth-box label {
  display: grid;
  gap: 8px;
  color: rgba(244,255,241,.72);
  font-weight: 800;
  margin-top: 14px;
}
.auth-box input {
  width: 100%;
  border: 1px solid rgba(148, 255, 124, .22);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  color: #f4fff1;
  padding: 13px 14px;
  font: inherit;
  outline: none;
}
.auth-box input:focus {
  border-color: rgba(101,255,75,.75);
  box-shadow: 0 0 0 4px rgba(101,255,75,.12);
}
.auth-box button {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
}
@media (max-width: 900px) {
  .auth-grid { grid-template-columns: 1fr; }
}

/* v0.4.9 ecommerce/account flow */
.auth-box.hidden,
.access-gate .hidden { display: none !important; }
.plans-list { display: grid; gap: 14px; margin-top: 14px; }
.plan-card { border: 1px solid rgba(113,255,70,.24); background: rgba(255,255,255,.045); border-radius: 18px; padding: 16px; display: grid; gap: 10px; }
.plan-card strong { color: var(--text); font-size: 1.05rem; }
.plan-card p { margin: 6px 0 0; color: var(--muted); line-height: 1.45; }
.plan-card small { color: var(--muted); font-weight: 700; }
.plan-price { color: var(--accent); font-size: 1.8rem; font-weight: 950; letter-spacing: -.03em; }
#emailVerifyForm input { font-size: 1.5rem; font-weight: 900; letter-spacing: .25em; text-align: center; }

/* v0.5.3 - Area utente */
.account-summary .detail-table,
.account-panel .detail-table {
  margin-top: 12px;
}
.account-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.account-list .mini-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(135,255,92,.16);
  border-radius: 16px;
  padding: 12px 14px;
}
.account-panel .mini-card strong {
  color: var(--text, #f4fff2);
}


/* v0.5.4 - flusso e-commerce coerente per area utente */
body.public-locked .side-nav,
body.public-locked .bottom-nav {
  display: none !important;
}
body.public-locked .sidebar {
  opacity: 1;
}
body.public-locked .credit-card {
  margin-top: auto;
}
.auth-box-wide {
  grid-column: 1 / -1;
}
.paywall-subtitle {
  margin-top: 20px;
  color: var(--text);
}
.paywall-account-summary,
.paywall-history {
  margin-top: 16px;
}
.paywall-status-grid,
.paywall-help-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.paywall-status-grid > div,
.paywall-help-grid > article {
  border: 1px solid rgba(135,255,92,.18);
  background: rgba(255,255,255,.045);
  border-radius: 16px;
  padding: 14px;
}
.paywall-status-grid span,
.paywall-help-grid span {
  display: block;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 5px;
}
.paywall-status-grid strong,
.paywall-help-grid strong {
  color: var(--accent);
}
body.public-locked .access-card h1 {
  max-width: 980px;
}
body.public-locked .topbar-actions {
  justify-content: flex-end;
}
@media (max-width: 1100px) {
  .paywall-status-grid,
  .paywall-help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .paywall-status-grid,
  .paywall-help-grid { grid-template-columns: 1fr; }
  body.public-locked .sidebar { display: none; }
}

/* v0.7.5.7 - avvio PWA senza flash di contenuti protetti */
body.app-auth-loading .screen,
body.app-auth-loading .app-footer,
body.app-auth-loading .side-nav,
body.app-auth-loading .bottom-nav {
  display: none !important;
}
body.app-auth-loading .access-gate {
  display: block !important;
}

/* v0.7.13 - responsive mobile e contesti di accesso */
@media (max-width: 900px) {
  :root { --bottom-nav: 72px; }
  .bottom-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
    padding: 7px;
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(0,0,0,.48);
  }
  .bottom-nav .nav-item {
    min-width: 0;
    min-height: 56px;
    font-size: .66rem;
    letter-spacing: -.01em;
  }
  .bottom-nav .nav-item span { font-size: 1.06rem; }
  .main-area { padding-bottom: calc(var(--bottom-nav) + env(safe-area-inset-bottom) + 28px); }
  .topbar { padding-top: max(10px, env(safe-area-inset-top)); }
}

.mobile-more-backdrop {
  position: fixed; inset: 0; z-index: 78; background: rgba(0,0,0,.66); backdrop-filter: blur(4px);
}
.mobile-more-sheet {
  position: fixed; z-index: 79; left: 10px; right: 10px; bottom: calc(var(--bottom-nav) + 18px + env(safe-area-inset-bottom));
  padding: 10px 14px 16px; border: 1px solid rgba(135,255,92,.20); border-radius: 24px;
  background: linear-gradient(155deg,rgba(12,31,18,.985),rgba(4,12,7,.985)); box-shadow: 0 26px 80px rgba(0,0,0,.62);
  transform: translateY(calc(100% + 120px)); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease;
}
.mobile-more-sheet.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-more-handle { width: 44px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.24); margin: 0 auto 10px; }
.mobile-more-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.mobile-more-head strong { font-size:1.05rem; }
.mobile-more-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.mobile-more-action { min-height:86px; display:grid; grid-template-columns:30px 1fr; align-content:center; text-align:left; gap:2px 8px; padding:13px; border:1px solid rgba(255,255,255,.10); border-radius:17px; background:rgba(255,255,255,.045); color:var(--text); }
.mobile-more-action > span { grid-row:1 / span 2; align-self:center; color:var(--accent); font-size:1.2rem; }
.mobile-more-action strong,.mobile-more-action small { grid-column:2; }
.mobile-more-action small { color:var(--muted); font-size:.72rem; line-height:1.25; }

@media (min-width: 901px) {
  .mobile-more-sheet,.mobile-more-backdrop { display:none!important; }
}
@media (max-width: 620px) {
  .auth-grid { grid-template-columns: 1fr!important; }
  .access-card-wide { padding: 18px!important; border-radius: 22px!important; }
  .auth-box,.auth-box-wide { grid-column:1!important; padding:16px!important; }
  .topbar-actions { width:100%; display:grid!important; grid-template-columns:1fr auto auto; gap:7px!important; }
  .topbar-actions .status-pill { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar-actions #systemStatus { display:none; }
  .topbar-actions button { min-height:42px; padding:8px 10px!important; }
  .page-title,.section-head { align-items:flex-start; }
  .page-title h1 { font-size:clamp(1.8rem,9vw,2.45rem); }
  .control-panel { display:grid!important; grid-template-columns:1fr; align-items:stretch!important; }
  .control-panel > * { width:100%; }
  .control-panel button { min-height:46px; }
  .card-grid,.dashboard-grid,.settings-grid { gap:12px!important; }
  .mobile-more-grid { grid-template-columns:1fr; }
}
@media (max-width: 390px) {
  .bottom-nav { left:6px; right:6px; padding:5px; border-radius:19px; }
  .bottom-nav .nav-item { font-size:.61rem; padding-inline:1px; }
  .bottom-nav .nav-item span { font-size:1rem; }
  .mobile-brand strong,.mobile-brand em { font-size:.88rem!important; }
}


/* v0.7.14.1 - passaggio esplicito area utente/amministratore */
.context-switch {
  text-decoration: none;
  white-space: nowrap;
  min-height: 42px;
}
.context-switch:not(.hidden) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 760px) {
  #adminSwitchBtn { display: none !important; }
}


/* v0.7.15 - UX PWA sperimentale e responsive mobile-first */
.mobile-context-bar { display:none; }
.mobile-focus-strip { display:none; }
.primary-signal {
  display:grid; gap:5px; margin:16px 0; padding:16px 18px;
  border:1px solid rgba(111,255,76,.24); border-radius:18px;
  background:linear-gradient(145deg,rgba(111,255,76,.105),rgba(255,255,255,.025));
}
.primary-signal > span { color:var(--muted); font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.primary-signal > strong { color:var(--accent); font-size:clamp(1.45rem,3vw,2rem); line-height:1; }
.primary-signal > small { color:var(--muted); line-height:1.4; }
.primary-signal.pending > strong { color:#ffd166; }
.mobile-detail-block { margin:14px 0; border:1px solid rgba(255,255,255,.09); border-radius:15px; background:rgba(255,255,255,.025); }
.mobile-detail-block summary { cursor:pointer; padding:13px 15px; font-weight:850; color:var(--text); list-style:none; }
.mobile-detail-block summary::-webkit-details-marker { display:none; }
.mobile-detail-block summary::after { content:'+'; float:right; color:var(--accent); font-size:1.15rem; }
.mobile-detail-block[open] summary::after { content:'−'; }
.mobile-detail-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0 14px 14px; }
.mobile-detail-content > div { padding:11px; border-radius:12px; background:rgba(255,255,255,.035); }
.mobile-detail-content span,.mobile-detail-content strong { display:block; }
.mobile-detail-content span { color:var(--muted); font-size:.72rem; margin-bottom:4px; }
.card-primary-action { width:100%; justify-content:center; margin-top:10px; }

@media (max-width: 900px) {
  .mobile-context-bar {
    display:flex; position:sticky; top:0; z-index:35; align-items:center; justify-content:space-between; gap:12px;
    margin:0 12px; padding:9px 12px; border:1px solid rgba(111,255,76,.16); border-radius:0 0 15px 15px;
    background:rgba(5,17,9,.93); backdrop-filter:blur(14px); box-shadow:0 12px 30px rgba(0,0,0,.22);
  }
  .mobile-context-bar span,.mobile-context-bar strong { display:block; }
  .mobile-context-bar span { color:var(--muted); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }
  .mobile-context-bar strong { font-size:.82rem; margin-top:1px; }
  .mobile-context-action { min-height:36px; display:inline-flex; align-items:center; padding:7px 10px; border-radius:11px; text-decoration:none; color:#071109; background:var(--accent); font-size:.75rem; font-weight:900; }
  .mobile-context-action.hidden { display:none!important; }
  .mobile-focus-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 16px; }
  .mobile-focus-strip button { min-width:0; text-align:left; padding:12px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(255,255,255,.035); color:var(--text); }
  .mobile-focus-strip span,.mobile-focus-strip strong,.mobile-focus-strip small { display:block; }
  .mobile-focus-strip span { color:var(--accent); font-size:.68rem; font-weight:900; }
  .mobile-focus-strip strong { margin:5px 0 3px; font-size:.82rem; line-height:1.2; }
  .mobile-focus-strip small { color:var(--muted); font-size:.68rem; line-height:1.25; }
  .mobile-priority-card { padding:16px!important; }
  .mobile-priority-card .card-head { gap:10px; align-items:flex-start; }
  .mobile-priority-card .card-head > div { min-width:0; }
  .mobile-priority-card .card-head strong { font-size:1.02rem; line-height:1.25; }
  .compact-mobile-metrics { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px!important; }
  .compact-mobile-metrics .metric { min-width:0; padding:10px!important; }
  .compact-mobile-metrics .metric span { font-size:.65rem; }
  .compact-mobile-metrics .metric strong { font-size:.87rem; overflow-wrap:anywhere; }
  .button-row { display:grid!important; grid-template-columns:1fr; gap:8px!important; }
  .button-row button { width:100%; min-height:44px; justify-content:center; }
  .detail-dialog { width:calc(100vw - 16px)!important; max-width:none!important; max-height:calc(100dvh - 16px)!important; margin:8px!important; border-radius:22px!important; }
  .detail-dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(4px); }
  .detail-dialog #detailContent { max-height:calc(100dvh - 72px); overflow:auto; overscroll-behavior:contain; }
  main { padding-inline:12px!important; }
}
@media (max-width: 620px) {
  .hero-panel { padding:20px!important; border-radius:22px!important; }
  .hero-panel h1 { font-size:clamp(2rem,11vw,3rem)!important; }
  .hero-metric { width:100%; }
  .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .summary-card { min-height:92px; padding:14px!important; }
  .summary-card strong { font-size:1.5rem!important; }
  .mobile-focus-strip { grid-template-columns:1fr; }
  .mobile-focus-strip button { display:grid; grid-template-columns:28px 1fr; column-gap:8px; }
  .mobile-focus-strip button span { grid-row:1 / span 2; align-self:center; }
  .mobile-focus-strip button strong,.mobile-focus-strip button small { grid-column:2; }
  .compact-mobile-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .compact-mobile-metrics .metric:last-child { grid-column:1 / -1; }
  .mobile-detail-content { grid-template-columns:1fr; }
  .desktop-support-copy { display:none; }
  .topbar { position:relative!important; }
  .topbar-actions { grid-template-columns:1fr auto!important; }
  .topbar-actions #authStatus { grid-column:1 / -1; }
  .topbar-actions #refreshBtn { min-width:42px; font-size:0; }
  .topbar-actions #refreshBtn::after { content:'↻'; font-size:1.1rem; }
}
@media (max-width: 390px) {
  main { padding-inline:8px!important; }
  .mobile-context-bar { margin-inline:8px; }
  .summary-grid { gap:8px!important; }
  .data-card,.panel-card { border-radius:18px!important; }
  .primary-signal { padding:14px; }
}


/* v0.7.16 Authentication UX */
.password-input-wrap{position:relative;display:block}.password-input-wrap input{padding-right:88px}.password-reveal-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:auto!important;margin:0!important;padding:7px 10px!important;border-radius:10px!important;font-size:.78rem;background:rgba(255,255,255,.08)!important;color:var(--text)!important}.form-message{margin-top:14px;padding:12px 14px;border:1px solid rgba(255,92,92,.42);border-radius:14px;background:rgba(255,92,92,.09);color:#ffd7d7;font-weight:800;line-height:1.45}.form-message.success{border-color:rgba(101,255,75,.42);background:rgba(101,255,75,.09);color:#ddffd5}.auth-box button.is-busy{opacity:.7;pointer-events:none}.auth-box button.is-busy .button-label::after{content:'…'}


/* v0.7.17 account essentials */
.text-action-btn{appearance:none;border:0;background:transparent;color:var(--accent,#72ff45);font-weight:800;text-decoration:underline;cursor:pointer;padding:.35rem 0;text-align:left}
.account-form{display:grid;gap:.85rem}.account-form label{display:grid;gap:.38rem}.account-form input{width:100%}
@media(max-width:560px){.auth-grid{grid-template-columns:1fr}.auth-box{width:100%}.text-action-btn{min-height:44px}}

/* v0.7.19 - responsive e accessibilità completa */
.skip-link{position:fixed;left:12px;top:12px;z-index:9999;transform:translateY(-160%);padding:11px 15px;border-radius:12px;background:#fff;color:#071109;font-weight:900;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.skip-link:focus{transform:translateY(0)}
.sr-only{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}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--accent)!important;outline-offset:3px!important;box-shadow:0 0 0 5px rgba(124,255,69,.16)!important}
button:disabled,[aria-disabled="true"]{cursor:not-allowed!important;opacity:.58!important;transform:none!important}
.nav-item[aria-current="page"]{color:var(--text);border-color:var(--line-strong);background:linear-gradient(135deg,rgba(124,255,69,.14),rgba(36,212,138,.06));box-shadow:inset 3px 0 0 var(--accent)}
.detail-dialog{overscroll-behavior:contain}
.detail-dialog:focus{outline:none}
.detail-table,.compact-list,.card-grid{min-width:0}
.form-message:not(.hidden){scroll-margin-top:90px}
@media(max-width:620px){
  input,select,textarea{font-size:16px!important;min-height:46px}
  button,.soft-btn,.ghost-btn,.primary-btn,.inline-btn,.text-action-btn{min-height:44px}
  .auth-box button{width:100%}
  .auth-box .password-reveal-btn{width:auto;min-width:82px}
  .detail-table{grid-template-columns:1fr!important}
  .metric-row{grid-template-columns:1fr!important}
  .card-meta,.muted,.explanation{overflow-wrap:anywhere}
  .topbar-actions{grid-template-columns:minmax(0,1fr) auto!important}
  .topbar-actions #authStatus{grid-column:1}
  .topbar-actions #refreshBtn{grid-column:2}
  .topbar-actions #logoutBtn,.topbar-actions #installBtn{grid-column:1 / -1;width:100%}
}
@media(max-width:390px){.mobile-focus-strip{grid-template-columns:1fr!important}.compact-mobile-metrics{grid-template-columns:1fr!important}.mobile-more-sheet{left:6px;right:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media(prefers-contrast:more){:root{--line:rgba(255,255,255,.35);--line-strong:rgba(124,255,69,.82);--muted:#d5e1d8}.panel-card,.summary-card,.hero-panel,.detail-dialog,.auth-box{border-width:2px!important}}

/* v0.8.2.3.1 - trasparenza multimercato */
.market-choice-section { margin-top: 20px; }
.market-choice-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.market-choice-heading h2 { margin: 0 0 6px; }
.market-choice-heading p { margin: 0; max-width: 760px; }
.choice-count { white-space: nowrap; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .82rem; font-weight: 800; }
.market-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.market-choice-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,.04); }
.market-choice-card.recommended { border-color: var(--line-strong); background: radial-gradient(circle at top right, rgba(124,255,69,.14), rgba(255,255,255,.045)); }
.market-choice-card.discouraged { opacity: .78; }
.market-choice-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.market-choice-top span { color: var(--muted); font-size: .8rem; font-weight: 750; }
.market-choice-top strong { font-size: 1.05rem; }
.market-choice-probability { margin-top: 10px; font-size: 1.55rem; line-height: 1; font-weight: 900; }
.market-choice-bar { height: 6px; margin: 10px 0 12px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.market-choice-bar span { display: block; width: var(--choice-value); height: 100%; border-radius: inherit; background: currentColor; }
.market-choice-card.recommended .market-choice-bar { color: var(--accent); }
.market-choice-card.prudent .market-choice-bar { color: #b9df7b; }
.market-choice-card.balanced .market-choice-bar { color: #f1cc68; }
.market-choice-card.risky .market-choice-bar { color: #e7a05f; }
.market-choice-card.discouraged .market-choice-bar { color: #cc7474; }
.market-choice-label { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: .76rem; font-weight: 850; }
.market-choice-card.recommended .market-choice-label { color: var(--accent); background: rgba(124,255,69,.1); }
.market-choice-card.discouraged .market-choice-label { color: #efaaaa; }
.market-choice-card p { margin: 9px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.choice-disclaimer { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--line-strong); border-radius: 0 12px 12px 0; background: rgba(255,255,255,.035); color: var(--muted); font-size: .84rem; line-height: 1.5; }
@media (max-width: 720px) {
  .market-choice-heading { display: grid; }
  .choice-count { justify-self: start; }
  .market-choice-grid { grid-template-columns: 1fr; }
}