/* ============================================================
   TRSKOR — livescore theme (emerald skin)
   Dark by default, light theme via html[data-theme="light"]
   ============================================================ */

:root {
  --sk-bg: #0b1310;
  --sk-surface: #122019;
  --sk-surface-2: #182b21;
  --sk-surface-3: #21392c;
  --sk-header: #06110a;
  --sk-border: #22402f;
  --sk-text: #eaf2f7;
  --sk-text-muted: #8fb4a2;
  --sk-accent: #12b76a;          /* brand / live green */
  --sk-accent-soft: rgba(18, 183, 106, .14);
  --sk-gold: #ffb800;            /* favourites */
  --sk-green: #2fbf71;
  --sk-row-hover: rgba(255, 255, 255, .045);
  --sk-flash: rgba(255, 184, 0, .25);
  --sk-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  --sk-radius: 10px;
  --sk-header-h: 104px;
}

html[data-theme="light"] {
  --sk-bg: #eef4f0;
  --sk-surface: #ffffff;
  --sk-surface-2: #f0f6f2;
  --sk-surface-3: #e2ece6;
  --sk-header: #0a1f14;
  --sk-border: #d9e6de;
  --sk-text: #17242f;
  --sk-text-muted: #5f7a6d;
  --sk-row-hover: rgba(13, 26, 36, .045);
  --sk-flash: rgba(255, 184, 0, .35);
  --sk-shadow: 0 8px 24px rgba(13, 26, 36, .08);
}

* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--sk-bg);
  color: var(--sk-text);
  font-size: .875rem;
  overflow-x: clip;
}

.text-muted-2 { color: var(--sk-text-muted) !important; }

/* ---------------- Header ---------------- */
.sk-header { box-shadow: var(--sk-shadow); }

.sk-topbar {
  background: var(--sk-header);
  padding: .55rem 0;
  color: #fff;
}

.sk-logo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--sk-accent);
  text-decoration: none;
}
.sk-logo-text {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .04em;
  color: #fff;
}
.sk-logo-text em { font-style: normal; color: var(--sk-accent); }

.sk-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 1.05rem;
  transition: background .15s ease;
}
.sk-iconbtn:hover { background: rgba(255, 255, 255, .1); }
.sk-main .sk-iconbtn:hover, .sk-panel .sk-iconbtn:hover { background: var(--sk-row-hover); }

.sk-btn-accent {
  --bs-btn-bg: var(--sk-accent);
  --bs-btn-border-color: var(--sk-accent);
  --bs-btn-hover-bg: #0ea35d;
  --bs-btn-hover-border-color: #0ea35d;
  --bs-btn-active-bg: #0c8f52;
  --bs-btn-active-border-color: #0c8f52;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

.sk-search {
  position: relative;
  max-width: 420px;
}
.sk-search .bi-search {
  position: absolute;
  left: .8rem;
  top: 50%;
  transform: translateY(-50%);
  color: #7da691;
  font-size: .85rem;
  pointer-events: none;
}
.sk-search .form-control {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: #fff;
  font-size: .82rem;
  padding: .42rem 1rem .42rem 2.3rem;
}
.sk-search .form-control::placeholder { color: #7da691; }
.sk-search .form-control:focus {
  background: rgba(255, 255, 255, .12);
  border-color: var(--sk-accent);
  box-shadow: 0 0 0 .2rem rgba(18, 183, 106, .25);
  color: #fff;
}

/* Sports nav */
.sk-sportsnav {
  background: var(--sk-header);
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.sk-sports {
  display: flex;
  gap: .25rem;
  margin: 0;
  padding: .35rem 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.sk-sports::-webkit-scrollbar { display: none; }
.sk-sport {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #b3d1c2;
  font-size: .8rem;
  font-weight: 600;
  padding: .45rem .7rem;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.sk-sport:hover { background: rgba(255, 255, 255, .08); color: #fff; }
a.sk-sport { text-decoration: none; }
.sk-langbtn { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; }
.sk-sport.active { background: var(--sk-accent); color: #fff; }
.sk-sport .sk-sport-ico { font-size: .95rem; }
.sk-sport .badge {
  background: rgba(255, 255, 255, .18);
  font-size: .62rem;
  font-weight: 700;
  padding: .22em .5em;
}
.sk-sport.active .badge { background: rgba(0, 0, 0, .25); }

/* ---------------- Layout ---------------- */
.sk-main { padding: .9rem .75rem 4.5rem; }

/* NOTE: grid items must stretch (no align-items:start) so the sticky
   sidebar children have room to travel inside their columns. */
.sk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
}
@media (min-width: 992px) {
  .sk-layout { grid-template-columns: 248px minmax(0, 1fr); }
  .sk-main { padding-bottom: 1.5rem; }
}
@media (min-width: 1200px) {
  .sk-layout { grid-template-columns: 248px minmax(0, 1fr) 300px; }
}
/* Two-column variant (match page): sidebar + content at every desktop width */
@media (min-width: 992px) {
  .sk-layout-two { grid-template-columns: 248px minmax(0, 1fr); }
}

.sk-sticky-col {
  position: sticky;
  top: calc(var(--sk-header-h) + 8px);
  max-height: calc(100vh - var(--sk-header-h) - 20px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  scrollbar-width: thin;
  scrollbar-color: var(--sk-surface-3) transparent;
}
.sk-sticky-col::-webkit-scrollbar { width: 6px; }
.sk-sticky-col::-webkit-scrollbar-thumb { background: var(--sk-surface-3); border-radius: 3px; }

/* ---------------- Panels ---------------- */
.sk-panel {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  padding: .75rem;
}
.sk-panel-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sk-text-muted);
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
}

/* Sidebar league lists — a plain flex container; the league "open" control
   and the pin are SIBLING buttons (never nest interactive elements). */
.sk-sideitem {
  display: flex;
  align-items: center;
  gap: .25rem;
  width: 100%;
  padding: .12rem .2rem;
  border-radius: 7px;
  transition: background .15s ease;
}
.sk-sideitem:hover { background: var(--sk-row-hover); }
.sk-sideitem.active { background: var(--sk-accent-soft); }
.sk-side-open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 0;
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  font-size: .82rem;
  font-weight: 500;
  text-align: left;
  padding: .3rem .3rem;
  border-radius: 6px;
}
a.sk-side-open { text-decoration: none; }
.sk-side-open .sk-flag { font-size: .95rem; width: 1.25rem; text-align: center; flex: 0 0 auto; }
.sk-side-open .sk-side-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-sideitem .sk-pin {
  border: 0; background: transparent; padding: .3rem .35rem;
  color: var(--sk-text-muted); font-size: .8rem; line-height: 1;
  border-radius: 6px; flex: 0 0 auto;
}
.sk-sideitem .sk-pin:hover, .sk-sideitem .sk-pin.pinned { color: var(--sk-gold); }

/* ---------------- Toolbar (tabs + date) ---------------- */
.sk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .5rem .6rem;
  margin-bottom: .9rem;
}
.sk-tabs {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.sk-tabs::-webkit-scrollbar { display: none; }
.sk-tab {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sk-text-muted);
  font-size: .78rem;
  font-weight: 600;
  padding: .4rem .8rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: background .15s ease, color .15s ease;
}
.sk-tab:hover { background: var(--sk-row-hover); color: var(--sk-text); }
.sk-tab.active { background: var(--sk-surface-3); color: var(--sk-text); }
.sk-tab-live.active { background: var(--sk-accent); color: #fff; }
.sk-live-count {
  background: var(--sk-accent);
  color: #fff;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  padding: .12em .5em;
  min-width: 1.5em;
  text-align: center;
}
.sk-tab-live.active .sk-live-count { background: rgba(0, 0, 0, .25); }
.sk-fav-count {
  background: var(--sk-gold);
  color: #1a1a1a;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  padding: .12em .5em;
}
.sk-star-ico { color: var(--sk-gold); font-size: .8rem; }

.sk-datenav { display: flex; align-items: center; gap: .15rem; }
.sk-datelabel {
  border: 0;
  background: transparent;
  color: var(--sk-text);
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem .6rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.sk-datelabel:hover { background: var(--sk-row-hover); }
.sk-datelabel .bi { color: var(--sk-accent); }

/* ---------------- League sections + match rows ---------------- */
.sk-league {
  margin-bottom: .9rem;
  overflow: hidden;
  padding: 0;
  scroll-margin-top: calc(var(--sk-header-h) + 8px);
}

.sk-league-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .7rem;
  background: var(--sk-surface-2);
  border-bottom: 1px solid var(--sk-border);
}
.sk-league-head .sk-flag { font-size: 1rem; }
.sk-league-title {
  font-size: .78rem;
  font-weight: 700;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sk-league-title .sk-country {
  color: var(--sk-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.sk-league-link {
  font-size: .72rem;
  font-weight: 600;
  color: var(--sk-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.sk-league-link:hover { color: var(--sk-accent); }

.sk-league-head .sk-pinbtn,
.sk-league-head .sk-collapsebtn {
  border: 0;
  background: transparent;
  color: var(--sk-text-muted);
  padding: .15rem .3rem;
  font-size: .85rem;
  border-radius: 6px;
  line-height: 1;
}
.sk-league-head .sk-pinbtn:hover { color: var(--sk-gold); }
.sk-league-head .sk-pinbtn.pinned { color: var(--sk-gold); }
.sk-league-head .sk-collapsebtn:hover { background: var(--sk-row-hover); color: var(--sk-text); }
.sk-league.collapsed .sk-collapsebtn .bi { transform: rotate(180deg); }
.sk-collapsebtn .bi { display: inline-block; transition: transform .18s ease; }
.sk-league.collapsed .sk-league-body { display: none; }
.sk-league.collapsed .sk-league-head { border-bottom: 0; }

/* Match row — a plain grid container. The whole row is made clickable by a
   stretched <a class="sk-match-open"> overlay (real link = SEO-crawlable match
   page); the star button sits ABOVE the overlay as a sibling, never nested. */
.sk-match {
  position: relative;
  display: grid;
  grid-template-columns: 34px 46px minmax(0, 1fr) auto auto auto 26px;
  align-items: center;
  gap: .35rem;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--sk-border);
  background: transparent;
  color: var(--sk-text);
  text-align: left;
  padding: .45rem .45rem .45rem .35rem;
  transition: background .12s ease;
}
.sk-match-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 4px;
}
.sk-match .sk-star { position: relative; z-index: 2; }
.sk-match:last-child { border-bottom: 0; }
.sk-match:hover { background: var(--sk-row-hover); }
.sk-match.flash { animation: sk-goal-flash 2.2s ease-out; }
@keyframes sk-goal-flash {
  0% { background: var(--sk-flash); }
  100% { background: transparent; }
}

.sk-match .sk-star {
  border: 0;
  background: transparent;
  color: var(--sk-text-muted);
  font-size: .85rem;
  padding: .3rem;
  border-radius: 6px;
  line-height: 1;
  justify-self: center;
}
.sk-match .sk-star:hover { color: var(--sk-gold); }
.sk-match .sk-star.starred { color: var(--sk-gold); }

.sk-match-time {
  font-size: .72rem;
  font-weight: 600;
  color: var(--sk-text-muted);
  text-align: center;
  line-height: 1.25;
}
.sk-match-time.live { color: var(--sk-accent); }
.sk-match-time.live .sk-min::after {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  margin-left: 2px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: super;
  animation: sk-blink 1.1s steps(2, start) infinite;
}
@keyframes sk-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .sk-match-time.live .sk-min::after { animation: none; }
  .sk-match.flash { animation: none; }
  .sk-collapsebtn .bi { transition: none; }
}

.sk-teams { min-width: 0; display: flex; flex-direction: column; gap: .18rem; }
.sk-teamline {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}
.sk-team-badge {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .52rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
}
/* Real team logo from the API: shown as the badge background */
.sk-team-badge.sk-has-logo {
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}

/* Standings table (league pages) */
.sk-standings {
  --bs-table-bg: transparent;
  --bs-table-color: var(--sk-text);
  --bs-table-border-color: var(--sk-border);
  --bs-table-striped-bg: var(--sk-row-hover);
  --bs-table-striped-color: var(--sk-text);
  font-size: .8rem;
  margin-bottom: 0;
}
.sk-standings th {
  color: var(--sk-text-muted);
  font-weight: 600;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.sk-standings td { vertical-align: middle; }
.sk-standings-team {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}
.sk-odds-strip .sk-odd { background: var(--sk-surface-2); }

/* Prediction chip (rows) + prediction cards (/tahminler, match tab) */
.sk-pred-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 700;
  color: var(--sk-gold);
  border: 1px solid var(--sk-gold);
  border-radius: 999px;
  padding: .14rem .55rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
a.sk-pred-chip:hover { background: var(--sk-gold); color: #1a1a1a; }
.sk-match .sk-pred-row {
  position: relative;
  z-index: 2;
  font-size: .6rem;
  padding: .08rem .4rem;
  justify-self: end;
}
.sk-pred-card .sk-statbar span { background: var(--sk-surface-3); }
.sk-pred-card .sk-statbar .h { background: var(--sk-accent); }

/* Per-league bet/affiliate link (admin-controlled) */
.sk-bet {
  font-size: .68rem;
  font-weight: 700;
  color: var(--sk-accent);
  border: 1px solid var(--sk-accent);
  border-radius: 999px;
  padding: .12rem .55rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.sk-bet:hover { background: var(--sk-accent); color: #fff; }
/* Per-row variant: compact, clickable above the row overlay */
.sk-match .sk-bet-row {
  position: relative;
  z-index: 2;
  font-size: .6rem;
  padding: .08rem .4rem;
  justify-self: end;
}
.sk-team-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
}
.sk-teamline.winner .sk-team-name { font-weight: 700; }
.sk-teamline.loser  .sk-team-name { color: var(--sk-text-muted); }
.sk-score {
  margin-left: auto;
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding-left: .5rem;
}
.sk-match.is-live .sk-score { color: var(--sk-accent); }
.sk-teamline.winner .sk-score { font-weight: 800; }

/* Odds */
.sk-odds { display: none; gap: .25rem; }
@media (min-width: 768px) {
  body:not(.odds-off) .sk-odds { display: flex; }
}
.sk-odd {
  min-width: 44px;
  border: 1px solid var(--sk-border);
  border-radius: 6px;
  background: var(--sk-surface-2);
  padding: .18rem .3rem;
  text-align: center;
  line-height: 1.15;
}
.sk-odd small {
  display: block;
  font-size: .58rem;
  color: var(--sk-text-muted);
  font-weight: 600;
}
.sk-odd b { font-size: .72rem; font-weight: 700; }
.sk-match.is-fin .sk-odd { opacity: .45; }

.sk-match .sk-goto {
  grid-column: -2 / -1;  /* always the fixed 26px end track, whatever renders */
  color: var(--sk-text-muted);
  font-size: .8rem;
  justify-self: center;
}

/* Empty state */
.sk-empty {
  text-align: center;
  padding: 3rem 1rem;
}
.sk-empty .bi { font-size: 2rem; color: var(--sk-text-muted); }
.sk-empty p { color: var(--sk-text-muted); margin: .6rem 0 1rem; }

/* ---------------- Right column ---------------- */
.sk-featured {
  background: linear-gradient(135deg, #182b21 0%, #122019 60%), var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  padding: .9rem;
}
html[data-theme="light"] .sk-featured {
  background: linear-gradient(135deg, #f0f6f2 0%, #ffffff 60%);
}
.sk-featured .sk-feat-league {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sk-text-muted);
}
.sk-featured .sk-feat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .7rem;
}
.sk-featured .sk-feat-team {
  flex: 1;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  min-width: 0;
}
.sk-featured .sk-feat-team .sk-team-badge {
  width: 34px; height: 34px; font-size: .8rem;
  margin: 0 auto .35rem;
}
.sk-featured .sk-feat-mid { text-align: center; }
.sk-featured .sk-feat-score { font-size: 1.15rem; font-weight: 800; white-space: nowrap; }
.sk-featured .sk-feat-status { font-size: .68rem; font-weight: 700; color: var(--sk-accent); }

.sk-news-item {
  display: flex;
  gap: .6rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--sk-text);
  text-align: left;
  padding: .5rem .35rem;
  border-radius: 8px;
  transition: background .15s ease;
}
.sk-news-item:hover { background: var(--sk-row-hover); }
.sk-news-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.sk-news-title {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sk-news-meta { font-size: .68rem; color: var(--sk-text-muted); }

.sk-ad {
  border: 1px dashed var(--sk-border);
  border-radius: var(--sk-radius);
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  color: var(--sk-text-muted);
  font-weight: 700;
  letter-spacing: .12em;
  font-size: .75rem;
}

/* ---------------- Footer ---------------- */
.sk-footer {
  border-top: 1px solid var(--sk-border);
  background: var(--sk-surface);
  margin-top: 1rem;
}
.sk-footlink { color: var(--sk-text-muted); text-decoration: none; }
.sk-footlink:hover { color: var(--sk-text); }
@media (max-width: 991.98px) {
  .sk-footer { margin-bottom: 56px; }
}

/* ---------------- Bottom nav (mobile) ---------------- */
.sk-bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  display: flex;
  background: var(--sk-header);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-bottom: env(safe-area-inset-bottom);
}
.sk-bn-item {
  position: relative;
  flex: 1;
  border: 0;
  background: transparent;
  color: #8fb4a2;
  font-size: .6rem;
  font-weight: 600;
  padding: .45rem 0 .4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
}
.sk-bn-item .bi { font-size: 1.05rem; }
.sk-bn-item.active { color: #fff; }
.sk-bn-item.active .bi { color: var(--sk-accent); }
.sk-bn-badge {
  position: absolute;
  top: 2px;
  left: calc(50% + 6px);
  background: var(--sk-accent);
  color: #fff;
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 700;
  padding: .05em .45em;
}
.sk-bn-badge-gold { background: var(--sk-gold); color: #1a1a1a; }

/* ---------------- Offcanvas / modal / dropdown ---------------- */
.sk-offcanvas {
  --bs-offcanvas-bg: var(--sk-surface);
  --bs-offcanvas-color: var(--sk-text);
  --bs-offcanvas-width: 320px;
}
.sk-offcanvas .btn-close,
.sk-modal .btn-close { filter: invert(1) grayscale(1); }
html[data-theme="light"] .sk-offcanvas .btn-close,
html[data-theme="light"] .sk-modal .btn-close { filter: none; }

.sk-dropdown {
  --bs-dropdown-bg: var(--sk-surface-2);
  --bs-dropdown-color: var(--sk-text);
  --bs-dropdown-border-color: var(--sk-border);
  font-size: .82rem;
  min-width: 220px;
}
.sk-dropdown .form-check-label { color: var(--sk-text); }

.sk-modal {
  --bs-modal-bg: var(--sk-surface);
  --bs-modal-color: var(--sk-text);
  --bs-modal-border-color: var(--sk-border);
}
.sk-signin-ico { font-size: 2.4rem; color: var(--sk-text-muted); }

/* Match modal internals */
.sk-mm-head {
  background: var(--sk-surface-2);
  border-radius: var(--sk-radius) var(--sk-radius) 0 0;
  padding: 1rem 1rem .8rem;
  text-align: center;
  position: relative;
}
.sk-mm-league { font-size: .7rem; font-weight: 700; color: var(--sk-text-muted); letter-spacing: .06em; text-transform: uppercase; }
.sk-mm-row { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: .8rem; }
.sk-mm-team { flex: 1; min-width: 0; font-size: .82rem; font-weight: 700; }
.sk-mm-team .sk-team-badge { width: 42px; height: 42px; font-size: .95rem; margin: 0 auto .4rem; }
.sk-mm-score { font-size: 1.7rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-mm-status { font-size: .72rem; font-weight: 700; color: var(--sk-accent); margin-top: .25rem; }
.sk-mm-status.fin { color: var(--sk-text-muted); }
.sk-mm-close { position: absolute; top: .6rem; right: .6rem; }

.sk-mm-tabs { display: flex; border-bottom: 1px solid var(--sk-border); }
.sk-mm-tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--sk-text-muted);
  font-size: .78rem;
  font-weight: 700;
  padding: .6rem;
  border-bottom: 2px solid transparent;
}
.sk-mm-tab.active { color: var(--sk-text); border-bottom-color: var(--sk-accent); }

.sk-event {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .25rem;
  font-size: .8rem;
  border-bottom: 1px solid var(--sk-border);
}
.sk-event:last-child { border-bottom: 0; }
.sk-event .sk-ev-min { width: 34px; font-weight: 700; color: var(--sk-text-muted); font-variant-numeric: tabular-nums; }
.sk-event.away { flex-direction: row-reverse; text-align: right; }

.sk-statrow { margin-bottom: .65rem; }
.sk-statrow .sk-stat-nums {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  font-weight: 700;
  margin-bottom: .2rem;
}
.sk-statrow .sk-stat-label { color: var(--sk-text-muted); font-weight: 600; }
.sk-statbar { display: flex; gap: 3px; height: 6px; }
.sk-statbar span { border-radius: 3px; background: var(--sk-surface-3); }
.sk-statbar .h { background: var(--sk-accent); }
.sk-statbar .a { background: #3d84c6; }

/* Toasts */
.sk-toast {
  --bs-toast-bg: var(--sk-surface-2);
  --bs-toast-color: var(--sk-text);
  --bs-toast-border-color: var(--sk-border);
  font-size: .8rem;
}
.sk-toast .toast-body { display: flex; align-items: center; gap: .5rem; }

/* Focus visibility */
.sk-side-open:focus-visible,
.sk-tab:focus-visible,
.sk-sport:focus-visible,
.sk-iconbtn:focus-visible,
.sk-bn-item:focus-visible,
.sk-news-item:focus-visible,
.sk-star:focus-visible,
.sk-pin:focus-visible,
.sk-pinbtn:focus-visible,
.sk-collapsebtn:focus-visible,
.sk-featured:focus-visible,
.sk-mm-tab:focus-visible,
.sk-datelabel:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 1px;
}
.sk-match-open:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: -2px;
}

/* Very narrow screens (<400px): shrink the topbar so nothing clips */
@media (max-width: 399.98px) {
  .sk-btn-label { display: none; }
  .sk-logo-text { font-size: 1rem; }
}

/* ---------------- Match detail page ---------------- */
.sk-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  font-size: .74rem;
  color: var(--sk-text-muted);
  margin-bottom: .9rem;
}
.sk-crumb a { color: var(--sk-text-muted); text-decoration: none; }
.sk-crumb a:hover { color: var(--sk-text); }
.sk-crumb .bi { font-size: .6rem; }

.sk-hero {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  overflow: hidden;
  margin-bottom: .9rem;
}
.sk-hero .sk-mm-head { border-radius: 0; }
.sk-related .sk-match:last-child { border-bottom: 0; }
.sk-about-text { font-size: .82rem; color: var(--sk-text-muted); line-height: 1.55; }