/* ═══ Dobrodetel 7.0 family bar ═══════════════════════════════════════════
   One compact glass row instead of two. Pure CSS over the shared .cs-brandbar
   markup (identical on all 10 map sites) — no DOM is moved, so React-rendered
   bars on the Next.js sites stay intact. legal.js re-measures the bar and
   publishes --cs-brandbar-offset, so every app shell moves up automatically.
   Source of truth; embedded into each site's legal*.js by sync-bar7.py. */
html body .cs-brandbar{height:46px!important;min-height:46px!important;max-height:46px!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;align-content:center!important;gap:10px!important;padding:0 12px 0 14px!important;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(9,15,27,.94),rgba(6,11,20,.9))!important;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.07)!important;box-shadow:0 12px 30px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.09)!important;overflow:visible!important}
html body .cs-brandbar::after{content:""!important;position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(247,198,93,.55) 50%,transparent 100%);pointer-events:none}
/* Liquid-glass pass (2026-10-31): a slow glint travels along the gold hairline. */
html body .cs-brandbar::after{background:linear-gradient(90deg,transparent 0%,rgba(247,198,93,.5) 50%,transparent 100%),linear-gradient(90deg,transparent 0,rgba(255,240,200,.95) 50%,transparent 100%)!important;background-size:100% 100%,180px 100%!important;background-repeat:no-repeat!important;background-position:0 0,-200px 0!important}
@media (prefers-reduced-motion:no-preference){html body .cs-brandbar::after{animation:cs-bar7-glint 7s cubic-bezier(.45,0,.2,1) 1.2s infinite}@keyframes cs-bar7-glint{0%{background-position:0 0,-200px 0}55%,100%{background-position:0 0,calc(100vw + 200px) 0}}}
html body .cs-brandbar__sep{display:none!important}
html body .cs-brandbar__wordmark{flex:0 0 auto!important;font-size:11px!important;letter-spacing:.16em!important;gap:9px!important;color:#f8fafc!important;opacity:.92}
html body .cs-brandbar__wordmark:before{width:14px!important;height:14px!important;border-radius:4px!important;background:linear-gradient(135deg,#ffd479,#f0a93b)!important;box-shadow:0 0 16px rgba(255,194,87,.55)!important}
html body .cs-brandbar__nav-scroll-wrap{flex:1 1 auto!important;min-width:0!important;order:0!important;margin:0!important;padding:0!important;overflow-x:auto!important;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 32px),transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 32px),transparent 100%)!important}
html body .cs-brandbar__nav-scroll-wrap::-webkit-scrollbar{display:none}
html body .cs-brandbar__nav{gap:2px!important;flex-wrap:nowrap!important;width:max-content!important;padding:0 16px 0 6px!important}
html body .cs-brandbar__link{height:30px!important;min-height:30px!important;padding:0 11px!important;border-radius:999px!important;font-size:12.5px!important;font-weight:500!important;letter-spacing:.01em!important;color:rgba(226,232,240,.72)!important;background:transparent!important;box-shadow:none!important;transition:color .18s ease,background-color .18s ease,box-shadow .18s ease!important}
html body .cs-brandbar__link:hover{color:#fff!important;background:rgba(255,255,255,.07)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important}
html body .cs-brandbar__link__dot{width:5px!important;height:5px!important;opacity:.45!important}
html body .cs-brandbar__link.is-active,html body .cs-brandbar__link[aria-current="page"],html body .cs-brandbar__link[data-current="true"]{color:#ffe1a0!important;background:linear-gradient(180deg,rgba(247,198,93,.2),rgba(247,198,93,.07))!important;box-shadow:inset 0 0 0 1px rgba(247,198,93,.4),0 0 20px -6px rgba(247,198,93,.55)!important}
html body .cs-brandbar__link.is-active .cs-brandbar__link__dot,html body .cs-brandbar__link[aria-current="page"] .cs-brandbar__link__dot{opacity:1!important;background:#ffc257!important;box-shadow:0 0 8px #ffc257!important}
html body .cs-brandbar__tag::after{content:none!important;display:none!important}
/* Tag pills → compact icon chips that expand to their label on hover/focus.
   The label text stays in the DOM (font-size 0), so screen readers keep it. */
html body .cs-brandbar__tag{flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;height:30px!important;min-height:30px!important;margin:0!important;padding:0 11px!important;border-radius:999px!important;border:1px solid rgba(148,163,184,.2)!important;background:rgba(255,255,255,.035)!important;color:rgba(226,232,240,.8)!important;font-size:12px!important;white-space:nowrap!important;text-decoration:none!important;transition:background-color .18s ease,border-color .18s ease,color .18s ease!important}
html body .cs-brandbar__tag:not(.cs-donate-link){width:30px;padding:0!important;font-size:0!important;gap:0!important;overflow:hidden}
html body .cs-brandbar__tag:not(.cs-donate-link) *{font-size:0!important}
html body .cs-brandbar__tag:not(.cs-donate-link)::before{display:inline-block!important;flex:0 0 auto!important;width:auto!important;height:auto!important;margin:0!important;background:none!important;border-radius:0!important;box-shadow:none!important;opacity:1!important;font-size:13px!important;line-height:1!important;font-weight:700!important;color:rgba(241,245,249,.86)!important}
html body .cs-brandbar__tag.cs-brandbar__built-by::before{content:"HF"!important;font-size:10px!important;letter-spacing:.04em}
html body .cs-brandbar__tag.cs-dobrodetel-link::before{content:"◆"!important;color:#ffc257!important}
html body .cs-brandbar__tag.cs-facebook-link::before{content:"f"!important;font-family:Georgia,serif!important;font-size:15px!important;color:#9ab8ff!important}
html body .cs-brandbar__tag.cs-legal-link::before{content:"✉"!important}
html body .cs-brandbar__tag.cs-methodology-link::before{content:"ⓘ"!important;font-size:14px!important}
html body .cs-brandbar__tag:not(.cs-donate-link):hover,html body .cs-brandbar__tag:not(.cs-donate-link):focus-visible{width:auto;padding:0 12px!important;font-size:12px!important;color:#fff!important;border-color:rgba(247,198,93,.45)!important;background:rgba(247,198,93,.1)!important}
html body .cs-brandbar__tag:not(.cs-donate-link):hover *,html body .cs-brandbar__tag:not(.cs-donate-link):focus-visible *{font-size:12px!important}
html body .cs-brandbar__tag:not(.cs-donate-link):hover::before,html body .cs-brandbar__tag:not(.cs-donate-link):focus-visible::before{display:none!important}
html body .cs-brandbar__tag.cs-donate-link{padding:0 14px!important;border-color:transparent!important;background:linear-gradient(135deg,#ff7396,#e2456c)!important;color:#fff!important;font-weight:800!important;letter-spacing:.05em!important;box-shadow:0 8px 20px -10px rgba(242,87,127,.9)!important}
html body .cs-brandbar__tag.cs-donate-link:hover{filter:brightness(1.08)}
@media (max-width:1180px){html body .cs-brandbar__wordmark{max-width:24px!important;overflow:hidden!important;letter-spacing:0!important}html body .cs-brandbar__wordmark>*:not(:first-child),html body .cs-brandbar__wordmark span{display:none!important}}
@media (max-width:640px){
  html body .cs-brandbar{height:50px!important;min-height:50px!important;max-height:50px!important;gap:6px!important;padding:0 8px 0 10px!important}
  html body .cs-brandbar__tag.cs-brandbar__built-by,html body .cs-brandbar__tag.cs-facebook-link,html body .cs-brandbar__tag.cs-methodology-link{display:none!important}
  html body .cs-brandbar__tag.cs-donate-link{width:34px;padding:0!important;font-size:0!important}
  html body .cs-brandbar__tag.cs-donate-link *{font-size:0!important}
  html body .cs-brandbar__tag.cs-donate-link::before{content:"♥"!important;display:inline-block!important;flex:0 0 auto!important;width:auto!important;height:auto!important;background:none!important;box-shadow:none!important;font-size:15px}
  html body .cs-brandbar__link{font-size:13.5px!important;padding:0 10px!important}
}
@media (prefers-reduced-motion:reduce){html body .cs-brandbar *{transition:none!important}}
/* Hub variant (dobrodetel.com): .cs-brandbar__inner > wordmark + .cs-brandbar__links + .cs-brandbar__builtby */
html body .cs-brandbar__inner{display:flex!important;align-items:center!important;gap:10px!important;flex:1 1 auto!important;min-width:0!important;height:100%!important;max-width:none!important;margin:0!important;padding:0!important}
html body .cs-brandbar__links{flex:1 1 auto!important;min-width:0!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:2px!important;overflow-x:auto!important;scrollbar-width:none;padding:0 16px 0 6px!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 32px),transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 32px),transparent 100%)!important}
html body .cs-brandbar__links::-webkit-scrollbar{display:none}
html body .cs-brandbar__builtby{flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:30px;height:30px!important;border-radius:999px!important;border:1px solid rgba(148,163,184,.2)!important;background:rgba(255,255,255,.035)!important;font-size:0!important;overflow:hidden;color:#fff!important;text-decoration:none!important}
html body .cs-brandbar__builtby::before{content:"HF"!important;font-size:10px!important;font-weight:700!important;color:rgba(241,245,249,.86)!important}
html body .cs-brandbar__builtby:hover,html body .cs-brandbar__builtby:focus-visible{width:auto;padding:0 12px!important;font-size:12px!important}
html body .cs-brandbar__builtby:hover::before,html body .cs-brandbar__builtby:focus-visible::before{display:none!important}
html body .cs-brandbar__link.cs-donate-link{flex:0 0 auto!important;height:30px!important;padding:0 14px!important;border-radius:999px!important;background:linear-gradient(135deg,#ff7396,#e2456c)!important;color:#fff!important;font-weight:800!important;letter-spacing:.05em!important;box-shadow:0 8px 20px -10px rgba(242,87,127,.9)!important}
html body .cs-brandbar__link.cs-donate-link .cs-brandbar__link__dot{display:none!important}
@media (max-width:640px){html body .cs-brandbar__builtby{display:none!important}html body .cs-brandbar__link.cs-donate-link{font-size:0!important;width:34px;padding:0!important;justify-content:center}html body .cs-brandbar__link.cs-donate-link *{font-size:0!important}html body .cs-brandbar__link.cs-donate-link::before{content:"♥"!important;font-size:15px!important;color:#fff!important}}

/* ═══ Dobrodetel 8.0 — "Spectrum" (2026-11-13) ═════════════════════════════
   The family reads as one system with twelve voices: every atlas keeps its own
   colour everywhere it is named, and the shared chrome on each site takes that
   site's colour. legal.js sets html[data-cs-site] from the hostname. */
html{--cs-fam:#ffc257;--cs-fam-2:#ffe1a0}
html[data-cs-site="balkanhighways"]{--cs-fam:#ffb36b;--cs-fam-2:#ffd66e}
html[data-cs-site="balkanforests"]{--cs-fam:#34d399;--cs-fam-2:#a7f3d0}
html[data-cs-site="asphaltbg"]{--cs-fam:#ff5a70;--cs-fam-2:#ffb3bd}
html[data-cs-site="bgkapki"]{--cs-fam:#22d3ee;--cs-fam-2:#a5f3fc}
html[data-cs-site="vuzduhbg"]{--cs-fam:#5cc8ff;--cs-fam-2:#b9e6ff}
html[data-cs-site="razhodibg"]{--cs-fam:#f5a623;--cs-fam-2:#ffd76b}
html[data-cs-site="hramove"]{--cs-fam:#e6bf5a;--cs-fam-2:#f6e2a6}
html[data-cs-site="balkanfauna"]{--cs-fam:#d8a657;--cs-fam-2:#efd3a0}
html[data-cs-site="balkanflora"]{--cs-fam:#a3e635;--cs-fam-2:#d9f99d}
html[data-cs-site="pochvata"]{--cs-fam:#c98f5f;--cs-fam-2:#e8c4a2}
html[data-cs-site="railbg"]{--cs-fam:#a78bfa;--cs-fam-2:#ddd6fe}

/* 1 · every atlas link carries its own colour (a colour index of the family) */
html body .cs-brandbar__link{--lk:rgba(226,232,240,.6)}
html body .cs-brandbar__link[href*="balkanhighways"]{--lk:#ffb36b}
html body .cs-brandbar__link[href*="balkanforests"]{--lk:#34d399}
html body .cs-brandbar__link[href*="asphaltbg"]{--lk:#ff5a70}
html body .cs-brandbar__link[href*="bgkapki"]{--lk:#22d3ee}
html body .cs-brandbar__link[href*="vuzduhbg"]{--lk:#5cc8ff}
html body .cs-brandbar__link[href*="razhodibg"]{--lk:#f5a623}
html body .cs-brandbar__link[href*="hramove"]{--lk:#e6bf5a}
html body .cs-brandbar__link[href*="balkanfauna"]{--lk:#d8a657}
html body .cs-brandbar__link[href*="balkanflora"]{--lk:#a3e635}
html body .cs-brandbar__link[href*="pochvata"]{--lk:#c98f5f}
html body .cs-brandbar__link[href*="railbg"]{--lk:#a78bfa}
html body .cs-brandbar__link[href*="velikomusic"]{--lk:#e2b25a}
html body .cs-brandbar__link[href*="harmonyfusion"]{--lk:#8fb4ff}
html body .cs-brandbar__link .cs-brandbar__link__dot{background:var(--lk)!important;opacity:.78!important;transition:transform .25s cubic-bezier(.2,.9,.3,1.4),box-shadow .25s ease,opacity .2s ease}
html body .cs-brandbar__link:hover .cs-brandbar__link__dot{opacity:1!important;transform:scale(1.7);box-shadow:0 0 10px var(--lk)!important}
html body .cs-brandbar__link:not(.cs-donate-link):hover{background:linear-gradient(180deg,color-mix(in srgb,var(--lk) 16%,transparent),color-mix(in srgb,var(--lk) 5%,transparent))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lk) 34%,transparent)!important}

/* 2 · the site you are on: its colour on the active pill and along the hairline */
html body .cs-brandbar__link.is-active,html body .cs-brandbar__link[aria-current="page"],html body .cs-brandbar__link[data-current="true"]{color:var(--cs-fam-2)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--cs-fam) 26%,transparent),color-mix(in srgb,var(--cs-fam) 9%,transparent))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cs-fam) 46%,transparent),0 6px 18px -8px var(--cs-fam)!important}
html body .cs-brandbar__link.is-active .cs-brandbar__link__dot,html body .cs-brandbar__link[aria-current="page"] .cs-brandbar__link__dot,html body .cs-brandbar__link[data-current="true"] .cs-brandbar__link__dot{opacity:1!important;background:var(--cs-fam)!important;box-shadow:0 0 9px var(--cs-fam)!important}
html body .cs-brandbar::after{background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--cs-fam) 70%,transparent) 50%,transparent 100%),linear-gradient(90deg,transparent 0,rgba(255,255,255,.95) 50%,transparent 100%)!important;background-size:100% 100%,200px 100%!important;background-repeat:no-repeat!important}
html body .cs-brandbar__wordmark:before{background:linear-gradient(135deg,var(--cs-fam-2),var(--cs-fam))!important;box-shadow:0 0 16px color-mix(in srgb,var(--cs-fam) 60%,transparent)!important}
@media (prefers-reduced-motion:no-preference){
html body .cs-brandbar__link{animation:cs8-in .5s cubic-bezier(.2,.8,.2,1) both}
html body .cs-brandbar__link:nth-child(2){animation-delay:.03s}html body .cs-brandbar__link:nth-child(3){animation-delay:.06s}html body .cs-brandbar__link:nth-child(4){animation-delay:.09s}html body .cs-brandbar__link:nth-child(5){animation-delay:.12s}html body .cs-brandbar__link:nth-child(6){animation-delay:.15s}html body .cs-brandbar__link:nth-child(7){animation-delay:.18s}html body .cs-brandbar__link:nth-child(8){animation-delay:.21s}html body .cs-brandbar__link:nth-child(9){animation-delay:.24s}html body .cs-brandbar__link:nth-child(n+10){animation-delay:.27s}
@keyframes cs8-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* 3 · action buttons: one glass capsule instead of four loose circles */
html body .civic-actions{gap:2px!important;padding:5px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.16)!important;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 38%,rgba(8,14,24,.6))!important;box-shadow:0 20px 44px -16px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.34),0 0 0 1px color-mix(in srgb,var(--cs-fam) 14%,transparent)!important;-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%)}
html body .civic-actions .civic-action{width:40px!important;height:40px!important;border-color:transparent!important;background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;overflow:visible!important;transition:background .2s ease,color .2s ease,transform .25s cubic-bezier(.2,.9,.3,1.4)!important}
html body .civic-actions .civic-action::after{display:none!important}
html body .civic-actions .civic-action:not(.civic-action--donate):hover,html body .civic-actions .civic-action:not(.civic-action--donate):focus-visible{background:color-mix(in srgb,var(--cs-fam) 22%,transparent)!important;color:var(--cs-fam-2)!important;transform:scale(1.06)!important;filter:none!important}
html body .civic-actions .civic-action--donate{margin-top:3px!important;background:linear-gradient(155deg,#ff8fab,#ff5d7e 60%,#e84d6c)!important;border-color:rgba(255,255,255,.3)!important;box-shadow:0 8px 20px -6px rgba(232,77,108,.6),inset 0 1px 0 rgba(255,255,255,.5)!important}
html body .civic-actions .civic-action__tip{right:54px!important;border-radius:999px!important;padding:6px 12px!important;background:rgba(8,14,24,.9)!important;border:1px solid color-mix(in srgb,var(--cs-fam) 40%,rgba(255,255,255,.12))!important;color:#f1f5f9!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:translateX(6px);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1)!important}
html body .civic-actions .civic-action:hover .civic-action__tip,html body .civic-actions .civic-action:focus-visible .civic-action__tip{opacity:1!important;transform:none}
@media (prefers-reduced-motion:no-preference){html body .civic-actions .civic-action--donate svg{animation:cs8-beat 2.8s ease-in-out 2s infinite;transform-origin:50% 55%}@keyframes cs8-beat{0%,78%,100%{transform:scale(1)}84%{transform:scale(1.18)}90%{transform:scale(.96)}95%{transform:scale(1.08)}}}
@media (max-width:600px){html body .civic-actions{padding:4px!important}html body .civic-actions .civic-action{width:44px!important;height:44px!important}}
@media print{html body .civic-actions{display:none!important}}

/* 4 · small things that make a site feel finished, in the site's own colour */
::selection{background:color-mix(in srgb,var(--cs-fam) 42%,transparent);color:#fff}
html{scrollbar-color:color-mix(in srgb,var(--cs-fam) 45%,rgba(120,130,150,.5)) transparent}
html body .cs-brandbar a:focus-visible,html body .civic-actions .civic-action:focus-visible{outline:2px solid var(--cs-fam)!important;outline-offset:2px!important}