/* Transfusion Hub -- static rebuild of the real theme design
   (adapted from assets/css/hub-main.css of transfusion-hub theme; trimmed to
   what a static site needs -- no admin-ajax, WA chat, poster/stand builders,
   service worker, or WP-only pieces). */

:root {
  --bg-main: #F4F6FA;
  --surface-card: #FFFFFF;
  --brand-red: #E11D48;
  --brand-red-light: #FFF1F2;
  --brand-teal: #0D9488;
  --brand-teal-light: #CCFBF1;
  --text-dark: #0F172A;
  --text-muted: #64748B;
  --border-subtle: #E2E8F0;
  --border-hover: #CBD5E1;
  --radius-card-old: 18px;
  --radius-pill: 9999px;
  --shadow-subtle: 0 4px 18px -4px rgba(15,23,42,.06);
  --shadow-hover: 0 12px 28px -8px rgba(15,23,42,.12);
  --hub-content: 980px;
  --hub-content-pad: 0 20px;
  --hub-card-min: 260px;
  /* vertical rhythm scale -- used across hero/sections/cards for a
     consistent, more generous spacing system than the WP original */
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }
body {
  font-family: 'e-Ukraine', system-ui, -apple-system, sans-serif;
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh; display: flex; flex-direction: column;
  overflow-x: hidden; background-color: var(--bg-main); position: relative;
}
h1, h2, h3, h4 { font-family: 'e-UkraineHead', system-ui, sans-serif; letter-spacing: -0.02em; }
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; }

.hub-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  padding: 10px 16px; background: #0F172A; color: #fff; font-weight: 700;
  text-decoration: none; border-radius: 0 0 8px 0;
}
.hub-skip-link:focus { left: 0; outline: 2px solid var(--brand-red); outline-offset: 2px; }
:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }

/* ---------- ambient background: blood-flow line + drifting orbs ---------- */
.bg-ambient-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; overflow: hidden; transform: translateZ(0); }
.bg-flow {
  position: absolute; left: 50%; top: 4%; bottom: 4%; width: 3px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(225,29,72,.05) 0%, rgba(225,29,72,.18) 18%, rgba(244,63,94,.14) 40%, rgba(190,18,60,.12) 62%, rgba(225,29,72,.08) 82%, transparent 100%);
  border-radius: 4px; opacity: .55;
}
.bg-stage { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: .22; font-family: 'e-UkraineHead', system-ui, sans-serif; width: max-content; }
.bg-stage-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-red); box-shadow: 0 0 0 4px rgba(225,29,72,.12); }
.bg-stage-label { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #BE123C; white-space: nowrap; }
.bg-stage-1 { top: 10%; } .bg-stage-2 { top: 32%; } .bg-stage-3 { top: 54%; } .bg-stage-4 { top: 76%; }
.bg-stage-1 .bg-stage-label { transform: translateX(-58px); }
.bg-stage-2 .bg-stage-label { transform: translateX(58px); }
.bg-stage-3 .bg-stage-label { transform: translateX(-62px); }
.bg-stage-4 .bg-stage-label { transform: translateX(54px); }
.orb { position: absolute; filter: blur(60px); opacity: .4; animation: orbDrift 22s ease-in-out infinite; }
.orb-1 { width: 360px; height: 420px; top: -60px; left: 2%; border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%; background: radial-gradient(ellipse at 40% 30%, rgba(225,29,72,.14) 0%, transparent 70%); }
.orb-2 { width: 320px; height: 380px; top: 28%; right: 2%; border-radius: 50%; background: radial-gradient(ellipse at 60% 40%, rgba(190,18,60,.10) 0%, transparent 70%); animation-delay: -6s; }
.orb-3 { width: 400px; height: 340px; bottom: 6%; left: 10%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(244,63,94,.08) 0%, transparent 70%); animation-delay: -12s; }
.orb-4 { width: 240px; height: 280px; top: 58%; right: 12%; border-radius: 45% 55% 50% 50% / 60% 40% 55% 45%; background: radial-gradient(ellipse at 45% 40%, rgba(225,29,72,.09) 0%, transparent 65%); animation-delay: -3s; }
@keyframes orbDrift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(14px,-16px); } }
@media (max-width: 900px) { .bg-stage-label { display: none; } .bg-flow { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 300; width: 100%; background: rgba(244,246,250,.72); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid rgba(226,232,240,.65); padding-top: env(safe-area-inset-top,0); }
.hdr-in { width: 100%; padding: 8px 20px; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; min-width: 0; }
.logo-icon-wrap { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(155deg,#1E3A5F 0%,#0F172A 55%,#0B1220 100%); box-shadow: 0 3px 12px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: visible; animation: logoWrapPulse 2.8s ease-in-out infinite; }
.logo-shield-svg { display: block; overflow: visible; }
.logo-pulse-ring { transform-origin: 16px 16px; animation: logoRing 2.6s ease-out infinite; }
.logo.logo-animated { animation: logoMarkFloat 3.6s ease-in-out infinite; }
.logo.logo-animated .logo-accent { animation: logoAccentFlash 3.6s ease-in-out infinite; }
@keyframes logoMarkFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes logoAccentFlash { 0%,100% { opacity: 1; } 50% { opacity: .75; } }
@keyframes logoWrapPulse { 0%,100% { box-shadow: 0 3px 12px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.12); } 50% { box-shadow: 0 5px 18px rgba(225,29,72,.32), inset 0 1px 0 rgba(255,255,255,.18); } }
@keyframes logoRing { 0% { opacity: .6; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .logo.logo-animated, .logo.logo-animated *, .logo-icon-wrap, .logo-pulse-ring { animation: none !important; } }
.logo-text-block { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; min-width: 0; }
.logo-title { font-family: 'e-UkraineHead', system-ui, sans-serif; font-size: 15.5px; font-weight: 800; color: #0F172A; letter-spacing: -.025em; white-space: nowrap; }
.logo-title .logo-accent { color: var(--brand-red); }
.logo-subtitle { display: none; }
.hdr-right-area { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.idea-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--border-subtle); color: var(--text-dark); padding: 6px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; text-decoration: none; box-shadow: 0 1px 4px rgba(15,23,42,.04); transition: .2s ease; }
.idea-icon-wrap { width: 20px; height: 20px; border-radius: 50%; background: var(--brand-red-light); color: var(--brand-red); display: flex; align-items: center; justify-content: center; }
.idea-btn:hover { background: var(--brand-red-light); border-color: var(--brand-red); color: var(--brand-red); transform: translateY(-1px); }
@media (max-width: 640px) { .logo-title { font-size: 14px; } .idea-btn span { display: none; } .idea-btn { padding: 6px 9px; } }


/* ---------- audience gate ---------- */
.audience-gate { position: fixed; inset: 0; z-index: 10060; background: rgba(15,23,42,.55); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; pointer-events: none; }
.audience-gate.active { display: flex; opacity: 1; visibility: visible; pointer-events: auto; }
.audience-gate-card { background: #fff; border-radius: 24px; padding: 30px 26px; width: 100%; max-width: 560px; box-shadow: 0 25px 50px rgba(15,23,42,.25); text-align: center; transform: translateY(10px) scale(.98); opacity: .92; transition: .28s cubic-bezier(.16,1,.3,1); }
.audience-gate.active .audience-gate-card { transform: translateY(0) scale(1); opacity: 1; }
.audience-gate-card h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.audience-gate-card > p { font-size: 14px; color: #64748B; margin-bottom: 22px; line-height: 1.45; }
.audience-gate-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.audience-gate-choice { border: 1.5px solid var(--border-subtle); border-radius: 16px; padding: 20px 14px; background: #F8FAFC; cursor: pointer; transition: .2s ease; text-align: center; font-family: inherit; }
.audience-gate-choice:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.08); }
.audience-gate-choice[data-audience="pro"]:hover { border-color: var(--brand-red); background: #FFF1F2; }
.audience-gate-choice[data-audience="public"]:hover { border-color: var(--brand-teal); background: #CCFBF1; }
.gate-ico { width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }
.audience-gate-choice[data-audience="pro"] .gate-ico { background: #FEE2E2; color: var(--brand-red); }
.audience-gate-choice[data-audience="public"] .gate-ico { background: #CCFBF1; color: var(--brand-teal); }
.audience-gate-choice strong { display: block; font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.audience-gate-choice span { font-size: 11.5px; color: #64748B; line-height: 1.35; }
@media (max-width: 480px) { .audience-gate-choices { grid-template-columns: 1fr; } }

/* ---------- disclaimer modal ---------- */
.disclaimer-modal-overlay { position: fixed; inset: 0; z-index: 10040; background: rgba(15,23,42,.5); display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: .2s ease; }
.disclaimer-modal-overlay.active { display: flex; opacity: 1; visibility: visible; }
.disclaimer-modal-card { background: #fff; border-radius: 20px; width: 100%; max-width: 520px; padding: 28px; box-shadow: 0 25px 50px -12px rgba(15,23,42,.25); display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--border-subtle); transform: translateY(12px) scale(.98); opacity: .9; transition: .28s cubic-bezier(.16,1,.3,1); }
.disclaimer-modal-overlay.active .disclaimer-modal-card { transform: translateY(0) scale(1); opacity: 1; }
.disclaimer-badge { width: 44px; height: 44px; border-radius: 12px; background: #FEF2F2; color: #EF4444; border: 1px solid #FEE2E2; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.disclaimer-modal-title { font-size: 17px; font-weight: 800; text-align: center; }
.disclaimer-modal-body { font-size: 13px; line-height: 1.65; color: #475569; font-weight: 500; background: #F8FAFC; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px 18px; text-align: center; }
.disclaimer-modal-body p { margin: 0 0 10px; }
.disclaimer-modal-body p:last-child { margin-bottom: 0; }
.disclaimer-modal-body strong { color: #0F172A; font-weight: 700; }

.disclaimer-accept-btn { width: 100%; background: linear-gradient(135deg,var(--brand-red) 0%,#BE123C 100%); color: #fff; border: none; border-radius: 12px; padding: 12px 20px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(225,29,72,.3); transition: .2s ease; }
.disclaimer-accept-btn:hover { transform: translateY(-1px); }
html.hub-modal-open, html.hub-modal-open body { overflow: hidden !important; overscroll-behavior: none; }

/* ---------- audience switch + hero ---------- */
.audience-switch-wrap { width: 100%; max-width: var(--hub-content); margin: var(--space-lg) auto var(--space-sm); padding: var(--hub-content-pad); display: flex; flex-direction: column; align-items: center; gap: 6px; box-sizing: border-box; }
.audience-switch { display: inline-flex; padding: 4px; background: #fff; border: 1.5px solid var(--border-subtle); border-radius: 999px; box-shadow: var(--shadow-subtle); gap: 4px; }
.audience-btn { border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #64748B; padding: 9px 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; transition: .2s ease; }
.audience-btn:hover { color: var(--text-dark); background: #F8FAFC; }
.audience-btn.active-pro { background: linear-gradient(135deg,var(--brand-red) 0%,#BE123C 100%); color: #fff; box-shadow: 0 4px 12px rgba(225,29,72,.25); }
.audience-btn.active-public { background: linear-gradient(135deg,var(--brand-teal) 0%,#0F766E 100%); color: #fff; box-shadow: 0 4px 12px rgba(13,148,136,.25); }
.audience-hero { display: none; text-align: center; max-width: 640px; margin: 0 auto var(--space-md); padding: var(--hub-content-pad); box-sizing: border-box; }
body.audience-pro .audience-hero.hero-pro { display: block; }
body.audience-public .audience-hero.hero-public { display: block; }
.audience-hero h1 { font-size: clamp(24px, 3.4vw, 30px); font-weight: 800; margin-bottom: 10px; letter-spacing: -.025em; line-height: 1.2; }
.audience-hero p { font-size: 14.5px; color: #64748B; font-weight: 500; line-height: 1.6; max-width: 40em; margin: 0 auto; }
.hero-stats { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.hero-stat strong { color: var(--text-dark); font-weight: 800; }
.hero-stat-sep { opacity: .5; }

.scenarios { display: none; width: 100%; max-width: 680px; margin: 0 auto var(--space-lg); padding: var(--hub-content-pad); grid-template-columns: repeat(2, minmax(0,300px)); gap: 12px; justify-content: center; box-sizing: border-box; }
body.audience-pro .scenarios.scenarios-pro { display: grid; }
body.audience-public .scenarios.scenarios-public { display: grid; }
.scenario-card { background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.6); border-radius: 16px; padding: 16px 18px; text-decoration: none; color: inherit; display: flex; align-items: flex-start; gap: 12px; box-shadow: var(--shadow-subtle); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); transition: .2s ease; cursor: pointer; }
.scenario-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,23,42,.1); border-color: rgba(225,29,72,.35); }
.scenario-icon { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--brand-red-light); color: var(--brand-red); }
.scenario-card h3 { font-size: 13.5px; font-weight: 800; margin-bottom: 3px; }
.scenario-card p { font-size: 11.5px; color: #64748B; line-height: 1.4; font-weight: 500; }
@media (max-width: 520px) { .scenarios { grid-template-columns: 1fr; } }

.donor-cta-wrap { display: none; text-align: center; margin: calc(var(--space-lg) * -1 + var(--space-md)) auto var(--space-lg); }
body.audience-public .donor-cta-wrap { display: block; }
.donor-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg,var(--brand-teal) 0%,#0F766E 100%); color: #fff; text-decoration: none; font-weight: 800; font-size: 13.5px; padding: 13px 26px; border-radius: var(--radius-pill); box-shadow: 0 8px 22px rgba(13,148,136,.3); transition: .2s ease; }
.donor-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(13,148,136,.4); }

/* ---------- search + chips ---------- */
.search-section-wrapper { width: 100%; max-width: var(--hub-content); margin: 0 auto var(--space-lg); padding: var(--hub-content-pad); box-sizing: border-box; }
.search-box { width: 100%; background: #fff; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 10px 18px; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 20px -2px rgba(15,23,42,.04); transition: .2s ease; }
.search-box:focus-within { border-color: var(--brand-red); box-shadow: 0 0 0 4px rgba(225,29,72,.12); transform: translateY(-1px); }
.search-box svg { flex-shrink: 0; color: #94A3B8; }
.search-input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-dark); width: 100%; }
.search-shortcut-hint { font-size: 10px; font-weight: 700; color: var(--text-muted); background: #F1F5F9; border: 1px solid var(--border-subtle); padding: 2px 6px; border-radius: 4px; flex-shrink: 0; }
.search-clear-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; display: none; align-items: center; justify-content: center; flex-shrink: 0; }
.search-clear-btn.show { display: flex; }
.nav-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; }
.nav-chip-item { border: 1.5px solid var(--border-subtle); background: #fff; color: #64748B; font-family: inherit; font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: .15s ease; display: inline-flex; align-items: center; gap: 6px; }
.nav-chip-item:hover { border-color: #94A3B8; color: var(--text-dark); }
.nav-chip-item.active { background: #0F172A; color: #fff; border-color: #0F172A; }
.nav-chip-item.active .chip-counter { background: rgba(255,255,255,.22); color: #fff; }
.chip-counter { font-size: 10px; font-weight: 800; background: #F1F5F9; color: #64748B; padding: 1px 7px; border-radius: 999px; }
@media (max-width: 768px) { .nav-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; padding-bottom: 4px; } .nav-chip-item { flex-shrink: 0; } }

/* ---------- workspace / sections / cards ---------- */
.app-workspace { width: 100%; max-width: min(1280px,100%); margin: 0 auto; padding: 0 24px var(--space-xl); box-sizing: border-box; display: flex; gap: 24px; align-items: flex-start; }
.main-tree { flex: 1; min-width: 0; max-width: var(--hub-content); margin: 0 auto; position: relative; transition: max-width .35s cubic-bezier(.16,1,.3,1); }
.app-workspace.reader-active .main-tree { max-width: 460px; margin: 0; }
@media (max-width: 1180px) { .app-workspace.reader-active .main-tree { display: none; } }

/* ---------- reading panel (opens a material without leaving the hub) ---------- */
.reader-panel {
  display: none; flex: 1; min-width: 0; background: #fff; border: 1.5px solid var(--border-subtle); border-radius: 20px;
  box-shadow: 0 20px 48px rgba(15,23,42,.1); flex-direction: column; opacity: 0; transform: translateX(16px);
  transition: opacity .3s ease, transform .3s ease; position: sticky; top: 88px; height: calc(100vh - 112px); overflow: hidden;
}
.app-workspace.reader-active .reader-panel { display: flex; opacity: 1; transform: translateX(0); }
.reader-head { padding: 14px 18px; background: #F8FAFC; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reader-head-title { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.reader-tag { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-red); }
.reader-title { font-size: 13.5px; font-weight: 800; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.reader-btn { background: #fff; border: 1px solid var(--border-subtle); color: var(--text-dark); padding: 7px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; transition: .2s ease; }
.reader-btn:hover { background: #F1F5F9; border-color: var(--border-hover); }
.reader-close { background: #FFE4E6; color: var(--brand-red); border: 1px solid #FECDD3; padding: 7px 12px; border-radius: 8px; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: .2s ease; }
.reader-close:hover { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.reader-body { flex: 1; position: relative; background: #fff; }
.reader-iframe { width: 100%; height: 100%; border: none; opacity: 0; transition: opacity .25s ease; }
.reader-iframe.loaded { opacity: 1; }
.reader-loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #fff; z-index: 2; font-size: 12px; font-weight: 700; color: #64748B; }
.reader-spinner { width: 30px; height: 30px; border: 3px solid #FFE4E6; border-top-color: var(--brand-red); border-radius: 50%; animation: readerSpin .7s linear infinite; }
@keyframes readerSpin { to { transform: rotate(360deg); } }
@media (max-width: 1180px) {
  .reader-panel { position: fixed; inset: 0; top: 0; z-index: 2000; border-radius: 0; height: 100vh; top: env(safe-area-inset-top,0); }
}
@media (prefers-reduced-motion: reduce) { .reader-panel { transition: none; } }
.branch-section { position: relative; z-index: 2; margin-bottom: var(--space-xl); scroll-margin-top: 100px; }
.parent-node-badge { display: flex; justify-content: center; margin: 0 auto 20px; }
.pulse-core-node {
  display: inline-flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--sec) 9%, #fff); color: var(--text-dark);
  border: 1.5px solid color-mix(in srgb, var(--sec) 32%, #e2e8f0);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--sec) 12%, transparent);
  padding: 9px 22px; border-radius: 999px; font-weight: 800; cursor: default;
}
.pulse-ecg-svg { width: 20px; height: 20px; color: var(--sec); flex-shrink: 0; }
.parent-badge-text { font-family: 'e-UkraineHead', system-ui, sans-serif; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--sec) 75%, #0f172a); }
.section-chip-count { font-size: 10.5px; font-weight: 700; color: color-mix(in srgb, var(--sec) 60%, #64748B); }
.subgroup-block { margin-bottom: var(--space-lg); }
.subgroup-block:last-child { margin-bottom: 0; }
.subgroup-node-badge { display: flex; justify-content: center; margin: 6px auto 22px; }
.subgroup-badge-inner { display: inline-flex; align-items: center; gap: 7px; background: color-mix(in srgb, var(--sec) 7%, #fff); border: 1.5px solid color-mix(in srgb, var(--sec) 26%, #e2e8f0); padding: 5px 14px; border-radius: 999px; }
.subgroup-badge-icon { width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--sec) 14%, #fff); color: var(--sec); display: flex; align-items: center; justify-content: center; }
.subgroup-badge-text { font-family: 'e-UkraineHead', system-ui, sans-serif; font-size: 11px; font-weight: 800; color: color-mix(in srgb, var(--sec) 80%, #0f172a); text-transform: uppercase; letter-spacing: .05em; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,var(--hub-card-min)), 1fr)); gap: 16px; }
.hub-card {
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.6);
  border-left: 4px solid var(--card-accent, #CBD5E1); border-radius: var(--radius-card);
  padding: 16px 18px; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  position: relative; overflow: hidden; min-height: 112px;
  box-shadow: var(--shadow-subtle), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.hub-card::after { content: ''; position: absolute; top: 0; right: 0; width: 90px; height: 90px; background: radial-gradient(circle at top right, var(--card-accent,#CBD5E1) 0%, transparent 70%); opacity: .12; pointer-events: none; }
.hub-card:hover, .hub-card.active-reader { transform: translateY(-3px); border-color: var(--border-hover); box-shadow: var(--shadow-hover), 0 0 0 2px var(--card-accent, var(--brand-red)); }
.card-top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.tag-badge { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.read-time-badge { font-size: 9.5px; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; opacity: .8; }
.card-title { font-size: 13.5px; font-weight: 800; color: var(--text-dark); line-height: 1.35; letter-spacing: -.01em; transition: color .2s ease; }
.hub-card:hover .card-title { color: var(--brand-red); }
.card-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.card-footer-action { font-size: 11px; font-weight: 700; color: var(--brand-red); display: flex; align-items: center; gap: 3px; }
.card-footer-action svg { transition: transform .2s ease; }
.hub-card:hover .card-footer-action svg { transform: translateX(4px); }
/* Audience-aware labels: only ONE visible, never concatenated */
.tag-label-pro,
.tag-label-public {
  display: none !important;
}
body.audience-pro .tag-label-pro,
body:not(.audience-public):not(.audience-pro) .tag-label-pro {
  display: inline !important;
}
body.audience-public .tag-label-public {
  display: inline !important;
}

.hub-card.is-hidden, .subgroup-block.is-hidden, .branch-section.is-hidden { display: none !important; }
/* Strict audience separation:
   - pro sees only pro sections
   - public sees only public sections
*/
body.audience-pro .branch-section[data-audience="public"] { display: none !important; }
body.audience-public .branch-section[data-audience="pro"] { display: none !important; }
.branch-section.is-filtered-out { display: none !important; }
/* Hide chips that point to sections of the other audience */
body.audience-pro .nav-chip-item[data-audience="public"] { display: none !important; }
body.audience-public .nav-chip-item[data-audience="pro"] { display: none !important; }

@media (max-width: 480px) {
  .hub-card { padding: 12px 14px; } .card-title { font-size: 12.5px; }
  .hdr-in, .ft-in { padding-left: 16px; padding-right: 16px; }
  .search-shortcut-hint { display: none; }
}

/* ---------- footer ---------- */
/* A dark "state-service" panel (Diia-style) instead of a plain hairline +
   yellow sticky-note -- deliberately breaks from the light card surfaces
   above so the footer reads as the site's institutional base, not just
   trailing whitespace. */
.ft {
  width: 100%; margin-top: auto; background: linear-gradient(165deg,#0F172A 0%,#111C34 55%,#0B1220 100%);
  border-radius: 28px 28px 0 0; padding: var(--space-xl) 24px calc(var(--space-lg) + env(safe-area-inset-bottom,0));
  color: #E2E8F0;
}
.ft-in { max-width: var(--hub-content); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-md); align-items: stretch; }
.ft-warn {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
  padding: 16px 20px; width: 100%; max-width: 720px; margin: 0 auto;
}
.ft-warn [data-icon] { color: #FBBF24; }
.ft-warn-head { font-size: 11px; font-weight: 800; color: #FDE68A; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
.ft-warn-text { font-size: 12.5px; line-height: 1.6; color: #CBD5E1; font-weight: 450; max-width: 560px; margin: 0 auto; }
.ft-row {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%;
  padding-top: var(--space-md); border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
}
.ft-brand { font-size: 13px; font-weight: 800; color: #F1F5F9; font-family: 'e-UkraineHead', system-ui, sans-serif; }
.ft-note { font-size: 11px; color: #94A3B8; line-height: 1.65; font-weight: 450; max-width: 640px; }

/* ---------- related materials ("Дивіться також") on tool pages ---------- */
.related-materials { max-width: 900px; margin: var(--space-xl) auto 0; }
.related-title { font-size: 15px; font-weight: 800; color: var(--text-dark); margin-bottom: var(--space-sm); font-family: 'e-UkraineHead', system-ui, sans-serif; }

/* ---------- scroll-top ---------- */
.scrollTop-btn { position: fixed; bottom: 24px; right: 24px; width: 42px; height: 42px; background: #fff; border: 1.5px solid var(--border-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-dark); box-shadow: var(--shadow-hover); cursor: pointer; z-index: 1500; opacity: 0; pointer-events: none; transform: translateY(12px); transition: .2s ease; }
.scrollTop-btn.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scrollTop-btn:hover { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }

/* ---------- embedded mode (tool page opened inside the reading panel iframe):
   hide the page's own header/footer since the panel already shows a title
   bar and actions, so only the article itself is visible ---------- */
body.is-embedded .hdr,
body.is-embedded .ft { display: none !important; }
body.is-embedded .wrap { padding-top: 18px; }

/* ---------- work-in-progress notice ---------- */
.beta-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #FFFBEB; border-bottom: 1px solid #FDE68A; color: #92400E;
  font-size: 12px; font-weight: 700; padding: 8px 16px; text-align: center;
}
.beta-banner [data-icon] { flex-shrink: 0; }
body.is-embedded .beta-banner { display: none; }

/* ---------- poster content component (used inside 8 "плакат" articles) ----------
   The original WP theme styled this markup in a separate print/A4 builder
   stylesheet (hub-poster-builder.css) that only ever loaded on its own
   export tool, not on the published article page -- so these 8 articles
   were shipping fully unstyled markup (raw text, no cards, no grid) on the
   live site. Ported the real component rules here (not invented), scaled
   from print points to comfortable on-screen px since this renders inside
   an article now, not a physical A4 sheet. */
.poster-master-wrapper { display: flex; flex-direction: column; gap: 18px; }
.poster-header-modern { border-bottom: 2px solid var(--border-subtle); padding-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.header-top-line { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.header-pill { display: inline-flex; align-items: center; gap: 6px; background: #E0F2FE; color: #0284C7; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(2, 132, 199, 0.2); }
.pill-dot { width: 5px; height: 5px; border-radius: 50%; background: #0284C7; flex-shrink: 0; }
.poster-code { font-size: 11px; font-weight: 800; color: #94A3B8; letter-spacing: 0.04em; }
.header-main-title { display: flex; align-items: stretch; gap: 10px; }
.accent-line { width: 4px; background: linear-gradient(180deg, var(--brand-red) 0%, #0284C7 100%); border-radius: 4px; flex-shrink: 0; }
.poster-title-text { font-family: 'e-UkraineHead', system-ui, sans-serif; font-size: 20px; font-weight: 800; color: var(--text-dark); margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
.poster-subtitle-text { font-size: 13px; color: var(--text-muted); margin: 2px 0 0 0; font-weight: 500; line-height: 1.35; }

.flow-step-divider { display: flex; align-items: center; justify-content: center; margin: 6px 0; position: relative; }
.flow-step-divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: linear-gradient(90deg, transparent 0%, var(--border-subtle) 20%, var(--border-subtle) 80%, transparent 100%); z-index: 1; }
.flow-step-badge { position: relative; z-index: 2; background: #F8FAFC; border: 1px solid var(--border-subtle); color: #475569; font-size: 11px; font-weight: 800; padding: 4px 14px; border-radius: 99px; letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; gap: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.03); }

.poster-block { display: flex; flex-direction: column; gap: 8px; }
.block-title-row { display: flex; align-items: center; gap: 8px; }
.block-title-row h2 { font-size: 16px; font-weight: 800; color: var(--text-dark); margin: 0; letter-spacing: -0.01em; }

.icon-badge { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; font-weight: 800; }
.icon-badge.blue { background: #E0F2FE; color: #0284C7; }
.icon-badge.amber { background: #FFFBEB; color: #D97706; }
.icon-badge.red { background: #FFF1F2; color: var(--brand-red); }
.icon-badge.gray { background: #F1F5F9; color: #475569; }

.grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 640px) {
  .grid-2x2, .grid-3col, .grid-4col { grid-template-columns: 1fr; }
}

.card-item { background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); border: 1px solid var(--border-subtle); border-left: 3px solid #0284C7; border-radius: 8px; padding: 10px 12px; display: flex; align-items: flex-start; gap: 9px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.check-icon-wrap { width: 22px; height: 22px; border-radius: 50%; background: #F0FDF4; color: #16A34A; border: 1px solid rgba(22, 163, 74, 0.25); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.card-content h3 { font-size: 13.5px; font-weight: 800; color: var(--text-dark); margin: 0 0 3px 0; }
.card-content p { font-size: 12.5px; color: var(--text-muted); margin: 0; line-height: 1.4; font-weight: 500; }

.temp-card-modern { background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.temp-card-modern.red { border-top: 3px solid var(--brand-red); }
.temp-card-modern.blue { border-top: 3px solid #0284C7; }
.temp-card-modern.amber { border-top: 3px solid #D97706; }
.temp-card-modern.purple { border-top: 3px solid #7C3AED; }

.temp-type-tag { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 4px; width: fit-content; text-transform: uppercase; }
.temp-type-tag.red { background: #FFF1F2; color: var(--brand-red); }
.temp-type-tag.blue { background: #F0F9FF; color: #0284C7; }
.temp-type-tag.amber { background: #FFFBEB; color: #D97706; }
.temp-type-tag.purple { background: #F5F3FF; color: #7C3AED; }

.temp-degree { font-family: 'e-UkraineHead', system-ui, sans-serif; font-size: 17px; font-weight: 800; color: var(--text-dark); margin: 3px 0; }
.temp-desc { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.4; font-weight: 500; }
.temp-footer { font-size: 11.5px; font-weight: 800; color: var(--text-dark); margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--border-subtle); }

.action-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 640px) { .action-steps-grid { grid-template-columns: 1fr; } }
.action-step { background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px 12px; display: flex; align-items: flex-start; gap: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.action-num { font-family: 'e-UkraineHead', system-ui, sans-serif; font-size: 13px; font-weight: 800; background: #475569; color: #FFF; width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.action-text { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; font-weight: 500; }

.danger-block { background: linear-gradient(180deg, #FFF1F2 0%, #FFFFFF 100%); border: 1.5px solid #FECDD3; border-radius: 10px; padding: 12px 16px; }

/* ---------- reduced motion catch-all ---------- */
@media (prefers-reduced-motion: reduce) {
  .logo.logo-animated, .logo-icon-wrap, .logo-pulse-ring, .orb { animation: none !important; }
  .audience-gate, .audience-gate-card, .disclaimer-modal-overlay, .disclaimer-modal-card, .hub-card, .nav-chip-item, .audience-btn, .scrollTop-btn, .scenario-card, .search-clear-btn { transition: none !important; }
  .hub-card:hover, .scenario-card:hover, .audience-gate-choice:hover { transform: none !important; }
}

/* ---------- unified clean backgrounds ---------- */
.audience-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.audience-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(244,246,250,.95) 0%, rgba(244,246,250,.85) 100%);
  z-index: -1;
  pointer-events: none;
}
body.audience-pro .audience-hero::before {
  background: linear-gradient(165deg, rgba(255,241,242,.92) 0%, rgba(244,246,250,.9) 55%, rgba(241,245,249,.95) 100%);
}
body.audience-public .audience-hero::before {
  background: linear-gradient(165deg, rgba(204,251,241,.65) 0%, rgba(244,246,250,.92) 60%, rgba(241,245,249,.96) 100%);
}

/* Clean article surface — no texture images */
body.audience-pro .article,
body.audience-public .article,
.article {
  background: #FFFFFF;
  background-image: none;
}

/* Unified card hover lift */
.tool-card, .card, .hub-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tool-card:hover, .card:hover, .hub-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Soft section dividers on index */
.section-block {
  position: relative;
}
.section-block + .section-block {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(226,232,240,.8);
}

/* Footer warm accent strip */
.ft {
  position: relative;
}
.ft::before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--brand-red) 0%, #BE123C 40%, var(--brand-teal) 100%);
  opacity: .85;
}

/* Consistent badge pills */
.badge, .tool-badge, .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

/* Reader panel polish */
.reader-panel {
  border-left: 1px solid var(--border-subtle);
}
.reader-body {
  background: #fff;
}

@media (max-width: 720px) {
  .audience-hero::before { opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card:hover, .card:hover, .hub-card:hover { transform: none; }
}

/* Soft ambient without photo textures */
.bg-ambient-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(225,29,72,.06), transparent 60%);
  opacity: 1;
  pointer-events: none;
}
body.audience-public .bg-ambient-layer::after {
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(13,148,136,.07), transparent 60%);
}
body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(225,29,72,.04), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 50%, rgba(13,148,136,.04), transparent 50%);
  background-attachment: fixed;
}

/* Clearer subgroup separation (esp. public audience) */
.subgroup-block {
  margin-bottom: 28px;
}
.subgroup-node-badge {
  margin: 8px 0 14px;
}
.branch-section .subgroup-block + .subgroup-block {
  padding-top: 8px;
  border-top: 1px dashed rgba(148, 163, 184, .35);
}
body.audience-public .branch-section {
  margin-bottom: 48px;
}


/* ========== Section layout (stable) ========== */
.parent-node-badge {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 16px;
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  padding: 0;
  flex-direction: row;
  flex-wrap: wrap;
}
.pulse-core-node {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  height: auto;
  flex: 0 0 auto;
  padding: 8px 18px;
  border-radius: 999px;
  writing-mode: horizontal-tb;
  transform: none;
  background: color-mix(in srgb, var(--sec) 9%, #fff);
  color: var(--text-dark);
  border: 1.5px solid color-mix(in srgb, var(--sec) 32%, #e2e8f0);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--sec) 12%, transparent);
  font-weight: 800;
}

.branch-section {
  position: relative;
  z-index: 2;
  margin-bottom: 36px;
  scroll-margin-top: 100px;
  /* soft panel */
  background: color-mix(in srgb, var(--sec, #94a3b8) 5%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--sec, #94a3b8) 14%, #e2e8f0);
  border-radius: 20px;
  padding: 16px 16px 18px;
}

.subgroup-block {
  margin-bottom: 20px;
}
.subgroup-block:last-child {
  margin-bottom: 0;
}
.subgroup-node-badge {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 12px;
}
.subgroup-badge-inner {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--sec) 22%, #e2e8f0);
  padding: 5px 14px;
  border-radius: 999px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 14px;
  width: 100%;
}

.hub-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--card-accent, #CBD5E1);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  overflow: hidden;
  min-height: 108px;
  box-shadow: var(--shadow-subtle);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hub-card:hover, .hub-card.active-reader {
  transform: translateY(-2px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover), 0 0 0 2px color-mix(in srgb, var(--card-accent, var(--brand-red)) 35%, transparent);
}

/* Global page bg */
body.audience-pro { background-color: #F4F6FA; }
body.audience-public { background-color: #F6FAF9; }

.app-workspace.reader-active .main-tree { max-width: 420px; }
.app-workspace.reader-active .hub-card { min-height: 0; padding: 12px 14px; }
.app-workspace.reader-active .card-title { font-size: 12.5px; }


/* Softer modern radii — no hard square panels */
:root {
  --radius-card: 18px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
}
.hub-card { border-radius: 18px !important; }
.branch-section { border-radius: 22px !important; }
.audience-gate-choice { border-radius: 18px !important; }
.gate-ico { border-radius: 16px !important; }
.tag-badge { border-radius: 8px !important; }
.reader-panel { border-radius: 20px !important; }
.scenario-card, .scenarios a, .sc-card {
  border-radius: 18px !important;
}
.search-box, .hub-search, input[type="search"], .search-input {
  border-radius: 16px !important;
}
.nav-chip-item, .chip, .section-chip {
  border-radius: 999px !important;
}
.parent-node-badge .pulse-core-node,
.subgroup-badge-inner {
  border-radius: 999px !important;
}

/* WIP development banner */
.wip-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(1280px, 100%);
  margin: 10px auto 0;
  padding: 10px 16px;
  background: linear-gradient(90deg, #FFF7ED, #FFF1F2);
  border: 1px solid #FED7AA;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #9A3412;
  font-weight: 500;
  box-sizing: border-box;
  width: calc(100% - 32px);
}
.wip-banner strong { font-weight: 800; color: #C2410C; }
.wip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #F97316;
  margin-top: 5px;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .25);
  animation: wipPulse 2s ease-in-out infinite;
}
@keyframes wipPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
body.is-embedded .wip-banner { display: none; }

/* Font stack: e-Ukraine (self-hosted in /fonts, preloaded on index) */
body, button, input, textarea, select {
  font-family: 'e-Ukraine', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
h1, h2, h3, h4, h5, .logo-title, .parent-badge-text, .subgroup-badge-text,
.card-title, .section-title, .title {
  font-family: 'e-UkraineHead', 'e-Ukraine', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: -0.02em;
}

/* Global form softness on hub shell */
input, select, textarea, button {
  border-radius: 12px;
}
button, .btn, [type="submit"] {
  border-radius: 14px !important;
}
input[type="text"], input[type="search"], input[type="number"], input[type="date"], select, textarea {
  border-radius: 12px !important;
}

/* Prevent concatenated reader tags: only one audience label visible */
.tag-label-public { display: none; }
.tag-label-pro { display: inline; }
body.audience-public .tag-label-public { display: inline; }
body.audience-public .tag-label-pro { display: none; }
body.audience-pro .tag-label-pro { display: inline; }
body.audience-pro .tag-label-public { display: none; }

/* ===== Catalog & materials display v55+ ===== */

/* Section headers */
.branch-section {
  margin-bottom: 28px;
}
.branch-section .parent-badge,
.branch-head {
  margin-bottom: 14px;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* Hub cards — clearer hierarchy */
.hub-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  min-height: 118px;
  position: relative;
  overflow: hidden;
}
.hub-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--card-accent, #E11D48);
  opacity: 0.85;
  border-radius: 16px 0 0 16px;
}
.hub-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07);
  transform: translateY(-2px);
}
.hub-card.active-reader {
  border-color: color-mix(in srgb, var(--card-accent, #E11D48) 45%, #E2E8F0);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-accent, #E11D48) 18%, transparent);
  background: #FAFAFA;
}
.hub-card .card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.hub-card .card-title {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.35;
  color: #0F172A;
  margin: 0 0 12px;
  letter-spacing: -0.015em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hub-card .card-footer-row {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hub-card .card-footer-action {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--card-accent, #E11D48);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hub-card .read-time-badge {
  font-size: 11px;
  font-weight: 700;
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.hub-card .tag-badge {
  font-size: 9px !important;
  letter-spacing: 0.04em;
}

/* Search / filter empty */
.cards-grid:empty::after,
.no-results-hint {
  display: block;
  text-align: center;
  padding: 32px 16px;
  color: #94A3B8;
  font-size: 14px;
}

/* Reader panel polish */
.reader-panel {
  border-radius: 18px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  background: #fff;
}
.reader-head {
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
}
.reader-title {
  font-size: 14px !important;
  letter-spacing: -0.01em;
}
.reader-frame-wrap {
  background: #F8FAFC;
}
.reader-frame-wrap iframe {
  background: #fff;
}

/* Nav chips counters */
.chip-counter {
  font-size: 10.5px;
  font-weight: 800;
  background: #F1F5F9;
  color: #64748B;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 1.5em;
  text-align: center;
}
.nav-chip-item.active .chip-counter {
  background: rgba(255,255,255,.22);
  color: #fff;
}

/* Public mode topic tiles (shortcut cards) */
.topic-tiles,
.public-topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 18px 0 8px;
}
.topic-tile {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  transition: 0.18s ease;
}
.topic-tile:hover {
  border-color: #CBD5E1;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  transform: translateY(-2px);
}
.topic-tile-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #FFF1F2;
  color: #E11D48;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.topic-tile h3 {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 4px;
  color: #0F172A;
}
.topic-tile p {
  font-size: 12.5px;
  color: #64748B;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hub-card {
    min-height: 0;
    padding: 14px 16px;
  }
}

/* Empty search state */
#emptyState {
  display: none;
  text-align: center;
  color: #64748B;
  font-size: 14.5px;
  margin: 40px auto;
  max-width: 420px;
  padding: 28px 20px;
  background: #F8FAFC;
  border: 1px dashed #CBD5E1;
  border-radius: 16px;
  line-height: 1.5;
}
#emptyState[style*="block"] {
  display: block !important;
}

/* Embedded tool pages — breathing room */
body.is-embedded {
  background: #F8FAFC;
}
body.is-embedded .wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 18px 40px !important;
}
body.is-embedded .wip-banner {
  display: none !important;
}
body.is-embedded .badge {
  margin-bottom: 8px;
}
body.is-embedded .title {
  margin-bottom: 6px;
}
body.is-embedded .meta {
  margin-bottom: 16px;
}


/* --- polish pass --- */
.idea-btn { white-space: nowrap; }
.wip-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: min(920px, calc(100% - 32px));
  margin: 12px auto 0;
  line-height: 1.45;
}
.wip-banner span:last-child { min-width: 0; }
.audience-hero p,
.scenario-card p,
.nav-chip-item,
.card-footer-action,
.meta, .lead { color: #475569; }
.search-shortcut-hint { display: none; }
@media (min-width: 768px) {
  .search-shortcut-hint { display: inline-block; }
}
.scenario-card { align-items: stretch; min-height: 88px; }
.scenario-card > div:last-child { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hub-card { display: flex; flex-direction: column; min-height: 148px; }
.card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nav-chip-item span:first-child { line-height: 1.25; }
@media (max-width: 640px) {
  .idea-btn { min-width: 40px; justify-content: center; }
}

@media (max-width: 480px) {
  /* audience-btn mobile compact */
  .audience-btn { padding: 8px 12px; font-size: 11.5px; }
  .audience-switch { width: 100%; justify-content: stretch; }
  .audience-btn { flex: 1; justify-content: center; }
}

/* ========== TransfusionHub live-pass v61: оживлення без ломки верстки ========== */
.search-meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.result-count{font-size:12px;font-weight:600;color:#64748B}
body.audience-public .result-count{color:#0F766E}
.fav-toggle-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--border-subtle);color:#475569;font-family:inherit;font-size:12px;font-weight:800;padding:7px 14px;border-radius:999px;cursor:pointer;transition:.2s ease}
.fav-toggle-btn:hover{border-color:#F43F5E;color:#E11D48;transform:translateY(-1px);box-shadow:0 6px 16px rgba(225,29,72,.12)}
.fav-toggle-btn.active{background:linear-gradient(135deg,#E11D48,#BE123C);border-color:#BE123C;color:#fff;box-shadow:0 6px 18px rgba(225,29,72,.3)}
.fav-count{font-size:10px;font-weight:800;background:#F1F5F9;color:#64748B;padding:1px 7px;border-radius:999px}
.fav-toggle-btn.active .fav-count{background:rgba(255,255,255,.25);color:#fff}
/* картка-обране: сердечко */
.hub-card{position:relative}
.fav-star{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;border:1px solid var(--border-subtle);background:rgba(255,255,255,.9);color:#CBD5E1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:scale(.8);transition:.18s ease;z-index:3}
.hub-card:hover .fav-star,.hub-card:focus-within .fav-star,.fav-star.is-fav{opacity:1;transform:scale(1)}
.fav-star:hover{border-color:#F43F5E;color:#E11D48}
.fav-star.is-fav{background:#FFF1F2;border-color:#FECDD3;color:#E11D48}
.hub-card.is-fav{border-color:#FECDD3}
.hub-card.is-fav::before{background:#E11D48}
@media (hover:none){.fav-star{opacity:1;transform:none}}
/* живіший hero */
.audience-hero{padding-top:18px;padding-bottom:18px}
.audience-hero h1,.audience-hero .hero-subhead{background:linear-gradient(120deg,#0F172A 30%,#BE123C 70%,#0D9488 110%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-stats strong{display:inline-block;min-width:1.6em;background:#0F172A;color:#fff;border-radius:8px;padding:1px 8px;font-size:12px}
body.audience-public .hero-stats strong{background:#0F766E}
/* сценарії: живий hover */
.scenario-card{position:relative;overflow:hidden}
.scenario-card::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(225,29,72,.08) 50%,transparent 70%);transform:translateX(-100%);transition:transform .6s ease;pointer-events:none}
.scenario-card:hover::after{transform:translateX(100%)}
body.audience-public .scenario-card:hover{border-color:rgba(13,148,136,.4)}
/* картки: блик + stagger */
.hub-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.hub-card::after{transition:opacity .25s ease}
.hub-card:hover::after{opacity:.25}
.reveal{transition-delay:var(--reveal-delay,0s)}
/* пошук: пульс при фокусі */
.search-box:focus-within{animation:searchPulse 1.6s ease-in-out infinite}
@keyframes searchPulse{0%,100%{box-shadow:0 0 0 4px rgba(225,29,72,.12)}50%{box-shadow:0 0 0 7px rgba(225,29,72,.07)}}
body.audience-public .search-box:focus-within{animation-name:searchPulseTeal}
@keyframes searchPulseTeal{0%,100%{box-shadow:0 0 0 4px rgba(13,148,136,.14)}50%{box-shadow:0 0 0 7px rgba(13,148,136,.07)}}
/* донор CTA: живий градієнт */
.donor-cta-btn{background:linear-gradient(120deg,#0D9488,#0F766E,#E11D48,#0D9488);background-size:220% 220%;animation:ctaFlow 7s ease infinite}
@keyframes ctaFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* секції: м'який вхід */
.branch-section{transition:box-shadow .25s ease,transform .25s ease}
.branch-section:hover{box-shadow:0 10px 32px rgba(15,23,42,.07)}
/* скролбар */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:8px;border:2px solid #F4F6FA}
::-webkit-scrollbar-thumb:hover{background:#94A3B8}
::selection{background:rgba(225,29,72,.18)}
body.audience-public ::selection{background:rgba(13,148,136,.2)}
@media (prefers-reduced-motion:reduce){.search-box:focus-within,.donor-cta-btn,.scenario-card::after{animation:none!important}.scenario-card::after{display:none}}

/* ========== Command palette (Ctrl+K): швидкий стрибок до матеріалу ========== */
.palette-overlay{position:fixed;inset:0;z-index:10080;background:rgba(15,23,42,.5);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.palette-overlay.open{display:flex}
.palette-card{background:#fff;border-radius:18px;width:100%;max-width:560px;box-shadow:0 30px 60px rgba(15,23,42,.3);overflow:hidden;animation:palIn .18s ease}
@keyframes palIn{from{transform:translateY(-8px) scale(.99);opacity:.6}to{transform:none;opacity:1}}
.palette-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-subtle);color:#94A3B8}
#paletteInput{border:none;outline:none;background:transparent;font-family:inherit;font-size:15px;font-weight:600;width:100%;color:var(--text-dark)}
.palette-list{max-height:min(46vh,380px);overflow-y:auto;padding:8px}
.palette-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:none;font-family:inherit;padding:10px 12px;border-radius:12px;cursor:pointer;color:inherit;text-decoration:none}
.palette-item:hover,.palette-item.active{background:#F1F5F9}
.palette-item .pal-type{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#0D9488;background:#CCFBF1;padding:3px 8px;border-radius:6px;flex-shrink:0}
.palette-item .pal-title{font-size:13.5px;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palette-item .pal-go{color:#CBD5E1;font-size:13px}
.palette-item.active .pal-go{color:var(--brand-red)}
.palette-group{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#94A3B8;padding:10px 12px 4px}
.palette-empty{padding:22px;text-align:center;color:#94A3B8;font-size:13px}
.palette-foot{display:flex;gap:12px;padding:10px 16px;border-top:1px solid var(--border-subtle);font-size:11px;color:#94A3B8}
.palette-foot kbd{background:#F1F5F9;border:1px solid var(--border-subtle);border-radius:5px;padding:1px 6px;font-family:inherit;font-weight:700}
@media (prefers-reduced-motion:reduce){.palette-card{animation:none}}

/* ========== Worker perf-pass: швидкий перший рендер довгої головної ========== */
.branch-section{content-visibility:auto;contain-intrinsic-size:auto 600px}
.hub-card{content-visibility:auto;contain-intrinsic-size:auto 150px}
.reader-iframe{background:#fff}
img{content-visibility:auto}