:root {
  color-scheme: dark;
  --bg: #050505;
  --panel: #111;
  --panel-2: #202126;
  --line: rgba(255,255,255,.1);
  --text: #f8fafc;
  --muted: #94a3b8;
  --neon: #9cff00;
  --live: #ff1744;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Cairo, Arial, sans-serif;
  padding-bottom: 70px;
}
a { color: inherit; text-decoration: none; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #0a0a0a;
  border-bottom: 2px solid var(--neon);
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 22px;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: max-content; }
.brand img { width: 46px; height: 46px; object-fit: contain; }
.brand strong { display: block; font-size: 20px; font-weight: 900; }
.brand small { display: block; color: var(--neon); font-size: 11px; font-weight: 800; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 18px; flex: 1; }
.main-nav a {
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 900;
  padding: 10px 0;
  border-bottom: 2px solid transparent;
}
.main-nav a.active, .main-nav a:hover { color: var(--neon); border-color: var(--neon); }
.language-menu { position: relative; }
.language-menu button {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 9px 12px;
  font-weight: 900;
  cursor: pointer;
}
.language-options {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 150px;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 6px;
}
.language-options.open { display: grid; gap: 4px; }
.language-options button { text-align: right; width: 100%; }
.live-ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #1c1d21;
  padding: 8px 18px;
  overflow: hidden;
}
.ticker-label { color: var(--live); font-size: 12px; font-weight: 900; }
.ticker-window { overflow: hidden; flex: 1; }
.ticker-track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: ticker 38s linear infinite;
}
.ticker-window:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #000;
  border: 1px solid var(--line);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
}
.ticker-item b { color: var(--neon); }
.ticker-empty { color: var(--muted); font-size: 12px; }
@keyframes ticker { to { transform: translateX(50%); } }
main { max-width: 1280px; margin: 0 auto; padding: 24px 18px; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 28px;
}
.eyebrow {
  display: inline-flex;
  background: var(--neon);
  color: #000;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
}
.hero h1 { font-size: clamp(30px, 5vw, 54px); line-height: 1.1; margin: 18px 0 12px; max-width: 780px; }
.hero p { color: #cbd5e1; max-width: 620px; margin: 0; font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-actions a {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  padding: 12px 18px;
  font-weight: 900;
}
.hero-actions a:first-child { background: var(--neon); color: #000; }
.hero-stats { display: grid; gap: 12px; }
.hero-stats article {
  border: 1px solid var(--line);
  background: #000;
  padding: 18px;
}
.hero-stats small { color: var(--muted); font-weight: 900; }
.hero-stats strong { display: block; color: var(--neon); font-size: 46px; line-height: 1; margin-top: 12px; }
.home-hero { position: relative; overflow: hidden; min-height: 430px; align-items: center; background: linear-gradient(90deg, rgba(7,11,14,.2), rgba(7,11,14,.97) 72%), url('/assets/nawar-ai-hero-v2.png') center/cover no-repeat; border-radius: 14px; }
.home-hero::after { content: ""; position: absolute; inset: auto -80px -140px auto; width: 360px; height: 360px; border: 1px solid rgba(156,255,0,.16); border-radius: 50%; pointer-events: none; }
.home-hero .hero-copy { position: relative; z-index: 2; padding-inline-start: 12px; }
.home-hero .hero-copy h1 { max-width: 590px; font-size: clamp(38px, 5vw, 64px); }
.home-hero .hero-copy h1::after { content: " بذكاء أكبر."; color: var(--neon); }
.hero-kicker, .overview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.update-state { color: var(--muted); font-size: 11px; font-weight: 800; }
.update-state i { display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 12px var(--neon); }
.hero-overview { position: relative; z-index: 1; padding: 16px; border: 1px solid var(--line); background: rgba(0,0,0,.72); }
.overview-heading { padding: 2px 2px 14px; color: var(--text); font-weight: 900; }
.overview-heading small { color: var(--muted); }
.hero-overview .hero-stats { grid-template-columns: repeat(2, 1fr); }
.hero-overview .hero-stats article:first-child { grid-column: span 2; }
.hero-overview .hero-stats article { position: relative; min-height: 116px; }
.stat-accent { position: absolute; inset: auto 14px 12px auto; color: #475569; font: 800 9px Arial, sans-serif; letter-spacing: 1px; }
.live-accent { color: var(--live); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; color: var(--muted); font-size: 11px; font-weight: 800; }
.hero-trust span::before { content: "✓"; color: var(--neon); margin-inline-end: 6px; }
.home-shortcuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 18px; border: 1px solid var(--line); background: var(--line); }
.home-shortcuts a { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 17px; background: #0c0c0c; transition: background .2s, transform .2s; }
.home-shortcuts a:hover { background: #171d13; transform: translateY(-2px); }
.home-shortcuts b { color: var(--neon); font: 900 11px Arial, sans-serif; }
.home-shortcuts span { min-width: 0; flex: 1; }
.home-shortcuts strong, .home-shortcuts small { display: block; }
.home-shortcuts strong { font-size: 13px; }
.home-shortcuts small { margin-top: 4px; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-shortcuts i { color: var(--neon); font-style: normal; }
.home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 34px 0 14px; }
.home-section-heading > div { display: flex; align-items: center; gap: 12px; }
.home-section-heading h2 { margin: 0; font-size: clamp(22px, 3vw, 32px); }
.home-section-heading p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.section-index { color: var(--neon); font: 900 12px Arial, sans-serif; padding: 7px; border: 1px solid rgba(156,255,0,.35); }
.home-section-heading + .match-center { margin-top: 0; }
.tracker-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tracker-header small { color: var(--muted); font: 800 9px Arial, sans-serif; letter-spacing: 1px; }
.home-content-section .section-title > span { display: flex; align-items: center; gap: 10px; }
.home-content-section .section-title b { font: 900 10px Arial, sans-serif; color: #000; background: var(--neon); padding: 5px 6px; }
.home-content-section .section-title a { color: var(--muted); font-size: 11px; }
.league-mark { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 14px; border: 1px solid var(--line); background: #090909; }
.league-mark img { max-width: 38px; max-height: 38px; margin: 0; }
.league-mark span { color: var(--neon); font-size: 22px; font-weight: 900; }
.empty-state { display: grid; gap: 8px; padding: 26px 16px; text-align: center; color: var(--muted); }
.empty-state strong { color: var(--text); }
.empty-state span { font-size: 12px; }
.empty-state a { justify-self: center; margin-top: 5px; padding: 8px 12px; border: 1px solid var(--line); color: var(--neon); font-size: 11px; font-weight: 900; }
.wide-empty { grid-column: 1 / -1; }
.ai-insight { position: relative; overflow: hidden; margin-top: 26px; padding: 20px; border: 1px solid rgba(130,230,55,.3); border-radius: 14px; background: radial-gradient(circle at 90% 50%, rgba(130,230,55,.08), transparent 30%), #0b1114; box-shadow: 0 0 30px rgba(130,230,55,.06); }
.ai-insight::after { content: "AI"; position: absolute; inset: auto auto -45px 20px; color: rgba(130,230,55,.035); font: 900 190px Arial, sans-serif; }
.ai-insight > header, .ai-insight > header > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-insight h2, .ai-insight h3 { margin: 0; }
.ai-insight h2 { font-size: 20px; }
.ai-insight h2 em { color: var(--neon); font-style: normal; }
.ai-orbit { display: grid; place-items: center; width: 40px; height: 40px; color: var(--neon); border: 1px solid var(--neon); border-radius: 50%; font: 900 12px Arial, sans-serif; box-shadow: 0 0 20px rgba(130,230,55,.2); }
.demo-label { color: var(--muted); font-size: 10px; border: 1px solid var(--line); padding: 5px 9px; border-radius: 20px; }
.ai-insight-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 280px 1fr 1fr; gap: 22px; margin-top: 18px; }
.prediction-panel, .ai-summary, .ai-reason { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: rgba(7,11,14,.8); }
.prediction-panel h3, .ai-reason h3 { margin-bottom: 16px; color: var(--neon); font-size: 13px; }
.probability { margin-top: 13px; }
.probability span { display: flex; justify-content: space-between; font-size: 11px; }
.probability strong { color: #ff4d5d; }
.probability i, .confidence i { display: block; overflow: hidden; height: 5px; margin-top: 7px; border-radius: 10px; background: #060809; }
.probability u, .confidence u { display: block; height: 100%; border-radius: inherit; background: #ff4055; text-decoration: none; }
.probability.draw u { background: #aab3b9; }.probability.draw strong { color: #cbd5e1; }
.probability.away u { background: #3777e3; }.probability.away strong { color: #5d93ef; }
.ai-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.ai-summary > div:not(.confidence) { padding: 10px 14px; border-inline-start: 1px solid var(--line); }
.ai-summary small, .ai-summary strong { display: block; }
.ai-summary small { color: var(--muted); font-size: 10px; }.ai-summary strong { margin-top: 9px; }
.expected-score { color: var(--text); font-size: 25px; }
.confidence { grid-column: 1/-1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11px; }
.confidence i { margin: 0; }.confidence u { width: 76%; background: var(--neon); }.confidence b { font-size: 18px; }
.ai-reason > span { float: right; margin-inline-end: 8px; color: var(--neon); }.ai-reason p { color: #d3d9dd; font-size: 11px; line-height: 1.9; }.ai-reason small { display: block; color: #6f7b82; font-size: 9px; line-height: 1.7; }
.home-data-grid { display: grid; grid-template-columns: .75fr 1.4fr; gap: 16px; }.home-data-grid .content-section { margin-top: 26px; }
.scorers-list { margin: 0; padding: 8px 16px 14px; list-style: none; }
.scorers-list li { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }.scorers-list li:last-child { border: 0; }
.scorers-list li > b { width: 18px; color: var(--muted); font: 800 11px Arial, sans-serif; }.scorers-list li:nth-child(-n+3) > b { color: var(--neon); }
.player-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #26323a, #111); color: var(--neon); font: 800 9px Arial, sans-serif; }
.scorers-list div { flex: 1; }.scorers-list strong, .scorers-list small { display: block; }.scorers-list strong { font-size: 11px; }.scorers-list small { color: var(--muted); font-size: 9px; }.scorers-list em { color: var(--text); font-style: normal; font-weight: 900; }
.platform-features { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.platform-features article { display: flex; align-items: center; gap: 12px; padding: 20px; border-inline-start: 1px solid var(--line); }.platform-features article:first-child { border: 0; }
.platform-features article > span { color: var(--neon); font: 900 24px Arial, sans-serif; }.platform-features strong, .platform-features small { display: block; }.platform-features strong { font-size: 12px; }.platform-features small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.newsletter-cta { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 26px; padding: 22px 28px; border: 1px solid rgba(130,230,55,.22); border-radius: 12px; background: linear-gradient(90deg, rgba(130,230,55,.06), #0b1114); }
.newsletter-cta strong, .newsletter-cta span { display: block; }.newsletter-cta strong { font-size: 23px; }.newsletter-cta span { color: var(--muted); font-size: 11px; }
.newsletter-cta form { display: flex; min-width: min(100%, 420px); }.newsletter-cta input { flex: 1; min-width: 0; padding: 12px; border: 1px solid #42505a; background: #0b0f11; color: white; font: inherit; }.newsletter-cta button { border: 0; padding: 0 22px; background: var(--neon); color: #07100a; font: 900 12px Cairo, sans-serif; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.match-center {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  margin-top: 26px;
}
.match-list-panel, .tracker-panel, .content-section {
  border: 1px solid var(--line);
  background: var(--panel);
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--neon);
  font-weight: 900;
}
.section-title small {
  background: #000;
  color: var(--text);
  padding: 4px 8px;
}
.match-list { display: grid; gap: 10px; padding: 12px; max-height: 620px; overflow: auto; }
.match-list.wide { max-height: none; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.match-card {
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 12px;
  cursor: pointer;
}
.match-card.active { border-color: var(--neon); background: #000; }
.match-card small { color: var(--muted); display: block; font-weight: 800; }
.match-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-top: 10px; }
.score { color: var(--neon); font-size: 20px; font-weight: 900; }
.team-away { text-align: left; }
.match-card-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.match-card-actions a { flex: 1; padding: 7px; border: 1px solid var(--line); text-align: center; color: #d7dde1; font-size: 10px; font-weight: 900; }
.match-card-actions .ai-link { color: var(--neon); border-color: rgba(130,230,55,.25); background: rgba(130,230,55,.04); }
.tracker-header { padding: 18px; color: var(--neon); font-weight: 900; border-bottom: 1px solid var(--line); }
.pitch {
  position: relative;
  aspect-ratio: 3 / 2;
  margin: 18px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.75);
  background:
    repeating-linear-gradient(90deg, rgba(156,255,0,.09) 0 64px, rgba(0,0,0,.16) 64px 128px),
    #0b2218;
}
.pitch-line { position: absolute; border-color: rgba(255,255,255,.78); }
.center-line { top: 0; bottom: 0; left: 50%; border-left: 3px solid var(--neon); }
.center-circle {
  width: 16%;
  aspect-ratio: 1;
  border: 4px solid rgba(255,255,255,.75);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.penalty {
  position: absolute;
  top: 22%;
  width: 16%;
  height: 56%;
  border: 4px solid rgba(255,255,255,.75);
}
.penalty.left { left: 0; border-right: 4px solid rgba(255,255,255,.75); }
.penalty.right { right: 0; border-left: 4px solid rgba(255,255,255,.75); }
.player {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  border: 2px solid rgba(255,255,255,.8);
  box-shadow: 0 0 0 7px rgba(156,255,0,.22), 0 12px 24px rgba(0,0,0,.35);
  transform: translate(-50%, -50%);
}
.ball {
  position: absolute;
  z-index: 6;
  width: 38px;
  height: 38px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  transition: left 1.1s ease, top 1.1s ease;
  animation: ball-spin 1.4s linear infinite;
}
@keyframes ball-spin { to { rotate: 360deg; } }
.content-section { margin-top: 26px; }
.content-section.full-page { min-height: 60vh; }
.league-grid, .news-layout, .standings-grid {
  padding: 14px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.league-card, .news-card, .standing-card {
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 16px;
}
.league-card strong, .news-card strong { color: var(--text); display: block; margin-bottom: 8px; }
.league-card span, .news-card p, .standing-card span { color: var(--muted); font-size: 13px; font-weight: 700; }
.news-card.featured { grid-column: span 2; background: #0d1411; border-color: rgba(156,255,0,.25); }
.site-footer{max-width:1280px;margin:32px auto 0;border:1px solid var(--line);border-radius:18px 18px 0 0;background:linear-gradient(145deg,#10171c,#080c0f);color:var(--muted);overflow:hidden}.footer-main{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:42px;padding:42px}.footer-brand>a{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none}.footer-brand img{width:52px;height:52px;object-fit:contain}.footer-brand a span{display:grid}.footer-brand strong{font-size:1.25rem}.footer-brand small{color:var(--neon)}.footer-brand p{max-width:390px;line-height:1.9;font-size:.86rem}.footer-status{display:flex;align-items:center;gap:8px;font-size:.76rem}.footer-status i{width:8px;height:8px;border-radius:50%;background:var(--neon);box-shadow:0 0 12px var(--neon)}.footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:11px}.footer-column>strong{color:var(--text);margin-bottom:6px}.footer-column a{color:var(--muted);text-decoration:none;font-size:.85rem;transition:.2s}.footer-column a:hover{color:var(--neon);transform:translateX(-3px)}.footer-contact span{font-size:.8rem}.footer-bottom{border-top:1px solid var(--line);padding:16px 42px;display:flex;justify-content:space-between;gap:20px;font-size:.76rem}.footer-bottom p{margin:0}.footer-bottom div{display:flex;gap:18px}.footer-bottom a{color:var(--muted);text-decoration:none}
.home-discovery{margin:18px 0 24px;padding:26px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,rgba(126,217,63,.05),rgba(255,255,255,.018))}.home-discovery>header{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:20px}.home-discovery>header>div{display:flex;align-items:center;gap:12px}.home-discovery h2{margin:0}.home-discovery header p{margin:0;max-width:520px;color:var(--muted);font-size:.86rem}.discovery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.discovery-card{display:flex;flex-direction:column;min-height:220px;padding:20px;border:1px solid var(--line);border-radius:14px;background:rgba(5,9,11,.6);color:var(--text);text-decoration:none;transition:.25s}.discovery-card:hover{border-color:rgba(126,217,63,.4);transform:translateY(-4px)}.discovery-icon{font-size:28px;color:var(--neon);margin-bottom:auto}.discovery-card small{color:var(--muted);margin-bottom:5px}.discovery-card strong{font-size:1.1rem}.discovery-card p{color:var(--muted);font-size:.82rem;line-height:1.7}.discovery-card b{color:var(--neon);font-size:.78rem}.discovery-live{background:linear-gradient(145deg,rgba(126,217,63,.11),rgba(5,9,11,.7))}
.mobile-nav {
  position: fixed;
  inset: auto 0 0 0;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  background: #111;
  border-top: 2px solid var(--neon);
  z-index: 60;
}
.mobile-nav a { padding: 12px 6px; text-align: center; font-size: 12px; font-weight: 900; color: #cbd5e1; }
.toolbar {
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.toolbar input,
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #111;
  color: var(--text);
  padding: 13px 14px;
  font-family: inherit;
  font-weight: 800;
  outline: none;
}
.toolbar input:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--neon);
}
.team-grid {
  padding: 14px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.team-card {
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.team-card img,
.team-card span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: contain;
  display: grid;
  place-items: center;
  background: #000;
  color: var(--neon);
  font-weight: 900;
}
.team-card strong {
  color: var(--text);
}
.static-page {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 28px;
  min-height: 52vh;
}
.static-page h1 {
  font-size: clamp(30px, 5vw, 52px);
  margin: 16px 0;
}
.static-page p {
  max-width: 720px;
  color: #cbd5e1;
  font-weight: 700;
  line-height: 1.8;
}
.contact-form {
  margin-top: 24px;
  display: grid;
  gap: 12px;
  max-width: 560px;
}
.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}
.contact-form button {
  border: 0;
  background: var(--neon);
  color: #000;
  padding: 13px 18px;
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
}
.league-card img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
  margin-bottom: 10px;
}
.empty {
  color: var(--muted);
  padding: 14px;
  margin: 0;
  font-weight: 800;
}
.match-hub { display: grid; gap: 18px; }
.match-scoreboard { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(circle at 50% 120%, rgba(130,230,55,.1), transparent 45%), #0b1114; }
.scoreboard-meta { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 13px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.scoreboard-meta b { padding: 4px 9px; border-radius: 20px; color: #fff; background: var(--live); font-size: 9px; }
.scoreboard-main { display: grid; grid-template-columns: 1fr 200px 1fr; align-items: center; gap: 24px; padding: 36px; }
.scoreboard-team { display: flex; align-items: center; justify-content: center; gap: 16px; }.scoreboard-team:last-child { flex-direction: row-reverse; }
.scoreboard-team > span { display: grid; place-items: center; width: 76px; height: 76px; border: 2px solid var(--team-color); border-radius: 50%; background: #11181d; color: white; font-size: 27px; font-weight: 900; }
.scoreboard-team h1 { margin: 0; font-size: clamp(18px, 2.3vw, 30px); }.scoreboard-score { text-align: center; }.scoreboard-score strong { display: flex; justify-content: center; gap: 17px; font: 900 clamp(40px, 6vw, 70px) Arial, sans-serif; }.scoreboard-score i { color: #46525a; font-style: normal; }.scoreboard-score small { color: var(--neon); font-weight: 900; }
.match-tabs { display: flex; overflow-x: auto; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }.match-tabs a { flex: 1 0 auto; padding: 14px 18px; border-bottom: 2px solid transparent; text-align: center; color: var(--muted); font-size: 11px; font-weight: 900; }.match-tabs a:hover,.match-tabs a.active { color: var(--neon); border-color: var(--neon); }
.match-hub-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .75fr); gap: 18px; }.match-hub-grid main,.match-hub-grid aside { display: grid; align-content: start; gap: 18px; }
.match-module { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }.match-module > header { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); }.match-module h2 { margin: 0; font-size: 15px; }.match-module > header span { color: var(--neon); font: 800 9px Arial, sans-serif; }
.stat-comparison { padding: 13px 20px; }.stat-comparison > div { display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; text-align: center; font-size: 11px; }.stat-comparison span { color: var(--muted); }.stat-comparison > i { display: block; overflow: hidden; height: 6px; margin-top: 8px; border-radius: 20px; background: #3173d0; }.stat-comparison > i u { display: block; height: 100%; background: var(--neon); text-decoration: none; }
.event-timeline { position: relative; padding: 18px; }.event-timeline::before { content: ""; position: absolute; top: 20px; bottom: 20px; right: 48px; width: 1px; background: var(--line); }.event-timeline article { position: relative; display: grid; grid-template-columns: 40px 28px 1fr; align-items: center; gap: 10px; padding: 10px 0; }.event-timeline time { color: var(--neon); font-weight: 900; }.event-timeline article > span { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #11181d; }.event-timeline strong,.event-timeline small { display: block; }.event-timeline small { color: var(--muted); font-size: 9px; }
.mini-pitch { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 350px; margin: 18px; border: 2px solid rgba(255,255,255,.5); background: repeating-linear-gradient(90deg,rgba(130,230,55,.06) 0 55px,transparent 55px 110px),#0a2919; }.mini-pitch::after { content:""; position:absolute; top:0; bottom:0; left:50%; border-left:1px solid rgba(255,255,255,.5); }.formation { display:grid; grid-template-columns:repeat(3,1fr); place-items:center; padding:25px; }.formation span { display:grid; place-items:center; width:28px; height:28px; border:2px solid var(--neon); border-radius:50%; background:#172117; font:900 10px Arial,sans-serif; }.away-formation span { border-color:#448cff; }
.match-ai-panel { border-color: rgba(130,230,55,.32); background: radial-gradient(circle at 100% 0,rgba(130,230,55,.1),transparent 40%),var(--panel); }.match-ai-panel > p { padding: 0 18px; color: #dce2e5; font-size: 12px; }.ai-suggestions { display:flex; flex-wrap:wrap; gap:7px; padding:0 18px 15px; }.ai-suggestions button { border:1px solid var(--line); border-radius:20px; padding:7px 10px; background:#0b1013; color:var(--muted); font:800 9px Cairo,sans-serif; }.match-ai-panel form { display:flex; margin:0 18px; }.match-ai-panel input { min-width:0; flex:1; padding:11px; border:1px solid var(--line); background:#080c0e; color:white; }.match-ai-panel form button { border:0; padding:0 13px; background:var(--neon); color:#061006; font-weight:900; }.match-ai-panel > small { display:block; padding:10px 18px 16px; color:#667178; font-size:8px; }
.h2h-list,.match-info dl { margin:0; padding:10px 18px 16px; }.h2h-list > div,.match-info dl > div { display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); }.h2h-list time,.match-info dt { color:var(--muted); font-size:10px; }.match-info dd { margin:0; font-size:11px; font-weight:800; }
@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; }
  .main-nav { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; }
  .hero, .match-center { grid-template-columns: 1fr; }
  .home-discovery>header{display:block}.home-discovery header p{margin-top:10px}.discovery-grid{grid-template-columns:1fr}.footer-main{grid-template-columns:1fr 1fr;padding:28px;gap:28px}.footer-brand{grid-column:1/-1}.footer-bottom{padding:16px 28px;flex-direction:column}.footer-bottom div{flex-wrap:wrap}
  .news-card.featured { grid-column: auto; }
  .mobile-nav { display: grid; }
  .home-shortcuts { grid-template-columns: repeat(2, 1fr); }
  .ai-insight-grid, .home-data-grid { grid-template-columns: 1fr; }
  .platform-features { grid-template-columns: repeat(2, 1fr); }
  .newsletter-cta { align-items: stretch; flex-direction: column; }
  .match-hub-grid { grid-template-columns: 1fr; }.scoreboard-main { grid-template-columns:1fr 130px 1fr; padding:24px 16px; }.scoreboard-team { flex-direction:column!important; text-align:center; }.scoreboard-team > span { width:60px;height:60px; }.scoreboard-score strong { font-size:42px; }
}
@media (max-width: 620px) {
  .hero { padding: 18px; }
  .pitch { margin: 10px; }
  .player { width: 30px; height: 30px; }
  .ball { width: 32px; height: 32px; }
  .ticker-track { animation-duration: 26s; }
  .hero-kicker, .home-section-heading { align-items: flex-start; flex-direction: column; }
  .home-shortcuts { grid-template-columns: 1fr; }
  .home-shortcuts a { padding: 14px; }
  .home-hero { min-height: 570px; align-items: end; background-position: 38% center; }
  .home-hero .hero-overview { display: none; }
  .home-hero .hero-copy { padding: 260px 0 0; }
  .ai-summary { grid-template-columns: 1fr; }.ai-summary > div:not(.confidence) { border: 0; border-bottom: 1px solid var(--line); }.confidence { grid-column: auto; }
  .platform-features { grid-template-columns: 1fr; }.platform-features article { border-inline-start: 0; border-top: 1px solid var(--line); }
  .newsletter-cta form { min-width: 0; }
  .scoreboard-main { grid-template-columns:1fr 86px 1fr; gap:8px; }.scoreboard-team > span { width:48px;height:48px;font-size:18px; }.scoreboard-team h1 { font-size:12px; }.scoreboard-score strong { gap:7px;font-size:30px; }.scoreboard-meta small { display:none; }.mini-pitch { min-height:270px;margin:10px; }.formation { padding:10px; }
}
.search-status{color:var(--muted);font-size:.88rem;margin:12px 2px}.player-search-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 22px}.player-search-card{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.player-search-photo{width:52px;height:52px;border-radius:50%;overflow:hidden;background:#17211d;display:grid;place-items:center;flex:none}.player-search-photo img{width:100%;height:100%;object-fit:cover}.player-search-card div:nth-child(2){min-width:0;display:grid;gap:4px}.player-search-card small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.real-data-badge{margin-inline-start:auto;color:var(--green);font-size:.72rem;border:1px solid rgba(126,217,63,.25);border-radius:999px;padding:4px 7px;white-space:nowrap}.search-matches-title{margin-top:12px}@media(max-width:700px){.player-search-grid{grid-template-columns:1fr}.real-data-badge{display:none}}
.league-groups-panel{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}.league-groups-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}.league-groups-form button{border:0;border-radius:10px;padding:0 20px;cursor:pointer}.league-groups-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.league-group-card{display:grid;gap:5px;padding:14px;border:1px solid rgba(126,217,63,.18);border-radius:13px;background:linear-gradient(145deg,rgba(126,217,63,.07),rgba(255,255,255,.02))}.league-group-card span,.league-group-card small{color:var(--muted);font-size:.78rem}@media(max-width:700px){.league-groups-form{grid-template-columns:1fr}.league-groups-form button{min-height:45px}.league-groups-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.competitions-title{flex-wrap:wrap}.competition-source{display:inline-flex;align-items:center;gap:7px;margin-inline-start:auto;padding:5px 9px;border:1px solid rgba(126,217,63,.2);border-radius:999px;color:var(--neon);font-size:.68rem}.competition-source i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}.competition-source.is-demo{color:#f4b740;border-color:rgba(244,183,64,.25)}.featured-competitions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.featured-competition-card{overflow:hidden;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,#10171b,#090d10);transition:.25s}.featured-competition-card:hover{transform:translateY(-3px);border-color:rgba(126,217,63,.3)}.featured-competition-card>header{display:flex;align-items:center;gap:11px;padding:15px;border-bottom:1px solid var(--line)}.featured-competition-card .league-mark{width:44px;height:44px;margin:0;flex:none}.featured-competition-card header>div:nth-child(2){min-width:0;display:grid;gap:3px}.featured-competition-card header strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.featured-competition-card header span{color:var(--muted);font-size:.72rem}.featured-competition-card header em{margin-inline-start:auto;padding:4px 7px;border-radius:20px;background:rgba(255,58,74,.13);color:#ff5968;font-size:.65rem;font-style:normal}.competition-match-preview{min-height:112px;padding:15px}.competition-match-preview>small{color:var(--muted)}.competition-match-preview>div:not(.no-next-match){display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:7px;margin:12px 0;text-align:center}.competition-match-preview>div span{color:var(--muted);font-size:.68rem}.competition-match-preview time{display:block;color:var(--neon);font-size:.75rem;text-align:center}.no-next-match{display:grid;place-items:center;min-height:68px;color:var(--muted);font-size:.76rem;text-align:center}.featured-competition-card>footer{display:flex;justify-content:space-between;gap:10px;padding:11px 15px;border-top:1px solid var(--line);font-size:.7rem}.featured-competition-card footer span{color:var(--muted)}.featured-competition-card footer a{color:var(--neon)}@media(max-width:900px){.featured-competitions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.featured-competitions-grid{grid-template-columns:1fr}.competitions-title .competition-source{order:3;width:100%;margin:6px 0 0}}
.competition-filters{display:flex;gap:7px;margin:0 0 15px;overflow-x:auto;padding-bottom:3px}.competition-filters button{flex:none;border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:#0a0f12;color:var(--muted);font:800 .72rem Cairo,sans-serif;cursor:pointer}.competition-filters button:hover,.competition-filters button.active{border-color:rgba(126,217,63,.4);background:rgba(126,217,63,.1);color:var(--neon)}.featured-competition-card[hidden]{display:none}.schedule-toolbar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(160px,.7fr) 170px auto auto;gap:8px}.schedule-toolbar button,.schedule-toolbar a{display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;padding:0 13px;background:var(--neon);color:#07100a;font-weight:900}.schedule-toolbar a{background:transparent;color:var(--muted)}@media(max-width:800px){.schedule-toolbar{grid-template-columns:1fr 1fr}.schedule-toolbar button,.schedule-toolbar a{min-height:44px}}@media(max-width:520px){.schedule-toolbar{grid-template-columns:1fr}}
.ticker-team{display:inline-flex;align-items:center;gap:5px}.ticker-team img{width:18px;height:18px;object-fit:contain}.team-with-logo{display:flex!important;align-items:center;gap:9px;min-width:0}.team-with-logo img{width:34px;height:34px;object-fit:contain;flex:none}.team-with-logo span{overflow:hidden;text-overflow:ellipsis}.team-away.team-with-logo{justify-content:flex-end}.preview-team{display:grid;justify-items:center;gap:5px;min-width:0}.preview-team img{width:30px;height:30px;object-fit:contain}.preview-team span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)!important;font-size:.78rem!important}
.league-teams-panel{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}.league-teams-form{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:9px}.league-teams-form button{border:0;border-radius:9px;padding:0 20px;cursor:pointer}.league-teams-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:15px}.league-team-card{display:grid;justify-items:center;gap:7px;padding:14px 8px;border:1px solid var(--line);border-radius:13px;background:#0b1013;text-align:center}.league-team-card>div{width:58px;height:58px;display:grid;place-items:center}.league-team-card img{max-width:54px;max-height:54px;object-fit:contain}.league-team-card>div>span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(126,217,63,.1);color:var(--neon);font-size:1.2rem;font-weight:900}.league-team-card strong{max-width:100%;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.league-team-card small{color:var(--muted);font-size:.66rem}@media(max-width:900px){.league-teams-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:600px){.league-teams-form{grid-template-columns:1fr}.league-teams-form button{min-height:44px}.league-teams-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}