:root{
    --navy:#14315C; --navy-deep:#0B1E3C; --navy-soft:#1D4178;
    --gold:#D8A621; --gold-light:#F0D67E; --gold-soft:#FBF3DC;
    --paper:#F2F4F8; --card:#FFFFFF; --ink:#19233A; --muted:#67718A;
    --line:#E4E8F0; --green:#2E9E5B; --blue:#2D6FD2; --red:#C9352E;
    --radius:16px;
    --shadow:0 1px 3px rgba(11,30,60,.08), 0 6px 18px rgba(11,30,60,.05);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    font-family:'Saira Condensed',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    background:var(--paper);color:var(--ink);
    padding-bottom:86px; /* prostor za donju navigaciju */
    min-height:100vh;overscroll-behavior-y:none;
  }
  .sahovnica{height:6px;background:repeating-linear-gradient(90deg,#C9352E 0 7px,#fff 7px 14px)}

  /* ---------- app bar ---------- */
  .appbar{
    position:sticky;top:0;z-index:30;
    background:rgba(11,30,60,.96);backdrop-filter:blur(8px);
    color:#fff;padding:10px 14px;
    display:flex;align-items:center;gap:10px;
    box-shadow:0 2px 12px rgba(11,30,60,.3);
  }
  .appbar img{width:34px;height:34px;border-radius:50%;flex:none;background:#fff;object-fit:cover}
  .appbar .t{flex:1;min-width:0}
  .appbar .t b{display:block;font-size:13.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .appbar .t span{display:none}
  .topnav{display:none;gap:2px}
  .topnav button{
    appearance:none;border:0;background:transparent;color:#A9B6CC;font:inherit;
    font-weight:800;font-size:13px;letter-spacing:.05em;padding:8px 14px;border-radius:999px;cursor:pointer;
  }
  .topnav button[aria-selected="true"]{background:var(--gold);color:var(--navy-deep)}
  .topnav button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

  main{max-width:700px;margin:0 auto;padding:14px 12px}

  .banner{
    font-size:12px;color:var(--muted);text-align:center;margin-bottom:12px;
    display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  }
  .ver{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.05em;margin-left:4px}
  .dot-live{width:8px;height:8px;border-radius:50%;background:var(--green)}
  .dot-demo{width:8px;height:8px;border-radius:50%;background:var(--gold)}
  .banner button{
    appearance:none;border:1px solid var(--line);background:#fff;color:var(--navy);
    font:inherit;font-size:11.5px;font-weight:800;padding:4px 12px;border-radius:999px;cursor:pointer;
  }
  .loading{text-align:center;color:var(--muted);padding:64px 0;font-size:13px;font-weight:800}
  .loading-spinner{width:34px;height:34px;margin:0 auto 13px;border:3px solid #D9DFE9;border-top-color:var(--navy);border-radius:50%;animation:spin .8s linear infinite}
  .loading small{display:block;margin-top:5px;font-size:10.5px;font-weight:600;color:#8B94A7}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* ---------- bottom nav (mobitel) ---------- */
  .bottomnav{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    display:flex;justify-content:space-around;
    padding:6px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .bottomnav button{
    appearance:none;border:0;background:none;cursor:pointer;font:inherit;
    display:flex;flex-direction:column;align-items:center;gap:3px;
    color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.06em;
    padding:5px 12px;border-radius:12px;min-width:64px;
  }
  .bottomnav button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .bottomnav button[aria-selected="true"]{color:var(--navy)}
  .bottomnav button[aria-selected="true"]::after{
    content:"";width:18px;height:3px;border-radius:3px;background:var(--gold);margin-top:1px;
  }
  .bottomnav button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

  /* ---------- POČETNA ---------- */
  .hero{
    background:
      radial-gradient(120% 90% at 50% -10%, var(--navy-soft) 0%, var(--navy) 45%, var(--navy-deep) 100%);
    border-radius:20px;color:#fff;text-align:center;
    padding:30px 18px 26px;position:relative;overflow:hidden;
    box-shadow:0 10px 30px rgba(11,30,60,.35);
  }
  .hero::before{ /* suptilna šahovnica u pozadini */
    content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
    background:
      repeating-conic-gradient(#fff 0% 25%, transparent 0% 50%) 0 0/44px 44px;
  }
  .hero img{
    width:148px;height:148px;border-radius:50%;object-fit:cover;
    box-shadow:0 0 0 5px rgba(216,166,33,.9), 0 0 50px rgba(216,166,33,.45), 0 14px 30px rgba(0,0,0,.45);
    margin-bottom:16px;position:relative;
  }
  .hero h2{font-size:21px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
  .hero .motto{font-size:13px;color:#C9D4E6;margin-top:7px;letter-spacing:.02em}
  .hero .season-pill{
    display:inline-block;margin-top:14px;background:var(--gold);color:var(--navy-deep);
    font-weight:900;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
    padding:6px 16px;border-radius:999px;
  }

  .home-grid{display:grid;gap:12px;margin-top:14px}
  .hcard{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .hcard .hd{
    display:flex;align-items:center;gap:8px;padding:11px 16px 0;
    font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  }
  .hcard .hd .ico{font-size:14px}
  .hcard .bd{padding:12px 16px 14px}

  .next-vs{display:flex;align-items:center;gap:10px;margin-top:2px}
  .next-vs .team{flex:1;font-weight:800;font-size:15.5px;line-height:1.25}
  .next-vs .team.away{text-align:right}
  .next-vs .at{flex:none;font-weight:900;font-size:12px;color:var(--gold);background:var(--navy);border-radius:8px;padding:6px 10px;letter-spacing:.1em}
  .next-meta{font-size:12.5px;color:var(--muted);margin-top:8px}
  .countdown{display:flex;gap:8px;margin-top:12px}
  .cd-box{flex:1;background:var(--navy-deep);border-radius:12px;color:#fff;text-align:center;padding:9px 4px}
  .cd-box b{display:block;font-size:21px;font-weight:900;font-variant-numeric:tabular-nums}
  .cd-box i{font-style:normal;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light)}

  .mini-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
  .mini-row:last-child{border-bottom:0}
  .mini-rank{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12.5px;background:var(--paper);color:var(--navy)}
  .mini-row:first-child .mini-rank{background:var(--gold);color:var(--navy-deep)}
  .mini-name{flex:1;font-weight:800;font-size:14px;letter-spacing:.03em}
  .mini-pts{font-weight:900;color:var(--navy);font-size:15px}
  .mini-pts small{font-weight:700;color:var(--muted);font-size:10px;letter-spacing:.06em}

  .last-line{display:flex;align-items:center;gap:10px}
  .last-line .team{flex:1;font-weight:800;font-size:14.5px}
  .last-line .team.away{text-align:right}
  .last-line .score{flex:none;font-weight:900;font-size:18px;color:var(--navy);background:var(--paper);border-radius:10px;padding:5px 12px}
  .last-meta{font-size:12px;color:var(--muted);margin-top:7px}

  .cta-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
  .cta{
    appearance:none;border:0;cursor:pointer;font:inherit;border-radius:13px;
    padding:13px 10px;font-weight:900;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  }
  .cta.gold{background:var(--gold);color:var(--navy-deep)}
  .cta.navy{background:var(--navy);color:#fff}
  .cta:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
  .linklike{
    display:block;width:100%;appearance:none;border:0;background:none;cursor:pointer;font:inherit;
    color:var(--navy);font-weight:800;font-size:12.5px;padding:11px;text-align:center;border-top:1px solid var(--line);
  }

  /* ---------- TABLICA ---------- */
  .board{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
  .board-title{background:var(--navy);color:#fff;font-size:11.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;padding:12px 16px}
  /* zaglavlje stupaca — tablica se čita kao prava ligaška */
  .thead{display:flex;align-items:center;gap:12px;padding:8px 14px 7px;background:#F7F8FA;border-bottom:1px solid var(--line)}
  .thead .h-pos{width:26px;flex:none}
  .thead .h-name{flex:1;min-width:0}
  .thead .h-pts{width:52px;text-align:right;flex:none}
  .thead .h-sp{width:27px;flex:none}
  .thead span{font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .standing{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);position:relative}
  .standing:last-of-type{border-bottom:0}
  /* vodeći: zlatna okomita traka umjesto pastelne pozadine */
  .standing.leader::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
  .standing.leader{background:#FFFCF3}
  .rank{width:26px;flex:none;text-align:center;font-weight:900;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
  .rank-number,.rank-medal{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%}
  .rank-medal{font-size:20px;line-height:1}
  .rank-medal-p1{background:var(--gold-soft);box-shadow:0 0 0 2px #D8A62155}
  .standing.final-placement::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
  .standing.final-p1::before{background:var(--gold)}
  .standing.final-p2::before{background:#9AA7BA}
  .standing.final-p3::before{background:#C77B30}
  .standing.final-p4::before{background:var(--red)}
  .standing.final-p2 .rank-number{background:#EEF1F5;color:#59687A}
  .standing.final-p3 .rank-number{background:#F8EBDD;color:#92551F}
  .standing.final-p4 .rank-number{background:#FBE9E7;color:#A72C27}
  .standing.leader .rank{color:var(--gold);font-size:16px}
  .leader .rank{background:none;color:var(--navy)}
  .standing .who{flex:1;min-width:0}
  .standing .name{font-weight:800;font-size:14.5px;letter-spacing:.02em;color:var(--ink)}
  /* forma kao traka kvadratića — čita se kao form guide */
  .forma{display:flex;gap:3px;margin-top:6px}
  .forma span{width:14px;height:5px;border-radius:2px}
  .f-green{background:var(--green)}.f-yellow{background:#E8B519}.f-blue{background:var(--blue)}
  .f-red{background:var(--red)}.f-card{background:linear-gradient(135deg,#E8B519 0 45%,var(--red) 45% 100%);border-radius:2px;outline:1px solid #00000022}
  .pts{text-align:right;flex:none;width:52px}
  .pts .total{font-size:22px;font-weight:900;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .pts .lbl{display:none}
  .standing .more{appearance:none;border:0;background:none;color:#B9C0CC;cursor:pointer;font-size:13px;padding:6px;flex:none;width:27px}
  .standing .more:hover{color:var(--navy)}
  .stats-row{display:none;padding:0 14px 13px;border-bottom:1px solid var(--line);background:#FAFBFC}
  .stats-row.open{display:block}
  .stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border-radius:9px;overflow:hidden;border:1px solid var(--line)}
  .stat{background:#fff;padding:9px 4px;text-align:center}
  .stat b{display:block;font-size:15px;font-weight:900;color:var(--navy);font-variant-numeric:tabular-nums}
  .stat i{display:block;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:3px}
  .legend{font-size:11px;color:var(--muted);text-align:center;margin:12px 4px 18px;line-height:1.8}
  .legend span{white-space:nowrap;margin:0 5px}
  .legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:4px}
  table.fair{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
  table.fair th{background:#F7F8FA;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:9px 6px;text-align:center;border-bottom:1px solid var(--line)}
  table.fair th:first-child{text-align:left;padding-left:16px}
  table.fair td{padding:10px 6px;text-align:center;font-size:13px;font-weight:700;border-bottom:1px solid var(--line);color:var(--ink)}
  table.fair td:first-child{text-align:left;padding-left:16px;font-weight:800}
  table.fair tr:last-child td{border-bottom:0}

  /* ---------- UTAKMICE ---------- */
  .match{background:var(--card);border-radius:14px;padding:12px 14px;margin-bottom:8px;box-shadow:0 1px 2px rgba(20,49,92,.06);border:1px solid var(--line)}
  .match .top{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-bottom:9px}
  .kolo-badge{background:none;color:var(--navy);font-weight:900;font-size:10px;padding:0;border-radius:0;letter-spacing:.14em;text-transform:uppercase}
  .kolo-badge::after{content:"";display:inline-block;width:1px;height:9px;background:var(--line);margin:0 0 0 8px;vertical-align:-1px}
  .match .top .spacer{flex:1}
  .pill{font-size:9.5px;font-weight:900;letter-spacing:.09em;padding:3px 9px;border-radius:999px;text-transform:uppercase}
  .pill.done,.pill.ok{background:#E2F3E8;color:#1E7A43}
  .pill.wait{background:var(--paper);color:var(--muted)}
  .pill.late{background:#FBE9E7;color:var(--red)}
  .versus{display:flex;align-items:center;gap:10px}
  .versus .team{flex:1;font-weight:800;font-size:14.5px;line-height:1.3}
  .versus .team.away{text-align:right}
  .score{flex:none;min-width:62px;text-align:center;font-weight:900;font-size:20px;color:var(--navy);background:none;border-radius:0;padding:2px 6px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
  .score.empty{color:#C3CAD6;font-size:11px;font-weight:800;letter-spacing:.14em}
  .match .scorer{font-size:12.5px;color:var(--muted);margin-top:8px}
  .match .scorer b{color:var(--ink)}

  /* ---------- PRIJAVE ---------- */
  .chips{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 12px;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chip{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:800;padding:7px 15px;border-radius:999px;cursor:pointer;flex:none}
  .chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
  .pmatch{background:var(--card);border-radius:var(--radius);margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden}
  .pmatch-head{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--navy);color:#fff}
  .pmatch-head .kolo-badge{background:var(--gold);color:var(--navy-deep)}
  .pmatch-head .title{flex:1;font-weight:800;font-size:13.5px;line-height:1.3}
  .pmatch-head .real{flex:none;font-weight:900;font-size:15px;background:rgba(255,255,255,.14);padding:4px 10px;border-radius:8px;letter-spacing:.04em}
  .pmatch-head .real.tbd{font-size:9.5px;font-weight:800;letter-spacing:.12em;opacity:.75;text-transform:uppercase}
  .tips-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
  .tips-grid.single{grid-template-columns:1fr}
  .tipcard{border:1px solid var(--line);border-left:4px solid #C5CDD9;border-radius:10px;padding:9px 10px;display:flex;align-items:center;gap:9px;background:#fff;min-width:0}
  .tipcard .avatar{width:30px;height:30px;border-radius:50%;flex:none;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px}
  .tipcard .info{flex:1;min-width:0}
  .tipcard .pname{font-weight:900;font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
  .tipcard .ptip{font-weight:900;font-size:16px;color:var(--navy);line-height:1.2;font-variant-numeric:tabular-nums}
  .tipcard .pscorer{font-size:11px;color:var(--muted);line-height:1.45}
  .tipcard .pscorer.hit{color:var(--green);font-weight:800}
  .prediction-hit{display:inline-block;color:#075B2C;background:#DDF5E5;border:1px solid #8FD3A7;border-radius:999px;padding:1px 6px;font-weight:900;line-height:1.35;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}\n  .prediction-hit::before{content:"✓ ";color:#087A3C}
  .tipcard.hit-exact{border-left-color:var(--green);background:#F1FAF4}
  .tipcard.hit-outcome{border-left-color:var(--blue);background:#F2F7FE}
  .tipcard.hit-miss{border-left-color:var(--red);background:#FDF4F3}
  .tipcard .mark{flex:none;font-size:13px}
  .plegend{font-size:11px;color:var(--muted);text-align:center;margin:2px 4px 12px;line-height:1.8}
  .plegend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin:0 4px 0 10px}

  .empty-note{text-align:center;color:var(--muted);font-size:13.5px;padding:36px 12px}
  .empty-note:not(:empty){background:rgba(255,255,255,.64);border:1px dashed #CED5E1;border-radius:14px;line-height:1.55}
  footer{text-align:center;font-size:10.5px;color:var(--muted);padding:26px 16px 8px;letter-spacing:.1em;text-transform:uppercase}

  /* ---------- desktop ---------- */
  @media (min-width:860px){
    body{padding-bottom:30px}
    .bottomnav{display:none}
    .topnav{display:flex}
    main{max-width:760px;padding-top:20px}
    .home-grid{grid-template-columns:1fr 1fr}
    .home-grid .span2{grid-column:1/-1}
    .hero{padding:40px 20px 34px}
    .hero img{width:170px;height:170px}
    .hero h2{font-size:25px}
    .match:hover,.pmatch:hover,.hcard:hover{transform:translateY(-1px);transition:transform .15s ease}
  }
  @media (prefers-reduced-motion:no-preference){
    .match,.standing,.tipcard,.hcard,.hero{animation:pop .3s ease both}
    @keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .loading-spinner{animation-duration:1.8s}
  }
.late-note.susp{color:var(--red);font-weight:800}

  .rek-grid{display:grid;grid-template-columns:1fr;gap:10px}
  .rek-card{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:13px 14px;display:flex;align-items:center;gap:12px}
  .rek-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex:none;background:var(--paper)}
  .rek-body{flex:1;min-width:0}
  .rek-title{font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .rek-win{font-size:15px;font-weight:900;color:var(--navy);margin:2px 0 1px}
  .rek-desc{font-size:11.5px;color:var(--muted);line-height:1.4}
  .rek-card.gold .rek-ico{background:var(--gold-soft)}
  .rek-card.red .rek-ico{background:#FBE9E7}
  .rek-card.green .rek-ico{background:#EAF7EF}
  .bottomnav button{font-size:9px;letter-spacing:.02em}
  .bottomnav button span{display:block}

  /* --- KUMITJ NEWS --- */
  .news-tabs{display:flex;gap:0;background:#EDEFF3;padding:3px;border-radius:10px;margin:0 0 12px}
  .news-tabs button{flex:1;appearance:none;border:0;background:none;color:var(--muted);font:inherit;font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:7px 4px;border-radius:8px;cursor:pointer}
  .news-tabs button[aria-selected="true"]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(20,49,92,.12)}
  .news-sec{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
  .news-sec:first-of-type{margin-top:0;padding-top:0;border-top:0}
  .news-h{font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
  .news-p{font-size:12.5px;line-height:1.6;color:var(--ink);margin:0 0 10px}
  .news-sec.ured{background:#F7F8FA;border-radius:10px;padding:11px 12px;border-top:0;margin-top:14px}
  .news-sec.ured .news-h{color:var(--navy)}
  .news-sec.ured .news-p{margin-bottom:0;font-style:italic;color:var(--muted)}
  .prog-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:9px;overflow:hidden;border:1px solid var(--line)}
  .prog-row{display:flex;align-items:center;gap:9px;background:#fff;padding:9px 10px;font-size:12px}
  .prog-t{font-weight:900;color:var(--navy);font-variant-numeric:tabular-nums;flex:none}
  .prog-k{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex:none}
  .prog-m{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .prog-p{flex:none;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums}
  .osvrt-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:9px;overflow:hidden;border:1px solid var(--line)}
  .osvrt-row{display:flex;align-items:center;gap:9px;background:#fff;padding:9px 10px;font-size:12px}
  .ov-n{font-weight:900;width:72px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ov-t{flex:1;min-width:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ov-t i{font-style:normal;font-size:11px}
  .ov-p{flex:none;font-weight:900;font-variant-numeric:tabular-nums;color:#C3CAD6;width:22px;text-align:right}
  .ov-p.pos{color:var(--green)}

  /* --- KUMITJ KUP --- */
  .kup-draw{background:var(--navy-deep);color:#fff;border-radius:var(--radius);padding:20px 16px;text-align:center;box-shadow:var(--shadow);margin-bottom:14px}
  .kd-ico{font-size:32px;margin-bottom:8px}
  .kd-t{font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light)}
  .kd-d{font-size:12.5px;line-height:1.65;color:#C9D4E6;margin-top:7px}
  .bracket{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
  .bk-col{flex:1;min-width:170px}
  .bk-h{font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;text-align:center}
  .bk-tie{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:9px;box-shadow:0 1px 2px rgba(20,49,92,.05)}
  .bk-side{font-size:13px;font-weight:800;color:var(--ink);padding:3px 0;letter-spacing:.02em}
  .bk-side.win{color:var(--green)}
  .bk-side.win::after{content:" ✓";font-size:11px}
  .bk-score{text-align:center;font-size:15px;font-weight:900;color:var(--navy);font-variant-numeric:tabular-nums;padding:3px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:3px 0}
  .bk-score.empty{color:#C3CAD6;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
  .kup-win{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,var(--gold-soft),transparent);border-left:3px solid var(--gold);border-radius:10px;padding:12px 14px;margin-top:12px}
  .kw-ico{font-size:26px}
  .kw-l{font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#8a6a0e}
  .kw-n{font-size:17px;font-weight:900;color:var(--navy);letter-spacing:.02em}
  .kup-odds{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .ko-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}
  .ko-row:last-child{border-bottom:0}
  .ko-r{width:16px;font-weight:900;color:var(--muted);font-size:12px;flex:none}
  .ko-n{width:74px;font-weight:800;font-size:13px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ko-bar{flex:1;height:8px;background:var(--paper);border-radius:5px;overflow:hidden}
  .ko-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--navy),var(--gold))}
  .ko-p{width:34px;text-align:right;font-weight:900;font-size:12.5px;color:var(--navy);font-variant-numeric:tabular-nums;flex:none}

/* ---------- dodatni stilovi ---------- */
  .hero-ctas{display:flex;flex-direction:column;gap:10px;margin-top:20px;align-items:center}
  .hero-btn{
    appearance:none;border:0;cursor:pointer;font:inherit;
    background:var(--gold);color:var(--navy-deep);
    font-weight:900;font-size:15px;letter-spacing:.14em;text-transform:uppercase;
    padding:15px 34px;border-radius:999px;
    box-shadow:0 6px 18px rgba(216,166,33,.45);
  }
  .hero-btn:active{transform:scale(.98)}
  .hero-btn.ghost{background:transparent;color:#C9D4E6;box-shadow:none;border:1px solid rgba(255,255,255,.25);font-size:12px;padding:11px 26px}
  .hero-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

  .cdbar{background:var(--navy-deep);border-radius:var(--radius);color:#fff;padding:13px 14px;margin-bottom:12px;box-shadow:var(--shadow)}
  .cdbar .line{display:flex;align-items:center;gap:8px;font-size:12px;color:#C9D4E6;margin-bottom:9px;flex-wrap:wrap}
  .cdbar .line b{color:#fff;font-size:13px}
  .cdbar .countdown{margin-top:0}
  .cdbar .cd-box{background:rgba(255,255,255,.08)}

  .subtabs{display:flex;gap:0;margin-bottom:14px;background:#EDEFF3;padding:3px;border-radius:12px;overflow:hidden}
  .subtabs button{flex:1;appearance:none;border:0;background:none;color:var(--muted);font:inherit;font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:9px 4px;border-radius:9px;cursor:pointer;transition:background .18s ease,color .18s ease}
  .subtabs button[aria-selected="true"]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(20,49,92,.12)}
  .subtabs button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

  .flag{width:22px;height:15px;object-fit:cover;border-radius:3px;vertical-align:-2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
  .flag-e{font-size:16px;vertical-align:-1px}
  .pmatch-head .flag{width:19px;height:13px}

  .tipcard.hit-strong{border-left-color:#E8B519;background:#FDF8E8}
  .tipcard.hit-weak{border-left-color:var(--blue);background:#F2F7FE}
  .markwrap{flex:none;text-align:center;font-size:14px;line-height:1.1}
  .markwrap b{display:block;font-size:9px;font-weight:900;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-top:1px}
  .late-note{font-size:10px;font-weight:800;color:var(--red);margin-top:2px;letter-spacing:.03em}

  .h2h-row{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:11px 12px;margin-bottom:9px}
  .h2h-row .pl{flex:1;min-width:0;font-weight:900;font-size:13px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .h2h-row .pl.l{text-align:right}
  .h2h-row .pl.win{color:var(--green)}
  .h2h-score{display:flex;gap:4px;flex:none}
  .h2h-score b{width:26px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:7px;font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;background:var(--paper);color:var(--ink)}
  .h2h-score b.wl{background:var(--green);color:#fff}
  .h2h-score b.wr{background:var(--green);color:#fff}
  .h2h-score b.d{background:#E6E9EF;color:var(--muted)}
  .h2h-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);margin-top:10px}
  .h2h-table th{background:#F7F8FA;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:9px 4px;text-align:center;border-bottom:1px solid var(--line)}
  .h2h-table th:first-child{text-align:left;padding-left:12px}
  .h2h-table td{padding:10px 4px;text-align:center;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line)}
  .h2h-table td:first-child{text-align:left;padding-left:12px;font-weight:900}
  .h2h-table tr:last-child td{border-bottom:0}
  .h2h-table .rk{width:22px;height:22px;border-radius:50%;background:var(--paper);color:var(--navy);font-size:11px;display:inline-flex;align-items:center;justify-content:center;margin-right:7px;vertical-align:-3px}
  .h2h-table .rk.g{background:var(--gold);color:var(--navy-deep)}
  .h2h-table .bod{color:var(--navy);font-weight:900}
  /* --- STATISTIKA --- */
  .stat-sec{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin-bottom:12px}
  .stat-sec h3{margin:0 0 11px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
  .stat-sec h3 small{display:block;font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--muted);margin-top:3px}
  .race{position:relative;width:100%;overflow:visible}
  .race svg{width:100%;height:auto;display:block}
  .race-leg{display:flex;flex-wrap:wrap;gap:10px;margin-top:9px;justify-content:center}
  .race-leg span{font-size:11px;font-weight:800;display:inline-flex;align-items:center;gap:5px}
  .race-leg i{width:11px;height:11px;border-radius:50%;display:inline-block}
  .barstat{margin-bottom:13px}
  .barstat .bs-name{font-size:12.5px;font-weight:900;margin-bottom:6px;display:flex;align-items:center;gap:7px}
  .barstat .bs-name .dotp{width:10px;height:10px;border-radius:50%;flex:none}
  .bs-row{display:flex;align-items:center;gap:8px;margin:3px 0}
  .bs-row .bs-lbl{font-size:11px;color:var(--muted);width:78px;flex:none}
  .bs-track{flex:1;height:14px;background:var(--paper);border-radius:7px;overflow:hidden}
  .bs-track i{display:block;height:100%;border-radius:7px}
  .bs-val{font-size:11.5px;font-weight:800;width:38px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
  .dist-grid{display:flex;gap:5px}
  .dist-col{flex:1;text-align:center}
  .dist-col .dc-bars{display:flex;flex-direction:column-reverse;height:90px;gap:2px;justify-content:flex-start}
  .dist-col .dc-seg{border-radius:3px;min-height:2px}
  .dist-col .dc-name{font-size:10.5px;font-weight:800;margin-top:6px;color:var(--ink)}
  .dist-leg{display:flex;gap:10px;justify-content:center;margin-top:9px;font-size:10.5px;color:var(--muted);flex-wrap:wrap}
  .dist-leg span{display:inline-flex;align-items:center;gap:4px}
  .dist-leg i{width:9px;height:9px;border-radius:2px;display:inline-block}
  .duel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:13px 14px;margin-bottom:10px}
  .duel-top{display:flex;align-items:center;gap:8px}
  .duel-top .dname{flex:1;font-weight:900;font-size:13.5px;letter-spacing:.03em}
  .duel-top .dname.right{text-align:right}
  .duel-top .dscore{font-size:18px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--navy);white-space:nowrap}
  .duel-top .dscore small{font-size:10px;color:var(--muted);font-weight:700}
  .duel-bar{display:flex;height:9px;border-radius:6px;overflow:hidden;background:var(--paper);margin:9px 0 7px}
  .duel-bar i{display:block;height:100%}
  .duel-bar .w{background:var(--green)}
  .duel-bar .d{background:#C2CBD9}
  .duel-bar .l{background:var(--red)}
  .duel-form{display:flex;gap:5px;align-items:center;font-size:10px;color:var(--muted);letter-spacing:.06em}
  .duel-form .f{width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#fff}
  .duel-form .fw{background:var(--green)}
  .duel-form .fd{background:#9AA7BA}
  .duel-form .fl{background:var(--red)}
  .najava{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
  .najava-head{
    width:100%;appearance:none;border:0;background:none;cursor:pointer;font:inherit;
    display:flex;align-items:center;gap:8px;padding:13px 16px;
    font-weight:900;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  }
  .najava-head .spacer{flex:1}
  .najava-head .chev{color:var(--muted);font-size:13px}
  .najava-body{display:none;padding:0 16px 14px}
  .najava-body.open{display:block}
  .najava-body .intro{font-size:12.5px;color:var(--muted);line-height:1.55;margin:0 0 4px}
  .nj-player{border-top:1px solid var(--line);padding:11px 0 10px}
  .nj-name{font-weight:900;font-size:13.5px;letter-spacing:.03em;margin-bottom:5px}
  .nj-name .rank-mini{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--paper);color:var(--navy);font-size:11px;align-items:center;justify-content:center;margin-right:7px;vertical-align:-4px}
  .nj-name .rank-mini.gold{background:var(--gold);color:var(--navy-deep)}
  .nj-line{font-size:12.5px;line-height:1.55;color:var(--ink);margin:3px 0}
  .nj-line b{color:var(--navy)}
  .sim-head{background:var(--navy-deep);border-radius:var(--radius);color:#fff;padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow)}
  .sim-head .t{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);margin-bottom:6px}
  .sim-head p{font-size:12px;color:#C9D4E6;line-height:1.55;margin:0}
  .blend{height:8px;border-radius:6px;background:rgba(255,255,255,.12);margin:10px 0 5px;overflow:hidden}
  .blend i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#7BC96F);border-radius:6px}
  .blend-lbl{display:flex;justify-content:space-between;font-size:10px;color:#9FB0C9;letter-spacing:.05em}
  .sim-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:13px 14px;margin-bottom:10px}
  .sim-top{display:flex;align-items:center;gap:10px;margin-bottom:9px}
  .sim-top .name{flex:1;font-weight:900;font-size:15px;letter-spacing:.03em}
  .sim-chip{font-size:11px;font-weight:900;padding:4px 10px;border-radius:999px}
  .sim-chip.gold{background:var(--gold-soft);color:#8a6a0e}
  .sim-chip.red{background:#FBE9E7;color:var(--red)}
  .sim-bar{display:flex;height:22px;border-radius:8px;overflow:hidden;background:var(--paper)}
  .sim-bar i{display:flex;align-items:center;justify-content:center;font-style:normal;font-size:10px;font-weight:900;color:#fff;min-width:0;overflow:hidden;white-space:nowrap}
  .sim-bar .p1{background:var(--gold);color:var(--navy-deep)}
  .sim-bar .p2{background:#9AA7BA}
  .sim-bar .p3{background:#C77B30}
  .sim-bar .p4{background:var(--red)}
  .sim-legend{display:flex;gap:12px;justify-content:center;font-size:10.5px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
  .sim-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:4px}
  table.sim-matrix{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
  table.sim-matrix th{background:#F7F8FA;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:10px 6px;text-align:center;border-bottom:1px solid var(--line)}
  table.sim-matrix th:first-child{text-align:left;padding-left:14px}
  table.sim-matrix th small{display:block;font-size:8.5px;color:var(--gold);letter-spacing:.05em;margin-top:2px}
  table.sim-matrix td{padding:13px 6px;text-align:center;border-bottom:1px solid var(--line);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
  table.sim-matrix tr:last-child td{border-bottom:0}
  table.sim-matrix td.who{text-align:left;padding-left:14px;font-weight:900;font-size:13.5px;letter-spacing:.03em}
  table.sim-matrix td.who small{display:block;font-size:9.5px;font-weight:700;color:var(--muted);letter-spacing:.04em}
  table.sim-matrix td.best{font-size:15px}
  .rules{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 18px 22px}
  .rules .doc-title{text-align:center;font-size:17px;font-weight:900;letter-spacing:.1em;color:var(--navy);text-transform:uppercase;margin-bottom:2px}
  .rules .doc-sub{text-align:center;font-size:12px;color:var(--muted);margin-bottom:18px}
  .rules h2{
    font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
    color:#fff;background:var(--navy);border-radius:9px;padding:8px 13px;margin:22px 0 12px;
  }
  .rules h3{font-size:13.5px;font-weight:900;letter-spacing:.03em;color:var(--navy);margin:14px 0 4px}
  .rules p{font-size:13.5px;line-height:1.65;color:var(--ink);margin:0 0 8px}
  .rules ul{margin:0 0 8px 18px}
  .rules li{font-size:13.5px;line-height:1.6;margin-bottom:3px}
  .rules .sign{font-size:13px;color:var(--muted);font-style:italic;margin-top:14px}

  .home-section{margin-top:17px}
  .home-kicker,.section-heading{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin:0 3px 9px}
  .section-heading{margin-top:20px;border-bottom:2px solid var(--navy);padding-bottom:6px}
  .home-actions{display:grid;gap:9px}
  .home-actions.utility{grid-template-columns:1fr}
  .home-action{appearance:none;width:100%;border:1px solid var(--line);background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:13px 14px;display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:9px;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
  .home-action.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
  .home-action span{font-size:20px}.home-action b{font-size:15px;font-weight:800}.home-action i{font-size:11px;font-style:normal;color:var(--muted)}
  .home-action.primary i{color:#C9D4E6}
  .kumitj-paper{background:#FFFDF7;border:1px solid #D9D1C1;border-radius:5px;box-shadow:0 8px 24px rgba(44,37,24,.10);overflow:hidden;color:#211E19}
  .paper-masthead{text-align:center;border-top:5px solid var(--navy);border-bottom:3px double #25211B;padding:8px 12px 7px}
  .paper-date{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#716B61;text-align:left}
  .paper-name{font-family:'Saira Condensed',sans-serif;font-size:33px;line-height:1;font-weight:900;letter-spacing:.05em;color:var(--navy)}
  .paper-edition{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:5px;color:#625D54}
  .paper-lead{padding:15px 15px 12px;border-bottom:1px solid #D9D1C1}
  .paper-tag{display:inline-block;background:var(--red);color:#fff;padding:3px 7px;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
  .paper-lead h2{font-size:25px;line-height:1.02;margin:8px 0 6px;font-weight:900;letter-spacing:-.015em}
  .paper-lead p{font-family:'Saira Condensed',sans-serif;font-size:13px;line-height:1.45;color:#5F594F}
  .paper-body{padding:12px 14px 14px}
  .paper-body .news-p,.paper-body .nj-line,.paper-body .intro{font-family:'Saira Condensed',sans-serif}
  .paper-body .news-tabs{background:#E9E4D8}
  .newsstand .najava{margin:0}
  .kup-stage{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:13px;box-shadow:var(--shadow)}
  .kup-stage>header{display:flex;align-items:center;justify-content:space-between;background:var(--navy);color:#fff;padding:12px 14px}
  .kup-stage>header small{font-size:9px;color:var(--gold-light);font-weight:800;letter-spacing:.14em}
  .kup-stage>header h3{font-size:15px;margin-top:2px}.kup-stage>header>b{font-size:20px}
  .kup-game{padding:12px;border-bottom:1px solid var(--line)}.kup-game:last-of-type{border-bottom:0}
  .kg-real span{display:block;font-size:10px;color:var(--muted);font-weight:700}.kg-real strong{display:block;font-size:13px;margin:4px 0}.kg-real strong>b{color:var(--navy);font-size:17px;margin:0 3px}.kg-real>small{font-size:11px;color:var(--muted)}
  .kg-picks{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
  .kg-pick{border:1px solid var(--line);border-radius:10px;padding:8px;background:#FAFBFC}
  .kg-pick>div{display:flex;justify-content:space-between;gap:6px}.kg-pick>div b{font-size:11px}.kg-pick>div span{font-size:14px;font-weight:900;color:var(--navy)}
  .kg-pick small{display:block;font-size:10.5px;color:var(--muted);margin-top:3px}.kg-pick small.hit{color:var(--green);font-weight:800;background:#EAF7EF;border-radius:5px;padding:2px 4px}
  .kg-pick>strong{display:block;text-align:right;font-size:11px;margin-top:5px;color:var(--navy)}
  .kup-tiebreak{margin:0 12px 12px;padding:9px 10px;border-left:3px solid var(--gold);background:var(--gold-soft);font-size:11.5px}
  .history-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
  .history-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px;box-shadow:var(--shadow)}
  .history-card small,.history-card span{display:block;color:var(--muted);font-size:9.5px}.history-card b{display:block;font-size:14px;margin:4px 0}.history-card strong{display:block;color:var(--navy);font-size:16px}.history-card span{margin-top:5px;line-height:1.35}
  .alltime td:nth-child(2){text-align:left;font-weight:800}
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:10px;border-radius:14px}
  .table-scroll .h2h-table{margin-top:0;min-width:590px}
  .name-link{appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;font-weight:inherit;cursor:pointer;text-align:left}
  .name-link:hover{text-decoration:underline;text-underline-offset:3px}
  .profile-head{background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;border-radius:16px;padding:17px;margin-bottom:12px;box-shadow:var(--shadow)}
  .profile-head .back{appearance:none;border:1px solid #ffffff44;background:#ffffff12;color:#fff;border-radius:999px;padding:6px 10px;font:inherit;font-size:10px;font-weight:800;cursor:pointer}
  .profile-name{font-size:27px;font-weight:900;margin:13px 0 3px}.profile-sub{font-size:11px;color:#C8D3E4}
  .profile-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0}
  .profile-kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 7px;text-align:center;box-shadow:var(--shadow)}
  .profile-kpi b{display:block;font-size:18px;color:var(--navy)}.profile-kpi span{display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;margin-top:3px}
  .profile-rounds{display:flex;align-items:flex-end;gap:5px;height:105px;padding:10px;background:#fff;border-radius:14px;box-shadow:var(--shadow)}
  .profile-bar{flex:1;min-width:10px;text-align:center;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:3px}.profile-bar i{display:block;background:linear-gradient(var(--gold),var(--navy));border-radius:5px 5px 2px 2px;min-height:2px}.profile-bar b{font-size:9px}.profile-bar span{font-size:8px;color:var(--muted)}
  .insight-box{background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px;margin:10px 0;box-shadow:var(--shadow)}
  .insight-title{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}.insight-line{font-size:12px;line-height:1.5;padding:5px 0;border-top:1px solid var(--line)}.insight-line:first-of-type{border-top:0}
  .chance-history{background:#fff;border-radius:14px;padding:10px;box-shadow:var(--shadow);margin-top:12px}.chance-history svg{width:100%;height:auto;display:block}

  /* ---------- v60 mobilno dotjerivanje ---------- */
  button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .bottomnav{box-shadow:0 -8px 24px rgba(11,30,60,.07)}
  .bottomnav button{min-height:50px;position:relative;transition:color .15s ease,background .15s ease}
  .bottomnav button[aria-selected="true"]{background:var(--gold-soft)}
  .bottomnav button[aria-selected="true"]::after{position:absolute;bottom:1px}
  .subtabs{overflow-x:auto;scrollbar-width:none;position:sticky;top:60px;z-index:18;box-shadow:0 4px 12px rgba(11,30,60,.04)}
  .subtabs::-webkit-scrollbar{display:none}
  .subtabs button{min-width:max-content;min-height:40px;padding-left:11px;padding-right:11px}
  .chips{scroll-snap-type:x proximity}
  .chip{min-height:40px;scroll-snap-align:start}
  .match,.pmatch,.board,.hcard,.stat-sec,.sim-card,.duel,.najava{border:1px solid rgba(228,232,240,.9)}
  .match .top{min-height:24px}
  .versus .team{min-width:0;overflow-wrap:anywhere}
  .tipcard{min-height:66px}
  .bracket{scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#CAD2DF transparent}
  .bk-col{scroll-snap-align:center}
  .kup-win{box-shadow:0 5px 16px rgba(216,166,33,.12)}
  .h2h-table,.sim-matrix,.fair{font-variant-numeric:tabular-nums}
  .view-transition{animation:viewIn .18s ease both}
  @keyframes viewIn{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}}

  @media (max-width:480px){
    main{padding:11px 9px}
    .appbar{padding:8px 11px;padding-top:max(8px,env(safe-area-inset-top))}
    .appbar img{width:32px;height:32px}
    .appbar .t b{font-size:12.5px;letter-spacing:.09em}
    .appbar .t span{font-size:9.5px;letter-spacing:.16em}
    .banner{margin:2px 0 10px;font-size:10.5px;gap:6px}
    .banner button{min-height:32px}
    .hero{padding:25px 14px 22px;border-radius:18px}
    .hero img{width:124px;height:124px}
    .hero h2{font-size:19px}
    .hero-btn{width:min(100%,310px);padding:14px 18px}
    .board-title{padding:11px 13px;font-size:10.5px}
    .standing{gap:9px;padding:11px 10px}
    .thead{gap:9px;padding-left:10px;padding-right:10px}
    .standing .name{font-size:13.5px}
    .pts{width:46px}.pts .total{font-size:20px}
    .stats-grid{grid-template-columns:repeat(3,1fr)}
    .match{padding:11px 10px}
    .match .top{gap:6px;font-size:10px}
    .versus{gap:5px}
    .versus .team{font-size:12.5px}
    .score{min-width:48px;font-size:18px;padding:2px}
    .flag{width:19px;height:13px}
    .tips-grid{gap:6px;padding:8px}
    .tipcard{padding:8px 7px;gap:7px}
    .tipcard .avatar{width:27px;height:27px;font-size:12px}
    .tipcard .ptip{font-size:15px}
    .pmatch-head{padding:10px}
    .pmatch-head .title{font-size:12px}
    .pmatch-head .real{padding:4px 7px;font-size:13px}
    .bracket{margin-left:-9px;margin-right:-9px;padding:2px 9px 9px}
    .bk-col{min-width:82vw}
    .rules{padding:17px 14px 20px}
    .rules p,.rules li{font-size:13px}
    table.sim-matrix td{font-size:12px;padding:11px 3px}
    table.sim-matrix td.who{font-size:12px;padding-left:9px}
    table.sim-matrix th{padding:9px 3px;font-size:8px}
    .paper-name{font-size:30px}.paper-lead h2{font-size:23px}
    .history-cards{grid-template-columns:1fr}
  }
  @media (max-width:360px){
    .bottomnav button{min-width:0;padding-left:7px;padding-right:7px;font-size:8px}
    .bottomnav button svg{width:20px;height:20px}
    .tips-grid{grid-template-columns:1fr}
    .cta-row{grid-template-columns:1fr}
    .subtabs button{font-size:10px}
  }
/* Refaktor: deklarativni stilovi se primjenjuju nakon svakog renderiranja. */
[data-inline-style] { }