/* Koora Live — 2026 visual refresh. Presentation-only overrides; match logic remains unchanged. */
:root {
  --kl-accent: #b8f34a;
  --kl-accent-2: #38d8c3;
  --kl-bg: #080d17;
  --kl-surface: #101827;
  --kl-surface-raised: #141f30;
  --kl-border: rgba(180, 204, 228, .12);
  --kl-text: #edf4fc;
  --kl-muted: #9aaabd;
}
html { scroll-behavior: smooth; }
body {
  background: var(--kl-bg) !important;
  color: var(--kl-text) !important;
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif !important;
}
body a { transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }
.SiteHeader {
  position: sticky !important; top: 0 !important; height: 78px !important;
  margin: 0 0 14px !important; overflow: visible !important;
  background: rgba(8, 13, 23, .92) !important;
  border-bottom: 1px solid var(--kl-border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}
.SiteHeader:before { height: 2px !important; background: linear-gradient(90deg, transparent, var(--kl-accent-2), var(--kl-accent), transparent) !important; }
.SiteHeader > .container { max-width: 1200px !important; justify-content: space-between !important; padding: 0 20px !important; }
#logo {
  width: auto !important; min-width: 156px !important; height: 58px !important;
  margin: 0 !important; padding: 7px 12px !important; border-radius: 15px !important;
  background: rgba(255,255,255,.045) !important; border: 1px solid var(--kl-border) !important;
  box-shadow: none !important;
}
#logo a { display: flex !important; align-items: center !important; gap: 10px !important; }
#logo .main-logo { display:block !important; width:auto !important; max-width:145px !important; max-height:42px !important; object-fit:contain !important; }
#logo .site-des { display:flex !important; flex-direction:column !important; justify-content:center !important; gap:2px !important; }
#logo .site-name { color:var(--kl-text) !important; font-weight:800 !important; font-size:13px !important; line-height:1.25 !important; }
#logo .site-url { color:var(--kl-muted) !important; font-size:10px !important; line-height:1.2 !important; }
.nav-menu { width:auto !important; margin:0 !important; }
.nav-menu .nav ul.LinksList-Nav li a { color:#c7d3e1 !important; font-size:13px !important; font-weight:700 !important; }
.nav-menu .nav ul.LinksList-Nav li a:hover { color:var(--kl-accent) !important; }
.nav-menu .nav ul.SocialMedia-Nav a, .dark-mode button { border-radius:12px !important; }
.reference-site-strip { max-width:1160px !important; height:auto !important; padding:0 14px !important; margin:0 auto 12px !important; }
.TopSiteDes {
  min-height:40px !important; margin:0 !important; padding:7px 14px !important;
  border-radius:12px !important; background:linear-gradient(100deg, rgba(56,216,195,.10), rgba(184,243,74,.07)) !important;
  border:1px solid rgba(56,216,195,.16) !important; box-shadow:none !important;
  color:#c4f4e9 !important; font-size:12px !important; letter-spacing:.1px !important;
}
.TopSiteDes p { margin:0 !important; line-height:1.7 !important; }
.timezone-strip {
  max-width:1160px !important; min-height:52px !important; margin:0 auto 18px !important; padding:9px 14px !important;
  gap:10px 14px !important; border-radius:15px !important; background:var(--kl-surface) !important;
  border:1px solid var(--kl-border) !important; box-shadow:0 8px 26px rgba(0,0,0,.10) !important;
}
.timezone-strip-title { color:var(--kl-accent) !important; font-size:12px !important; }
.timezone-control { gap:6px !important; color:var(--kl-muted) !important; }
.timezone-control select { min-height:34px !important; padding:5px 10px !important; border-radius:9px !important; background:#0b1320 !important; border:1px solid var(--kl-border) !important; color:var(--kl-text) !important; }
.timezone-clock { color:var(--kl-accent-2) !important; font-weight:800 !important; font-variant-numeric:tabular-nums; }
main.container { max-width:1160px !important; padding-right:14px !important; padding-left:14px !important; }
.TitleBox {
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important;
  min-height:60px !important; margin:0 0 10px !important; padding:10px 14px !important;
  border:1px solid var(--kl-border) !important; border-radius:15px !important;
  background:linear-gradient(110deg, rgba(20,31,48,.96), rgba(13,21,34,.96)) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.10) !important; overflow:visible !important;
}
.TitleBox .Title {
  float:none !important; width:auto !important; margin:0 !important; padding:0 !important;
  background:none !important; color:var(--kl-text) !important; border-radius:0 !important;
  font-size:clamp(16px,2vw,20px) !important; font-weight:850 !important; line-height:1.5 !important;
}
ul.nav-tabs { display:flex !important; float:none !important; width:auto !important; gap:6px !important; margin:0 !important; padding:4px !important; border:1px solid var(--kl-border) !important; border-radius:12px !important; background:rgba(4,9,16,.38) !important; }
ul.nav-tabs li { width:auto !important; margin:0 !important; }
ul.nav-tabs li a {
  display:flex !important; align-items:center !important; justify-content:center !important; min-height:34px !important;
  padding:5px 13px !important; border:1px solid transparent !important; border-radius:9px !important;
  background:transparent !important; color:#a9b8ca !important; font-size:12px !important; font-weight:750 !important; line-height:1.4 !important;
}
ul.nav-tabs li.Yes a:hover, ul.nav-tabs li.Tod a:hover, ul.nav-tabs li.Tom a:hover,
ul.nav-tabs li a:hover { color:var(--kl-text) !important; background:rgba(255,255,255,.06) !important; }
ul.nav-tabs li a.active, ul.nav-tabs li.Yes a.active, ul.nav-tabs li.Tod a.active, ul.nav-tabs li.Tom a.active,
ul.nav-tabs li.Yes, ul.nav-tabs li.Tod, ul.nav-tabs li.Tom { color:var(--kl-text) !important; }
ul.nav-tabs li a.active, ul.nav-tabs li a[aria-current="page"] { background:linear-gradient(135deg,rgba(184,243,74,.18),rgba(56,216,195,.14)) !important; border-color:rgba(184,243,74,.27) !important; color:var(--kl-accent) !important; }
.kora-matches-container { gap:12px !important; margin-bottom:26px !important; }
.kora-match-card {
  position:relative !important; height:auto !important; min-height:166px !important; margin:0 !important; padding:0 !important;
  border:1px solid var(--kl-border) !important; border-radius:19px !important; overflow:hidden !important;
  background:linear-gradient(145deg,#121e2d 0%,#0e1724 58%,#111a28 100%) !important;
  color:var(--kl-text) !important; box-shadow:0 10px 28px rgba(0,0,0,.14) !important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease !important;
}
.kora-match-card:hover, .kora-match-card:focus-visible { transform:translateY(-2px) !important; border-color:rgba(184,243,74,.33) !important; box-shadow:0 15px 34px rgba(0,0,0,.22) !important; outline:none; }
.kora-match-card .match-head {
  height:auto !important; min-height:39px !important; padding:8px 17px !important; gap:10px !important;
  background:rgba(255,255,255,.025) !important; border-bottom:1px solid rgba(180,204,228,.08) !important;
  color:var(--kl-muted) !important; font-size:11px !important;
}
.kora-match-card .match-league { color:#bdcad9 !important; font-weight:700 !important; }
.kora-match-card .match-channel { color:#8b9caf !important; }
.kora-match-card .match-container {
  min-height:124px !important; height:auto !important; grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr) !important;
  gap:8px !important; margin:0 !important; padding:15px 18px 17px !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
.kora-match-card .right-team, .kora-match-card .left-team { height:auto !important; min-width:0 !important; gap:8px !important; }
.kora-match-card .team-logo { width:58px !important; height:58px !important; flex:0 0 58px !important; padding:5px !important; background:#f8fafc !important; border:1px solid rgba(255,255,255,.45) !important; box-shadow:0 7px 20px rgba(0,0,0,.18) !important; }
.kora-match-card .team-logo img { max-width:46px !important; max-height:46px !important; object-fit:contain !important; }
.kora-match-card .team-name { height:auto !important; max-width:100% !important; color:#e8eff7 !important; font-size:13px !important; font-weight:750 !important; line-height:1.4 !important; }
.kora-match-card .match-center { height:auto !important; min-height:90px !important; }
.kora-match-card .match-status { min-height:25px !important; height:auto !important; padding:4px 11px !important; border:1px solid rgba(255,255,255,.08) !important; font-size:11px !important; font-weight:800 !important; }
.kora-match-card .match-status.status-live { background:rgba(255,74,99,.14) !important; border-color:rgba(255,74,99,.23) !important; color:#ff8190 !important; }
.kora-match-card .match-status.status-ended { background:rgba(154,170,189,.12) !important; color:#b1bdca !important; }
.kora-match-card .match-status.status-soon { background:rgba(56,216,195,.12) !important; border-color:rgba(56,216,195,.18) !important; color:#6be5d4 !important; }
.kora-match-card .match-score { height:auto !important; margin:7px 0 1px !important; color:#fff !important; font-size:25px !important; font-weight:900 !important; line-height:1.1 !important; font-variant-numeric:tabular-nums; }
.kora-match-card .match-time { height:auto !important; color:#a8b8cb !important; font-size:12px !important; font-weight:650 !important; line-height:1.55 !important; }
.kora-match-card .play-button { display:none !important; }
.match-card-wrapper { margin-bottom:12px !important; }
.match-card-premium {
  position:relative !important; overflow:hidden !important; border:1px solid var(--kl-border) !important; border-radius:19px !important;
  background:linear-gradient(145deg,#121e2d,#0e1724 60%,#111a28) !important; color:var(--kl-text) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.14) !important; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease !important;
}
.match-card-premium:hover { transform:translateY(-2px) !important; border-color:rgba(184,243,74,.32) !important; box-shadow:0 16px 36px rgba(0,0,0,.2) !important; }
.match-card-premium .match-card-top { padding:13px 17px !important; border-bottom:1px solid rgba(180,204,228,.08) !important; }
.match-card-premium .match-league-badge { color:#b7c7d8 !important; font-size:12px !important; }
.match-card-premium .match-card-team .team-logo-wrapper { width:68px !important; height:68px !important; border-radius:18px !important; border:1px solid var(--kl-border) !important; background:#f8fafc !important; box-shadow:0 8px 20px rgba(0,0,0,.15) !important; }
.match-card-premium .match-card-team img { max-width:54px !important; max-height:54px !important; object-fit:contain !important; }
.match-card-premium .match-card-team .team-name { color:#e8eff7 !important; font-weight:750 !important; }
.match-card-premium .match-score-large { color:#fff !important; font-size:31px !important; font-variant-numeric:tabular-nums; }
.match-card-premium .match-time-large { color:var(--kl-accent) !important; font-weight:850 !important; }
.match-card-premium .match-card-bottom { border-top:1px solid rgba(180,204,228,.08) !important; }
.match-card-premium .match-action-btn { border-radius:10px !important; background:rgba(184,243,74,.13) !important; color:var(--kl-accent) !important; }
.app-download-card { border-color:rgba(184,243,74,.23) !important; border-radius:19px !important; background:linear-gradient(130deg,#101d2b,#122d31 57%,#101927) !important; box-shadow:0 16px 34px rgba(0,0,0,.18) !important; }
.app-download-kicker { color:var(--kl-accent) !important; }
.app-download-button { background:linear-gradient(135deg,#c9f879,#8dcf35) !important; color:#14200b !important; }
.app-nav {
  background:rgba(10,16,27,.92) !important; border-top:1px solid rgba(180,204,228,.13) !important;
  box-shadow:0 -12px 34px rgba(0,0,0,.22) !important; backdrop-filter:blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(145%) !important;
}
.app-nav .app-item, .app-nav .app-label { color:#aebdcd !important; }
.app-nav .app-item:hover, .app-nav .app-item.active, .app-nav .app-label { color:var(--kl-accent) !important; }
.app-nav .app-center .app-fab { background:linear-gradient(135deg,#b8f34a,#43d8aa) !important; color:#10200e !important; border-color:#0b1320 !important; box-shadow:0 8px 24px rgba(125,210,71,.23) !important; }
.app-nav .app-center .app-fab svg { fill:#10200e !important; }
:where(a,button,select,input,textarea):focus-visible { outline:2px solid var(--kl-accent-2) !important; outline-offset:3px !important; }
body.light-mode, html[data-theme="light"] body {
  background:#f3f6fa !important; color:#172435 !important;
  --kl-bg:#f3f6fa; --kl-surface:#fff; --kl-surface-raised:#fff; --kl-border:rgba(28,48,73,.12); --kl-text:#172435; --kl-muted:#68798d;
}
body.light-mode .SiteHeader, html[data-theme="light"] .SiteHeader { background:rgba(255,255,255,.94) !important; border-bottom-color:rgba(28,48,73,.10) !important; box-shadow:0 8px 26px rgba(26,45,71,.07) !important; }
body.light-mode #logo, html[data-theme="light"] #logo { background:#f4f7fa !important; border-color:rgba(28,48,73,.10) !important; }
body.light-mode #logo .site-name, html[data-theme="light"] #logo .site-name { color:#172435 !important; }
body.light-mode .timezone-strip, html[data-theme="light"] .timezone-strip { background:#fff !important; border-color:rgba(28,48,73,.11) !important; }
body.light-mode .timezone-control select, html[data-theme="light"] .timezone-control select { background:#f7f9fc !important; color:#172435 !important; border-color:rgba(28,48,73,.13) !important; }
body.light-mode .TitleBox, html[data-theme="light"] .TitleBox { background:#fff !important; border-color:rgba(28,48,73,.11) !important; box-shadow:0 8px 24px rgba(26,45,71,.05) !important; }
body.light-mode .TitleBox .Title, html[data-theme="light"] .TitleBox .Title { background:none !important; color:#172435 !important; }
body.light-mode ul.nav-tabs, html[data-theme="light"] ul.nav-tabs { background:#f4f7fa !important; border-color:rgba(28,48,73,.10) !important; }
body.light-mode ul.nav-tabs li a, html[data-theme="light"] ul.nav-tabs li a { color:#56677b !important; }
body.light-mode .kora-match-card, html[data-theme="light"] .kora-match-card,
body.light-mode .match-card-premium, html[data-theme="light"] .match-card-premium { background:linear-gradient(145deg,#fff,#f8fafc) !important; color:#172435 !important; border-color:rgba(28,48,73,.12) !important; box-shadow:0 9px 25px rgba(26,45,71,.07) !important; }
body.light-mode .kora-match-card .match-head, html[data-theme="light"] .kora-match-card .match-head { background:#f7f9fc !important; border-color:rgba(28,48,73,.08) !important; }
body.light-mode .kora-match-card .match-league, html[data-theme="light"] .kora-match-card .match-league,
body.light-mode .kora-match-card .team-name, html[data-theme="light"] .kora-match-card .team-name,
body.light-mode .match-card-premium .match-card-team .team-name, html[data-theme="light"] .match-card-premium .match-card-team .team-name { color:#24364a !important; }
body.light-mode .kora-match-card .match-score, html[data-theme="light"] .kora-match-card .match-score,
body.light-mode .match-card-premium .match-score-large, html[data-theme="light"] .match-card-premium .match-score-large { color:#172435 !important; }
body.light-mode .kora-match-card .match-time, html[data-theme="light"] .kora-match-card .match-time { color:#68798d !important; }
body.light-mode .app-nav, html[data-theme="light"] .app-nav { background:rgba(255,255,255,.94) !important; border-color:rgba(28,48,73,.11) !important; box-shadow:0 -8px 28px rgba(26,45,71,.08) !important; }
body.light-mode .app-nav .app-item, body.light-mode .app-nav .app-label,
html[data-theme="light"] .app-nav .app-item, html[data-theme="light"] .app-nav .app-label { color:#52657a !important; }
body.light-mode .app-nav .app-item.active, body.light-mode .app-nav .app-center .app-label,
html[data-theme="light"] .app-nav .app-item.active, html[data-theme="light"] .app-nav .app-center .app-label { color:#548d20 !important; }
@media (max-width: 760px) {
  .SiteHeader { height:68px !important; margin-bottom:10px !important; }
  .SiteHeader > .container { padding:0 12px !important; }
  #logo { min-width:0 !important; height:48px !important; padding:5px 8px !important; }
  #logo .main-logo { max-width:118px !important; max-height:36px !important; }
  #logo .site-name { font-size:11px !important; }
  #logo .site-url { font-size:9px !important; }
  .reference-site-strip { margin-bottom:9px !important; }
  .timezone-strip { margin:0 12px 12px !important; padding:8px 10px !important; border-radius:13px !important; }
  .TitleBox { align-items:stretch !important; flex-direction:column !important; gap:8px !important; padding:11px !important; border-radius:14px !important; }
  .TitleBox .Title { width:100% !important; }
  ul.nav-tabs { width:100% !important; justify-content:stretch !important; gap:4px !important; }
  ul.nav-tabs li { flex:1 1 0 !important; width:auto !important; }
  ul.nav-tabs li a { padding:5px 6px !important; font-size:11px !important; }
  .kora-match-card { min-height:152px !important; border-radius:16px !important; }
  .kora-match-card .match-container { min-height:112px !important; grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr) !important; padding:12px 10px 14px !important; }
  .kora-match-card .team-logo { width:50px !important; height:50px !important; flex-basis:50px !important; }
  .kora-match-card .team-logo img { max-width:39px !important; max-height:39px !important; }
  .kora-match-card .team-name { font-size:11px !important; }
  .kora-match-card .match-score { font-size:22px !important; }
  .kora-match-card .match-head { padding:7px 11px !important; }
  .app-nav { height:calc(var(--AppNav-Height) + var(--AppNav-Safe)) !important; }
  body { padding-bottom:calc(var(--AppNav-Height, 62px) + var(--AppNav-Safe, env(safe-area-inset-bottom)) + 16px) !important; }
}
@media (max-width: 380px) {
  #logo .site-des { display:none !important; }
  .kora-match-card .match-container { grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr) !important; padding-inline:7px !important; }
  .kora-match-card .team-name { font-size:10px !important; }
  .kora-match-card .match-status { padding-inline:7px !important; font-size:10px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Harmonize legacy per-day colors with the new brand and keep the selected day unmistakable. */
html[data-theme="dark"] body.Night ul.nav-tabs li.Yes a,
html[data-theme="dark"] body.Night ul.nav-tabs li.Tod a,
html[data-theme="dark"] body.Night ul.nav-tabs li.Tom a {
  background:rgba(255,255,255,.035) !important; border-color:transparent !important;
  box-shadow:none !important; color:#a9b8ca !important;
}
html[data-theme="dark"] body.Night ul.nav-tabs li a.active,
html[data-theme="dark"] body.Night ul.nav-tabs li a[aria-current="page"] {
  background:linear-gradient(135deg,rgba(184,243,74,.18),rgba(56,216,195,.14)) !important;
  border-color:rgba(184,243,74,.30) !important; color:var(--kl-accent) !important;
  box-shadow:0 5px 16px rgba(98,157,47,.12) !important; outline:none !important;
}
html[data-theme="dark"] body.Night .kora-match-card.is-live {
  border-color:rgba(255,94,115,.23) !important; box-shadow:0 10px 28px rgba(0,0,0,.14) !important;
}
@media (max-width:480px) {
  .timezone-strip { align-items:stretch !important; }
  .timezone-strip-title { flex:1 0 100% !important; }
  .timezone-control { flex:1 1 42% !important; min-width:0 !important; }
  .timezone-control select { width:100% !important; min-width:0 !important; }
  .timezone-current, .timezone-format-label { display:none !important; }
}