/* ═══════════════════════════════════════════════════════════════════════════
   Zajednički sloj preko svih stranica. Učitava se POSLIJE ugrađenog <style>
   bloka svake stranice pa nadjačava.

   Od 29.9.2026. izgled prati Coinbaseov DESIGN.md (getdesign.md): bijela
   podloga, tanke sive crte, gumbi u obliku pilule, naslovi u debljini 400.
   Glavna boja je #003ecc, a fontovi ostaju Archivo + DM Mono.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Boje ────────────────────────────────────────────────────────────────────
   Svaka stranica u svom <style> bloku i dalje nosi stare tamne vrijednosti u
   :root; html:root ima veću specifičnost pa vrijedi ovo, bez obzira na red.
   *-rgb inačice postoje za prozirne nijanse: rgba(var(--accent-rgb),.2).
   --sjena množi prozirnost sjena, koje su na bijelom puno slabije nego na crnom. */
html:root{
  --bg:#ffffff;--bg-rgb:255,255,255;
  --surface:#f7f7f7;--surface-2:#eef0f3;--card:#ffffff;
  --line:#dee1e6;--line-2:#cfd3da;
  --ink:#0a0b0d;--ink-rgb:10,11,13;
  --muted:#5b616e;--muted-rgb:91,97,110;
  --dim:#7c828a;
  --accent:#003ecc;--accent-rgb:0,62,204;--accent-hover:#002f9e;--accent-2:#0052ff;
  /* Glavni gumb je iste plave i u tamnom opsegu, pa --primary .tamno ne mijenja. */
  --primary:#003ecc;--primary-hover:#002f9e;
  --on-accent:#ffffff;
  --green:#098551;--green-rgb:9,133,81;
  --red:#cf202f;--red-rgb:207,32,47;
  --amber:#b27d00;--amber-rgb:244,176,0;--yellow:#b27d00;
  --sjena:.22;
  --r:16px;--r-lg:24px;
  /* Podloga stranice je svijetlosiva, kartice bijele (--card), kao donji dio naslovnice. */
  --canvas:#f2f3f5;
  --canvas-tamno:#0a0b0d;
  color-scheme:light;
}
/* Tamni opseg (uvod naslovnice): iste varijable, tamne vrijednosti. Sve unutra,
   i grafovi koji boje uzimaju iz varijabli, crta se kao na tamnoj podlozi.
   Pro paket na /pro je isti tamni istaknuti paket kao kod Coinbasea. */
.tamno,.plan.pro,
/* Podstranice su tamne: sav sadrzaj <main> stoji na crnom, kartice su tamno sive.
   Naslovnica (data-str="pocetna") ima svoj raspored i ostaje kakva jest. Bijeli ostaju
   zaglavlje, traka s cijenama i podnozje. Na mobitelu su tamne i donja traka s grupama,
   izbornik koji iz nje izlazi i traka za kolacice. */
html:not([data-str="pocetna"]) main,.gbar,.glist-p,.pk-traka,.home-grupe .hg{
  --bg:#0a0b0d;--bg-rgb:10,11,13;
  --surface:#16181c;--surface-2:#22252b;--card:#16181c;
  --line:#2c3037;--line-2:#3a3f47;
  --ink:#ffffff;--ink-rgb:255,255,255;
  --muted:#a8acb3;--muted-rgb:168,172,179;
  --dim:#7c828a;
  --accent:#6f93ff;--accent-rgb:111,147,255;--accent-hover:#93afff;--accent-2:#4d7dff;
  --on-accent:#0a0b0d;
  --green:#3ddc84;--green-rgb:61,220,132;
  --red:#ff5d5d;--red-rgb:255,93,93;
  --amber:#ffce4d;--amber-rgb:255,206,77;--yellow:#ffce4d;
  --sjena:1;
  color-scheme:dark;
  background:var(--bg);color:var(--ink);
}

/* ── Pozadina ────────────────────────────────────────────────────────────────
   Boju drži <html>, a <body> je proziran, pa dva pseudoelementa mogu stajati
   iza sadržaja a ispred podloge. Bez dodatnog HTML-a i bez JavaScripta.        */
/* overflow-x:clip na OBA, html i body: cvrsta ograda protiv vodoravnog scrolla na
   mobitelu, bez obzira sto ga uzrokuje (mrlje ispod, puna sirina karte itd.). Ovdje NE
   smije biti `hidden`: hidden stvara scroll-kontejner i time lomi position:sticky na
   headeru, pa se nakon skrola gore klasa makne, ali je sam header i dalje izvan zaslona.
   `clip` reze isti visak bez stvaranja scroll-kontejnera. width:100% sprjecava da bilo
   koji potomak sirok "100%" naslijedi vecu bazu od stvarnog zaslona. */
html,body{overflow-x:clip;width:100%}
html{background:var(--canvas)}
/* DM Mono postoji samo u debljinama 400 i 500. Na 600 i 700 preglednik je slova sam
   podebljavao, pa su brojke izgledale kao neki drugi, stariji font. Sad ostaju na 500. */
html{font-synthesis-weight:none}
html:not([data-str="pocetna"]){background:var(--canvas-tamno)}
/* main nosi tamne tokene, ali ne i vlastitu plohu: podlogu preko cijele sirine daje <html>. */
html:not([data-str="pocetna"]) main{background:transparent}
/* Kartice grupa na naslovnici su crne, kao kartica Pro ispod njih. */
.home-grupe .hg{background:var(--bg);border-color:transparent}
/* overflow-y:clip na <body>: mrlja ispod je `position:absolute`, visoka 120vh i pocinje na
   -10vh, pa na kratkoj stranici visi i do 105 px ISPOD sadrzaja -- a apsolutni element
   produljuje podrucje skrolanja. Na pocetnoj (1083 px) i visokom prozoru (1080 px) to je
   pravilo nize (`transform` od --sc) zatvaralo u petlju: skrol na dno -> --sc 1 -> mrlja se
   povuce 14vh gore -> stranica se skrati sa 1188 na 1083 -> preglednik stisne scrollY sa 108
   na 3 -> --sc se preracuna -> mrlja padne natrag -> stranica opet naraste. Stranica je zbog
   toga na dnu poskakivala, i to samo na zaslonima gdje je prozor priblizno visok kao sadrzaj.
   `clip` (ne `hidden`) rezе taj visak bez stvaranja scroll-kontejnera, pa ljepljivo zaglavlje
   ostaje netaknuto; djecu s `position:fixed` (traka vijesti iz pnav.js) ne dira jer im <body>
   nije sadrzavajuci blok -- provjereno. */
body{background:transparent;position:relative;overflow-y:clip}
/* Mobilni preglednici na dodir linka inace prekriju cijeli element zadanom plavom
   "tap highlight" mrljom dok se ne pusti prst -- na logu (goli tekst, bez vlastite
   pozadine) je to posebno upadljivo ("cijeli logo poplavi"). Iskljuceno svugdje;
   stranica vec ima vlastite :hover/:active naznake gdje su potrebne. */
a{-webkit-tap-highlight-color:transparent}

/* Podloga je ravna bijela. Mrlje u boji i mrežica "terminala" maknute su 29.9.2026.
   s prelaskom na Coinbase izgled; --sc iz skin.js ostaje, ali ga više ništa ne koristi. */

/* Zajednicki AI pregled na dashboardu i /vijesti. Poveznice su namjerno podcrtane: jasno
   se vidi koja tvrdnja vodi na izvor, a cijela kartica ne izgleda kao oglas ili CTA. */
.ai-card{padding:20px 22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.ai-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:9px}
.ai-head strong{font-size:16px;line-height:1.3}
.ai-head span{flex:0 0 auto;font:700 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-accent);background:var(--accent);border-radius:4px;padding:4px 6px}
.ai-intro{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0 0 11px}
.ai-text{margin:0;color:var(--muted);font-size:13.5px;line-height:1.65}
.ai-text a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
.ai-text a:hover{color:var(--accent)}
.ai-card ul{margin:0;padding:0;list-style:none}
.ai-card li{font-size:13.5px;line-height:1.55;padding:9px 0;border-top:1px solid rgba(var(--accent-rgb),.14)}
.ai-card li a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
.ai-card li a:hover{color:var(--accent)}
.ai-outlook{font-size:13px;line-height:1.5;color:var(--muted);margin:11px 0 0;padding-top:10px;border-top:1px solid rgba(var(--accent-rgb),.22)}
.ai-outlook b{color:var(--ink)}
.ai-meta{font:10px/1.5 var(--mono);color:var(--dim);margin-top:12px}
.ai-empty{color:var(--muted);font-size:13.5px;line-height:1.55}
@media(max-width:820px){.ai-card{padding:15px 16px}.ai-head strong{font-size:15px}.ai-card li,.ai-text{font-size:13px}}

/* ── Ulazak sadržaja pri skrolu ──────────────────────────────────────────────
   Blok se blago podigne i pojavi kad uđe u vidno polje.

   Prvo je bilo izvedeno preko `animation-timeline: view()` (bez JavaScripta), ali
   to podržava premalo preglednika da bi se na njega moglo računati — kod korisnika
   se jednostavno nije vidjelo. Sada radi klasično, preko IntersectionObservera u
   /skin.js.

   Ključno: skriva se SAMO kad je skripta postavila `js-anim` na <html>. Ako
   JavaScript ne prođe, nijedno pravilo ispod ne vrijedi i sve je odmah vidljivo,
   pa nema načina da sadržaj ostane skriven.                                     */
.js-anim [data-ulaz]{opacity:0;transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1)}
.js-anim [data-ulaz].vidljiv{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js-anim [data-ulaz]{opacity:1;transform:none;transition:none}
}

/* ── Tipografija ─────────────────────────────────────────────────────────────
   Coinbase: naslovi u debljini 400 sa stisnutim razmakom, naslovi kartica 600.
   Naglasak u naslovu nosi samo boja, bez kurziva. */
h1,.h1,.hero h1{font-weight:400;letter-spacing:-.03em}
h2,h3,.panel h2,.why h2{font-weight:600;letter-spacing:-.01em}
.rel-item .rt{font-weight:600;letter-spacing:-.01em}
h1 em,h2 em,.hero h1 em{font-weight:inherit;font-style:normal;color:var(--accent)}

/* ── Podjela fontova ─────────────────────────────────────────────────────────
   Dogovor je: DM Mono nosi BROJKE, oznake dionica i tablice; Archivo nosi sav
   ostali tekst. Nadzorna ploča ga je najviše kršila — naslovi kartica, oznake
   redaka i napomene bili su u monospaceu, pa je ista stranica izgledala kao dvije
   (a razmaknuti mono verzal je i sam bio znak predloška).

   Popis je izričit, ne "sve osim brojki": mono se u kodu postavlja po klasi, pa se
   klase koje nose tekst moraju nabrojati. Brojčane klase (.num, .v, .px, .chg,
   .iv, td/th) namjerno nisu ovdje i ostaju u monospaceu.                        */
.sm-h,.sm-tk-h,.sm-lbl,.rblock h3,.facts h4,.related h4,.sig-group h4,
.pr-swot .q h5,.bar-title,.rtitle,.r-facts-h,.sent-addon .sa-chart-title,
.mv-t,.sfeel .lbl,.sod-chan .lbl,.sod-news .lbl,.srcbox .lbl,
.tkchips .lbl,.metric .lbl,.range .lbl,.r-str .lab,.pr-tile .k,.tile .k,
.comp .cl,.idx-card .in,.cs .csl,.sagg .l,.sent-addon .sa-l,.sod-mkt,
.note,.loading,.empty,.disclaimer,.chart-note,.local-note,.comps-hint,.fb-tip,
.meta,.an-m,.mult,.pr-meta,.sod-meta,.spark-ctx,.status,.status-line,.r-miss,
.newsrow small,.sod-news a small,.updated,.pulse .pnote,.pulse .ptitle,
.pulse .pmeta,.plan .nm,.cal-mo,.cal-more,.cal-e,.cal-hd span,.cal-leg span,
.sent-leg span,.bl-leg,.pro-tag,.protag,.badge,.tag,.tag2,.own-tag,
.comps summary,.legend summary,details.metho summary,
.filing-details summary,.more-btn,.rbtn,.cal-nav button,
label,.field label,.calc label,.map-item label{
  font-family:var(--display,'Archivo',system-ui,sans-serif);
}
/* Mono je uzi po znaku, pa su ove oznake bile postavljene na 10-10,5px. U Archivu
   je to premalo za citanje, a i sam je font uzi pa razmak vise ne treba biti tako
   otvoren. */
.mv-t,.sm-h,.sm-lbl,.pulse .ptitle,.sod-chan .lbl,.sod-news .lbl,.sfeel .lbl,
.idx-card .in,.plan .nm,.note,.pr-tile .k,.tile .k{letter-spacing:.02em}
.note,.mv-t,.pulse .ptitle,.sm-h{font-size:11.5px}

/* ── Naslov segmenta ─────────────────────────────────────────────────────────
   Obican naslov u debljini 600, bez verzala i bez plave trake lijevo. */
.eyebrow{
  font-family:var(--display,'Archivo',system-ui,sans-serif)!important;
  font-size:20px;font-weight:600;letter-spacing:-.01em;text-transform:none;line-height:1.3;
  color:var(--ink);border-left:0;padding-left:0;gap:10px;
}
.eyebrow::after{display:none!important}

/* ── Zaglavlje podstranica ────────────────────────────────────────────────────
   Zaglavlje (visina, sirina, logo, gumbi Vijesti/Alati/Prijava) je ujednaceno
   27.7.2026. izravno po svih 14 datoteka (13 podstranica + nadzorna ploca), NE
   ovdje kao presjek. Razlog: svaka stranica ima svoju mobilnu iznimku na .head ili
   header (watchlista na 640px, nadzorna ploca na 820px), i presjecno pravilo ovdje
   bi imalo visu specificnost od tih iznimki pa bi ih tiho pregazilo na uskom
   zaslonu bez ikakvog upozorenja. class="sub-head" ostaje u markupu kao oznaka da
   je zaglavlje te stranice usklađeno, ali bez CSS-a ovdje — svaka vrijednost zivi
   u datoteci na koju se odnosi, gdje i njezina mobilna iznimka. */

/* Ponašanje pri skrolu ipak mora biti zajedničko: skin.js je na svim korisničkim
   stranicama, uključujući članak, Pro i obnovu lozinke gdje pnav.js nije bio učitan.
   `position:sticky` ovdje jamči da se vraćeni header pojavi na vrhu zaslona, a ne tek kad
   se korisnik fizički vrati do njegova mjesta u dokumentu. */
header.pn-klizni{position:sticky!important;top:0!important;z-index:2000}

/* Sazimanje: bijelu plohu zaglavlja nosi ::before, pa se ona pri skrolu dolje glatko
   skupi u tamni kvadrat oko kose crte loga. Kosa crta se ne mice, ostatak
   zaglavlja izblijedi, a "profit" se uvuce u crtu. Pri skrolu gore ploha se rasiri, a
   "profit" opet izlazi iz crte istom animacijom kao pri ucitavanju stranice.
   --k-l i --k-t (polozaj kvadrata) racuna skin.js iz stvarnog polozaja crte. */
header.pn-klizni{background:transparent!important;border-bottom-color:transparent!important}
header.pn-klizni::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  background:var(--bg);box-shadow:inset 0 -1px 0 var(--line);border-radius:0;
  transition:left .42s cubic-bezier(.4,0,.2,1),top .42s cubic-bezier(.4,0,.2,1),width .42s cubic-bezier(.4,0,.2,1),
    height .42s cubic-bezier(.4,0,.2,1),border-radius .42s ease,background-color .42s ease,box-shadow .42s ease}
/* Tanki svijetli rub i sjena: kvadrat se vidi i iznad tamnog uvoda naslovnice. */
header.pn-sazeto::before{left:var(--k-l);top:var(--k-t);width:44px;height:44px;border-radius:12px;
  background-color:#0a0b0d;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 6px 18px rgba(0,0,0,.22)}
header.pn-klizni .head>*:not(.logo){transition:opacity .22s ease .12s,visibility 0s linear 0s}
header.pn-sazeto .head>*:not(.logo){opacity:0;visibility:hidden;transition:opacity .16s ease,visibility 0s linear .16s}
header.pn-sazeto{pointer-events:none}
header.pn-sazeto .logo{pointer-events:auto;cursor:pointer;transform:translateX(var(--k-dx,0px))}
header.pn-klizni .logo{transition:transform .42s cubic-bezier(.4,0,.2,1)}
header.pn-klizni .logo .slash{transition:color .3s ease}
header.pn-sazeto .logo .slash{color:#6f93ff}
header.pn-sazeto .logo .word{animation:logoUvuci .26s cubic-bezier(.4,0,.2,1) both}
@keyframes logoUvuci{from{clip-path:inset(0 0 0 0);transform:translateX(0)}to{clip-path:inset(0 100% 0 0);transform:translateX(-4px)}}
@media(prefers-reduced-motion:reduce){
  header.pn-klizni::before,header.pn-klizni .head>*,header.pn-klizni .logo .slash{transition:none}
  header.pn-sazeto .logo .word{animation:none;visibility:hidden}
}

/* Tamni pojas s naslovom podstranice: preko cijele sirine zaslona, sadrzaj u stupcu. */
.pojas.tamno{padding:44px 0 12px;margin-bottom:28px}
@media(max-width:820px){.pojas.tamno{padding:30px 0 8px;margin-bottom:22px}}
/* Kartica s imenom i cijenom dionice: tamna, bez obruba, kao kartica na naslovnici. */
#out>.card:has(>.qhead){border-color:var(--line)}

/* Zaglavlje u Coinbase obliku (samo stolni zaslon; mobilno zaglavlje ostaje svoje):
   pretraga je stalno otvorena siva pilula, Prijava siva pilula, Napravi račun (ubacuje ga
   pnav.js) plava. "html" ispred daje pravilima prednost pred stilom koji pnav.js dodaje
   tek nakon ucitavanja. */
@media(min-width:821px){
  html header .head-search,html header .head-search:hover,html header .head-search:focus-within,
  html header .pnav-search,html header .pnav-search:hover,html header .pnav-search:focus-within{width:230px;height:40px}
  html header .head-search form,html header .pnav-search form{height:40px;border-radius:100px;background:var(--surface-2)}
  html header .head-search input:not(.x),html header .pnav-search input:not(.x){opacity:1;padding-right:16px}
  html header .ps-mq{opacity:1;right:16px}
  html header .ps-mq i{font-size:14px}
  html header .head-search input::placeholder,html header .pnav-search input::placeholder{font-family:var(--display);font-size:14px;color:var(--dim)}
  html header a.nav-login,html header a.pnav-btn{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:100px;
    background:var(--surface-2);color:var(--ink);font-family:var(--display);font-size:14px;font-weight:600;transition:background-color .15s ease}
  html header a.nav-login:hover,html header a.pnav-btn:hover{background:var(--line)}
  html header a.nav-login::after,html header a.pnav-btn::after{display:none}
  html header a.g-reg{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:100px;
    background:var(--primary);color:#fff;font-family:var(--display);font-size:14px;font-weight:600;text-decoration:none;transition:background-color .15s ease}
  html header a.g-reg:hover{background:var(--primary-hover)}
  html header .head-right,html header nav.pnav{gap:10px}
}
header a.g-reg{display:none}

/* ── Pokretna tržišna traka na svim stranicama ────────────────────────────────
   Dvije jednake kopije pomiču se za točno izmjerenu širinu jednog bloka. Broj ponavljanja
   računa skin.js iz stvarne širine, pa ni jedan jedini odabrani ticker ne ostavlja prazninu. */
html.profit-bez-trake body>.ticker,body>.ticker[hidden]{display:none!important}
body>.ticker{position:relative;z-index:1;width:100%;background:var(--surface);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;font-family:var(--mono,ui-monospace,monospace);font-size:12.5px}
body>.ticker .ticker-track{display:flex;width:max-content;gap:34px;padding:9px 0;animation:none}
body>.ticker .ticker-track.tk-run{animation:profit-tk-scroll var(--tk-t,45s) linear infinite}
body>.ticker .ticker-track>*{flex:0 0 auto}
body>.ticker:hover .ticker-track.tk-run{animation-play-state:paused}
body>.ticker .tick{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none}
body>.ticker .tick .sym{color:var(--muted)}
body>.ticker .tick.moj .sym{color:var(--accent)}
body>.ticker a.tick:hover .sym{color:var(--ink)}
body>.ticker .up{color:var(--green)}
body>.ticker .down{color:var(--red)}
body>.ticker .flat{color:var(--dim)}
@keyframes profit-tk-scroll{from{transform:translateX(0)}to{transform:translateX(calc(var(--tk-d,0px) * -1))}}
@media(prefers-reduced-motion:reduce){body>.ticker .ticker-track.tk-run{animation:none}}


/* ── Kartice i plohe ─────────────────────────────────────────────────────────
   Bez ispune: ostaje samo obrub, a kroz kutiju se vidi pozadina stranice. Siva
   ploha na tamnoj podlozi davala je onaj "sve je kartica" dojam predloška, a uz
   živu pozadinu ju je i gasila.

   Jedno zaobljenje za sve. Prije je svaka stranica imala svoje (2, 4, 8, 10, 12,
   14px), pa su neke kutije bile oštre a neke okrugle bez pravila.               */
.card,.pr-tile,.pr-sec,.plan,.box,.panel,
.idx-card,.stock,.hm-card,
/* Drugi krug: kutije koje su ostale ispunjene i time odskakale od ostalih. */
.pulse,.allnews,.facts,.srcbox,.deadlines,details.metho,
.rblock,.sm-box,.stat,.cat,.watch-row,.etm-carousel .etm-page .etm-i,.commod-card{
  background:var(--card);
  border-radius:var(--r);
}
/* Spremnici gumba i legende nisu kartice: siva ploha preko cijelog retka izgledala je kao
   da je cijeli redak jedan gumb (Sve / Adria / Globalno, legenda karte na /makro). */
.picker,.tw,.filters,.legend,.tkchips{background:transparent;border-radius:var(--r)}
/* Gumbi su pilule, polja za unos zaobljena 12px. */
.btn,.chip,button{border-radius:100px}
input,select,textarea{border-radius:12px}
/* Ukrasni radijalni sjaj na istaknutim karticama nema funkcije, a uz prozirnu
   ispunu bi se samo tukao s pozadinom. */
.plan.pro,.card.hl,.pr-tile.hl{background-image:none}
/* Pro paket: istaknut plavim rubom, jer je na tamnoj stranici iste boje kao podloga. */
.plan.pro{border-color:#6f93ff}
.plan.pro .btn.pro,.tamno .btn.pro{background:var(--primary);border-color:var(--primary);color:#fff}

/* Podizanje kartice ima smisla samo ondje gdje pokazivač stvarno postoji. Na dodir
   `:hover` ostaje zalijepljen nakon tapa, a kartica je u karuselu s `overflow-x:auto`
   koji reže sve izvan okvira, pa se gornji rub podignute kartice odsijecao. */
@media (hover: none){
  .idx-card:hover,.card:hover,.stock:hover,.plan:hover{transform:none}
}

/* ── Tablice: gušće i s tabularnim znamenkama ────────────────────────────────
   Tabularne znamenke drže stupce poravnate kad se brojke mijenjaju uživo.      */
table{font-variant-numeric:tabular-nums}
th{font-size:12px;letter-spacing:0;text-transform:none;font-weight:700}
.num,td.num,.v,.iv{font-variant-numeric:tabular-nums}

/* ── Traka indeksa: oštri kutovi i tanka rešetka ── */
.idx-card{border-radius:var(--r)}

/* Fokus mora ostati vidljiv: oštri kutovi ne smiju značiti i slabiji obris. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;
}
/* Pretraga u headeru (desktop i mobitel): roditelj (form) ima overflow:hidden radi
   animacije širenja, pa se uobičajeni outline-offset:2px (izvan kućice) ondje reže na
   desnom rubu -- izgleda kao napola izrezan plavi obris. -2px ga uvlači UNUTAR polja, gdje
   ima mjesta, umjesto da ga posve gasi (fokus i dalje mora ostati vidljiv). */
.head-search input:focus-visible,.pnav-search input:focus-visible{outline-offset:-2px}

/* ── Prekidači: pilule ───────────────────────────────────────────────────────
   Svaka skupina izbora (Globalno / Adria, rasponi grafa, kartice na stranici dionice...)
   ima isti oblik: tekst bez okvira, a odabrani izbor dobiva sivu pilulu. Kose crte
   izmedu izbora i plava crta ispod odabranog iz prijasnjeg izgleda su ugasene. */
.rbar,.fb-sw,.sk-tgl,#picker,.perf-ranges,.perf-kind,#tabs,#p-risk{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--tgl-gap,4px);
  margin-top:0;background:none;border:0;padding:0}
/* Ove tri skupine drze svoj razmak i svoje mobilno ponasanje (kartice dionice se na
   telefonu listaju vodoravno), pa se ovdje mijenja samo razmak izmedu pilula. */
.views,.mv-tabs,.stock-tabs{gap:4px}
.rbar>button,.fb-sw>button,.sk-tgl>button,#picker>button,.perf-ranges>button,.perf-kind>button,#tabs>button,#p-risk>button,.views button,.mv-tabs button,.stock-tabs button{
  position:relative;appearance:none;border:0;border-radius:100px;background:none;
  display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;
  color:var(--muted);font-family:var(--display);font-size:14px;font-weight:600;font-style:normal;
  line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;
  transition:color .15s ease,background-color .15s ease}
.rbar>button::before,.fb-sw>button::before,.sk-tgl>button::before,#picker>button::before,.perf-ranges>button::before,.perf-kind>button::before,#tabs>button::before,#p-risk>button::before,.views button::before,.mv-tabs button::before,.stock-tabs button::before,.rbar>button::after,.fb-sw>button::after,.sk-tgl>button::after,#picker>button::after,.perf-ranges>button::after,.perf-kind>button::after,#tabs>button::after,#p-risk>button::after,.views button::after,.mv-tabs button::after,.stock-tabs button::after{display:none!important}
.rbar>button:hover,.fb-sw>button:hover,.sk-tgl>button:hover,#picker>button:hover,.perf-ranges>button:hover,.perf-kind>button:hover,#tabs>button:hover,#p-risk>button:hover,.views button:hover,.mv-tabs button:hover,.stock-tabs button:hover{color:var(--ink);background:rgba(var(--ink-rgb),.04)}
.rbar>button.on,.fb-sw>button.on,.sk-tgl>button.on,#picker>button.on,.perf-ranges>button.on,.perf-kind>button.on,#tabs>button.on,#p-risk>button.on,.views button.on,.mv-tabs button.on,.stock-tabs button.on{color:var(--ink);background:var(--surface-2)}
.views-sep,.mv-tabs-sep{display:none!important}
/* Kartice na stranici dionice zadrzavaju kosu crtu izmedu izbora: bez nje se na mobitelu
   nije vidjelo da je iza zadnje kartice jos jedna. Na telefonu su pilule uze, da sve stanu. */
.stock-tabs .stock-tabs-sep{display:inline-block;color:var(--accent);font-weight:400;user-select:none;margin:0 -1px}
.stock-tabs{gap:2px}
@media(max-width:600px){
  .stock-tabs button{padding:0 9px;height:32px;font-size:13.5px}
}
@media(max-width:370px){
  .stock-tabs button{padding:0 6px;font-size:12.5px}
}
.rbar>button:disabled{opacity:.38;cursor:default}
.rbar>button:disabled:hover{color:var(--muted);background:none}
@media(prefers-reduced-motion:reduce){.rbar>button,.fb-sw>button,.sk-tgl>button,#picker>button,.perf-ranges>button,.perf-kind>button,#tabs>button,#p-risk>button,.views button,.mv-tabs button,.stock-tabs button{transition:none}}
/* Mali prekidaci (Prsten / Popis i slicni) iste pilule, samo nizi. */
.pie-tgl{gap:4px}
.pie-tgl button{border:0!important;border-radius:100px;background:none!important;color:var(--muted)!important;height:30px;padding:0 12px!important;font-family:var(--display)!important;font-size:13px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;cursor:pointer}
.pie-tgl button:hover{color:var(--ink)!important;background:rgba(var(--ink-rgb),.04)!important}
.pie-tgl button.on{color:var(--ink)!important;background:var(--surface-2)!important}
/* #tabs (Kredit / Otplata ili ulaganje / Treci stup na /osobne-financije) stoji odmah ispod
   uvodnog odlomka, pa mu treba vlastiti razmak. */
#tabs{margin-top:26px}
/* Cjenovni raspon ima osam izbora (1D ... MAX) i mora stati u jedan red i na telefonu. */
.rbar>button{padding:0 11px;height:32px}
@media(max-width:460px){.rbar{--tgl-gap:0px}.rbar>button{padding:0 7px;font-size:13px}}
@media(max-width:360px){.rbar>button{padding:0 5px;font-size:12px}}

/* ── Traka za privolu na kolačiće ────────────────────────────────────────────
   Vlastita, ne vanjski alat. Vanjski banner (Termly, Cookiebot) postavlja SVOJE
   kolačiće, koje bi onda trebalo navesti u našoj politici kolačića — banner koji
   traži privolu, a sam nosi kolačiće bez nje. Uz to bi tražio novi izvor u CSP-u
   i donio tuđi izgled. Naš učitavač GA-a stoji u skin.js, pa ga je ovdje dovoljno
   ne pozvati.

   Dva gumba iste veličine i iste težine, oba vidljiva bez skrolanja: odbijanje
   mora biti jednako lako kao pristanak, jednim klikom. Traka NE zaključava
   stranicu — čitanje ne ovisi o privoli, samo mjerenje. */
.pk-traka{position:fixed;left:0;right:0;bottom:0;z-index:4000;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 22px;border-top:1px solid var(--line);
  background:var(--surface);box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.pk-traka .pk-txt{flex:1 1 320px;min-width:0;color:var(--muted);font-size:13px;line-height:1.55}
.pk-traka .pk-txt a{color:var(--accent);text-decoration:none}
.pk-traka .pk-txt a:hover{text-decoration:underline}
.pk-traka .pk-btn{display:flex;gap:10px;flex:0 0 auto}
.pk-traka button{appearance:none;cursor:pointer;min-width:104px;padding:9px 16px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface-2);
  color:var(--ink);font-family:var(--display,system-ui),sans-serif;font-size:13px;font-weight:650}
.pk-traka button:hover{border-color:var(--dim)}
.pk-traka button[data-pk="da"]{border-color:rgba(var(--accent-rgb),.55);color:var(--accent)}
.pk-traka button[data-pk="da"]:hover{background:rgba(var(--accent-rgb),.09);border-color:var(--accent)}
.pk-traka button:focus-visible{outline:2px solid rgba(var(--accent-rgb),.55);outline-offset:2px}
@media(max-width:560px){
  .pk-traka{padding:13px 16px;gap:12px}
  .pk-traka .pk-btn{width:100%}
  .pk-traka button{flex:1 1 0;min-width:0}
}
/* Trenutno stanje privole na stranici /kolacici. */
.pk-stanje{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0 4px}
.pk-stanje .pk-sada{font-family:var(--mono,ui-monospace),monospace;font-size:12px;color:var(--muted)}
.pk-stanje button{appearance:none;cursor:pointer;padding:8px 14px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface-2);color:var(--ink);
  font-family:var(--display,system-ui),sans-serif;font-size:12.5px;font-weight:650}
.pk-stanje button:hover{border-color:rgba(var(--accent-rgb),.55);color:var(--accent)}

/* ── Gumbi: pilule ───────────────────────────────────────────────────────────
   Svaka stranica ima svoje klase gumba (i svoje dimenzije, koje ostaju); ovdje se
   izjednacava samo oblik: pilula, kao kod Coinbasea. */
.btn,.action-btn,.an-cta,.cta,.fb-btn,.gbtn,.more-btn,.pro-btn,.rbtn,.save,.submit,.hbtn,.primary,
.pk-traka button,.pk-stanje button,.tp-guest a{border-radius:100px!important}
.pk-traka button[data-pk="da"]{background:var(--primary);border-color:var(--primary);color:#fff}
.pk-traka button[data-pk="da"]:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.pk-traka button{background:var(--surface-2);border-color:var(--surface-2)}
.pk-traka button:hover{border-color:var(--line)}


/* Podnozje je bijela ploha na kraju stranice; ispod tamnih podstranica bez nje bi
   sivi tekst stajao na crnom. */
html footer.pfoot{background:var(--bg);margin-top:0;padding-top:30px;padding-bottom:30px}
/* Na kratkoj stranici podnozje sjeda na dno zaslona, umjesto da ispod bijelog podnozja
   ostane traka crne podloge: <body> je stupac visok barem jedan zaslon, a podnozje se
   gura prema dnu. */
body{display:flex;flex-direction:column;min-height:100vh}
body>main{width:100%}
html footer.pfoot{margin-top:auto}