:root{
  --bg: #0b1220;
  --bg-alt: #0f1830;
  --panel: #111a2e;
  --panel-2: #16223c;
  --border: #1f2c47;
  --text: #e8edf7;
  --text-dim: #93a1c2;
  --text-mute: #647094;
  --accent: #22e5a0;
  --accent-dim: #1a9e70;
  --red: #ff5d6c;
  --blue: #4d8bff;
  --yellow: #ffc94d;
  --radius: 10px;
  font-size: 15px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }

/* ===== Top bar ===== */
.topbar{
  position: sticky; top:0; z-index: 50;
  display:flex; align-items:center; justify-content: space-between;
  padding: 0 20px; height: 60px;
  background: rgba(11,18,32,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-left{ display:flex; align-items:center; gap:14px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ width:32px; height:32px; display:block; }
.brand-name{ font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.brand-name span{ color: var(--accent); }
.brand-sub{ font-size: 11px; color: var(--text-mute); letter-spacing: 0.06em; text-transform: uppercase; margin-top:-2px; }

.main-nav{ display:flex; gap: 6px; }
.main-nav a{
  padding: 9px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-dim);
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.main-nav a:hover{ color: var(--text); background: var(--panel-2); }
.main-nav a.active{ color: var(--bg); background: var(--accent); }

/* Secondary nav shown inside the sidebar drawer on small screens,
   so Fixtures/Moneyway are always reachable even when .main-nav
   is hidden by the responsive breakpoint below. */
.mobile-nav{ display:none; }

.topbar-right{ display:flex; align-items:center; gap:10px; }
.currency-select{
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight:600; cursor:pointer;
}
.burger{ display:none; background:none; border:none; color:var(--text); font-size:22px; cursor:pointer; }

.notif-btn{
  display:flex; align-items:center; justify-content:center;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  width: 38px; height: 38px; border-radius: 50%; font-size: 16px; cursor:pointer;
  transition: border-color .15s, color .15s;
  flex-shrink: 0;
}
.notif-btn:hover{ border-color: var(--accent-dim); color: var(--accent); }
.notif-btn.enabled{ width:auto; padding:0 12px; border-radius:19px; border-color: var(--accent); color: var(--accent); background: rgba(34,229,160,.08); font-weight:700; font-size:13px; gap:6px; }
.notif-btn.denied{ border-color: var(--red); color: var(--red); }

.notif-wrap{ position:relative; }
.notif-toast{
  position:absolute; top: calc(100% + 8px); right:0; z-index: 50;
  background: var(--panel); border:1px solid var(--border); border-radius:8px;
  padding: 10px 14px; font-size:12.5px; color: var(--text); width: 260px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); line-height:1.4;
}
.notif-toast.error{ border-color: var(--red); color: var(--red); }
.notif-toast::before{
  content:""; position:absolute; top:-6px; right:14px; width:10px; height:10px;
  background: var(--panel); border-left:1px solid var(--border); border-top:1px solid var(--border);
  transform: rotate(45deg);
}

/* ===== Layout ===== */
.layout{ display:flex; min-height: calc(100vh - 60px); }

.sidebar{
  width: 270px; flex-shrink:0;
  border-right: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 16px 12px 40px;
  overflow-y: auto;
}
.sidebar-title{
  display:flex; align-items:center; justify-content: space-between;
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-mute); font-weight:700; margin: 6px 6px 10px;
}
.search-box{
  display:flex; align-items:center; gap:8px;
  background: var(--panel-2); border:1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 14px;
}
.search-box input{
  background:none; border:none; outline:none; color: var(--text); width:100%; font-size: 13px;
}
.search-box svg{ flex-shrink:0; opacity:.6; }

.country-group{ margin-bottom: 4px; }
.country-header{
  display:flex; align-items:center; gap:8px;
  padding: 8px 6px; border-radius:8px; cursor:pointer;
  font-size: 13.5px; font-weight:700; color: var(--text);
  user-select:none;
}
.country-header:hover{ background: var(--panel-2); }
.country-header .flag{ font-size:16px; width:20px; text-align:center; display:inline-flex; align-items:center; justify-content:center; }
/* Real flag images (see flagHtml() in app.js) — a subtle border/shadow
   keeps pale flags (e.g. Japan, mostly white) visible against the dark
   panel background, and a small radius avoids a harsh rectangular edge. */
.flag-img{ vertical-align:middle; border-radius:2px; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.country-header .chev{ margin-left:auto; transition: transform .15s; color: var(--text-mute); }
.country-group.open .chev{ transform: rotate(90deg); }
.league-list{ display:none; padding-left: 34px; }
.country-group.open .league-list{ display:block; }
.league-item{
  display:flex; align-items:center; justify-content: space-between;
  padding: 6px 8px; border-radius: 6px; font-size: 13px; color: var(--text-dim);
  cursor:pointer;
}
.league-item:hover{ background: var(--panel-2); color: var(--text); }
.league-item.active{ color: var(--accent); font-weight:700; background: rgba(34,229,160,.08); }
.league-count{ font-size: 11px; color: var(--text-mute); }

/* "Tutte le competizioni" — always the first, always-visible sidebar
   entry (outside the collapsible per-country groups) so a filtered
   view can always be undone with one click, no matter how deep you've
   navigated into a specific country/competition. */
.all-leagues-item{
  font-size: 13.5px; font-weight:700; color: var(--text);
  padding: 9px 8px; border-radius: 8px; margin-bottom: 10px;
  border: 1px solid var(--border); background: var(--panel-2);
}
.all-leagues-item:hover{ border-color: var(--accent-dim); }
.all-leagues-item.active{ color: var(--accent); border-color: var(--accent); background: rgba(34,229,160,.1); }

/* ===== Content ===== */
.content{ flex:1; padding: 20px 24px 60px; max-width: 1200px; }
.page-header{ margin-bottom: 16px; }
.page-header h1{ font-size: 22px; margin:0 0 4px; letter-spacing: -0.01em; }
.page-header p{ margin:0; color: var(--text-dim); font-size: 13.5px; }

.toolbar{
  display:flex; align-items:center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 18px;
}
.tabs{ display:flex; gap:4px; background: var(--panel-2); padding:4px; border-radius: 10px; border:1px solid var(--border); }
.tab-btn{
  background:none; border:none; color: var(--text-dim); font-weight:700; font-size: 13px;
  padding: 7px 14px; border-radius: 7px; cursor:pointer; transition: all .15s;
}
.tab-btn.active{ background: var(--accent); color: #0a1220; }
.tab-btn:not(.active):hover{ color: var(--text); }

.market-select{
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight:600; cursor:pointer;
}

.spacer{ flex:1; }
.date-nav{ display:flex; align-items:center; gap:8px; background: var(--panel-2); border:1px solid var(--border); border-radius:8px; padding: 4px 6px; }
.date-nav button{ background:none; border:none; color: var(--text-dim); cursor:pointer; font-size:16px; padding: 4px 8px; border-radius:6px; }
.date-nav button:hover{ background: var(--panel); color:var(--text); }
.date-nav .date-label{ font-size:13px; font-weight:700; min-width: 90px; text-align:center; }

.filter-toggle{
  display:flex; align-items:center; gap:6px;
  background: var(--panel-2); border:1px solid var(--border); color: var(--text);
  padding: 8px 12px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;
}
.filter-toggle:hover{ border-color: var(--accent-dim); }
.filter-toggle .chip-count{
  background: var(--accent); color:#08130f; border-radius:10px; padding: 1px 7px;
  font-size:11px; font-weight:800;
}
.filter-toggle.active-toggle{ background: var(--accent-dim); border-color: var(--accent); color:#08130f; }

/* Pre-match vs live odds comparison, shown under a live outcome's price
   wherever odds are rendered (Fixtures rows, Moneyway cards, "Altri
   mercati" modal) — the live number is visually emphasized (accent
   badge + bold) since it's the current/actionable price, while the
   pre-match one is kept as a small dimmed reference alongside it. */
.prematch-live-line{
  font-size: 10.5px; color: var(--text-mute); margin-top: 4px; line-height:1.4;
  display:flex; align-items:center; justify-content:center; gap:5px; flex-wrap:wrap; cursor:help;
}
.prematch-live-line .prematch-value{ color: var(--text-dim); }
.prematch-live-line .prematch-arrow{ color: var(--text-mute); }
.prematch-live-line .live-value{ color: var(--text); font-weight:800; }
.prematch-live-line .live-value.changed{ color: var(--accent); }
.prematch-live-line .live-badge{
  background: var(--red); color:#fff; border-radius:4px; padding: 0 4px;
  font-size: 9px; font-weight:800; letter-spacing:.03em; vertical-align:middle;
}
.prematch-live-line.live-only{ justify-content:flex-start; }
.market-outcome .prematch-live-line{ justify-content:flex-start; width:100%; margin-top:2px; }

/* Team search box + date range (Fixtures/Moneyway toolbars) */
.team-search-box{
  display:flex; align-items:center; gap:8px;
  background: var(--panel-2); border:1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; min-width: 180px;
}
.team-search-box input{
  background:none; border:none; outline:none; color: var(--text); width:100%; font-size: 13px;
}
.team-search-box svg{ flex-shrink:0; opacity:.6; }

.date-range-box{
  display:flex; align-items:center; gap:10px;
  background: var(--panel-2); border:1px solid var(--border); border-radius: 8px;
  padding: 6px 10px;
}
.date-range-box label{
  display:flex; align-items:center; gap:6px; font-size:12px; color: var(--text-mute); font-weight:600;
}
.date-range-box input[type=date]{
  background: var(--panel); border:1px solid var(--border); border-radius:6px; color:var(--text);
  padding: 5px 7px; font-size:12.5px; color-scheme: dark;
}
.date-range-clear{
  background:none; border:none; color: var(--text-mute); cursor:pointer; font-size:13px;
  padding: 2px 4px; border-radius:4px;
}
.date-range-clear:hover{ color: var(--red); }

/* Active market-filter chips shown above the fixtures/moneyway list */
.active-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 14px; }
.active-chip{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(34,229,160,.1); border:1px solid var(--accent-dim); color: var(--accent);
  padding: 6px 8px 6px 12px; border-radius: 20px; font-size:12px; font-weight:700;
}
.active-chip button{
  background: none; border:none; color: var(--accent); cursor:pointer; font-size:12px;
  width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.active-chip button:hover{ background: rgba(34,229,160,.2); }

/* Inline market columns (rendered inside a match card when the user has
   picked one or more markets from the filter modal) */
.inline-markets{
  grid-column: 1 / -1; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border);
  display:flex; flex-direction:column; gap:10px;
}
.inline-markets.loading, .inline-markets.empty{
  font-size:12px; color: var(--text-mute); font-style: italic; padding: 4px 0;
}
/* Animated braille-frame spinner used everywhere a "Caricamento..."
   message is shown — inline market columns, market catalog modal,
   "Altri mercati" modal, AND the main "Aggiornamento dati in corso…"
   status line, all driven by the same JS text-cycling mechanism (see
   textSpinnerHtml()/tickGlobalSpinners() in app.js) instead of a CSS
   `transform: rotate()` on an emoji glyph. That rotation approach used
   to make the spinner look like it was jumping around the screen once
   several loading messages got created/replaced in quick succession
   (every market selection change, every polling refresh) — plain text
   frames with no transform keep the glyph rock-steady right next to
   its message, exactly like the original "Aggiornamento dati in
   corso…" spinner always did. */
.text-spinner{ display:inline-block; color: var(--accent); font-weight:800; }

.inline-market-block .inline-market-title{
  font-size: 11px; font-weight:800; color: var(--accent); text-transform:uppercase;
  letter-spacing:.03em; margin-bottom:6px;
}
.inline-market-outcomes{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:6px; }

.filters-panel{
  display:none; gap: 20px; background: var(--panel); border:1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px; flex-wrap:wrap;
}
.filters-panel.open{ display:flex; }
.filter-field{ display:flex; flex-direction:column; gap:6px; min-width: 160px; }
.filter-field label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color: var(--text-mute); font-weight:700; }
.filter-field input[type=number]{
  background: var(--panel-2); border:1px solid var(--border); border-radius:6px; color:var(--text);
  padding: 7px 9px; font-size: 13px; width: 140px;
}
.filter-field input[type=range]{ width: 160px; }
.filter-reset{ align-self:flex-end; background:none; border:1px solid var(--border); color: var(--text-dim); padding:7px 14px; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; }
.filter-reset:hover{ color: var(--text); border-color: var(--red); }

/* ===== League section ===== */
.league-section{ margin-bottom: 22px; }
.league-section-header{
  display:flex; align-items:center; gap:8px;
  padding: 10px 14px; background: var(--panel); border:1px solid var(--border);
  border-radius: 10px 10px 0 0; font-size: 13px; font-weight:700; color: var(--text-dim);
}
.league-section-header .flag{ font-size:15px; display:inline-flex; align-items:center; }
.league-section-header .country-name{ color: var(--text); }
.league-section-header .sep{ color: var(--text-mute); }
.league-link{ color: var(--text); cursor:pointer; }
.league-link:hover{ color: var(--accent); text-decoration: underline; }
.money-market-tag .league-link{ color: var(--text-mute); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.money-market-tag .league-link:hover{ color: var(--accent); }

/* Country name/flag, clickable to open the competitions dropdown for
   that country — shown both in section headers (grouped views) and
   inside the league tag on flat/Moneyway rows. */
.country-link{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.country-link:hover .country-name{ color: var(--accent); text-decoration: underline; }
.money-market-tag .country-link{ color: var(--text-mute); }
.money-market-tag .country-link:hover{ color: var(--accent); }

/* Popover listing a country's competitions with live match counts,
   opened next to whatever country-link was clicked (appended to
   <body>, positioned with inline top/left — see toggleCountryDropdown
   in app.js). Same visual language as the sidebar's league-item. */
.country-dropdown{
  position:absolute; z-index: 90; min-width: 220px; max-width: 300px; max-height: 320px;
  overflow-y:auto;
  background: var(--panel); border:1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  padding: 8px;
}
.country-dropdown-title{
  display:flex; align-items:center; gap:6px;
  font-size: 12.5px; font-weight:800; color: var(--text);
  padding: 4px 6px 8px; border-bottom: 1px solid var(--border); margin-bottom:6px;
}
.country-dropdown-item{
  display:flex; align-items:center; justify-content: space-between; gap:10px;
  padding: 7px 8px; border-radius: 6px; font-size: 13px; color: var(--text-dim); cursor:pointer;
}
.country-dropdown-item:hover{ background: var(--panel-2); color: var(--text); }
.country-dropdown-item.active{ color: var(--accent); font-weight:700; background: rgba(34,229,160,.08); }
.country-dropdown-item .league-count{ font-size: 11px; color: var(--text-mute); }
.country-dropdown-empty{ padding: 8px 6px; font-size:12.5px; color: var(--text-mute); }
.match-table{
  border: 1px solid var(--border); border-top:none; border-radius: 0 0 10px 10px; overflow:hidden;
  background: var(--panel);
}

/* Fixture row */
.match-row{
  position: relative;
  display:grid;
  grid-template-columns: 60px 1fr 260px;
  align-items:center;
  gap: 10px;
  /* Extra top padding reserves room for the "Altri mercati" button
     pinned to the card's top-right corner, so it never overlaps the
     vertically-centered time/teams/odds content below it. */
  padding: 34px 14px 12px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.match-row:last-child{ border-bottom:none; }
.match-row:hover{ background: var(--panel-2); }

.event-clickable{ cursor: pointer; }
.event-clickable:hover{ background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }

.moneyway-focus-banner{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: rgba(34,229,160,0.08); border: 1px solid var(--accent-dim);
  color: var(--text); font-size: 13px; font-weight:600;
  padding: 10px 14px; border-radius: 10px; margin-bottom: 12px;
}
.moneyway-focus-banner button{
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; font-size:12px; font-weight:700; cursor:pointer;
}
.moneyway-focus-banner button:hover{ border-color: var(--accent-dim); color: var(--accent); }

/* "Altri mercati" pinned to the top-right corner of each match card,
   instead of stacked under the team names — keeps it reachable at a
   glance regardless of how many odds/inline-market columns are shown. */
.more-markets-btn.corner{
  position: absolute; top: 8px; right: 14px; margin-top: 0; z-index: 2;
}

.match-time{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.match-time .time{ font-size: 13px; font-weight:700; color: var(--text); }
.match-time .date{ font-size:10.5px; color: var(--text-mute); }
.status-live{ color: var(--accent); font-size: 11px; font-weight:800; display:flex; flex-direction:column; align-items:center; }
.status-live .min{ font-size: 12px; }
.status-ft{ color: var(--text-mute); font-size:11px; font-weight:800; }
.match-time .score{ font-size: 14px; font-weight:800; color: var(--text); margin-top: 2px; }

.match-teams{ min-width:0; }
.match-teams a{ display:flex; flex-direction:column; gap:5px; }
/* Team names in Fixtures: no longer an <a> to the external source page
   (Sorgente 1/2) — clicking anywhere on the event card (including the
   team names) now jumps to that event's own Moneyway view instead, via
   the .event-clickable delegated handler in app.js. */
.match-teams .team-names-link{ display:flex; flex-direction:column; gap:5px; cursor:pointer; }
.team-line{ display:flex; align-items:center; gap:8px; font-size: 14px; font-weight:600; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.team-dot{ width:6px; height:6px; border-radius:50%; background: var(--text-mute); flex-shrink:0; }
.match-score{ margin-left:auto; font-weight:800; color: var(--accent); padding-left:10px; }

.odds-row{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.odd-cell{
  background: var(--panel-2); border:1px solid var(--border); border-radius:7px;
  padding: 6px 4px; text-align:center;
}
.odd-cell .label{ font-size: 10px; color: var(--text-mute); font-weight:700; }
.odd-cell .value{ font-size: 13.5px; font-weight:800; color: var(--text); }
/* "Migliore" is a plain, static fact (highest price currently on offer
   among the tracked bookmakers) — kept visually neutral/dim so it's
   never confused with the colored trend arrow below it, which reflects
   a completely different thing (market-wide movement since opening). */
.odd-cell .best-odd{ font-size: 10px; color: var(--text-dim); font-weight:700; cursor:help; }
.odd-cell .move{ font-size: 10px; font-weight:700; cursor:help; }
.move-up{ color: var(--accent); }
.move-down{ color: var(--red); }
.move-flat{ color: var(--text-mute); }

.league-header-cols{ display:grid; grid-template-columns: 60px 1fr 260px; padding: 6px 14px; }
.league-header-cols .cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; font-size:10.5px; color: var(--text-mute); font-weight:700; text-transform:uppercase; }

/* ===== Moneyway rows =====
   Redesigned as a vertical stack (match info on top, full-width outcome
   cards below) instead of a cramped 3-column grid squeezed into a fixed
   340px sidebar — the old layout truncated/wrapped labels illegibly,
   especially on mobile where it collapsed to unreadable vertical text. */
.money-row{
  position: relative;
  display:flex;
  flex-direction:column;
  gap: 12px;
  /* Extra top padding reserves room for the "Altri mercati" button
     pinned to the card's top-right corner (see .more-markets-btn.corner). */
  padding: 40px 16px 16px;
  border-bottom: 1px solid var(--border);
}
.money-row:last-child{ border-bottom:none; }
.money-row:hover{ background: var(--panel-2); }

.money-row-top{ display:flex; align-items:center; gap:14px; }
.money-row-top .match-time{ flex-shrink:0; }
.money-row-top .match-teams{ flex:1; min-width:0; }

.money-market-tag{ font-size: 10.5px; color: var(--text-mute); font-weight:700; margin-bottom:4px; text-transform:uppercase; letter-spacing:.03em; }

.money-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.money-cell{
  background: var(--panel-2); border:1px solid var(--border); border-radius:10px;
  padding: 12px; position:relative; overflow:hidden;
}
.money-cell .label{ font-size:12.5px; font-weight:800; color: var(--text); line-height:1.35; margin-bottom:6px; }
.money-cell .amount{ font-size: 13.5px; font-weight:800; color: var(--text); margin-top:2px; }
.money-cell .pct{ font-size: 19px; font-weight:800; color: var(--accent); line-height:1.2; }
.money-cell .pct-caption{ font-size: 10px; color: var(--text-mute); font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin-bottom:8px; }
.money-cell .odd-line{ font-size: 11.5px; color: var(--text-dim); margin-top:6px; line-height:1.5; }
.money-bar-bg{ position:absolute; left:0; bottom:0; height:4px; width:100%; background: var(--border); }
.money-bar-fill{ position:absolute; left:0; bottom:0; height:4px; background: var(--accent); }
.money-cell.dominant{ border-color: var(--accent-dim); box-shadow: inset 0 0 0 1px rgba(34,229,160,.25); }
.money-cell.dominant .pct{ color: var(--accent); }

@media (max-width: 720px){
  .money-cols{ grid-template-columns: 1fr; }
}

.avg-note{
  font-size: 11px; color: var(--text-mute); margin-top: 8px; padding: 0 2px;
}
.avg-note b{ color: var(--text-dim); }

/* ===== Empty / loading ===== */
.empty-state{
  text-align:center; padding: 50px 20px; color: var(--text-mute);
  border:1px dashed var(--border); border-radius: 12px;
}
.empty-state .icon{ font-size: 34px; margin-bottom:10px; }

.load-more{
  display:block; margin: 20px auto 0; background: var(--panel-2); border:1px solid var(--border);
  color: var(--text); padding: 10px 22px; border-radius: 8px; font-weight:700; font-size:13px; cursor:pointer;
}
.load-more:hover{ border-color: var(--accent-dim); color: var(--accent); }

/* ===== Alerts panel (push + sound notifications) ===== */
.alerts-panel{
  margin: 30px 0 10px;
  background: linear-gradient(120deg, #10233a, #0d3f31);
  border: 1px solid var(--accent-dim);
  border-radius: 14px; padding: 22px 26px;
}
.alerts-panel-header{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.alerts-panel h3{ margin:0 0 6px; font-size:17px; }
.alerts-panel p{ margin: 0 0 10px; color: var(--text-dim); font-size:13px; max-width: 640px; }
.alerts-panel .cta{
  background: var(--accent); color:#08130f; font-weight:800; padding: 11px 20px; border:none;
  border-radius:8px; cursor:pointer; font-size: 13.5px; white-space:nowrap;
}
.alerts-panel .cta:hover{ filter: brightness(1.08); }
.alerts-panel .cta.active{ background: var(--panel-2); color: var(--accent); border: 1px solid var(--accent); }
.alerts-options{
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08);
  display:flex; flex-direction:column; gap: 12px;
}
.alert-toggle{ display:flex; align-items:center; gap:8px; font-size: 13px; color: var(--text); cursor:pointer; }
.alert-toggle input{ width:16px; height:16px; accent-color: var(--accent); cursor:pointer; }
.filter-field.inline{ flex-direction:row; align-items:center; gap:8px; }
.filter-field.inline label{ text-transform:none; font-size:12.5px; color: var(--text-dim); font-weight:600; }
.filter-field.inline input{ width: 70px; }
.filter-field.inline span{ color: var(--text-dim); font-size:12.5px; }
.alert-status{ font-size: 12px; color: var(--text-mute); font-style: italic; }

.data-disclaimer{
  background: rgba(255,201,77,0.08); border: 1px solid rgba(255,201,77,0.3);
  color: var(--text-dim); font-size: 12.5px; padding: 12px 16px; border-radius: 10px;
  margin-bottom: 16px; line-height: 1.5;
}
.data-disclaimer b{ color: var(--yellow); }

.fetch-status{ font-size: 12.5px; color: var(--text-mute); margin-bottom: 10px; min-height: 16px; }
.fetch-status.error{ color: var(--red); }
.fetch-status.loading{ color: var(--text-dim); }
.sidebar-footer-note{ margin-top: 20px; padding: 12px 8px; font-size: 11px; color: var(--text-mute); line-height:1.5; border-top: 1px solid var(--border); }

footer.site-footer{
  border-top:1px solid var(--border); padding: 24px; text-align:center; color: var(--text-mute); font-size:12px;
}
footer.site-footer b{ color: var(--text-dim); }

/* ===== Extra markets button + modal ===== */
.more-markets-btn{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px; padding: 6px 12px; border-radius: 8px;
  background: var(--panel-2); border:1px solid var(--border);
  color: var(--text-dim); font-size:11.5px; font-weight:700; cursor:pointer;
  white-space:nowrap;
}
.more-markets-btn:hover{ border-color: var(--accent-dim); color: var(--accent); }

.modal-backdrop{
  position:fixed; inset:0; background: rgba(0,0,0,.6); z-index:100;
  display:flex; align-items:center; justify-content:center; padding: 20px;
}
.modal-box{
  background: var(--panel); border:1px solid var(--border); border-radius:14px;
  width: 100%; max-width: 640px; max-height: 82vh; display:flex; flex-direction:column;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.modal-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding: 18px 20px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.modal-title{ font-size:16px; font-weight:800; color: var(--text); }
.modal-subtitle{ font-size:12.5px; color: var(--text-mute); margin-top:4px; }
.modal-close{
  background: var(--panel-2); border:1px solid var(--border); color: var(--text-dim);
  width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:14px; flex-shrink:0;
}
.modal-close:hover{ color: var(--text); border-color: var(--accent-dim); }

.modal-tabs{
  display:flex; gap:6px; flex-wrap:wrap; padding: 12px 20px; border-bottom:1px solid var(--border);
  flex-shrink:0; max-height: 110px; overflow-y:auto;
}
.market-tab{
  background: var(--panel-2); border:1px solid var(--border); border-radius:20px;
  padding: 6px 12px; color: var(--text-dim); font-size:11.5px; font-weight:700; cursor:pointer;
  white-space:nowrap; display:flex; align-items:center; gap:6px;
}
.market-tab .count{
  background: rgba(255,255,255,.08); border-radius:10px; padding: 1px 6px; font-size:10.5px; font-weight:800;
}
.market-tab:hover{ border-color: var(--accent-dim); color: var(--text); }
.market-tab.active{ background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.market-tab.active .count{ background: rgba(0,0,0,.15); }

.modal-body{ padding: 16px 20px 20px; overflow-y:auto; }

/* "Dove vuoi andare?" modal shown when clicking an event in Moneyway
   (see openEventChoiceModal() in app.js) — a narrower modal than the
   markets ones, three big stacked choice buttons instead of a form. */
.event-choice-modal{ max-width: 420px; }
.event-choice-options{ display:flex; flex-direction:column; gap:10px; }
.event-choice-btn{
  display:flex; align-items:center; gap:12px; text-align:left;
  background: var(--panel-2); border:1px solid var(--border); border-radius:10px;
  padding: 12px 14px; color: var(--text); font-size:13px; cursor:pointer; width:100%;
}
.event-choice-btn:hover{ border-color: var(--accent-dim); background: rgba(34,229,160,.08); }
.event-choice-btn .icon{ font-size:20px; flex-shrink:0; }
.event-choice-btn small{ color: var(--text-mute); font-weight:600; }

.market-block{ margin-bottom: 18px; }
.market-block:last-child{ margin-bottom:0; }
.market-block-title{
  font-size: 12.5px; font-weight:800; color: var(--accent); text-transform:uppercase;
  letter-spacing:.03em; margin-bottom:8px;
}
.market-outcomes{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.market-outcome{
  background: var(--panel-2); border:1px solid var(--border); border-radius:8px;
  padding: 8px 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
}
.market-outcome .name{ font-size:12px; color: var(--text-dim); font-weight:600; }
.market-outcome .odd{ font-size:13.5px; color: var(--text); font-weight:800; flex-shrink:0; }
.market-outcome .odd-wrap{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.market-outcome .odd-wrap .move{ font-size:11px; font-weight:800; }
/* Implied probability shown next to the outcome name, for markets other
   than the main 1X2 board (e.g. Under/Over, Handicap, ...) in Moneyway —
   same "market share" number already used on the 1X2 cards, just in a
   compact inline form since these outcome cards are much smaller. */
.market-outcome .implied-pct{
  font-size: 11px; font-weight:800; color: var(--accent); flex-shrink:0;
  background: rgba(34,229,160,.1); border-radius:6px; padding: 1px 6px; cursor:help;
}

.modal-loading, .modal-error{ text-align:center; padding: 30px 10px; color: var(--text-mute); font-size:13px; }
.modal-loading .text-spinner{ font-size: 16px; }

/* Under/Over threshold pairs (e.g. "Linea 2.5" -> Over 2.5 / Under 2.5
   side by side) instead of one long flat list where every Over and
   every Under for every line are interleaved/shuffled together. */
.ou-pairs{ display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:8px; margin-bottom:8px; }
.ou-pair{
  background: var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:8px 10px;
}
.ou-pair-line{
  font-size:10.5px; font-weight:800; color: var(--text-mute); text-transform:uppercase;
  letter-spacing:.03em; margin-bottom:6px;
}
.ou-pair-cells{ display:flex; flex-direction:column; gap:5px; }
.ou-pair .market-outcome{ background: var(--panel); }
.market-outcome.empty{ opacity:.45; }
/* Same "dominant outcome" highlight as the main 1X2 board's
   .money-cell.dominant, extended to every other Moneyway market (e.g.
   Under/Over, Handicap, Doppia Chance, ...): highest implied
   probability within that market gets the same green border/glow. */
.market-outcome.dominant{ border-color: var(--accent-dim); box-shadow: inset 0 0 0 1px rgba(34,229,160,.25); }
.market-outcome.dominant .implied-pct{ color: var(--accent); background: rgba(34,229,160,.18); }

.modal-footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px 20px; border-top:1px solid var(--border); flex-shrink:0;
}
.modal-footer .cta{
  background: var(--accent); color:#08130f; font-weight:800; padding: 9px 22px; border:none;
  border-radius:8px; cursor:pointer; font-size: 13.5px;
}
.modal-footer .cta:hover{ filter: brightness(1.08); }

.market-filter-options{ display:flex; flex-wrap:wrap; gap:8px; }
.market-filter-option{
  display:flex; align-items:center; gap:8px;
  background: var(--panel-2); border:1px solid var(--border); border-radius:20px;
  padding: 7px 14px 7px 10px; font-size:12.5px; color: var(--text-dim); font-weight:600; cursor:pointer;
}
.market-filter-option input{ width:15px; height:15px; accent-color: var(--accent); cursor:pointer; }
.market-filter-option:hover{ border-color: var(--accent-dim); color: var(--text); }
.market-filter-option.checked{ background: rgba(34,229,160,.1); border-color: var(--accent); color: var(--accent); }

.data-source-options{ display:flex; flex-direction:column; gap:10px; }
.data-source-option{
  display:flex; align-items:flex-start; gap:10px;
  background: var(--panel-2); border:1px solid var(--border); border-radius:12px;
  padding: 12px 14px; font-size:12.5px; color: var(--text-dim); font-weight:600; cursor:pointer;
}
.data-source-option input{ width:16px; height:16px; margin-top:2px; accent-color: var(--accent); cursor:pointer; flex-shrink:0; }
.data-source-option b{ color: var(--text); font-size:13.5px; }
.data-source-option small{ color: var(--text-mute); font-weight:500; }
.data-source-option:hover{ border-color: var(--accent-dim); }
.data-source-option.active{ background: rgba(34,229,160,.1); border-color: var(--accent); }
.data-source-option.active b{ color: var(--accent); }

/* ===== Legend ===== */
.legend{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 14px; font-size:11.5px; color: var(--text-mute); }
.legend span{ display:flex; align-items:center; gap:6px; }
.legend i{ width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .sidebar{ position:fixed; left:0; top:60px; bottom:0; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open{ transform: translateX(0); box-shadow: 10px 0 30px rgba(0,0,0,.4); }
  .burger{ display:block; }
  .main-nav{ display:none; }
  /* Fixtures/Moneyway must stay reachable when the top nav is hidden,
     so we surface the same links at the top of the sidebar drawer. */
  .mobile-nav{
    display:flex; flex-direction:column; gap:6px;
    margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
  }
  .mobile-nav a{
    padding: 12px 14px; border-radius: 8px; font-weight:700; font-size: 15px;
    color: var(--text-dim); background: var(--panel-2);
  }
  .mobile-nav a.active{ color: var(--bg); background: var(--accent); }
  .match-row{ grid-template-columns: 46px 1fr; }
  .odds-row{ grid-template-columns: repeat(3,1fr); grid-column: 1 / -1; margin-top:8px; }
  .money-row-top{ align-items:flex-start; }
  .league-header-cols{ display:none; }
}

/* ===== Compact row density (⚙️ Impostazioni → Visualizzazione righe) =====
   Applied via a body-level class (state.rowDensity, see app.js) so it
   works on both Fixtures and Moneyway without touching any markup.
   This is deliberately AGGRESSIVE: each event collapses to a single
   thin line (time + teams only, "vs" instead of two stacked name
   lines, no date, icon-only "Altri mercati" button) — odds, the 1X2
   Moneyway cards, and any selected extra markets are all hidden by
   default and only revealed in an expanding panel that unfolds
   in-place, pushing the rows below it down, when the row is clicked.
   A closed row's click expands it; a click on an already-expanded
   row runs its normal navigation action instead (focus on Moneyway
   from Fixtures, or the destination-choice modal from Moneyway), and
   a dedicated collapse button appears on the expanded row so it can
   be closed again explicitly. Nothing is truncated or approximated
   once expanded — it's the exact same information as the default
   view, just tucked away until actually needed. */

/* --- Fixtures: collapse the 3-column grid down to time+teams only;
   the odds column becomes a full-width row that unfolds on click
   instead of occupying a permanently-reserved 260px column. --- */
body.row-density-compact .match-row{
  grid-template-columns: auto 1fr;
  padding: 5px 28px 5px 8px;
  gap: 8px;
}
body.row-density-compact .odds-row{
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; gap:5px;
  transition: max-height .2s ease, opacity .15s ease, margin-top .2s ease;
}
body.row-density-compact .match-row.row-expanded .odds-row{
  max-height: 260px; opacity: 1; margin-top: 6px;
}
body.row-density-compact .odd-cell{ padding: 4px 3px; }
body.row-density-compact .odd-cell .label{ font-size: 9px; }
body.row-density-compact .odd-cell .value{ font-size: 12px; }
body.row-density-compact .odd-cell .best-odd,
body.row-density-compact .odd-cell .move{ font-size: 9px; }

/* --- Moneyway: same idea — the 1X2 cards and any extra-market blocks
   stay collapsed until the row is hovered. --- */
body.row-density-compact .money-row{
  padding: 5px 28px 5px 8px;
  gap: 0;
}
body.row-density-compact .money-row-top{ gap:8px; }
body.row-density-compact .money-cols{
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; gap:6px;
  transition: max-height .2s ease, opacity .15s ease, margin-top .2s ease;
}
body.row-density-compact .money-row.row-expanded .money-cols{
  max-height: 900px; opacity: 1; margin-top: 8px;
}
body.row-density-compact .money-cell{ padding: 8px; }
body.row-density-compact .money-cell .label{ font-size: 11px; margin-bottom:3px; }
body.row-density-compact .money-cell .pct{ font-size: 15px; }
body.row-density-compact .money-cell .pct-caption{ font-size: 9px; margin-bottom:4px; }
body.row-density-compact .money-cell .odd-line{ font-size: 10.5px; margin-top:3px; }
body.row-density-compact .money-market-tag{ font-size: 9px; margin-bottom:0; flex-shrink:0; }
/* Both Fixtures' flat chronological view (sortMode "time") and every
   Moneyway row show a league/market tag above the team names — put it
   on the same line as the team names instead of stacked above,
   otherwise it alone would keep the collapsed row two lines tall
   instead of one. */
body.row-density-compact .match-row-flat .match-teams,
body.row-density-compact .money-row-top .match-teams{ display:flex; align-items:center; gap:6px; }

/* --- Selected extra markets (both pages): collapsed by default,
   unfolds on hovering the row that contains them. --- */
body.row-density-compact .inline-markets{
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; padding-top: 0;
  border-top-color: transparent;
  transition: max-height .2s ease, opacity .15s ease, margin-top .2s ease, padding-top .2s ease;
}
body.row-density-compact .match-row.row-expanded .inline-markets,
body.row-density-compact .money-row.row-expanded .inline-markets{
  max-height: 700px; opacity: 1; margin-top: 8px; padding-top: 8px;
  border-top-color: var(--border);
}
body.row-density-compact .inline-markets.loading,
body.row-density-compact .inline-markets.empty{ display:none; } /* nothing useful to show collapsed */
body.row-density-compact .market-outcome{ padding: 5px 8px; }
body.row-density-compact .ou-pairs,
body.row-density-compact .inline-market-outcomes,
body.row-density-compact .market-outcomes{ gap:5px; margin-bottom:5px; }

/* --- Shared: team names on one line ("Team A vs Team B") instead of
   two stacked lines, no separator dot, smaller everything, icon-only
   "Altri mercati" button, no date under the kickoff time. --- */
body.row-density-compact .team-names-link{ flex-direction: row; align-items:center; gap:0; }
body.row-density-compact .team-line{ font-size: 12px; gap:0; white-space:nowrap; }
body.row-density-compact .team-line:first-child::after{
  content: " vs "; color: var(--text-mute); font-weight:500; white-space:pre;
}
body.row-density-compact .team-dot{ display:none; }
body.row-density-compact .match-time{ flex-direction:row; gap:4px; align-items:center; }
body.row-density-compact .match-time .time{ font-size: 11px; }
body.row-density-compact .match-time .date{ display:none; }
body.row-density-compact .match-time .score{ font-size:11px; margin-top:0; }
body.row-density-compact .status-live{ flex-direction:row; gap:4px; font-size:10px; }
body.row-density-compact .status-live .min{ font-size:10px; }
body.row-density-compact .status-ft{ font-size:10px; }
body.row-density-compact .more-markets-btn.corner{
  font-size: 0; line-height:0; padding: 0; width: 22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; top:4px; right:5px;
  white-space:nowrap; overflow:hidden; gap:0;
}
body.row-density-compact .more-markets-btn.corner::before{
  content: "📊"; font-size: 12px; display:block; line-height:1;
}
body.row-density-compact .league-section{ margin-bottom: 8px; }
body.row-density-compact .league-section-header{ padding: 6px 10px; font-size:12px; }
body.row-density-compact .league-header-cols{ display:none; }

/* --- Click-to-expand affordance + dedicated collapse button --- */
body.row-density-compact .match-row.event-clickable,
body.row-density-compact .money-row .team-names-link[data-source-url]{ cursor: pointer; }
.row-collapse-btn{
  display:none;
  align-items:center; justify-content:center;
  gap:4px;
  margin-top:8px;
  padding:5px 10px;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color: var(--text-mute);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  width: fit-content;
}
.row-collapse-btn:hover{ color: var(--accent); border-color: var(--accent); }
body.row-density-compact .match-row.row-expanded .row-collapse-btn,
body.row-density-compact .money-row.row-expanded .row-collapse-btn{
  display: inline-flex;
}