/* Stav / Liquid metal. Product surfaces share one responsive design system. */
@layer experience {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    --paper: #080a10; --paper-2: #131722; --sheet: #10141e;
    --ink: #f5f7ff; --ink-2: #c3c9d8; --muted: #929cb1;
    --rule: #2b3243; --rule-2: #202737; --accent: #80adff; --on-accent: #06112a;
    --accent-wash: #5f92ff15; --accent-line: #7ba9ff80; --ghost: #626f88; --ghost-ink: #9daac2;
    --band-1: #6d9fff1c; --band-2: #6d9fff30; --band-3: #6d9fff48; --band-4: #6d9fff65;
    --shadow-1: 0 10px 35px #0003; --shadow-2: 0 30px 90px #0008; --scrim: #01030cb3;
    --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;
    --glass: #151b2b99; --beam: #3556cd; color-scheme: dark;
  }
  /* Raspored je van selektora teme: inače tema (veća specifičnost) pobeđuje @media i telefon dobija desktop marginu. */
  :root { --r-1: 8px; --r-2: 14px; --r-3: 24px; --maxw: 1440px; --gutter: 64px; }
  :root[data-theme="light"] {
    --paper: #f5f7fb; --paper-2: #e9eef8; --sheet: #fff; --ink: #101626; --ink-2: #3e4c63; --muted: #59677f;
    --rule: #cdd6e7; --rule-2: #dfe6f2; --accent: #175ee6; --on-accent: #fff;
    --accent-wash: #2563eb0c; --accent-line: #2563eb70; --ghost: #8390a5; --ghost-ink: #61728e;
    --glass: #ffffffad; --beam: #a6c5ff; --scrim: #192a5355; color-scheme: light;
    --shadow-1: 0 12px 40px #2b4c8a0d; --shadow-2: 0 24px 80px #2b4c8a26;
  }
  html { scroll-behavior: smooth; scroll-padding-top: 32px; }
  body { background: radial-gradient(ellipse at 85% 5%, #253b7517, transparent 32%), var(--paper); }
  .mast { position: relative; z-index: 10; }
  .mast-row { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--rule-2); }
  .brand { gap: 10px; text-decoration: none; }
  .brand-mark { font: 600 27px/1 var(--f-ui); width: 37px; height: 40px; display: grid; place-items: center; color: var(--ink); border-radius: 11px; background: linear-gradient(140deg, #a3bcff25, #ffffff03); border: 1px solid var(--rule); }
  .brand-word { font: 750 32px/1 var(--f-ui); letter-spacing: -1.8px; }
  .brand-dot { color: var(--accent); }
  .edition { margin-right: auto; font: 400 10px/1.5 var(--f-ui); letter-spacing: .03em; max-width: 170px; color: var(--muted); white-space: normal; text-align: left; }
  .edition .tnum { font-size: 9px; }
  .mast-nav { gap: 12px; }
  .nbtn { font-size: 12px; border-radius: 50px; }
  .nbtn:hover { background: var(--paper-2); }
  .seg { border: 1px solid var(--rule); background: var(--paper-2); padding: 3px; border-radius: 50px; }
  .seg button { border-radius: 50px; font-size: 11px; }
  .seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--ink); color: var(--paper); box-shadow: 0 2px 10px #0003; }
  .btn-pro { border: 1px solid var(--rule); background: var(--ink); color: var(--paper); border-radius: 50px; padding: 10px 18px; }
  .btn-pro span { display: none; }
  .btn-pro b, :root .btn-pro b { color: inherit; }
  .btn-pro:hover { background: var(--ink); filter: brightness(.92); }
  .rule-double { display: none; }
  body[data-view="home"] .cover { padding: 46px 0 0; overflow: clip; }
  body[data-view="home"] .cover-grid { display: grid; grid-template-columns: 1.16fr 1fr; align-items: center; column-gap: 0; row-gap: 22px; }
  .cover-main { position: relative; z-index: 2; min-width: 0; }
  .kicker { color: var(--accent); letter-spacing: .16em; font-size: 10px; }
  .kicker::before { display: none; }
  .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #a1bfff; box-shadow: 0 0 14px #76a8ff; }
  .cover h1 { font: 750 clamp(56px, 6.4vw, 96px)/1.02 var(--f-display); letter-spacing: -.07em; margin: 27px -120px 0 0; position: relative; z-index: 2; text-wrap: initial; }
  .cover h1 em { font-weight: 750; font-style: normal; background: linear-gradient(110deg, #d0deff 3%, #8cb4ff 38%, #7c8eff 73%, #c3b7ff); background-clip: text; -webkit-background-clip: text; color: transparent; padding: 0 0 .1em; }
  [data-theme="light"] .cover h1 em { background-image: linear-gradient(110deg, #1653c1, #427bdf 48%, #6a45c9); }
  .deck { font: 400 17px/1.75 var(--f-ui); letter-spacing: -.015em; max-width: 415px; margin-top: 20px; color: var(--muted); }
  .search, body[data-view="home"] .search { border: 1px solid var(--rule); background: linear-gradient(120deg, #809bff0c, transparent), var(--glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 20px; padding: 8px 8px 8px 20px; gap: 12px; height: 72px; box-shadow: 0 1px 0 #ffffff0a inset, 0 18px 55px #0002; }
  body[data-view="home"] .search { margin-top: 34px; max-width: 650px; }
  .search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash), 0 14px 50px #4171f016; }
  .search-field, body[data-view="home"] .search-field { border: 0; gap: 12px; }
  .search-icon { width: 21px; height: 21px; color: var(--muted); }
  .search input, body[data-view="home"] .search input { font: 400 14px/1.4 var(--f-ui); }
  .search-lab { display: none; }
  .go, body[data-view="home"] .go { height: 54px; border-radius: 14px; padding: 0 18px; color: #fff; font-size: 12px; background: linear-gradient(135deg, #4c8aff, #285be8); box-shadow: 0 1px 0 #ffffff4d inset, 0 4px 20px #2059ed35; }
  .go:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 8px 26px #2059ed66; }
  .examples { display: block; margin: 17px 0 0; }
  .examples > .sc { font-size: 9px; letter-spacing: .1em; margin-bottom: 6px; display: block; }
  .ex-row { gap: 5px 10px; }
  .ex { text-decoration: none; font: 400 10px/1.5 var(--f-ui); border-radius: 50px; color: var(--muted); padding: 5px 0; min-height: 28px; }
  .ex + .ex::before { content: "·"; margin-right: 10px; color: var(--ghost); }
  .ex:hover { color: var(--ink); background: transparent; }
  .hero-scene { height: 555px; position: relative; perspective: 1000px; isolation: isolate; --tilt-x: 0deg; --tilt-y: 0deg; }
  body:not([data-view="home"]) .hero-scene { display: none; }
  .scene-halo { position: absolute; inset: 16% -18% -3%; z-index: -1; background: radial-gradient(ellipse, #235bef37, #3b44cf10 47%, transparent 68%); filter: blur(14px); }
  #law-sculpture { display: block; position: absolute; inset: -3% -5% 0; width: 110%; height: 105%; transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform .8s ease-out; }
  .scene-fallback { position: absolute; inset: -2% 0 0; display: grid; place-items: center; font: 700 390px/1 Arial,sans-serif; background: linear-gradient(110deg, #192440 10%, #dce8ff 28%, #516990 40%, #e4ecfc 47%, #3c4f77 57%, #a0c7ff 72%, #203f7b); background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 22px 35px #1a4fcd70); transform: rotate(-18deg); }
  .hero-scene.has-webgl .scene-fallback { visibility: hidden; }
  .scene-orbit { position: absolute; left: 1%; right: -6%; bottom: 65px; height: 92px; border: 1px solid #648cff30; border-radius: 50%; transform: rotate(-13deg); box-shadow: 0 -2px 25px #4774ff15; pointer-events: none; }
  .glass-note { display: flex; align-items: center; gap: 12px; position: absolute; padding: 16px 20px; color: var(--ink); border: 1px solid #9cb6ff38; border-radius: 19px; background: linear-gradient(130deg, #b2c9ff14, #4867b005), var(--glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 20px 55px #0003, 0 1px 0 #fff1 inset; text-align: left; animation: levitate 7s ease-in-out infinite; }
  .note-query { top: 62px; right: 0; transform: rotate(5deg); animation-delay: -2s; }
  .note-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #6594ff20; color: var(--accent); }
  .note-label { display: block; font: 500 8px/1.5 var(--f-ui); letter-spacing: .16em; color: var(--muted); }
  .note-query p { font-size: 10px; margin-top: 4px; }
  .note-answer { left: 8px; bottom: 80px; min-width: 265px; transform: rotate(-6deg); }
  .note-answer:hover { border-color: var(--accent); background-color: var(--sheet); }
  .note-symbol { font: 400 42px/1 var(--f-ui); color: var(--accent); }
  .note-answer strong { display: block; font-size: 25px; font-weight: 600; letter-spacing: -.05em; margin-top: 2px; }
  .note-detail { display: block; font-size: 9px; color: var(--ink-2); margin-top: 4px; }
  .note-arrow { font-size: 20px; color: var(--accent); margin-left: auto; }
  .scene-caption { position: absolute; bottom: 18px; width: 100%; text-align: center; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
  .motion-toggle { position: absolute; bottom: 12px; right: 0; border: 1px solid var(--rule); color: var(--muted); border-radius: 50%; width: 28px; height: 28px; font-size: 10px; }
  .motion-toggle:hover { color: var(--ink); border-color: var(--accent); }
  body[data-view="home"] .cover-aside { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; border: 0; border-top: 1px solid var(--rule-2); padding: 24px 0 28px; margin-top: 5px; }
  .facts { margin: 0; display: flex; gap: 44px; }
  .fact { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; }
  .fact b { font: 600 25px/1 var(--f-ui); letter-spacing: -.06em; }
  .fact span { font: 400 10px/1.5 var(--f-ui); color: var(--muted); max-width: 90px; }
  .explore-link { display: flex; gap: 24px; align-items: center; color: var(--muted); font-size: 10px; text-decoration: none; }
  .explore-link span:last-child { width: 32px; height: 32px; border: 1px solid var(--rule); border-radius: 50%; display: grid; place-items: center; }
  .experience-heading { padding: 98px 0 42px; }
  .experience-heading .sc { color: var(--accent); font-size: 9px; }
  .experience-heading h2 { font-size: clamp(34px, 4.5vw, 62px); line-height: 1.09; letter-spacing: -.055em; font-weight: 650; margin: 18px 0; }
  .experience-heading h2 span, .index h2 span { color: var(--muted); }
  .experience-heading > p:last-child { font-size: 14px; color: var(--muted); }
  .specimen { border: 0; gap: 16px; }
  .spec, .spec:first-child, .spec:last-child { position: relative; padding: 30px; overflow: hidden; border: 1px solid var(--rule-2); border-radius: 26px; background: radial-gradient(ellipse at 100% 0, #618cff0e, transparent 65%), var(--sheet); transition: border-color .35s, transform .35s, box-shadow .35s; }
  .spec:hover { transform: translateY(-5px); border-color: var(--accent-line); box-shadow: 0 20px 50px #0002; }
  .spec .sc { color: var(--accent); font-size: 9px; }
  .spec h3 { font: 600 26px/1.12 var(--f-ui); letter-spacing: -.045em; margin: 42px 0 14px; max-width: 230px; }
  .spec > p:not(.sc) { color: var(--muted); font: 400 12px/1.8 var(--f-ui); }
  .mini { border: 1px solid var(--rule); background: var(--paper); padding: 18px; margin-top: 28px; border-radius: 16px; min-height: 89px; }
  .mini-cite { color: var(--accent); font-size: 12px; }
  .mini-title { font-size: 11px; font-weight: 500; }
  .mini-q { font: 400 13px/1.8 var(--f-ui); }
  .index { margin-top: 110px; padding: 42px 0; gap: 70px; border-top: 1px solid var(--rule-2); grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .index h2 { font: 650 44px/1.1 var(--f-ui); letter-spacing: -.055em; margin-top: 22px; }
  .index-lede { font-size: 13px; line-height: 1.8; color: var(--muted); max-width: 320px; }
  .index-story { margin-top: 25px; font-size: 12px; }
  .index-cols { column-gap: 28px; }
  .index-part > .sc { border-color: var(--rule); font-size: 9px; }
  .ix { border-radius: 9px; }
  .foot { font-size: 10px; padding-top: 30px; }
  .foot .wrap { gap: 12px 40px; }
  .foot p { max-width: 580px; }
  /* The working application uses the same surfaces as the opening scene. */
  body:not([data-view="home"]) .cover { padding: 20px 0; border-bottom: 1px solid var(--rule-2); }
  .echo { border-color: var(--rule-2); }
  .echo-q { font-size: 23px; font-style: normal; font-weight: 500; letter-spacing: -.035em; }
  .res-grid { gap: 38px; }
  .answer { background: var(--sheet); border: 1px solid var(--rule-2); border-radius: 28px; padding: 32px; box-shadow: var(--shadow-1); }
  .headline { font-weight: 650; font-size: clamp(34px, 4.5vw, 62px); letter-spacing: -.055em; line-height: 1.08; }
  .headline.long { font-weight: 650; letter-spacing: -.04em; }
  .cite-name, .r-note, .alt-when, .rail h3 .t, .why-list q { font-style: normal; }
  .facts3 { border-top: 1px solid var(--rule); }
  .facts3 dd { font-size: 13px; }
  .facts3 dt { font-size: 9px; letter-spacing: .08em; }
  .lede { font-size: 17px; line-height: 1.7; border-color: var(--accent); padding-left: 18px; color: var(--ink-2); }
  .penalty { background: var(--paper); border-color: var(--rule); }
  .pen-val { font-size: 22px; font-weight: 600; letter-spacing: -.035em; }
  .rail { gap: 24px; }
  .rail > section, .rail > .wi { padding: 24px; border: 1px solid var(--rule-2); border-radius: 24px; background: var(--sheet); }
  .rail h3 { border-color: var(--rule); }
  .rail h3 .t { font-size: 20px; font-weight: 600; letter-spacing: -.04em; }
  .rail .hint { font-size: 12px; }
  .alt-title { font-size: 16px; font-weight: 600; }
  .alt-when { font-size: 12px; }
  .chip { border-radius: 12px; }
  .btn { border-radius: 50px; font-size: 12px; }
  .btn-ink { background: var(--ink); color: var(--paper); }
  .why-list li { font-size: 13px; line-height: 1.65; }
  .art-title { font-weight: 650; letter-spacing: -.05em; }
  .stav { font-size: 16px; line-height: 1.85; }
  .modal, .toc, .menu { background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--shadow-2); }
  .modal { border-radius: 28px; }
  .modal h2 { font-weight: 600; letter-spacing: -.04em; }
  .input { border-radius: 12px; }
  .sc { letter-spacing: .1em; }
  .reveal { opacity: 1; transform: none; }
  .motion-ready .reveal:not(.is-visible) { opacity: 0; transform: translateY(25px); }
  .motion-ready .reveal { transition: opacity .8s ease var(--reveal-delay, 0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms); }
  body.motion-paused .glass-note { animation-play-state: paused; }
  @keyframes levitate { 0%, 100% { translate: 0 0; } 50% { translate: 0 -11px; } }
  @media (min-width: 761px) and (max-width: 1150px) {
    :root { --gutter: 32px; }
    .mast-nav { gap: 5px; }
    .cover h1 { font-size: clamp(56px, 7vw, 80px); }
    .hero-scene { height: 500px; }
    .note-query { right: -6px; padding: 12px; }
    .note-query p { font-size: 9px; }
    .note-answer { left: 15px; bottom: 70px; min-width: 230px; padding: 12px 16px; }
    .search .go-txt { display: none; }
    .search .go { width: 52px; justify-content: center; }
    .spec, .spec:first-child, .spec:last-child { padding: 24px; }
    .index { gap: 35px; }
  }
  @media (max-width: 760px) {
    :root { --gutter: 22px; }
    .mast { z-index: 61; }
    body[data-view="clan"] .mast { z-index: 45; }
    .mast-row { height: 68px; gap: 10px; }
    .brand-word { font-size: 28px; }
    .brand-mark { width: 30px; height: 33px; font-size: 23px; border-radius: 9px; }
    .mast-nav { gap: 3px; }
    .mast-nav .nbtn, .mast-nav .ibtn { min-width: 36px; width: 36px; }
    .mast-nav .seg { height: 34px; }
    .mast-nav .seg button { height: 26px; padding: 0 9px; font-size: 10px; }
    body[data-view="home"] .cover { padding: 38px 0 0; }
    body[data-view="home"] .cover-grid { display: flex; flex-direction: column; gap: 0; }
    .cover-main { width: 100%; text-align: center; }
    .cover-main .kicker { justify-content: center; font-size: 8px; }
    .cover h1 { font-size: clamp(43px, 10.8vw, 76px); letter-spacing: -.065em; margin: 22px -8px 0; }
    .deck { font-size: 13px; line-height: 1.7; max-width: 340px; margin: 17px auto 0; padding: 0 12px; }
    body[data-view="home"] .search { position: relative; left: auto; right: auto; bottom: auto; width: 100%; margin-top: 27px; height: 64px; border-radius: 18px; padding: 7px 7px 7px 15px; }
    .search { border-radius: 20px; padding: 6px 6px 6px 14px; }
    .search input, body[data-view="home"] .search input { font-size: 16px; }
    .search-icon { width: 18px; height: 18px; }
    .search-field { gap: 8px; }
    .go, body[data-view="home"] .go { height: 48px; width: 48px; padding: 0; border-radius: 13px; }
    body[data-view="home"] .dock-fade { display: none; }
    .examples { margin: 14px 0 0; text-align: left; }
    .examples > .sc { padding: 0; font-size: 8px; margin-bottom: 3px; }
    .ex-row { overflow: auto; margin: 0; padding: 0 0 4px; gap: 12px; }
    .ex { background: transparent; border: 0; padding: 4px 0; font-size: 9px; min-height: 30px; }
    .ex + .ex::before { display: none; }
    .hero-scene { width: min(100%, 460px); height: 350px; margin: -2px 0 16px; }
    .scene-fallback { font-size: 290px; }
    .note-query { top: 32px; right: 0; padding: 12px; }
    .note-answer { bottom: 50px; left: 0; min-width: 218px; padding: 12px 15px; border-radius: 16px; }
    .note-answer strong { font-size: 22px; }
    .note-detail { font-size: 8px; }
    .scene-caption { bottom: 4px; font-size: 8px; }
    .motion-toggle { bottom: 0; }
    .scene-orbit { bottom: 42px; height: 65px; }
    body[data-view="home"] .cover-aside { width: 100%; padding: 22px 0; margin: 0; }
    .facts { gap: 20px; justify-content: space-between; width: 100%; }
    .fact { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
    .fact b { font-size: 24px; }
    .fact span { font-size: 9px; max-width: 96px; }
    .explore-link { display: none; }
    .experience-heading { padding: 64px 0 30px; }
    .experience-heading h2 { font-size: 37px; }
    .experience-heading > p:last-child { font-size: 12px; }
    .specimen { gap: 14px; }
    .spec, .spec:first-child, .spec:last-child { padding: 26px; border: 1px solid var(--rule-2); border-radius: 24px; }
    .spec h3 { margin-top: 28px; font-size: 29px; max-width: none; }
    .spec > p:not(.sc) { font-size: 13px; }
    .index { margin-top: 64px; padding-top: 32px; gap: 28px; grid-template-columns: 1fr; }
    .index h2 { font-size: 38px; }
    .index-cols { columns: 1; }
    .foot p { font-size: 10px; }
    body[data-view="home"] main { padding-bottom: 30px; }
    body[data-view="home"] .foot { padding-bottom: 30px; }
    body:not([data-view="home"]) .cover { padding: 0; border: 0; }
    .echo-q { font-size: 21px; }
    .res-grid { gap: 22px; }
    .answer { padding: 22px 18px; border-radius: 23px; }
    .headline { font-size: 38px; }
    .headline.long { font-size: 32px; }
    .facts3 { grid-template-columns: 1fr; gap: 0; }
    .facts3 > div, .facts3 > div:first-child { border-left: 0; padding: 12px 0; }
    .facts3 > div + div { border-top: 1px solid var(--rule-2); }
    .lede { font-size: 15px; }
    .penalty { padding: 18px 14px; }
    .pen-val { font-size: 19px; }
    .rail > section, .rail > .wi { padding: 20px; }
    .why-list li { font-size: 12px; }
    .reader { padding-top: 24px; }
    .stav { font-size: 15px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .glass-note { animation: none; }
    .motion-ready .reveal:not(.is-visible) { opacity: 1; transform: none; }
    .motion-ready .reveal, #law-sculpture, .spec, .go { transition: none; }
  }
}

/* ============================================================ čitljivost
   Završna obrada tipografije: nijedan tekst ispod 11 px, radni tekst 13–17 px. Sloj je isti, pa ova pravila pobeđuju ranija. */
@layer experience {
  .edition { font-size: 11.5px; max-width: 200px; }
  .edition .tnum { font-size: 11px; }
  .nbtn { font-size: 13px; }
  .seg button { font-size: 12px; }
  .kicker { font-size: 11px; }
  .search input, body[data-view="home"] .search input { font-size: 16px; letter-spacing: -.01em; }
  .go, body[data-view="home"] .go { font-size: 14px; font-weight: 600; }
  .examples > .sc { font-size: 11px; margin-bottom: 8px; }
  .ex { font-size: 13px; }
  .note-label { font-size: 10px; }
  .note-query p { font-size: 12.5px; }
  .note-detail { font-size: 11.5px; }
  .scene-caption { font-size: 11px; }
  .fact span { font-size: 12px; max-width: 120px; }
  .explore-link { font-size: 12.5px; }
  .experience-heading .sc, .spec .sc, .index-part > .sc { font-size: 11px; }
  .experience-heading > p:last-child { font-size: 16px; }
  .spec > p:not(.sc) { font-size: 14px; line-height: 1.7; }
  .mini-cite { font-size: 13px; }
  .mini-title { font-size: 13px; }
  .mini-q { font-size: 15px; }
  .index-lede { font-size: 15px; line-height: 1.7; }
  .index-story { font-size: 14px; }
  .foot { font-size: 12px; line-height: 1.6; }
  .facts3 dt { font-size: 11px; }
  .facts3 dd { font-size: 14.5px; }
  .rail .hint, .alt-when { font-size: 13px; }
  .btn { font-size: 13px; }
  .why-list li { font-size: 14px; }
  .stav { font-size: 17px; line-height: 1.8; }
  @media (min-width: 761px) and (max-width: 1150px) {
    .note-query p { font-size: 11.5px; }
  }
  @media (max-width: 760px) {
    .mast-nav .seg button { font-size: 12px; padding: 0 10px; }
    .cover-main .kicker { font-size: 11px; }
    .deck { font-size: 16px; line-height: 1.6; max-width: 360px; padding: 0; }
    .examples > .sc { font-size: 11px; margin-bottom: 8px; }
    .ex-row { gap: 8px; scrollbar-width: none; }
    .ex { font-size: 13px; min-height: 36px; padding: 0 13px; border: 1px solid var(--rule); border-radius: 50px; background: var(--glass); white-space: nowrap; color: var(--ink-2); }
    .note-label { font-size: 9.5px; }
    .note-query p { font-size: 12px; }
    .note-detail { font-size: 11px; }
    .scene-caption { font-size: 11px; }
    .fact span { font-size: 11.5px; }
    .experience-heading > p:last-child { font-size: 15px; }
    .spec > p:not(.sc) { font-size: 15px; }
    .foot p { font-size: 12px; }
    .lede { font-size: 16px; }
    .why-list li { font-size: 14px; }
    .stav { font-size: 17px; line-height: 1.75; }
    .crumbs { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
    .crumbs > span:nth-child(2) { display: inline; }
  }
}

/* ============================================================ Precizirajmo (pitanja u kartici odgovora) */
@layer experience {
  .clarify { margin: 26px 0 6px; padding: 22px; border-radius: 22px; border: 1px solid var(--accent-line); background: radial-gradient(ellipse at 0 0, var(--band-2), transparent 62%), var(--paper-2); box-shadow: 0 1px 0 #ffffff0d inset, 0 18px 50px -24px #2a5bff55; position: relative; overflow: hidden; animation: cl-in .5s var(--ease-out) both; }
  .clarify.is-empty { display: none; }
  .clarify::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .7; }
  .cl-h { margin-bottom: 4px; }
  .cl-t { font: 650 20px/1.2 var(--f-ui); letter-spacing: -.03em; color: var(--ink); }
  .cl-s { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
  .cl-q { margin-top: 18px; }
  .cl-qt { font: 550 15.5px/1.45 var(--f-ui); color: var(--ink); margin-bottom: 10px; }
  .cl-opts { display: flex; flex-wrap: wrap; gap: 8px; }
  .cl-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 52px; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--sheet); text-align: left; transition: border-color var(--d-1), background var(--d-1), transform .25s var(--ease-out), box-shadow .25s; }
  .cl-opt:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px -14px var(--accent); }
  .cl-opt:active { transform: translateY(0) scale(.98); }
  .cl-l { font: 600 14px/1.25 var(--f-ui); color: var(--ink); }
  .cl-p { font: 450 12.5px/1.3 var(--f-ui); color: var(--accent); }
  .cl-no .cl-p { color: var(--muted); }
  .cl-opt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); box-shadow: 0 10px 28px -12px var(--accent); }
  .cl-opt[aria-pressed="true"] .cl-l, .cl-opt[aria-pressed="true"] .cl-p { color: var(--on-accent); }
  .cl-yn .cl-opts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .cl-done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule-2); }
  .cl-done .sc { margin-right: 4px; }
  .cl-tag { padding: 4px 10px; border-radius: 50px; font-size: 12.5px; background: var(--band-2); color: var(--ink); }
  .cl-tag.no { background: transparent; border: 1px solid var(--rule); color: var(--muted); }
  .cl-done .link { margin-left: auto; font-size: 13px; }
  @keyframes cl-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @media (max-width: 760px) {
    .clarify { padding: 18px 16px; margin: 20px 0 4px; border-radius: 20px; }
    .cl-opts { display: grid; grid-template-columns: 1fr 1fr; }
    .cl-opt { min-height: 56px; }
    .cl-done .link { margin-left: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .clarify { animation: none; } .cl-opt { transition: none; } }
}
/* ============================================================ Svi oblici dela + Šta sada? */
@layer experience {
  .cl-forms { margin-top: 18px; border-top: 1px solid var(--rule-2); padding-top: 14px; }
  .cl-forms > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; min-height: 36px; border-radius: 10px; }
  .cl-forms > summary::-webkit-details-marker { display: none; }
  .cl-forms > summary::after { content: ""; width: 9px; height: 9px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease-out); }
  .cl-forms[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .cl-forms > summary .cl-qt { margin: 0; }
  .cl-n { min-width: 24px; height: 24px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 50px; background: var(--band-2); color: var(--accent); font: 600 12.5px/1 var(--f-ui); }
  .cl-sum-h { font-size: 13px; color: var(--muted); }
  .cl-flist { margin-top: 12px; display: grid; gap: 6px; }
  .cl-flist.many { max-height: 420px; overflow: auto; padding-right: 4px; overscroll-behavior: contain; }
  .cl-form { width: 100%; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 11px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--sheet); text-align: left; transition: border-color var(--d-1), background var(--d-1), transform .25s var(--ease-out); }
  .cl-form:hover { border-color: var(--accent); transform: translateX(3px); }
  .cl-fc { font: 600 13px/1.4 var(--f-ui); color: var(--accent); white-space: nowrap; }
  .cl-ft { font: 400 14px/1.5 var(--f-ui); color: var(--ink-2); }
  .cl-fp { font: 600 13px/1.4 var(--f-ui); color: var(--ink); white-space: nowrap; }
  .cl-form[aria-pressed="true"] { border-color: var(--accent); background: linear-gradient(90deg, var(--band-2), transparent 70%), var(--sheet); box-shadow: inset 3px 0 0 var(--accent); }
  .cl-form[aria-pressed="true"] .cl-ft { color: var(--ink); }

  .next { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule); }
  .next-list { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
  .nx { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 1px solid var(--rule-2); border-radius: 16px; background: var(--paper); }
  .nx-i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--band-2); color: var(--accent); font: 650 13px/1 var(--f-ui); }
  .nx-t { font: 600 14.5px/1.35 var(--f-ui); color: var(--ink); }
  .nx-d { margin-top: 4px; font: 400 13px/1.55 var(--f-ui); color: var(--muted); }
  .nx-hitno { border-color: #ff8a7a66; background: linear-gradient(120deg, #ff6b5a14, transparent 60%), var(--paper); }
  .nx-hitno .nx-i { background: #ff6b5a2e; color: #ff9a8c; }
  [data-theme="light"] .nx-hitno .nx-i { color: #c2321f; }
  .foot-link { color: var(--accent); text-underline-offset: 3px; }
  @media (max-width: 760px) {
    .cl-form { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 14px; }
    .cl-fc { grid-column: 1; }
    .cl-fp { grid-column: 2; grid-row: 1; }
    .cl-ft { grid-column: 1 / -1; font-size: 14.5px; }
    .cl-sum-h { display: none; }
    .next-list { grid-template-columns: 1fr; }
    /* oznake ispod reči priče na uskom ekranu razmiču rečenicu: ostaju samo podvučene reči i fusnote */
    .echo-q .gl { display: none; }
  }
  @media (prefers-reduced-motion: reduce) { .cl-form, .cl-forms > summary::after { transition: none; } }
}
/* ============================================================ iskrenost o pouzdanosti */
@layer experience {
  .unsure { margin: 14px 0 4px; padding: 12px 16px; border-radius: 14px; border: 1px solid #ffb86b66; background: linear-gradient(120deg, #ffb86b1a, transparent 70%), var(--paper); color: var(--ink-2); font: 400 14px/1.55 var(--f-ui); }
  .unsure b { color: var(--ink); font-weight: 600; }
  .unsure.soft { border-color: var(--rule); background: var(--paper); color: var(--muted); }
  .nx-zakon .nx-i { background: var(--paper-2); color: var(--muted); }
}@layer experience {
  /* nesiguran odgovor ne sme da izgleda kao presuda: manji, prigušen naslov */
  .answer.is-low .headline { font-size: clamp(26px, 3vw, 38px); color: var(--ink-2); }
  .answer.is-low .cite-num { color: var(--muted); }
}@layer experience {
  /* Šta sada: na telefonu se vidi naslov koraka, objašnjenje se otvara dodirom */
  .nx-b > summary { list-style: none; cursor: default; }
  .nx-b > summary::-webkit-details-marker { display: none; }
  @media (max-width: 760px) {
    .nx { padding: 12px 14px; }
    .nx-b > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 28px; }
    .nx-b > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .25s; }
    .nx-b[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  }
}@layer experience {
  .law-note { margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--accent-wash); color: var(--ink-2); font: 400 14px/1.6 var(--f-ui); }
  .law-note b { display: block; margin-bottom: 2px; color: var(--accent); font: 600 11px/1.4 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; }
}
/* ============================================================ Mogući članovi (ravnopravna ponuda kad opis ne odlučuje) */
@layer experience {
  .cands { margin: 0 0 22px; padding: 18px 20px; border: 1px solid var(--rule-2); border-radius: 22px; background: var(--sheet); }
  .cand-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
  .cand { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 13px 16px; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper); text-align: left; transition: border-color var(--d-1), transform .25s var(--ease-out), box-shadow .25s; }
  .cand:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px -16px var(--accent); }
  .cand-n { grid-column: 1; font: 600 12.5px/1.3 var(--f-ui); color: var(--accent); letter-spacing: .02em; }
  .cand-p { grid-column: 2; grid-row: 1; font: 500 12.5px/1.3 var(--f-ui); color: var(--muted); white-space: nowrap; }
  .cand-t { grid-column: 1 / -1; font: 600 16px/1.25 var(--f-ui); letter-spacing: -.02em; color: var(--ink); }
  .cand[aria-pressed="true"] { border-color: var(--accent); background: linear-gradient(135deg, var(--band-2), transparent 70%), var(--paper); box-shadow: inset 0 0 0 1px var(--accent); }
  .cand-h { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
  @media (max-width: 760px) {
    .cands { padding: 16px; border-radius: 20px; }
    .cand-row { grid-template-columns: 1fr; gap: 8px; }
  }
  @media (prefers-reduced-motion: reduce) { .cand { transition: none; } }
}/* ============================================================ jedan tok: okolnosti u bloku „Precizirajmo“ + sklapanje kartice na telefonu */
@layer experience {
  .cl-more .chips { margin-top: 12px; }
  .cl-more .chip:not([aria-pressed="true"]) .chip-p { color: var(--ink-2); }
  .cl-more .chip[data-kind="go"]:not([aria-pressed="true"]) .chip-p { color: var(--accent); }
  .cl-more .wi-note { margin-top: 12px; font-size: 13.5px; }
  .fold { border-top: 1px solid var(--rule-2); }
  .fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; cursor: pointer; list-style: none; }
  .fold > summary::-webkit-details-marker { display: none; }
  .fold > summary .sc { color: var(--ink-2); }
  .fold > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease-out); }
  .fold[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .fold > .penalty, .fold > .why { margin-top: 0; margin-bottom: 16px; }
  .fold > .why { padding-top: 0; border-top: 0; }
  .fold > .why > .sc, .fold .pen-head > .sc { display: none; }
  .fold + .next { border-top: 1px solid var(--rule-2); padding-top: 18px; margin-top: 0; }
  @media (prefers-reduced-motion: reduce) { .fold > summary::after { transition: none; } }
}
/* ============================================================ lakši režim (slab uređaj, štednja podataka, animacija koja ne stiže) */
.lite *, .lite *::before, .lite *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.lite .reveal { transition-duration: .2s !important; }
.lite .search, .lite body[data-view="home"] .search { background: var(--sheet); }
/* ============================================================ izbor oblasti (kad opis ne vodi do jednog člana) */
@layer experience {
  .areas { margin-top: 20px; }
  .areas-h { font: 550 14.5px/1.4 var(--f-ui); color: var(--ink-2); margin-bottom: 10px; }
  .areas-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .area { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 50px; background: var(--sheet); color: var(--ink); font: 550 14px/1.2 var(--f-ui); text-align: left; transition: border-color var(--d-1), transform .25s var(--ease-out); }
  .area:hover { border-color: var(--accent); transform: translateY(-1px); }
  .area-n { font: 500 12px/1 var(--f-ui); color: var(--muted); }
  .unsure + .areas { margin: 10px 0 22px; }
  .areas-fold > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font: 550 14px/1.3 var(--f-ui); color: var(--accent); }
  .areas-fold > summary::-webkit-details-marker { display: none; }
  .areas-fold > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
  .areas-fold[open] > summary::after { transform: rotate(-135deg); }
  .areas-fold .areas-row { margin-top: 8px; }
  @media (prefers-reduced-motion: reduce) { .area { transition: none; } }
}
@layer experience {
  .law-note.pk { margin: 14px 0 20px; border-left-color: var(--warn, #e0a23a); }
  .law-note.pk b { color: var(--ink); }
  .empty .law-note.pk { max-width: 62ch; text-align: left; }
}
/* ============================================================ Iz sudske prakse (odluke Vrhovnog suda uz član) */
@layer experience {
  .pm { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule-2); }
  .pm-list { margin-top: 12px; display: grid; gap: 10px; }
  .pm-i { padding: 16px 18px; border: 1px solid var(--rule-2); border-radius: 16px; background: var(--paper-2); }
  .pm-q { font: 400 15px/1.6 var(--f-text, var(--f-ui)); color: var(--ink); }
  .pm-s { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 500 13px/1.4 var(--f-ui); color: var(--muted); }
  .pm-s a { color: var(--accent); font-weight: 600; text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; gap: 4px; }
  .pm-s a:hover { text-decoration: underline; }
  .pm-o { margin-top: 2px; font: 500 13px/1.45 var(--f-ui); color: var(--muted); }
  .pm-more, .pm-n { margin-top: 10px; font: 400 12.5px/1.5 var(--f-ui); color: var(--muted); }
  .fold > .pm { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 16px; }
  .fold > .pm > .sc { display: none; }
  .tab-panel > .pm, #tab-panel > .pm { margin-top: 40px; }
}

/* ---- dorade posle nezavisnog pregleda izgleda (2026-11-11) */
@layer experience {
  /* V3: prazan znak „N“ (bez novčane kazne) ne sme da liči na polje za potvrdu */
  .r-fine:not(.on) { border-color: transparent; background: transparent; }
  /* V4: natpis ispod skulpture i dugme pauze malo niže, da ih prsten ne seče */
  .scene-caption { bottom: 4px; }
  .motion-toggle { bottom: -2px; }
  /* V6: „Može biti i“ prati skrolovanje na širokom ekranu */
  @media (min-width: 1101px) { .rail { position: sticky; top: 24px; align-self: start; } }
  /* V7: „Šta sada?“ u dve kolone; neparna poslednja kartica zauzima ceo red */
  @media (min-width: 761px) {
    .next-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .next-list > .nx:last-child:nth-child(odd) { grid-column: 1 / -1; }
  }
  /* V10: spisak članova u čitaču bledi na dnu umesto da bude presečen */
  .rtoc { -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent); padding-bottom: 44px; scrollbar-width: thin; }
  /* V11: bez automatskog deljenja reči (Firefox deli „ka-znom“, Chromium ne) */
  .lede, .stav-t { hyphens: manual; -webkit-hyphens: manual; }
  /* V12: podnaslov zaglavlja u jednom redu */
  .edition { font-size: 11.5px; max-width: none; white-space: nowrap; }
  /* V13: traka „Mogući članovi“ odvojena od linije iznad, ritam 32/32 */
  .cands { margin: 32px 0 0; }
  /* V14: kazna u tabeli čitača ne lomi se usred raspona */
  .ktable td:nth-child(2) { white-space: nowrap; }
  /* V15: taster i natpis prečice ostaju zajedno */
  .kh { white-space: nowrap; display: inline-block; margin-right: 8px; }
}

@layer experience {
  /* napomena o ispravljenoj grešci u kucanju */
  .fix-note { margin: 10px 0 0; font: 500 13.5px/1.5 var(--f-ui); color: var(--muted); }
  .fix-note s { opacity: .8; }
  .fix-note b { color: var(--ink); font-weight: 650; }
}

@layer experience {
  /* spisak odluka najvišeg suda uz član (čitač) */
  .ps { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--rule-2); }
  .ps-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
  .ps-i { display: grid; grid-template-columns: minmax(104px, auto) 1fr auto; gap: 4px 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule-2); font: 500 13.5px/1.4 var(--f-ui); }
  .ps-i a { color: var(--accent); font-weight: 650; text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
  .ps-i a:hover { text-decoration: underline; }
  .ps-m { color: var(--muted); }
  .ps-r { color: var(--ink-2); font-weight: 600; text-align: right; }
  .ps-more > summary { cursor: pointer; margin-top: 10px; font: 600 13.5px/1.4 var(--f-ui); color: var(--accent); min-height: 44px; display: flex; align-items: center; }
  @media (max-width: 760px) { .ps-i { grid-template-columns: 1fr; gap: 0; } .ps-r { text-align: left; } }
}

@layer experience {
  /* „U drugim zakonima“ — dodatak ispod odgovora */
  .dz-wrap { margin-top: 28px; }
  .dz { padding: 24px 28px; border: 1px solid var(--rule-2); border-radius: 24px; background: var(--sheet); }
  .dz-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .dz-i { display: grid; gap: 4px; height: 100%; padding: 14px 16px; border: 1px solid var(--rule-2); border-radius: 16px; text-decoration: none; color: inherit; transition: border-color var(--d-1) var(--ease), transform var(--d-1) var(--ease); }
  .dz-i:hover { border-color: var(--accent); transform: translateY(-1px); }
  .dz-c { font: 650 12.5px/1.3 var(--f-ui); color: var(--accent); letter-spacing: .02em; }
  .dz-n { font: 650 16px/1.3 var(--f-ui); color: var(--ink); }
  .dz-t { font: 400 13.5px/1.5 var(--f-ui); color: var(--muted); }
  .dz .pm-n a { color: var(--accent); }
  @media (max-width: 760px) { .dz { padding: 18px 16px; border-radius: 20px; } }
}

@layer experience { .dz-wrap.dz-first { margin: 28px 0 0; } .dz-first + .res-grid, .dz-first + .cands { margin-top: 24px; } }

@layer experience { .pk-links { white-space: normal; } .pk-links a { color: var(--accent); font-weight: 600; } }

@layer experience {
  /* kontrast belog natpisa na dugmetu „Pronađi član“: najmanje 4,5:1 na celom prelivu */
  .go, body[data-view="home"] .go, .seo-search button { background: linear-gradient(135deg, #2f6bea, #1f4fd0); }
}

@layer experience {
  /* vremensko važenje: izmena objavljena, a još se ne primenjuje */
  .law-note.vz { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule-2)); }
  .buduci { margin: 28px 0 0; padding: 16px 20px; border: 1px dashed var(--rule); border-radius: 16px; }
  .buduci > summary { cursor: pointer; font: 650 14px/1.4 var(--f-ui); color: var(--accent); min-height: 32px; display: flex; align-items: center; }
  .buduci-n { margin: 12px 0 6px; font: 650 16px/1.35 var(--f-ui); }
  .buduci-s, .buduci-t li { margin: 8px 0 0; font: 400 15px/1.6 var(--f-ui); color: var(--ink-2); }
  .buduci-t { list-style: none; padding-left: 18px; margin: 4px 0 0; }
}

@layer experience {
  /* dug naziv dela ne sme da zauzme ceo ekran */
  .headline.long { font-size: clamp(26px, 3.1vw, 42px); line-height: 1.12; }
  @media (max-width: 760px) { .headline.long { font-size: 26px; } }
}

@layer experience { .nx-l { display: block; margin-top: 6px; font-size: 13px; } .nx-l a { color: var(--accent); font-weight: 600; } }

@layer experience {
  /* dodir: male kontrole dobijaju nevidljivo prošireno polje (najmanje oko 44 px), bez promene izgleda */
  @media (pointer: coarse) {
    .seg button, .foot-link, button.link, .nx-t, #btn-clear, .motion-toggle, .ex, .pm-s a, .ps-i a, .dz .pm-n a, .fix-note .link, .echo-links .link, .seo-script { position: relative; }
    .seg button::after, .foot-link::after, button.link::after, .nx-t::after, #btn-clear::after, .motion-toggle::after, .ex::after, .pm-s a::after, .ps-i a::after, .dz .pm-n a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
    .foot-link, button.link { display: inline-block; padding-block: 6px; }
  }
}

@layer experience {
  details.law-note.vz > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; }
  details.law-note.vz > summary::-webkit-details-marker { display: none; }
  details.law-note.vz > summary::after { content: "+"; margin-left: auto; font-weight: 600; color: var(--accent); }
  details.law-note.vz[open] > summary::after { content: "–"; }
  details.law-note.vz > p { margin: 8px 0 0; }
}

@layer experience { .ps-link { margin: 14px 0 0; font: 600 14px/1.4 var(--f-ui); } }

@layer experience {
  /* šta sudovi stvarno izriču (statistika izrečenih sankcija uz član) */
  .ks { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--rule-2); }
  .ks-lead { margin-top: 10px; font: 400 15px/1.5 var(--f-ui); color: var(--ink-2, var(--ink)); }
  .ks-lead b { font-weight: 700; color: var(--ink); }
  .ks-q { color: var(--muted); font-size: .92em; }
  .ks-bars { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
  .ks-bars li { display: grid; grid-template-columns: minmax(118px, 30%) 1fr 48px 56px; gap: 10px; align-items: center; font: 500 14px/1.3 var(--f-ui); }
  .ks-bar { height: 10px; border-radius: 99px; background: var(--rule-2); overflow: hidden; }
  .ks-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
  .ks-bars li:not(:first-child) .ks-bar i { opacity: .55; }
  .ks-p { text-align: right; font-weight: 700; color: var(--ink); }
  .ks-n { text-align: right; color: var(--muted); font-size: 13px; }
  .ks-z { margin-top: 16px; font: 400 15px/1.6 var(--f-ui); color: var(--ink-2, var(--ink)); }
  .ks-z b { color: var(--ink); font-weight: 700; }
  .ks-zh { font-weight: 650; color: var(--ink); }
  .ks-more > summary { cursor: pointer; margin-top: 8px; font: 600 13.5px/1.4 var(--f-ui); color: var(--accent); min-height: 44px; display: flex; align-items: center; }
  .ks-tab { border-collapse: collapse; font: 500 13.5px/1.4 var(--f-ui); margin-top: 4px; }
  .ks-tab th { text-align: left; font-weight: 500; padding: 6px 24px 6px 0; color: var(--ink-2, var(--ink)); }
  .ks-tab td { text-align: right; padding: 6px 0 6px 18px; color: var(--muted); }
  .ks-tab tr { border-bottom: 1px solid var(--rule-2); }
  @media (max-width: 560px) { .ks-bars li { grid-template-columns: 1fr 44px 50px; } .ks-bars .ks-t { grid-column: 1 / -1; margin-bottom: -4px; } }
  .ks-line { margin: 14px 0 0; font: 500 14px/1.5 var(--f-ui); color: var(--ink-2); }
  .ks-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 4px; border-radius: 50%; background: var(--accent-wash, var(--rule-2)); color: var(--accent); font-weight: 700; font-size: 12px; }
}

@layer experience { .ps-k { grid-column: 1 / -1; color: var(--ink-2); font-weight: 500; font-size: 13px; } }

@layer experience {
  /* planovi i „Moj nalog“ */
  .modal.modal-wide { max-width: min(94vw, 980px); }
  .modal-wide .modal-inner { max-height: min(92dvh, 900px); overflow: auto; }
  .pl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: var(--s4); }
  .pl { display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 16px; border: 1px solid var(--rule-2); border-radius: 18px; background: var(--paper); }
  .pl.pl-top { border-color: var(--accent-line, var(--accent)); box-shadow: 0 0 0 3px var(--accent-wash); }
  .pl.is-mine { border-color: var(--accent); }
  .pl h3 { font: 650 17px/1.2 var(--f-ui); letter-spacing: -.01em; }
  .pl-price { font: 700 22px/1.15 var(--f-ui); letter-spacing: -.02em; color: var(--ink); }
  .pl-desc { font: 400 13.5px/1.45 var(--f-ui); color: var(--muted); min-height: 2.9em; }
  .pl-list { list-style: none; margin: 4px 0 auto; padding: 0; display: grid; gap: 7px; font: 400 14px/1.4 var(--f-ui); color: var(--ink-2); }
  .pl-list li { padding-left: 20px; position: relative; }
  .pl-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
  .pl .btn { margin-top: 12px; }
  .pl-now { margin-top: 12px; font: 600 13.5px/1.4 var(--f-ui); color: var(--accent); }
  .pl-int { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border: 1px solid var(--rule-2); border-radius: 14px; }
  .pl-int .btn { justify-self: start; }
  .pl-foot { margin-top: 14px; }
  @media (max-width: 900px) { .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .pl-grid { grid-template-columns: 1fr; } .pl-desc { min-height: 0; } }

  .us-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin: var(--s3) 0 0; border: 1px solid var(--rule-2); border-radius: 16px; overflow: hidden; }
  .us-facts > div { padding: 12px 16px; }
  .us-facts > div + div { border-left: 1px solid var(--rule-2); }
  .us-facts dt { font: 600 11.5px/1.3 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .us-facts dd { margin-top: 3px; font: 600 15.5px/1.35 var(--f-ui); overflow-wrap: anywhere; }
  .us-sec { margin-top: var(--s5); }
  .us-sec h3 { font: 650 16px/1.3 var(--f-ui); margin-bottom: 8px; }
  .us-big { font: 400 16px/1.4 var(--f-ui); color: var(--ink-2); }
  .us-big b { font: 700 34px/1 var(--f-ui); letter-spacing: -.03em; color: var(--ink); margin-right: 4px; }
  .us-bar { height: 12px; margin: 10px 0 8px; border-radius: 99px; background: var(--rule-2); overflow: hidden; }
  .us-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
  .us-bar.is-warn i { background: #c98a00; } .us-bar.is-full i { background: #c2410c; }
  .us-note { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--accent-wash); font: 500 13.5px/1.45 var(--f-ui); color: var(--ink-2); }
  .us-chart { display: flex; align-items: flex-end; gap: 3px; height: 84px; margin-top: 16px; padding-bottom: 1px; border-bottom: 1px solid var(--rule-2); }
  .us-col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }
  .us-col i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--accent); opacity: .7; }
  .us-col.is-today i { opacity: 1; } .us-col.is-future { opacity: .35; }
  .us-axis { display: flex; justify-content: space-between; margin-top: 4px; font: 500 11.5px/1.2 var(--f-ui); color: var(--muted); }
  .us-team { list-style: none; margin: 0; padding: 0; }
  .us-team li { display: grid; grid-template-columns: 1fr auto 56px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule-2); font: 500 14px/1.4 var(--f-ui); }
  .us-team li > span:first-child { overflow-wrap: anywhere; }
  .us-team li > span:last-child { text-align: right; font-weight: 700; }
  .us-team .link { min-height: 32px; }
  .us-add { display: flex; gap: 8px; margin: 12px 0 8px; flex-wrap: wrap; }
  .us-add .input { flex: 1 1 220px; }
  .us-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--s5); }
  .us-del { margin-top: var(--s5); border-top: 1px solid var(--rule-2); padding-top: 10px; }
  .us-del > summary { cursor: pointer; font: 600 13.5px/1.4 var(--f-ui); color: var(--muted); min-height: 44px; display: flex; align-items: center; }
  @media (max-width: 560px) { .us-facts > div + div { border-left: 0; border-top: 1px solid var(--rule-2); } }

  /* AI okvir sa kvotom */
  .ai-left { font: 600 12.5px/1.2 var(--f-ui); color: var(--muted); }
  .ai-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--s3); }
  .ai-pick-btn { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--accent-line, var(--accent)); background: var(--accent-wash); color: var(--ink); font: 500 14.5px/1.3 var(--f-ui); text-align: left; min-height: 44px; }
  .ai-pick-btn b { color: var(--accent); font-weight: 700; }
  .ai-pick-btn:hover { border-color: var(--accent); }
  .ai-pick.is-none { font: 500 14px/1.45 var(--f-ui); color: var(--muted); }
}
@layer experience {
  /* Kazna za prekoračenje brzine (iznad odgovora) */
  .bz { margin: 0 0 18px; background: var(--sheet); border: 1px solid var(--rule-2); border-radius: 24px; padding: 22px 24px; box-shadow: var(--shadow-1); }
  .bz .sc { margin: 0 0 4px; }
  .bz-t { margin: 0 0 14px; font: 650 20px/1.25 var(--f-ui); letter-spacing: -.01em; }
  .bz-form { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .bz-form label { display: grid; gap: 4px; font: 500 12px/1.3 var(--f-ui); color: var(--muted); }
  .bz-form select, .bz-form input { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--paper, var(--sheet)); color: var(--ink); font: 500 16px/1.2 var(--f-ui); }
  .bz-in { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
  .bz-in input { flex: 1; min-width: 0; }
  .bz-big { margin: 0 0 10px; font: 700 22px/1.2 var(--f-ui); letter-spacing: -.01em; }
  .bz-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
  .bz-dl div { padding: 12px 14px; border-radius: 14px; background: var(--band-2, var(--accent-wash)); }
  .bz-dl dt { font: 600 11px/1.3 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .bz-dl dd { margin: 4px 0 0; font: 600 15px/1.4 var(--f-ui); color: var(--ink); }
  .bz-nalog { margin: 0 0 8px; font: 400 14px/1.55 var(--f-ui); color: var(--ink-2); }
  .bz-cite, .bz-src { margin: 6px 0 0; }
  .bz-src a { color: var(--accent); }
  @media (max-width: 760px) {
    .bz { padding: 18px 16px; border-radius: 20px; }
    .bz-form { grid-template-columns: 1fr 1fr; } .bz-form label:first-child { grid-column: 1 / -1; }
    .bz-dl { grid-template-columns: 1fr 1fr; gap: 8px; } .bz-dl div:first-child { grid-column: 1 / -1; } .bz-dl div { padding: 10px 12px; }
  }
}
@layer experience {
  .az-form { grid-template-columns: 1fr 1.6fr; align-items: end; }
  .az-chk { display: flex !important; align-items: center; gap: 10px; min-height: 44px; font: 400 14px/1.4 var(--f-ui) !important; color: var(--ink-2) !important; }
  .az-chk input { width: 20px !important; min-height: 20px !important; height: 20px; flex: none; }
  @media (max-width: 760px) { .az-form { grid-template-columns: 1fr; } }
}
@layer experience { .ps-item + .ps-item { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule-2); } .ps-item .bz-big { font-size: 18px; } }
@layer experience { .ex-tools-t { display: block; margin-top: 10px; } }
@layer experience { .rd-dl { display: grid; gap: 10px; margin: 0 0 10px; } .rd-dl div { padding: 12px 14px; border-radius: 14px; background: var(--band-2, var(--accent-wash)); } .rd-dl dt { font: 600 12px/1.3 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .rd-dl dd { margin: 4px 0 0; font: 500 15px/1.5 var(--f-ui); color: var(--ink); } }
@layer experience { .toc-more { margin: 6px 0 14px; font: 500 15px/1.5 var(--f-ui); } .toc-more a { color: var(--accent); } }
@layer experience { a.m-item { text-decoration: none; color: inherit; } }