:root{--primary: #10b981;--primary-dark: #059669;--secondary: #6366f1;--danger: #ef4444;--warning: #f59e0b;--bg: #0f172a;--bg-card: #1e293b;--bg-hover: #334155;--text: #f1f5f9;--text-muted: #94a3b8;--border: #334155}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}.container{max-width:1400px;margin:0 auto;padding:2rem}header{margin-bottom:2rem}header h1{font-size:2rem;margin-bottom:.5rem;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}header .subtitle{color:var(--text-muted)}.card{background:var(--bg-card);border-radius:12px;padding:1.5rem;border:1px solid var(--border);transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:var(--bg-hover);color:var(--text)}.btn-secondary:hover{background:var(--border)}.badge{padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:600}.badge-success{background:#10b98133;color:var(--primary)}.badge-danger{background:#ef444433;color:var(--danger)}.badge-warning{background:#f59e0b33;color:var(--warning)}.badge-muted{background:#94a3b833;color:var(--text-muted)}.prob-bar{height:8px;background:var(--bg);border-radius:4px;overflow:hidden;margin-top:.5rem}.prob-bar .prob-fill{height:100%;border-radius:4px;transition:width .3s}.prob-bar .prob-fill.high{background:linear-gradient(90deg,var(--primary),#34d399)}.prob-bar .prob-fill.medium{background:linear-gradient(90deg,var(--warning),#fbbf24)}.prob-bar .prob-fill.low{background:linear-gradient(90deg,var(--danger),#f87171)}.loading{text-align:center;padding:2rem;color:var(--text-muted)}.loading .spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{to{transform:rotate(360deg)}}.connection-status{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--bg-card);border-radius:8px;font-size:.85rem;margin-bottom:1rem}.connection-status .status-dot{width:8px;height:8px;border-radius:50%}.connection-status .status-dot.connected{background:var(--primary);box-shadow:0 0 8px var(--primary)}.connection-status .status-dot.disconnected{background:var(--danger)}.match-card{background:var(--bg-card);border-radius:10px;padding:.85rem;border:1px solid var(--border);margin-bottom:.6rem;transition:all .2s}.match-card:hover{border-color:var(--primary)}.match-card .match-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.75rem;color:var(--text-muted)}.match-card .match-teams{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;align-items:center;margin-bottom:.5rem}.match-card .team{display:flex;align-items:center;gap:.5rem}.match-card .team.away{flex-direction:row-reverse;text-align:right}.match-card .team img{width:28px;height:28px;object-fit:contain}.match-card .team .team-name{font-weight:600;font-size:.85rem}.match-card .match-vs{font-weight:700;color:var(--text-muted);font-size:.8rem}.match-card .match-vs.clickable{cursor:pointer;padding:.15rem .35rem;border-radius:4px;transition:all .2s}.match-card .match-vs.clickable:hover{background:#10b9811a;color:var(--primary)}.match-card .match-score{display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:1.2rem;color:var(--primary)}.match-card .match-score .score-home,.match-card .match-score .score-away{min-width:1.5rem;text-align:center}.match-card .match-score .score-separator{color:var(--text-muted);font-size:1rem}.match-card .finished-badge{display:inline-block;background:var(--text-muted);color:#fff;font-size:.6rem;font-weight:700;padding:.1rem .3rem;border-radius:3px;margin-right:.35rem;text-transform:uppercase;letter-spacing:.5px}.match-card .match-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.4rem;padding-top:.5rem;border-top:1px solid var(--border)}.match-card .stat{text-align:center}.match-card .stat .stat-value{display:block;font-size:1rem;font-weight:700;color:var(--primary)}.match-card .stat .stat-label{display:block;font-size:.65rem;color:var(--text-muted);margin-top:.1rem}.match-card .stat .stat-raw{display:block;font-size:.6rem;color:var(--text-muted);opacity:.7}.match-card .stat.xg-stat{background:#10b9811a;border-radius:6px;padding:.3rem .5rem}.match-card .stat.xg-stat .xg-value{font-size:1.1rem;color:var(--primary)}.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}.filters .filter-btn{padding:.5rem 1rem;background:var(--bg);border:none;border-radius:8px;color:var(--text-muted);cursor:pointer;transition:all .2s;font-size:.9rem}.filters .filter-btn:hover{background:var(--bg-hover);color:var(--text)}.filters .filter-btn.active{background:var(--primary);color:#fff}.chart-card{background:var(--bg-card);border-radius:12px;padding:1.5rem;text-align:center}.chart-card h3{margin-bottom:1rem;color:var(--text)}.chart-card .chart-container{position:relative;height:250px;margin-bottom:1rem}.chart-card .chart-stats{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}.chart-card .stat-item{text-align:center}.chart-card .stat-item .stat-value{font-size:1.5rem;font-weight:700;color:var(--primary)}.chart-card .stat-item .stat-label{font-size:.8rem;color:var(--text-muted)}.prediction-card{display:grid;grid-template-columns:1fr auto auto auto;gap:1rem;align-items:center;padding:1rem;background:var(--bg);border-radius:8px;margin-bottom:.5rem}.prediction-card .prediction-match{display:flex;flex-direction:column;gap:.25rem}.prediction-card .prediction-match .prediction-teams{font-weight:600;color:var(--text)}.prediction-card .prediction-match .prediction-date{font-size:.8rem;color:var(--text-muted)}.prediction-card .prediction-type{padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:600;background:#f59e0b33;color:var(--warning)}.prediction-card .prediction-prob{font-weight:700;color:var(--primary)}.prediction-card .prediction-result{display:flex;align-items:center;gap:.5rem}.match-events{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border)}.match-events .events-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}.match-events .events-header .events-title{font-weight:600;color:var(--text);font-size:.75rem}.match-events .events-list{display:flex;flex-direction:column;gap:.25rem}.match-events .event-item{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.4rem;padding:.25rem .5rem;background:var(--bg);border-radius:5px;border-left:2px solid transparent;transition:all .2s;max-width:70%}.match-events .event-item.home-event{border-left-color:var(--primary);margin-right:auto}.match-events .event-item.away-event{border-left:none;border-right:2px solid var(--secondary);margin-left:auto;grid-template-columns:1fr auto auto;text-align:right}.match-events .event-item.away-event .event-details{justify-content:flex-end}.match-events .event-item:hover{background:var(--bg-hover)}.match-events .event-item .event-minute{font-weight:700;color:var(--text);font-size:.7rem;min-width:32px}.match-events .event-item .event-team-logo{width:18px;height:18px;object-fit:contain}.match-events .event-item .event-details{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}.match-events .event-item .event-icon{font-size:.85rem}.match-events .event-item .event-player{font-weight:600;color:var(--text);font-size:.7rem}.match-events .event-item .event-assist{font-size:.6rem;color:var(--text-muted);font-style:italic}@media (max-width: 768px){.container{padding:1rem}header h1{font-size:1.5rem}.match-card{padding:1rem}.match-card .match-teams{grid-template-columns:1fr auto 1fr;gap:.5rem}.match-card .team img{width:28px;height:28px}.match-card .team .team-name{font-size:.8rem}.match-card .match-vs{font-size:.75rem}.match-card .match-stats{grid-template-columns:repeat(2,1fr);gap:.5rem}.match-card .stat .stat-value{font-size:1rem}.match-card .stat .stat-label{font-size:.65rem}.match-events .event-item{max-width:85%;font-size:.8rem}.match-events .event-item .event-minute{font-size:.75rem;min-width:35px}.match-events .event-item .event-team-logo{width:20px;height:20px}.match-events .event-item .event-player{font-size:.75rem}.match-events .event-item .event-assist{font-size:.65rem}.prediction-card{grid-template-columns:1fr;text-align:center}.prediction-card .prediction-result{justify-content:center}}@media (max-width: 480px){.match-card .team{gap:.4rem}.match-card .team img{width:24px;height:24px}.match-card .team .team-name{font-size:.7rem}.match-card .match-stats{grid-template-columns:repeat(2,1fr)}}