/* Stav v3 — jezik koncepta 3 („Vidiš zašto“) na celom sajtu, tamna i svetla varijanta, mobile first.
   Bez @layer: pobeđuje starije slojeve; HTML i logika ostaju isti. Polje svetla: web/js/polje.js (#polje).
   WebKit: na površinama sa backdrop-filter se ne animira providnost (sadržaj ostane nevidljiv). */

/* ------------------------------------------------------------------ tokeni: tamna */
:root, :root[data-theme="dark"] {
  --paper: #03040a; --paper-2: #0b0e1c; --sheet: #0e1222; --ink: #f2f4ff; --ink-2: #c3c9e2; --muted: #8790b2;
  --rule: #ffffff1c; --rule-2: #ffffff0f; --accent: #7aa2ff; --on-accent: #04060f;
  --accent-wash: #7aa2ff17; --accent-line: #7aa2ff80; --ghost: #6c7597; --ghost-ink: #a6aed0;
  --band-1: #7aa2ff1c; --band-2: #7aa2ff30; --band-3: #7aa2ff48; --band-4: #7aa2ff66;
  --panel: linear-gradient(168deg, #ffffff0f, #ffffff04); --panel-solid: #0c1020; --hi: #ffffff18; --scrim: #000000b3;
  --glow: 0 0 24px #7aa2ff88, 0 0 60px #7aa2ff40; --glow-soft: 0 0 22px -6px #7aa2ff99;
  --c-a: #7aa2ff; --c-b: #b18cff; --c-c: #5ee7ff; --ok: #46e3b0; --warn: #ffcf7a; --bad: #ff6b8b;
  --grad: linear-gradient(100deg, #ffffff, #b9ccff 40%, #c8b3ff 70%, #8ff0ff);
  --btn-bg: linear-gradient(140deg, #dbe6ff, #9ab8ff); --btn-ink: #04060f;
  --shadow-1: inset 0 1px 0 #ffffff14, 0 24px 50px -30px #000; --shadow-2: inset 0 1px 0 #ffffff18, 0 40px 90px -30px #000;
  --f-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --r-1: 12px; --r-2: 18px; --r-3: 28px;
  --out: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}
/* ------------------------------------------------------------------ tokeni: svetla */
:root[data-theme="light"] {
  --paper: #f4f6fd; --paper-2: #e9edf9; --sheet: #ffffff; --ink: #0a0f1f; --ink-2: #333c57; --muted: #5d6786;
  --rule: #0a0f1f1c; --rule-2: #0a0f1f0f; --accent: #2f5bff; --on-accent: #ffffff;
  --accent-wash: #2f5bff12; --accent-line: #2f5bff66; --ghost: #8a93ad; --ghost-ink: #5d6786;
  --band-1: #2f5bff14; --band-2: #2f5bff24; --band-3: #2f5bff38; --band-4: #2f5bff55;
  --panel: linear-gradient(168deg, #ffffffcc, #ffffff99); --panel-solid: #ffffff; --hi: #ffffffee; --scrim: #0a0f1f66;
  --glow: 0 0 18px #2f5bff55, 0 0 40px #2f5bff22; --glow-soft: 0 10px 24px -12px #2f5bff66;
  --c-a: #2f5bff; --c-b: #7c4dff; --c-c: #00a6d6; --ok: #0f9f74; --warn: #d98a00; --bad: #e0365a;
  --grad: linear-gradient(100deg, #0a0f1f, #2f5bff 45%, #7c4dff 75%, #00a6d6);
  --btn-bg: linear-gradient(140deg, #3b6bff, #6a4dff); --btn-ink: #ffffff;
  --shadow-1: inset 0 1px 0 #ffffff, 0 24px 50px -30px #1b2c6a55, 0 4px 14px -8px #1b2c6a1f; --shadow-2: inset 0 1px 0 #ffffff, 0 40px 80px -30px #1b2c6a66;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --paper: #f4f6fd; --paper-2: #e9edf9; --sheet: #ffffff; --ink: #0a0f1f; --ink-2: #333c57; --muted: #5d6786;
    --rule: #0a0f1f1c; --rule-2: #0a0f1f0f; --accent: #2f5bff; --on-accent: #ffffff; --accent-wash: #2f5bff12; --accent-line: #2f5bff66;
    --panel: linear-gradient(168deg, #ffffffcc, #ffffff99); --panel-solid: #ffffff; --hi: #ffffffee; --scrim: #0a0f1f66;
    --glow: 0 0 18px #2f5bff55, 0 0 40px #2f5bff22; --glow-soft: 0 10px 24px -12px #2f5bff66;
    --c-a: #2f5bff; --c-b: #7c4dff; --c-c: #00a6d6; --ok: #0f9f74; --warn: #d98a00; --bad: #e0365a;
    --grad: linear-gradient(100deg, #0a0f1f, #2f5bff 45%, #7c4dff 75%, #00a6d6); --btn-bg: linear-gradient(140deg, #3b6bff, #6a4dff); --btn-ink: #fff;
    --shadow-1: inset 0 1px 0 #ffffff, 0 24px 50px -30px #1b2c6a55, 0 4px 14px -8px #1b2c6a1f; --shadow-2: inset 0 1px 0 #ffffff, 0 40px 80px -30px #1b2c6a66;
    color-scheme: light;
  }
}

/* ------------------------------------------------------------------ osnova */
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body { background: transparent !important; color: var(--ink); font-family: var(--f-ui); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01", "ss03"; }
.polje { position: fixed; inset: 0; z-index: -2; width: 100vw; height: 100vh; display: block; pointer-events: none; }
.polje-mirno { background: radial-gradient(90% 60% at 30% 10%, var(--band-3), transparent 60%), radial-gradient(70% 60% at 100% 60%, #b18cff26, transparent 60%), var(--paper); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(130% 90% at 50% 35%, transparent 45%, color-mix(in srgb, var(--paper) 80%, transparent) 100%); }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------------------ zaglavlje */
.mast { position: sticky; top: 0; z-index: 40; background: linear-gradient(color-mix(in srgb, var(--paper) 92%, transparent), color-mix(in srgb, var(--paper) 0%, transparent)) !important; }
.mast-row { height: 64px !important; border-bottom: 0 !important; }
.rule-double, .hero-scene, .explore-link { display: none !important; }
.brand { color: var(--ink) !important; }
.brand-mark { width: 32px !important; height: 32px !important; border-radius: 10px !important; font-size: 16px !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; background: var(--panel) !important; box-shadow: inset 0 1px 0 var(--hi) !important; }
.brand-word { font-size: 21px !important; font-weight: 700 !important; letter-spacing: -.03em !important; }
.brand-dot { color: var(--accent) !important; }
.edition { color: var(--muted) !important; font-size: 12.5px !important; font-weight: 600 !important; }
.nbtn, .seg, .btn-pro { border-radius: 99px !important; }
.nbtn { color: var(--ink-2) !important; border: 1px solid var(--rule) !important; background: color-mix(in srgb, var(--panel-solid) 30%, transparent) !important; }
.seg { background: color-mix(in srgb, var(--panel-solid) 30%, transparent) !important; border: 1px solid var(--rule) !important; }
.seg [aria-pressed="true"], .seg [aria-selected="true"] { background: var(--ink) !important; color: var(--paper) !important; box-shadow: none !important; }
.btn-pro { background: var(--btn-bg) !important; border: 0 !important; box-shadow: var(--glow-soft) !important; }
.btn-pro b, .btn-pro span { color: var(--btn-ink) !important; }

/* ------------------------------------------------------------------ početna */
.cover-grid { display: block !important; }
.cover-main { max-width: 900px; margin: 0 auto; padding-top: clamp(24px, 9vh, 110px); }
.cover .kicker { color: var(--muted) !important; font: 600 13px/1.4 var(--f-ui) !important; letter-spacing: .16em !important; text-transform: uppercase !important; }
.cover .kicker .live-dot { display: none !important; }
.cover h1 { margin-top: 14px !important; font: 800 clamp(64px, 19vw, 168px)/.9 var(--f-display) !important; letter-spacing: -.06em !important; }
.cover h1 .l { display: block; font-style: normal !important; color: var(--ink) !important; }
.cover h1 em.l { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; padding-bottom: .05em; }
.cover h1 .w3 { display: inline-block; animation: v3budi 1.5s var(--out) both; }
@keyframes v3budi { from { opacity: 0; filter: blur(14px); font-variation-settings: "wght" 120; transform: translateY(.18em); } to { opacity: 1; filter: none; font-variation-settings: "wght" 800; transform: none; } }
.cover .deck { margin-top: 18px !important; font-size: clamp(17px, 4.6vw, 21px) !important; line-height: 1.45 !important; color: var(--ink-2) !important; max-width: 36ch; }
.cover-aside { display: none !important; }
body[data-view="home"] .search { margin-top: 28px !important; }
.search-lab { display: none !important; }
.search, body[data-view="home"] .search { border-radius: 26px !important; background: var(--panel) !important; border: 1px solid var(--rule) !important; box-shadow: var(--shadow-2) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body[data-view="home"] .search { height: 70px !important; }
.search:focus-within { border-color: var(--accent-line) !important; box-shadow: var(--shadow-2), var(--glow-soft) !important; }
body:not([data-view="home"]) .search { background: var(--panel-solid) !important; }
.search-field { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.search-field input { font-size: clamp(18px, 4.8vw, 21px) !important; font-weight: 550 !important; color: var(--ink) !important; letter-spacing: -.01em; }
.search-field input::placeholder { color: var(--muted) !important; }
.search-icon { color: var(--accent) !important; }
.go { border-radius: 20px !important; background: var(--btn-bg) !important; color: var(--btn-ink) !important; border: 0 !important; box-shadow: var(--glow-soft) !important; transition: transform .3s var(--spring) !important; }
.go svg { stroke: currentColor; }
.go:active { transform: scale(.95); }
.examples .sc, .ex-tools-t { color: var(--muted) !important; font-weight: 700 !important; letter-spacing: .14em !important; }
.ex { border-radius: 99px !important; background: color-mix(in srgb, var(--panel-solid) 35%, transparent) !important; border: 1px solid var(--rule) !important; color: var(--ink-2) !important; font-weight: 550 !important; transition: transform .3s var(--spring), color .2s, border-color .2s !important; }
.ex:hover { color: var(--ink) !important; border-color: var(--accent-line) !important; }
.ex:active { transform: scale(.95); }
/* uživo pogodak ispod pretrage (web/js/uzivo.js) */
.v3-uzivo { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 12px 12px 14px; border-radius: 24px; border: 1px solid var(--rule); background: var(--panel); box-shadow: var(--shadow-1); transform: translateY(10px); opacity: 0; pointer-events: none; transition: opacity .4s, transform .6s var(--spring); }
.v3-uzivo.on { opacity: 1; transform: none; pointer-events: auto; }
.v3-uzivo .pr { width: 42px; height: 42px; flex: none; transform: rotate(-90deg); }
.v3-uzivo .pr circle { fill: none; stroke: var(--rule); stroke-width: 3; }
.v3-uzivo .pr .p { stroke: var(--c-a); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset .8s var(--out); filter: drop-shadow(0 0 5px var(--c-a)); }
.v3-uzivo .t { flex: 1; min-width: 0; display: grid; text-align: left; } .v3-uzivo .t b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v3-uzivo .t span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-uzivo .ar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; background: var(--btn-bg); color: var(--btn-ink); flex: none; }
.v3-uzivo .ar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* početna, ispod naslovne: sekcije */
.ma-card, .fact, .index, .mini, .specimen { background: var(--panel) !important; border: 1px solid var(--rule) !important; box-shadow: var(--shadow-1) !important; border-radius: 26px !important; }
.ma-card { transition: transform .35s var(--spring), border-color .2s !important; }
.ma-card:hover { border-color: var(--accent-line) !important; }
.ma-card:active { transform: scale(.98); }
.ma-ico { color: var(--accent) !important; }
.ma-o, .ma-head .kicker, .sc.kicker { color: var(--muted) !important; letter-spacing: .14em !important; }
.ma-head h2, .experience-heading, .index h2 { font-family: var(--f-display) !important; font-weight: 800 !important; letter-spacing: -.05em !important; }
.ma-head h2 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }

/* ------------------------------------------------------------------ odgovor */
.answer, .art { position: relative; background: var(--panel) !important; border: 1px solid var(--rule) !important; box-shadow: var(--shadow-2) !important; border-radius: 32px !important; overflow: hidden; }
.answer::before, .art::before { content: ""; position: absolute; inset: 0 0 auto; height: 200px; background: radial-gradient(120% 100% at 0 0, var(--band-2), transparent 70%); pointer-events: none; }
.answer .headline, .art-title { font-family: var(--f-display) !important; font-weight: 800 !important; letter-spacing: -.055em !important; line-height: .95 !important; color: var(--ink) !important; }
.answer .headline { font-size: clamp(48px, 14vw, 96px) !important; }
.art-title { font-size: clamp(40px, 11vw, 76px) !important; }
.answer .headline .slovo, .art-title .slovo { display: inline-block; }
.cite-num, .art-num { color: var(--accent) !important; font-weight: 700 !important; }
.answer .kicker, .answer .sc, .art .sc { color: var(--c-c) !important; letter-spacing: .14em !important; }
.echo-q { font-weight: 600 !important; letter-spacing: -.02em !important; color: var(--ink-2) !important; }
.echo-q .hit, .echo-q mark { color: var(--ink) !important; }
.penalty, .rail, .alts, .cands, .more, .ai-box, .panel, .k-panel, .tabs + div, .next, .why, .cards > *, .ks-card { border-radius: 24px !important; }
.rail, .alts, .cands, .more, .ai-box { background: var(--panel) !important; border: 1px solid var(--rule) !important; box-shadow: var(--shadow-1) !important; }
.pen-val { font-weight: 750 !important; letter-spacing: -.03em !important; color: var(--ink) !important; }
/* traka kazne kroz godine: zeleno → toplo → crveno, sa sjajem */
.ruler .fill, .rl-fill, .pen-bar i, .ks-bars i, .ks-bar i { background: linear-gradient(90deg, var(--ok), var(--warn) 65%, var(--bad)) !important; box-shadow: 0 0 14px -2px color-mix(in srgb, var(--warn) 70%, transparent) !important; border-radius: 99px !important; }
.nx, .next-list li { border-color: var(--rule-2) !important; }
.nx-i, .nx-n { color: var(--accent) !important; }
.tag, .chip, .pill, .seo-chip { border-radius: 99px !important; }
.tag { background: var(--accent-wash) !important; color: var(--accent) !important; border-color: transparent !important; }

/* čitač: tabovi */
.tabs { border-color: var(--rule-2) !important; }
.tab { color: var(--muted) !important; }
.tab[aria-selected="true"] { color: var(--ink) !important; border-color: var(--accent) !important; }
.stav-n, .st-n { color: var(--accent) !important; }
.stav { border-color: var(--rule-2) !important; }
.term { text-decoration-color: var(--accent-line) !important; }

/* dugmad */
.btn { border-radius: 16px !important; min-height: 46px; font-weight: 650 !important; color: var(--ink) !important; background: color-mix(in srgb, var(--panel-solid) 40%, transparent) !important; border: 1px solid var(--rule) !important; transition: transform .3s var(--spring) !important; }
.btn:active { transform: scale(.97); }
.btn-ink, .seo-btn { background: var(--btn-bg) !important; color: var(--btn-ink) !important; border: 0 !important; box-shadow: var(--glow-soft) !important; }
.link, .lnk { color: var(--accent) !important; }

/* modali, meniji, sadržaj */
.sheet-dlg { background: transparent !important; border: 0 !important; color: var(--ink) !important; }
.sheet-dlg::backdrop { background: var(--scrim) !important; }
.sheet-dlg > *, .menu, .toc { background: var(--panel-solid) !important; border: 1px solid var(--rule) !important; box-shadow: var(--shadow-2) !important; }
.sheet-dlg > * { border-radius: 32px !important; }
@media (max-width: 760px) { .sheet-dlg > * { border-radius: 30px 30px 0 0 !important; } }
.input, input[type="email"], input[type="password"], input[type="text"], input[type="number"], select, textarea { border-radius: 14px !important; background: color-mix(in srgb, var(--panel-solid) 60%, transparent) !important; border: 1px solid var(--rule) !important; color: var(--ink) !important; }
.switch[aria-checked="true"] { background: var(--accent) !important; }

/* podnožje */
.sf, .sf-in { background: transparent !important; }
.sf-in { border: 1px solid var(--rule) !important; background: var(--panel) !important; border-radius: 32px !important; box-shadow: var(--shadow-1) !important; }
.sf a { color: var(--ink-2) !important; } .sf a:hover { color: var(--ink) !important; }

/* ------------------------------------------------------------------ statične stranice */
.seo-mast { position: sticky; top: 0; z-index: 40; border-bottom: 0 !important; background: linear-gradient(color-mix(in srgb, var(--paper) 94%, transparent), color-mix(in srgb, var(--paper) 70%, transparent)) !important; }
.seo-nav a { border-radius: 99px !important; color: var(--ink-2) !important; }
.seo-nav a[aria-current="page"] { background: var(--ink) !important; color: var(--paper) !important; box-shadow: none !important; }
.seo-search { border-radius: 18px !important; background: var(--panel) !important; border: 1px solid var(--rule) !important; box-shadow: var(--shadow-1) !important; }
.seo-search input { color: var(--ink) !important; }
.seo-search button { border-radius: 14px !important; background: var(--btn-bg) !important; color: var(--btn-ink) !important; border: 0 !important; }
.seo-main h1 { font-family: var(--f-display) !important; font-weight: 800 !important; letter-spacing: -.055em !important; line-height: .95 !important; font-size: clamp(40px, 11vw, 80px) !important; }
.seo-main h1.long { font-size: clamp(32px, 8vw, 56px) !important; }
.seo-kicker { color: var(--c-c) !important; background: transparent !important; border: 0 !important; padding: 0 !important; letter-spacing: .14em !important; }
.seo-kicker::before { display: none !important; }
.seo-glava { color: var(--ink-2) !important; }
.seo-ans, .seo-pref, .seo-facts, .seo-ask, .seo-refs, .seo-laws a, .seo-qs a, .seo-plan, .seo-rok, .seo-bz-wrap, .seo-faq details, .seo-stav, .seo-ist, .seo-praksa, .seo-spisak, .seo-know, .seo-note, .ks, .seo-ch ul a {
  background: var(--panel) !important; border: 1px solid var(--rule) !important; box-shadow: var(--shadow-1) !important; }
.seo-ans, .seo-pref, .seo-plan, .seo-ist, .seo-praksa, .seo-spisak, .seo-know, .seo-ask, .seo-refs { border-radius: 28px !important; }
.seo-laws a, .seo-qs a, .seo-faq details { border-radius: 20px !important; }
.seo-ans { position: relative; overflow: hidden; }
.seo-ans::before { content: ""; position: absolute; inset: 0 0 auto; height: 160px; background: radial-gradient(120% 100% at 0 0, var(--band-2), transparent 70%); pointer-events: none; }
.seo-ans-k, h2.seo-ans-k { color: var(--c-c) !important; }
.seo-pref blockquote { border-left: 2px solid var(--accent-line) !important; color: var(--ink-2) !important; }
.seo-cta { color: var(--accent) !important; }
.seo-btn-2 { background: color-mix(in srgb, var(--panel-solid) 40%, transparent) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; box-shadow: none !important; }
.seo-faq details { padding: 14px 18px !important; margin-top: 8px; border-top: 1px solid var(--rule) !important; }
.seo-text p, .seo-stav p { color: var(--ink-2) !important; }
.seo-crumbs a, .seo-crumbs span { color: var(--muted) !important; }
.deli-meni { background: var(--panel-solid) !important; border-color: var(--rule) !important; }
.seo-chip { color: var(--ink-2) !important; background: color-mix(in srgb, var(--panel-solid) 35%, transparent) !important; border-color: var(--rule) !important; }

/* ------------------------------------------------------------------ telefon: donja plutajuća traka */
.v3-dock { display: none; }
@media (max-width: 760px) {
  .v3-dock { position: fixed; z-index: 45; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 12px); transform: translateX(-50%); display: flex; gap: 2px; padding: 6px; border-radius: 30px; background: color-mix(in srgb, var(--panel-solid) 88%, transparent); border: 1px solid var(--rule); box-shadow: var(--shadow-2); }
  .v3-dock a, .v3-dock button { display: grid; justify-items: center; gap: 2px; width: 72px; padding: 8px 0 6px; border-radius: 24px; font: 650 11px/1.2 var(--f-ui); color: var(--muted); text-decoration: none; background: none; border: 0; transition: background .25s, color .25s, transform .3s var(--spring); }
  .v3-dock svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .v3-dock [aria-current="page"] { color: var(--accent); background: var(--accent-wash); }
  .v3-dock a:active, .v3-dock button:active { transform: scale(.92); }
  body[data-view]:not([data-view="home"]) .v3-dock { display: none; }
  body:not([data-view]), body[data-view="home"] { padding-bottom: calc(env(safe-area-inset-bottom) + 90px); }
  .mast-row { height: 58px !important; }
  .edition { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .cover h1 .w3 { animation: none; } .v3-dock a, .v3-dock button, .ma-card, .ex, .go, .btn, .v3-uzivo { transition: none !important; } }

/* traka za prelaz pri dnu mora biti ispod zaglavlja (u njemu je pretraga zakačena za dno) */
.dock-fade { z-index: 39 !important; }

/* ------------------------------------------------------------------ v3 kartica odgovora: slova, linija godina, niti */
#rez { position: relative; }
.answer .headline .hl-btn { perspective: 600px; }
.v3-rec { display: inline-block; white-space: nowrap; }
.v3-sl { display: inline-block; }
.v3-lin { margin: 22px 0 4px; }
.v3-osa { position: relative; height: 28px; }
.v3-baza { position: absolute; left: 0; right: 0; top: 13px; height: 2px; border-radius: 2px; background: var(--rule); }
.v3-crt { position: absolute; top: 7px; width: 1.5px; height: 14px; background: var(--rule); transform: translateX(-50%); }
.v3-seg { position: absolute; top: 9px; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--ok), var(--warn) 65%, var(--bad)); box-shadow: 0 0 16px -2px color-mix(in srgb, var(--warn) 75%, transparent); }
.v3-n { position: absolute; right: 0; top: -18px; font: 700 10px/1 var(--f-ui); color: var(--accent); background: var(--accent-wash); padding: 3px 6px; border-radius: 6px; }
.v3-oz { position: relative; height: 18px; margin-top: 4px; font: 600 11px/1 var(--f-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.v3-oz span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.v3-oz span:first-child { transform: none; } .v3-oz span:last-child { transform: translateX(-100%); }
.v3-niti { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; overflow: visible; opacity: .72; }
.v3-niti path { fill: none; stroke: url(#v3ng); stroke-width: 1.3; filter: drop-shadow(0 0 5px var(--c-a)); }
.v3-niti circle { fill: var(--c-c); filter: drop-shadow(0 0 6px var(--c-c)); }
.v3-niti .v3-cilj { fill: var(--c-b); }
@media (prefers-reduced-motion: reduce) { .v3-niti path { filter: none; } }

/* ispravke za veće ekrane i fokus */
.cover h1 .l.w3 { display: block; }
.cover h1 { padding-top: .16em; }
.search input:focus, .search input:focus-visible, .seo-search input:focus-visible { outline: none !important; box-shadow: none !important; }
.examples .ex::before, .ex-row .ex::before { content: none !important; display: none !important; }
.btn-pro, .btn-pro b, .btn-pro span { font-style: normal !important; }

/* telefon: ispod donje trake tekst bledi; zaglavlje statičnih stranica bez duple navigacije (ima je traka) */
@media (max-width: 760px) {
  .v3-dock { background: color-mix(in srgb, var(--panel-solid) 95%, transparent) !important; }
  body.seo::after, body[data-view="home"]::after { content: ""; position: fixed; z-index: 44; left: 0; right: 0; bottom: 0; height: calc(env(safe-area-inset-bottom) + 100px); background: linear-gradient(to top, var(--paper) 40%, transparent); pointer-events: none; }
  body.seo .seo-nav { display: none !important; }
  body.seo .seo-main { padding-top: 12px; }
}

/* ================================================================== ispravke rasporeda (2026-11-15)
   1) zaglavlje sadrži i naslovni deo, pa ne sme da bude zakačeno za vrh (prekrivalo je stranicu pri skrolovanju)
   2) čitač člana: kartica sa unutrašnjim razmakom na računaru; na telefonu je površina sam list odozdo */
.mast { position: relative !important; top: auto !important; background: none !important; }
.art { padding: clamp(24px, 3vw, 44px) !important; }
.art::before { border-radius: inherit; }
.art-meta { border-color: var(--rule-2) !important; gap: 18px 40px !important; padding: 20px 0 !important; }
.art-meta dd { font-family: var(--f-ui) !important; }
.rtoc { padding: 20px 14px 44px 18px !important; border-radius: 24px; border: 1px solid var(--rule-2); background: var(--panel); }
.rtoc .sc, .rtoc h2, .rtoc h3, .rtoc p, .rtoc em, .rtoc i { font-style: normal !important; font-family: var(--f-ui) !important; }
.rtoc-list a { font-family: var(--f-ui) !important; padding: 8px 10px 8px 4px !important; border-radius: 10px !important; text-decoration: none !important; }
.reader { gap: clamp(24px, 3vw, 48px) !important; }
@media (max-width: 760px) {
  body[data-view="clan"] .v-clan { background: var(--panel-solid) !important; border: 1px solid var(--rule); border-bottom: 0; border-radius: 28px 28px 0 0 !important; }
  .sheet-grab, .art-bar { background: var(--panel-solid) !important; }
  .art { padding: 0 0 24px !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible; }
  .art::before { display: none; }
  .v-clan > .wrap { padding-left: 20px !important; padding-right: 20px !important; }
}
.index { padding: clamp(22px, 3vw, 44px) !important; }

/* pilule sa primerima i alatima: pravi unutrašnji razmak (ranije su bile obične veze) */
.ex { display: inline-flex !important; align-items: center; min-height: 40px !important; padding: 0 16px !important; font-size: 14.5px !important; line-height: 1.2 !important; white-space: nowrap; }
.ex-row { display: flex; flex-wrap: wrap; gap: 8px !important; }
.examples .sc, .ex-tools-t { display: block; margin: 18px 0 8px !important; font-size: 12px !important; }
@media (max-width: 760px) { .ex-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 6px; } .ex-row::-webkit-scrollbar { display: none; } }

/* revizija razmaka (2026-11-15): svaka uokvirena površina ima unutrašnji razmak */
.seo-ist, .seo-praksa, .seo-spisak, .seo-know, .ks, .seo-ask, .seo-refs { padding: clamp(18px, 2.4vw, 28px) !important; margin-top: 28px !important; border-radius: 26px !important; }
.seo-ist > h2:first-child, .seo-praksa > h2:first-child, .seo-spisak > h2:first-child, .seo-know > h2:first-child, .ks > h2:first-child, .ks > h3:first-child { margin-top: 0 !important; }
.seo-stav { padding: 16px 20px !important; margin-top: 8px !important; border-radius: 20px !important; }
.seo-text { border: 0 !important; background: none !important; }
.seo-ch ul a { padding: 12px 16px !important; border-radius: 16px !important; }
.seo-ch ul:not(.seo-laws):not(.seo-qs) { gap: 6px; }
.seo-pref blockquote, .seo-main blockquote { padding: 2px 8px 2px 16px !important; }
blockquote.lede { padding: 16px 20px !important; border-radius: 18px !important; }
.sn { padding: 12px 14px !important; border-radius: 14px !important; }
.seo-note { padding: 18px 22px !important; }
.seo-faq details > p { padding-bottom: 4px; }
@media (max-width: 760px) { .mast .seg button { min-height: 36px; min-width: 44px; padding: 0 12px !important; } }
/* statistika presuda nije skala težine: jedna mirna boja */
.ks-bars i, .ks-bar i { background: linear-gradient(90deg, var(--c-a), var(--c-b)) !important; box-shadow: none !important; }