/* ============================================================================
   utakmica-new.css — NAKED CLEAN-ROOM SHEET for the 2026 bet-centar match page
   ----------------------------------------------------------------------------
   Self-sufficient sheet for utakmica-new.php. Every class is uniquely prefixed
   `ut-` so it never collides with global.css / kl-match.css. All content styles
   are scoped under `.ut-page` (the <main>) with a weak universal reset so the
   sheet renders identically WITH or WITHOUT global.css (cutover-safe). The dev
   chrome (`.ut-shell`, `.ut-devbar`, `.ut-devnav`) is dev-only and dropped at
   cutover when the kl-shell app frame returns.
   Design source of truth: handoff/reference/mobile/<id>.html (2a/3a2/3b/3c/3d/3e
   pre · 4a/4b/4c live · 4d/4e/4f/4g post). Values are literal per the redlines.
   Lineup pitch is NOT styled here — see css/ut-lineups.css (owner exemption).
   ============================================================================ */

/* ---------- DESIGN TOKENS (subset of handoff/specs/tokens.css) ---------- */
:root {
  /* accent */
  --ut-primary:        #0769de;
  --ut-primary-tint:   #F2F7FE;
  --ut-primary-track:  #EDEFF2;

  /* ink / neutral ramp */
  --ut-ink:            #14171C;
  --ut-body:           #3A4048;
  --ut-secondary:      #6E757E;
  --ut-muted:          #8B929B;
  --ut-muted-2:        #9AA1AA;
  --ut-muted-3:        #828A93;   /* mid grey between muted-2 and secondary */
  --ut-faint:          #B4BAC1;
  --ut-faint-2:        #C4C9CE;

  /* lines / surfaces */
  --ut-hairline:       #ECEDEF;
  --ut-border:         #E7E9EC;
  --ut-border-2:       #DDE0E4;
  --ut-divider:        #F0F1F3;
  --ut-track:          #EEF0F2;
  --ut-pill-bg:        #F4F5F7;
  --ut-surface-alt:    #F8F9FA;
  --ut-live-card-bg:   #F1F3F5;

  /* semantic */
  --ut-success:        #177A4E;
  --ut-success-tint:   #EBF4EF;
  --ut-online:         #2E9E5B;
  --ut-warning:        #C2951F;
  --ut-warning-tint:   #FBF7EC;
  --ut-danger:         #C0453C;
  --ut-danger-tint:    #F9EEED;
  --ut-danger-tint-2:  #FBEBEA;
  --ut-card-yellow:    #E8B92E;

  /* data-fill navy + bar ramp */
  --ut-navy:           #021731;
  --ut-navy-soft:      #9BAABD;   /* away/second segment on two-way bars */
  --ut-away-slate:     #AABACF;   /* away segment slate (matches h2h away bar) */
  --ut-bar-mid:        #C9CED4;
  --ut-bar-light:      #E5E8EB;
  --ut-bar-empty:      #E5E8EB;

  /* placeholder */
  --ut-ph-a:           #E2E5E8;
  --ut-ph-b:           #EDEFF1;

  /* type */
  --ut-font-display:   'Red Hat Display', sans-serif;
  --ut-font-body:      'Inter', sans-serif;

  /* radii */
  --ut-r-lg:    16px;
  --ut-r-panel: 14px;
  --ut-r-field: 12px;
  --ut-r-btn:   10px;
  --ut-r-chip:  8px;
  --ut-r-badge: 6px;
  --ut-r-bar:   4px;
  --ut-r-pill:  999px;
}

/* ============================================================================
   COMPAT TOKEN LAYER — the design-system kl- and bc- custom properties
   (verbatim values), so section rules ported from kl-match.css resolve inside
   this isolated sheet without per-rule token surgery. Values are identical to
   design-tokens.css; harmless if global.css later redefines them (same values).
   ============================================================================ */
:root {
  --kl-amber-bright: #E8B92E;
  --kl-amber-notice-border: #EAD9A8;
  --kl-amber-notice-text: #7A6420;
  --kl-amber-tint: #FBF7EC;
  --kl-amber: #C2951F;
  --kl-bar-empty: #E5E8EB;
  --kl-bg: #F2F3F5;
  --kl-blue-soft: #BBD3F5;
  --kl-blue-tint: #F2F7FE;
  --kl-blue: #0769DE;
  --kl-border-strong: #DDE0E4;
  --kl-border: #E7E9EC;
  --kl-divider: #F0F1F3;
  --kl-dur-medium: 200ms;
  --kl-dur-short: 150ms;
  --kl-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --kl-font-display: 'Red Hat Display', sans-serif;
  --kl-font-ui: Inter, -apple-system, sans-serif;
  --kl-fs-10: 10px;
  --kl-fs-11: 11px;
  --kl-fs-12: 12px;
  --kl-fs-13: 13px;
  --kl-fs-14: 14px;
  --kl-fs-15: 15px;
  --kl-fs-16: 16px;
  --kl-fs-17: 17px;
  --kl-fs-19: 19px;
  --kl-fs-22: 22px;
  --kl-fs-27: 27px;
  --kl-fs-34: 34px;
  --kl-fs-42: 42px;
  --kl-green-tint: #EBF4EF;
  --kl-green: #177A4E;
  --kl-header-bg: linear-gradient(88deg, #046DF6 0%, #368BF9 100%);
  --kl-header-text: rgba(255, 255, 255, 0.9);
  --kl-ink: #14171C;
  --kl-lh-body: 1.6;
  --kl-lh-tight: 1.15;
  --kl-lh-ui: 1.35;
  --kl-logo-ph: #E2E5E8;
  --kl-ls-heading: -0.015em;
  --kl-ls-kicker: 0.12em;
  --kl-navy-text-2: #AABACF;
  --kl-navy-text: #9BAABD;
  --kl-navy: #021731;
  --kl-on-dark: #FFFFFF;
  --kl-pitch-line: #DDE6DF;
  --kl-pitch-num: #FFFFFF;
  --kl-pitch-stripe: #F1F6F2;
  --kl-pitch: #F1F6F2;
  --kl-primary-legacy: #1756D4;
  --kl-r-10: 10px;
  --kl-r-12: 12px;
  --kl-r-14: 14px;
  --kl-r-16: 16px;
  --kl-r-20: 20px;
  --kl-r-24: 24px;
  --kl-r-4: 4px;
  --kl-r-6: 6px;
  --kl-r-8: 8px;
  --kl-r-pill: 999px;
  --kl-red-tint: #F9EEED;
  --kl-red: #C0453C;
  --kl-shadow-card: 0 12px 32px rgba(20, 23, 28, 0.07);
  --kl-shadow-sheet: 0 -8px 30px rgba(20, 23, 28, 0.16);
  --kl-shadow-sm: 0 1px 3px rgba(20, 23, 28, 0.08);
  --kl-shadow-text: 0 1px 2px rgba(0, 0, 0, 0.5);
  --kl-sp-10: 10px;
  --kl-sp-12: 12px;
  --kl-sp-14: 14px;
  --kl-sp-16: 16px;
  --kl-sp-20: 20px;
  --kl-sp-24: 24px;
  --kl-sp-28: 28px;
  --kl-sp-2: 2px;
  --kl-sp-32: 32px;
  --kl-sp-40: 40px;
  --kl-sp-48: 48px;
  --kl-sp-4: 4px;
  --kl-sp-6: 6px;
  --kl-sp-8: 8px;
  --kl-surface-2: #FAFBFC;
  --kl-surface-3: #F4F5F7;
  --kl-surface-4: #EEF0F2;
  --kl-surface: #FFFFFF;
  --kl-text-2: #6E757E;
  --kl-text-3: #8B929B;
  --kl-text-4: #9AA1AA;
  --kl-text-disabled: #B4BAC1;
  --kl-text: #3A4048;
  --bc-amber-bg:       var(--kl-amber-tint);
  --bc-amber-border:   var(--kl-amber-tint);
  --bc-amber-dark:     var(--kl-amber);
  --bc-amber-text:     var(--kl-amber);
  --bc-bar-muted:      var(--kl-border-strong);
  --bc-bar-primary:    var(--kl-navy);
  --bc-bar-secondary:  var(--kl-navy-text);
  --bc-bar-track:      var(--kl-surface-4);
  --bc-bg:             var(--kl-surface-3);
  --bc-border-soft:    var(--kl-surface-3);
  --bc-border-strong:  var(--kl-border);
  --bc-card:           var(--kl-surface);
  --bc-green-bg:       var(--kl-green-tint);
  --bc-green-border:   var(--kl-green-tint);
  --bc-green-dark:     var(--kl-green);
  --bc-green-dot:      var(--kl-green);
  --bc-green-text:     var(--kl-green);
  --bc-radius-sm: 12px;
  --bc-radius: 16px;
  --bc-red-bg:         var(--kl-red-tint);
  --bc-red-border:     var(--kl-red-tint);
  --bc-red-dark:       var(--kl-red);
  --bc-red-text:       var(--kl-red);
  --bc-shadow: 0 1px 4px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.03);
  --bc-text-primary:   var(--kl-ink);
  --bc-text-secondary: var(--kl-text-2);
  --bc-text-tertiary:  var(--kl-text-4);
}

/* ============================================================================
   DEV CHROME (dev-only; removed at cutover) + banded page
   Analysis screens sit on a grey #F1F3F5 page with white content BANDS
   separated by 4px gaps (handoff reference 3a2/3b). Header + tabs are one white
   block at the top. Prognoza (2a) is a single white band on the grey page.
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #C9CDD2;
  font-family: var(--ut-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ut-shell {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  background: #F1F3F5;
  display: flex;
  flex-direction: column;
}
.ut-devbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px 16px;
  position: sticky; top: 0; z-index: 50;
  background: #FFFFFF;
  border-bottom: 1px solid var(--ut-hairline);
}
.ut-devbar-mark { font: 800 17px var(--ut-font-display); color: var(--ut-ink); letter-spacing: -0.01em; text-decoration: none; }
.ut-devbar-mark span { color: var(--ut-muted-2); }
.ut-devbar-actions { display: flex; align-items: center; gap: 14px; }
.ut-devbar-ico { width: 20px; height: 20px; border-radius: 50%; border: 1.8px solid var(--ut-secondary); }
.ut-devbar-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--ut-track); font: 800 12px var(--ut-font-display); color: var(--ut-ink); display: flex; align-items: center; justify-content: center; }
.ut-devnav { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--ut-hairline); padding: 10px 8px 14px; background: #FFFFFF; position: sticky; bottom: 0; margin-top: auto; }
.ut-devnav-item { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 600 11px var(--ut-font-body); color: var(--ut-muted-2); }
.ut-devnav-item.is-active { color: var(--ut-ink); font-weight: 700; }
.ut-devnav-ico { width: 20px; height: 20px; border-radius: 6px; background: currentColor; opacity: 0.85; }

/* ---------- content reset (scoped, weak universal so components win ties) --- */
.ut-page, .ut-page * {
  box-sizing: border-box; margin: 0; padding: 0; border: 0;
  font-family: var(--ut-font-body); color: var(--ut-ink);
  background: transparent; line-height: 1.2;
}
.ut-page { display: block; background: #F1F3F5; color: var(--ut-ink); -webkit-font-smoothing: antialiased; }
.ut-page img { display: block; max-width: 100%; }
.ut-page button { appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; }
.ut-page p { line-height: 1.45; }
.ut-page svg { display: block; }

/* ---------- MATCH HEADER (screens 2a / 4a / 4d) — white top block ---------- */
/* Match header — one centered scoreboard skin for all states (owner 2026-07-27).
   Nav row: back · league identity (logo+name) · share. Meta: venue w/ stadium
   icon. Scoreboard: crest/name+form · centre (pre kickoff / live minute / post
   KRAJ) · crest/name+form. The scoreboard is the page H1 (team names; SEO §7). */
.ut-mh { background: #FFFFFF; padding: 8px 16px 18px 16px; }
.ut-mh-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -6px 6px -6px; }
.ut-mh-iconbtn { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ut-ink); border-radius: var(--kl-r-10); background: var(--kl-surface-3); }
.ut-mh-iconbtn:last-child { color: var(--ut-secondary); }
.ut-mh-iconbtn:active { background: var(--ut-pill-bg); }
.ut-mh-nav-league { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; }
.ut-mh-nav-league-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.ut-mh-nav-league-name { font: 600 13px var(--ut-font-body); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-mh-post-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; font: 500 11.5px var(--ut-font-body); color: var(--ut-muted); margin-top: 2px; }
.ut-mh-pm-venue { display: inline-flex; align-items: center; gap: 4px; color: var(--ut-muted); }
.ut-mh-pm-venue svg { color: var(--ut-faint); flex-shrink: 0; }
.ut-mh-scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; margin: 10px 0 0; }
.ut-mh-sb-team { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.ut-mh-sb-crest { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ut-mh-sb-name { font: 700 12.5px var(--ut-font-display); color: var(--ut-ink); text-align: center; line-height: 1.25; }
.ut-mh-sb-score { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 4px; }
.ut-mh-sb-goals { font: 800 32px var(--ut-font-display); color: var(--ut-ink); letter-spacing: 0.02em; white-space: nowrap; }
.ut-mh-sb-kicktime { font-size: 26px; }   /* pre: kickoff time; a touch smaller than a 1:1 score */
.ut-mh-sb-state { font: 600 11px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.06em; }
/* Last-5 form pills under each team name: rounded squares — green-dark filled W,
   tinted-amber outline D, red-outline L. Inline <span> so it nests in the h1. */
.ut-mh-scoreboard .stats_wld { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; margin-top: 3px; }
.ut-mh-scoreboard .form-block { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--ut-r-badge); font: 700 10px var(--ut-font-display); border: 1px solid transparent; }
.ut-mh-scoreboard .form-block.is-w { background: var(--bc-green-dark); color: #FFFFFF; }
.ut-mh-scoreboard .form-block.is-d { background: var(--ut-warning-tint); color: var(--ut-warning); border-color: var(--ut-warning); }
.ut-mh-scoreboard .form-block.is-l { background: #FFFFFF; color: var(--ut-danger); border-color: var(--ut-danger); }
.ut-mh-scoreboard .form-block.is-empty { background: var(--ut-pill-bg); color: var(--ut-muted-2); }
/* Live scoreboard state (design 4a): pulsing green minute in place of KRAJ. */
.ut-mh-sb-live { display: inline-flex; align-items: center; gap: 5px; font: 700 12px var(--ut-font-body); color: var(--ut-success); }
.ut-mh-sb-livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--ut-success); animation: ut-pulse 1.6s ease-in-out infinite; }
@keyframes ut-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---------- TABS — white, INK underline (handoff reference 2a/3a2/3b) ---------- */
.ut-tabs-container { background: #FFFFFF; }
.ut-tabs { display: flex; gap: 22px; padding: 6px 16px 0 16px; border-bottom: 1px solid var(--ut-hairline); overflow-x: auto; scrollbar-width: none; }
.ut-tabs::-webkit-scrollbar { display: none; }
.ut-tabs .ut-tab { font: 600 14px var(--ut-font-display); color: var(--ut-muted-2); padding: 10px 0; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; background: transparent; }
.ut-tab.is-active { font-weight: 700; color: var(--ut-ink); border-bottom-color: var(--ut-ink); padding: 10px 0 9px 0; }

/* Compact sticky match header (mobile) — built by initStickyHeader() in the page
   JS from .ut-mh; slides in under the 56px kl app bar once the scoreboard scrolls
   away, carrying team names + score + the tabs. Desktop keeps the full header
   (the JS returns null > 768px, so this element never exists there). */
#sticky-match-header {
  position: fixed; top: 56px; left: 0; right: 0; z-index: 55;
  background: #FFFFFF; border-bottom: 1px solid var(--ut-hairline);
  box-shadow: 0 2px 8px rgba(20, 23, 28, 0.06);
  transform: translateY(-130%);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
#sticky-match-header.is-visible { transform: translateY(0); }
#sticky-match-header .ut-sticky-info { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
#sticky-match-header .ut-sticky-team { flex: 1; min-width: 0; font: 700 13px var(--ut-font-display); color: var(--ut-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sticky-match-header .ut-sticky-team:first-child { text-align: right; }
#sticky-match-header .ut-sticky-score { flex-shrink: 0; font: 800 15px var(--ut-font-display); color: var(--ut-ink); white-space: nowrap; }
#sticky-match-header .ut-tabs { padding-top: 0; }
#sticky-match-header .ut-tab { appearance: none; -webkit-appearance: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }

/* ============================================================================
   BAND SYSTEM + SHARED PRIMITIVES (reuse across every tab)
   ============================================================================ */
.ut-sections { display: flex; flex-direction: column; gap: 4px; background: #F1F3F5; padding-top: 4px; }
.ut-section { scroll-margin-top: 60px; display: flex; flex-direction: column; gap: 4px; }
/* a white content band */
.ut-band { background: #FFFFFF; padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 16px; }

/* section title (18px) and sub-heading (14px) */
.ut-title { font: 700 20px var(--ut-font-display); color: var(--ut-ink); }
/* inline Feather icons render black (ink) everywhere, not the parent text colour */
.ut-ico { color: var(--ut-ink); }
.ut-subhead { font: 700 16px var(--ut-font-display); color: var(--ut-ink); }
.ut-eyebrow { font: 600 11px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.08em; text-transform: uppercase; }

/* Window tag (data window a block is computed over: "sezona" / "zadnjih 5" /
   "posljednjih 10") — the two-lens labelling so season vs recent-form blocks
   are never mistaken for each other. */
.ut-blk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* Used where a badge shares the header row (ODG): stack title + window tag so a
   long title never wraps against the badge. */
.ut-blk-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ut-win { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); white-space: nowrap; flex-shrink: 0; }

/* team crest (16px round, striped placeholder) + inline name */
.ut-crest { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
/* Sub-390px (e.g. 360px devices): team badges don't fit the multi-column goals
   rows / Kartoni mirror head — hide them there so the text fits one line. */
@media (max-width: 389px) {
  .ut-gol-proj .ut-teamline .ut-crest,
  .ut-spec-mirror-head .ut-bc-team-icon { display: none; }
}
.ut-teamline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ut-teamline .ut-tname { font: 600 13px var(--ut-font-body); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-teamline .ut-tmeta { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); }

/* status/verdict pills */
.ut-pill { display: inline-block; font: 700 12px var(--ut-font-body); border-radius: var(--ut-r-pill); padding: 4px 10px; white-space: nowrap; }
.ut-pill.is-green { color: var(--ut-success); background: var(--ut-success-tint); }
.ut-pill.is-amber { color: var(--ut-warning); background: var(--ut-warning-tint); }
.ut-pill.is-red   { color: var(--ut-danger);  background: var(--ut-danger-tint); }

/* bordered sub-card */
.ut-subcard { border: 1px solid var(--ut-border); border-radius: var(--ut-r-lg); padding: 16px 18px; }
.ut-subcard--sm { border: 1px solid var(--ut-border); border-radius: var(--ut-r-panel); padding: 14px; }

/* grey signal pill (dot + text) */
.ut-signal { display: flex; align-items: center; gap: 9px; background: var(--ut-pill-bg); border-radius: var(--ut-r-chip); padding: 8px; }
.ut-signal-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ut-signal-dot.is-green { background: var(--ut-success); }
.ut-signal-dot.is-amber { background: var(--ut-warning); }
.ut-signal-dot.is-red   { background: var(--ut-danger); }
.ut-signal-text { font: 400 14px var(--ut-font-body); color: var(--ut-body); line-height: 1.4; }
.ut-signal-text b { font-weight: 700; color: var(--ut-ink); }

/* horizontal bars (single fill + two-sided) */
.ut-bar { display: block; height: 8px; border-radius: var(--ut-r-bar); background: var(--ut-track); overflow: hidden; }
.ut-bar-fill { display: block; height: 100%; border-radius: var(--ut-r-bar); background: var(--ut-navy); }
.ut-bar-fill.is-soft { background: var(--ut-navy-soft); }
.ut-bar-fill.is-green { background: var(--ut-success); }
.ut-bar-fill.is-amber { background: var(--ut-warning); }

/* best-odds chip (value + bookmaker logo) */
.ut-oddchip { display: inline-flex; align-items: center; gap: 6px; background: var(--ut-pill-bg); border-radius: var(--ut-r-badge); padding: 3px 5px 3px 7px; text-decoration: none; font: 600 12px var(--ut-font-body); color: var(--ut-muted-2); }
.ut-oddchip b { font-weight: inherit; color: inherit; }
.ut-oddchip.is-pick { color: var(--ut-secondary); }
.ut-oddchip.is-verdict, .ut-oddchip.is-strong { font-weight: 700; color: var(--ut-ink); }
.ut-oddchip.is-verdict b, .ut-oddchip.is-strong b { font-weight: 700; }
.ut-oddlogo { width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0; object-fit: contain; background: var(--ut-ph-a); }

/* generic empty / no-data */
.ut-empty { text-align: center; font: 400 13px var(--ut-font-body); color: var(--ut-muted); padding: 14px 8px; }

/* standard empty state (dashed card, title + body) — from reference 6b */
.ut-empty-state { border: 1px dashed var(--ut-border-2); border-radius: 14px; padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ut-empty-state-title { font: 600 13px var(--ut-font-body); color: var(--ut-secondary); }
.ut-empty-state-body { font: 400 12px var(--ut-font-body); color: var(--ut-muted-2); line-height: 1.5; }

/* ============================================================================
   2a — PROGNOZA (verdict card + Prognoze + Ključni signali + Povjerenje)
   Single white band; blocks separated by 28px (reference 2a).
   ============================================================================ */
#pre-prognoza { background: #FFFFFF; padding: 20px 16px; gap: 28px; }

/* verdict card */
.ut-verdict { border: 1px solid var(--ut-border); border-radius: var(--ut-r-lg); padding: 16px 16px 0; }
.ut-verdict-top { display: flex; align-items: center; gap: 18px; }
.ut-ring { position: relative; width: 74px; height: 74px; flex: 0 0 auto; }
.ut-ring svg { width: 100%; height: 100%; }
.ut-ring-track { stroke: var(--ut-track); stroke-width: 6; fill: none; }
.ut-ring-fill { stroke-width: 6; stroke-linecap: round; fill: none; stroke: var(--ut-success); }
.ut-ring.is-amber .ut-ring-fill { stroke: var(--ut-warning); }
.ut-ring.is-red .ut-ring-fill { stroke: var(--ut-danger); }
.ut-ring-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 19px var(--ut-font-display); color: var(--ut-ink); }
.ut-verdict-main { min-width: 0; display: flex; flex-direction: column; }
.ut-verdict-kicker { display: flex; align-items: center; gap: 16px; }
.ut-verdict-kicker .ut-eyebrow { color: var(--ut-muted); }
.ut-verdict-pick { font: 800 20px var(--ut-font-display); color: var(--ut-ink); margin-top: 3px; line-height: 1.2; }
.ut-verdict-odds { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.ut-verdict-sub { font: 500 13px var(--ut-font-body); color: var(--ut-secondary); }
.ut-verdict-why { display: flex; align-items: flex-start; gap: 7px; border-top: 1px solid var(--ut-divider); margin-top: 16px; padding: 11px 0; }
.ut-verdict-why .ut-dot6 { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; margin-top: 5px; background: var(--ut-success); }
.ut-verdict-why.is-amber .ut-dot6 { background: var(--ut-warning); }
.ut-verdict-why.is-red .ut-dot6 { background: var(--ut-danger); }
.ut-verdict-why p { font: 400 14px var(--ut-font-body); color: var(--ut-muted); line-height: 1.45; }
.ut-verdict-why b { font-weight: 600; color: var(--ut-secondary); }

/* Prognoze block */
.ut-prognoze { display: flex; flex-direction: column; gap: 18px; }
.ut-1x2 { display: flex; flex-direction: column; gap: 10px; }
.ut-stack { display: flex; gap: 2px; height: 8px; border-radius: var(--ut-r-bar); overflow: hidden; }
.ut-stack span { display: block; }
.ut-stack .is-home { background: var(--ut-navy); }
.ut-stack .is-away { background: var(--ut-navy-soft); }   /* both teams get a navy shade */
.ut-stack .is-draw { background: var(--ut-bar-empty); }   /* draw = neutral third option */
.ut-1x2-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ut-1x2-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ut-1x2-col.is-center { align-items: center; text-align: center; }
.ut-1x2-col.is-right { align-items: flex-end; text-align: right; }
.ut-1x2-col b { font: 800 18px var(--ut-font-display); color: var(--ut-ink); }
.ut-1x2-col span { font: 500 12px var(--ut-font-body); color: var(--ut-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ut-1x2-col.is-muted b, .ut-1x2-col.is-muted span { color: var(--ut-muted-2); }
.ut-1x2-odds { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ut-1x2-odds .ut-oddcell { display: flex; }
.ut-1x2-odds .ut-oddcell.is-center { justify-content: center; }
.ut-1x2-odds .ut-oddcell.is-right { justify-content: flex-end; }
.ut-hr { height: 1px; background: var(--ut-divider); }
.ut-2side { display: flex; flex-direction: column; gap: 8px; }
.ut-2side-head { display: flex; justify-content: space-between; align-items: baseline; }
.ut-2side-cell { display: flex; flex-direction: column; gap: 1px; }
.ut-2side-cell.is-right { align-items: flex-end; text-align: right; }
.ut-2side-cell b { font: 800 18px var(--ut-font-display); color: var(--ut-ink); }
.ut-2side-cell span { font: 500 12px var(--ut-font-body); color: var(--ut-secondary); }
.ut-2side-cell.is-muted b, .ut-2side-cell.is-muted span { color: var(--ut-muted-2); }
.ut-2side-bar { display: flex; gap: 2px; height: 8px; border-radius: var(--ut-r-bar); overflow: hidden; }
.ut-2side-bar span { display: block; }
.ut-2side-bar .is-fill { background: var(--ut-navy); }
.ut-2side-bar .is-empty { background: var(--ut-bar-empty); }
.ut-2side-odds { display: flex; justify-content: space-between; }

/* Ključni signali */
.ut-signals { display: flex; flex-direction: column; }
.ut-signal-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ut-divider); }
.ut-signals .ut-signal-row:last-child { border-bottom: none; }
.ut-signal-row .ut-dot7 { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--ut-muted-2); }
.ut-signal-row .ut-dot7.is-green { background: var(--ut-success); }
.ut-signal-row .ut-dot7.is-red { background: var(--ut-danger); }
.ut-signal-row .ut-dot7.is-amber { background: var(--ut-warning); }
.ut-signal-row p { font: 400 14px var(--ut-font-body); color: var(--ut-body); line-height: 1.45; }
.ut-signal-row b { font-weight: 600; }

/* Povjerenje po tržištima */
.ut-conf { display: flex; flex-direction: column; gap: 16px; }
.ut-conf-row { display: flex; flex-direction: column; gap: 6px; }
.ut-conf-head { display: flex; justify-content: space-between; align-items: baseline; }
.ut-conf-name { font: 600 13px var(--ut-font-body); color: var(--ut-ink); }
.ut-conf-score { display: flex; align-items: baseline; gap: 6px; }
.ut-conf-pct { font: 800 15px var(--ut-font-display); color: var(--ut-ink); }
.ut-conf-word { font: 700 12px var(--ut-font-body); }
.ut-conf-word.is-green { color: var(--ut-success); }
.ut-conf-word.is-amber { color: var(--ut-warning); }
.ut-conf-word.is-red { color: var(--ut-danger); }
.ut-conf-track { height: 6px; border-radius: 3px; background: var(--ut-track); overflow: hidden; }
.ut-conf-fill { height: 100%; border-radius: 3px; background: var(--ut-navy); }
.ut-conf-reason { font: 500 12px var(--ut-font-body); color: var(--ut-muted); }

/* signal/confidence block wrappers (Ključni signali / Povjerenje / Serije) */
.ut-signals-block { display: flex; flex-direction: column; gap: 8px; }
.ut-conf-block { display: flex; flex-direction: column; gap: 16px; }

/* ============================================================================
   3a2 — GOLOVI (rebuilt from reference/mobile/3a2.html)
   ============================================================================ */
.ut-gol-proj { display: flex; flex-direction: column; }
.ut-gol-proj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ut-gol-proj-col { display: flex; flex-direction: column; gap: 2px; }
.ut-gol-proj-col.is-div { border-left: 1px solid var(--ut-divider); padding-left: 16px; }
.ut-gol-proj-num { font: 800 18px var(--ut-font-display); color: var(--ut-ink); margin-top: 4px; }
.ut-gol-proj-num.is-muted { color: var(--ut-muted-2); margin-top: 0; }
.ut-gol-proj-num small { font: 500 12px var(--ut-font-body); color: var(--ut-muted); }
.ut-gol-proj-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--ut-divider); margin-top: 14px; padding: 12px 0 2px; }
.ut-gol-proj-eq { font: 500 12.5px var(--ut-font-body); color: var(--ut-secondary); white-space: nowrap; }
.ut-gol-proj-eq b { font: 800 14px var(--ut-font-display); color: var(--ut-ink); }
.ut-gol-thr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; background: var(--ut-pill-bg); border-radius: 10px; padding: 4px; }
.ut-gol-thr-btn { font: 600 13px var(--ut-font-body); color: var(--ut-muted); text-align: center; padding: 6px 0; border-radius: 7px; background: transparent; }
.ut-gol-thr-btn.is-active { background: #FFFFFF; box-shadow: 0 1px 3px rgba(20,23,28,0.1); color: var(--ut-ink); font-weight: 700; }
.ut-gol-thr-panel { display: none; flex-direction: column; gap: 16px; }
.ut-gol-thr-panel.is-active { display: flex; }
/* shared vertical stack — one rule for every flex-column section wrapper */
.ut-gol-ou, .ut-gol-cs-group, .ut-gol-half-team, .ut-spec-cardrisk, .ut-spec-corn-combined, .ut-forma-team { display: flex; flex-direction: column; gap: 12px; }
.ut-gol-ou-head { flex-wrap: wrap; }
.ut-gol-ou-head .ut-tname { color: var(--ut-ink); font-weight: 600; }
.ut-gol-ou-head .ut-tmeta { flex-basis: 100%; font: 500 13px var(--ut-font-body); color: var(--ut-muted); }
.ut-gol-ou-row { display: grid; grid-template-columns: 62px 1fr 38px; align-items: center; gap: 10px; }
.ut-gol-ou-lbl { font: 700 13px var(--ut-font-body); color: var(--ut-secondary); }
.ut-gol-ou-lbl.is-muted { color: var(--ut-muted-2); }
.ut-gol-ou-pct { font: 800 13px var(--ut-font-display); color: var(--ut-ink); text-align: right; }
.ut-gol-ou-pct.is-muted { color: var(--ut-muted-2); }
.ut-gol-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* ── ODG contributor cards (2×2, ring nested toward the grid centre) ────────── */
.ut-odg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ut-odg-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 128px; padding: 12px; border: 1px solid var(--ut-border); border-radius: var(--ut-r-panel); }
.ut-odg-text { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; }
.ut-odg-team { display: block; max-width: 100%; font: 700 13px var(--ut-font-display); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-odg-sub { font: 500 12px var(--ut-font-body); color: var(--ut-muted); }
/* games chip: bottom-left, opposite the ring */
.ut-odg-chip { margin-top: auto; align-self: flex-start; font: 700 12px var(--ut-font-body); padding: 3px 10px; border-radius: var(--ut-r-chip); white-space: nowrap; }
.ut-odg-chip.is-green { color: var(--ut-success); background: var(--ut-success-tint); }
.ut-odg-chip.is-amber { color: var(--ut-warning); background: var(--ut-warning-tint); }
.ut-odg-chip.is-red   { color: var(--ut-danger);  background: var(--ut-danger-tint); }
/* ring: bottom-right on every card */
.ut-odg-card .ut-ring { position: absolute; right: 12px; bottom: 12px; width: 58px; height: 58px; }
.ut-odg-card .ut-ring-txt { font-size: 14px; }
/* ODG venue-record: one chip per team, two rows (team+ODG / games) */
.ut-odg-record { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ut-odg-recchip { flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; background: var(--ut-pill-bg); border-radius: var(--ut-r-chip); }
.ut-odg-recchip-top { font: 500 12.5px var(--ut-font-body); color: var(--ut-muted); }
.ut-odg-recchip-top b { font-weight: 700; color: var(--ut-ink); }
.ut-odg-recchip-games { font: 700 13px var(--ut-font-display); color: var(--ut-ink); }
.ut-gol-note { font: 500 12px var(--ut-font-body); color: var(--ut-muted); line-height: 1.5; }
.ut-gol-cs-row { display: grid; grid-template-columns: 150px 1fr 62px; align-items: center; gap: 10px; }
.ut-gol-cs-row .ut-tname { font-weight: 500; color: var(--ut-body); }
.ut-gol-cs-pct { font: 800 13px var(--ut-font-display); color: var(--ut-ink); text-align: right; }
.ut-gol-cs-pct.is-muted { color: var(--ut-muted-3); }
.ut-gol-cs-pct small { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); }
.ut-gol-cs-notes { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--ut-divider); }
.ut-bar-fill.is-soft2 { background: #AABACF; }
.ut-gol-projwrap { display: flex; flex-direction: column; gap: 8px; }
.ut-gol-proj-label { font: 600 11px var(--ut-font-body); color: var(--ut-muted-2); letter-spacing: 0.08em; text-transform: uppercase; }
.ut-gol-half-card { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ut-border); border-radius: 14px; overflow: hidden; }
.ut-gol-half-cell { padding: 14px; text-align: center; }
.ut-gol-half-cell.is-hi { border-left: 1px solid var(--ut-border); background: var(--ut-surface-alt); }
.ut-gol-half-num { font: 800 24px var(--ut-font-display); color: var(--ut-muted-2); }
.ut-gol-half-cell.is-hi .ut-gol-half-num { color: var(--ut-ink); }
.ut-gol-half-cap { display: flex; flex-direction: column; font: 13px var(--ut-font-body); color: var(--ut-muted-2); margin-top: 2px; line-height: 1.35; }
.ut-gol-half-cap-a { color: var(--ut-muted-3); font-weight: 600; }
.ut-gol-half-cap-b { color: var(--ut-muted-2); font-weight: 500; }
.ut-gol-half-cell.is-hi .ut-gol-half-cap-a { color: var(--ut-secondary); }
.ut-gol-half-team.is-brd { border-top: 1px solid var(--ut-divider); padding-top: 10px; }
.ut-gol-half-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.ut-gol-half-stats > div { text-align: center; }
/* Tačan broj golova (extra) — vertical bar chart */
.ut-gol-et { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; }
.ut-gol-et-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ut-gol-et-track { width: 100%; height: 84px; display: flex; align-items: flex-end; justify-content: center; }
.ut-gol-et-bar { width: 68%; background: var(--ut-navy); border-radius: 4px 4px 0 0; min-height: 4px; }
.ut-gol-et-bar.is-peak { background: var(--ut-warning); }
.ut-gol-et-pct { font: 800 13px var(--ut-font-display); color: var(--ut-ink); }
.ut-gol-et-pct.is-peak { color: var(--ut-warning); }
.ut-gol-et-lbl { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); }
/* Golovi po periodu (extra) — horizontal bars per 15-min window */
.ut-gol-gp { display: flex; flex-direction: column; gap: 8px; }
.ut-gol-gp-row { display: grid; grid-template-columns: 46px 1fr 38px; align-items: center; gap: 10px; }
.ut-gol-gp-lbl { font: 500 12px var(--ut-font-body); color: var(--ut-secondary); }
.ut-gol-gp-pct { font: 800 13px var(--ut-font-display); color: var(--ut-ink); text-align: right; }
.ut-gol-gp-row.is-peak .ut-gol-gp-pct { color: var(--ut-warning); }
.ut-gol-half-stats b { font: 800 16px var(--ut-font-display); color: var(--ut-ink); display: block; }
.ut-gol-half-stats b.is-muted { color: var(--ut-muted-2); }
.ut-gol-half-stats b.is-green { color: var(--ut-success); }
.ut-gol-half-stats span { font: 600 13px var(--ut-font-body); color: var(--ut-muted); }

/* ============================================================================
   3d — POVREDE (injuries; rebuilt from reference/mobile/3d.html). Lineup pitch
   is NOT here — see css/ut-lineups.css (owner exemption).
   ============================================================================ */
.ut-inj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ut-inj-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ut-inj-team-label { font: 600 11px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.ut-inj-row { display: flex; align-items: flex-start; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--ut-divider); }
.ut-inj-reasonline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ut-inj-photo { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--ut-track); }
.ut-inj-col .ut-inj-row:last-child { border-bottom: none; padding-bottom: 0; }
.ut-inj-player { flex: 1; min-width: 0; }
.ut-inj-nameline { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ut-inj-name { font: 600 12.5px var(--ut-font-body); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ut-inj-rating { flex-shrink: 0; font: 800 12.5px var(--ut-font-display); color: var(--ut-ink); }
.ut-inj-value { font: 500 12px var(--ut-font-body); color: var(--ut-secondary); line-height: 1.35; }
.ut-inj-value b { font-weight: 800; color: var(--ut-ink); font-family: var(--ut-font-display); }
.ut-inj-reason { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ut-inj-status { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ut-inj-status img, .ut-inj-status svg { width: 18px; height: 18px; object-fit: contain; }
.ut-inj-empty { font: 500 13px var(--ut-font-body); color: var(--ut-muted-2); }

/* ============================================================================
   3e — KVOTE (odds comparison; rebuilt from reference/mobile/3e.html)
   ============================================================================ */
.ut-kvote { background: #FFFFFF; padding: 18px 16px 22px; display: flex; flex-direction: column; gap: 14px; }
.ut-kv-head { display: flex; align-items: baseline; justify-content: space-between; }
.ut-kv-count { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); }
.ut-kv-empty { font: 400 13px var(--ut-font-body); color: var(--ut-muted); padding: 8px 0; }
.ut-kv-radio { position: absolute; opacity: 0; pointer-events: none; }
/* market chips + period dropdown share one row, space-between */
.ut-kv-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ut-kv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ut-kv-chip { font: 600 12px var(--ut-font-body); color: var(--ut-secondary); background: var(--ut-pill-bg); border-radius: var(--ut-r-pill); padding: 6px 12px; cursor: pointer; }
#ut-kv-m-1x2:checked ~ .ut-kv-controls label[for="ut-kv-m-1x2"],
#ut-kv-m-ou25:checked ~ .ut-kv-controls label[for="ut-kv-m-ou25"],
#ut-kv-m-btts:checked ~ .ut-kv-controls label[for="ut-kv-m-btts"] { background: var(--ut-primary); color: #FFFFFF; font-weight: 700; }
/* period control (90 min / 1. pol / 2. pol) — hidden while ODG is selected */
/* period dropdown (handoff 3e: "90 min ▾" pill → menu) */
.ut-kv-perdd { position: relative; align-self: flex-start; }
.ut-kv-perdd .ut-kv-perdd-btn { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--ut-font-body); color: var(--ut-secondary); background: var(--ut-pill-bg); border-radius: var(--ut-r-pill); padding: 6px 12px; cursor: pointer; }
.ut-kv-perdd-chev { width: 13px; height: 13px; flex-shrink: 0; }
.ut-kv-perdd-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 10; min-width: 128px; background: #FFFFFF; border: 1px solid var(--ut-border); border-radius: 10px; box-shadow: 0 6px 20px rgba(10, 14, 20, 0.12); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.ut-kv-perdd-menu[hidden] { display: none; }
.ut-kv-perdd .ut-kv-perdd-opt { text-align: left; font: 600 12.5px var(--ut-font-body); color: var(--ut-body); padding: 8px 10px; border-radius: 7px; cursor: pointer; background: transparent; }
.ut-kv-perdd .ut-kv-perdd-opt:active { background: var(--ut-pill-bg); }
.ut-kv-perdd .ut-kv-perdd-opt.is-sel { background: var(--ut-ink); color: #FFFFFF; }
#ut-kv-m-btts:checked ~ .ut-kv-controls .ut-kv-perdd { display: none; }
.ut-kv-panel { display: none; }
#ut-kv-m-1x2:checked  ~ #ut-kv-p-ft:checked ~ .ut-kv-panels .ut-kv-panel[data-m="1x2"][data-p="ft"],
#ut-kv-m-1x2:checked  ~ #ut-kv-p-1h:checked ~ .ut-kv-panels .ut-kv-panel[data-m="1x2"][data-p="1h"],
#ut-kv-m-1x2:checked  ~ #ut-kv-p-2h:checked ~ .ut-kv-panels .ut-kv-panel[data-m="1x2"][data-p="2h"],
#ut-kv-m-ou25:checked ~ #ut-kv-p-ft:checked ~ .ut-kv-panels .ut-kv-panel[data-m="ou25"][data-p="ft"],
#ut-kv-m-ou25:checked ~ #ut-kv-p-1h:checked ~ .ut-kv-panels .ut-kv-panel[data-m="ou25"][data-p="1h"],
#ut-kv-m-ou25:checked ~ #ut-kv-p-2h:checked ~ .ut-kv-panels .ut-kv-panel[data-m="ou25"][data-p="2h"],
#ut-kv-m-btts:checked ~ .ut-kv-panels .ut-kv-panel[data-m="btts"][data-p="ft"] { display: block; }
.ut-kv-grid { display: flex; flex-direction: column; gap: 6px; }
.ut-kv-grow { display: grid; grid-template-columns: 1fr 60px 60px 60px; gap: 6px; align-items: center; }
.ut-kv-grid[data-cols="2"] .ut-kv-grow { grid-template-columns: 1fr 60px 60px; }
.ut-kv-ghead .ut-kv-book-col { font: 600 11px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.ut-kv-ghead .ut-kv-hcell { font: 600 12px var(--ut-font-body); color: var(--ut-muted); text-align: center; }
.ut-kv-book { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ut-kv-logo { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; object-fit: contain; }
.ut-kv-logo--ph { background: var(--ut-ph-a); }
.ut-kv-bookname { font: 700 12.5px var(--ut-font-display); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-kv-odd { font: 600 13px var(--ut-font-body); color: var(--ut-secondary); border: 1px solid var(--ut-border); border-radius: 8px; padding: 8px 0; text-align: center; }
.ut-kv-odd.is-best { font-weight: 700; color: var(--ut-ink); border-color: var(--ut-ink); }
.ut-kv-foot { border-top: 1px solid var(--ut-divider); padding-top: 11px; font: 500 12px var(--ut-font-body); color: var(--ut-muted); }
/* Best-odds quick-play list — shown on all viewports (owner: don't hide on mobile). */
.ut-kv-betslip { display: flex; flex-direction: column; margin-top: 4px; border-top: 1px solid var(--ut-divider); }
.ut-kv-slip-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--ut-track); }
.ut-kv-slip-row:last-child { border-bottom: none; }
.ut-kv-slip-pick { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ut-kv-slip-label { font: 600 13px var(--ut-font-body); color: var(--ut-ink); }
.ut-kv-slip-src { font: 500 12px var(--ut-font-body); color: var(--ut-muted); }
.ut-kv-slip-win { font: 600 13px var(--ut-font-body); color: var(--ut-secondary); }
.ut-kv-slip-win span { font-weight: 800; color: var(--ut-ink); font-family: var(--ut-font-display); }
.ut-kv-slip-cta { font: 700 13px var(--ut-font-body); color: #fff; background: var(--ut-primary); border-radius: var(--ut-r-btn); padding: 8px 14px; text-decoration: none; }

/* ============================================================================
   3c — FORMA (rebuilt from reference/mobile/3c.html)
   ============================================================================ */
.ut-bc-team-name-group { display: inline-flex; align-items: center; gap: 8px; }
.ut-bc-team-icon { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ut-forma-team > .ut-bc-team-name-group { justify-content: flex-start; }
.ut-forma-team-name { font: 700 13.5px var(--ut-font-display); color: var(--ut-ink); }
.ut-forma-pills-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Form pills: rounded squares (24px) — green-dark filled W, tinted-amber outline
   D, red-outline L, same palette as the header form-block. */
.ut-forma-pill { width: 24px; height: 24px; border-radius: var(--ut-r-chip); display: flex; align-items: center; justify-content: center; font: 700 12px var(--ut-font-display); border: 1px solid transparent; flex-shrink: 0; }
.ut-forma-pill.is-w { background: var(--bc-green-dark); color: #fff; }
.ut-forma-pill.is-l { background: #FFFFFF; color: var(--ut-danger); border-color: var(--ut-danger); }
.ut-forma-pill.is-d { background: var(--ut-warning-tint); color: var(--ut-warning); border-color: var(--ut-warning); }
.ut-forma-pill.is-empty { background: var(--ut-pill-bg); color: var(--ut-muted-2); }
.ut-forma-trend { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font: 700 12px var(--ut-font-body); border-radius: var(--ut-r-pill); padding: 5px 11px; white-space: nowrap; }
/* Icon inherits the chip's per-state color; stroke follows it (the .ut-page *
   reset pins every element's color to ink, so currentColor needs this override). */
.ut-forma-trend .ut-ico { width: 13px; height: 13px; flex-shrink: 0; color: inherit; stroke: currentColor; }
.ut-forma-trend.is-rising, .ut-forma-trend.is-up, .ut-forma-trend.is-green { color: var(--ut-success); background: var(--ut-success-tint); }
.ut-forma-trend.is-falling, .ut-forma-trend.is-down, .ut-forma-trend.is-red { color: var(--ut-danger); background: var(--ut-danger-tint); }
.ut-forma-trend.is-stable, .ut-forma-trend.is-flat, .ut-forma-trend.is-amber { color: var(--ut-secondary); background: var(--ut-pill-bg); }
.ut-forma-trend.is-stable { border: 1px solid var(--bc-border-strong); }
.ut-forma-venue-row { font: 500 13px var(--ut-font-body); color: var(--ut-secondary); }
.ut-forma-venue-win { color: var(--ut-muted-2); }
.ut-forma-venue-row b { font-weight: 700; color: var(--ut-ink); }
.ut-forma-team + .ut-forma-team, .ut-band > .ut-forma-team ~ .ut-forma-team { border-top: 1px solid var(--ut-divider); padding-top: 14px; }
.ut-forma-sub-label { font: 600 13px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.ut-forma-table { border: 1px solid var(--ut-border); border-radius: 14px; overflow: hidden; }
.ut-forma-table-head, .ut-forma-table-row { display: grid; grid-template-columns: 14px 1fr 58px 18px 16px 16px 16px 28px 22px; gap: 5px; align-items: center; padding: 11px 14px; }
.ut-forma-table-head { padding: 9px 14px; background: var(--ut-surface-alt); border-bottom: 1px solid var(--ut-hairline); }
.ut-forma-table-head span { font: 600 11px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.05em; text-align: center; }
.ut-forma-table-head span:nth-child(2), .ut-forma-table-head span:nth-child(3) { text-align: left; }
.ut-forma-table-row { border-bottom: 1px solid #F2F3F5; }
.ut-forma-table-row:last-child { border-bottom: none; }
.ut-forma-table-rank { font: 700 12px var(--ut-font-body); color: var(--ut-muted-2); text-align: center; }
.ut-forma-table-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ut-forma-table-name { font: 700 12.5px var(--ut-font-display); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-forma-table-form { display: flex; gap: 3px; }
.ut-forma-form-sq { width: 8px; height: 8px; border-radius: 2px; background: var(--ut-track); }
.ut-forma-form-sq.is-w { background: var(--ut-success); }
.ut-forma-form-sq.is-l { background: var(--ut-danger); }
.ut-forma-form-sq.is-d { background: var(--ut-warning); }
.ut-forma-table-num { font: 500 13px var(--ut-font-body); color: var(--ut-body); text-align: center; }
.ut-forma-table-pts { font: 800 13px var(--ut-font-display); color: var(--ut-ink); text-align: center; }
/* "Tabela" label + "Cijela tabela" trigger (list icon, no chevron) on one row */
.ut-forma-table-block { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ut-forma-table-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ut-forma-table-header .ut-forma-table-more { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--ut-font-body); color: var(--ut-secondary); background: transparent; padding: 2px 0; }
.ut-forma-table-header .ut-forma-table-more:active { color: var(--ut-ink); }
.ut-forma-table-more-ico { width: 14px; height: 14px; flex-shrink: 0; }
/* Full standings inside the drawer */
.ut-tbl-full { display: flex; flex-direction: column; }
.ut-tbl-full-head, .ut-tbl-full-row { display: grid; grid-template-columns: 20px 1fr 24px 22px 22px 22px 30px 26px; gap: 6px; align-items: center; padding: 9px 4px; }
.ut-tbl-full-head { padding: 6px 4px; }
.ut-tbl-full-head span { font: 600 10.5px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
.ut-tbl-full-head span:nth-child(2) { text-align: left; }
.ut-tbl-full-row { border-top: 1px solid var(--ut-divider); font: 500 12.5px var(--ut-font-body); color: var(--ut-body); }
.ut-tbl-full-row span:not(.ut-tbl-full-team) { text-align: center; }
.ut-tbl-full-rank { font: 700 12px var(--ut-font-display); color: var(--ut-muted); }
.ut-tbl-full-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ut-tbl-full-team img { flex-shrink: 0; border-radius: 3px; }
.ut-tbl-full-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ut-ink); }
.ut-tbl-full-pts { font: 800 12.5px var(--ut-font-display); color: var(--ut-ink); }
.ut-tbl-full-row.is-hl { background: var(--ut-pill-bg); border-radius: 8px; border-top-color: transparent; }
.ut-tbl-full-row.is-hl .ut-tbl-full-rank { color: var(--ut-secondary); }
.ut-forma-crossref { display: flex; flex-direction: column; gap: 14px; }
.ut-forma-crossref-head { display: flex; align-items: center; justify-content: space-between; }
.ut-forma-crossref-sub { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); }
/* att/def home-vs-away bars — live/post stat layout (label centred over the bar) */
.ut-avd-teams { display: flex; align-items: center; justify-content: space-between; }
.ut-avd-tn { display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--ut-font-display); color: var(--ut-ink); }
.ut-avd-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.ut-avd-dot.is-home { background: var(--ut-navy); }
.ut-avd-dot.is-away { background: var(--ut-away-slate); }
.ut-avd-stat { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 8px; row-gap: 6px; }
.ut-avd-hval { grid-column: 1; font: 800 16px var(--ut-font-display); color: var(--ut-ink); }
.ut-avd-label { grid-column: 2; text-align: center; font: 500 12px var(--ut-font-body); color: var(--ut-secondary); }
.ut-avd-aval { grid-column: 3; text-align: right; font: 800 16px var(--ut-font-display); color: var(--ut-ink); }
/* two bars: each team's fill = its raw rating out of 100 (fills from its own side
   toward the centre), so the bar length matches the % label. */
.ut-avd-tracks { grid-column: 1 / -1; display: flex; gap: 3px; height: 7px; }
.ut-avd-half { flex: 1; display: flex; background: var(--ut-track); border-radius: 4px; overflow: hidden; }
.ut-avd-half.is-home { justify-content: flex-start; }
.ut-avd-half.is-away { justify-content: flex-end; }
.ut-avd-half .ut-avd-fill { height: 100%; border-radius: 4px; }
.ut-avd-half.is-home .ut-avd-fill { background: var(--ut-navy); }
.ut-avd-half.is-away .ut-avd-fill { background: var(--ut-away-slate); }
.ut-avd-notes { margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--ut-divider); }
.ut-avd-note { font: 500 12px var(--ut-font-body); color: var(--ut-muted); line-height: 1.5; }
.ut-forma-nodata { font: 400 13px var(--ut-font-body); color: var(--ut-muted); text-align: center; padding: 8px; }
/* Bare .home/.away are functional markers (CLAUDE.md §4.18) — neutralise only
   colour here. Do NOT reset font-weight: on .ut-forma-team-name that pulls the
   heading down to the sheet's 400 reset base (an unloaded Red Hat Display face
   → synthesised thin text) instead of its own 700. */
.ut-forma-team-name.home, .ut-forma-team-name.away { color: inherit; }

/* H2H (Međusobni susreti) */
/* Međusobni susreti (H2H) — rebuilt from reference/mobile/3c.html */
.ut-h2h-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ut-h2h-sub { font: 400 12px var(--ut-font-body); color: var(--ut-muted-2); }
.ut-h2h-wdl { display: flex; flex-direction: column; gap: 6px; }
.ut-h2h-wdl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ut-h2h-wdl-team { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ut-h2h-wdl-team.is-right { justify-content: flex-end; }
.ut-h2h-wdl-team-name { font: 600 13px var(--ut-font-body); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-h2h-wdl-labels { display: flex; justify-content: space-between; }
.ut-h2h-wdl-labels span { font: 600 12px var(--ut-font-body); }
.ut-h2h-wdl-labels .is-home { color: var(--ut-ink); }
.ut-h2h-wdl-labels .is-draw { color: var(--ut-muted-2); }
.ut-h2h-wdl-labels .is-away { color: var(--ut-secondary); }
.ut-h2h-wdl-bar { display: flex; gap: 2px; height: 8px; border-radius: var(--ut-r-bar); overflow: hidden; }
.ut-h2h-wdl-bar span { display: block; }
.ut-h2h-wdl-bar .is-home { background: var(--ut-navy); }
.ut-h2h-wdl-bar .is-draw { background: var(--ut-bar-empty); }
.ut-h2h-wdl-bar .is-away { background: #AABACF; }
.ut-h2h-summary-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.ut-h2h-summary-pill { font: 600 12px var(--ut-font-body); color: var(--ut-secondary); background: var(--ut-pill-bg); border-radius: var(--ut-r-pill); padding: 5px 11px; white-space: nowrap; }
.ut-h2h-summary-pill b { font-weight: 800; color: var(--ut-ink); }
.ut-h2h-venue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ut-h2h-venue-card { border: 1px solid var(--ut-border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.ut-h2h-venue-label { font: 400 11px var(--ut-font-body); color: var(--ut-muted-2); }
.ut-h2h-venue-wdl { font: 800 14px var(--ut-font-display); color: var(--ut-ink); }
.ut-h2h-top-scoreline { font: 500 13px var(--ut-font-body); color: var(--ut-secondary); }
.ut-h2h-top-scoreline b { font-weight: 800; color: var(--ut-ink); }
.ut-h2h-recent-label { font: 600 11px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.ut-h2h-match-list { display: flex; flex-direction: column; }
.ut-h2h-match-row { display: grid; grid-template-columns: 20% 1fr 20%; align-items: center; gap: 4px; padding: 9px 0; border-top: 1px solid var(--ut-divider); }
.ut-h2h-match-date { display: flex; flex-direction: column; }
.ut-h2h-match-date b { font: 500 11px var(--ut-font-body); color: var(--ut-muted-2); }
.ut-h2h-match-league { font: 400 9.5px var(--ut-font-body); color: var(--ut-faint-2); }
.ut-h2h-match-teams { display: flex; align-items: center; gap: 9px; justify-content: center; }
.ut-h2h-match-abbr { font: 700 13px var(--ut-font-body); color: var(--ut-muted-2); width: 34px; }
.ut-h2h-match-abbr.right { text-align: right; }
.ut-h2h-match-abbr.is-win { font-weight: 800; color: var(--ut-ink); }
.ut-h2h-match-abbr.is-draw { color: var(--ut-secondary); }
.ut-h2h-match-score { font: 800 15px var(--ut-font-display); color: var(--ut-ink); background: var(--ut-pill-bg); border-radius: var(--ut-r-badge); padding: 3px 9px; }
.ut-h2h-match-score .is-dim { color: var(--ut-muted); }
.ut-h2h-match-pills { display: flex; gap: 3px; flex-direction: column; align-items: flex-end; }
.ut-h2h-mpill { display: inline-flex; align-items: center; gap: 3px; font: 600 12px var(--ut-font-body); border-radius: 5px; padding: 2px 6px; white-space: nowrap; width: fit-content; }
.ut-h2h-mpill .ut-ico { width: 11px; height: 11px; flex-shrink: 0; color: inherit; stroke: currentColor; }
.ut-h2h-mpill.yes { color: var(--ut-success); background: var(--ut-success-tint); }
.ut-h2h-mpill.no { color: var(--ut-muted-2); background: var(--ut-pill-bg); }

/* Azijski Hendikep — rebuilt from reference/mobile/3c.html */
.ut-forma-ah-team { display: flex; flex-direction: column; gap: 8px; }
.ut-forma-ah-team + .ut-forma-ah-team { border-top: 1px solid var(--ut-divider); padding-top: 14px; }
.ut-forma-ah-teamline { display: flex; align-items: center; gap: 8px; }
.ut-forma-ah-name { font: 600 14px var(--ut-font-body); color: var(--ut-ink); }
.ut-forma-ah-meta { font: 400 13px var(--ut-font-body); color: var(--ut-muted); }
.ut-forma-ah-rows { display: flex; flex-direction: column; gap: 8px; }
.ut-forma-ah-row { display: grid; grid-template-columns: 80px 1fr 68px; align-items: center; gap: 10px; }
.ut-forma-ah-lbl { font: 500 13px var(--ut-font-body); color: var(--ut-secondary); }
.ut-forma-ah-bar { height: 8px; border-radius: var(--ut-r-bar); background: var(--ut-track); overflow: hidden; }
.ut-forma-ah-fill { display: block; height: 100%; border-radius: var(--ut-r-bar); background: var(--ut-navy); }
.ut-forma-ah-team.is-away .ut-forma-ah-fill { background: #AABACF; }
.ut-forma-ah-pct { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; }
.ut-forma-ah-pct b { font: 800 13px var(--ut-font-display); color: var(--ut-ink); }

/* ============================================================================
   3b — SPECIJALI (rebuilt from reference/mobile/3b.html)
   ============================================================================ */
.ut-spec-sub-label { font: 600 13px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.08em; text-transform: uppercase; }
/* grey signal pill */
.ut-spec-signal-card { display: flex; align-items: center; gap: 9px; background: var(--ut-pill-bg); border-radius: var(--ut-r-chip); padding: 8px; }
.ut-spec-signal-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--ut-warning); }
.ut-spec-signal-dot.is-neutral { background: var(--ut-success); }
.ut-spec-signal-text { font: 400 14px var(--ut-font-body); color: var(--ut-body); line-height: 1.4; }
.ut-spec-signal-text b { font-weight: 700; color: var(--ut-ink); }
/* mirrored per-period bar chart */
.ut-spec-mirror-card { border: 1px solid var(--ut-border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 7px; }
.ut-spec-mirror-head { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; margin-bottom: 3px; }
.ut-spec-mirror-side { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ut-spec-mirror-side.is-right { justify-content: flex-end; }
.ut-spec-mirror-team { font: 600 13px var(--ut-font-body); color: var(--ut-ink); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ut-spec-mirror-ct { font: 500 13px var(--ut-font-body); color: var(--ut-muted-2); white-space: nowrap; }
.ut-spec-mirror-row { display: grid; grid-template-columns: 14px 1fr 44px 1fr 14px; align-items: center; gap: 6px; }
.ut-spec-mirror-count { font: 500 11px var(--ut-font-body); color: var(--ut-muted-2); }
.ut-spec-mirror-count:first-child { text-align: right; }
.ut-spec-mirror-count:last-child { text-align: right; }
.ut-spec-mirror-count.is-peak { font-weight: 700; color: var(--ut-warning); }
.ut-spec-mirror-period { font: 500 11px var(--ut-font-body); color: var(--ut-muted-2); text-align: center; }
.ut-spec-mirror-track { height: 8px; display: flex; }
.ut-spec-mirror-track.is-home { justify-content: flex-end; }
.ut-spec-mirror-bar { height: 8px; }
.ut-spec-mirror-bar.is-home { background: var(--ut-navy); border-radius: 4px 0 0 4px; }
.ut-spec-mirror-bar.is-away { background: var(--ut-navy-soft); border-radius: 0 4px 4px 0; }
.ut-spec-mirror-bar.is-peak { background: var(--ut-warning); }
.ut-spec-cards-note { font: 500 12px var(--ut-font-body); color: var(--ut-muted); line-height: 1.5; }
/* red-cards expander */
.ut-spec-red-cards { border: 1px solid var(--ut-border); border-radius: 10px; }
.ut-spec-red-toggle { display: flex; align-items: center; gap: 6px; padding: 10px 14px; cursor: pointer; list-style: none; }
.ut-spec-red-toggle::-webkit-details-marker { display: none; }
.ut-spec-red-toggle::before { content: "▸"; color: var(--ut-secondary); font-size: 11px; }
.ut-spec-red-cards[open] .ut-spec-red-toggle::before { content: "▾"; }
.ut-spec-red-title { font: 600 13px var(--ut-font-body); color: var(--ut-secondary); }
.ut-spec-red-count { font: 500 12px var(--ut-font-body); color: var(--ut-faint); }
.ut-spec-red-body { padding: 4px 14px 14px; }
.ut-spec-red-body .ut-spec-mirror-card { border: 0; border-radius: 0; padding: 0; }
.ut-spec-mirror-bar.is-red { background: var(--ut-danger); }
.ut-spec-cards-team { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.ut-spec-cards-team-header { display: flex; align-items: center; justify-content: space-between; }
.ut-spec-cards-team-name { font: 600 13px var(--ut-font-body); color: var(--ut-ink); }
.ut-spec-cards-total { font: 700 13px var(--ut-font-display); color: var(--ut-ink); display: inline-flex; align-items: center; gap: 5px; }
.ut-spec-rc { width: 10px; height: 13px; border-radius: 2px; background: var(--ut-danger); display: inline-block; }
.ut-spec-cards-chart { display: flex; flex-direction: column; gap: 6px; }
.ut-spec-cards-row { display: grid; grid-template-columns: 44px 1fr 14px; align-items: center; gap: 8px; }
.ut-spec-cards-label { font: 500 11px var(--ut-font-body); color: var(--ut-muted-2); }
.ut-spec-cards-track { height: 8px; border-radius: 4px; background: var(--ut-track); overflow: hidden; }
.ut-spec-cards-bar { height: 100%; border-radius: 4px; background: var(--ut-navy); }
.ut-spec-cards-bar.is-red { background: var(--ut-danger); }
.ut-spec-cards-count { font: 500 11px var(--ut-font-body); color: var(--ut-muted-2); text-align: right; }
.ut-spec-cards-row.is-peak .ut-spec-cards-count { font-weight: 700; color: var(--ut-ink); }
/* card-risk players */
.ut-spec-foul-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ut-spec-foul-title { margin: 0; }
.ut-spec-foul-hint { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); }
.ut-spec-foul-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Match referee row at the bottom of Kartoni. */
.ut-spec-referee { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ut-divider); }
.ut-spec-referee svg { color: var(--ut-faint); flex-shrink: 0; }
.ut-spec-referee-label { font: 600 11px var(--ut-font-body); color: var(--ut-muted-2); letter-spacing: 0.04em; text-transform: uppercase; }
.ut-spec-referee-name { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; font: 700 13px var(--ut-font-display); color: var(--ut-ink); text-align: right; }
.ut-spec-referee-country { font: 500 11.5px var(--ut-font-body); color: var(--ut-muted-2); }
.ut-spec-foul-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ut-spec-foul-team { font: 600 11px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.ut-spec-foul-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; }
.ut-spec-foul-row.is-risk { background: var(--ut-warning-tint); }
.ut-spec-foul-row.is-top  { background: var(--ut-success-tint); }
.ut-spec-foul-pos { font: 700 9px var(--ut-font-body); color: var(--ut-muted); background: var(--ut-pill-bg); border-radius: 4px; padding: 2px 4px; flex-shrink: 0; }
.ut-spec-foul-row.is-risk .ut-spec-foul-pos, .ut-spec-foul-row.is-top .ut-spec-foul-pos { background: #FFFFFF; border: 1px solid var(--ut-border); }
.ut-spec-foul-name { font: 600 12px var(--ut-font-body); color: var(--ut-body); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-spec-foul-row.is-risk .ut-spec-foul-name, .ut-spec-foul-row.is-top .ut-spec-foul-name { color: var(--ut-ink); }
.ut-spec-foul-stat { font: 600 12px var(--ut-font-body); color: var(--ut-muted-2); white-space: nowrap; }
.ut-spec-foul-card { font: 500 11px var(--ut-font-body); color: var(--ut-muted-2); white-space: nowrap; }
.ut-spec-foul-row.is-risk .ut-spec-foul-stat, .ut-spec-foul-row.is-risk .ut-spec-foul-card { color: var(--ut-warning); }
.ut-spec-foul-row.is-top .ut-spec-foul-stat { color: var(--ut-success); }
.ut-spec-foul-empty { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); }
/* korneri */
.ut-spec-corn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ut-spec-corn-card { border: 1px solid var(--ut-border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.ut-spec-corn-card-team { font: 600 13px var(--ut-font-body); color: var(--ut-ink); }
.ut-spec-corn-card-team .ut-tmeta { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); }
.ut-spec-corn-card-nums { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; }
.ut-spec-corn-card-nums b { font: 800 17px var(--ut-font-display); color: var(--ut-ink); }
.ut-spec-corn-card-nums b.is-muted { color: var(--ut-muted-2); }
.ut-spec-corn-card-nums i { font: 400 12px var(--ut-font-body); color: var(--ut-muted-2); font-style: normal; }
.ut-spec-corn-card-cap { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); }
.ut-spec-corn-ou-row { display: grid; grid-template-columns: 52px 1fr 68px; align-items: center; gap: 8px; }
.ut-spec-corn-ou-thr { font: 700 13px var(--ut-font-body); color: var(--ut-secondary); }
.ut-spec-corn-ou-pct { font: 800 13px var(--ut-font-display); color: var(--ut-ink); text-align: right; white-space: nowrap; }
/* goalkeeper / shots — single bordered card split into two centered cells */
.ut-spec-gk-grid, .ut-spec-shots-card { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ut-border); border-radius: 14px; overflow: hidden; }
.ut-spec-gk-card, .ut-spec-shots-cell { padding: 14px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.ut-spec-gk-card + .ut-spec-gk-card, .ut-spec-shots-cell + .ut-spec-shots-cell { border-left: 1px solid var(--ut-border); }
.ut-spec-gk-team { font: 600 13px var(--ut-font-body); color: var(--ut-ink); }
.ut-spec-gk-saves, .ut-spec-shots-num { font: 800 24px var(--ut-font-display); color: var(--ut-ink); }
.ut-spec-gk-label, .ut-spec-shots-lbl { font: 500 12px var(--ut-font-body); color: var(--ut-muted); }
.ut-spec-gk-shots { font: 600 13px var(--ut-font-body); color: var(--ut-secondary); }
.ut-spec-shots-sot { font: 500 12px var(--ut-font-body); color: var(--ut-success); }
.ut-spec-yc { font: 700 12px var(--ut-font-body); color: var(--ut-warning); }
/* Tier chip (Korneri "Kombinovano" + Azijski Hendikep lines): colour + icon
   instead of the Visoko/Umjereno/Nisko word (▲ high · = mid · ▼ low). */
.ut-spec-tier { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; font: 700 9px var(--ut-font-body); color: #FFFFFF; line-height: 1; vertical-align: middle; }
.ut-spec-tier.is-green { background: var(--ut-success); }
.ut-spec-tier.is-amber { background: var(--ut-warning); }
.ut-spec-tier.is-red   { background: var(--ut-danger); }
.ut-spec-placeholder { border: 1px dashed var(--ut-border-2); border-radius: 12px; padding: 16px; text-align: center; }
.ut-spec-placeholder-title { font: 600 13px var(--ut-font-body); color: var(--ut-secondary); }
.ut-spec-placeholder-body { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); }

/* ============================================================================
   LIVE/POST shared — band headings + stat rows (4b/4d/4e). live-stat-* is also
   emitted by the live-poll JS in utakmica-new.php, so one rule styles both.
   ============================================================================ */
.ut-band > h2 { font: 700 20px var(--ut-font-display); color: var(--ut-ink); margin: 0 0 8px; }
.section-header-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.live-updated-at { font: 400 11px var(--ut-font-body); color: var(--ut-muted-2); }
.loading-placeholder { font: 500 13px var(--ut-font-body); color: var(--ut-muted); text-align: center; padding: 8px; }
.live-stat-row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 8px; row-gap: 6px; }
.live-stat-home-val { grid-column: 1; font: 800 16px var(--ut-font-display); color: var(--ut-ink); }
.live-stat-label { grid-column: 2; text-align: center; font: 500 12px var(--ut-font-body); color: var(--ut-secondary); }
.live-stat-total { color: var(--ut-faint); font-weight: 600; }
.live-stat-away-val { grid-column: 3; text-align: right; font: 800 16px var(--ut-font-display); color: var(--ut-ink); }
.live-stat-tracks { grid-column: 1 / -1; display: flex; gap: 2px; height: 7px; border-radius: 4px; overflow: hidden; }
.live-stat-bar-home { background: var(--ut-navy); }
.live-stat-bar-away { background: var(--ut-navy-soft); }
/* Statistike uživo (design 4b): airy 18px rhythm between the header, each stat
   block, the "Ostale statistike" row, and the legend. */
#live-stats { gap: 18px; }
#live-stats-bars { display: flex; flex-direction: column; gap: 18px; }
/* column-reverse → the "Ostale statistike" toggle sits BELOW the expanded rows,
   so it collapses from the bottom (mobile only; desktop renders the rows inline). */
.live-stats-more { margin: 0; display: flex; flex-direction: column-reverse; gap: 18px; }
/* "Ostale statistike" collapsed row (design 4b): bordered pill, bold label +
   a lighter preview of the collapsed stat names, with a caret. */
.live-stats-more summary { list-style: none; display: flex; align-items: center; gap: 6px; border: 1px solid var(--ut-border); border-radius: 10px; padding: 10px 14px; cursor: pointer; }
.live-stats-more summary::-webkit-details-marker { display: none; }
.live-stats-more summary::before { content: "▸"; color: var(--ut-secondary); font: 600 12px var(--ut-font-body); }
.live-stats-more[open] summary::before { content: "▾"; }
/* Expanded secondary rows need the same 18px rhythm as the primary block. The
   18px separation from the primary block / toggle comes from the container gap
   (#live-stats-bars) and the details' own gap — no extra padding here. */
.live-stats-more-body { display: flex; flex-direction: column; gap: 18px; }
.live-stats-more-lbl { font: 600 12px var(--ut-font-body); color: var(--ut-secondary); }
.live-stats-more-sub { font: 400 11px var(--ut-font-body); color: var(--ut-muted-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-stats-legend { display: flex; gap: 16px; }
.live-stats-legend span { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--ut-font-body); color: var(--ut-secondary); }
.live-stats-legend-sq { width: 10px; height: 10px; border-radius: 3px; }
.live-stats-legend-sq.is-home { background: var(--ut-navy); }
.live-stats-legend-sq.is-away { background: var(--ut-navy-soft); }

/* Sažetak — Najbolji igrači player cards + "vidi sve" links (4d) */
.psz-link { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--ut-border); border-radius: 10px; padding: 10px 14px; margin-top: 2px; text-decoration: none; background: transparent; width: 100%; cursor: pointer; font: 600 12.5px var(--ut-font-body); color: var(--ut-ink); }
.psz-link span { font: 700 13px var(--ut-font-body); color: var(--ut-muted-2); }
.psz-recap-empty { font: 400 13px var(--ut-font-body); color: var(--ut-muted); line-height: 1.6; margin: 0; }
.psz-recap { font: 400 13.5px var(--ut-font-body); color: var(--ut-body); line-height: 1.65; margin: 0; }
.psz-recap + .psz-recap { margin-top: 8px; }
.psz-players { display: flex; flex-direction: column; gap: 8px; }
.psz-player { border: 1px solid var(--ut-border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.psz-player-top { display: flex; align-items: flex-start; gap: 12px; }
.psz-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--ut-track); }
.psz-avatar--ph { background: repeating-linear-gradient(45deg, var(--ut-ph-b), var(--ut-ph-b) 3px, var(--ut-ph-a) 3px, var(--ut-ph-a) 6px); }
.psz-player-id { flex: 1; min-width: 0; }
.psz-player-name { font: 700 13.5px var(--ut-font-display); color: var(--ut-ink); }
.psz-player-meta { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); }
.psz-player-rating { font: 800 13px var(--ut-font-display); color: #fff; background: var(--ut-navy); border-radius: 7px; padding: 3px 7px; }
.psz-player-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.psz-chip { font: 600 9.5px var(--ut-font-body); color: var(--ut-secondary); background: var(--ut-track); border-radius: 5px; padding: 2px 6px; }
.psz-chip.is-goal { color: var(--ut-success); background: var(--ut-success-tint); }
.psz-chip.is-assist { color: var(--ut-primary); background: #EAF2FD; }

/* ============================================================================
   4e — POST STATISTIKE (post-match-extras): market results + grades + verdict
   ============================================================================ */
.pme-stats-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.pme-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: flex-end; }
.pme-legend-item { display: inline-flex; align-items: center; gap: 5px; font: 500 10.5px var(--ut-font-body); color: var(--ut-muted); }
.pme-legend-sq { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.pme-legend-sq.is-home { background: var(--ut-navy); }
.pme-legend-sq.is-away { background: var(--ut-navy-soft); }
.pme-recap { display: flex; flex-direction: column; }
.pme-recap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ut-divider); font: 500 12.5px var(--ut-font-body); color: var(--ut-body); }
.pme-recap-row:last-child { border-bottom: none; }
.pme-score { font: 800 14px var(--ut-font-display); color: var(--ut-ink); margin-left: 6px; }
.pme-cards { display: inline-flex; align-items: center; gap: 4px; }
.pme-cardsq { display: inline-block; width: 9px; height: 12px; border-radius: 2px; }
.pme-cardsq.is-y { background: var(--ut-card-yellow); }
.pme-cardsq.is-r { background: var(--ut-danger); }
/* Grade rows (design 4e): bordered pill rows with a round tinted verdict badge. */
.pme-grades { display: flex; flex-direction: column; gap: 6px; }
.pme-grade-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ut-border); border-radius: 10px; padding: 9px 12px; }
.pme-grade-badge { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 11px var(--ut-font-body); flex-shrink: 0; }
.pme-grade-badge.is-yes { color: var(--ut-success); background: var(--ut-success-tint); }
.pme-grade-badge.is-no { color: var(--ut-danger); background: var(--ut-danger-tint); }
.pme-grade-badge .ut-ico { width: 11px; height: 11px; flex-shrink: 0; }
.pme-grade-badge.is-yes .ut-ico { stroke: var(--ut-success); }
.pme-grade-badge.is-no .ut-ico { stroke: var(--ut-danger); }
.pme-recap-res { display: inline-flex; align-items: center; gap: 5px; }
.pme-recap-res.is-hit { color: var(--ut-success); }
.pme-recap-res.is-miss { color: var(--ut-danger); }
.pme-recap-res .ut-ico { width: 13px; height: 13px; flex-shrink: 0; }
.pme-recap-res.is-hit .ut-ico { stroke: var(--ut-success); }
.pme-recap-res.is-miss .ut-ico { stroke: var(--ut-danger); }
.pme-grade-label { flex: 1; min-width: 0; font: 500 12.5px var(--ut-font-body); color: var(--ut-ink); }
.pme-grade-val { font: 600 12px var(--ut-font-body); color: var(--ut-secondary); }
/* Empty stat row (design 4e: "Crveni kartoni –") — both tracks neutral grey. */
.live-stat-bar-home.is-empty, .live-stat-bar-away.is-empty { background: var(--ut-bar-empty); }
/* Verdict card (design 4e): bordered card + round tinted badge. */
.post-verdict-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--ut-border); border-radius: 14px; padding: 14px 16px; }
.post-verdict-icon { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 15px var(--ut-font-body); flex-shrink: 0; color: var(--ut-secondary); background: var(--ut-track); }
.post-verdict-card.is-green .post-verdict-icon { color: var(--ut-success); background: var(--ut-success-tint); }
.post-verdict-card.is-amber .post-verdict-icon { color: var(--ut-warning); background: var(--ut-warning-tint); }
.post-verdict-title { font: 700 13.5px var(--ut-font-display); color: var(--ut-ink); }
.post-verdict-detail { font: 500 12px var(--ut-font-body); color: var(--ut-muted); margin-top: 2px; }

/* ============================================================================
   4f — IGRAČI (player-ratings): player cards + expander
   ============================================================================ */
.pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.pr-grid--rest { margin-top: 10px; }
.pr-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pr-col-label { font: 600 10.5px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.pr-card { border: 1px solid var(--ut-border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.pr-card.is-top { background: var(--ut-surface-alt); }
.pr-card-top { display: flex; align-items: center; gap: 8px; }
.pr-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--ut-track); }
.pr-avatar--ph { background: repeating-linear-gradient(45deg, var(--ut-ph-b), var(--ut-ph-b) 3px, var(--ut-ph-a) 3px, var(--ut-ph-a) 6px); }
.pr-card-id { flex: 1; min-width: 0; }
.pr-card-name { font: 700 12px var(--ut-font-display); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-card-meta { font: 500 9.5px var(--ut-font-body); color: var(--ut-muted-2); }
.pr-rating { font: 800 13px var(--ut-font-display); color: var(--ut-ink); background: var(--ut-track); border-radius: 7px; padding: 3px 7px; flex-shrink: 0; }
.pr-rating.is-top { color: #fff; background: var(--ut-navy); }
.pr-card-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.pr-chip { display: inline-flex; align-items: center; gap: 3px; font: 600 9.5px var(--ut-font-body); color: var(--ut-secondary); background: var(--ut-track); border-radius: 5px; padding: 2px 5px; }
.pr-chip.is-goal { color: var(--ut-success); background: var(--ut-success-tint); }
.pr-chip.is-assist { color: var(--ut-primary); background: #EAF2FD; }
.pr-yc { width: 6px; height: 9px; border-radius: 1.5px; background: var(--ut-card-yellow); display: inline-block; }
/* Load-more: extras hidden while collapsed; button toggles + chevron flips. */
.pr-grid--collapsed .pr-card.is-extra { display: none; }
button.pr-more-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; border: 1px solid var(--ut-border); border-radius: 12px; padding: 11px 14px; background: transparent; cursor: pointer; font: 600 12.5px var(--ut-font-body); color: var(--ut-ink); }
.pr-more-chev { width: 15px; height: 15px; color: var(--ut-secondary); transition: transform 0.2s; flex-shrink: 0; }
button.pr-more-btn.is-open .pr-more-chev { transform: rotate(180deg); }

/* ============================================================================
   4c/4g — TOK UTAKMICE / DOGAĐAJI (match-data timeline); also the live events JS
   ============================================================================ */
/* Live "Uživo" head (design 4a): heading + green live dot on the left, the
   Izmjene/Kartoni checkbox filters on the right. */
.mtl-live-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.mtl-live-head h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ut-success); animation: ut-pulse 1.6s ease-in-out infinite; }
.mtl-filters { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mtl-filter { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font: 600 11.5px var(--ut-font-body); color: var(--ut-ink); }
.mtl-filter-cb { position: absolute; width: 0; height: 0; opacity: 0; }
.mtl-filter-box { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--ut-border-2); background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mtl-filter-cb:checked + .mtl-filter-box { background: var(--ut-navy); border-color: var(--ut-navy); }
.mtl-filter-cb:checked + .mtl-filter-box::after { content: "✓"; color: #FFFFFF; font: 700 10px var(--ut-font-body); line-height: 1; }
.mtl-filter-cb:focus-visible + .mtl-filter-box { outline: 2px solid var(--ut-primary); outline-offset: 1px; }
/* Filter toggles (design 4a): hide subst / card rows when unchecked. */
.mtl-section.hide-subst .mtl-row.is-subst { display: none; }
.mtl-section.hide-card  .mtl-row.is-card  { display: none; }
.mtl { display: flex; flex-direction: column; gap: 14px; }
.mtl-group { display: flex; flex-direction: column; }
.mtl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ut-surface-alt); border-radius: 8px; padding: 7px 12px; margin-bottom: 4px; }
.mtl-head-label { font: 600 10.5px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.08em; }
.mtl-head-score { font: 800 12px var(--ut-font-display); color: var(--ut-ink); }
/* Flat live/events rows (4a/4c): flex + gap like the handoff. The player grows
   and the team shrinks/truncates first, so a long team name never squeezes the
   player into an ugly wrap — rows stay single-line. */
.mtl-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ut-divider); }
.mtl-row:not(.mtl-row--c) .mtl-player,
.mtl-row:not(.mtl-row--c) .mtl-detail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtl-row:last-child { border-bottom: none; }
.mtl-min { flex: none; width: 30px; font: 700 12px var(--ut-font-body); color: var(--ut-ink); }
.mtl-icon { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font: 700 9px var(--ut-font-body); border-radius: 4px; }
.mtl-icon.is-goal { background: var(--ut-navy); width: 15px; height: 15px; border-radius: 50%; }
.mtl-icon.is-goal .mtl-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; display: inline-block; }
.mtl-icon.is-owngoal { background: var(--ut-danger); width: 15px; height: 15px; border-radius: 50%; }
.mtl-icon.is-owngoal .mtl-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; display: inline-block; }
.mtl-icon.is-yellow { background: var(--ut-card-yellow); width: 11px; height: 14px; border-radius: 2px; }
.mtl-icon.is-red { background: var(--ut-danger); width: 11px; height: 14px; border-radius: 2px; }
.mtl-icon.is-sub { background: var(--ut-track); color: var(--ut-secondary); border-radius: 50%; width: 15px; height: 15px; font-size: 9px; }
.mtl-icon.is-miss { color: var(--ut-muted-2); font-size: 13px; }
.mtl-icon.is-var { background: var(--ut-pill-bg); color: var(--ut-secondary); font: 700 7px var(--ut-font-body); width: auto; padding: 2px 4px; }
.mtl-icon.is-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ut-faint-2); }
.mtl-player { flex: 1 1 auto; font: 600 13px var(--ut-font-body); color: var(--ut-ink); min-width: 0; }
.mtl-player.is-goal { font-weight: 700; }
.mtl-detail { font: 500 12px var(--ut-font-body); color: var(--ut-muted); }
/* Događaji (4c): name on top, detail (assist / izmjena / razlog kartona) below. */
.mtl-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mtl-team { flex: 0 1 auto; max-width: 45%; font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); text-align: right; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Centered timeline (post 4g): minute axis in the middle, home left / away right. */
.mtl-row--c { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; padding: 8px 0; border-bottom: none; }
.mtl-c-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mtl-c-home { justify-content: flex-end; text-align: right; }
.mtl-c-away { justify-content: flex-start; text-align: left; }
.mtl-c-side .mtl-icon { flex-shrink: 0; }
.mtl-c-side .mtl-player { min-width: 0; }
.mtl-c-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mtl-row--c .mtl-min { min-width: 30px; text-align: center; }

/* ============================================================================
   4a/4b/4c — LIVE (signals + momentum; live-stat & mtl already styled above)
   ============================================================================ */
#live-signals-list { display: flex; flex-direction: column; margin-top: 6px; }
.live-signal-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ut-divider); }
#live-signals-list .live-signal-row:last-child { border-bottom: none; }
.live-signal-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--ut-warning); }
.live-signal-dot.is-blue { background: var(--ut-primary); }
.live-signal-dot.is-amber { background: var(--ut-warning); }
.live-signal-text { font: 500 14px var(--ut-font-body); color: var(--ut-body); line-height: 1.45; }
.live-signal-text strong { font-weight: 700; color: var(--ut-ink); }
/* momentum — vertical mirror bar chart (home up navy, away down slate) */
/* Live section headings use the shared .ut-title component (like every other
   section); .mom-head only adds the baseline layout for its inline sub-label. */
.mom-head { display: flex; align-items: baseline; gap: 8px; }
.mom-sub { font: 400 11.5px var(--ut-font-body); color: var(--ut-muted-2); letter-spacing: 0; text-transform: none; }
.mom-card { margin-top: 10px; }
.mom-team-top, .mom-team-bot { font: 600 12px var(--ut-font-body); color: var(--ut-secondary); }
.mom-bars { display: flex; align-items: flex-end; gap: 4px; height: 44px; }
.mom-bars-top { align-items: flex-end; }
.mom-bars-bottom { align-items: flex-start; margin-top: 2px; }
.mom-bar { flex: 1; background: var(--ut-navy); border-radius: 3px 3px 0 0; min-height: 3px; }
.mom-bars-bottom .mom-bar { background: var(--ut-navy-soft); border-radius: 0 0 3px 3px; }
.mom-bar.is-empty { background: var(--ut-bar-empty); }
.mom-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.mom-timeline { display: flex; gap: 4px; }
.mom-timeline span { font: 500 9px var(--ut-font-body); color: var(--ut-muted-2); }
/* live match-timeline filter chips (Izmjene/Kartoni toggles) */

/* ============================================================================
   DESKTOP LAYER — screens 3a (pre) / 4a (live) / 4b (post)
   ----------------------------------------------------------------------------
   Mobile ships a single tab-scrolled column; desktop reflows into a 2-col
   main+rail grid under a full-width nav + header band. The .ut-col-* wrappers
   are display:contents below the breakpoint so the section DOM order stays
   byte-identical to the shipped mobile page; where the desktop main/rail split
   reorders a state (live, post) a per-id `order` inside the max-width query
   restores the exact mobile sequence. Page background flips to white and the
   full-bleed mobile bands become bordered cards.
   ============================================================================ */

/* Column wrappers vanish on mobile — sections flow straight into .ut-sections.
   Same trick for the live Momentum+Uživo pairing (desktop 4a). */
.ut-col-main, .ut-col-rail, .ut-live-duo { display: contents; }

/* Desktop-only chrome: the horizontal nav menu + auth buttons only exist on the
   wide bar (mobile keeps the compact logo + bell + avatar). */
.ut-devbar-menu, .ut-devbar-auth { display: none; }

/* Desktop-only section-group headings (mock 3a: "Golovi", "Specijali" …). */
.ut-group-title { display: none; }

/* Mobile keeps the shipped section order regardless of the desktop grouping. */
@media (max-width: 1023px) {
  #live-mec     { order: 1; }
  #live-stats   { order: 2; }
  #live-dogadjaji { order: 3; }
  #post-sazetak { order: 1; }
  #post-stats   { order: 2; }
  #post-igraci  { order: 3; }
  #post-detalji { order: 4; }
}

@media (min-width: 1024px) {
  /* ---- shell / page surface ---- */
  .ut-shell { max-width: 1360px; background: #FFFFFF; }
  .ut-page  { background: #FFFFFF; }
  /* The match page is a full white page (spec: bg #FFFFFF), not the kl-shell
     grey "card on canvas" — override global.css body:has(.kl-appbar) so no grey
     shows beside/below the 1360 content on wide screens. Mobile body is already
     white; the mobile .ut-page keeps its own grey card-canvas look. */
  body:has(.ut-page) { background: #FFFFFF; }

  /* ---- top nav (dev-chrome facsimile of the 3a/4a/4b bar) ---- */
  .ut-devbar { padding: 0 40px; height: 64px; gap: 36px; }
  .ut-devbar-mark { font-size: 20px; }
  .ut-devbar-menu { display: flex; align-items: stretch; gap: 26px; flex: 1; }
  .ut-devbar-link { display: flex; align-items: center; font: 600 13px var(--ut-font-body); color: var(--ut-secondary); }
  .ut-devbar-link.is-active { font-weight: 700; color: var(--ut-ink); box-shadow: inset 0 -2px 0 var(--ut-ink); }
  .ut-devbar-actions { gap: 10px; }
  .ut-devbar-auth { display: inline-flex; align-items: center; font: 700 12.5px var(--ut-font-body); border-radius: var(--ut-r-btn); padding: 8px 18px; }
  .ut-devbar-auth.is-ghost { color: var(--ut-ink); border: 1px solid var(--ut-border-2); }
  .ut-devbar-auth.is-solid { color: #FFFFFF; background: var(--ut-primary); }
  .ut-devbar-ico, .ut-devbar-avatar { display: none; }
  .ut-devnav { display: none; }                 /* mobile bottom nav off */

  /* ---- centered scoreboard header, all states (screens 3a/4a/4b) ---- */
  .ut-mh { padding: 22px 40px 20px; background: var(--ut-surface-alt); border-bottom: 1px solid var(--ut-hairline); }
  .ut-mh-nav { justify-content: center; }        /* desktop: no back/share, just league */
  .ut-mh-iconbtn { display: none; }              /* desktop uses the top nav for those */
  .ut-mh-post-meta { font-size: 12px; }
  .ut-mh-scoreboard { max-width: 640px; margin: 12px auto 0; gap: 24px; }
  .ut-mh-sb-team { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
  /* Both teams hug the score for symmetric name→score gaps. The home column is
     row-reverse (crest sits inside, next to the score); in a reversed main axis
     the score side IS the main-start, so it packs with flex-START — flex-end
     would push the name to the far outer edge (the old asymmetry bug). */
  .ut-mh-scoreboard > .ut-mh-sb-team:first-child { flex-direction: row-reverse; justify-content: flex-start; }
  .ut-mh-scoreboard > .ut-mh-sb-team:last-child  { justify-content: flex-start; }
  .ut-mh-sb-crest { width: 42px; height: 42px; }
  .ut-mh-sb-name { font-size: 20px; font-weight: 800; }
  .ut-mh-sb-goals { font-size: 40px; }
  .ut-mh-sb-kicktime { font-size: 34px; }
  /* Form pills drop to their own line UNDER the name, aligned to the same
     (score-facing) edge as the name — home right, away left — not centred. */
  .ut-mh-scoreboard .stats_wld { flex-basis: 100%; margin-top: 0; }
  .ut-mh-scoreboard > .ut-mh-sb-team:first-child .stats_wld { justify-content: flex-end; }
  .ut-mh-scoreboard > .ut-mh-sb-team:last-child  .stats_wld { justify-content: flex-start; }
  /* No section-nav tabs on desktop (owner 2026-07-31): every section renders at
     once in the 2-column grid, and the group titles ("Golovi", "Specijali"…)
     label each block, so the tab row is redundant. All three states hide it. */
  #ut-tabs-container { display: none; }

  /* ---- 2-column content grid ---- */
  .ut-sections { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px;
                 align-items: start; background: #FFFFFF; padding: 28px 40px 40px; }
  .ut-col-main { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
  .ut-col-rail { display: flex; flex-direction: column; gap: 20px; }
  .ut-col-main > .ut-section, .ut-col-rail > .ut-section { order: 0; scroll-margin-top: 96px; gap: 14px; }

  /* full-bleed mobile bands → bordered cards on the white desktop surface */
  .ut-band { border: 1px solid var(--ut-border); border-radius: var(--ut-r-lg); padding: 18px 20px; }
  /* Kvote is its own section (not a .ut-band) — give it the same bordered-card
     frame on desktop (matches tip-details' "Najbolje kvote" rail card). */
  .ut-kvote { border: 1px solid var(--ut-border); border-radius: var(--ut-r-lg); }

  /* section-group headings */
  .ut-group-title { display: block; font: 800 18px var(--ut-font-display); color: var(--ut-ink); }

  /* "Sve statistike i prognoze →" / "Svi igrači i ocjene →" jump to another TAB;
     desktop shows every section at once (stats already sit in the rail), so the
     jump links are redundant here. */
  .psz-link { display: none; }

  /* Owner preference: the main column stays single-column (no 2-up card grids —
     they left too much empty space). Every section's cards just stack full-width;
     the rail carries the secondary content. */

  /* live main column (screen 4a): Signali → Momentum → Uživo feed, stacked; the
     redundant centered-timeline section (mobile Događaji tab) is folded away
     since the compact feed already carries the live events. .ut-live-duo stays
     display:contents (from the base) so momentum + feed stack in live-mec. */
  #live-mec { gap: 24px; }
  #live-dogadjaji { display: none; }
}

/* ============================================================================
   PLAYER DETAILS — bottom-sheet drawer (mobile) → centered popup (desktop)
   ----------------------------------------------------------------------------
   Opens from a post-match player card. The match line is pre-rendered inline
   (instant); bio + season form arrive from ajax/player-profile.php. Scoped under
   .ut-page like everything else, so the reset + tokens apply.
   ============================================================================ */
/* ── Player drawer (design 13a): identity · role-dependent highlight strip ·
   grouped stat cards. Bottom sheet on mobile, centered popup on desktop.
   The league-table drawer (#ut-tbl) reuses the shell + handle row + body. ── */
.ut-pd { position: fixed; inset: 0; z-index: 200; display: flex; }
.ut-pd[hidden] { display: none; }
.ut-pd-backdrop { position: absolute; inset: 0; background: rgba(20, 23, 28, 0.45); opacity: 0; transition: opacity 0.24s cubic-bezier(0.32, 0.72, 0, 1); }
.ut-pd.is-open .ut-pd-backdrop { opacity: 1; }
.ut-pd-panel {
  position: relative; margin-top: auto; width: 100%;
  background: #FFFFFF; border-radius: 22px 22px 0 0;
  max-height: calc(100vh - 52px); display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -8px 30px rgba(20, 23, 28, 0.16);
}
.ut-pd.is-open .ut-pd-panel { transform: translateY(0); }

/* handle row (grab handle centred, close absolute right — out of the identity flow) */
.ut-pd-handle-row { position: relative; flex-shrink: 0; display: flex; justify-content: center; padding: 10px 0 2px; }
.ut-pd-handle { width: 38px; height: 4px; border-radius: 999px; background: var(--ut-border-2); }
.ut-pd-close { position: absolute; top: 6px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--ut-pill-bg); color: var(--ut-secondary); display: flex; align-items: center; justify-content: center; }

/* identity block */
.ut-pd-id { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 12px 20px 14px; }
.ut-pd-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--ut-track); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; flex-shrink: 0; }
.ut-pd-avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ut-pd-avatar-ph { width: 34px; height: 34px; color: var(--ut-faint-2); margin-bottom: -2px; }
.ut-pd-id-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ut-pd-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ut-pd-name { font: 800 19px var(--ut-font-display); color: var(--ut-ink); letter-spacing: -0.01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; outline: none; }
.ut-pd-num { font: 700 10px var(--ut-font-body); color: var(--ut-secondary); background: var(--ut-pill-bg); border-radius: 5px; padding: 2px 5px; flex-shrink: 0; }
.ut-pd-num[hidden] { display: none; }
.ut-pd-meta1 { font: 500 11.5px var(--ut-font-body); color: var(--ut-secondary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ut-pd-meta2 { font: 400 11px var(--ut-font-body); color: var(--ut-muted-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ut-pd-meta2:empty { display: none; }
.ut-pd-rating { flex-shrink: 0; width: 54px; height: 54px; border-radius: 14px; background: var(--ut-navy); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ut-pd-rating-val { font: 800 19px var(--ut-font-display); color: #FFFFFF; line-height: 1; }
.ut-pd-rating-lbl { font: 600 8px var(--ut-font-body); color: #7F93AC; letter-spacing: 0.08em; margin-top: 3px; }

/* scroll region (strip + groups) */
.ut-pd-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }

/* highlight strip */
.ut-pd-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ut-border); border-radius: 14px; margin: 0 20px; overflow: hidden; }
.ut-pd-strip-cell { padding: 11px 0; text-align: center; }
.ut-pd-strip-cell + .ut-pd-strip-cell { border-left: 1px solid var(--ut-hairline); }
.ut-pd-strip-val { font: 800 16px var(--ut-font-display); color: var(--ut-ink); }
.ut-pd-strip-val.is-green { color: var(--ut-success); }
.ut-pd-strip-lbl { font: 600 8.5px var(--ut-font-body); color: var(--ut-muted-2); letter-spacing: 0.06em; margin-top: 2px; }

/* body / stat groups (label sits OUTSIDE the card) */
.ut-pd-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px 20px; }
.ut-pd-dnp { font: 500 12.5px var(--ut-font-body); color: var(--ut-secondary); }
.ut-pd-grp { display: flex; flex-direction: column; gap: 7px; }
.ut-pd-glabel { font: 600 9.5px var(--ut-font-body); color: var(--ut-muted-2); letter-spacing: 0.1em; }
.ut-pd-card { border: 1px solid var(--ut-border); border-radius: 14px; overflow: hidden; }
.ut-pd-card--pad { padding: 12px; }

/* count grid (2-up) */
.ut-pd-cg { display: grid; grid-template-columns: 1fr 1fr; }
.ut-pd-cg-cell { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 12px; }
.ut-pd-cg-cell.is-bb { border-bottom: 1px solid var(--ut-divider); }
.ut-pd-cg-cell.is-bl { border-left: 1px solid var(--ut-divider); }
.ut-pd-cg-cell.is-span2 { grid-column: 1 / -1; }
.ut-pd-cg-lbl { font: 500 12px var(--ut-font-body); color: var(--ut-secondary); }
.ut-pd-cg-val { font: 800 14px var(--ut-font-display); color: var(--ut-ink); }
.ut-pd-cg-val span { font-size: 11px; font-weight: 500; color: var(--ut-muted-2); margin-left: 1px; }

/* ratio row + bar (only stats with a denominator) */
.ut-pd-ratio--inset { padding: 10px 12px 12px; }
.ut-pd-ratio-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.ut-pd-bar { height: 6px; border-radius: 999px; background: var(--ut-track); overflow: hidden; }
.ut-pd-bar-fill { height: 100%; border-radius: 999px; background: var(--ut-navy); }

/* season summary row */
.ut-pd-season-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; }
.ut-pd-sr-badge { width: 26px; height: 26px; border-radius: 8px; background: var(--ut-track); overflow: hidden; flex-shrink: 0; }
.ut-pd-sr-badge img { width: 100%; height: 100%; object-fit: contain; }
.ut-pd-sr-id { flex: 1; min-width: 0; }
.ut-pd-sr-name { font: 700 12.5px var(--ut-font-display); color: var(--ut-ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ut-pd-sr-sub { font: 400 10.5px var(--ut-font-body); color: var(--ut-muted-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ut-pd-sr-rating { font: 800 14px var(--ut-font-display); color: var(--ut-ink); background: var(--ut-track); border-radius: 7px; padding: 4px 8px; flex-shrink: 0; }

/* league-table drawer title (reuses .ut-pd shell) */
.ut-pd-tbl-head { flex-shrink: 0; padding: 2px 20px 12px; }

/* Desktop: centered popup instead of the bottom sheet. */
@media (min-width: 1024px) {
  .ut-pd { align-items: center; justify-content: center; }
  .ut-pd-panel {
    margin: 0; width: 460px; max-width: calc(100vw - 48px); max-height: 84vh;
    border-radius: 18px;
    transform: translateY(12px) scale(0.98); opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
    box-shadow: 0 24px 60px rgba(10, 14, 20, 0.28);
  }
  .ut-pd.is-open .ut-pd-panel { transform: none; opacity: 1; }
}

/* ── Tipovi naših tipstera (IA-2026 cross-link block) ─────────────────────── */
/* Tipovi naših tipstera (IA cross-link) — page design language: a .ut-band card
   with the .ut-title heading, bordered tipster rows (like .psz-player), the pick
   + odds as muted meta, a .ut-pill won/lost status, and a chevron. Whole row
   links to the tip's /analiza page. */
.ut-tips-list { display: flex; flex-direction: column; gap: 8px; }
.ut-tips-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ut-border); border-radius: 12px; background: #FFFFFF; text-decoration: none; }
.ut-tips-row:active { background: var(--ut-pill-bg); }
.ut-tips-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--ut-track); }
.ut-tips-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ut-tips-name { font: 700 13.5px var(--ut-font-display); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-tips-pick { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-tips-chev { flex-shrink: 0; font: 700 16px var(--ut-font-body); color: var(--ut-faint-2); }
.ut-tips-cta { margin-top: 4px; font: 700 13px var(--ut-font-body); color: #FFFFFF; background: var(--ut-primary); border-radius: var(--ut-r-btn); padding: 9px 16px; text-decoration: none; }
.ut-tips-all { display: inline-flex; align-items: center; font: 600 13px var(--ut-font-body); color: var(--ut-primary); text-decoration: none; }

/* ── Page-level scope toggle: "Sve takmičenje" vs "Ovo takmičenje" ─────────
   Shared across the pre-match tabs (Forma, Golovi). The control (includes/
   bc-scope.php) sets data-scope on the .ut-sections ancestor; that swaps every
   .ut-scope-all / .ut-scope-comp block on the page. Default (no attribute / no
   JS) = all competitions. */
.ut-scope-band { padding: 12px 16px; }
.ut-scope-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.ut-scope-title { font: 600 14px var(--ut-font-display); color: var(--ut-muted-2); flex-shrink: 0; }
.ut-scope-seg { display: inline-flex; gap: 3px; min-width: 0; background: var(--ut-pill-bg); border-radius: 8px; padding: 3px; }
/* Selector qualified with the parent (0,2,0) so it beats `.ut-page button { font: inherit }`
   (0,1,1), which otherwise forces these buttons to the inherited 16px. */
.ut-scope-seg .ut-scope-seg-btn { font: 600 14px var(--ut-font-body); color: var(--ut-muted); text-align: center; padding: 5px 12px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.ut-scope-seg .ut-scope-seg-btn.is-active { background: #FFFFFF; box-shadow: 0 1px 3px rgba(20,23,28,0.1); color: var(--ut-ink); font-weight: 700; }
.ut-scope-seg .ut-scope-seg-btn:focus-visible { outline: 2px solid var(--ut-primary); outline-offset: 1px; }

/* Content swap — default: all shown, comp hidden. data-scope="comp" inverts it. */
.ut-scope-comp { display: none; }
.ut-sections[data-scope="comp"] .ut-scope-all { display: none; }
.ut-sections[data-scope="comp"] .ut-scope-comp { display: block; }