/* === VALUE STATS PAGE ===
   Wydzielone z value_stats.html (30.08). Powod: <style> stal na KONCU bloku content,
   wiec przegladarka renderowala surowy HTML (goly tekst, przyciski jako linie listy)
   i przerysowywala strone dopiero po dojsciu do stylow. Przy ~110 kafelkach dawalo to
   widoczne mrugniecie przy kazdym odswiezeniu. Plik statyczny laduje sie z <head>
   i jest cache'owany przez przegladarke. */

.vs-page{max-width:1320px;margin:0 auto;padding:6rem 1.5rem 3rem}

/* Header */
.vs-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1.25rem;gap:1rem;flex-wrap:wrap}
.vs-title{font-size:1.5rem;font-weight:800;color:var(--text);margin:0;line-height:1.2}
.vs-subtitle{font-size:0.8rem;color:var(--text-muted);margin:0.2rem 0 0}
.vs-header-right{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap}
/* Skrot do ustawien powiadomien — obok statusu skanera */
.vs-bell{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.72rem;font-weight:600;color:var(--text-muted);background:var(--card);border:1px solid var(--border);border-radius:6px;padding:0.35rem 0.7rem;text-decoration:none;transition:all 0.15s ease;white-space:nowrap}
.vs-bell:hover{border-color:rgba(16,185,129,0.4);color:#10b981}
.vs-bell-ico{font-size:0.85rem;line-height:1}
@media(max-width:620px){.vs-bell-txt{display:none}}
.vs-scanner-status{display:flex;align-items:center;gap:0.4rem;font-size:0.72rem;color:var(--text-muted);background:var(--card);border:1px solid var(--border);border-radius:6px;padding:0.35rem 0.7rem}
.vs-pulse{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 4px #22c55e;animation:vsPulse 2s infinite}
@keyframes vsPulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* Toolbar (stats + filters) */
.vs-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:0.75rem 1.25rem}
.vs-toolbar-stats{display:flex;align-items:center;gap:1.1rem}
.vs-tstat{display:flex;align-items:baseline;gap:0.35rem}
.vs-tstat-val{font-size:1.15rem;font-weight:800;line-height:1}
.vs-tstat-val.green{color:#22c55e}
.vs-tstat-val.orange{color:#f59e0b}
.vs-tstat-val.blue{color:#3b82f6}
.vs-tstat-lbl{font-size:0.6rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.3px}
.vs-tstat-sep{width:1px;height:20px;background:var(--border);margin:0 0.3rem}

/* Filters — trzy GRUPY, kazda z etykieta NAD przyciskami. Wczesniej etykiety staly
   w jednej linii z przyciskami i wszystkie trzy grupy zlewaly sie w jeden ciag. */
.vs-filters{display:flex;flex-direction:column;gap:0.3rem}
.vs-filters-row{display:flex;align-items:center;gap:0.35rem;flex-wrap:wrap}
.vs-filters-label{display:block;font-size:0.55rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}
.vs-filter-btn{font-size:0.68rem;font-weight:600;padding:0.32rem 0.7rem;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;transition:all 0.15s ease;letter-spacing:0.2px;white-space:nowrap}
.vs-filter-btn:hover{border-color:rgba(255,255,255,0.15)}
.vs-filter-btn.active{background:rgba(34,197,94,0.08);border-color:rgba(34,197,94,0.3);color:#22c55e}
.vs-filter-btn.active:hover{background:rgba(34,197,94,0.12)}
.vs-filters-wrap{display:flex;align-items:flex-start;gap:1.1rem;flex-wrap:wrap}
.vs-filters-sep{width:1px;align-self:stretch;background:var(--border)}
@media(max-width:900px){.vs-filters-sep{display:none}}

/* Grid */
.vs-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:0.75rem}
@media(max-width:1200px){.vs-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.vs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.vs-grid{grid-template-columns:1fr}}

/* Cards */
.vs-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:0.5rem;transition:transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease}
.vs-card:hover{transform:translateY(-1px);border-color:rgba(34,197,94,0.2);box-shadow:0 4px 20px rgba(0,0,0,0.15)}

/* Card top row */
.vs-card-top-row{display:flex;align-items:center;justify-content:space-between}
.vs-pct{font-size:1.2rem;font-weight:800;color:#22c55e;letter-spacing:-0.3px}
.vs-pct.warm{color:#f59e0b}
.vs-pct.hot{color:#ef4444}
.vs-badge{font-size:0.58rem;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:0.2px;border:1px solid}
.vs-badge.over{color:#22c55e;border-color:rgba(34,197,94,0.25);background:rgba(34,197,94,0.04)}
.vs-badge.under{color:#ef4444;border-color:rgba(239,68,68,0.25);background:rgba(239,68,68,0.04)}
/* Cross-line: zamiast procentu (nieporownywalnego) opis natury okazji */
.vs-crossbadge{font-size:0.68rem;font-weight:700;color:#7cc7f5;background:rgba(56,189,248,0.12);border:1px solid rgba(56,189,248,0.4);padding:3px 9px;border-radius:6px;letter-spacing:0.2px;cursor:help;white-space:nowrap;text-transform:uppercase}
.vs-card-cross{font-size:0.6rem;color:var(--text-dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-card-cross strong{color:var(--text-muted);font-weight:700}

/* Card info */
.vs-card-info{display:flex;flex-direction:column;gap:2px}
.vs-card-market{font-size:0.88rem;font-weight:700;color:var(--text);line-height:1.25}
.vs-card-team{color:#8a8a9a;font-weight:400}
.vs-card-match{font-size:0.78rem;color:var(--text-muted)}
/* Godzina rozpoczecia — obok nazwy meczu, zeby bylo widac, ile zostalo czasu */
.vs-card-kick{color:var(--text-dim);font-weight:600}
.vs-card-kick.soon{color:#f59e0b}

/* Odds row — grid zamiast flexa, zeby kafelki mialy ROWNA szerokosc niezaleznie od tego,
   czy sa dwa czy trzy (przy flex:1 karta z dwoma kursami rozciagala je inaczej niz karta
   z trzema, przez co siatka wygladala nierowno). */
.vs-card-odds{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0.35rem;margin-top:auto;padding-top:0.5rem;align-items:stretch}
.vs-odd{text-align:center;padding:0.45rem 0.3rem;border-radius:6px;border:1px solid;display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0}
.vs-odd.bc{background:rgba(245,158,11,0.04);border-color:rgba(245,158,11,0.18)}
.vs-odd.sb{background:rgba(59,130,246,0.04);border-color:rgba(59,130,246,0.18)}
.vs-odd.fair{background:rgba(255,255,255,0.015);border-color:rgba(255,255,255,0.07)}
.vs-odd.best{border-color:rgba(34,197,94,0.35);box-shadow:0 0 6px rgba(34,197,94,0.12)}
.vs-odd-label{display:block;font-size:0.54rem;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-odd.bc .vs-odd-label{color:rgba(245,158,11,0.65)}
.vs-odd.sb .vs-odd-label{color:rgba(59,130,246,0.65)}
.vs-odd.fair .vs-odd-label{color:var(--text-dim)}
.vs-odd-val{font-size:1rem;font-weight:800}
.vs-odd.bc .vs-odd-val{color:#f59e0b}
.vs-odd.sb .vs-odd-val{color:#3b82f6}
.vs-odd.fair .vs-odd-val{color:var(--text-muted);font-size:0.9rem;font-weight:600}
/* Procent PER BUKMACHER — bez tego kurs ponizej kursu bazowego stal pod wspolnym,
   dodatnim naglowkiem i wygladal jak czesc okazji (Betclic 1.62 przy bazowym 1.909). */
.vs-odd-pct{display:block;font-size:0.62rem;font-weight:700;color:#22c55e;margin-top:1px;line-height:1.1}
.vs-odd-pct.neg{color:#8a8a9a}
.vs-odd.novalue{opacity:0.55}
/* Kurs ponizej kursu bazowego nie moze byc podswietlony na zielono jako "best",
   nawet gdy jest wyzszy od drugiego bukmachera. */
.vs-odd.novalue.best{box-shadow:none;border-color:rgba(255,255,255,0.07)}
/* Bukmacher bez tego rynku — kafelek zostaje (rowny uklad), ale wygaszony */
.vs-odd.empty{opacity:0.32;background:rgba(255,255,255,0.012);border-color:rgba(255,255,255,0.05)}
.vs-odd.empty .vs-odd-val{color:#6a6a7a;font-weight:600}
.vs-odd.empty .vs-odd-label{color:#5a5a6a !important}

/* Empty state */
.vs-empty{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:3.5rem 2rem;text-align:center}
.vs-empty p{color:var(--text-muted);font-size:0.95rem;margin:0 0 0.3rem}
.vs-empty span{color:var(--text-dim);font-size:0.75rem}

/* Mobile */
@media(max-width:640px){
    .vs-page{padding:4rem 1rem 2rem}
    .vs-toolbar{flex-direction:column;align-items:flex-start;gap:0.75rem}
    .vs-header{flex-direction:column;align-items:flex-start}
}
