:root {
  --green: #1b7a3a;
  --green-dark: #0d3d1c;
  --pitch: #163d24;
  --line: #c8e6c9;
  --paper: rgba(252, 253, 248, 0.94);
  --ink: #122016;
  --muted: #4d6254;
  --accent: #c9a227;
}

.baza-alarm {
  margin: 0 0 10px;
  padding: 10px 14px;
  background: #8b1a1a;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 650;
}
.baza-alarm-ok { background: #6b4e00; }
.baza-alarm-ts { display: inline; margin-left: 8px; font-weight: 500; opacity: 0.9; font-size: 13px; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Segoe UI", Calibri, sans-serif;
  color: var(--ink);
  background: #ececec;
}

html:has(body.sport-fudbal) { background-color: #06140c; }
html:has(body.sport-kosarka) { background-color: #120c08; }

/* Arena iza panela: fudbal stadion, košarka parket. */
body.sport-fudbal {
  background-color: #06140c;
  background-image: none;
}
body.sport-kosarka {
  background-color: #120c08;
  background-image: none;
}
body.sport-fudbal::before,
body.sport-kosarka::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover, cover;
  background-position: center 28%, center 28%;
  filter: none;
  transform: none;
  opacity: 1;
}
body.sport-fudbal::before {
  background-color: #06140c;
  background-image:
    linear-gradient(180deg, rgba(4, 12, 8, 0.28) 0%, rgba(4, 12, 8, 0.18) 38%, rgba(4, 12, 8, 0.72) 100%),
    url("hero/teren-fudbal-arena.jpg");
}
body.sport-kosarka::before {
  background-color: #120c08;
  background-image:
    linear-gradient(180deg, rgba(12, 8, 4, 0.28) 0%, rgba(12, 8, 4, 0.18) 38%, rgba(12, 8, 4, 0.72) 100%),
    url("hero/teren-kosarka-arena.jpg");
}
body.sport-fudbal .wrap,
body.sport-kosarka .wrap,
body.sport-fudbal .wrap-sportovi,
body.sport-kosarka .wrap-sportovi {
  position: relative;
  z-index: 1;
}
body.ekran-lige,
body.stranica-pocetna {
  min-height: 100dvh;
  height: 100dvh;
  overflow: auto;
}

.stadion { display: none; }

.rucni-rok {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  text-align: center;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  background: #14532d;
  color: #ecfdf5;
  box-sizing: border-box;
}
.rucni-rok.uskoro { background: #9a3412; color: #fff7ed; }
.rucni-rok.kraj { background: #7f1d1d; color: #fee2e2; }
body:has(.rucni-rok) { padding-top: 42px; }
body:has(.rucni-rok) .app-glava { top: 42px; }
body:has(.rucni-rok) .jezik-desno-fix { top: 52px; }
body:has(.rucni-rok) .btn-nazad-danas-fix { top: 160px; }
.app-glava {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  padding: 8px 14px 8px 10px;
  box-sizing: border-box;
  background: rgba(243, 244, 246, 0.97);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}
.app-glava-lijevo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.app-glava-brand-sport {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.app-glava-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.app-glava-ime strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
}
.app-glava-ime small {
  display: block;
  opacity: 0.75;
  font-size: 12px;
  font-weight: 600;
}
.sport-prebacaj {
  display: inline-flex;
  align-items: stretch;
  height: 40px;
  margin-left: 0;
  border: 1px solid #cfd4d1;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.sport-prebacaj-dugme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  border-right: 1px solid #e5e7eb;
}
.sport-prebacaj-dugme:last-child { border-right: 0; }
.sport-prebacaj-dugme img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.sport-prebacaj-dugme:hover { background: #e8f5e9; }
.sport-prebacaj-dugme.aktivna {
  background: #14532d;
  color: #ecfdf5;
}
.tema-prebacaj {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid #cfd4d1;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.tema-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-right: 1px solid #e5e7eb;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.tema-dugme:last-child { border-right: 0; }
.tema-dugme:hover { background: #e8f5e9; }
.tema-dugme.aktivna {
  background: #14532d;
  color: #ecfdf5;
}
.app-glava-desno {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.app-glava .pocetna-admin-ime {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-glava .pocetna-odjava,
.app-glava .jezik-dugme {
  height: 40px;
  box-sizing: border-box;
  border: 1px solid #cfd4d1;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-size: 13px;
  font-weight: 700;
}
.app-glava .pocetna-odjava {
  padding: 0 12px;
}
.app-glava .jezik-dugme {
  background: #fff;
  border-color: #cfd4d1;
  color: var(--ink);
}
.app-glava .jezik-lista {
  background: #fff;
  border-color: #cfd4d1;
}
.app-glava .jezik-stavka {
  color: #c62828;
  border-bottom-color: #eee;
}
.app-glava .jezik-stavka:hover,
.app-glava .jezik-stavka.aktivan { background: #f5f5f5; color: var(--ink); }
.nav-koraci {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-koraci .btn-check-api,
.nav-koraci .btn-skini-kvote {
  height: 40px;
  padding: 0 12px;
  flex-direction: row;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
}
.nav-koraci .btn-skini-kvote {
  border: none;
  cursor: pointer;
}
.btn-nazad, .btn-pocetna {
  height: 40px;
  border: 1px solid #cfd4d1;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  color: var(--ink);
}
.btn-nazad {
  width: 40px;
  display: grid;
  place-items: center;
  padding: 0;
}
.btn-nazad svg { display: block; }
.btn-pocetna {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.btn-nazad:hover, .btn-pocetna:hover { background: #e8f5e9; }
.btn-nazad.sakriven { display: none; }

.wrap { width: 100%; max-width: none; margin: 0; padding: 8px 8px 16px 10px; }
.wrap-sportovi { padding: 12px 16px 24px; max-width: 1100px; }
.wrap-sportovi-ekran {
  max-width: none;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 10px;
  box-sizing: border-box;
}
.wrap-sportovi-ekran .top,
.wrap-sportovi-ekran > .hint { flex-shrink: 0; }
.tab-scroll { overflow-x: auto; margin-bottom: 16px; }
.sport-plocice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
.sport-plocice-ekran {
  flex: 1 1 auto;
  min-height: 0;
  gap: 10px;
  margin-top: 8px;
}
.sport-plocice-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.sport-plocice-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
@media (max-width: 700px) {
  .sport-plocice { grid-template-columns: 1fr; }
  .sport-plocice-2 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .sport-plocice-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}
.sport-plocica {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 22px;
  min-height: 140px;
  text-decoration: none;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.sport-plocice-ekran .sport-plocica {
  min-height: 0;
  overflow: hidden;
  padding: 16px 18px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.liga-grb-okvir {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.94);
  border-radius: 10px;
  margin-bottom: 8px;
  padding: 2%;
}
.liga-grb-okvir img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.liga-nba .liga-grb-okvir { background: #1d428a; }
.sport-plocica.fudbal { background: var(--pitch); }
.sport-plocica.kosarka { background: #1a3a5c; }
.sport-plocica:hover { filter: brightness(1.08); }
.wrap-sportovi-ekran .sport-ime { font-size: clamp(15px, 1.8vw, 22px); font-weight: 800; }
.wrap-sportovi-ekran .sport-opis { font-size: clamp(11px, 1.15vw, 13px); line-height: 1.25; }
body.ekran-lige {
  height: auto;
  min-height: 100dvh;
  overflow: auto;
}
body.ekran-lige .wrap-sportovi-ekran {
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 16px 16px 20px;
}
body.ekran-lige .top { margin-bottom: 8px; }
body.ekran-lige .hint { margin: 0 0 10px; font-size: 14px; }
body.ekran-lige .sport-plocice-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  margin: 0 auto;
  width: min(720px, 100%);
  flex: 0 0 auto;
  min-height: 0;
}
body.ekran-lige .sport-plocice-ekran .sport-plocica {
  height: auto;
  min-height: 108px;
  aspect-ratio: 2.35 / 1;
  padding: 14px 16px;
}

.stranica-pocetna {
  display: flex;
  flex-direction: column;
  background: #f3f4f6;
  color: #122016;
}
body.ekran-izbor {
  background: #2f2f2f;
}
.stranica-pocetna.javna {
  position: relative;
  min-height: 100dvh;
  background: #1c1c1c;
}
.pocetna-pozadina {
  position: fixed;
  top: 52px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  background: url("hero/pocetna-spoj.jpg") center 72% / cover no-repeat;
  opacity: 1;
}
.pocetna-pozadina::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(18, 18, 18, 0.62) 0%, rgba(18, 18, 18, 0.12) 38%, transparent 58%);
}
.stranica-pocetna.javna .pocetna-traka {
  position: relative;
  z-index: 2;
  background: rgba(243, 244, 246, 0.96);
}
.pocetna-traka {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 8px 72px;
  box-sizing: border-box;
  min-height: 52px;
  overflow: visible;
}
.stranica-pocetna.javna .pocetna-traka,
.ekran-izbor .pocetna-traka {
  padding-left: 16px;
  position: relative;
  z-index: 40;
  background: rgba(243, 244, 246, 0.96);
}
.pocetna-lijevo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.ekran-izbor .nav-koraci {
  position: static;
  top: auto;
  left: auto;
  flex-shrink: 0;
}
.ekran-izbor .btn-nazad { display: none; }
.ekran-izbor .nav-jezici { display: none; }
.ekran-izbor .nav-koraci .admin-polje-api {
  flex: 0 0 auto;
  min-width: 110px;
}
.admin-polja {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
}
.admin-polje {
  height: 40px;
  flex: 1 1 0;
  min-width: 96px;
  padding: 2px 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid #cfd4d1;
  border-radius: 8px;
  background: #f7f7f7;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  line-height: 1.1;
  user-select: none;
  opacity: 0.72;
  box-sizing: border-box;
}
.admin-polje small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.75;
}
.admin-polje strong {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
a.admin-polje-api {
  opacity: 1;
  background: #e8c21a;
  border-color: #c9a227;
  color: #1a1400;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 0 #7a5a00;
}
a.admin-polje-api:hover { filter: brightness(1.05); }
button.admin-polje-kvote {
  opacity: 1;
  background: #1a8f5c;
  border-color: #14704a;
  color: #fff;
  cursor: pointer;
  font: inherit;
  padding: 2px 10px;
  border-radius: 6px;
  min-width: 70px;
  text-align: center;
}
button.admin-polje-kvote:hover { filter: brightness(1.1); }
button.admin-polje-kvote.kvote-radi {
  background: #b8860b;
  animation: api-tick 1s ease infinite;
}
@keyframes api-tick {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.4); }
  100% { filter: brightness(1); }
}
.admin-polje-api.api-tick,
.btn-check-api.api-tick {
  animation: api-tick 0.5s ease;
}
.pocetna-brand {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.pocetna-brand-ime {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.pocetna-kucanje {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.7em;
}
.pocetna-kucanje .pocetna-podnaslov.kucanje-aktivno::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 2px;
  background: #4a5850;
  vertical-align: -0.1em;
  animation: pocetna-kursor 0.9s step-end infinite;
}
@keyframes pocetna-kursor {
  50% { opacity: 0; }
}
.pocetna-brand strong {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #111;
  display: block;
  line-height: 1.15;
  flex: 0 0 auto;
}
.pocetna-brand small {
  display: block;
  opacity: 0.7;
  font-size: 12px;
}
.pocetna-podnaslov {
  display: block;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  font-family: Candara, "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #4a5850;
  transform: skewX(-8deg);
  transform-origin: left center;
}
.pocetna-pod2 {
  font-size: 14.5px;
  font-weight: 500;
  color: #4a5850;
  margin-top: 2px;
}
.stranica-pocetna.javna .pocetna-pozadina {
  top: 76px;
}
.stranica-pocetna.javna .pocetna-traka {
  min-height: 76px;
  padding: 10px 18px;
  gap: 14px;
  align-items: stretch;
}
.stranica-pocetna.javna .pocetna-desno {
  align-self: center;
}
.stranica-pocetna.javna .pocetna-brand {
  gap: 12px;
  align-items: stretch;
  flex: 0 1 auto;
  min-width: 0;
}
.stranica-pocetna.javna .pocetna-brand-ime {
  flex: 0 1 auto;
  min-width: 0;
}
.stranica-pocetna.javna .logo-pogodi,
.stranica-pocetna.javna .pocetna-tabovi,
.stranica-pocetna.javna .pocetna-tab {
  align-self: center;
}
.stranica-pocetna.javna .logo-slogan { display: none; }
.stranica-pocetna.javna .logo-pogodi img {
  width: 52px;
  height: 52px;
}
.stranica-pocetna.javna .pocetna-brand strong {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.stranica-pocetna.javna .pocetna-tab {
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  border-radius: 6px;
}
.stranica-pocetna.javna .pocetna-nalog input,
.stranica-pocetna.javna .pocetna-nalog-forma input {
  height: 36px;
  width: 128px;
  font-size: 14px;
  border-radius: 8px;
  padding: 0 8px;
}
.stranica-pocetna.javna .pocetna-nalog button[type="submit"],
.stranica-pocetna.javna .pocetna-nalog-forma button[type="submit"],
.stranica-pocetna.javna .pocetna-reg,
.stranica-pocetna.javna .pocetna-odjava {
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  border-radius: 6px;
}
.stranica-pocetna.javna .pocetna-admin-ime { font-size: 15px; }
.stranica-pocetna.javna .jezik-dugme {
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  gap: 6px;
  border-radius: 6px;
}
.stranica-pocetna.javna .jezik-dugme img,
.stranica-pocetna.javna .jezik-stavka img {
  width: 22px;
  height: 15px;
}
.stranica-pocetna.javna .jezik-stavka {
  font-size: 14px;
  padding: 8px 12px;
}
.stranica-pocetna.javna .jezik-strelica { font-size: 10px; }
.logo-pogodi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}
.logo-pogodi img {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
}
.logo-slogan {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--ink);
}
.pocetna-desno {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 1;
}
.jezik-pad {
  position: relative;
  z-index: 220;
  display: inline-block;
  flex-shrink: 0;
}
.jezik-dugme {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  cursor: pointer;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.jezik-dugme img,
.jezik-stavka img {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  border: 1px solid rgba(0,0,0,0.2);
}
.jezik-strelica { font-size: 10px; opacity: 0.8; }
.jezik-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 2px);
  min-width: 100%;
  max-height: min(70vh, 420px);
  overflow-y: auto;
  background: #2f2f2f;
  border: 1px solid #444;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  z-index: 40;
}
.jezik-stavka {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  text-decoration: none;
  color: #e53935;
  font-size: 13px;
  font-weight: 800;
  border-bottom: 1px solid #444;
}
.jezik-stavka:last-child { border-bottom: 0; }
.jezik-stavka:hover,
.jezik-stavka.aktivan { background: #3a3a3a; color: #fff; }
.nav-koraci .jezik-dugme {
  height: 40px;
  background: #fff;
  border-color: #cfd4d1;
  color: var(--ink);
}
.nav-koraci .jezik-lista {
  background: #fff;
  border-color: #cfd4d1;
}
.nav-koraci .jezik-stavka {
  color: #c62828;
  border-bottom-color: #eee;
}
.nav-koraci .jezik-stavka:hover,
.nav-koraci .jezik-stavka.aktivan { background: #f5f5f5; color: var(--ink); }
.stranica-pocetna .nav-jezici { display: none; }
.prijava-poruka {
  margin: 0 8px 0 4px;
  flex: 0 1 auto;
  max-width: 16rem;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #ead9d6;
  border-radius: 8px;
  color: #b42318;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.prijava-poruka.prijava-ok {
  color: #1b7a38;
  border-color: #d4e8da;
}
.pocetna-admin {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pocetna-admin-ime { font-size: 13px; font-weight: 700; }
.pocetna-odjava {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 4px;
  background: #e8e8e8;
  color: #122016;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.pocetna-nalog {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pocetna-nalog-kolona {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  max-width: 22rem;
}
.prijava-poruka-ispod {
  margin: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  color: #122016;
}
.pocetna-brand .pocetna-tabovi {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 12px;
}
.pocetna-brand .pocetna-tab {
  flex-shrink: 0;
  margin-left: 0;
  white-space: nowrap;
}
.pocetna-tab {
  height: 34px;
  padding: 0 12px;
  border: 1px solid #c5cdc8;
  background: #eef1ef;
  color: #122016;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
}
.pocetna-tab.aktivna {
  background: #2e9a4c;
  border-color: #2e9a4c;
  color: #fff;
}
.pocetna-tab:disabled,
.pocetna-tab-iskljucen {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.reg-stranica .o-aplikaciji-ploca {
  max-width: 640px;
}
.o-aplikaciji-ploca p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #122016;
}
.o-aplikaciji-ploca p:last-child { margin-bottom: 0; }
.pocetna-m-akcije { display: none; }
.pocetna-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: #c9a227;
  color: #111;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 0 #8a7018;
  box-sizing: border-box;
}
button.pocetna-mail {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.pocetna-mail-bijelo {
  background: #fff;
  color: #122016;
  box-shadow: 0 2px 0 #c5cdc8;
}
.pocetna-mail-bijelo.aktivna {
  background: #fff;
  color: #122016;
}
.pocetna-mail-link {
  font-weight: 800;
  font-size: 16px;
  color: #157a3a;
  word-break: break-all;
}
.pocetna-nalog-forma {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
}
.pocetna-nalog input,
.pocetna-nalog-forma input {
  height: 34px;
  width: 148px;
  border: 1px solid #c5cdc8;
  background: #fff;
  color: #122016;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13px;
}
.pocetna-nalog input::placeholder,
.pocetna-nalog-forma input::placeholder { color: #6a7a70; }
.pocetna-nalog button[type="submit"],
.pocetna-nalog-forma button[type="submit"] {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  background: #2e9a4c;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.pocetna-reg-forma { margin: 0; display: inline-flex; }
.pocetna-reg {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: #f08a18;
  color: #111;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.pocetna-reg:hover { color: #111; filter: brightness(1.08); }
.pocetna-reg:disabled,
.pocetna-reg-iskljucen {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: none;
}
.pocetna-split {
  flex: 1 1 auto;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 28px);
  padding: 8px 20px 22px;
}
.ekran-izbor .pocetna-split {
  position: relative;
  z-index: 1;
}
.ekran-izbor .izbor-pozadine {
  position: fixed;
  top: 52px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: flex;
  overflow: hidden;
  pointer-events: none;
}
.izbor-pozadina {
  flex: 1 1 50%;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.izbor-pozadina::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  opacity: 0.42;
}
.izbor-pozadina-fudbal {
  background-color: #3a7a44;
}
.izbor-pozadina-fudbal::before {
  background-image: url("hero/teren-fudbal.jpg");
}
.izbor-pozadina-kosarka {
  background-color: #b8894a;
}
.izbor-pozadina-kosarka::before {
  background-image:
    url("hero/teren-kosarka-izbor.jpg"),
    url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAcAFEDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAECAwT/xAAkEAACAQMDBAMBAAAAAAAAAAAAARECITEDQWEEElGRUnGhsf/EABcBAQEBAQAAAAAAAAAAAAAAAAABAgT/xAAXEQEBAQEAAAAAAAAAAAAAAAAAEQEh/9oADAMBAAIRAxEAPwDsRopWCE0mWsQcDqVM7IHEb+xYB4KG3bLCbZZDGtwGo5CfCQptIAKpt7i4KZMewFD8fgDsAE02ZormVLubUK7+i5iUgmZJkJvHBFXRTLCIbNOmvqUpi11Gq0jc5UvWbxYU/wAFIk8GFaJSiG4Zv0q7lVPxOXUbUmtziVUvygMu58AQf//Z");
  background-position: center, center;
  background-size: cover, cover;
}
.pocetna-polovina {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: clamp(150px, 26vw, 240px);
  height: clamp(180px, 46vh, 300px);
  border-radius: 12px;
  text-decoration: none;
  background: transparent;
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
}
.pocetna-polovina::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
.pocetna-polovina.fudbal-hero {
  background: transparent;
}
.pocetna-polovina.fudbal-hero::before {
  background-image: url("hero/teren-fudbal.jpg");
}
.pocetna-polovina.kosarka-hero {
  background: transparent;
}
.pocetna-polovina.kosarka-hero::before {
  background-image:
    url("hero/teren-kosarka-izbor.jpg"),
    url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAcAFEDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAECAwT/xAAkEAACAQMDBAMBAAAAAAAAAAAAARECITEDQWEEElGRUnGhsf/EABcBAQEBAQAAAAAAAAAAAAAAAAABAgT/xAAXEQEBAQEAAAAAAAAAAAAAAAAAEQEh/9oADAMBAAIRAxEAPwDsRopWCE0mWsQcDqVM7IHEb+xYB4KG3bLCbZZDGtwGo5CfCQptIAKpt7i4KZMewFD8fgDsAE02ZormVLubUK7+i5iUgmZJkJvHBFXRTLCIbNOmvqUpi11Gq0jc5UvWbxYU/wAFIk8GFaJSiG4Zv0q7lVPxOXUbUmtziVUvygMu58AQf//Z");
  background-position: center, center;
  background-size: cover, cover;
}
.pocetna-polovina.zakljucano {
  cursor: default;
  pointer-events: none;
}
.pocetna-slika {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px 0;
}
.pocetna-slika img {
  width: auto;
  height: 100%;
  max-width: 78%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
.pocetna-natpis {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 8px 10px 16px;
  font-size: clamp(16px, 2.2vw, 26px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75), 0 0 10px rgba(0,0,0,0.35);
  pointer-events: none;
}
.pocetna-polovina:hover,
.pocetna-polovina.fudbal-hero:hover,
.pocetna-polovina.kosarka-hero:hover {
  filter: none;
}
.kosarka-hero .pocetna-slika img {
  max-width: 86%;
  width: auto;
  height: auto;
  max-height: 100%;
  transform: scale(1.08);
  transform-origin: center center;
}
.sport-ime { font-size: 26px; font-weight: 800; }
.sport-opis { font-size: 14px; opacity: 0.9; line-height: 1.35; }
.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
}
.brand { display: flex; gap: 12px; align-items: center; color: var(--ink); }
.top-desno-red {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.jezik-desno-fix {
  position: fixed;
  top: 10px;
  right: 14px;
  z-index: 60;
}
.btn-nazad-danas-fix {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 61;
  height: 40px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
body:has(.btn-nazad-danas-fix) .jezik-desno-fix { display: none; }
body:has(.jezik-uz-sync) .jezik-desno-fix { display: none; }
.brand small { display: block; opacity: 0.75; font-size: 12px; }
.ball {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ddd 40%, #222);
  color: transparent;
  display: grid; place-items: center;
  box-shadow: 0 0 0 3px var(--accent);
}

.btn-primary {
  background: linear-gradient(#2e9a4c, var(--green-dark));
  color: #fff;
  text-decoration: none;
  padding: 12px 18px;
  border: 0;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 0 #06210e;
}
.btn-primary:hover { filter: brightness(1.08); }
.top-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-sync { background: linear-gradient(#3d6ea8, #1e3f66); box-shadow: 0 2px 0 #0c1c30; }
.btn-predlog {
  background: #e8c21a !important;
  color: #1a1400 !important;
  box-shadow: 0 2px 0 #7a5a00;
}
.btn-top10 {
  background: linear-gradient(#2e9a4c, var(--green-dark));
  box-shadow: 0 2px 0 #06210e;
}
.top10-dani a.top10-danas,
.top10-dani a.top10-sjutra,
.top10-dani a.top10-preko,
.top10-dani a.top10-d3 {
  font-family: Arial, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0.28px #111;
  paint-order: stroke fill;
}
.top10-dani a.top10-danas { color: #1b9a3a; }
.top10-dani a.top10-sjutra { color: #e07012; }
.top10-dani a.top10-preko { color: #8b4513; }
.danas-mec { font-size: 13px; color: #1a3a28; font-weight: 500; vertical-align: middle; }
.mec-blok { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.25; }
.danas-mec .mec-kad {
  font-family: Arial, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0.28px #111;
  paint-order: stroke fill;
}
.danas-mec .mec-kad-danas { color: #1b9a3a; }
.danas-mec .mec-kad-sjutra { color: #e07012; }
.danas-mec .mec-kad-preko { color: #8b4513; }
.danas-mec .mec-kad-datum {
  font-family: Arial, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: #1a3a28;
  -webkit-text-stroke: 0.28px #111;
  paint-order: stroke fill;
}
.mec-sat { font-weight: 700; font-variant-numeric: tabular-nums; }
.mec-par { font-weight: 600; }
.mec-par .tim-link { font-weight: 600; }
.btn-check-api {
  background: #e8c21a !important;
  color: #1a1400 !important;
  box-shadow: 0 2px 0 #7a5a00;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  gap: 2px;
  text-decoration: none;
  font-weight: 700;
  border-radius: 6px;
  padding: 12px 18px;
}
.btn-check-api small,
.btn-skini-kvote small {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.btn-skini-kvote {
  background: #1a8f5c;
  color: #fff;
  box-shadow: 0 2px 0 #0a4a2e;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  gap: 2px;
  font-weight: 700;
  border-radius: 6px;
  padding: 12px 18px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-skini-kvote:hover { filter: brightness(1.1); }
.btn-skini-kvote.kvote-radi {
  background: #b8860b;
  animation: api-tick 1s ease infinite;
}

.center.card > .menu {
  margin-top: 4px;
  margin-bottom: 10px;
}
.traka-gore {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}
.traka-gore > .igra-predlog-red {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 8px;
  flex: 0 1 320px;
  width: auto;
  min-width: 0;
}
.traka-gore > .igra-predlog-red.igra-predlog-samo {
  grid-template-columns: 1fr;
  flex: 0 1 220px;
}
.traka-gore > .igra-predlog-red > .menu {
  margin: 0;
  padding: 0;
  background: transparent;
  min-width: 0;
  width: 100%;
  display: flex;
}
.igra-predlog-red {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 10px;
}
.traka-gore > .igra-predlog-red { margin-bottom: 0; }
.igra-predlog-red .menu details {
  width: 100%;
  margin: 0;
}
.igra-predlog-red .menu details > summary,
.btn-predlog-traka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  line-height: 1;
  background: #fff;
  color: var(--ink);
  border: 1px solid #cfd4d1;
  box-shadow: none;
}
.btn-predlog-traka:hover,
.igra-predlog-red .menu details > summary:hover {
  background: #e8f5e9;
}
.btn-predlog-traka.aktivna,
.igra-predlog-red .menu details > summary.aktivna {
  background: #e8f5e9;
  border-color: #1b7a3a;
  color: var(--ink);
  box-shadow: none;
}
.traka-gore > .pregled-traka {
  grid-column: 2;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
}
.traka-gore .menu summary {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #cfd4d1;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.traka-gore .menu a:hover,
.traka-gore .menu details[open] summary {
  background: #e8f5e9;
  color: var(--ink);
  border-radius: 8px;
}
.traka-gore .pregled-uzivo {
  background: #fff;
  border-color: #cfd4d1;
  color: var(--ink);
}
.traka-gore .pregled-uzivo:hover,
.traka-gore .pregled-uzivo.aktivna {
  background: #e8f5e9;
  border-color: #1b7a3a;
  color: var(--ink);
}
.menu {
  display: flex;
  gap: 4px;
  align-items: stretch;
  background: #fff;
  padding: 6px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.menu a, .menu summary {
  color: var(--ink);
  text-decoration: none;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
.menu a:hover, .menu details[open] summary { background: var(--pitch); color: #fff; border-radius: 4px; }
.menu details.drop-igra > summary,
.menu details.drop-igra[open] > summary,
.traka-gore .menu details.drop-igra > summary,
.traka-gore .menu details.drop-igra[open] > summary {
  background: #fff;
  border: 1px solid #cfd4d1;
  color: var(--ink);
  border-radius: 8px;
  box-shadow: none;
}
.menu details.drop-igra > summary:hover,
.traka-gore .menu details.drop-igra > summary:hover,
.igra-predlog-red .menu details.drop-igra > summary:hover {
  background: #e8f5e9;
  color: var(--ink);
  filter: none;
}
.igra-predlog-red .menu details.drop-igra > summary.aktivna,
.traka-gore .igra-predlog-red .menu details.drop-igra > summary.aktivna {
  background: #e8f5e9;
  border-color: #1b7a3a;
  color: var(--ink);
}

.drop { position: relative; }
.drop-panel {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  padding: 8px;
  margin-top: 4px;
}
.drop-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-decoration: none;
  border-radius: 4px;
}
.drop-igra .drop-item {
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
}
.drop-item:hover, .drop-item.aktivna { background: #e8f5e9; }
.drop-item.aktivna { font-weight: 700; }
.drop-igra .drop-panel {
  min-width: 400px;
  max-height: 72vh;
  overflow-y: auto;
  padding: 4px 6px;
}
.igra-podgrupe {
  display: flex;
  gap: 4px;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  padding: 4px 2px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e4e8e5;
}
.igra-podgrupe a {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 4px;
  color: var(--ink);
  text-decoration: none;
}
.igra-podgrupe a.aktivna {
  background: var(--pitch);
  color: #fff;
}
.igra-podgrupe a:hover { background: #e8f5e9; }
.igra-podgrupe a.aktivna:hover { background: var(--pitch); color: #fff; }
.center.card > .rang-igre-filteri,
.center.card > .rang-dani {
  margin: 0 0 8px;
}
.igra-uredi { margin-left: auto; color: var(--green-dark) !important; }
.igra-opis-hint {
  margin: 0 6px 6px;
  font-size: 12px;
  color: #5a635e;
  font-weight: 400;
}
.igra-opis-linija {
  margin: 4px 0 8px;
  font-size: 14px;
  font-weight: 400;
  color: #2a332e;
  line-height: 1.35;
  max-width: 52em;
}
.drop-igra .drop-item[title],
.igra-chip[title],
.moje-liga-red[title] {
  cursor: help;
}
.igra-prazno {
  font-size: 13px;
  color: var(--muted);
  padding: 8px;
  margin: 0;
}
.predlog-uredi-igre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
.predlog-igra-polje {
  position: relative;
}
.predlog-igra-polje > summary {
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  background: #1a8f5c;
  color: #fff;
  box-shadow: 0 2px 0 #0a4a2e;
  line-height: 1.25;
}
.predlog-igra-polje > summary::-webkit-details-marker { display: none; }
.predlog-igra-polje[open] > summary,
.predlog-igra-polje > summary:hover {
  background: #147a4d;
}
.predlog-igra-polje .drop-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 20;
  background: #fff;
  border: 1px solid #c5d0c8;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 280px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 6px;
}
.predlog-igra-uredi {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  text-decoration: none;
  padding: 6px 8px;
  line-height: 1.25;
}
.predlog-igra-polje .drop-item {
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
}
.predlog-igre { margin: 10px 0 14px; }
.predlog-podgrupe { position: static; padding: 0 0 8px; margin-bottom: 8px; }
.predlog-chipovi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.igra-chip {
  display: inline-block;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfd4d1;
  border-radius: 6px;
  text-decoration: none;
}
.igra-chip:hover { background: #e8f5e9; }
.igra-chip.aktivna {
  background: var(--pitch);
  color: #fff;
  border-color: var(--pitch);
}
.igra-grupa {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #111;
  margin: 8px 6px 2px;
}
.igra-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.igra-head h2 { margin: 0; font-size: 18px; }
.igra-head h2 .grb { vertical-align: middle; margin-right: 6px; }
.tim-stat {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: #f4f7f4;
  border-radius: 8px;
  font-size: 14px;
}
.tim-stat p { margin: 0 0 8px; }
.tim-stat p:last-child { margin-bottom: 0; }
.htft-tab {
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 6px;
}
.htft-tab caption { text-align: left; font-weight: 700; margin-bottom: 4px; }
.htft-tab th, .htft-tab td {
  border: 1px solid #c5d4c8;
  padding: 4px 8px;
  text-align: center;
}
.htft-tab th { background: #e8eee9; }
.naredni-mec {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #1a3a28;
  line-height: 1.35;
}
.naredni-mec-nema { font-weight: 500; color: #5a635e; }
.btn-danas {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid #cfd4d1;
  border-radius: 6px;
  background: #fff;
}
.btn-danas:hover { background: #e8f5e9; }
.rang-tab .pct { font-weight: 700; white-space: nowrap; }
.rang-tab .col-br { text-align: center; white-space: nowrap; }
.rang-tab th.col-br,
.rang-tab td.col-br {
  width: 1%;
  padding-left: 4px;
  padding-right: 4px;
}
.rang-tab th.rang-vidi,
.rang-tab td.rang-vidi {
  width: 1%;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  padding-left: 4px;
  padding-right: 6px;
}
.rang-tab .mec-kad-red {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.top10-tab { font-size: 12.5px; }
.top10-tab th, .top10-tab td { padding: 6px 5px; }
.top10-tab .top10-tip {
  display: block;
  padding-left: 26px;
  margin: 1px 0 2px;
  font-weight: 800;
  font-size: 12px;
  color: #0d3d1c;
  line-height: 1.2;
}
.top10-tab .dan-kvote { text-align: left; margin-top: 3px; }
.top10-tab .dan-kvote-lab,
.top10-tab .dan-kvote-val { justify-content: flex-start; gap: 4px; }
.top10-tab .dan-kvote-lab span,
.top10-tab .dan-kvote-val span { min-width: 1.9em; }
.vidi-meceve {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #f4fff6;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  background: #1f9d4a;
  line-height: 1.2;
}
.vidi-meceve:hover { background: #167a3a; color: #f4fff6; }
.pct-znak { font-size: 11px; font-weight: 600; margin-left: 1px; }
.kriteriji {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}
.kriteriji a {
  padding: 6px 11px;
  border: 1px solid #cfd4d1;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  background: #fff;
}
.kriteriji a:hover { background: #e8f5e9; }
.kriteriji a.aktivna { background: #e8f5e9; border-color: #1b7a3a; }
.trazi-ligu {
  padding: 8px 10px;
  font-size: 14px;
  min-width: 240px;
  margin-right: 8px;
  border: 1px solid #cfd4d1;
  border-radius: 6px;
}
.moje-lige-lista {
  max-height: 62vh;
  overflow-y: auto;
  margin-top: 10px;
  padding-right: 6px;
}
.moje-zemlja {
  margin: 12px 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.moje-liga-red {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  font-size: 13px;
  cursor: pointer;
}
.moje-liga-red:hover { background: #e8f5e9; }
.tim-link {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dotted #8aa090;
}
.tim-link:hover { color: var(--green-dark); border-bottom-color: var(--green-dark); }
.tab-provjera tr.pogodio { background: #e8f5e9; }
.tab-provjera tr.promasio { background: #fff; }
.tab-provjera .da { color: #1b7a3a; font-weight: 800; }
.tim-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 26px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
}
.zastava-liga {
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid #d0d5d1;
}
.zastava-liga.prazna {
  display: inline-block;
  background: #d7ddd8;
}

.layout {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) 148px;
  gap: 8px;
  align-items: stretch;
}
body.sa-ekran .layout,
body.sa-ekran.pregled-fiks .layout,
.layout.layout-sa {
  grid-template-columns: minmax(0, 1fr);
}
body.sa-ekran .center.card {
  max-width: none;
  width: 100%;
}
@media (min-width: 769px) {
  body.sport-fudbal .center.card,
  body.sport-kosarka .center.card {
    overflow-x: auto;
  }
  body.sport-kosarka .tab-dan {
    font-size: 13px;
  }
  body.sport-kosarka .tab-dan th,
  body.sport-kosarka .tab-dan td {
    padding: 6px 4px;
  }
  body.sport-kosarka .tab-dan th.th-liga,
  body.sport-kosarka .tab-dan td.dan-liga {
    padding-left: 28px;
  }
}
.center.card {
  min-height: calc(100vh - 140px);
  min-width: 0;
}
.card {
  background: var(--paper);
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.card-mini {
  padding: 8px 10px;
}
.card-mini h3 {
  margin: 0;
  font-size: 13px;
}
.drop-dan { position: relative; }
.drop-dan summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  list-style: none;
}
.drop-dan summary::-webkit-details-marker { display: none; }
.drop-dan .drop-panel {
  position: absolute;
  right: 0;
  left: auto;
  min-width: 200px;
}
.wide { margin-top: 12px; }
.hint { color: var(--muted); font-size: 14px; }
.dan-naslov { margin: 18px 0 8px; color: var(--green-dark); font-size: 15px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tab-dan { font-size: 14px; }
.tab-dan th {
  text-align: left;
  border-bottom: 2px solid var(--green);
  padding: 7px 6px;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1.2;
}
.tab-dan td {
  border-bottom: 1px solid #e0e8e1;
  padding: 7px 6px;
  vertical-align: middle;
}
.tab-dan .dan-vri { color: var(--muted); white-space: nowrap; font-size: 13px; }
.tab-dan .odlozeno-lab {
  color: #b45309;
  font-weight: 700;
  white-space: nowrap;
  font-size: 13px;
  vertical-align: middle;
}
.tab-dan tr.odlozen td.dan-vri { color: #b45309; }
.tab-dan th.th-vri,
.tab-dan td.dan-vri {
  text-align: center;
}
.tab-dan th.th-liga,
.tab-dan td.dan-liga {
  text-align: left;
  padding-left: 28px;
  vertical-align: middle;
}
.tab-dan th.th-vri,
.tab-dan th.th-liga,
.tab-dan th.th-pol,
.tab-dan th.th-rez {
  white-space: nowrap;
}
.tab-dan th.th-tim,
.tab-dan td.dan-tim {
  text-align: left;
  padding-left: 8px;
  max-width: 11.5em;
}
.tab-dan th.th-tim {
  padding-left: 28px;
}
.tab-dan .tim-cel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.tab-dan .tim-cel .tim-link,
.tab-dan .tim-cel > span:not(.grb) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab-dan .dan-ht,
.tab-dan .dan-ft {
  font-weight: 800;
  font-size: 15px;
  color: #111;
  text-align: center;
  padding-left: 18px;
  padding-right: 4px;
}
.tab-dan th.th-pol,
.tab-dan th.th-rez {
  text-align: center;
  padding-left: 18px;
  padding-right: 4px;
}
.tab-uzivo {
  table-layout: fixed;
}
.tab-uzivo th:nth-child(1),
.tab-uzivo td.dan-vri {
  width: 4.6em;
  font-variant-numeric: tabular-nums;
}
.tab-uzivo th.th-pol,
.tab-uzivo td.dan-ht,
.tab-uzivo td.dan-ft {
  width: 4.4em;
}
.tab-uzivo th.zvijezda-th,
.tab-uzivo td.zvijezda-td {
  width: 48px;
  vertical-align: middle;
  padding-top: 2px;
  padding-bottom: 4px;
}
.uzivo-fav-blok {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab-uzivo .zvijezda-mec {
  padding: 0;
}
.liga-cel {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  vertical-align: middle;
}
.liga-tekst {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  line-height: 1.25;
}
.uzivo-zastava {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: contain;
  background: #f4f6f4;
  flex-shrink: 0;
  border: 1px solid #c0c8c2;
  display: block;
}
.uzivo-zastava.prazna {
  background: #d7ddd8;
}
.tab-uzivo td.dan-ht,
.tab-uzivo td.dan-ft {
  position: relative;
  padding-top: 16px;
}
.tab-dan .dan-q,
.tab-dan th.th-q {
  font-weight: 700;
  font-size: 13px;
  color: #111;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-left: 4px;
  padding-right: 4px;
  min-width: 3.2em;
}
.tab-cet.tab-uzivo .dan-q {
  font-size: 13px;
}
.kvote-th,
.dan-kvote {
  white-space: nowrap;
}
.kvote-th {
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}
.kvote-th .kvote-naslov {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #111;
  margin: 0;
}
.dan-kvote {
  text-align: center;
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.dan-kvote-lab,
.dan-kvote-val {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.dan-kvote-lab {
  margin-bottom: 1px;
}
.dan-kvote-lab span,
.dan-kvote-val span {
  display: inline-block;
  min-width: 2.55em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.dan-kvote-lab span {
  font-size: 10px;
  font-weight: 400;
  color: #111;
}
#uzivo-blok .gol-novi {
  color: #c62828;
  font-weight: inherit;
  font-size: inherit;
}
#uzivo-blok .pol-gaseno {
  color: #ccc;
  opacity: 0.4;
}
.uzivo-naslov { color: #b71c1c; }
#uzivo-blok .tab-dan tbody tr { background: #fff5f3; }
.pregled-ekran .tab-dan .tim-link {
  font-weight: 400;
}
.pregled-traka {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 12px;
}
.traka-gore > .pregled-traka {
  margin: 0;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.pregled-traka > a.pregled-dugme,
.pregled-traka > details {
  flex: 1 1 0;
  min-width: 0;
}
.pregled-traka > details > summary.pregled-dugme {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}
.pregled-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #cfd4d1;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pregled-dugme::-webkit-details-marker { display: none; }
.pregled-dugme:hover { background: #e8f5e9; }
.pregled-dugme.aktivna {
  background: #e8f5e9;
  border-color: #1b7a3a;
}
.predlog-red { margin: 0 0 12px; }
.sa-podtabovi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.sa-podtabovi a,
.sa-pod2 a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #cfd4d1;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.sa-podtabovi a.aktivna,
.sa-pod2 a.aktivna {
  background: #e8f5e9;
  border-color: #1b7a3a;
}
.sa-pod2 { margin: 0 0 12px; }
.sa-split {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) 1fr;
  gap: 16px;
  align-items: start;
}
.sa-lista {
  max-height: min(70vh, 36rem);
  overflow: auto;
  border: 1px solid #e6eae8;
  border-radius: 10px;
  padding: 8px;
  background: #fafcfb;
}
.sa-zemlja {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5c6560;
  margin: 8px 4px 4px;
}
.sa-liga {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
}
.sa-liga:hover,
.sa-liga.aktivna { background: #e8f5e9; }
.sa-scroll { overflow: auto; max-width: 100%; }
.sa-lige-tab { min-width: 52rem; }
.sa-lige-tab thead th { font-size: 11px; }
.sa-filteri {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
  align-items: end;
}
.sa-filteri label,
.sa-uporedi-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
}
.sa-filteri select,
.sa-uporedi-form input[type="search"] {
  min-width: 14rem;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #cfd4d1;
  border-radius: 8px;
}
.sa-klubovi-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 8px;
}
.sa-klub-kartica {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e6eae8;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
}
.sa-klub-kartica:hover { border-color: #1b7a3a; background: #f4faf5; }
.sa-niz-broj { font-weight: 800; color: #1b7a3a; font-size: 1.1em; }
.sa-uporedi-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin: 0 0 16px;
}
.sa-uporedi-par {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e6eae8;
  border-radius: 10px;
  background: #fafcfb;
}
.sa-trazi-wrap { position: relative; min-width: 16rem; flex: 1 1 16rem; }
.sa-predlozi {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  background: #fff;
  border: 1px solid #cfd4d1;
  border-radius: 8px;
  max-height: 16rem;
  overflow: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.sa-predlog {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
}
.sa-predlog:hover { background: #e8f5e9; }
.sa-duel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sa-duel-kol h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.sa-pite {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 12px;
}
.sa-pita {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px #fff, 0 0 0 1px #e6eae8;
}
.sa-legenda { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12px; }
.sa-tocka {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.sa-p { background: #1b7a3a; }
.sa-n { background: #c9a227; }
.sa-i { background: #b71c1c; }
tr.sa-ishod-P td:nth-child(3) { color: #1b7a3a; font-weight: 700; }
tr.sa-ishod-I td:nth-child(3) { color: #b71c1c; font-weight: 700; }
.sa-prazno {
  padding: 2rem 1rem;
  text-align: center;
  border: 1px dashed #cfd4d1;
  border-radius: 12px;
  background: #fafcfb;
}
.sa-parovi { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.sa-parovi a {
  padding: 6px 10px;
  border-radius: 8px;
  background: #e8f5e9;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
}
.pregled-zvuk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #cfd4d1;
  border-radius: 8px;
  background: #fff;
  color: #8a8a8a;
  cursor: pointer;
}
.pregled-zvuk svg { display: block; }
.pregled-zvuk path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pregled-zvuk path:first-child { fill: currentColor; stroke: none; }
.pregled-zvuk.ukljucen {
  color: #1b7a3a;
  background: #e8f5e9;
  border-color: #1b7a3a;
}
.pregled-zvuk:not(.ukljucen) .zvuk-talas { opacity: 0.25; }
.pregled-dan { position: relative; }
.pregled-dan .drop-panel { min-width: 220px; }
.pregled-dan .drop-grupa {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 10px 4px;
}
.zvijezda-th { width: 48px; }
.zvijezda-td { text-align: center; width: 48px; vertical-align: middle; }
.zastava-samo {
  vertical-align: middle;
}
.zastava-samo .uzivo-zastava {
  margin: 0 auto;
}
.zvijezda-mec {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: #8a8a8a;
  line-height: 0;
}
.zvijezda-mec svg {
  width: 20px;
  height: 20px;
  display: block;
}
.zvijezda-mec path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.zvijezda-mec.puna { color: #e8c21a; }
.zvijezda-mec.puna path { fill: #e8c21a; stroke: #c9a227; }
.th-pol {
  text-align: center;
  color: #111;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}
.zavrseno-lab {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #c62828;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}
.tab-uzivo .zavrseno-lab {
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  margin: 0;
}
.zavrseno-lab-prazno { visibility: hidden; }
.omiljeni-kutija {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.omiljeni-kutija .omiljeni-side {
  flex: 1;
  display: block;
  text-decoration: none;
  color: inherit;
}
.omiljeni-side.aktivna { outline: 1px solid #c9a227; }
.tab-dan .grb { vertical-align: middle; margin-right: 4px; }
th { text-align: left; border-bottom: 2px solid var(--green); padding: 6px; }
td { border-bottom: 1px solid #e0e8e1; padding: 7px 6px; vertical-align: top; }
.datumi { list-style: none; padding: 0; margin: 0; }
.datumi a {
  display: block;
  padding: 8px 10px;
  margin: 6px 0;
  background: var(--pitch);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
}
.datumi a:hover { background: var(--green); }
.card-mini.sistem-link {
  display: block;
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
}
.kalk-grid { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0; }
.kalk-grid label, .kalk-row { display: flex; gap: 8px; align-items: center; }
.kalk-row { margin: 6px 0; }
.kalk-row .fiks-lab { font-size: 13px; color: var(--muted); white-space: nowrap; }
.tab-scroll { overflow-x: auto; }
.tab-sistem { font-size: 12px; }
.tab-sistem th { background: #c5dcec; text-align: center; }
.tab-sistem td { text-align: center; }
.kalk-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.kalk-desno label { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0; align-items: center; }
.kalk-desno input { width: 120px; }
.kalk-tab th, .kalk-tab td { padding: 6px 10px; }
.kalk-tab input.kvota { width: 100px; }
.profit-linija { font-size: 16px; font-weight: 700; color: var(--green-dark); }
h2, h3 { margin-top: 0; }

.side-nav {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding: 10px 8px;
}
.side-nav h3 {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 6px 6px;
}
.stat-search { display: block; margin: 0 6px 10px; }
.stat-search input {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #c5ccc6;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.nav-lista { list-style: none; margin: 0; padding: 0; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  border-radius: 4px;
  transform-origin: left center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.nav-item:hover, .nav-item.aktivna { background: #e8f5e9; }
.side-nav .nav-item:hover {
  background: #c8e6c9;
  color: #1b5e20;
  transform: scale(1.06);
  font-weight: 600;
}
.side-nav .nav-item:hover .grb,
.side-nav .nav-item:hover .zastava {
  transform: scale(1.18);
}
.nav-item.aktivna { font-weight: 700; color: #b71c1c; }
.side-nav .nav-item-istaknuto .grb,
.side-nav .nav-item-istaknuto .zastava,
.side-nav .nav-item-istaknuto .grb.prazan {
  width: 24px;
  height: 24px;
}
.sport-kosarka .side-nav .nav-item-istaknuto {
  font-size: 14px;
}
.sport-kosarka .side-nav .nav-item-istaknuto .grb,
.sport-kosarka .side-nav .nav-item-istaknuto .zastava,
.sport-kosarka .side-nav .nav-item-istaknuto .grb.prazan {
  width: 23px;
  height: 23px;
}
body.sport-kosarka .tab-uzivo {
  table-layout: auto;
}
body.sport-kosarka .tab-uzivo td.dan-ht,
body.sport-kosarka .tab-uzivo td.dan-ft {
  padding-top: 7px;
  padding-bottom: 7px;
}
body.sport-kosarka .tab-uzivo .zavrseno-lab {
  display: none;
}
.zastava, .grb, .grb.prazan {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.side-nav .zastava,
.side-nav .grb,
.side-nav .grb.prazan,
.center .nav-lista .zastava,
.center .nav-lista .grb,
.center .nav-lista .grb.prazan {
  width: 20px;
  height: 20px;
  transition: transform 0.15s ease;
}
.zastava, .grb.prazan {
  background: #d7ddd8;
  border: 1px solid #c0c8c2;
  display: inline-block;
}
.zastava.velika, .grb.veliki {
  width: 42px;
  height: 42px;
}
.liga-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.liga-head h2 { margin: 0; font-size: 22px; }
.liga-tabovi {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: none;
}
.liga-tabovi a {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 8px;
  box-sizing: border-box;
  border: 1px solid #cfd4d1;
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.liga-tabovi a:hover { background: #e8f5e9; }
.liga-tabovi a.aktivna {
  background: #e8f5e9;
  border-color: #1b7a3a;
  color: var(--ink);
  border-bottom: 1px solid #1b7a3a;
}
.kolo-traka {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #eef1ef;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 13px;
}
.kolo-traka a { color: var(--green-dark); font-weight: 700; text-decoration: none; }
.mec-red {
  display: grid;
  grid-template-columns: 64px 1.15fr 1fr 96px;
  gap: 8px;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e4ebe5;
  padding: 9px 10px;
  font-size: 15px;
}
.mec-red .mec-kad { color: var(--muted); font-size: 14px; }
.mec-dat { font-size: 12px; }
.mec-timovi { display: flex; flex-direction: column; gap: 5px; font-size: 15px; }
.mec-liga { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 13px; }
.mec-liga span { color: var(--ink); font-weight: 600; font-size: 14px; }
.tim { display: flex; align-items: center; gap: 8px; }
.mec-rez { text-align: right; }
.mec-rez small { display: block; margin-top: 2px; }
.rez-ht { color: var(--ink); font-weight: 700; font-size: 13px; }
.rez-q { color: var(--muted); font-weight: 500; font-size: 12px; }
.rez-ft { font-size: 18px; font-weight: 800; letter-spacing: 0.02em; }
.rez-lab {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-right: 4px;
  letter-spacing: 0.04em;
}
.muted { color: var(--muted); }
.tab-liga { font-size: 14px; }
.tab-liga .grb, .tab-liga .grb.prazan {
  width: 20px;
  height: 20px;
}
.tab-liga th abbr {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
.tab-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 0 12px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #3a4450;
  background: #f4f6f8;
  border-radius: 8px;
}
.tab-legenda strong { width: 100%; color: #1a1a1a; }
.tab-legenda span { white-space: nowrap; }
.tab-legenda b { font-weight: 700; }
.tim-cel { display: flex; align-items: center; gap: 8px; }
.forma { white-space: nowrap; }
.forma span {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  font-size: 10px;
  color: #fff;
  margin-right: 2px;
}
.f-W { background: #2e7d32; }
.f-D { background: #9e9e9e; }
.f-L { background: #c62828; }
.f-\? { background: #bdbdbd; }
dialog {
  border: 0;
  border-radius: 10px;
  padding: 20px;
  max-width: 420px;
}
dialog::backdrop { background: rgba(0,0,0,0.55); }

.reg-stranica {
  position: fixed;
  top: 52px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px 40px;
  overflow: auto;
  background: rgba(8, 12, 10, 0.55);
}
.reg-stranica.reg-sakriven {
  display: none !important;
}
.reg-stranica .reg-ploča {
  width: 100%;
  max-width: 440px;
}
.reg-ploča {
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.reg-glava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.o-aplikaciji-ploca h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #122016;
}
.o-aplikaciji-ploca p {
  color: #122016;
}
.reg-glava h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}
.reg-x {
  border: 0;
  background: #eee;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #122016;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reg-uvod {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #3d4a42;
}
.reg-greske {
  margin: 0 0 12px;
  padding: 8px 12px 8px 28px;
  background: #fdecea;
  color: #b42318;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
}
.reg-forma {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reg-korak { display: none; flex-direction: column; gap: 10px; }
.reg-forma.korak-1 .reg-korak-1,
.reg-forma.korak-2 .reg-korak-2 { display: flex; }
.reg-korak-naslov {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 800;
  color: #1b7a38;
}
.reg-placanje {
  margin: 4px 0 0;
  padding: 10px 12px 12px;
  border: 1px solid #d5ddd8;
  border-radius: 8px;
}
.reg-placanje legend {
  font-size: 12px;
  font-weight: 800;
  padding: 0 4px;
}
.reg-placanje-napomena {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #3d4a42;
}
.reg-iban {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: #f4f7f5;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
}
.reg-iban-hint {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #4a5850;
  font-weight: 400;
}
.reg-uplata-link {
  display: inline-block;
  margin-top: 4px;
  font-weight: 800;
  color: #1b6e3a;
  text-decoration: none;
}
.reg-uplata-link:hover { text-decoration: underline; }
.reg-iban p:last-child { margin: 0; }
.reg-dugmad {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.reg-dugmad .reg-posalji { flex: 1; margin-top: 0; }
.reg-nazad {
  height: 40px;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid #c5cdc8;
  border-radius: 6px;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}
.reg-forma label span { display: block; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.reg-forma input[type="text"],
.reg-forma input[type="email"],
.reg-forma input[type="password"],
.reg-forma select {
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid #c5cdc8;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 14px;
}
.reg-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
}
.reg-check span { display: inline; font-weight: 500; margin: 0; }
.reg-check a { color: #1b7a38; font-weight: 700; }
.reg-check input { margin-top: 3px; }
.reg-posalji {
  height: 40px;
  margin-top: 6px;
  border: 0;
  border-radius: 6px;
  background: #f08a18;
  color: #111;
  font-weight: 800;
  cursor: pointer;
  font-size: 14px;
}
a.reg-posalji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}
.reg-ok-poruka {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: #1b7a38;
}
.pravna-tekst {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 24px 16px 40px 72px;
  padding: 20px 22px 28px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 12px;
  color: #122016;
}
.pravna-tekst h1 { margin: 0 0 12px; font-size: 22px; }
.pravna-tekst h2 { margin: 22px 0 8px; font-size: 16px; font-weight: 800; }
.pravna-tekst p { margin: 0 0 10px; line-height: 1.55; font-size: 15px; }
.pravna-tekst ul { margin: 0 0 12px; padding-left: 1.2em; line-height: 1.5; font-size: 15px; }
.pravna-tekst li { margin-bottom: 6px; }
.pravna-napomena {
  font-size: 13px;
  font-weight: 700;
  color: #5c3d00;
  background: #fff6e5;
  padding: 10px 12px;
  border-radius: 8px;
}
.pravna-meta { font-size: 13px; color: #5a675f; }

.tab-cet th,
.tab-provjera th {
  font-size: 12px;
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .layout > main.center { order: 1; }
  .layout > .right { order: 2; }
  .layout > aside.left { order: 3; }
  .traka-gore {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .traka-gore > .igra-predlog-red,
  .traka-gore > .pregled-traka { grid-column: auto; width: 100%; }
  .top { flex-direction: column; align-items: stretch; }
}

/* Telefon: PC ostaje isti iznad 768px. */
@media (max-width: 768px) {
  html, body {
    max-width: 100%;
  }
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  body:has(.rucni-rok) { padding-top: 36px; }
  .rucni-rok {
    font-size: 12px;
    padding: 6px 8px;
    padding-top: max(6px, env(safe-area-inset-top));
  }
  body:has(.rucni-rok) .nav-koraci,
  body:has(.rucni-rok) .jezik-desno-fix,
  body:has(.rucni-rok) .btn-nazad-danas-fix { top: 44px; }

  /* Izbor: strijelica nema šta da radi — sklonjena. Početna desno od teksta na crvenoj traci. */
  body.ekran-izbor .btn-nazad { display: none; }
  body.ekran-izbor:has(.rucni-rok) .rucni-rok {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    text-align: left;
    padding: 5px 10px;
    padding-top: max(5px, env(safe-area-inset-top));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  body.ekran-izbor:has(.rucni-rok) .rucni-rok #rucniRokTekst {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 12px;
    line-height: 1.25;
  }
  body.ekran-izbor:has(.rucni-rok) .nav-koraci {
    display: flex;
    position: fixed;
    top: 0;
    left: auto;
    right: max(8px, env(safe-area-inset-right));
    z-index: 110;
    padding-top: max(5px, env(safe-area-inset-top));
    height: auto;
    pointer-events: none;
  }
  body.ekran-izbor:has(.rucni-rok) .nav-koraci .btn-pocetna {
    pointer-events: auto;
    height: auto;
    min-height: 0;
    width: auto;
    min-width: 0;
    padding: 0 2px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    color: #ecfdf5;
  }
  body.ekran-izbor:has(.rucni-rok.uskoro) .nav-koraci .btn-pocetna { color: #fff7ed; }
  body.ekran-izbor:has(.rucni-rok.kraj) .nav-koraci .btn-pocetna { color: #fee2e2; }
  body.ekran-izbor:has(.rucni-rok) .nav-koraci .btn-pocetna:hover {
    background: transparent;
    filter: brightness(1.15);
  }

  .stranica-pocetna.javna .pocetna-tabovi { display: none !important; }
  .stranica-pocetna.javna .pocetna-m-akcije {
    display: flex;
    grid-area: akcije;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }
  .stranica-pocetna.javna .pocetna-m-akcije .pocetna-mail {
    flex: 1 1 0;
    min-width: 0;
    height: 42px;
    font-size: 13px;
    padding: 0 10px;
    border-radius: 999px;
  }
  .stranica-pocetna.javna .pocetna-traka {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand lang"
      "akcije akcije"
      "login login";
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    flex-wrap: nowrap;
    min-height: 0;
    padding: 8px 10px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .stranica-pocetna.javna .pocetna-brand {
    grid-area: brand;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    align-items: center;
  }
  .stranica-pocetna.javna .pocetna-desno { display: contents; }
  .stranica-pocetna.javna .pocetna-nalog,
  .stranica-pocetna.javna .pocetna-admin {
    grid-area: login;
  }
  .stranica-pocetna.javna .jezik-pad {
    grid-area: lang;
    align-self: center;
    justify-self: end;
  }
  .stranica-pocetna.javna .pocetna-kucanje {
    display: flex !important;
    min-height: 0;
    flex: 1 1 auto;
  }
  .stranica-pocetna.javna .pocetna-podnaslov,
  .stranica-pocetna.javna .pocetna-pod2 {
    white-space: normal;
    width: 100%;
    font-size: clamp(10px, 2.7vw, 12px);
    letter-spacing: 0.015em;
    line-height: 1.2;
    transform: skewX(-6deg);
  }
  .stranica-pocetna.javna .jezik-dugme {
    height: 32px;
    padding: 0 8px;
    font-size: 11px;
    gap: 4px;
  }
  .ekran-izbor .pocetna-traka {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.6rem;
    align-items: start;
    column-gap: 8px;
    row-gap: 6px;
    min-height: 0;
    padding: 8px 10px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .ekran-izbor .pocetna-lijevo,
  .ekran-izbor .pocetna-desno,
  .ekran-izbor .pocetna-admin,
  .ekran-izbor .nav-koraci {
    display: contents;
  }
  .ekran-izbor .pocetna-brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .ekran-izbor .btn-pocetna {
    grid-column: 2;
    grid-row: 1;
  }
  .ekran-izbor .jezik-pad {
    grid-column: 2;
    grid-row: 2;
    width: 6.4rem;
    justify-self: end;
  }
  .ekran-izbor .pocetna-odjava {
    grid-column: 2;
    grid-row: 3;
  }
  .ekran-izbor .pocetna-admin-ime {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    font-size: 13px;
  }
  .ekran-izbor .admin-polja {
    grid-column: 1 / -1;
    grid-row: 4;
    display: flex;
    flex-wrap: wrap;
  }
  body.ekran-izbor:has(.rucni-rok) .nav-koraci {
    display: flex;
  }
  body.ekran-izbor:has(.rucni-rok) .jezik-pad {
    grid-column: 2;
    grid-row: 1;
  }
  body.ekran-izbor:has(.rucni-rok) .pocetna-admin-ime {
    grid-column: 1;
    grid-row: 2;
  }
  body.ekran-izbor:has(.rucni-rok) .pocetna-odjava {
    grid-column: 2;
    grid-row: 2;
  }
  body.ekran-izbor:has(.rucni-rok) .admin-polja {
    grid-row: 3;
  }
  .ekran-izbor .btn-pocetna,
  .ekran-izbor .pocetna-odjava {
    width: 7.6rem;
    min-width: 7.6rem;
    height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    padding: 0 8px;
    margin: 0;
  }
  .ekran-izbor .jezik-dugme {
    width: 100%;
    min-width: 0;
    height: 30px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    padding: 0 6px;
    margin: 0;
  }
  .pocetna-lijevo {
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
    flex-wrap: wrap;
  }
  .pocetna-brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }
  .stranica-pocetna.javna .logo-pogodi img,
  .logo-pogodi img {
    width: 36px;
    height: 36px;
  }
  .pocetna-brand strong,
  .stranica-pocetna.javna .pocetna-brand strong {
    font-size: 16px;
  }
  .ekran-izbor .pocetna-desno {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
  }
  .pocetna-nalog {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
  }
  .pocetna-nalog-kolona {
    max-width: none;
    width: 100%;
  }
  .pocetna-nalog-forma {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .pocetna-nalog input,
  .pocetna-nalog-forma input,
  .stranica-pocetna.javna .pocetna-nalog input,
  .stranica-pocetna.javna .pocetna-nalog-forma input {
    width: 100%;
    max-width: none;
    flex: none;
    min-width: 0;
    height: 40px;
    font-size: 16px;
    box-sizing: border-box;
  }
  .pocetna-nalog button[type="submit"],
  .pocetna-nalog-forma button[type="submit"],
  .stranica-pocetna.javna .pocetna-reg,
  .stranica-pocetna.javna .pocetna-odjava {
    height: 40px;
    width: 100%;
    justify-content: center;
    font-size: 15px;
    box-sizing: border-box;
  }
  .prijava-poruka-ispod {
    font-size: 12px;
    line-height: 1.3;
  }
  .pocetna-pozadina {
    top: 0;
    background-attachment: scroll;
    background-position: center center;
  }
  .stranica-pocetna.javna .pocetna-pozadina {
    top: 12.75rem;
    bottom: 0;
    height: auto;
    background: url("hero/pocetna-spoj.jpg") center center / cover no-repeat;
    background-attachment: scroll;
  }
  .reg-stranica {
    top: 0;
    padding: 72px 12px 24px;
  }
  .stranica-pocetna.javna #oAplikacijiKartica.o-info-kartica {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 2;
    display: block;
    padding: 8px 10px 20px;
    background: transparent;
    overflow: visible;
  }
  .stranica-pocetna.javna #oAplikacijiKartica.o-info-kartica.reg-sakriven {
    display: none !important;
  }
  .stranica-pocetna.javna #oAplikacijiKartica .o-aplikaciji-ploca {
    max-width: 100%;
    background: #fff;
    color: #122016;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  }
  .stranica-pocetna.javna #oAplikacijiKartica .o-aplikaciji-ploca p {
    font-size: 16px;
    line-height: 1.5;
    color: #122016;
  }
  .reg-ploča,
  .reg-stranica .reg-ploča {
    max-width: 100%;
    padding: 14px 12px 16px;
  }

  .ekran-izbor .izbor-pozadine {
    flex-direction: row;
    top: 0;
  }
  .izbor-pozadina::before,
  .pocetna-polovina::before {
    background-attachment: scroll;
  }
  .pocetna-split,
  .ekran-izbor .pocetna-split {
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    min-height: calc(100dvh - 7.5rem);
    width: 100%;
    gap: 12px;
    padding: 8px 6vw 24px;
    box-sizing: border-box;
  }
  .pocetna-polovina {
    width: min(42vw, 168px);
    max-width: none;
    height: min(46vw, 200px);
    flex: 0 0 auto;
  }
  .pocetna-natpis { font-size: 15px; padding: 4px 6px 10px; }

  .app-glava {
    top: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "back brand desno"
      "sport sport sport";
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
    min-height: 0;
    flex-wrap: unset;
  }
  .app-glava-lijevo,
  .app-glava-brand-sport {
    display: contents;
  }
  .app-glava .btn-nazad { grid-area: back; }
  .app-glava .btn-nazad.sakriven { display: none; }
  .app-glava-brand { grid-area: brand; min-width: 0; }
  .app-glava-ime strong { font-size: 14px; }
  .app-glava-ime small { font-size: 10px; }
  .app-glava-desno { grid-area: desno; gap: 6px; }
  .app-glava .pocetna-admin-ime { max-width: 4.8rem; font-size: 12px; }
  .sport-prebacaj {
    grid-area: sport;
    margin-left: 0;
    width: 100%;
    height: 36px;
    justify-self: stretch;
  }
  .sport-prebacaj-dugme {
    flex: 1 1 0;
    justify-content: center;
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
    gap: 6px;
  }
  .app-glava .pocetna-odjava,
  .app-glava .jezik-dugme,
  .nav-koraci .btn-check-api,
  .nav-koraci .btn-skini-kvote,
  .btn-nazad,
  .btn-pocetna {
    height: 36px;
    font-size: 12px;
  }
  .btn-pocetna { padding: 0 8px; }
  .btn-nazad { width: 36px; }
  .jezik-desno-fix,
  .btn-nazad-danas-fix {
    top: max(6px, env(safe-area-inset-top));
    right: 8px;
  }

  body.sport-fudbal,
  body.sport-kosarka {
    overflow-x: hidden;
  }
  .wrap {
    padding: 8px 8px 16px;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    max-width: 100%;
    overflow-x: hidden;
  }
  .wrap-sportovi { padding: 12px 10px 16px; max-width: none; }
  .wrap-sportovi-ekran {
    padding: 48px 8px 8px;
    height: 100dvh;
    max-height: 100dvh;
  }
  .sport-plocice-ekran .sport-plocica { padding: 10px 8px; }
  .sport-ime { font-size: 18px; }
  .sport-opis { font-size: 12px; }

  .card { padding: 10px 8px; }
  .center.card { min-height: 0; overflow: visible; padding: 10px 10px 10px 4px; }
  .side-nav { max-height: min(40vh, 280px); }
  table { font-size: 12px; }
  .layout { overflow: visible; }
  /* Desne kartice (klubovi/omiljeni/sistem) jedu ekran — na telefonu van, da se vide uživo i rang. */
  .layout > .right { display: none; }
  body.pregled-fiks {
    height: auto;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
  }
  body.pregled-fiks .wrap {
    overflow: visible;
    display: block;
    height: auto;
    min-height: 0;
    flex: none;
  }
  body.pregled-fiks .layout {
    overflow: visible;
    height: auto;
    min-height: 0;
    flex: none;
    align-content: start;
    grid-auto-rows: min-content;
  }
  body.pregled-fiks .center.card {
    overflow: visible;
    min-height: 0;
    max-height: none;
  }
  .igra-predlog-red,
  .traka-gore > .igra-predlog-red {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    gap: 6px;
    width: 100%;
  }
  .traka-gore > .igra-predlog-red.igra-predlog-samo {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 16rem;
  }
  .igra-predlog-red .menu,
  .traka-gore > .igra-predlog-red > .menu {
    min-width: 0;
    width: 100%;
  }
  .igra-predlog-red .drop-igra { position: static; }
  .igra-predlog-red { position: relative; }
  .igra-predlog-red .menu details > summary,
  .btn-predlog-traka {
    height: auto;
    min-height: 44px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.2;
    padding: 8px 6px;
    font-size: 13px;
    text-align: center;
  }
  .drop-igra .drop-panel,
  .igra-predlog-red .drop-igra .drop-panel {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: min(70vh, 28rem);
    z-index: 80;
  }
  .kriteriji,
  .liga-tabovi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .kriteriji a {
    flex: 1 1 calc(33.33% - 8px);
    min-height: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 6px;
    font-size: 12px;
    white-space: normal;
    line-height: 1.15;
  }
  .kriteriji.predlog-red a {
    flex: 1 1 calc(50% - 8px);
  }
  .pregled-traka {
    flex-wrap: wrap;
    gap: 6px;
  }
  .pregled-traka > a.pregled-dugme,
  .pregled-traka > details {
    flex: 1 1 calc(50% - 6px);
    min-width: 7.5rem;
  }
  .pregled-traka > a.pregled-uzivo,
  .pregled-traka > a.pregled-statistika {
    flex: 1 1 100%;
  }
  .sa-split,
  .sa-duel {
    grid-template-columns: 1fr;
  }
  .sa-lista { max-height: 14rem; }
  .sa-filteri select,
  .sa-uporedi-form input[type="search"] {
    min-width: 0;
    width: 100%;
  }
  .pregled-dugme {
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    font-size: 12px;
    height: 38px;
  }
  #uzivo-blok,
  .pregled-ekran,
  .center.card {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  .tab-uzivo,
  .tab-dan,
  .tab-kvote {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .tab-dan thead { display: none; }
  .tab-dan tbody { display: block; width: 100%; }
  .tab-dan tbody tr:has(td[colspan]) {
    display: block;
    padding: 10px 4px;
  }
  .tab-dan tbody tr:has(td[colspan]) td { display: block; }
  .tab-dan tbody tr {
    display: grid;
    grid-template-columns: 2.5em minmax(0, 1fr) 2.4em 2.4em 2.15em;
    grid-template-areas:
      "vri home ht ft flag"
      "vri away liga liga flag";
    column-gap: 5px;
    row-gap: 4px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 8px 7px 0;
    border-bottom: 1px solid #e0e8e1;
  }
  .tab-dan.tab-kvote tbody tr {
    grid-template-areas:
      "vri home kvote kvote flag"
      "vri away liga liga flag";
  }
  .tab-dan:has(.dan-uloga) tbody tr {
    grid-template-areas:
      "vri home ht ft flag"
      "ulo away liga liga flag";
  }
  .tab-dan tbody td {
    border: 0;
    padding: 0;
    min-width: 0;
    overflow: hidden;
    position: static;
  }
  .tab-dan td.dan-vri {
    grid-area: vri;
    font-size: 11px;
    white-space: normal;
    line-height: 1.15;
    overflow: visible;
  }
  .tab-uzivo td.dan-vri {
    white-space: nowrap;
  }
  .tab-dan td.dan-uloga {
    grid-area: ulo;
    font-size: 10px;
    color: var(--muted);
  }
  .tab-dan td.dan-tim:nth-child(2) { grid-area: home; }
  .tab-dan td.dan-tim:nth-child(3) { grid-area: away; }
  .tab-dan tr:has(.dan-uloga) td.dan-tim:nth-child(3) { grid-area: home; }
  .tab-dan tr:has(.dan-uloga) td.dan-tim:nth-child(4) { grid-area: away; }
  .tab-dan td.dan-tim {
    padding-left: 0;
    font-size: 13px;
    line-height: 1.2;
  }
  .tab-dan .tim-cel {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
  }
  .tab-dan .tim-cel .tim-link,
  .tab-dan .tim-cel > span:not(.grb) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tab-uzivo td.dan-ht,
  .tab-uzivo td.dan-ft {
    position: static;
    padding-top: 0;
  }
  .tab-uzivo .zavrseno-lab {
    position: static;
    display: block;
    font-size: 9px;
    margin-bottom: 1px;
  }
  .tab-dan td.dan-ht { grid-area: ht; font-size: 13px; text-align: center; white-space: nowrap; overflow: visible; }
  .tab-dan td.dan-ft { grid-area: ft; font-size: 13px; text-align: center; white-space: nowrap; overflow: visible; }
  .tab-kvote td.dan-kvote { grid-area: kvote; font-size: 11px; overflow: visible; }
  .tab-dan td.dan-liga {
    grid-area: liga;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    padding-left: 0;
    overflow: hidden;
  }
  .liga-cel {
    gap: 8px;
    width: 100%;
  }
  .liga-tekst {
    flex: 1 1 auto;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .zvijezda-mec svg {
    width: 22px;
    height: 22px;
  }
  .tab-dan td.zvijezda-td,
  .tab-dan td.dan-pogodak {
    grid-area: flag;
    overflow: visible;
    text-align: center;
    font-size: 11px;
  }
  .uzivo-zastava { width: 20px; height: 20px; }
  .tab-cet tbody tr {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-template-areas:
      "vri home home home ht ht ft ft flag flag"
      "vri away away away ht ht ft ft flag flag"
      "q1  q1   q2   q2   q3 q3 q4 q4 ot   ot"
      "liga liga liga liga liga liga liga liga liga liga";
    row-gap: 3px;
  }
  .tab-cet:has(.dan-uloga) tbody tr {
    grid-template-areas:
      "vri home home home ht ht ft ft flag flag"
      "ulo away away away ht ht ft ft flag flag"
      "q1  q1   q2   q2   q3 q3 q4 q4 ot   ot"
      "liga liga liga liga liga liga liga liga liga liga";
  }
  .tab-cet td.dan-q1 { grid-area: q1; }
  .tab-cet td.dan-q2 { grid-area: q2; }
  .tab-cet td.dan-q3 { grid-area: q3; }
  .tab-cet td.dan-q4 { grid-area: q4; }
  .tab-cet td.dan-qot { grid-area: ot; }
  .tab-cet td.dan-ht,
  .tab-cet td.dan-ft {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .tab-cet td.dan-ht::before,
  .tab-cet td.dan-ft::before,
  .tab-cet td.dan-q::before {
    display: block;
    font-size: 9px;
    font-weight: 700;
    color: var(--muted);
    line-height: 1;
    margin-bottom: 1px;
  }
  .tab-cet td.dan-ht::before { content: "HT"; }
  .tab-cet td.dan-ft::before { content: "FT"; }
  .tab-cet td.dan-q1::before { content: "Q1"; }
  .tab-cet td.dan-q2::before { content: "Q2"; }
  .tab-cet td.dan-q3::before { content: "Q3"; }
  .tab-cet td.dan-q4::before { content: "Q4"; }
  .tab-cet td.dan-qot::before { content: "OT"; }
  .tab-cet td.dan-q {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    overflow: visible;
    min-width: 0;
  }
  .tab-cet td.dan-liga {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rang-tab {
    display: block;
    width: 100%;
    font-size: 12px;
  }
  .rang-tab thead { display: none; }
  .rang-tab tbody { display: block; width: 100%; }
  .rang-tab tbody tr {
    display: grid;
    grid-template-columns: 1.45em minmax(0, 1fr) 1.9em 1.9em 2.7em 2.7em;
    grid-template-areas:
      "rb ekipa n pog pct vidi"
      "rb mec kv kv kv vidi";
    column-gap: 5px;
    row-gap: 4px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 8px 7px 0;
    border-bottom: 1px solid #e0e8e1;
  }
  .rang-tab tbody td {
    border: 0;
    padding: 0;
    min-width: 0;
    overflow: hidden;
  }
  .rang-tab tbody td:nth-child(1) { grid-area: rb; font-size: 11px; color: var(--muted); overflow: visible; }
  .rang-tab tbody td:nth-child(2) { grid-area: ekipa; }
  .rang-tab tbody td.danas-mec { grid-area: mec; font-size: 11px; }
  .rang-tab tbody td.dan-kvote { grid-area: kv; font-size: 10px; }
  .rang-tab tbody tr:not(:has(.danas-mec)) td:nth-child(2) { grid-row: 1 / span 2; }
  .rang-tab tbody td.col-br:nth-last-child(4) { grid-area: n; text-align: center; overflow: visible; }
  .rang-tab tbody td.col-br:nth-last-child(3) { grid-area: pog; text-align: center; overflow: visible; }
  .rang-tab tbody td.col-br:nth-last-child(2) { grid-area: pct; text-align: center; overflow: visible; font-weight: 700; }
  .rang-tab tbody td.rang-vidi { grid-area: vidi; overflow: visible; white-space: normal; }
  .rang-tab .tim-blok,
  .rang-tab .mec-blok { min-width: 0; max-width: 100%; }
  .rang-tab .tim {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
  }
  .rang-tab .tim .tim-link {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rang-tab .tim .tim-link { font-size: 13px; font-weight: 700; }
  .rang-tab .tim-meta {
    padding-left: 22px;
    font-size: 10px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rang-tab .mec-kad-red { flex-wrap: wrap; white-space: normal; gap: 4px; }
  .rang-tab .mec-par {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rang-tab .vidi-meceve { font-size: 10px; }
  .tab-liga {
    width: 100%;
    table-layout: fixed;
    font-size: 11px;
  }
  .tab-liga th,
  .tab-liga td {
    padding: 4px 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .predlog-uredi-igre {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
  }
  .predlog-igra-polje {
    width: 100%;
    min-width: 0;
    position: static;
  }
  .predlog-igra-polje > summary {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    padding: 12px 14px;
    text-align: center;
  }
  .predlog-igra-polje .drop-panel {
    position: static;
    left: auto;
    top: auto;
    min-width: 0;
    width: 100%;
    max-height: min(55vh, 22rem);
    box-sizing: border-box;
    margin-top: 6px;
  }
  .predlog-igra-uredi {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 16px;
    padding: 12px 14px;
  }
  .predlog-igra-polje .drop-item {
    font-size: 15px;
    padding: 8px 10px;
    white-space: normal;
  }
}

/* Arena UI: isti tamni paneli i zlatni tabovi na fudbalu i košarci. */
html:has(body.sport-fudbal) { background-color: #06140c; }
html:has(body.sport-kosarka) { background-color: #120c08; }

body.sport-fudbal,
body.sport-kosarka {
  color: #efe8dc;
}
body.sport-fudbal {
  --tab-akcent: #1f9d4a;
  --tab-akcent-tekst: #f4fff6;
  --tab-hover: rgba(31, 157, 74, 0.28);
  --tab-sjena: rgba(31, 157, 74, 0.45);
  --tab-ivica: rgba(31, 157, 74, 0.85);
  --linija: rgba(31, 157, 74, 0.55);
  --linija-slaba: rgba(31, 157, 74, 0.22);
}
body.sport-kosarka {
  --tab-akcent: #c45a12;
  --tab-akcent-tekst: #fff8f0;
  --tab-hover: rgba(196, 90, 18, 0.28);
  --tab-sjena: rgba(196, 90, 18, 0.45);
  --tab-ivica: rgba(196, 90, 18, 0.85);
  --linija: rgba(196, 90, 18, 0.55);
  --linija-slaba: rgba(196, 90, 18, 0.22);
}
body.sport-fudbal .app-glava,
body.sport-kosarka .app-glava {
  color: #f3efe6;
  background: linear-gradient(180deg, rgba(6, 10, 14, 0.62) 0%, rgba(6, 10, 14, 0.18) 100%);
  border-bottom: 1px solid var(--tab-ivica);
  box-shadow: none;
}
body.sport-fudbal .app-glava-brand,
body.sport-kosarka .app-glava-brand { color: #f3efe6; }
body.sport-fudbal .logo-slogan,
body.sport-kosarka .logo-slogan { color: #e8d4b8; }
body.sport-fudbal .app-glava-ime small,
body.sport-kosarka .app-glava-ime small { opacity: 0.82; color: #d4b483; }

body.sport-fudbal .sport-prebacaj,
body.sport-kosarka .sport-prebacaj {
  background: rgba(10, 16, 24, 0.88);
  border: 1px solid var(--tab-ivica);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
body.sport-fudbal .sport-prebacaj-dugme,
body.sport-kosarka .sport-prebacaj-dugme {
  color: #e8e0d4;
  background: transparent;
  border-right-color: var(--tab-ivica);
}
body.sport-fudbal .sport-prebacaj-dugme[href="/fudbal"]:hover,
body.sport-kosarka .sport-prebacaj-dugme[href="/fudbal"]:hover,
body.sport-fudbal .sport-prebacaj-dugme[href="/fudbal"].aktivna,
body.sport-kosarka .sport-prebacaj-dugme[href="/fudbal"].aktivna {
  background: #1f9d4a;
  color: #f4fff6;
}
body.sport-fudbal .sport-prebacaj-dugme[href="/kosarka"]:hover,
body.sport-kosarka .sport-prebacaj-dugme[href="/kosarka"]:hover,
body.sport-fudbal .sport-prebacaj-dugme[href="/kosarka"].aktivna,
body.sport-kosarka .sport-prebacaj-dugme[href="/kosarka"].aktivna {
  background: #c45a12;
  color: #fff8f0;
}
body.sport-fudbal .tema-prebacaj,
body.sport-kosarka .tema-prebacaj {
  background: rgba(10, 16, 24, 0.88);
  border: 1px solid var(--tab-ivica);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
body.sport-fudbal .tema-dugme,
body.sport-kosarka .tema-dugme {
  color: #e8e0d4;
  background: transparent;
  border-right-color: var(--tab-ivica);
}
body.sport-fudbal .tema-dugme:hover,
body.sport-kosarka .tema-dugme:hover { background: var(--tab-hover); }
body.sport-fudbal .tema-dugme.aktivna,
body.sport-kosarka .tema-dugme.aktivna {
  background: var(--tab-akcent);
  color: var(--tab-akcent-tekst);
}

body.sport-fudbal .app-glava .pocetna-admin-ime,
body.sport-kosarka .app-glava .pocetna-admin-ime { color: #f3efe6; }
body.sport-fudbal .app-glava .pocetna-odjava,
body.sport-kosarka .app-glava .pocetna-odjava,
body.sport-fudbal .app-glava .jezik-dugme,
body.sport-kosarka .app-glava .jezik-dugme,
body.sport-fudbal .btn-nazad,
body.sport-kosarka .btn-nazad,
body.sport-fudbal .btn-pocetna,
body.sport-kosarka .btn-pocetna {
  background: rgba(12, 18, 28, 0.9);
  color: #f3efe6;
  border-color: var(--tab-ivica);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
body.sport-fudbal .btn-nazad:hover,
body.sport-kosarka .btn-nazad:hover,
body.sport-fudbal .btn-pocetna:hover,
body.sport-kosarka .btn-pocetna:hover,
body.sport-fudbal .app-glava .pocetna-odjava:hover,
body.sport-kosarka .app-glava .pocetna-odjava:hover { background: var(--tab-hover); }
body.sport-fudbal .app-glava .jezik-lista,
body.sport-kosarka .app-glava .jezik-lista {
  background: #121a28;
  border-color: var(--tab-ivica);
}
body.sport-fudbal .app-glava .jezik-stavka,
body.sport-kosarka .app-glava .jezik-stavka {
  color: #f0d4b0;
  border-bottom-color: var(--linija-slaba);
}
body.sport-fudbal .app-glava .jezik-stavka:hover,
body.sport-kosarka .app-glava .jezik-stavka:hover,
body.sport-fudbal .app-glava .jezik-stavka.aktivan,
body.sport-kosarka .app-glava .jezik-stavka.aktivan {
  background: var(--tab-hover);
  color: var(--tab-akcent-tekst);
}

body.sport-fudbal .card,
body.sport-kosarka .card {
  background: rgba(10, 16, 26, 0.88);
  color: #efe8dc;
  border: 1px solid var(--tab-ivica);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
body.sport-fudbal .hint,
body.sport-kosarka .hint,
body.sport-fudbal .muted,
body.sport-kosarka .muted { color: #b8a98a; }
body.sport-fudbal h2,
body.sport-kosarka h2,
body.sport-fudbal h3,
body.sport-kosarka h3,
body.sport-fudbal .liga-head h2,
body.sport-kosarka .liga-head h2,
body.sport-fudbal .dan-naslov,
body.sport-kosarka .dan-naslov,
body.sport-fudbal .brand,
body.sport-kosarka .brand { color: #f0d4b0; }

@media (min-width: 769px) {
  body.sport-fudbal .traka-gore,
  body.sport-kosarka .traka-gore {
    background: rgba(8, 12, 18, 0.7);
    border: 1px solid var(--tab-ivica);
    border-radius: 999px;
    padding: 6px 8px;
    gap: 6px;
  }
}

body.sport-fudbal .pregled-dugme,
body.sport-kosarka .pregled-dugme,
body.sport-fudbal .igra-predlog-red .menu details > summary,
body.sport-kosarka .igra-predlog-red .menu details > summary,
body.sport-fudbal .btn-predlog-traka,
body.sport-kosarka .btn-predlog-traka,
body.sport-fudbal .kriteriji a,
body.sport-kosarka .kriteriji a,
body.sport-fudbal .liga-tabovi a,
body.sport-kosarka .liga-tabovi a,
body.sport-fudbal .igra-chip,
body.sport-kosarka .igra-chip,
body.sport-fudbal .predlog-igra-polje > summary,
body.sport-kosarka .predlog-igra-polje > summary {
  background: rgba(12, 18, 28, 0.92);
  color: #e8e0d4;
  border: 1px solid var(--tab-ivica);
  border-radius: 999px;
}
body.sport-fudbal .pregled-dugme:hover,
body.sport-kosarka .pregled-dugme:hover,
body.sport-fudbal .btn-predlog-traka:hover,
body.sport-kosarka .btn-predlog-traka:hover,
body.sport-fudbal .igra-predlog-red .menu details > summary:hover,
body.sport-kosarka .igra-predlog-red .menu details > summary:hover,
body.sport-fudbal .kriteriji a:hover,
body.sport-kosarka .kriteriji a:hover,
body.sport-fudbal .liga-tabovi a:hover,
body.sport-kosarka .liga-tabovi a:hover,
body.sport-fudbal .igra-chip:hover,
body.sport-kosarka .igra-chip:hover,
body.sport-fudbal .predlog-igra-polje > summary:hover,
body.sport-kosarka .predlog-igra-polje > summary:hover {
  background: var(--tab-hover);
  color: var(--tab-akcent-tekst);
  border-color: var(--tab-akcent);
}
body.sport-fudbal .pregled-dugme.aktivna,
body.sport-kosarka .pregled-dugme.aktivna,
body.sport-fudbal .btn-predlog-traka.aktivna,
body.sport-kosarka .btn-predlog-traka.aktivna,
body.sport-fudbal .igra-predlog-red .menu details > summary.aktivna,
body.sport-kosarka .igra-predlog-red .menu details > summary.aktivna,
body.sport-fudbal .kriteriji a.aktivna,
body.sport-kosarka .kriteriji a.aktivna,
body.sport-fudbal .liga-tabovi a.aktivna,
body.sport-kosarka .liga-tabovi a.aktivna,
body.sport-fudbal .igra-chip.aktivna,
body.sport-kosarka .igra-chip.aktivna,
body.sport-fudbal .predlog-igra-polje[open] > summary,
body.sport-kosarka .predlog-igra-polje[open] > summary {
  background: var(--tab-akcent);
  color: var(--tab-akcent-tekst);
  border-color: var(--tab-akcent);
  box-shadow: 0 0 12px var(--tab-sjena);
}

body.sport-fudbal .drop-panel,
body.sport-kosarka .drop-panel {
  background: #121a28;
  border: 1px solid var(--tab-ivica);
  color: #efe8dc;
}
body.sport-fudbal .igra-podgrupe,
body.sport-kosarka .igra-podgrupe {
  background: #121a28;
  border-bottom-color: var(--tab-ivica);
}
body.sport-fudbal .igra-podgrupe a,
body.sport-kosarka .igra-podgrupe a {
  color: #e8e0d4;
  border: 1px solid var(--tab-ivica);
  border-radius: 999px;
}
body.sport-fudbal .igra-podgrupe a:hover,
body.sport-kosarka .igra-podgrupe a:hover {
  background: var(--tab-hover);
  color: var(--tab-akcent-tekst);
  border-color: var(--tab-akcent);
}
body.sport-fudbal .igra-podgrupe a.aktivna,
body.sport-kosarka .igra-podgrupe a.aktivna,
body.sport-fudbal .igra-podgrupe a.aktivna:hover,
body.sport-kosarka .igra-podgrupe a.aktivna:hover {
  background: var(--tab-akcent);
  color: var(--tab-akcent-tekst);
  border-color: var(--tab-akcent);
}
body.sport-fudbal .igra-uredi,
body.sport-kosarka .igra-uredi,
body.sport-fudbal .predlog-igra-uredi,
body.sport-kosarka .predlog-igra-uredi {
  color: var(--tab-akcent) !important;
}
body.sport-fudbal .drop-item,
body.sport-kosarka .drop-item { color: #e8e0d4; }
body.sport-fudbal .drop-item:hover,
body.sport-kosarka .drop-item:hover {
  background: var(--tab-hover);
  color: var(--tab-akcent-tekst);
}
body.sport-fudbal .drop-item.aktivna,
body.sport-kosarka .drop-item.aktivna {
  background: var(--tab-akcent);
  color: var(--tab-akcent-tekst);
}
body.sport-fudbal .igra-grupa,
body.sport-kosarka .igra-grupa { color: #d4b483; }
body.sport-fudbal .stat-search input,
body.sport-kosarka .stat-search input,
body.sport-fudbal .trazi-ligu,
body.sport-kosarka .trazi-ligu {
  background: rgba(8, 12, 20, 0.92);
  color: #efe8dc;
  border-color: var(--tab-ivica);
  border-radius: 999px;
}
body.sport-fudbal .stat-search input::placeholder,
body.sport-kosarka .stat-search input::placeholder { color: #8a7a64; }
body.sport-fudbal .nav-item,
body.sport-kosarka .nav-item { color: #e8e0d4; }
body.sport-fudbal .nav-item:hover,
body.sport-kosarka .nav-item:hover,
body.sport-fudbal .nav-item.aktivna,
body.sport-kosarka .nav-item.aktivna { background: var(--tab-hover); }
body.sport-fudbal .side-nav .nav-item:hover,
body.sport-kosarka .side-nav .nav-item:hover {
  background: var(--tab-hover);
  color: var(--tab-akcent-tekst);
}
body.sport-fudbal .nav-item.aktivna,
body.sport-kosarka .nav-item.aktivna { color: var(--tab-akcent); }
body.sport-fudbal .side-nav h3,
body.sport-kosarka .side-nav h3 { color: #b8a98a; }

body.sport-fudbal .tab-dan th,
body.sport-kosarka .tab-dan th,
body.sport-fudbal th,
body.sport-kosarka th {
  color: #f0d4b0;
  border-bottom-color: var(--tab-ivica);
}
body.sport-fudbal .tab-dan td,
body.sport-kosarka .tab-dan td,
body.sport-fudbal td,
body.sport-kosarka td {
  color: #efe8dc;
  border-bottom-color: var(--linija-slaba);
}
body.sport-fudbal .tab-dan th,
body.sport-kosarka .tab-dan th,
body.sport-fudbal .tab-dan td,
body.sport-kosarka .tab-dan td,
body.sport-fudbal .tab-liga th,
body.sport-kosarka .tab-liga th,
body.sport-fudbal .tab-liga td,
body.sport-kosarka .tab-liga td,
body.sport-fudbal .rang-tab th,
body.sport-kosarka .rang-tab th,
body.sport-fudbal .rang-tab td,
body.sport-kosarka .rang-tab td {
  border-left-color: var(--linija-slaba);
  border-right-color: var(--linija-slaba);
}
body.sport-fudbal .tab-dan tbody tr:nth-child(even),
body.sport-kosarka .tab-dan tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
body.sport-fudbal .tab-dan .dan-vri,
body.sport-kosarka .tab-dan .dan-vri { color: #b8a98a; }
body.sport-fudbal .tab-dan .dan-ht,
body.sport-kosarka .tab-dan .dan-ht,
body.sport-fudbal .tab-dan .dan-ft,
body.sport-kosarka .tab-dan .dan-ft,
body.sport-fudbal .tab-dan .dan-q,
body.sport-kosarka .tab-dan .dan-q,
body.sport-fudbal .tab-dan th.th-q,
body.sport-kosarka .tab-dan th.th-q { color: #fff8f0; }
body.sport-fudbal .tim-link,
body.sport-kosarka .tim-link {
  color: #f3efe6;
  border-bottom-color: var(--linija);
}
body.sport-fudbal .tim-link:hover,
body.sport-kosarka .tim-link:hover {
  color: var(--tab-akcent);
  border-bottom-color: var(--tab-akcent);
}
body.sport-fudbal .tim-meta,
body.sport-kosarka .tim-meta { color: #b8a98a; }
body.sport-fudbal .rang-tab .tim .tim-link,
body.sport-kosarka .rang-tab .tim .tim-link {
  font-size: 15px;
  font-weight: 700;
}
body.sport-fudbal .rang-tab .tim-meta,
body.sport-kosarka .rang-tab .tim-meta,
body.sport-fudbal .rang-tab .tim-meta span,
body.sport-kosarka .rang-tab .tim-meta span {
  font-size: 11px;
  font-weight: 400;
}
body.sport-fudbal #uzivo-blok .tab-dan tbody tr,
body.sport-kosarka #uzivo-blok .tab-dan tbody tr {
  background: var(--tab-hover);
}
body.sport-fudbal .uzivo-naslov,
body.sport-kosarka .uzivo-naslov { color: var(--tab-akcent); }
body.sport-fudbal #uzivo-blok .gol-novi,
body.sport-kosarka #uzivo-blok .gol-novi { color: #ffb070; }
body.sport-fudbal .uzivo-zastava,
body.sport-kosarka .uzivo-zastava {
  background: #1a2438;
  border-color: var(--linija);
}
body.sport-fudbal .kvote-th .kvote-naslov,
body.sport-kosarka .kvote-th .kvote-naslov,
body.sport-fudbal .dan-kvote-lab span,
body.sport-kosarka .dan-kvote-lab span { color: #d4b483; }
body.sport-fudbal .tab-provjera tbody tr.pogodio,
body.sport-kosarka .tab-provjera tbody tr.pogodio,
body.sport-fudbal .tab-provjera tbody tr.pogodio td,
body.sport-kosarka .tab-provjera tbody tr.pogodio td {
  background: #1f9d4a;
  color: #f4fff6;
}
body.sport-fudbal .tab-provjera tbody tr.pogodio .tim-link,
body.sport-kosarka .tab-provjera tbody tr.pogodio .tim-link,
body.sport-fudbal .tab-provjera tbody tr.pogodio .dan-vri,
body.sport-kosarka .tab-provjera tbody tr.pogodio .dan-vri,
body.sport-fudbal .tab-provjera tbody tr.pogodio .dan-ht,
body.sport-kosarka .tab-provjera tbody tr.pogodio .dan-ht,
body.sport-fudbal .tab-provjera tbody tr.pogodio .dan-ft,
body.sport-kosarka .tab-provjera tbody tr.pogodio .dan-ft,
body.sport-fudbal .tab-provjera tbody tr.pogodio .dan-q,
body.sport-kosarka .tab-provjera tbody tr.pogodio .dan-q,
body.sport-fudbal .tab-provjera tbody tr.pogodio .da,
body.sport-kosarka .tab-provjera tbody tr.pogodio .da {
  color: #f4fff6;
}
body.sport-fudbal .tab-provjera tbody tr.promasio,
body.sport-kosarka .tab-provjera tbody tr.promasio,
body.sport-fudbal .tab-provjera tbody tr.promasio td,
body.sport-kosarka .tab-provjera tbody tr.promasio td {
  background: #fff;
  color: #122016;
}
body.sport-fudbal .tab-provjera tbody tr.promasio .tim-link,
body.sport-kosarka .tab-provjera tbody tr.promasio .tim-link,
body.sport-fudbal .tab-provjera tbody tr.promasio .dan-vri,
body.sport-kosarka .tab-provjera tbody tr.promasio .dan-vri {
  color: #122016;
}
body.sport-fudbal .vidi-meceve,
body.sport-kosarka .vidi-meceve {
  background: #1f9d4a;
  color: #f4fff6;
}
body.sport-fudbal .vidi-meceve:hover,
body.sport-kosarka .vidi-meceve:hover {
  background: #167a3a;
  color: #f4fff6;
}

body.sport-fudbal .right .card-mini,
body.sport-kosarka .right .card-mini,
body.sport-fudbal .right .sistem-link,
body.sport-kosarka .right .sistem-link {
  border: 1px solid var(--tab-ivica);
  background: rgba(10, 16, 26, 0.88);
  border-radius: 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #f3efe6;
}
body.sport-fudbal .right .card-mini h3,
body.sport-kosarka .right .card-mini h3 {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: #f3efe6;
}
body.sport-fudbal .omiljeni-side.aktivna,
body.sport-kosarka .omiljeni-side.aktivna { outline: 2px solid var(--tab-akcent); }
body.sport-fudbal .pregled-zvuk,
body.sport-kosarka .pregled-zvuk {
  background: rgba(10, 16, 26, 0.88);
  border-color: var(--tab-ivica);
  color: #d4b483;
}
body.sport-fudbal .right > .card-mini h3::before,
body.sport-kosarka .right > .card-mini h3::before,
body.sport-fudbal .omiljeni-side h3::before,
body.sport-kosarka .omiljeni-side h3::before,
body.sport-fudbal .sistem-link::before,
body.sport-kosarka .sistem-link::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
body.sport-fudbal .right > .card-mini h3::before,
body.sport-kosarka .right > .card-mini h3::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11a4 4 0 10-8 0 4 4 0 008 0zm-4 5c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11a4 4 0 10-8 0 4 4 0 008 0zm-4 5c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z'/></svg>");
}
body.sport-fudbal .omiljeni-side h3::before,
body.sport-kosarka .omiljeni-side h3::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 21s-6.6-4.3-9.3-8.2C.7 10.2 1.4 6.5 4.6 5.2 6.6 4.4 8.8 5 12 8c3.2-3 5.4-3.6 7.4-2.8 3.2 1.3 3.9 5 1.9 7.6C18.6 16.7 12 21 12 21z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 21s-6.6-4.3-9.3-8.2C.7 10.2 1.4 6.5 4.6 5.2 6.6 4.4 8.8 5 12 8c3.2-3 5.4-3.6 7.4-2.8 3.2 1.3 3.9 5 1.9 7.6C18.6 16.7 12 21 12 21z'/></svg>");
}
body.sport-fudbal .sistem-link[href='/sistem/kalkulator']::before,
body.sport-kosarka .sistem-link[href='/sistem/kalkulator']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 3h10a2 2 0 012 2v14a2 2 0 01-2 2H7a2 2 0 01-2-2V5a2 2 0 012-2zm1 4h8v2H8V7zm0 4h2v2H8v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zM8 15h2v2H8v-2zm4 0h6v2h-6v-2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 3h10a2 2 0 012 2v14a2 2 0 01-2 2H7a2 2 0 01-2-2V5a2 2 0 012-2zm1 4h8v2H8V7zm0 4h2v2H8v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zM8 15h2v2H8v-2zm4 0h6v2h-6v-2z'/></svg>");
}
body.sport-fudbal .sistem-link[href='/sistem/tabela']::before,
body.sport-kosarka .sistem-link[href='/sistem/tabela']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 4h16v16H4V4zm2 2v3h5V6H6zm7 0v3h5V6h-5zM6 11v3h5v-3H6zm7 0v3h5v-3h-5zM6 16v2h5v-2H6zm7 0v2h5v-2h-5z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 4h16v16H4V4zm2 2v3h5V6H6zm7 0v3h5V6h-5zM6 11v3h5v-3H6zm7 0v3h5v-3h-5zM6 16v2h5v-2H6zm7 0v2h5v-2h-5z'/></svg>");
}

body.sport-fudbal .btn-danas,
body.sport-kosarka .btn-danas {
  background: rgba(12, 18, 28, 0.92);
  color: #e8e0d4;
  border: 1px solid var(--tab-ivica);
  border-radius: 999px;
}
body.sport-fudbal .btn-danas:hover,
body.sport-kosarka .btn-danas:hover {
  background: var(--tab-hover);
  border-color: var(--tab-akcent);
}
body.sport-fudbal .kolo-traka,
body.sport-kosarka .kolo-traka {
  background: rgba(16, 24, 40, 0.9);
  color: #efe8dc;
}
body.sport-fudbal .kolo-traka a,
body.sport-kosarka .kolo-traka a { color: var(--tab-akcent); }
body.sport-fudbal .mec-red,
body.sport-kosarka .mec-red {
  background: rgba(14, 22, 38, 0.7);
  border-bottom-color: var(--linija-slaba);
}
body.sport-fudbal .mec-red .mec-kad,
body.sport-kosarka .mec-red .mec-kad,
body.sport-fudbal .mec-liga,
body.sport-kosarka .mec-liga { color: #b8a98a; }
body.sport-fudbal .mec-liga span,
body.sport-kosarka .mec-liga span,
body.sport-fudbal .rez-ht,
body.sport-kosarka .rez-ht,
body.sport-fudbal .rez-ft,
body.sport-kosarka .rez-ft { color: #fff8f0; }
body.sport-fudbal .tab-liga th,
body.sport-kosarka .tab-liga th { color: #f0d4b0; border-bottom-color: var(--tab-ivica); }
body.sport-fudbal .tab-liga td,
body.sport-kosarka .tab-liga td { color: #efe8dc; border-bottom-color: var(--linija-slaba); }
body.sport-fudbal .zastava-liga,
body.sport-kosarka .zastava-liga { border-color: var(--linija); }
body.sport-fudbal .menu,
body.sport-kosarka .menu { background: transparent; }
body.sport-fudbal .traka-gore .menu summary,
body.sport-kosarka .traka-gore .menu summary,
body.sport-fudbal .menu details.drop-igra > summary,
body.sport-kosarka .menu details.drop-igra > summary,
body.sport-fudbal .menu details.drop-igra[open] > summary,
body.sport-kosarka .menu details.drop-igra[open] > summary,
body.sport-fudbal .traka-gore .menu details.drop-igra > summary,
body.sport-kosarka .traka-gore .menu details.drop-igra > summary,
body.sport-fudbal .traka-gore .menu details.drop-igra[open] > summary,
body.sport-kosarka .traka-gore .menu details.drop-igra[open] > summary {
  background: rgba(12, 18, 28, 0.92);
  color: #e8e0d4;
  border: 1px solid var(--tab-ivica);
  border-radius: 999px;
}
body.sport-fudbal .traka-gore .menu a:hover,
body.sport-kosarka .traka-gore .menu a:hover,
body.sport-fudbal .traka-gore .menu details[open] summary,
body.sport-kosarka .traka-gore .menu details[open] summary,
body.sport-fudbal .menu details.drop-igra > summary:hover,
body.sport-kosarka .menu details.drop-igra > summary:hover,
body.sport-fudbal .traka-gore .menu details.drop-igra > summary:hover,
body.sport-kosarka .traka-gore .menu details.drop-igra > summary:hover,
body.sport-fudbal .igra-predlog-red .menu details.drop-igra > summary:hover,
body.sport-kosarka .igra-predlog-red .menu details.drop-igra > summary:hover {
  background: var(--tab-hover);
  color: var(--tab-akcent-tekst);
  border-color: var(--tab-akcent);
}
body.sport-fudbal .igra-predlog-red .menu details.drop-igra > summary.aktivna,
body.sport-kosarka .igra-predlog-red .menu details.drop-igra > summary.aktivna,
body.sport-fudbal .traka-gore .igra-predlog-red .menu details.drop-igra > summary.aktivna,
body.sport-kosarka .traka-gore .igra-predlog-red .menu details.drop-igra > summary.aktivna,
body.sport-fudbal .menu details.drop-igra > summary.aktivna,
body.sport-kosarka .menu details.drop-igra > summary.aktivna {
  background: var(--tab-akcent);
  color: var(--tab-akcent-tekst);
  border-color: var(--tab-akcent);
  box-shadow: 0 0 12px var(--tab-sjena);
}
body.sport-fudbal .traka-gore .pregled-uzivo,
body.sport-kosarka .traka-gore .pregled-uzivo {
  background: rgba(12, 18, 28, 0.92);
  border-color: var(--tab-ivica);
  color: #e8e0d4;
}
body.sport-fudbal .traka-gore .pregled-uzivo:hover,
body.sport-kosarka .traka-gore .pregled-uzivo:hover {
  background: var(--tab-hover);
  color: var(--tab-akcent-tekst);
  border-color: var(--tab-akcent);
}
body.sport-fudbal .traka-gore .pregled-uzivo.aktivna,
body.sport-kosarka .traka-gore .pregled-uzivo.aktivna {
  background: var(--tab-akcent);
  border-color: var(--tab-akcent);
  color: var(--tab-akcent-tekst);
  box-shadow: 0 0 12px var(--tab-sjena);
}
body.sport-fudbal .kalk-tab th,
body.sport-kosarka .kalk-tab th,
body.sport-fudbal .tab-sistem th,
body.sport-kosarka .tab-sistem th {
  background: #1a2838;
  color: #f0d4b0;
}
body.sport-fudbal .rang-tab th,
body.sport-kosarka .rang-tab th { color: #f0d4b0; }
body.sport-fudbal .rang-tab td,
body.sport-kosarka .rang-tab td { color: #efe8dc; }
body.sport-fudbal input,
body.sport-kosarka input,
body.sport-fudbal select,
body.sport-kosarka select,
body.sport-fudbal textarea,
body.sport-kosarka textarea {
  background: rgba(8, 12, 20, 0.92);
  color: #efe8dc;
  border-color: var(--tab-ivica);
}

@media (max-width: 768px) {
  body.sport-fudbal .traka-gore,
  body.sport-kosarka .traka-gore {
    background: rgba(8, 12, 18, 0.78);
    border: 1px solid var(--tab-ivica);
    border-radius: 16px;
    padding: 8px;
  }
  body.sport-fudbal .card,
  body.sport-kosarka .card { border-color: var(--tab-ivica); }
  body.sport-fudbal .pregled-dugme,
  body.sport-kosarka .pregled-dugme,
  body.sport-fudbal .liga-tabovi a,
  body.sport-kosarka .liga-tabovi a,
  body.sport-fudbal .btn-predlog-traka,
  body.sport-kosarka .btn-predlog-traka {
    border-color: var(--tab-ivica);
  }
  .tema-prebacaj { height: 30px; }
  .tema-dugme { width: 30px; height: 30px; }
}

/* Svijetla tema: isti tabovi/linije (zeleno/narandžasto), svijetli paneli. */
html.tema-svijetla:has(body.sport-fudbal) { background-color: #7eb8d8; }
html.tema-svijetla:has(body.sport-kosarka) { background-color: #e8c9a0; }
html.tema-svijetla body.sport-fudbal {
  background-color: #7eb8d8;
  color: #122016;
}
html.tema-svijetla body.sport-kosarka {
  background-color: #e8c9a0;
  color: #122016;
}
html.tema-svijetla body.sport-fudbal::before {
  background-color: #7eb8d8;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0.22) 100%),
    url("hero/teren-fudbal-svijetla.jpg");
  background-size: cover, cover;
  background-position: center top, center top;
}
html.tema-svijetla body.sport-kosarka::before {
  background-color: #e8c9a0;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0.22) 100%),
    url("hero/teren-kosarka-svijetla.jpg");
  background-size: cover, cover;
  background-position: center top, center top;
}
html.tema-svijetla body.sport-fudbal .app-glava,
html.tema-svijetla body.sport-kosarka .app-glava {
  color: #122016;
  background: linear-gradient(180deg, rgba(6, 10, 14, 0.22) 0%, rgba(6, 10, 14, 0.04) 100%);
  border-bottom-color: var(--tab-ivica);
}
html.tema-svijetla body.sport-fudbal .app-glava-brand,
html.tema-svijetla body.sport-kosarka .app-glava-brand,
html.tema-svijetla body.sport-fudbal .logo-slogan,
html.tema-svijetla body.sport-kosarka .logo-slogan,
html.tema-svijetla body.sport-fudbal .app-glava-ime,
html.tema-svijetla body.sport-kosarka .app-glava-ime,
html.tema-svijetla body.sport-fudbal .app-glava-ime strong,
html.tema-svijetla body.sport-kosarka .app-glava-ime strong,
html.tema-svijetla body.sport-fudbal .app-glava-ime small,
html.tema-svijetla body.sport-kosarka .app-glava-ime small {
  color: #122016;
  text-shadow: none;
  -webkit-text-stroke: 0;
  paint-order: fill;
  background: transparent;
  box-shadow: none;
  filter: none;
}
html.tema-svijetla body.sport-fudbal .app-glava .pocetna-admin-ime,
html.tema-svijetla body.sport-kosarka .app-glava .pocetna-admin-ime {
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow: none;
  color: #122016;
  font-weight: 700;
  padding: 0;
}
html.tema-svijetla body.sport-fudbal .sport-prebacaj,
html.tema-svijetla body.sport-kosarka .sport-prebacaj,
html.tema-svijetla body.sport-fudbal .tema-prebacaj,
html.tema-svijetla body.sport-kosarka .tema-prebacaj {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--tab-ivica);
}
html.tema-svijetla body.sport-fudbal .sport-prebacaj-dugme,
html.tema-svijetla body.sport-kosarka .sport-prebacaj-dugme,
html.tema-svijetla body.sport-fudbal .tema-dugme,
html.tema-svijetla body.sport-kosarka .tema-dugme {
  color: #122016;
  background: transparent;
  border-right-color: var(--tab-ivica);
}
html.tema-svijetla body.sport-fudbal .sport-prebacaj-dugme[href="/fudbal"]:hover,
html.tema-svijetla body.sport-kosarka .sport-prebacaj-dugme[href="/fudbal"]:hover,
html.tema-svijetla body.sport-fudbal .sport-prebacaj-dugme[href="/fudbal"].aktivna,
html.tema-svijetla body.sport-kosarka .sport-prebacaj-dugme[href="/fudbal"].aktivna {
  background: #1f9d4a;
  color: #f4fff6;
}
html.tema-svijetla body.sport-fudbal .sport-prebacaj-dugme[href="/kosarka"]:hover,
html.tema-svijetla body.sport-kosarka .sport-prebacaj-dugme[href="/kosarka"]:hover,
html.tema-svijetla body.sport-fudbal .sport-prebacaj-dugme[href="/kosarka"].aktivna,
html.tema-svijetla body.sport-kosarka .sport-prebacaj-dugme[href="/kosarka"].aktivna {
  background: #c45a12;
  color: #fff8f0;
}
html.tema-svijetla body.sport-fudbal .app-glava .pocetna-admin-ime,
html.tema-svijetla body.sport-kosarka .app-glava .pocetna-admin-ime {
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow: none;
  color: #122016;
  font-weight: 700;
  padding: 0;
}
html.tema-svijetla body.sport-fudbal .app-glava .pocetna-odjava,
html.tema-svijetla body.sport-kosarka .app-glava .pocetna-odjava,
html.tema-svijetla body.sport-fudbal .app-glava .jezik-dugme,
html.tema-svijetla body.sport-kosarka .app-glava .jezik-dugme,
html.tema-svijetla body.sport-fudbal .btn-nazad,
html.tema-svijetla body.sport-kosarka .btn-nazad,
html.tema-svijetla body.sport-fudbal .btn-pocetna,
html.tema-svijetla body.sport-kosarka .btn-pocetna {
  background: rgba(255, 255, 255, 0.92);
  color: #122016;
  border-color: var(--tab-ivica);
}
html.tema-svijetla body.sport-fudbal .app-glava .jezik-lista,
html.tema-svijetla body.sport-kosarka .app-glava .jezik-lista {
  background: #fff;
  border-color: var(--tab-ivica);
}
html.tema-svijetla body.sport-fudbal .app-glava .jezik-stavka,
html.tema-svijetla body.sport-kosarka .app-glava .jezik-stavka { color: #122016; }
html.tema-svijetla body.sport-fudbal .card,
html.tema-svijetla body.sport-kosarka .card {
  background: rgba(255, 255, 255, 0.9);
  color: #122016;
  border-color: var(--tab-ivica);
}
html.tema-svijetla body.sport-fudbal .hint,
html.tema-svijetla body.sport-kosarka .hint,
html.tema-svijetla body.sport-fudbal .muted,
html.tema-svijetla body.sport-kosarka .muted,
html.tema-svijetla body.sport-fudbal .side-nav h3,
html.tema-svijetla body.sport-kosarka .side-nav h3 { color: #4d6254; }
html.tema-svijetla body.sport-fudbal h2,
html.tema-svijetla body.sport-kosarka h2,
html.tema-svijetla body.sport-fudbal h3,
html.tema-svijetla body.sport-kosarka h3,
html.tema-svijetla body.sport-fudbal .liga-head h2,
html.tema-svijetla body.sport-kosarka .liga-head h2,
html.tema-svijetla body.sport-fudbal .dan-naslov,
html.tema-svijetla body.sport-kosarka .dan-naslov,
html.tema-svijetla body.sport-fudbal .brand,
html.tema-svijetla body.sport-kosarka .brand,
html.tema-svijetla body.sport-fudbal .uzivo-naslov,
html.tema-svijetla body.sport-kosarka .uzivo-naslov,
html.tema-svijetla body.sport-fudbal .igra-grupa,
html.tema-svijetla body.sport-kosarka .igra-grupa,
html.tema-svijetla body.sport-fudbal .igra-opis-linija,
html.tema-svijetla body.sport-kosarka .igra-opis-linija,
html.tema-svijetla body.sport-fudbal .igra-opis-hint,
html.tema-svijetla body.sport-kosarka .igra-opis-hint { color: #122016; }
html.tema-svijetla body.sport-fudbal .pregled-dugme,
html.tema-svijetla body.sport-kosarka .pregled-dugme,
html.tema-svijetla body.sport-fudbal .igra-predlog-red .menu details > summary,
html.tema-svijetla body.sport-kosarka .igra-predlog-red .menu details > summary,
html.tema-svijetla body.sport-fudbal .btn-predlog-traka,
html.tema-svijetla body.sport-kosarka .btn-predlog-traka,
html.tema-svijetla body.sport-fudbal .kriteriji a,
html.tema-svijetla body.sport-kosarka .kriteriji a,
html.tema-svijetla body.sport-fudbal .liga-tabovi a,
html.tema-svijetla body.sport-kosarka .liga-tabovi a,
html.tema-svijetla body.sport-fudbal .igra-chip,
html.tema-svijetla body.sport-kosarka .igra-chip,
html.tema-svijetla body.sport-fudbal .predlog-igra-polje > summary,
html.tema-svijetla body.sport-kosarka .predlog-igra-polje > summary,
html.tema-svijetla body.sport-fudbal .traka-gore .menu summary,
html.tema-svijetla body.sport-kosarka .traka-gore .menu summary,
html.tema-svijetla body.sport-fudbal .menu details.drop-igra > summary,
html.tema-svijetla body.sport-kosarka .menu details.drop-igra > summary,
html.tema-svijetla body.sport-fudbal .btn-danas,
html.tema-svijetla body.sport-kosarka .btn-danas,
html.tema-svijetla body.sport-fudbal .traka-gore .pregled-uzivo,
html.tema-svijetla body.sport-kosarka .traka-gore .pregled-uzivo {
  background: rgba(255, 255, 255, 0.94);
  color: #122016;
  border-color: var(--tab-ivica);
}
html.tema-svijetla body.sport-fudbal .pregled-dugme:hover,
html.tema-svijetla body.sport-kosarka .pregled-dugme:hover,
html.tema-svijetla body.sport-fudbal .btn-predlog-traka:hover,
html.tema-svijetla body.sport-kosarka .btn-predlog-traka:hover,
html.tema-svijetla body.sport-fudbal .igra-predlog-red .menu details > summary:hover,
html.tema-svijetla body.sport-kosarka .igra-predlog-red .menu details > summary:hover,
html.tema-svijetla body.sport-fudbal .kriteriji a:hover,
html.tema-svijetla body.sport-kosarka .kriteriji a:hover,
html.tema-svijetla body.sport-kosarka .liga-tabovi a:hover,
html.tema-svijetla body.sport-fudbal .liga-tabovi a:hover,
html.tema-svijetla body.sport-fudbal .igra-chip:hover,
html.tema-svijetla body.sport-kosarka .igra-chip:hover,
html.tema-svijetla body.sport-fudbal .predlog-igra-polje > summary:hover,
html.tema-svijetla body.sport-kosarka .predlog-igra-polje > summary:hover,
html.tema-svijetla body.sport-fudbal .traka-gore .menu a:hover,
html.tema-svijetla body.sport-kosarka .traka-gore .menu a:hover,
html.tema-svijetla body.sport-fudbal .traka-gore .menu details[open] summary,
html.tema-svijetla body.sport-kosarka .traka-gore .menu details[open] summary,
html.tema-svijetla body.sport-fudbal .menu details.drop-igra > summary:hover,
html.tema-svijetla body.sport-kosarka .menu details.drop-igra > summary:hover,
html.tema-svijetla body.sport-fudbal .igra-predlog-red .menu details.drop-igra > summary:hover,
html.tema-svijetla body.sport-kosarka .igra-predlog-red .menu details.drop-igra > summary:hover,
html.tema-svijetla body.sport-fudbal .btn-danas:hover,
html.tema-svijetla body.sport-kosarka .btn-danas:hover,
html.tema-svijetla body.sport-fudbal .traka-gore .pregled-uzivo:hover,
html.tema-svijetla body.sport-kosarka .traka-gore .pregled-uzivo:hover,
html.tema-svijetla body.sport-fudbal .tema-dugme:hover,
html.tema-svijetla body.sport-kosarka .tema-dugme:hover,
html.tema-svijetla body.sport-fudbal .btn-nazad:hover,
html.tema-svijetla body.sport-kosarka .btn-nazad:hover,
html.tema-svijetla body.sport-fudbal .btn-pocetna:hover,
html.tema-svijetla body.sport-kosarka .btn-pocetna:hover,
html.tema-svijetla body.sport-fudbal .app-glava .pocetna-odjava:hover,
html.tema-svijetla body.sport-kosarka .app-glava .pocetna-odjava:hover,
html.tema-svijetla body.sport-fudbal .igra-podgrupe a:hover,
html.tema-svijetla body.sport-kosarka .igra-podgrupe a:hover,
html.tema-svijetla body.sport-fudbal .drop-item:hover,
html.tema-svijetla body.sport-kosarka .drop-item:hover,
html.tema-svijetla body.sport-fudbal .nav-item:hover,
html.tema-svijetla body.sport-kosarka .nav-item:hover,
html.tema-svijetla body.sport-fudbal .right .card-mini:hover,
html.tema-svijetla body.sport-kosarka .right .card-mini:hover,
html.tema-svijetla body.sport-fudbal .right .sistem-link:hover,
html.tema-svijetla body.sport-kosarka .right .sistem-link:hover {
  background: var(--tab-hover);
  color: var(--tab-akcent-tekst);
  border-color: var(--tab-akcent);
}
html.tema-svijetla body.sport-fudbal .pregled-dugme.aktivna,
html.tema-svijetla body.sport-kosarka .pregled-dugme.aktivna,
html.tema-svijetla body.sport-fudbal .btn-predlog-traka.aktivna,
html.tema-svijetla body.sport-kosarka .btn-predlog-traka.aktivna,
html.tema-svijetla body.sport-fudbal .igra-predlog-red .menu details > summary.aktivna,
html.tema-svijetla body.sport-kosarka .igra-predlog-red .menu details > summary.aktivna,
html.tema-svijetla body.sport-fudbal .kriteriji a.aktivna,
html.tema-svijetla body.sport-kosarka .kriteriji a.aktivna,
html.tema-svijetla body.sport-fudbal .liga-tabovi a.aktivna,
html.tema-svijetla body.sport-kosarka .liga-tabovi a.aktivna,
html.tema-svijetla body.sport-fudbal .igra-chip.aktivna,
html.tema-svijetla body.sport-kosarka .igra-chip.aktivna,
html.tema-svijetla body.sport-fudbal .menu details.drop-igra > summary.aktivna,
html.tema-svijetla body.sport-kosarka .menu details.drop-igra > summary.aktivna,
html.tema-svijetla body.sport-fudbal .traka-gore .pregled-uzivo.aktivna,
html.tema-svijetla body.sport-kosarka .traka-gore .pregled-uzivo.aktivna,
html.tema-svijetla body.sport-fudbal .igra-podgrupe a.aktivna,
html.tema-svijetla body.sport-kosarka .igra-podgrupe a.aktivna,
html.tema-svijetla body.sport-fudbal .drop-item.aktivna,
html.tema-svijetla body.sport-kosarka .drop-item.aktivna,
html.tema-svijetla body.sport-fudbal .tema-dugme.aktivna,
html.tema-svijetla body.sport-kosarka .tema-dugme.aktivna {
  background: var(--tab-akcent);
  color: var(--tab-akcent-tekst);
  border-color: var(--tab-akcent);
}
html.tema-svijetla body.sport-fudbal .drop-panel,
html.tema-svijetla body.sport-kosarka .drop-panel,
html.tema-svijetla body.sport-fudbal .igra-podgrupe,
html.tema-svijetla body.sport-kosarka .igra-podgrupe {
  background: #fff;
  color: #122016;
  border-color: var(--tab-ivica);
}
html.tema-svijetla body.sport-fudbal .drop-item,
html.tema-svijetla body.sport-kosarka .drop-item,
html.tema-svijetla body.sport-fudbal .igra-podgrupe a,
html.tema-svijetla body.sport-kosarka .igra-podgrupe a,
html.tema-svijetla body.sport-fudbal .nav-item,
html.tema-svijetla body.sport-kosarka .nav-item { color: #122016; }
html.tema-svijetla body.sport-fudbal .stat-search input,
html.tema-svijetla body.sport-kosarka .stat-search input,
html.tema-svijetla body.sport-fudbal .trazi-ligu,
html.tema-svijetla body.sport-kosarka .trazi-ligu,
html.tema-svijetla body.sport-fudbal input,
html.tema-svijetla body.sport-kosarka input,
html.tema-svijetla body.sport-fudbal select,
html.tema-svijetla body.sport-kosarka select,
html.tema-svijetla body.sport-fudbal textarea,
html.tema-svijetla body.sport-kosarka textarea {
  background: #fff;
  color: #122016;
  border-color: var(--tab-ivica);
}
html.tema-svijetla body.sport-fudbal .tab-dan th,
html.tema-svijetla body.sport-kosarka .tab-dan th,
html.tema-svijetla body.sport-fudbal th,
html.tema-svijetla body.sport-kosarka th,
html.tema-svijetla body.sport-fudbal .tab-liga th,
html.tema-svijetla body.sport-kosarka .tab-liga th,
html.tema-svijetla body.sport-fudbal .rang-tab th,
html.tema-svijetla body.sport-kosarka .rang-tab th {
  color: #122016;
  border-bottom-color: var(--tab-ivica);
}
html.tema-svijetla body.sport-fudbal .tab-dan td,
html.tema-svijetla body.sport-kosarka .tab-dan td,
html.tema-svijetla body.sport-fudbal td,
html.tema-svijetla body.sport-kosarka td,
html.tema-svijetla body.sport-fudbal .tab-liga td,
html.tema-svijetla body.sport-kosarka .tab-liga td,
html.tema-svijetla body.sport-fudbal .rang-tab td,
html.tema-svijetla body.sport-kosarka .rang-tab td {
  color: #122016;
  border-bottom-color: var(--linija-slaba);
}
html.tema-svijetla body.sport-fudbal .tab-dan .dan-ht,
html.tema-svijetla body.sport-kosarka .tab-dan .dan-ht,
html.tema-svijetla body.sport-fudbal .tab-dan .dan-ft,
html.tema-svijetla body.sport-kosarka .tab-dan .dan-ft,
html.tema-svijetla body.sport-fudbal .tab-dan .dan-q,
html.tema-svijetla body.sport-kosarka .tab-dan .dan-q,
html.tema-svijetla body.sport-fudbal .tim-link,
html.tema-svijetla body.sport-kosarka .tim-link { color: #122016; }
html.tema-svijetla body.sport-fudbal .rang-tab .tim-meta,
html.tema-svijetla body.sport-kosarka .rang-tab .tim-meta,
html.tema-svijetla body.sport-fudbal .rang-tab .tim-meta span,
html.tema-svijetla body.sport-kosarka .rang-tab .tim-meta span {
  color: #122016;
  font-weight: 400;
}
html.tema-svijetla body.sport-fudbal .kvote-th .kvote-naslov,
html.tema-svijetla body.sport-kosarka .kvote-th .kvote-naslov,
html.tema-svijetla body.sport-fudbal .dan-kvote-lab span,
html.tema-svijetla body.sport-kosarka .dan-kvote-lab span,
html.tema-svijetla body.sport-fudbal .dan-kvote-val span,
html.tema-svijetla body.sport-kosarka .dan-kvote-val span {
  color: #122016;
}
html.tema-svijetla body.sport-fudbal .right .card-mini,
html.tema-svijetla body.sport-kosarka .right .card-mini,
html.tema-svijetla body.sport-fudbal .right .sistem-link,
html.tema-svijetla body.sport-kosarka .right .sistem-link,
html.tema-svijetla body.sport-fudbal .pregled-zvuk,
html.tema-svijetla body.sport-kosarka .pregled-zvuk {
  background: rgba(255, 255, 255, 0.92);
  color: #122016;
  border-color: var(--tab-ivica);
}
html.tema-svijetla body.sport-fudbal .right .card-mini h3,
html.tema-svijetla body.sport-kosarka .right .card-mini h3 { color: #122016; }
html.tema-svijetla body.sport-fudbal .mec-red,
html.tema-svijetla body.sport-kosarka .mec-red {
  background: rgba(255, 255, 255, 0.55);
  border-bottom-color: var(--linija-slaba);
}
html.tema-svijetla body.sport-fudbal .kolo-traka,
html.tema-svijetla body.sport-kosarka .kolo-traka {
  background: rgba(255, 255, 255, 0.85);
  color: #122016;
}
html.tema-svijetla body.sport-fudbal .kalk-tab th,
html.tema-svijetla body.sport-kosarka .kalk-tab th,
html.tema-svijetla body.sport-fudbal .tab-sistem th,
html.tema-svijetla body.sport-kosarka .tab-sistem th {
  background: #eef5f0;
  color: #122016;
}
html.tema-svijetla body.sport-fudbal .tab-provjera tbody tr.pogodio,
html.tema-svijetla body.sport-kosarka .tab-provjera tbody tr.pogodio,
html.tema-svijetla body.sport-fudbal .tab-provjera tbody tr.pogodio td,
html.tema-svijetla body.sport-kosarka .tab-provjera tbody tr.pogodio td {
  background: #1f9d4a;
  color: #f4fff6;
}
html.tema-svijetla body.sport-fudbal .tab-provjera tbody tr.pogodio .tim-link,
html.tema-svijetla body.sport-kosarka .tab-provjera tbody tr.pogodio .tim-link,
html.tema-svijetla body.sport-fudbal .tab-provjera tbody tr.pogodio .dan-vri,
html.tema-svijetla body.sport-kosarka .tab-provjera tbody tr.pogodio .dan-vri,
html.tema-svijetla body.sport-fudbal .tab-provjera tbody tr.pogodio .dan-ht,
html.tema-svijetla body.sport-kosarka .tab-provjera tbody tr.pogodio .dan-ht,
html.tema-svijetla body.sport-fudbal .tab-provjera tbody tr.pogodio .dan-ft,
html.tema-svijetla body.sport-kosarka .tab-provjera tbody tr.pogodio .dan-ft,
html.tema-svijetla body.sport-fudbal .tab-provjera tbody tr.pogodio .da,
html.tema-svijetla body.sport-kosarka .tab-provjera tbody tr.pogodio .da {
  color: #f4fff6;
}
html.tema-svijetla body.sport-fudbal .tab-provjera tbody tr.promasio,
html.tema-svijetla body.sport-kosarka .tab-provjera tbody tr.promasio,
html.tema-svijetla body.sport-fudbal .tab-provjera tbody tr.promasio td,
html.tema-svijetla body.sport-kosarka .tab-provjera tbody tr.promasio td {
  background: #fff;
  color: #122016;
}
html.tema-svijetla body.sport-fudbal .vidi-meceve,
html.tema-svijetla body.sport-kosarka .vidi-meceve {
  background: #1f9d4a;
  color: #f4fff6;
}
@media (min-width: 769px) {
  html.tema-svijetla body.sport-fudbal .traka-gore,
  html.tema-svijetla body.sport-kosarka .traka-gore {
    background: rgba(255, 255, 255, 0.78);
    border-color: var(--tab-ivica);
  }
}
@media (max-width: 768px) {
  html.tema-svijetla body.sport-fudbal .traka-gore,
  html.tema-svijetla body.sport-kosarka .traka-gore {
    background: rgba(255, 255, 255, 0.86);
    border-color: var(--tab-ivica);
  }
}

/* Pregled (fudbal i košarka): od vrha do kolona tabele fiksno; redovi skroluju ispod. */
body.pregled-fiks {
  --fiks-thead: rgb(10, 16, 26);
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html.tema-svijetla body.pregled-fiks {
  --fiks-thead: #fff;
}
body.pregled-fiks .app-glava {
  position: relative;
  flex-shrink: 0;
}
body.pregled-fiks .wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.pregled-fiks .traka-gore {
  flex-shrink: 0;
  position: relative;
  z-index: 40;
}
body.pregled-fiks .layout {
  flex: 1 1 auto;
  min-height: 0;
}
body.pregled-fiks .tab-dan,
body.pregled-fiks .rang-tab {
  border-collapse: separate;
  border-spacing: 0;
}
body.pregled-fiks .tab-dan thead th,
body.pregled-fiks .rang-tab thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--fiks-thead);
  background-clip: padding-box;
  box-shadow: 0 1px 0 var(--green), 0 -32px 0 0 var(--fiks-thead);
}

@media (min-width: 901px) {
  body.pregled-fiks .layout {
    overflow: hidden;
    align-items: stretch;
  }
  body.pregled-fiks .layout > * {
    min-height: 0;
    max-height: 100%;
  }
  body.pregled-fiks .side-nav {
    max-height: none;
    height: 100%;
    overflow-y: auto;
  }
  body.pregled-fiks .right {
    overflow-y: auto;
  }
  body.pregled-fiks .center.card {
    min-height: 0;
    overflow: auto;
    padding-top: 0;
  }
}

@media (max-width: 900px) {
  body.pregled-fiks .layout {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-content: start;
    grid-auto-rows: min-content;
  }
  body.pregled-fiks .layout > main.center,
  body.pregled-fiks .center.card {
    min-height: min-content;
    max-height: none;
    overflow: visible;
    padding-top: 0;
  }
}

/* Telefon: poslije pregled-fiks pravila, da se ne stisne sredina. PC iznad 768px isti. */
@media (max-width: 768px) {
  .layout > .right { display: none; }
  body.pregled-fiks {
    height: auto;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
  }
  body.pregled-fiks .app-glava { position: sticky; }
  body.pregled-fiks .wrap {
    overflow: visible;
    display: block;
    height: auto;
    min-height: 0;
    flex: none;
  }
  body.pregled-fiks .layout {
    overflow: visible;
    height: auto;
    min-height: 0;
    max-height: none;
    flex: none;
    align-content: start;
    grid-auto-rows: min-content;
  }
  body.pregled-fiks .layout > *,
  body.pregled-fiks .center.card,
  body.pregled-fiks .layout > main.center {
    max-height: none;
    min-height: min-content;
    overflow: visible;
  }
  #uzivo-blok {
    display: block;
    width: 100%;
    min-height: 4rem;
  }
  details.drop-igra:not([open]) > .drop-panel {
    display: none !important;
  }
  .igra-predlog-red .menu details.drop-igra:not([open]) {
    max-height: 3.2rem;
    overflow: hidden;
  }
  .traka-gore {
    min-height: 0;
    overflow: visible;
  }
}