:root{
  --bg:#f0f6ff;
  --white:#ffffff;
  --navy:#0f2d5c;
  --blue:#1a56db;
  --blue2:#2563eb;
  --blue3:#3b82f6;
  --blue4:#93c5fd;
  --blue5:#dbeafe;
  --blue6:#eff6ff;
  --text:#0f2d5c;
  --muted:#4b6a9b;
  --border:#bfdbfe;
  --red:#dc2626;
  --green:#16a34a;
  --orange:#ea580c;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 1px 3px rgba(15,45,92,.08),0 4px 16px rgba(15,45,92,.06);
  --shadow-md:0 4px 24px rgba(15,45,92,.1),0 1px 4px rgba(15,45,92,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:15px;line-height:1.6}

/* HEADER */












.search-btn{display:none}


















#search-results{
  position:absolute;left:0;right:0;top:calc(100% + .55rem);
  max-width:240px;margin:0;display:none;z-index:250
}
.s-hit{
  padding:.5rem .8rem;margin:.2rem 0;
  background:#fff;border-radius:var(--radius-sm);cursor:pointer;
  border:1px solid var(--border);font-size:.82rem;color:var(--text);
  line-height:1.5;transition:border-color .15s
}
.s-hit:hover{border-color:var(--blue3)}

/* NAV */







.dropdown{
  display:none;position:absolute;top:100%;left:0;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-sm);min-width:200px;
  box-shadow:var(--shadow-md);z-index:200;overflow:hidden
}

.dropdown a{
  display:block;padding:.55rem 1rem;
  color:var(--muted);font-size:.82rem;text-decoration:none;
  border-bottom:1px solid var(--blue5);cursor:pointer;
  transition:background .1s;white-space:nowrap
}
.dropdown a:last-child{border-bottom:none}
.dropdown a:hover{background:var(--blue6);color:var(--blue)}
.dropdown-sep{height:1px;background:var(--blue5);margin:.2rem 0}







/* HERO */
.hero{
  background:linear-gradient(135deg,var(--navy) 0%,#1a3a7c 50%,#1d4ed8 100%);
  padding:3rem 2rem;text-align:center;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-title{
  font-family:Inter,sans-serif;font-size:2.6rem;color:#fff;font-weight:600;
  line-height:1.15;margin-bottom:.6rem;position:relative;letter-spacing:0
}
.hero-sub{color:rgba(255,255,255,.75);font-size:1rem;margin-bottom:.8rem;position:relative;font-weight:300}
.hero-dates{
  color:rgba(255,255,255,.5);font-size:.78rem;letter-spacing:.22em;
  text-transform:uppercase;position:relative
}

/* MAIN */
.main{max-width:1060px;margin:0 auto;padding:1.8rem 2rem}
.sec{display:block}
.sec-title{
  font-family:Inter,sans-serif;font-size:1.7rem;color:var(--navy);font-weight:600;
  margin-bottom:1.4rem;padding-bottom:.5rem;
  border-bottom:2px solid var(--blue5);letter-spacing:0
}

/* CARDS */
.card{
  background:var(--white);border-radius:var(--radius);
  padding:1.4rem 1.6rem;margin-bottom:1.2rem;
  box-shadow:var(--shadow);border:1px solid var(--border);
}
.card h3{
  font-family:Inter,sans-serif;font-size:1rem;color:var(--navy);
  margin-bottom:.65rem;padding-bottom:.45rem;
  border-bottom:1px solid var(--blue5);font-weight:600
}
.card p{line-height:1.75;font-size:.92rem;color:var(--muted);margin-bottom:.45rem}
.card p:last-child{margin-bottom:0}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.2rem}
@media(max-width:720px){
  .g2,.g3{grid-template-columns:1fr}
  .hero-title{font-size:1.8rem}
  
  .main{padding:1.2rem 1rem}
}

/* QUESTION BOX */
.qbox{
  background:linear-gradient(135deg,#fff5f5,#fff);
  border:1px solid #fecaca;border-left:4px solid var(--red);
  padding:1rem 1.3rem;margin:1rem 0;font-size:.9rem;
  color:var(--navy);line-height:1.7;border-radius:0 var(--radius-sm) var(--radius-sm) 0
}
.qbox strong{color:var(--red)}

/* STAT CARDS */
.stat-card{
  background:linear-gradient(135deg,var(--blue6),#fff);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:1.2rem 1.4rem;box-shadow:var(--shadow)
}
.stat-card .sc-label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.3rem}
.stat-card .sc-name{font-family:Inter,sans-serif;font-size:1.05rem;color:var(--navy);font-weight:600;margin-bottom:.25rem}
.stat-card .sc-dates{font-size:.82rem;color:var(--muted)}

/* TREE */
.tree-wrap{
  background:var(--white);padding:2rem;border-radius:var(--radius);
  box-shadow:var(--shadow);border:1px solid var(--border);overflow-x:auto
}
.tree{display:flex;flex-direction:column;align-items:center;min-width:780px}
.tlevel{display:flex;gap:1.2rem;justify-content:center;width:100%;padding:.35rem 0}
.tconn{height:1.4rem;width:100%;position:relative}
.tconn::after{content:'';position:absolute;top:0;left:50%;width:1px;height:100%;background:var(--blue4)}
.tconn-h{height:0;border-top:1px solid var(--blue4);width:38%;margin:0 auto}
.tnode{
  background:var(--white);border:1px solid var(--border);
  border-top:3px solid var(--blue);border-radius:var(--radius-sm);
  padding:.65rem .9rem;min-width:158px;max-width:195px;
  text-align:center;position:relative;box-shadow:var(--shadow)
}
.tnode::before{content:'';position:absolute;top:-.5rem;left:50%;transform:translateX(-50%);width:1px;height:.5rem;background:var(--blue4)}
.tnode.you{background:linear-gradient(135deg,var(--blue6),#fff);border-color:var(--blue);border-top-color:var(--blue2);box-shadow:var(--shadow-md)}
.tnode.unk{border-style:dashed;border-top-style:dashed;border-color:var(--blue4);background:var(--blue6)}
.nn{font-family:Inter,sans-serif;font-size:.85rem;color:var(--navy);font-weight:600;margin-bottom:.18rem}
.nd{font-size:.69rem;color:var(--muted);line-height:1.4}
.ntag{display:inline-block;font-size:.63rem;padding:.1rem .42rem;border-radius:10px;margin-top:.22rem;background:var(--blue5);color:var(--blue2);font-weight:500}
.ntag.utag{background:#f0f9ff;color:#0369a1}
.ntag.ytag{background:var(--blue5);color:var(--navy);font-weight:600}

/* TABLE */
.stbl{width:100%;border-collapse:collapse;font-size:.84rem}
.stbl th{background:var(--navy);color:#fff;padding:.65rem 1rem;text-align:left;font-weight:500;font-size:.8rem;letter-spacing:.04em}
.stbl th:first-child{border-radius:var(--radius-sm) 0 0 0}
.stbl th:last-child{border-radius:0 var(--radius-sm) 0 0}
.stbl tr:nth-child(even) td{background:var(--blue6)}
.stbl td{padding:.65rem 1rem;border-bottom:1px solid var(--border);color:var(--muted);vertical-align:top;line-height:1.5}
.stbl td strong{color:var(--navy)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.35rem;vertical-align:middle}
.dw{background:var(--orange)}.dd{background:var(--green)}.dn{background:var(--red)}

/* TIMELINE */
.tl{position:relative;padding-left:2.2rem}
.tl::before{content:'';position:absolute;left:.65rem;top:0;bottom:0;width:2px;background:linear-gradient(var(--blue),var(--blue3));border-radius:2px}
.tli{position:relative;padding-bottom:1.2rem}
.tli::before{content:'';position:absolute;left:-1.62rem;top:.32rem;width:10px;height:10px;border-radius:50%;background:var(--blue);border:2px solid #fff;box-shadow:0 0 0 2px var(--blue3)}
.tly{font-weight:600;color:var(--navy);font-size:.9rem;margin-bottom:.1rem}
.tlt{font-size:.86rem;color:var(--muted);line-height:1.6}

/* UPDATES */
.upd-item{padding:.7rem 0;border-bottom:1px dashed var(--border);display:flex;gap:.8rem;align-items:flex-start}
.upd-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:.35rem}
.upd-dot-new{background:#f59e0b}
.upd-dot-done{background:#16a34a}
.upd-dot-info{background:#3b82f6}
.upd-content{flex:1}
.upd-date{color:var(--blue);font-weight:600;font-size:.8rem}
.upd-text{color:var(--muted);font-size:.86rem;line-height:1.5;margin-top:.12rem}

/* RESOURCES */
.res-link{
  display:flex;align-items:center;gap:.6rem;
  padding:.6rem .8rem;border-radius:var(--radius-sm);
  text-decoration:none;color:var(--blue);font-size:.88rem;
  transition:background .15s;border:1px solid transparent
}
.res-link:hover{background:var(--blue6);border-color:var(--border)}
.res-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:.9rem;background:var(--blue);color:#fff;
  padding:.42rem 1.1rem;border-radius:20px;text-decoration:none;
  font-size:.82rem;font-weight:500;transition:background .15s
}
.res-btn:hover{background:var(--blue2)}

/* BADGE */
.badge{display:inline-block;font-size:.65rem;padding:.18rem .55rem;border-radius:20px;font-weight:500}
.badge-blue{background:var(--blue5);color:var(--blue2)}
.badge-green{background:#dcfce7;color:#15803d}
.badge-red{background:#fee2e2;color:#dc2626}

/* FOOTER */
.footer{background:var(--navy);padding:1.6rem 2rem;margin-top:2.5rem}
.footer-main{text-align:center;color:rgba(255,255,255,.6);font-size:.78rem;margin-bottom:.6rem}
.footer-copy{text-align:center;color:rgba(255,255,255,.35);font-size:.7rem;line-height:1.6;max-width:800px;margin:0 auto;border-top:1px solid rgba(255,255,255,.1);padding-top:.7rem}
.analytics-link{
  position:fixed;right:18px;bottom:18px;z-index:9999;
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(15,45,92,.94);color:#fff;text-decoration:none;
  padding:.5rem .9rem;border-radius:20px;
  font-size:.78rem;font-weight:700;line-height:1;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  backdrop-filter:blur(8px);
  transition:background .15s,transform .15s
}
.analytics-link:hover{background:rgba(26,86,219,.96);transform:translateY(-1px);color:#fff}
@media(max-width:560px){.analytics-link{right:12px;bottom:12px;padding:.48rem .7rem;font-size:.72rem}.analytics-link span{display:none}}


/* SVG */
.lbl{font-family:Inter,Arial,sans-serif;font-size:13px;fill:#0f2d5c}.lbl-sm{font-family:Inter,Arial,sans-serif;font-size:10px;fill:#4b6a9b}.lbl-wh{font-family:Inter,Arial,sans-serif;font-size:12px;fill:#ffffff}.lbl-yr{font-family:Inter,Arial,sans-serif;font-size:11px;fill:#1a56db;font-weight:bold}.title{font-family:Inter,Arial,sans-serif;font-size:18px;fill:#0f2d5c;font-weight:bold}

.tt2{font-family:Inter,sans-serif;font-size:17px;font-weight:500;fill:#0f2d5c}
.tts{font-family:Inter,sans-serif;font-size:14px;fill:#4b6a9b}
.ttg{font-family:Inter,sans-serif;font-size:14px;font-weight:600;fill:#1a56db;text-transform:uppercase;letter-spacing:.08em}
.ttw{font-family:Inter,sans-serif;font-size:17px;font-weight:600;fill:#fff}
.ttwh{font-family:Inter,sans-serif;font-size:14px;fill:#dbeafe}

/* SEO page split */
.sec{display:block}
.sec.on{display:block}


.seo-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.seo-intro,.seo-branches,.seo-relatives{margin:1.2rem 0}
.seo-intro h2,.seo-branches h2,.seo-relatives h2{font-size:1.15rem;color:var(--navy);margin-bottom:.7rem;line-height:1.3}
.seo-intro p,.seo-branches p,.seo-relatives p{color:var(--muted);font-size:.92rem;line-height:1.75;margin:.45rem 0}
.seo-link-list{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem}
.seo-link-list a,.seo-branches a,.seo-relatives a{color:var(--blue);font-weight:700;text-decoration:none}
.seo-link-list a{padding:.42rem .7rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--blue6)}
.seo-link-list a:hover,.seo-branches a:hover,.seo-relatives a:hover{color:var(--navy);border-color:var(--blue3)}
.seo-relatives ul{margin:.7rem 0 0 1.1rem;color:var(--muted);font-size:.92rem;line-height:1.75}

/* Contact */
.contact-actions{display:flex;flex-direction:column;gap:.8rem;margin-top:.3rem}
.contact-action{display:flex;align-items:center;gap:.8rem;padding:.75rem 1rem;background:var(--blue6);border:1px solid var(--border);border-radius:var(--radius-sm);text-decoration:none;transition:border-color .15s,transform .15s}
.contact-action:hover{border-color:var(--blue3);transform:translateY(-1px)}
.contact-action.telegram .contact-action-icon{background:#229ed9;color:#fff}
.contact-action.mail .contact-action-icon{background:var(--blue);color:#fff}
.contact-action.dna .contact-action-icon{background:#0f766e;color:#fff}
.contact-action.paypal{background:#fffbeb;border-color:#fde68a}
.contact-action.paypal:hover{border-color:#fbbf24}
.contact-action.paypal .contact-action-icon{background:#ffc439;color:#003087}
.contact-action-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;flex-shrink:0}
.contact-action strong{display:block;font-size:.9rem;color:var(--navy)}
.contact-action small{display:block;font-size:.8rem;color:var(--muted);margin-top:.1rem}
.contact-form-card{margin:1.2rem 0}
.contact-form-card h2{font-size:1.15rem;color:var(--navy);margin-bottom:.55rem;line-height:1.3}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1rem}
.contact-form label{display:flex;flex-direction:column;gap:.35rem;color:var(--navy);font-size:.85rem;font-weight:700}
.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.65rem .75rem;font:inherit;color:var(--text);background:#fff;outline:none}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--blue3);box-shadow:0 0 0 3px rgba(147,197,253,.35)}
.contact-form-wide{grid-column:1/-1}
.contact-submit{justify-self:start;border:0;border-radius:var(--radius-sm);background:var(--blue);color:#fff;padding:.7rem 1.1rem;font-weight:800;cursor:pointer}
.contact-submit:hover{background:var(--navy)}
.contact-status{align-self:center;color:var(--muted);font-size:.86rem}
.contact-name-box{margin-top:1rem;padding:1rem;background:var(--blue6);border-radius:var(--radius-sm);border:1px solid var(--border)}
.contact-name-box p{font-size:.85rem;color:var(--muted);line-height:1.7}
@media(max-width:680px){.contact-form{grid-template-columns:1fr}.contact-status{grid-column:1/-1}}
.contact-bot-card{
  margin:1.2rem 0;
  background:linear-gradient(180deg,#ffffff,#f4f8ff);
}
.contact-bot-card h2{
  font-size:1.15rem;
  color:var(--navy);
  margin-bottom:.45rem;
}
.contact-bot-card > p{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.55;
  margin:.2rem 0 .9rem;
}
.contact-bot{
  display:grid;
  gap:.75rem;
}
.bot-messages{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.bot-message{
  width:fit-content;
  max-width:760px;
  padding:.65rem .8rem;
  border-radius:14px;
  color:#17345f;
  font-size:.9rem;
  line-height:1.45;
}
.bot-message-assistant{
  background:#e8f1ff;
  border:1px solid #c8ddff;
}
.bot-quick{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.bot-quick button,
.bot-action{
  border:1px solid var(--border);
  border-radius:10px;
  background:#f8fbff;
  color:var(--blue);
  padding:.5rem .72rem;
  font:inherit;
  font-size:.85rem;
  line-height:1.25;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  white-space:normal;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.bot-quick button:hover,
.bot-action:hover{
  transform:translateY(-1px);
  border-color:var(--blue3);
  background:#eef5ff;
}
.bot-input-label{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  color:var(--navy);
  font-size:.85rem;
  font-weight:800;
}
.bot-input-label textarea{
  width:100%;
  resize:vertical;
  min-height:104px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:.7rem .8rem;
  font:inherit;
  color:var(--text);
  background:#fff;
  outline:none;
}
.bot-input-label textarea:focus{
  border-color:var(--blue3);
  box-shadow:0 0 0 3px rgba(147,197,253,.35);
}
.bot-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  align-items:center;
}
.bot-action.primary{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}
.bot-action.telegram{
  background:#229ed9;
  border-color:#229ed9;
  color:#fff;
}
@media(max-width:680px){
  .bot-quick button{
    flex:1 1 calc(50% - .5rem);
    min-width:0;
    text-align:center;
  }
  .bot-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .bot-action{
    min-width:0;
    width:100%;
    text-align:center;
  }
}


/* Final header search placement: right side, visually aligned under language buttons */





/* Compact header: about 30% smaller */

















#search-results{max-width:200px!important;top:calc(100% + .35rem)!important}
.s-hit{font-size:.68rem!important;padding:.42rem .62rem!important}




/* Soft modern refresh: visual polish only, content unchanged */
:root{
  --bg:#eef5ff;
  --white:#ffffff;
  --navy:#102b55;
  --blue:#1d5fd8;
  --blue2:#2f6ee8;
  --blue3:#5b8ff0;
  --blue4:#a9c8ff;
  --blue5:#dbeaff;
  --blue6:#f3f8ff;
  --muted:#486a9d;
  --border:#c7dcff;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(15,45,92,.06),0 12px 30px rgba(15,45,92,.08);
  --shadow-md:0 8px 28px rgba(15,45,92,.12),0 2px 8px rgba(15,45,92,.08);
  /* Семантические переменные для тёмной темы */
  --surface:#ffffff;          /* фон карточек */
  --surface-2:#f3f8ff;        /* фон вложенных блоков (qbox) */
  --text-strong:#102b55;      /* основной текст */
  --text-soft:#486a9d;        /* приглушённый текст (muted) */
  --link:#1d5fd8;             /* ссылки */
  --body-gradient: linear-gradient(180deg,#edf5ff 0%,#f9fcff 46%,#eef5ff 100%);
}

/* === ТЁМНАЯ ТЕМА === */
[data-theme="dark"]{
  --bg:#0a1428;
  --white:#1a2640;             /* "белый" фон карточек теперь тёмно-синий */
  --navy:#e8eef9;              /* "navy" текст теперь светлый */
  --blue:#5b8ff0;              /* акценты слегка ярче */
  --blue2:#7aa5f5;
  --blue3:#a9c8ff;
  --blue4:#3a5582;             /* линии в древе */
  --blue5:#1f3358;             /* фон бейджей */
  --blue6:#16243e;             /* очень тёмный фон вложенных блоков */
  --muted:#a4b5d1;             /* приглушённый текст */
  --border:#2a3f6b;            /* границы */
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px rgba(0,0,0,.4);
  --shadow-md:0 8px 28px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);
  --surface:#1a2640;
  --surface-2:#16243e;
  --text-strong:#e8eef9;
  --text-soft:#a4b5d1;
  --link:#7aa5f5;
  --body-gradient: linear-gradient(180deg,#0a1428 0%,#0e1a35 46%,#0a1428 100%);
}

body{
  background:var(--body-gradient);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  transition: background .3s ease, color .3s ease;
}









.contact-submit:hover, .res-btn:hover{
  transform:translateY(-1px)
}

#search-results{
  border:1px solid rgba(199,220,255,.9);
  box-shadow:0 18px 40px rgba(15,45,92,.16);
  overflow:hidden
}
.main{padding-top:1.55rem}
.sec-title{
  border-bottom:1px solid #d7e7ff;
  letter-spacing:0;
  font-weight:700
}
.card,.stat-card,.tree-wrap{
  border-color:rgba(169,200,255,.72)!important;
  box-shadow:var(--shadow)!important;
  transition:transform .16s,box-shadow .16s,border-color .16s
}
.card:hover,.stat-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md)!important;
  border-color:rgba(91,143,240,.62)!important
}
.card h3,.seo-intro h2,.seo-branches h2,.seo-relatives h2,.contact-form-card h2{
  letter-spacing:0;
  font-weight:700
}
.card h3{
  border-bottom-color:#e1edff
}
.seo-link-list a,.res-link,.contact-action{
  transition:transform .16s,background .16s,border-color .16s,box-shadow .16s
}
.seo-link-list a:hover,.res-link:hover,.contact-action:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(15,45,92,.08)
}
.qbox{
  background:linear-gradient(135deg,#fff7f7,#ffffff);
  box-shadow:0 10px 24px rgba(220,38,38,.06)
}
.stbl{
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden
}
.stbl th{background:linear-gradient(180deg,#16386c,#102b55)}
.stbl td{background:#fff}
.stbl tr:nth-child(even) td{background:#f6faff}
.tl::before{background:linear-gradient(180deg,#1d5fd8,#5b8ff0)}
.tli::before{
  background:#fff;
  border-color:#1d5fd8;
  box-shadow:0 0 0 3px #dbeaff
}
.upd-item{
  border-bottom-color:#d7e7ff;
  border-radius:10px;
  padding:.75rem .5rem
}
.upd-item:hover{background:#f7fbff}
.contact-form input,.contact-form textarea{
  background:#fbfdff;
  border-color:#c7dcff;
  transition:border-color .16s,box-shadow .16s,background .16s
}
.contact-form input:focus,.contact-form textarea:focus{
  background:#fff
}
.footer{
  background:linear-gradient(180deg,#102b55,#0b2144);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)
}
.analytics-link{
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 24px rgba(0,0,0,.2)
}
@media(max-width:720px){
  .main{padding-top:1rem}
  .card,.stat-card{border-radius:14px}
  .card:hover,.stat-card:hover,.seo-link-list a:hover,.res-link:hover,.contact-action:hover{
    transform:none
  }
}

/* Modern refresh v2: more visible, still CSS only */
body{
  background:var(--body-gradient)!important
}
.main{
  max-width:1120px;
  padding-top:1.8rem;
  padding-bottom:2.2rem
}
.sec-title{
  font-size:1.92rem!important;
  padding-bottom:.75rem!important;
  margin-bottom:1.65rem!important;
  border-bottom:0!important;
  position:relative
}
.sec-title::after{
  content:'';
  display:block;
  width:76px;
  height:4px;
  margin-top:.65rem;
  border-radius:999px;
  background:linear-gradient(90deg,#1d5fd8,#8fb6ff)
}
.card{
  border-radius:20px!important;
  padding:1.55rem 1.75rem!important;
  background:var(--surface)!important;
  border:1px solid var(--border)!important;
  box-shadow:0 14px 38px rgba(20,55,110,.1)!important
}
.card h3{
  font-size:1.08rem!important;
  padding-bottom:.6rem!important
}
.seo-intro.card,.seo-relatives.card{
  background:var(--surface)!important;
  border-color:var(--border)!important
}
.seo-link-list a,.res-btn,.contact-submit{
  border-radius:12px!important;
  box-shadow:0 8px 18px rgba(29,95,216,.12)
}
.seo-link-list a{
  background:#f4f9ff!important;
  border-color:#a9c8ff!important;
  padding:.5rem .82rem!important
}
.stat-card{
  border-radius:18px!important;
  background:linear-gradient(180deg,#ffffff,#f5f9ff)!important;
  border-top:4px solid #1d5fd8!important;
  box-shadow:0 12px 30px rgba(20,55,110,.1)!important
}
.qbox{
  border-left-width:5px!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#fff7f7 0%,#ffffff 70%)!important
}
.stbl th{
  padding:.78rem 1rem!important;
  font-weight:700!important
}
.stbl td{
  padding:.78rem 1rem!important
}
.upd-item{
  padding:.85rem .75rem!important;
  margin:.08rem 0
}
.contact-action{
  border-radius:16px!important;
  background:linear-gradient(180deg,#f7fbff,#eef6ff)!important
}
.contact-action-icon{
  box-shadow:0 8px 18px rgba(20,55,110,.12)
}
.contact-form input,.contact-form textarea{
  border-radius:14px!important;
  padding:.78rem .9rem!important
}
.footer{
  margin-top:3rem!important
}
@media(max-width:720px){
  .main{padding:1rem .9rem 1.6rem}
  .sec-title{font-size:1.55rem!important}
  .card{padding:1.15rem 1.05rem!important;border-radius:16px!important}
}

/* Route scheme and background tuning */
body{
  background:var(--body-gradient)!important
}
svg[aria-labelledby="map-route-title map-route-desc"]{
  width:92%!important;
  max-width:960px!important;
  height:auto!important;
  display:block!important;
  margin:0 auto!important
}
@media(max-width:720px){
  svg[aria-labelledby="map-route-title map-route-desc"]{
    width:100%!important;
    max-width:none!important
  }
}

/* Modern dropdown menu */
















/* Header action buttons next to search */







/* Header scale and clearer menu position */














/* Lighter floating header panel */





/* Brand connector: K points to the Kröker name */









/* Clearer menu button */








/* Keep the header menu above the interactive map */


#leaflet-map{
  position:relative;
  z-index:0
}
#leaflet-map .leaflet-pane,
#leaflet-map .leaflet-top,
#leaflet-map .leaflet-bottom{
  z-index:1!important
}

/* Final visible header layout override */











/* Soft card motion */
.reveal-card{
  opacity:0;
  transform:translateY(18px);
  filter:blur(5px);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.7,.2,1),
    filter .55s ease,
    box-shadow .2s ease,
    border-color .2s ease;
  transition-delay:var(--reveal-delay,0ms)
}
.reveal-card.in-view{
  opacity:1;
  transform:translateY(0);
  filter:blur(0)
}
.card.in-view:hover,
.stat-card.in-view:hover,
.qbox.in-view:hover,
.contact-method.in-view:hover,
.privacy-card.in-view:hover{
  transform:translateY(-3px);
  border-color:#93c5fd;
  box-shadow:0 10px 28px rgba(15,45,92,.12),0 2px 8px rgba(15,45,92,.08)
}
.seo-link-list a.in-view:hover,
.res-link.in-view:hover{
  transform:translateY(-2px)
}
@media(prefers-reduced-motion:reduce){
  .reveal-card,
  .reveal-card.in-view,
  .card.in-view:hover,
  .stat-card.in-view:hover,
  .qbox.in-view:hover,
  .contact-method.in-view:hover,
  .privacy-card.in-view:hover{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important
  }
}

/* Cookie consent */
.cookie-consent{
  position:fixed;
  left:50%;
  bottom:1rem;
  transform:translateX(-50%);
  width:min(920px,calc(100% - 1.5rem));
  background:rgba(255,255,255,.96);
  border:1px solid #bfdbfe;
  border-radius:18px;
  box-shadow:0 18px 52px rgba(15,45,92,.22),0 2px 8px rgba(15,45,92,.1);
  z-index:9000;
  padding:1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  backdrop-filter:blur(14px)
}
.cookie-consent.cookie-hidden{display:none}
.cookie-copy{min-width:0}
.cookie-copy strong{
  display:block;
  color:#0f2d5c;
  font-size:1rem;
  margin-bottom:.25rem
}
.cookie-copy p{
  color:#4b6a9b;
  font-size:.86rem;
  line-height:1.5;
  margin:0 0 .25rem
}
.cookie-copy a{
  color:#1a56db;
  font-weight:700;
  font-size:.82rem;
  text-decoration:none
}
.cookie-copy a:hover{text-decoration:underline}
.cookie-actions{
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-shrink:0
}
.cookie-btn{
  height:38px;
  padding:0 1rem;
  border-radius:11px;
  border:1px solid #bfdbfe;
  font-family:Inter,sans-serif;
  font-size:.84rem;
  font-weight:800;
  cursor:pointer
}
.cookie-reject{
  background:#eff6ff;
  color:#0f2d5c
}
.cookie-accept{
  background:#1a56db;
  border-color:#1a56db;
  color:#fff
}
.cookie-btn:hover{filter:brightness(1.04)}
.google-cookie-toggle{
  position:fixed;
  left:1rem;
  bottom:1rem;
  z-index:89;
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  border:1px solid rgba(166,196,251,.7);
  border-radius:12px;
  padding:.5rem .68rem;
  background:rgba(255,255,255,.82);
  color:#17345f;
  box-shadow:0 12px 28px rgba(20,55,122,.16),inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  font-family:Inter,sans-serif;
  font-size:.78rem;
  font-weight:850;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease
}
.google-cookie-toggle span{
  width:.52rem;
  height:.52rem;
  border-radius:50%;
  background:linear-gradient(135deg,#4285f4 0 25%,#34a853 25% 50%,#fbbc05 50% 75%,#ea4335 75%);
  box-shadow:0 0 0 3px rgba(66,133,244,.12)
}
.google-cookie-toggle:hover{
  transform:translateY(-1px);
  border-color:rgba(96,165,250,.95);
  box-shadow:0 16px 32px rgba(20,55,122,.2),0 0 0 3px rgba(147,197,253,.18)
}
.footer-links{
  text-align:center;
  margin:.4rem auto 0;
  font-size:.78rem
}
.footer-links a,
.footer-links button{
  color:rgba(255,255,255,.68);
  background:transparent;
  border:0;
  font-family:Inter,sans-serif;
  font-size:inherit;
  text-decoration:none;
  font-weight:700;
  cursor:pointer
}
.footer-links a+a,
.footer-links a+button,
.footer-links button+a{margin-left:.7rem}
.footer-links a:hover,
.footer-links button:hover{color:#fff;text-decoration:underline}

/* Privacy page */
.privacy-page{
  max-width:920px
}
.privacy-card{
  background:#fff;
  border:1px solid #bfdbfe;
  border-radius:14px;
  box-shadow:0 1px 3px rgba(15,45,92,.08),0 4px 16px rgba(15,45,92,.06);
  padding:1.35rem 1.5rem;
  margin-bottom:1rem
}
.privacy-card h2{
  color:#0f2d5c;
  font-size:1.08rem;
  margin-bottom:.6rem;
  padding-bottom:.42rem;
  border-bottom:1px solid #dbeafe
}
.privacy-card p,
.privacy-card li{
  color:#4b6a9b;
  font-size:.92rem;
  line-height:1.75
}
.privacy-card ul{
  margin:.45rem 0 0 1.1rem
}
.privacy-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:.9rem
}
.privacy-actions button,
.privacy-actions a{
  min-height:38px;
  padding:.45rem .9rem;
  border-radius:11px;
  border:1px solid #bfdbfe;
  background:#eff6ff;
  color:#0f2d5c;
  font-weight:800;
  font-family:Inter,sans-serif;
  font-size:.84rem;
  text-decoration:none;
  cursor:pointer
}
.privacy-actions button:first-child{
  background:#1a56db;
  border-color:#1a56db;
  color:#fff
}
@media(max-width:640px){
  .cookie-consent{
    align-items:stretch;
    flex-direction:column;
    bottom:.75rem;
    padding:.85rem
  }
  .cookie-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%
  }
  .cookie-btn{width:100%}
  .privacy-card{padding:1rem}
}

@media(max-width:560px){
  
  
  
  #paypal-header-label{
    font-size:0!important
  }
  #paypal-header-label::before{
    content:"PayPal";
    font-size:.68rem!important
  }
}

body, .card{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
}
.skip-link{
  position:absolute;
  left:.8rem;
  top:.8rem;
  z-index:9999;
  background:#fff;
  color:#0f2d5c;
  padding:.5rem .75rem;
  border-radius:8px;
  transform:translateY(-180%);
  transition:transform .15s;
}
.skip-link:focus{transform:translateY(0)}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.8rem;
  margin:.65rem auto;
}
.footer-links a,
.footer-links button{
  color:rgba(255,255,255,.82);
  background:transparent;
  border:0;
  font:inherit;
  font-size:.82rem;
  text-decoration:underline;
  cursor:pointer;
}
.footer-copy{
  text-align:center;
  color:rgba(255,255,255,.45);
  font-size:.72rem;
  line-height:1.6;
  max-width:900px;
  margin:.5rem auto 0;
}
.lead{
  color:var(--muted);
  margin:-.6rem 0 1.2rem;
  max-width:780px;
}
.route-strip{
  display:flex;
  align-items:stretch;
  gap:.5rem;
  overflow-x:auto;
  padding:.4rem 0 .2rem;
}
.route-stage{
  min-width:130px;
  padding:.65rem .75rem;
  border-radius:12px;
  background:var(--blue6);
  border:1px solid var(--border);
  color:var(--navy);
  text-decoration:none;
  font-weight:800;
  text-align:center;
}
.route-arrow{
  display:flex;
  align-items:center;
  color:var(--blue);
  font-weight:900;
}
.photo-placeholder{
  min-height:96px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:linear-gradient(135deg,#f8fbff,#eaf3ff);
  margin-top:.8rem;
  position:relative;
}
.photo-placeholder::after{
  content:attr(aria-label);
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:.8rem;
}
.family-tree{
  display:grid;
  gap:1.2rem;
}
.generation{
  position:relative;
  padding:1rem;
  border-radius:16px;
  background:rgba(255,255,255,.62);
  border:1px solid var(--border);
}
.generation h2{
  font-size:1.05rem;
  color:var(--navy);
  margin-bottom:.85rem;
}
.generation-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:.9rem;
}
.person-card{
  position:relative;
  padding:1rem;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.person-card::before{
  content:"";
  position:absolute;
  left:50%;
  top:-.9rem;
  width:1px;
  height:.9rem;
  background:var(--border);
}
.generation:first-child .person-card::before{display:none}
.person-card h3{
  border:0;
  padding:0;
  margin:.65rem 0 .3rem;
  font-size:1rem;
}
.person-photo{
  min-height:72px;
  margin-top:0;
}
.person-dates,
.person-place,
.privacy-note{
  color:var(--muted);
  font-size:.84rem;
  margin:.15rem 0;
}
.person-card.living{
  background:#f7fbff;
  border-color:#93c5fd;
}
.privacy-note{
  display:inline-flex;
  padding:.2rem .45rem;
  border-radius:999px;
  background:#dbeafe;
  color:#0f2d5c;
  font-weight:700;
}
.table-card{overflow-x:auto}
.stbl{
  width:100%;
  border-collapse:collapse;
}
.stbl th,
.stbl td{
  padding:.75rem;
  border-bottom:1px solid var(--blue5);
  text-align:left;
  vertical-align:top;
}
.stbl th{
  background:var(--blue6);
  color:var(--navy);
  font-weight:800;
}
.badge{
  display:inline-flex;
  padding:.18rem .48rem;
  border-radius:999px;
  background:#eef2ff;
  color:#0f2d5c;
  font-weight:800;
  font-size:.78rem;
}
.badge-green{background:#dcfce7;color:#166534}
.badge-red{background:#fee2e2;color:#991b1b}
.resource-list{
  display:grid;
  gap:.45rem;
}
.leaflet-shell{
  height:420px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--blue6);
  display:grid;
  place-items:center;
}
.contact-action.dna{
  cursor:pointer;
  border:0;
  width:100%;
  text-align:left;
}

@media(max-width:380px){
  .main{padding:1.1rem .75rem}
  
  
  .route-stage{min-width:116px;font-size:.82rem}
  .card{padding:1rem}
  .sec-title{font-size:1.35rem}
  .leaflet-shell{height:340px}
}

/* Final header correction: keep the iCloud multi-page layout stable */









.main{
  padding-top:1.65rem!important;
}
.g2{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:stretch!important;
}
.g2 > .card,
.g2 > article{
  min-width:0!important;
}
.route-strip{
  max-width:100%!important;
  overflow-x:auto!important;
}
.route-stage{
  flex:0 0 auto!important;
}



/* Final visual pass: generated archive image, animated brand arrow, visible desktop navigation */
.project-visual{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:13px!important;
  filter:brightness(1.3) saturate(.62) sepia(.06) hue-rotate(172deg) contrast(.9)!important;
  transform:scale(1.02)!important;
  animation:projectImageDrift 9s ease-in-out infinite alternate!important;
}
.project-visual-frame{
  position:relative!important;
  display:block!important;
  width:min(78%,360px)!important;
  aspect-ratio:16/9!important;
  margin:1rem auto 0!important;
  overflow:hidden!important;
  border-radius:16px!important;
  border:1px solid rgba(161,194,255,.9)!important;
  background:linear-gradient(135deg,#f7fbff,#dcecff)!important;
  box-shadow:0 14px 30px rgba(34,79,147,.12), inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.project-visual-frame::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:
    linear-gradient(135deg,rgba(239,247,255,.78),rgba(127,177,255,.28) 52%,rgba(255,255,255,.62)),
    radial-gradient(circle at 20% 16%,rgba(255,255,255,.72),transparent 30%)!important;
  mix-blend-mode:screen!important;
  pointer-events:none!important;
}
.project-visual-frame::after{
  content:""!important;
  position:absolute!important;
  z-index:2!important;
  top:-30%!important;
  bottom:-30%!important;
  left:-55%!important;
  width:34%!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent)!important;
  transform:rotate(18deg)!important;
  animation:projectVisualShine 4.8s ease-in-out infinite!important;
  pointer-events:none!important;
}
.project-visual-glow{
  position:absolute!important;
  inset:auto 10% 8% 10%!important;
  z-index:3!important;
  height:3px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,#ffffff,#7fb1ff,transparent)!important;
  opacity:.75!important;
  animation:projectGlowPulse 2.8s ease-in-out infinite!important;
}
@keyframes projectImageDrift{
  0%{transform:scale(1.02) translate3d(0,0,0)}
  100%{transform:scale(1.08) translate3d(-2.2%,1.4%,0)}
}
@keyframes projectVisualShine{
  0%,22%{left:-55%;opacity:0}
  42%{opacity:.9}
  74%,100%{left:120%;opacity:0}
}
@keyframes projectGlowPulse{
  0%,100%{opacity:.42;transform:scaleX(.72)}
  50%{opacity:.9;transform:scaleX(1)}
}



@keyframes brandArrowPulse{
  0%,100%{opacity:.72;transform:translateX(0) scaleX(.92)}
  50%{opacity:1;transform:translateX(3px) scaleX(1.08)}
}
@keyframes brandArrowTip{
  0%,100%{transform:translateX(0) rotate(45deg)}
  50%{transform:translateX(4px) rotate(45deg)}
}
@media(prefers-reduced-motion:reduce){
  .project-visual, .project-visual-frame::after, .project-visual-glow{animation:none!important}
}



@media(max-width:720px){
  html,body{overflow-x:hidden!important}
  .main,
  .sec,
  .card,
  .seo-intro.card,
  .seo-relatives.card{
    width:min(100%,100vw)!important;
    max-width:calc(100vw - 1.8rem)!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .main{
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .g2,
  .g3{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .seo-link-list{
    max-width:100%!important;
    overflow-x:auto!important;
  }
  .card h1,
  .card h2,
  .card h3,
  .card p,
  .seo-intro h2,
  .seo-intro p{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .seo-intro h2,
  .card h2{
    font-size:1rem!important;
    line-height:1.28!important;
  }
  .seo-intro p,
  .card p{
    font-size:.88rem!important;
    line-height:1.62!important;
  }
}

/* Nav correction: real arrow, visible dropdown menu, clean route flow */



@keyframes brandArrowSlide{
  0%,100%{transform:translateX(0);opacity:.9}
  50%{transform:translateX(4px);opacity:1}
}
.reveal-card{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
.route-strip{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:.55rem .62rem!important;
  overflow:visible!important;
  padding:.6rem 0 0!important;
}
.route-stage{
  position:relative!important;
  flex:1 1 128px!important;
  min-width:118px!important;
  max-width:none!important;
  padding-right:1.65rem!important;
}
.route-arrow{
  display:none!important;
}
.route-stage:not(:last-of-type)::after{
  content:"→"!important;
  position:absolute!important;
  right:.55rem!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  color:#1d5fd8!important;
  font-weight:900!important;
}




/* Brand/menu unit: menu button sits under K -> Kroeker as one bordered animated block */

@keyframes menuUnitShimmer{
  0%,100%{background-position:120% 0,0 0}
  50%{background-position:-60% 0,0 0}
}



/* Simplified brand/menu block: no arrow, no outline around K/Kroeker, squarer menu */







/* Mobile header: menu width matches the visible K + Kroeker brand */


/* Contact DNA note: compact, readable, and not oversized */
.contact-actions + .privacy-note,
.card .contact-actions + .privacy-note{
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  margin:.75rem 0 0!important;
  padding:.52rem .72rem!important;
  border-radius:12px!important;
  background:#eef5ff!important;
  color:#486a9d!important;
  font-size:.84rem!important;
  line-height:1.45!important;
  font-weight:650!important;
}
@media(max-width:720px){
  .contact-actions + .privacy-note,
  .card .contact-actions + .privacy-note{
    font-size:.76rem!important;
    line-height:1.4!important;
    padding:.44rem .58rem!important;
  }
}

/* Final header correction: right controls above search, one-line nav, exact menu width */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}




/* Restore small Google Analytics-style control instead of the text Cookies / Google button */
.google-cookie-toggle{
  width:38px!important;
  height:38px!important;
  left:.9rem!important;
  bottom:.9rem!important;
  padding:0!important;
  border-radius:12px!important;
  justify-content:center!important;
  background:rgba(255,255,255,.88)!important;
}
.google-cookie-toggle span[aria-hidden="true"]{
  width:18px!important;
  height:22px!important;
  border-radius:0!important;
  background:
    linear-gradient(#fbbc05,#fbbc05) 0 12px/5px 10px no-repeat,
    linear-gradient(#34a853,#34a853) 7px 7px/5px 15px no-repeat,
    linear-gradient(#4285f4,#4285f4) 14px 2px/5px 20px no-repeat!important;
  box-shadow:none!important;
}

/* Remove all "photo coming later" placeholders and lower the menu line a little */
.photo-placeholder{
  display:none!important;
}



/* Mobile header stays fixed while the page scrolls, with a subtle living-glass motion */
@media(max-width:980px){
  body{
    padding-top:178px!important;
  }
  
  
  
  
}
@media(max-width:560px){
  body{
    padding-top:176px!important;
  }
}
@keyframes mobileHeaderGlass{
  0%,100%{background-position:115% 0,0 0}
  50%{background-position:-65% 0,0 0}
}
@keyframes mobileMenuFloat{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.08)}
}

/* Rounded animated header panel and readable navigation */



@media(max-width:980px){
  body{
    padding-top:188px!important;
  }
  
}
@media(max-width:560px){
  body{
    padding-top:186px!important;
  }
}
@keyframes headerGlassFlow{
  0%,100%{background-position:120% 0,0 0,0 0}
  50%{background-position:-70% 0,0 0,0 0}
}

/* Readable final header sizing */




/* Final repair: keep the dropdown menu outside the rounded header instead of clipping it */











/* 2026-05-01: header collision repair. Keep the long navigation out of the logo area. */




@keyframes brandArrowLine{
  0%,100%{opacity:.78;transform:translate(-2px,-50%) scaleX(.9)}
  50%{opacity:1;transform:translate(3px,-50%) scaleX(1)}
}
@keyframes brandArrowHead{
  0%,100%{transform:translate(-1px,-50%) rotate(45deg)}
  50%{transform:translate(4px,-50%) rotate(45deg)}
}





/* 2026-05-01 final fix: never show the long inline menu in the header.
   The full navigation lives only inside the modern dropdown button. */




/* ============================================================
   ШАПКА — ЕДИНЫЙ ИСТОЧНИК ПРАВИЛ (v20260501-header-final-3)
   Все предыдущие правила .hdr / .brand / .nav и т.п. удалены.
   ============================================================ */

.hdr{
  position: sticky;
  top: .6rem;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .9rem;
  padding: .55rem 1.1rem;
  margin: .6rem .8rem 1rem .8rem;
  border-radius: 18px;
  border: 2px solid rgba(29, 95, 216, .55);
  background:
    linear-gradient(120deg, #4a6db5 0%, #5a7fc5 45%, #6890d0 75%, #5a7fc5 100%);
  background-size: 220% 220%;
  animation:
    hdrFadeIn .55s ease both,
    hdrShift 18s ease-in-out infinite alternate;
  box-shadow:
    0 0 0 3px rgba(29, 95, 216, .18),
    0 10px 30px rgba(60, 90, 160, .28),
    0 2px 6px rgba(40, 70, 140, .15),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: padding .25s ease, box-shadow .25s ease, backdrop-filter .25s ease, margin .25s ease, border-radius .25s ease, top .25s ease;
}
@keyframes hdrFadeIn{ from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} }
@keyframes hdrShift{ from{background-position:0% 50%;} to{background-position:100% 50%;} }

/* При прокрутке шапка слегка "прижимается" — но скругления, окантовка и подсветка остаются */
.hdr.scrolled{
  top: .35rem;
  margin: .35rem .6rem .8rem .6rem;
  padding-top: .32rem;
  padding-bottom: .32rem;
  box-shadow:
    0 0 0 3px rgba(29, 95, 216, .22),
    0 8px 24px rgba(40, 70, 140, .32),
    0 2px 6px rgba(40, 70, 140, .18),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  backdrop-filter: blur(4px);
}

/* На очень узких экранах (мобильные) убираем боковые отступы — иначе тесно */
@media (max-width: 600px){
  .hdr{
    margin: .4rem .35rem .8rem .35rem;
    border-radius: 14px;
  }
  .hdr.scrolled{
    margin: .25rem .25rem .6rem .25rem;
  }
}


.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ position:static; }

/* === Логотип === */
.hdr .brand{
  order: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
}
.hdr .brand-arrow{ display: none; }
.hdr .brand-mark{
  width: 36px; height: 36px;
  border-radius: 9px;
  font-size: 1.18rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  transition: transform .25s ease, background .25s ease;
}

.hdr .brand-copy{ display: inline-flex; align-items: center; }
.hdr .hdr-logo{
  font-size: 1.18rem; font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.10);
  padding: .25rem .7rem;
  border-radius: 9px;
  letter-spacing: .01em;
  transition: background .25s ease;
}
.hdr .brand:hover .hdr-logo{ background: rgba(255,255,255,.18); }

/* === Старая кнопка-гамбургер и старый дроп — скрыты === */
.hdr .menu-toggle{ display: none; }
.hdr .nav-dropdown{ display: none; }

/* === Правый блок (поиск, действия, языки) === */
.hdr .hdr-right{
  order: 2;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  margin-left: auto;
  min-width: 0;
}
.hdr .top-search{
  position: relative;
  width: 220px;
  max-width: 28vw;
  min-width: 150px;
}
.hdr .search-wrap{ position: relative; display: block; }
.hdr .search-input{
  width: 100%;
  padding: .35rem .65rem;
  padding-right: 1.6rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px;
  background: rgba(255,255,255,.92);
  color: #1d2742;
  font-size: .85rem;
  outline: none;
  transition: background .2s ease, border-color .2s ease;
}
.hdr .search-input:focus{
  background: #fff;
  border-color: rgba(255,255,255,.7);
}
.hdr .search-clear{
  position: absolute;
  right: .35rem; top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #1d2742;
  font-size: 1.05rem;
  cursor: pointer;
  padding: 0 .25rem;
  display: none;
}
.hdr .search-clear:hover{ color: #000; }

.hdr .header-actions{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.hdr .home-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.16);
  color: #fff;
  text-decoration: none;
  font-size: 1.05rem;
  transition: background .2s ease, transform .2s ease;
}
.hdr .home-btn:hover{ background: rgba(255,255,255,.28); transform: translateY(-1px); }
.hdr .header-support{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.hdr .support-btn{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .6rem;
  border-radius: 7px;
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .02em;
  transition: transform .2s ease, filter .2s ease;
}
.hdr .support-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.hdr .support-btn.telegram{
  background: #2aabee;
  color: #fff;
}
.hdr .support-btn.paypal{
  background: #ffc439;
  color: #003087;
}
.hdr .support-mark{
  background: rgba(255,255,255,.25);
  padding: .05rem .3rem;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 800;
}

.hdr .lang-group{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-left: .35rem;
}
.hdr .lang-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: .3rem .55rem;
  border-radius: 7px;
  background: rgba(255,255,255,.12);
  color: #fff;
  text-decoration: none;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background .2s ease, transform .2s ease;
}
.hdr .lang-btn:hover{ background: rgba(255,255,255,.22); transform: translateY(-1px); }
.hdr .lang-btn.active{ background: rgba(255,255,255,.32); }

/* === ВТОРАЯ СТРОКА: меню inline через flex 100% === */
.hdr .nav-inline{
  order: 10;
  flex: 1 1 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .15rem .35rem;
  margin: .15rem 0 0 0;
  padding: 0;
  background: transparent;
}
.hdr .nav-inline ul{
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}
.hdr .nav-inline .nav-item{
  position: relative;
  display: inline-block;
}
.hdr .nav-inline .nav-item > a{
  display: inline-block;
  padding: .35rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  border-radius: 7px;
  background: transparent;
  transition: color .22s ease, background .22s ease, transform .22s ease;
  position: relative;
}
.hdr .nav-inline .nav-item > a::after{
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: 2px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.hdr .nav-inline .nav-item > a:hover,
.hdr .nav-inline .nav-item > a.on{
  color: #fff;
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}
.hdr .nav-inline .nav-item > a:hover::after,
.hdr .nav-inline .nav-item > a.on::after{
  transform: scaleX(1);
}

/* === Адаптив: на узких экранах гамбургер === */
@media (max-width: 760px){
  .hdr{
    flex-wrap: nowrap;
    padding: .45rem .7rem;
  }
  .hdr .nav-inline{ display: none; }
  .hdr .top-search{ display: none; }
  .hdr .header-actions{ display: none; }
  .hdr .menu-toggle{
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(255,255,255,.16);
    color: #fff;
    border: none;
    padding: .35rem .65rem;
    border-radius: 8px;
    font-size: .82rem;
    cursor: pointer;
    margin: 0 .35rem;
    margin-left: auto;
  }
  .hdr .menu-toggle:hover{ background: rgba(255,255,255,.25); }
  .hdr .nav-dropdown{
    display: block;
    position: absolute;
    top: 100%;
    left: .7rem; right: .7rem;
    background: linear-gradient(135deg,#5a7fc5,#4a6db5);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .3s ease, opacity .25s ease, padding .25s ease;
    z-index: 999;
  }
  .hdr .nav-dropdown.open{
    max-height: 600px;
    opacity: 1;
    padding: .5rem;
  }
  .hdr .nav-dropdown ul{
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin: 0; padding: 0;
    list-style: none;
  }
  .hdr .nav-dropdown .nav-item > a{
    display: block;
    padding: .55rem .8rem;
    color: #fff;
    text-decoration: none;
    border-radius: 7px;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
  }
  .hdr .nav-dropdown .nav-item > a:hover,
  .hdr .nav-dropdown .nav-item > a.on{
    background: rgba(255,255,255,.16);
  }
  .hdr .hdr-logo{ font-size: 1.02rem; padding: .2rem .55rem; }
  .hdr .brand-mark{ width: 32px; height: 32px; font-size: 1rem; }
}

body{ scroll-padding-top: 90px; }

/* === Fix v4: убираем фантомное пространство сверху на iOS Safari === */
html, body{
  margin: 0 !important;
  padding-top: 0 !important;
}
body{
  padding-top: 0 !important;
}
.hdr{
  margin-top: 0 !important;
}
/* На мобильных безопаснее не использовать sticky — даёт глюки на iOS */
@media (max-width: 760px){
  .hdr{
    position: relative !important;
    top: auto !important;
  }
}

/* === Визуальный блок с генеалогическим деревом (tree.html) === */
.tree-visual{
  margin: 0 0 1.4rem 0;
  padding: 1.25rem 1.25rem 1rem;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(15,45,92,.10), 0 2px 8px rgba(15,45,92,.06);
  border: 1px solid #e2ecfb;
}
.tree-visual h2{
  margin: 0 0 .9rem 0;
  font-size: 1.32rem;
  color: #102b55;
  font-weight: 700;
}
.tree-visual-figure{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
}
.tree-visual-img{
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  border-radius: 10px;
  background: #fafcff;
  border: 1px solid #eaf0fa;
  padding: .35rem;
}
.tree-visual-caption{
  font-size: .86rem;
  line-height: 1.5;
  color: #486a9d;
  text-align: center;
  max-width: 720px;
  margin: 0;
  padding: 0 .25rem;
}
.tree-visual-actions{
  margin: .25rem 0 0;
  text-align: center;
}
.tree-visual-download{
  display: inline-block;
  padding: .4rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  color: #1d5fd8;
  background: #eef5ff;
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.tree-visual-download:hover{
  background: #dbeaff;
  color: #102b55;
  transform: translateY(-1px);
}

@media (max-width: 720px){
  .tree-visual{ padding: 1rem .8rem .8rem; }
  .tree-visual h2{ font-size: 1.14rem; }
  .tree-visual-caption{ font-size: .8rem; }
}

/* === v20260503-hover-fx: яркие hover-эффекты === */

/* --- "K" — liquid glass блик при наведении --- */
.hdr .brand-mark{
  position: relative;
  overflow: hidden;
}
.hdr .brand-mark::before{
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 30%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.85) 55%,
    rgba(255,255,255,.55) 60%,
    transparent 80%,
    transparent 100%
  );
  filter: blur(1px);
  transform: skewX(-20deg);
  transition: left .65s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.hdr .brand:hover .brand-mark::before{
  left: 130%;
}
/* После блика буква остаётся «глянцевой» — лёгкий внутренний свет */
.hdr .brand-mark::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 50%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.hdr .brand:hover .brand-mark::after{ opacity: 1; }

/* Само "K" поверх псевдоэлементов */
.hdr .brand-mark{ z-index: 0; }
.hdr .brand-mark > *,
.hdr .brand-mark{
  /* буква "K" — это текст самого .brand-mark, обернём через position context */
}
.hdr .brand-mark{ isolation: isolate; }

/* --- Меню — ярче подсветка и жирнее подчёркивание --- */
.hdr .nav-inline .nav-item > a:hover,
.hdr .nav-inline .nav-item > a.on{
  background: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.10) inset;
}
.hdr .nav-inline .nav-item > a::after{
  height: 3px !important;
  bottom: 1px !important;
  box-shadow: 0 0 6px rgba(255,255,255,.6);
}

/* ============================================================
 * ЭТАП 1 (полировка): анимация при скролле + билеты-даты
 * ============================================================ */

/* === Анимация появления при скролле === */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Уважение к пользователям с reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === Билеты-даты на странице Updates === */
/* Раскрашиваем h2.upd-date в виде «билета» с цветной подложкой и страной */
.upd-content h2.upd-date {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .75rem .35rem .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef5ff 0%, #dbeafe 100%);
  border: 1px solid rgba(29, 95, 216, .25);
  box-shadow:
    0 1px 2px rgba(29, 95, 216, .08),
    inset 0 1px 0 rgba(255, 255, 255, .8);
  font-size: .92rem;
  font-weight: 600;
  color: #102b55;
  margin-bottom: .55rem;
  letter-spacing: .01em;
}
.upd-content h2.upd-date::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1d5fd8;
  box-shadow: 0 0 0 3px rgba(29, 95, 216, .18);
  flex: 0 0 auto;
}
/* Цвета по странам — определяем через :has() (поддерживается всеми современными браузерами) */
.upd-content h2.upd-date:has-text {} /* placeholder, реальная окраска через атрибуты */

/* Окраска по стране — через атрибуты data-country (мы их добавим в HTML) */
.upd-content h2.upd-date[data-country="ua"] {
  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
  border-color: rgba(234, 179, 8, .3);
  color: #713f12;
}
.upd-content h2.upd-date[data-country="ua"]::before {
  background: #eab308;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, .22);
}
.upd-content h2.upd-date[data-country="kz"] {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: rgba(16, 185, 129, .3);
  color: #064e3b;
}
.upd-content h2.upd-date[data-country="kz"]::before {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .22);
}
.upd-content h2.upd-date[data-country="de"] {
  background: linear-gradient(135deg, #fff1f2 0%, #fecdd3 100%);
  border-color: rgba(244, 63, 94, .3);
  color: #7f1d1d;
}
.upd-content h2.upd-date[data-country="de"]::before {
  background: #f43f5e;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, .22);
}
.upd-content h2.upd-date[data-country="ewz"] {
  background: linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 100%);
  border-color: rgba(124, 58, 237, .3);
  color: #4c1d95;
}
.upd-content h2.upd-date[data-country="ewz"]::before {
  background: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .22);
}

/* Скрываем старую "точку" слева — её роль теперь играет круглая иконка перед датой */
.upd-item .upd-dot {
  display: none;
}
.upd-item {
  padding-left: 0;
}

/* ============================================================
 * ЭТАП 2: Тёмная тема — точечные переопределения
 * ============================================================ */

/* Карточки и таблицы — заменяем жёстко-белый фон на тёмный */
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .stbl td,
[data-theme="dark"] .stbl th,
[data-theme="dark"] article.card,
[data-theme="dark"] .seo-relatives,
[data-theme="dark"] .seo-intro {
  background: var(--surface) !important;
  color: var(--text-strong);
  border-color: var(--border);
}

/* Внутренние блоки — qbox и т.п. */
[data-theme="dark"] .qbox,
[data-theme="dark"] .table-card {
  background: var(--surface-2) !important;
  border-color: var(--border);
}

/* Заголовки и тексты */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .sec-title,
[data-theme="dark"] .upd-content h2.upd-date,
[data-theme="dark"] .nn,
[data-theme="dark"] .sc-name {
  color: var(--text-strong);
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] .upd-text,
[data-theme="dark"] .sc-dates,
[data-theme="dark"] .nd {
  color: var(--text-soft);
}

[data-theme="dark"] .sec-title {
  border-bottom-color: var(--border);
}

/* Ссылки */
[data-theme="dark"] a {
  color: var(--link);
}
[data-theme="dark"] a:hover {
  color: var(--blue3);
}

/* Формы — поля ввода */
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .search-input {
  background: var(--surface-2);
  color: var(--text-strong);
  border-color: var(--border);
}
[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder,
[data-theme="dark"] .search-input::placeholder {
  color: var(--text-soft);
  opacity: .65;
}

/* Древо (.tnode) */
[data-theme="dark"] .tnode {
  background: var(--surface);
  border-color: var(--border);
  border-top-color: var(--blue);
}
[data-theme="dark"] .tnode.you {
  background: linear-gradient(135deg, var(--blue6), var(--surface));
}
[data-theme="dark"] .tnode.unk {
  background: var(--surface-2);
  border-color: var(--blue4);
}

/* Билеты-даты на updates */
[data-theme="dark"] .upd-content h2.upd-date {
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--blue5) 100%);
  border-color: var(--border);
  color: var(--text-strong);
}
[data-theme="dark"] .upd-content h2.upd-date[data-country="kz"] {
  background: linear-gradient(135deg, #14352b 0%, #1f5142 100%);
  border-color: rgba(16, 185, 129, .35);
  color: #6ee7b7;
}
[data-theme="dark"] .upd-content h2.upd-date[data-country="ua"] {
  background: linear-gradient(135deg, #3a2f10 0%, #5a4515 100%);
  border-color: rgba(234, 179, 8, .35);
  color: #fde68a;
}
[data-theme="dark"] .upd-content h2.upd-date[data-country="de"] {
  background: linear-gradient(135deg, #3f1417 0%, #6b1f25 100%);
  border-color: rgba(244, 63, 94, .35);
  color: #fda4af;
}
[data-theme="dark"] .upd-content h2.upd-date[data-country="ewz"] {
  background: linear-gradient(135deg, #261c4d 0%, #3a2a6b 100%);
  border-color: rgba(124, 58, 237, .35);
  color: #c4b5fd;
}

/* Бейджи (research статусы) */
[data-theme="dark"] .badge {
  background: var(--blue5);
  color: var(--text-soft);
}
[data-theme="dark"] .badge-green {
  background: rgba(34,197,94,.18);
  color: #6ee7b7;
}
[data-theme="dark"] .badge-red {
  background: rgba(239,68,68,.18);
  color: #fda4af;
}

/* Footer */
[data-theme="dark"] .footer {
  background: var(--surface-2);
  color: var(--text-soft);
}
[data-theme="dark"] .footer-main {
  color: var(--text-strong);
}

/* Cookie-баннер — настоящий класс .cookie-consent */
[data-theme="dark"] .cookie-consent {
  background: rgba(26, 38, 64, .96) !important;
  color: var(--text-strong) !important;
  border-color: var(--border) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] .cookie-consent strong,
[data-theme="dark"] .cookie-copy strong {
  color: var(--text-strong) !important;
}
[data-theme="dark"] .cookie-consent p,
[data-theme="dark"] .cookie-copy p,
[data-theme="dark"] .cookie-consent a {
  color: var(--text-soft) !important;
}
[data-theme="dark"] .cookie-consent a {
  color: var(--link) !important;
}

/* === Кнопка переключения темы в шапке === */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  margin: 0 .35rem;
  transition: background .2s ease, transform .2s ease;
  flex: 0 0 auto;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, .22);
  transform: scale(1.05);
}
.theme-toggle:active {
  transform: scale(0.95);
}
/* Иконку показываем в зависимости от темы */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Плавный переход между темами */
body, .card, .stat-card, .hdr, .footer, .tnode, .qbox, .stbl td {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* ============================================================
 * ЭТАП 3: Карта-герой на главной + лонгриды + поиск
 * ============================================================ */

/* === Карта-герой === */
.hero-map {
  display: block;
  margin: 0 0 1.6rem 0;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.hero-map img,
.hero-map svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
}
.hero-map-caption {
  margin-top: .6rem;
  text-align: center;
  font-size: .82rem;
  color: var(--text-soft);
  font-style: italic;
}

@media (max-width: 600px) {
  .hero-map { padding: .5rem; }
  .hero-map img,
  .hero-map svg {
    max-height: none;
    width: 100%;
  }
  .hero-map-caption { font-size: .75rem; }
}

/* === Лонгриды (stories) === */
.longread {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
}
.longread .lead {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--text-strong);
  font-weight: 400;
  margin-bottom: 1.6rem;
  padding-left: 1rem;
  border-left: 3px solid var(--blue);
  font-family: Inter, system-ui, sans-serif;
}
.longread h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-strong);
  margin: 2rem 0 .8rem 0;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--border);
}
.longread h3 {
  font-size: 1.2rem;
  margin: 1.6rem 0 .5rem 0;
  color: var(--text-strong);
}
.longread p {
  font-size: 1.02rem;
  line-height: 1.8;
  margin: 0 0 1rem 0;
  color: var(--text-soft);
}
.longread .pull-quote {
  display: block;
  margin: 1.8rem 0;
  padding: 1.2rem 1.4rem;
  background: var(--surface-2);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  font-size: 1.15rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--text-strong);
  font-family: Inter, system-ui, sans-serif;
}
.longread .pull-quote::before {
  content: "“";
  display: inline-block;
  font-size: 2.2rem;
  line-height: 0;
  vertical-align: -0.45em;
  color: var(--blue);
  margin-right: .3rem;
}
.longread .pull-quote-attribution {
  display: block;
  font-size: .85rem;
  font-style: normal;
  margin-top: .6rem;
  color: var(--text-soft);
  text-align: right;
}
.longread .pull-quote-attribution::before {
  content: "— ";
}
.longread .longread-meta {
  font-size: .85rem;
  color: var(--text-soft);
  margin-bottom: 1.4rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}

/* === Автоподсказки в поиске === */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(15, 45, 92, 0.18);
  max-height: 360px;
  overflow-y: auto;
  z-index: 1100;
  display: none;
}
.search-suggestions.is-open {
  display: block;
}
.search-suggestion {
  display: block;
  padding: .6rem .85rem;
  border-bottom: 1px solid rgba(199, 220, 255, 0.4);
  cursor: pointer;
  text-decoration: none;
  color: var(--text-strong);
  transition: background .12s ease;
}
.search-suggestion:last-child { border-bottom: none; }
.search-suggestion:hover,
.search-suggestion.is-active {
  background: var(--blue6);
}
.search-suggestion-title {
  font-size: .92rem;
  font-weight: 600;
  margin-bottom: .15rem;
  color: var(--text-strong);
}
.search-suggestion-snippet {
  font-size: .78rem;
  color: var(--text-soft);
  line-height: 1.4;
}
.search-suggestion-match {
  background: rgba(234, 179, 8, .25);
  font-weight: 600;
  color: var(--text-strong);
  padding: 0 2px;
  border-radius: 3px;
}
[data-theme="dark"] .search-suggestion-match {
  background: rgba(234, 179, 8, .22);
  color: #fde68a;
}

/* === Улучшение поиска (Этап 3): большой выпадающий контейнер === */
#search-results {
  position: absolute !important;
  top: calc(100% + .5rem) !important;
  left: 0 !important;
  right: 0 !important;
  max-width: none !important;
  width: 100% !important;
  min-width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 45, 92, 0.20), 0 4px 10px rgba(15, 45, 92, 0.08);
  padding: .35rem;
  z-index: 1100;
}
[data-theme="dark"] #search-results {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.3);
}
#search-results .s-hit {
  display: block;
  padding: .65rem .8rem !important;
  margin: 0 0 .15rem 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer;
  font-size: .88rem !important;
  color: var(--text-strong) !important;
  line-height: 1.45 !important;
  transition: background .12s ease !important;
}
#search-results .s-hit:hover {
  background: var(--blue6) !important;
  border-color: transparent !important;
}
[data-theme="dark"] #search-results .s-hit:hover {
  background: rgba(91, 143, 240, 0.12) !important;
}
#search-results .s-hit + .s-hit {
  border-top: 1px solid var(--border);
  padding-top: .85rem !important;
  margin-top: .15rem !important;
  border-radius: 0 !important;
}
#search-results .s-hit + .s-hit:hover {
  border-top-color: transparent;
}
#search-results .s-hit mark {
  background: rgba(234, 179, 8, .35) !important;
  color: var(--text-strong) !important;
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 600;
}
[data-theme="dark"] #search-results .s-hit mark {
  background: rgba(234, 179, 8, .25) !important;
  color: #fde68a !important;
}
/* На мобилке выпадающий поиск — на всю ширину экрана */
@media (max-width: 720px) {
  #search-results {
    position: fixed !important;
    top: 70px !important;
    left: 1rem !important;
    right: 1rem !important;
    width: auto !important;
    max-height: 60vh;
  }
}

/* В тёмной теме инвертируем цвета карты, чтобы белый стал тёмным */
[data-theme="dark"] .hero-map img {
  filter: invert(0.92) hue-rotate(180deg);
}

/* === Этап 3 fix: компактная мобильная шапка === */
@media (max-width: 720px) {
  /* Уменьшаем все элементы шапки чтобы поместились в строку */
  .hdr {
    padding: .4rem .55rem;
    gap: .2rem .35rem !important;
  }
  .hdr .brand {
    flex: 0 0 auto;
  }
  .hdr .brand-mark {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
  }
  .hdr .hdr-logo {
    font-size: .92rem !important;
    padding: .25rem .5rem !important;
  }
  .hdr .menu-toggle {
    padding: .25rem .5rem !important;
    font-size: .75rem !important;
    margin: 0 .15rem 0 auto !important;
    flex: 0 0 auto;
  }
  .hdr .menu-toggle .menu-icon {
    font-size: .8rem;
  }
  /* theme-toggle сделаем меньше */
  .hdr .theme-toggle {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
    margin: 0 .1rem !important;
    flex: 0 0 auto;
  }
  /* Языковые кнопки компактнее */
  .hdr .lang-group {
    gap: .12rem !important;
    flex: 0 0 auto;
  }
  .hdr .lang-btn {
    padding: .22rem .42rem !important;
    font-size: .72rem !important;
    min-width: auto !important;
  }
}

/* На очень маленьких экранах — лого ещё компактнее, но подпись Меню остаётся */
@media (max-width: 400px) {
  .hdr .hdr-logo {
    font-size: .85rem !important;
    padding: .2rem .42rem !important;
  }
  .hdr .menu-toggle {
    padding: .3rem .55rem !important;
    font-size: .78rem !important;
  }
}

/* === Этап 3 fix v2: меню заметнее на мобильных === */
@media (max-width: 720px) {
  .hdr .menu-toggle {
    background: rgba(255, 255, 255, .22) !important;
    border: 1.5px solid rgba(255, 255, 255, .55) !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: .35rem .7rem !important;
    font-size: .82rem !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  }
  .hdr .menu-toggle:hover,
  .hdr .menu-toggle:active {
    background: rgba(255, 255, 255, .35) !important;
  }
  .hdr .menu-toggle .menu-icon {
    font-size: .95rem !important;
  }
}

/* === Кликабельная карта-герой === */
.hero-map a {
  display: block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.hero-map a:hover {
  transform: scale(1.01);
}
.hero-map a:hover img {
  filter: brightness(1.02);
}
.hero-map a::after {
  content: "↗";
  position: absolute;
  top: .6rem;
  right: .8rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(29, 95, 216, .92);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
}
.hero-map a:hover::after {
  opacity: 1;
  transform: scale(1.1);
}
[data-theme="dark"] .hero-map a::after {
  background: rgba(91, 143, 240, .95);
}

/* ============================================================
 * ГЛОБАЛЬНАЯ НОВАЯ ШАПКА — preview-header (со всех страниц)
 * Старая .hdr скрыта по умолчанию
 * ============================================================ */
.hdr { display: none !important; }

/* Подключаем шрифт Inter глобально */
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; }

/* preview-header — копия из homepage-modern.css, но без body.home-modern префикса */
.preview-header {
  position: sticky;
  top: 12px;
  z-index: 1000;
  width: min(1500px, calc(100% - 28px));
  margin: 12px auto 0;
  min-height: 82px;
  padding: 14px 18px;
  border: 1px solid rgba(188, 211, 255, .58);
  border-radius: 22px;
  display: grid;
  grid-template-columns: auto minmax(460px, 1fr) auto;
  align-items: center;
  gap: 18px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(80, 105, 153, .96), rgba(52, 74, 114, .98));
  background-size: 260% 100%, 100% 100%;
  box-shadow: 0 12px 36px rgba(18, 43, 85, .22), inset 0 1px 0 rgba(255, 255, 255, .22);
  animation: glassMoveGlobal 8s ease-in-out infinite;
  transition: min-height .2s ease, padding .2s ease, top .2s ease;
}
.preview-header.compact { top: 6px; min-height: 64px; padding: 9px 14px; }
.preview-header .brand { display: flex; gap: 10px; align-items: center; text-decoration: none; }
.preview-header .brand-mark,
.preview-header .brand-name {
  min-height: 48px;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(180deg, #3b73f3, #2456d5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.preview-header .brand-mark { width: 48px; border-radius: 13px; font-size: 24px; font-weight: 900; }
.preview-header .brand-name { padding: 0 18px; border-radius: 14px; font-size: 22px; font-weight: 850; }
.preview-header .main-nav {
  display: flex; justify-content: center; align-items: center;
  gap: 5px; flex-wrap: wrap;
}
.preview-header .main-nav a {
  position: relative;
  padding: 7px 9px;
  border-radius: 11px;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .18s ease, background .18s ease;
}
.preview-header .main-nav a::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 2px;
  height: 3px; border-radius: 999px; background: #a8c7ff;
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.preview-header .main-nav a:hover,
.preview-header .main-nav a.active { color: white; background: rgba(255, 255, 255, .08); }
.preview-header .main-nav a:hover::after,
.preview-header .main-nav a.active::after { transform: scaleX(1); }
.preview-header .header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.preview-header .lang-switch { display: flex; gap: 5px; }
.preview-header button,
.preview-header .header-tools a { border: 0; text-decoration: none; cursor: pointer; font: inherit; }
.preview-header .lang-switch a,
.preview-header .search-button,
.preview-header .theme-toggle {
  height: 34px; min-width: 40px; border-radius: 11px;
  color: white; background: rgba(255, 255, 255, .18);
  font-size: 12px; font-weight: 850;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; padding: 0 10px;
}
.preview-header .lang-switch .active { background: rgba(255, 255, 255, .3); }
.preview-header .telegram,
.preview-header .donate {
  height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; padding: 0 13px;
  font-size: 12px; font-weight: 900; white-space: nowrap; text-decoration: none;
}
.preview-header .telegram { background: #28a8e9; color: white; }
.preview-header .donate   { background: #ffc84a; color: #15325f; }
.preview-header .search-button { font-size: 18px; background: rgba(255, 255, 255, .18); }
.preview-header .theme-toggle { width: 34px; padding: 0; font-size: 14px; cursor: pointer; }
.preview-header .theme-toggle .icon-sun { display: none; }
.preview-header .theme-toggle .icon-moon { display: inline; }
[data-theme="dark"] .preview-header .theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .preview-header .theme-toggle .icon-moon { display: none; }

@keyframes glassMoveGlobal {
  0%, 100% { background-position: 110% 0, 0 0; }
  50%      { background-position: -65% 0, 0 0; }
}

/* Адаптив preview-header */
@media (max-width: 1100px) {
  .preview-header { grid-template-columns: 1fr; }
  .preview-header .main-nav { justify-content: flex-start; }
  .preview-header .header-tools { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .preview-header {
    width: calc(100% - 16px);
    border-radius: 18px;
    overflow: hidden;
  }
  .preview-header .main-nav {
    justify-content: flex-start;
    overflow: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    max-width: 100%;
    scrollbar-width: none;
  }
  .preview-header .main-nav::-webkit-scrollbar { display: none; }
  .preview-header .header-tools { max-width: 100%; overflow: auto; scrollbar-width: none; }
  .preview-header .header-tools::-webkit-scrollbar { display: none; }
  .preview-header .brand-name { font-size: 18px; padding: 0 12px; }
  .preview-header .brand-mark { width: 38px; min-height: 38px; font-size: 18px; }
}

/* Внутренний контейнер main — увеличиваем отступ от шапки */
body > main.main { margin-top: 30px !important; }

/* === Поиск в новой шапке === */
.preview-header .header-search {
  position: relative;
  display: flex;
  align-items: center;
}
.preview-header .header-search .search-input {
  height: 34px;
  width: 160px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .14);
  color: white;
  font-size: 12px;
  font-weight: 500;
  outline: none;
  transition: width .2s ease, background .2s ease;
}
.preview-header .header-search .search-input::placeholder { color: rgba(255, 255, 255, .65); }
.preview-header .header-search .search-input:focus {
  width: 220px;
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .55);
}
.preview-header .header-search #search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  width: 320px;
  z-index: 1100;
}
@media (max-width: 720px) {
  .preview-header .header-search .search-input { width: 130px; }
  .preview-header .header-search .search-input:focus { width: 160px; }
  .preview-header .header-search #search-results { width: 280px; right: -40px; }
}

/* ============================================================
 * ЕДИНЫЙ СТИЛЬ КАРТОЧЕК на всех страницах
 * Переопределение базовых .card, .qbox, .seo-intro и т.д.
 * чтобы они выглядели как новые preview-modern карточки
 * ============================================================ */

body { color: #122b55; }
body, html { background: linear-gradient(180deg, #eaf3ff 0, #f8fbff 48%, #eef5ff 100%); }

/* Заголовок страницы (.sec-title) */
.sec-title {
  font-size: clamp(22px, 2.6vw, 32px) !important;
  color: #122b55 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  margin-bottom: .8rem !important;
}

/* Базовая карточка */
.card {
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid #bcd3ff !important;
  border-radius: 26px !important;
  box-shadow: 0 18px 52px rgba(31, 59, 105, .16) !important;
  padding: 32px !important;
  margin-bottom: 22px !important;
}
.card h2, .card h3 {
  color: #122b55 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}
.card p {
  color: #58709a !important;
  font-size: 15px;
  line-height: 1.6;
}
.card a { color: #2f66df; }

/* SEO-блоки на главной (если они вернутся) */
.seo-intro,
.seo-relatives,
.seo-branches > div .card {
  background: rgba(255, 255, 255, .86);
  border: 1px solid #bcd3ff;
  border-radius: 26px;
  box-shadow: 0 18px 52px rgba(31, 59, 105, .16);
}

/* Главный вопрос */
.qbox {
  background: linear-gradient(180deg, #fff8e6, #fff3d2) !important;
  border: 1px solid #ffd97a !important;
  border-radius: 26px !important;
  padding: 32px !important;
  box-shadow: 0 18px 52px rgba(31, 59, 105, .12) !important;
  margin-bottom: 22px !important;
}
.qbox h2 { color: #6b4e0e !important; }
.qbox p  { color: #4a3a13 !important; }

/* Стат-карточки */
.stat-card {
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid #bcd3ff !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 32px rgba(31, 59, 105, .12) !important;
  padding: 22px !important;
}
.sc-label {
  color: #2f66df !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin-bottom: 6px !important;
}
.sc-name { color: #122b55 !important; font-size: 18px !important; font-weight: 850 !important; }
.sc-dates { color: #58709a !important; font-size: 13px !important; margin-top: 6px !important; }

/* Древо — node */
.tnode {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid #bcd3ff !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(31, 59, 105, .12) !important;
}
.tnode strong { color: #122b55 !important; }

/* Маршрут текстовый */
.route-strip {
  background: rgba(255, 255, 255, .9) !important;
  border: 1px solid #bcd3ff !important;
  border-radius: 18px !important;
  padding: 14px !important;
}
.route-stage {
  background: linear-gradient(180deg, #f7fbff, #edf5ff) !important;
  border: 1px solid #d6e5ff !important;
  border-radius: 12px !important;
  color: #122b55 !important;
  font-weight: 700 !important;
}
.route-stage:hover { background: #e8f0ff !important; border-color: #2f66df !important; }
.route-arrow { color: #2f66df !important; }

/* Тёмная тема — карточки */
[data-theme="dark"] body,
[data-theme="dark"] html {
  background: linear-gradient(180deg, #0a1428 0, #0e1a35 48%, #0a1428 100%) !important;
  color: #e8eef9 !important;
}
[data-theme="dark"] .card,
[data-theme="dark"] .seo-intro,
[data-theme="dark"] .seo-relatives,
[data-theme="dark"] .stat-card {
  background: rgba(26, 38, 64, .86) !important;
  border-color: #2a3f6b !important;
  color: #e8eef9 !important;
}
[data-theme="dark"] .card h2,
[data-theme="dark"] .card h3,
[data-theme="dark"] .sec-title,
[data-theme="dark"] .sc-name { color: #e8eef9 !important; }
[data-theme="dark"] .card p,
[data-theme="dark"] .sc-dates { color: #a4b5d1 !important; }
[data-theme="dark"] .card a { color: #5b8ff0 !important; }
[data-theme="dark"] .qbox {
  background: linear-gradient(180deg, #2d2515, #3d2f1a) !important;
  border-color: #6b5527 !important;
}
[data-theme="dark"] .qbox h2 { color: #ffd97a !important; }
[data-theme="dark"] .qbox p  { color: #d4c08a !important; }
[data-theme="dark"] .tnode {
  background: rgba(26, 38, 64, .92) !important;
  border-color: #2a3f6b !important;
}
[data-theme="dark"] .tnode strong { color: #e8eef9 !important; }
[data-theme="dark"] .route-strip {
  background: rgba(26, 38, 64, .92) !important;
  border-color: #2a3f6b !important;
}
[data-theme="dark"] .route-stage {
  background: linear-gradient(180deg, #16243e, #1a2640) !important;
  border-color: #2a3f6b !important;
  color: #e8eef9 !important;
}

/* === ГЛОБАЛЬНОЕ Inter — самое последнее правило, перебивает всё === */
html, body, h1, h2, h3, h4, h5, h6, p, a, span, div, button, input, select, textarea,
li, dt, dd, td, th, label, figure, figcaption, blockquote, article, section,
.card, .qbox, .tnode, .stat-card, .sec-title, .sc-name, .sc-label, .sc-dates,
.route-stage, .route-arrow, .seo-intro, .seo-relatives, .seo-branches,
.lbl, .tt2, .tts, .ttg, .ttw, .ttwh,
.preview-header, .preview-header * {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Только для моноширинных элементов — оставляем системный моноширинный */
code, pre, kbd, samp, tt {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
}

/* ============================================================
 * Логотип K + Крёкер — одинаковый шрифт + стеклянный эффект
 * ============================================================ */
.preview-header .brand-mark,
.preview-header .brand-name {
  position: relative;
  font-size: 22px !important;
  font-weight: 850 !important;
  letter-spacing: .02em;
  background:
    linear-gradient(125deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.10) 70%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #3b73f3 0%, #2456d5 100%) !important;
  background-size: 220% 100%, 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 6px 14px rgba(36, 86, 213, .35) !important;
  overflow: hidden;
  animation: brandShine 6s ease-in-out infinite;
}

/* Сам блик — отдельный псевдоэлемент чтобы не затирался текстом */
.preview-header .brand-mark::after,
.preview-header .brand-name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg,
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,0) 62%,
    rgba(255,255,255,.10) 100%);
  pointer-events: none;
}

/* Бегущий блик */
.preview-header .brand-mark::before,
.preview-header .brand-name::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.40) 50%,
    rgba(255,255,255,0) 65%);
  transform: translateX(-100%);
  animation: brandSweep 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes brandShine {
  0%, 100% { background-position: 0% 0, 0 0; }
  50%      { background-position: 100% 0, 0 0; }
}

@keyframes brandSweep {
  0%, 100% { transform: translateX(-110%); }
  50%      { transform: translateX(110%); }
}

/* Размеры */
.preview-header .brand-mark {
  width: 48px !important;
  min-height: 48px !important;
}
.preview-header .brand-name {
  padding: 0 18px !important;
  min-height: 48px !important;
}

/* Текст K и Крёкер должен быть НАД бликами */
.preview-header .brand-mark,
.preview-header .brand-name {
  isolation: isolate;
}
.preview-header .brand-mark > *,
.preview-header .brand-name > *,
.preview-header .brand-mark::before,
.preview-header .brand-name::before {
  z-index: 1;
}

/* Мобильный — пропорционально меньше */
@media (max-width: 720px) {
  .preview-header .brand-mark,
  .preview-header .brand-name {
    font-size: 18px !important;
    min-height: 40px !important;
  }
  .preview-header .brand-mark { width: 40px !important; }
  .preview-header .brand-name { padding: 0 14px !important; }
}

/* ============================================================
 * Убираем старый тёмный фон .hero на главной (новый дизайн)
 * ============================================================ */
body[data-section="s0"] .hero,
.hero {
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-align: left !important;
  overflow: visible !important;
}
body[data-section="s0"] .hero::before,
.hero::before {
  display: none !important;
  background: none !important;
}

/* ============================================================
 * Ссылки в карточках (особенно на странице ресурсов)
 * — единый стиль чтобы видно было что это ссылка
 * ============================================================ */
.card a[href^="http"],
.card a[href^="https"],
.research-table a[href^="http"],
.stbl a[href^="http"],
main p a[href^="http"],
main li a[href^="http"] {
  color: #2f66df;
  text-decoration: none;
  border-bottom: 1px dashed rgba(47, 102, 223, .45);
  transition: color .15s, border-color .15s, background .15s;
  padding-bottom: 1px;
  white-space: nowrap;
}
.card a[href^="http"]:hover,
.card a[href^="https"]:hover,
.research-table a[href^="http"]:hover,
.stbl a[href^="http"]:hover,
main p a[href^="http"]:hover,
main li a[href^="http"]:hover {
  color: #1d4ec4;
  border-bottom-color: #1d4ec4;
  border-bottom-style: solid;
}
/* Внешняя стрелка для ссылок на сторонние сайты */
.card a[href^="http"]::after,
.card a[href^="https"]::after {
  content: " ↗";
  font-size: .85em;
  color: rgba(47, 102, 223, .6);
}
/* Тёмная тема — ссылки */
[data-theme="dark"] .card a[href^="http"],
[data-theme="dark"] .card a[href^="https"] {
  color: #5b8ff0;
  border-bottom-color: rgba(91, 143, 240, .4);
}
[data-theme="dark"] .card a[href^="http"]:hover {
  color: #80a8ff;
  border-bottom-color: #80a8ff;
}

/* ============================================================
 * Кнопка-ссылка на странице ресурсов (.res-btn)
 * — нормальный белый текст на синем фоне
 * ============================================================ */
.card a.res-btn,
a.res-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  margin-top: 1rem !important;
  padding: .55rem 1.1rem !important;
  background: #2f66df !important;
  color: white !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  transition: background .15s, transform .15s !important;
  box-shadow: 0 4px 12px rgba(47, 102, 223, .25);
}
.card a.res-btn::after,
a.res-btn::after {
  content: " ↗" !important;
  color: rgba(255, 255, 255, .8) !important;
  font-size: .85em !important;
}
.card a.res-btn:hover,
a.res-btn:hover {
  background: #1d4ec4 !important;
  border-color: transparent !important;
  transform: translateY(-1px);
}
[data-theme="dark"] .card a.res-btn {
  background: #3b73f3 !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(59, 115, 243, .35);
}

/* res-link — для строчного списка "Других ресурсов" */
.card a.res-link,
a.res-link {
  display: flex !important;
  align-items: center !important;
  padding: .65rem .85rem !important;
  background: #f3f8ff !important;
  color: #2f66df !important;
  border: 1px solid #d6e5ff !important;
  border-bottom: 1px solid #d6e5ff !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  margin: .25rem 0 !important;
  transition: background .15s, border-color .15s, transform .15s !important;
}
.card a.res-link::after,
a.res-link::after {
  content: " ↗" !important;
  margin-left: auto !important;
  color: rgba(47, 102, 223, .6) !important;
}
.card a.res-link:hover,
a.res-link:hover {
  background: #e5eeff !important;
  border-color: #2f66df !important;
  border-bottom-color: #2f66df !important;
  transform: translateX(2px);
}
[data-theme="dark"] .card a.res-link {
  background: #16243e !important;
  color: #5b8ff0 !important;
  border-color: #2a3f6b !important;
}
[data-theme="dark"] .card a.res-link:hover {
  background: #1e2f4f !important;
  border-color: #5b8ff0 !important;
}
.resource-list {
  display: grid;
  gap: .35rem;
}

/* ============================================================
 * НАСТОЯЩИЙ LIQUID GLASS (Apple iOS 26 / macOS Tahoe style)
 * Прозрачное стекло + размытие фона + блики
 * ============================================================ */

/* Шапка — прозрачное стекло */
.preview-header {
  background:
    /* Тонкий блик сверху */
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 100%),
    /* Полупрозрачный синий слой */
    linear-gradient(135deg, rgba(80, 105, 153, .55) 0%, rgba(52, 74, 114, .65) 100%) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow:
    /* Внешняя мягкая тень */
    0 12px 40px rgba(18, 43, 85, .25),
    /* Внутренний блик сверху */
    inset 0 1px 0 rgba(255, 255, 255, .35),
    /* Внутренняя тень снизу — стеклянная глубина */
    inset 0 -1px 0 rgba(0, 0, 0, .08) !important;
  animation: none !important; /* убираем старую анимацию градиента */
}

/* Логотип K — настоящее стекло */
.preview-header .brand-mark,
.preview-header .brand-name {
  background:
    /* Светлый блик сверху */
    linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.05) 50%, rgba(255,255,255,0) 100%),
    /* Полупрозрачный синий */
    linear-gradient(135deg, rgba(59, 115, 243, .85) 0%, rgba(36, 86, 213, .95) 100%) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow:
    /* Внешняя цветная тень */
    0 4px 16px rgba(36, 86, 213, .35),
    /* Внутренний верхний блик */
    inset 0 1px 0 rgba(255, 255, 255, .50),
    /* Внутренняя нижняя тень для глубины */
    inset 0 -2px 8px rgba(0, 0, 0, .15),
    /* Боковые подсветки */
    inset 1px 0 0 rgba(255, 255, 255, .15),
    inset -1px 0 0 rgba(0, 0, 0, .08) !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Дополнительный белый блик внутри логотипа */
.preview-header .brand-mark::before,
.preview-header .brand-name::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: 50%;
  background: radial-gradient(ellipse at center top, rgba(255,255,255,.25) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: none !important;
  transform: none !important;
}

.preview-header .brand-mark::after,
.preview-header .brand-name::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0) 75%,
    rgba(255,255,255,.06) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Текст логотипа поверх бликов */
.preview-header .brand-mark,
.preview-header .brand-name {
  z-index: 0;
}
.preview-header .brand-mark > *,
.preview-header .brand-name > * {
  position: relative;
  z-index: 2;
}

/* Кнопки в шапке тоже стеклянные */
.preview-header .telegram,
.preview-header .donate,
.preview-header .lang-switch a,
.preview-header .lang-switch button,
.preview-header .search-button,
.preview-header .theme-toggle {
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    0 2px 8px rgba(0, 0, 0, .12);
  border: 1px solid rgba(255, 255, 255, .15) !important;
}

/* Telegram — стеклянный голубой */
.preview-header .telegram {
  background: linear-gradient(180deg, rgba(64, 188, 240, .85), rgba(40, 168, 233, .95)) !important;
}
/* PayPal — стеклянный жёлтый */
.preview-header .donate {
  background: linear-gradient(180deg, rgba(255, 215, 90, .9), rgba(255, 200, 74, 1)) !important;
}

/* Search input — тоже стеклянный */
.preview-header .header-search .search-input {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}

/* Активная вкладка навигации — стеклянная подсветка */
.preview-header .main-nav a.active,
.preview-header .main-nav a:hover {
  background: rgba(255, 255, 255, .15) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Тёмная тема — глубже стекло */
[data-theme="dark"] .preview-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 25%),
    linear-gradient(135deg, rgba(20, 30, 55, .70) 0%, rgba(10, 18, 35, .80) 100%) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .15),
    inset 0 -1px 0 rgba(0, 0, 0, .25) !important;
}

/* === ЧИСТЫЙ Liquid Glass для шапки (одобрено в превью) === */

/* Лого K и Крёкер — БЕЗ синего фона, чистый текст */
.preview-header .brand-mark,
.preview-header .brand-name {
  background: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  color: white !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .25),
    0 0 12px rgba(255, 255, 255, .15),
    0 2px 4px rgba(0, 0, 0, .25) !important;
  padding: 0 !important;
  font-weight: 900 !important;
  letter-spacing: .02em;
  min-height: auto !important;
  position: relative;
  z-index: 1;
}
.preview-header .brand-mark::before,
.preview-header .brand-mark::after,
.preview-header .brand-name::before,
.preview-header .brand-name::after {
  display: none !important;
  content: none !important;
}
.preview-header .brand-mark {
  font-size: 28px !important;
  width: auto !important;
  padding: 0 6px !important;
}
.preview-header .brand-name {
  font-size: 24px !important;
  padding: 0 4px !important;
}

/* Кнопки шапки — все стеклянные без заливки */
.preview-header .telegram,
.preview-header .donate,
.preview-header .lang-switch a,
.preview-header .lang-switch button,
.preview-header .search-button,
.preview-header .theme-toggle {
  background: rgba(255, 255, 255, .08) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 100%) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -1px 0 rgba(0, 0, 0, .08),
    0 2px 8px rgba(0, 0, 0, .12) !important;
  color: white !important;
}

/* TG — стеклянная капсула с голубым акцентом */
.preview-header .telegram {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 0 0 1px rgba(64, 188, 240, .35),
    0 2px 12px rgba(40, 168, 233, .25) !important;
}
/* PayPal — стеклянная капсула с жёлтым акцентом */
.preview-header .donate {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 0 0 1px rgba(255, 200, 74, .45),
    0 2px 12px rgba(255, 200, 74, .25) !important;
  color: #fff5d9 !important;
}

/* Поле поиска — стеклянное */
.preview-header .header-search .search-input {
  background: rgba(255, 255, 255, .06) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 100%) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  color: white !important;
}
.preview-header .header-search .search-input::placeholder {
  color: rgba(255, 255, 255, .55) !important;
}

/* Активный пункт меню — стеклянная капсула */
.preview-header .main-nav a.active {
  background: rgba(255, 255, 255, .12) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ============================================================
 * LIQUID GLASS v3 — clear drop effect (как iOS 26 / фото пользователя)
 * Дата: 9 мая 2026, версия v=20260509-glass-drop
 * Назначение: К и Крёкер + все элементы шапки = прозрачные капли
 * ============================================================ */

/* === Сама шапка — почти прозрачное стекло === */
.preview-header{
  background: rgba(255,255,255,0.05) !important;
  background-image: none !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    0 18px 50px rgba(10,25,52,0.30) !important;
  animation: none !important;
}

/* === K и Крёкер — стеклянные капли === */
.preview-header .brand-mark,
.preview-header .brand-name{
  position: relative !important;
  background: rgba(255,255,255,0.04) !important;
  background-image: none !important;
  backdrop-filter: blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,0.40) !important;
  color: rgba(255,255,255,0.40) !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.65),
    inset 0 -3px 5px rgba(255,255,255,0.20),
    inset 2px 0 3px rgba(255,255,255,0.18),
    inset -2px 0 3px rgba(255,255,255,0.18),
    0 8px 16px rgba(0,0,0,0.20) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.60),
    0 0 4px rgba(255,255,255,0.30),
    0 -1px 0 rgba(0,0,0,0.15) !important;
  overflow: hidden !important;
  animation: none !important;
  transform: none !important;
}

/* Верхний блик (выпуклая «корка» капли) — отменяет старый бегущий блик */
.preview-header .brand-mark::before,
.preview-header .brand-name::before{
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 5px !important;
  right: 5px !important;
  bottom: auto !important;
  height: 16px !important;
  width: auto !important;
  inset: auto !important;
  border-radius: 11px 11px 22px 22px !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.65) 0%,
      rgba(255,255,255,0.10) 60%,
      rgba(255,255,255,0) 100%) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  pointer-events: none !important;
  display: block !important;
  opacity: 1 !important;
  z-index: 1 !important;
  box-shadow: none !important;
  border: none !important;
  mix-blend-mode: normal !important;
}

/* Нижнее преломление света через каплю */
.preview-header .brand-mark::after,
.preview-header .brand-name::after{
  content: "" !important;
  position: absolute !important;
  bottom: 4px !important;
  top: auto !important;
  left: 14px !important;
  right: 14px !important;
  height: 6px !important;
  width: auto !important;
  inset: auto !important;
  border-radius: 50% !important;
  background:
    radial-gradient(ellipse,
      rgba(255,255,255,0.35) 0%,
      rgba(255,255,255,0) 70%) !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  pointer-events: none !important;
  display: block !important;
  opacity: 1 !important;
  z-index: 1 !important;
  box-shadow: none !important;
  border: none !important;
  mix-blend-mode: normal !important;
}

/* Hover на лого — слегка ярче, без рывков */
.preview-header .brand:hover .brand-mark,
.preview-header .brand:hover .brand-name{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.55) !important;
  color: rgba(255,255,255,0.65) !important;
  transform: none !important;
}

/* === Меню — без фона у обычных пунктов, ярче на hover/active === */
.preview-header .main-nav a{
  position: relative !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(255,255,255,0.80) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.preview-header .main-nav a:hover,
.preview-header .main-nav a.active{
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  color: rgba(255,255,255,0.97) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.50) !important;
}

/* === DE/RU/EN, TG, PayPal, поиск, тема — мелкие стеклянные капли === */
.preview-header .lang-switch button,
.preview-header .lang-switch a,
.preview-header .telegram,
.preview-header .donate,
.preview-header .search-button,
.preview-header .theme-toggle{
  background: rgba(255,255,255,0.04) !important;
  background-image: none !important;
  backdrop-filter: blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  color: rgba(255,255,255,0.50) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 2px rgba(255,255,255,0.10) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45) !important;
}

/* Активный язык — ярче, всё ещё стеклянный */
.preview-header .lang-switch button.active,
.preview-header .lang-switch a.active,
.preview-header .lang-switch .active{
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.55) !important;
  color: rgba(255,255,255,0.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    inset 0 -1px 2px rgba(255,255,255,0.20) !important;
  text-shadow: none !important;
}

/* Hover на капсулах — ярче, как стекло реагирует на свет */
.preview-header .lang-switch button:hover,
.preview-header .lang-switch a:hover,
.preview-header .telegram:hover,
.preview-header .donate:hover,
.preview-header .search-button:hover,
.preview-header .theme-toggle:hover{
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.55) !important;
  color: rgba(255,255,255,0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 2px rgba(255,255,255,0.18) !important;
}

/* === Compact (после скролла) — стекло чуть плотнее, читаемость === */
.preview-header.compact{
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
}

/* ============================================================
 * LIQUID GLASS v4 — синий цвет букв + темнее фон сайта
 * Дата: 9 мая 2026, версия v=20260509-glass-blue-v2
 * Перезаписывает v3 (белые буквы → синие #1d4dc7, фон серый темнее)
 * ============================================================ */

/* === Фон body — мягкий светло-серый (было слишком бледный голубой) === */
body:not(.dark):not([data-theme="dark"]):not(.dark-mode){
  background: linear-gradient(180deg, #b5bcc7 0%, #c8ced8 48%, #b5bcc7 100%) !important;
}

/* === Шапка — белое стекло, чуть плотнее под тёмный фон === */
.preview-header{
  background: rgba(255,255,255,0.40) !important;
  background-image: none !important;
  border: 1px solid rgba(36,86,213,0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(36,86,213,0.10),
    0 18px 50px rgba(36,86,213,0.18) !important;
}

/* === K и Крёкер — синие буквы === */
.preview-header .brand-mark,
.preview-header .brand-name{
  background: rgba(255,255,255,0.38) !important;
  background-image: none !important;
  border: 1px solid rgba(36,86,213,0.40) !important;
  color: #1d4dc7 !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.95),
    inset 0 -3px 5px rgba(36,86,213,0.15),
    inset 2px 0 3px rgba(255,255,255,0.55),
    inset -2px 0 3px rgba(255,255,255,0.55),
    0 6px 14px rgba(36,86,213,0.20) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.95),
    0 -1px 0 rgba(36,86,213,0.20) !important;
}

/* Hover на лого — ярче */
.preview-header .brand:hover .brand-mark,
.preview-header .brand:hover .brand-name{
  background: rgba(255,255,255,0.55) !important;
  border-color: rgba(36,86,213,0.55) !important;
  color: #15369a !important;
}

/* === Меню — синие буквы === */
.preview-header .main-nav a{
  color: #2456d5 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-shadow: none !important;
}
.preview-header .main-nav a:hover,
.preview-header .main-nav a.active{
  background: rgba(255,255,255,0.50) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(36,86,213,0.32) !important;
  color: #1d4dc7 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

/* === DE/EN, TG, PayPal, поиск, тема — синие буквы на стекле === */
.preview-header .lang-switch button,
.preview-header .lang-switch a,
.preview-header .telegram,
.preview-header .donate,
.preview-header .search-button,
.preview-header .theme-toggle{
  background: rgba(255,255,255,0.40) !important;
  background-image: none !important;
  border: 1px solid rgba(36,86,213,0.32) !important;
  color: #1d4dc7 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 2px rgba(36,86,213,0.10) !important;
  text-shadow: none !important;
}

/* === Активный язык — синяя заливка с белым текстом === */
.preview-header .lang-switch button.active,
.preview-header .lang-switch a.active,
.preview-header .lang-switch .active{
  background: rgba(36,86,213,0.85) !important;
  border-color: rgba(36,86,213,0.95) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 2px rgba(0,0,0,0.10) !important;
  text-shadow: none !important;
}

/* === Hover на капсулах === */
.preview-header .lang-switch button:hover,
.preview-header .lang-switch a:hover,
.preview-header .telegram:hover,
.preview-header .donate:hover,
.preview-header .search-button:hover,
.preview-header .theme-toggle:hover{
  background: rgba(255,255,255,0.60) !important;
  border-color: rgba(36,86,213,0.55) !important;
  color: #15369a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 2px rgba(36,86,213,0.18) !important;
}

/* === Compact (после скролла) — стекло плотнее === */
.preview-header.compact{
  background: rgba(255,255,255,0.55) !important;
}

/* ============================================================
 * LIQUID GLASS v5 — выпуклые капли + светлее фон + поиск синий
 * Дата: 9 мая 2026, версия v=20260509-glass-convex-v3
 * Перезаписывает v4:
 *   - Фон чуть светлее: #c8cdd6 → #d4d8df (был #b5bcc7 → #c8ced8)
 *   - Капсулы выпуклые: верхний блик-полумесяц + нижнее свечение в backgrounds
 *   - Толщина рамки 1.5px (была 1px)
 *   - Поиск: синий текст вместо белого, плейсхолдер тоже синий
 * ============================================================ */

/* === Фон body — чуть светлее === */
body:not(.dark):not([data-theme="dark"]):not(.dark-mode){
  background: linear-gradient(180deg, #c8cdd6 0%, #d4d8df 48%, #c8cdd6 100%) !important;
}

/* === Шапка — стекло с верхним бликом === */
.preview-header{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 35%, rgba(255,255,255,0) 70%),
    rgba(255,255,255,0.30) !important;
  border: 1.5px solid rgba(255,255,255,0.65) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.40),
    inset 0 -8px 14px -4px rgba(36,86,213,0.08),
    0 18px 50px rgba(36,86,213,0.18) !important;
}

/* === K и Крёкер — выпуклые стеклянные капли === */
.preview-header .brand-mark,
.preview-header .brand-name{
  background:
    radial-gradient(ellipse at 50% 95%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.20) 30%, rgba(255,255,255,0) 55%),
    rgba(255,255,255,0.30) !important;
  border: 1.5px solid rgba(255,255,255,0.65) !important;
  color: #1d4dc7 !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -2px 2px rgba(255,255,255,0.55),
    inset 1px 0 0 rgba(255,255,255,0.55),
    inset -1px 0 0 rgba(255,255,255,0.55),
    inset 0 -6px 10px -4px rgba(36,86,213,0.12),
    0 6px 14px rgba(36,86,213,0.20),
    0 1px 3px rgba(36,86,213,0.10) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.95),
    0 0 6px rgba(255,255,255,0.30) !important;
  overflow: hidden !important;
}

/* Прячем старые ::before/::after от v3 (всё теперь в backgrounds) */
.preview-header .brand-mark::before,
.preview-header .brand-name::before,
.preview-header .brand-mark::after,
.preview-header .brand-name::after{
  display: none !important;
  content: none !important;
}

/* Hover на лого — ярче */
.preview-header .brand:hover .brand-mark,
.preview-header .brand:hover .brand-name{
  background:
    radial-gradient(ellipse at 50% 95%, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.25) 30%, rgba(255,255,255,0) 55%),
    rgba(255,255,255,0.45) !important;
  border-color: rgba(255,255,255,0.85) !important;
  color: #15369a !important;
}

/* === Меню — синие буквы === */
.preview-header .main-nav a{
  color: #2456d5 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-shadow: none !important;
}
.preview-header .main-nav a:hover,
.preview-header .main-nav a.active{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,0.40) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  color: #1d4dc7 !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.95) !important;
}

/* === DE/EN, TG, PayPal, поиск-кнопка, тема — стеклянные капсулы === */
.preview-header .lang-switch button,
.preview-header .lang-switch a,
.preview-header .telegram,
.preview-header .donate,
.preview-header .search-button,
.preview-header .theme-toggle{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,0.35) !important;
  border: 1.5px solid rgba(255,255,255,0.65) !important;
  color: #1d4dc7 !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    inset 0 -1px 2px rgba(36,86,213,0.10) !important;
  text-shadow: none !important;
}

/* === Активный язык — синяя заливка === */
.preview-header .lang-switch button.active,
.preview-header .lang-switch a.active,
.preview-header .lang-switch .active{
  background: rgba(36,86,213,0.85) !important;
  border-color: rgba(36,86,213,0.95) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.40),
    inset 0 -1px 2px rgba(0,0,0,0.10) !important;
  text-shadow: none !important;
}

/* === Hover на капсулах === */
.preview-header .lang-switch button:hover,
.preview-header .lang-switch a:hover,
.preview-header .telegram:hover,
.preview-header .donate:hover,
.preview-header .search-button:hover,
.preview-header .theme-toggle:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.10) 60%),
    rgba(255,255,255,0.55) !important;
  border-color: rgba(255,255,255,0.85) !important;
  color: #15369a !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    inset 0 -1px 2px rgba(36,86,213,0.18) !important;
}

/* === ПОИСК — синий шрифт вместо белого === */
.preview-header input[type="search"],
.preview-header input[type="text"],
.preview-header .search-input,
.preview-header .top-search input,
.preview-header .search-wrap input{
  color: #1d4dc7 !important;
  background: transparent !important;
  caret-color: #1d4dc7 !important;
  border: 0 !important;
}
.preview-header input[type="search"]::placeholder,
.preview-header input[type="text"]::placeholder,
.preview-header .search-input::placeholder,
.preview-header .top-search input::placeholder,
.preview-header .search-wrap input::placeholder{
  color: rgba(29, 77, 199, 0.55) !important;
  opacity: 1 !important;
}

/* Контейнер поиска — стеклянная капсула */
.preview-header .top-search,
.preview-header .search-wrap{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,0.35) !important;
  border: 1.5px solid rgba(255,255,255,0.65) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    inset 0 -1px 2px rgba(36,86,213,0.10) !important;
}

/* === Compact (после скролла) — стекло плотнее === */
.preview-header.compact{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.10) 35%, rgba(255,255,255,0) 70%),
    rgba(255,255,255,0.55) !important;
}

/* ============================================================
 * LIQUID GLASS v6 — тёмная шапка + прозрачные капли + поиск
 * Дата: 9 мая 2026, версия v=20260509-glass-dark-header
 * Перезаписывает v5:
 *   - Шапка тёмно-синяя rgba(28,55,120,0.55) (была светлая белая)
 *   - Все буквы (K, Крёкер, меню, DE/EN, TG, PayPal, тема) — БЕЛЫЕ
 *   - Активный язык RU — БЕЛАЯ капсула с СИНИМ текстом (контраст)
 *   - Капсулы реально прозрачные (rgba 0.04) с тонким ободком 0.35
 *   - Поиск: широкие селекторы (любой input в шапке + type=search везде)
 * ============================================================ */

/* === Фон body — оставляем светло-серый === */
body:not(.dark):not([data-theme="dark"]):not(.dark-mode){
  background: linear-gradient(180deg, #c8cdd6 0%, #d4d8df 48%, #c8cdd6 100%) !important;
}

/* === Шапка — тёмно-синее стекло === */
.preview-header{
  background: rgba(28,55,120,0.55) !important;
  background-image: none !important;
  border: 1px solid rgba(28,55,120,0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 18px 50px rgba(28,55,120,0.30) !important;
}

/* === K и Крёкер — прозрачные капли с белыми буквами === */
.preview-header .brand-mark,
.preview-header .brand-name{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.02) 30%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,0.04) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.02) 30%, rgba(255,255,255,0) 60%),
    linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 1px rgba(255,255,255,0.18),
    0 4px 10px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.10) !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.30),
    0 0 6px rgba(255,255,255,0.20) !important;
}

/* Прячем старые ::before/::after от прежних патчей */
.preview-header .brand-mark::before,
.preview-header .brand-name::before,
.preview-header .brand-mark::after,
.preview-header .brand-name::after{
  display: none !important;
  content: none !important;
}

/* Hover на лого */
.preview-header .brand:hover .brand-mark,
.preview-header .brand:hover .brand-name{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.55) !important;
  color: #ffffff !important;
}

/* === Меню — белый текст === */
.preview-header .main-nav a{
  color: rgba(255,255,255,0.88) !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.20) !important;
}
.preview-header .main-nav a:hover,
.preview-header .main-nav a.active{
  background: rgba(255,255,255,0.15) !important;
  background-image: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.50) !important;
  text-shadow: none !important;
}

/* === DE/EN, TG, PayPal, поиск-кнопка, тема — стеклянные капсулы === */
.preview-header .lang-switch button,
.preview-header .lang-switch a,
.preview-header .telegram,
.preview-header .donate,
.preview-header .search-button,
.preview-header .theme-toggle{
  background: rgba(255,255,255,0.07) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.20) !important;
}

/* === Активный язык — БЕЛАЯ капсула с СИНИМ текстом === */
.preview-header .lang-switch button.active,
.preview-header .lang-switch a.active,
.preview-header .lang-switch .active{
  background: rgba(255,255,255,0.92) !important;
  background-image: none !important;
  border-color: rgba(255,255,255,1) !important;
  color: #1d4dc7 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1) !important;
  text-shadow: none !important;
}

/* === Hover на капсулах === */
.preview-header .lang-switch button:hover,
.preview-header .lang-switch a:hover,
.preview-header .telegram:hover,
.preview-header .donate:hover,
.preview-header .search-button:hover,
.preview-header .theme-toggle:hover{
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.55) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 2px rgba(255,255,255,0.10) !important;
}

/* === ПОИСК — широкие селекторы (попытка №2) === */

/* Любой input/textarea в шапке */
.preview-header input,
.preview-header textarea{
  color: #ffffff !important;
  caret-color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
}
.preview-header input::placeholder,
.preview-header textarea::placeholder{
  color: rgba(255,255,255,0.55) !important;
  opacity: 1 !important;
}

/* HTML5 search-инпуты везде на сайте — синий текст (для search-результатов) */
input[type="search"]{
  color: #1d4dc7 !important;
  caret-color: #1d4dc7 !important;
}
input[type="search"]::placeholder{
  color: rgba(29, 77, 199, 0.55) !important;
  opacity: 1 !important;
}

/* В шапке — переопределяем обратно в белый */
.preview-header input[type="search"]{
  color: #ffffff !important;
  caret-color: #ffffff !important;
}
.preview-header input[type="search"]::placeholder{
  color: rgba(255,255,255,0.55) !important;
}

/* Любой контейнер с "search" в классе в шапке — стеклянная капсула */
.preview-header [class*="search"]:not(input):not(button):not(svg):not(path){
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45) !important;
}

/* === Compact (после скролла) — стекло плотнее === */
.preview-header.compact{
  background: rgba(28,55,120,0.70) !important;
}

/* ============================================================
 * LIQUID GLASS v7 — fix немецкого меню в одну строку
 * Дата: 9 мая 2026, версия v=20260509-de-menu-fit
 * AKTUALISIERUNGEN/STAMMBAUM/RESSOURCEN длиннее русских аналогов,
 * меню переносится. Уменьшаем шрифт и отступы для DE.
 * ============================================================ */

/* === Немецкое меню — компактнее === */
html[lang="de"] .preview-header .main-nav,
html[lang="de"] .preview-header nav{
  gap: 3px !important;
}

html[lang="de"] .preview-header .main-nav a{
  padding: 6px 6px !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

/* На очень узких экранах (<1100px) — ещё чуть меньше */
@media (max-width: 1180px){
  html[lang="de"] .preview-header .main-nav a{
    padding: 5px 5px !important;
    font-size: 10.5px !important;
  }
}

/* На совсем узких (мобилка) разрешаем перенос — это нормально */
@media (max-width: 760px){
  html[lang="de"] .preview-header .main-nav{
    flex-wrap: wrap !important;
  }
}

/* ============================================================
 * LIQUID GLASS v8 — яркий цвет шапки + светлее фон + фикс мобилки
 * Дата: 10 мая 2026, версия v=20260510-bright-mobile-fix
 * Перезаписывает v6/v7:
 *   - Шапка #2057ee (был тёмно-синий rgba 28,55,120,0.55)
 *   - Фон сайта #d8dde5→#e2e6ee (был #c8cdd6→#d4d8df)
 *   - Мобилка: меню в одну строку с горизонтальным скроллом
 *     (было flex-wrap: wrap → DE распадалось в 3 строки)
 * ============================================================ */

/* === Фон body — чуть ярче === */
body:not(.dark):not([data-theme="dark"]):not(.dark-mode){
  background: linear-gradient(180deg, #d8dde5 0%, #e2e6ee 48%, #d8dde5 100%) !important;
}

/* === Шапка — насыщенный royal blue === */
.preview-header{
  background: #2057ee !important;
  background-image: none !important;
  border: 1px solid rgba(32,87,238,0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 18px 50px rgba(32,87,238,0.30) !important;
}

.preview-header.compact{
  background: #1f54ea !important;
}

/* === Активный язык RU — белая капсула с СИНИМ текстом (новый цвет) === */
.preview-header .lang-switch button.active,
.preview-header .lang-switch a.active,
.preview-header .lang-switch .active{
  color: #2057ee !important;
}

/* ============================================================
 * МОБИЛЬНЫЙ ФИКС — главное здесь
 * Перебиваем мой же v7 где было flex-wrap: wrap на <760px
 * ============================================================ */
@media (max-width: 760px){

  /* Меню в одну строку с горизонтальным скроллом */
  html .preview-header .main-nav,
  html[lang="de"] .preview-header .main-nav,
  html[lang="ru"] .preview-header .main-nav,
  html[lang="en"] .preview-header .main-nav{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;       /* Firefox */
    -ms-overflow-style: none !important;    /* IE/Edge */
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 2px 0 !important;
  }

  /* Прячем scrollbar (WebKit) */
  html .preview-header .main-nav::-webkit-scrollbar,
  html[lang="de"] .preview-header .main-nav::-webkit-scrollbar,
  html[lang="ru"] .preview-header .main-nav::-webkit-scrollbar,
  html[lang="en"] .preview-header .main-nav::-webkit-scrollbar{
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }

  /* Пункты меню — без переноса, не сжимаются */
  html .preview-header .main-nav a,
  html[lang="de"] .preview-header .main-nav a,
  html[lang="ru"] .preview-header .main-nav a,
  html[lang="en"] .preview-header .main-nav a{
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    padding: 6px 9px !important;
    font-size: 12px !important;
  }

  /* Лёгкий fade-индикатор справа (намёк что скроллится) */
  .preview-header .main-nav{
    -webkit-mask-image: linear-gradient(90deg, black 0%, black 92%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, black 0%, black 92%, transparent 100%) !important;
  }
}

/* ============================================================
 * LIQUID GLASS v9 — Material Indigo + крупнее подписи/даты
 * Дата: 10 мая 2026, версия v=20260510-indigo-bigger-captions
 * Перезаписывает v8:
 *   - Шапка #3f51b5 Material Indigo (был яркий #2057ee)
 *   - Подписи под фото и даты: с ~11-12px до 15px
 * ============================================================ */

/* === Шапка — Material Indigo === */
.preview-header{
  background: #3f51b5 !important;
  background-image: none !important;
  border: 1px solid rgba(63,81,181,0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 18px 50px rgba(63,81,181,0.30) !important;
}

.preview-header.compact{
  background: #3a4ba8 !important;
}

/* Активный язык RU — белая капсула с индиго текстом */
.preview-header .lang-switch button.active,
.preview-header .lang-switch a.active,
.preview-header .lang-switch .active{
  color: #3f51b5 !important;
}

/* ============================================================
 * УВЕЛИЧЕНИЕ ПОДПИСЕЙ ПОД ФОТО И ДАТ
 * Селекторы покрывают все типичные варианты разметки
 * ============================================================ */

/* Подписи под фото — стандартные HTML5 + классы */
figcaption,
.caption,
.photo-caption,
.image-caption,
.figure-caption,
.img-caption,
.fig-caption,
[class*="photo-caption"],
[class*="image-caption"]{
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

/* Даты — типичные классы и HTML5 time */
time,
.date,
.dates,
.year,
.years,
.timeline-date,
.tree-date,
.node-date,
.person-date,
.life-dates,
.birth-date,
.death-date,
[class*="-date"],
[class*="date-"]{
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* Подписи к маркерам на карте (Leaflet/MapLibre/Google Maps) */
.leaflet-tooltip,
.leaflet-popup-content,
.maplibregl-popup-content,
.mapboxgl-popup-content,
.gm-style .gm-style-iw,
.map-label,
.marker-label,
.place-label{
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* Узлы в дереве (FamilyEcho/d3/etc) — даты под именем */
.tree-node .dates,
.tree-node .years,
.tree-node time,
.fam-tree time,
.family-tree time,
.tree text.dates,
.tree text.years,
svg .node-date{
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* === Compact (после скролла) === */
.preview-header.compact{
  background: #3a4ba8 !important;
}

/* ============================================================
 * LIQUID GLASS v10 — крупнее карта (Leaflet) + карточки мест
 * Дата: 10 мая 2026, версия v=20260510-bigger-map-cards
 * Древо правится отдельно через apply.sh (там SVG в ассетах)
 * ============================================================ */

/* === Leaflet — попапы и тултипы === */
.leaflet-popup-content{
  font-size: 16px !important;
  line-height: 1.5 !important;
  margin: 12px 14px !important;
}
.leaflet-popup-content b,
.leaflet-popup-content strong{
  font-size: 17px !important;
  font-weight: 700 !important;
}
.leaflet-popup-content p,
.leaflet-popup-content div{
  font-size: 16px !important;
  line-height: 1.5 !important;
  margin: 4px 0 !important;
}
.leaflet-popup-content em,
.leaflet-popup-content i,
.leaflet-popup-content small,
.leaflet-popup-content .dates,
.leaflet-popup-content time{
  font-size: 14px !important;
}

.leaflet-tooltip,
.leaflet-tooltip-pane{
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 6px 9px !important;
}

/* Атрибуция (мелкий "© OpenStreetMap") — оставляем мелкой, это правило хорошего тона */
.leaflet-control-attribution{
  font-size: 11px !important;
}

/* === Карточки мест под картой (.stat-card) === */
.stat-card{
  padding: 16px 18px !important;
}
.stat-card .sc-label{
  font-size: 13px !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 6px !important;
}
.stat-card .sc-name{
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin-bottom: 4px !important;
}
.stat-card .sc-dates{
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* === Даты в timeline на главной === */
.timeline-item span,
.timeline-item time{
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* === Даты под именами в превью древа на главной === */
.family-row .person span,
.tree-preview .person span{
  font-size: 13px !important;
  margin-top: 4px !important;
  display: block !important;
}

/* === Eyebrow подзаголовки чуть крупнее === */
.eyebrow{
  font-size: 13px !important;
  letter-spacing: 0.8px !important;
}

/* ============================================================
 * LIQUID GLASS v11 — мобильные индикаторы скролла
 * Дата: 10 мая 2026, версия v=20260510-mobile-scroll-hints
 * Перезаписывает мобильные правила v8/v10:
 *   - Меню: явный шеврон › справа + жирный fade (вместо тонкой маски)
 *   - Древо SVG: шире экрана + горизонтальный скролл контейнера
 * ============================================================ */

@media (max-width: 760px){

  /* ===== МЕНЮ: явный индикатор скролла ===== */

  /* Убираем слабую маску из v8 — она почти не видна */
  .preview-header .main-nav,
  html[lang="de"] .preview-header .main-nav,
  html[lang="ru"] .preview-header .main-nav,
  html[lang="en"] .preview-header .main-nav{
    -webkit-mask-image: none !important;
    mask-image: none !important;
    padding-right: 4px !important;
  }

  /* Шеврон ›  + жирный fade прилипший к правому краю меню при скролле */
  .preview-header .main-nav::after{
    content: "\203A" !important;          /* › */
    position: sticky !important;
    right: 0 !important;
    flex-shrink: 0 !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: -56px !important;        /* наезд на последний пункт под fade */
    padding: 0 12px 0 44px !important;
    background: linear-gradient(90deg,
      rgba(63,81,181,0) 0%,
      rgba(63,81,181,0.65) 35%,
      rgba(63,81,181,0.95) 75%,
      #3f51b5 100%) !important;
    color: rgba(255,255,255,0.95) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    pointer-events: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.20) !important;
    z-index: 10 !important;
  }

  /* ===== ДРЕВО: шире экрана + горизонтальный скролл ===== */

  /* Картинка SVG — фиксированная ширина больше iPhone-экрана */
  .tree-visual-img{
    min-width: 600px !important;
    width: 600px !important;
    max-width: none !important;
    height: auto !important;
    display: block !important;
  }

  /* Любой прямой родитель .tree-visual-img — скроллится горизонтально */
  :has(> .tree-visual-img){
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* Тот же fade + chevron индикатор */
    -webkit-mask-image: linear-gradient(90deg, black 0%, black 88%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, black 0%, black 88%, transparent 100%) !important;
    /* Чтобы скролл-боксы не съели вертикальный layout */
    overscroll-behavior-x: contain !important;
  }

  /* Прячем горизонтальный scrollbar (WebKit) */
  :has(> .tree-visual-img)::-webkit-scrollbar{
    display: none !important;
    height: 0 !important;
  }

  /* Подпись о возможности скролла под картинкой древа */
  .tree-visual-img::after,
  .tree-hint{
    /* hint можно добавить в HTML позже, для CSS-only - оставим только fade */
  }
}

/* ============================================================
 * v13 — расширенный блок пожертвований
 * Дата: 10 мая 2026, версия v=20260510-extended-donate
 * ============================================================ */

.support-strip-extended{
  margin: 32px 0 16px;
  padding: 28px 32px;
  border-radius: 22px;
  background: linear-gradient(180deg,
    rgba(63,81,181,0.08) 0%,
    rgba(63,81,181,0.02) 100%);
  border: 1px solid rgba(63,81,181,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 8px 24px rgba(63,81,181,0.10);
}
.support-strip-extended .eyebrow{
  font-size: 13px;
  letter-spacing: 0.8px;
  color: #3f51b5;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.support-strip-extended h2{
  font-size: 26px;
  font-weight: 800;
  color: #1c2540;
  margin: 0 0 12px;
  line-height: 1.2;
}
.support-strip-extended .lead{
  font-size: 16px;
  line-height: 1.55;
  color: #3a4664;
  margin: 0 0 18px;
}
.support-strip-extended h3{
  font-size: 14px;
  font-weight: 700;
  color: #3f51b5;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 18px 0 10px;
}
.support-strip-extended ul{
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.support-strip-extended ul li{
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.45;
  color: #2c3a52;
}
.support-strip-extended ul li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: #3f51b5;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  top: 2px;
}
@media (max-width: 720px){
  .support-strip-extended ul{ grid-template-columns: 1fr; }
  .support-strip-extended{ padding: 22px 20px; }
  .support-strip-extended h2{ font-size: 22px; }
}

/* === Кнопки пресетов === */
.support-amounts{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 14px;
}
.support-amounts .amount-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 48px;
  padding: 0 20px;
  border-radius: 14px;
  background: #3f51b5;
  color: #ffffff !important;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none !important;
  border: 1px solid #3f51b5;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 4px 12px rgba(63,81,181,0.30);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.support-amounts .amount-btn:hover{
  background: #4858c1;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 6px 16px rgba(63,81,181,0.40);
}
.support-amounts .amount-btn.amount-custom{
  background: transparent;
  color: #3f51b5 !important;
  border: 1px solid #3f51b5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.support-amounts .amount-btn.amount-custom:hover{
  background: rgba(63,81,181,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 4px 10px rgba(63,81,181,0.18);
}

.support-strip-extended .footnote{
  font-size: 13px;
  color: #6b7892;
  font-style: italic;
  margin: 12px 0 0;
  line-height: 1.4;
}

/* ============================================================
 * v14 — иконки PayPal и Telegram (оригинальные брендовые)
 * Дата: 10 мая 2026, версия v=20260510-brand-icons
 * ============================================================ */

/* Общий стиль для иконки внутри ссылок шапки */
.preview-header .telegram .icon,
.preview-header .donate .icon,
.support-amounts .amount-btn .icon,
.support-amounts .amount-btn-paypal .icon{
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* В шапке — рядом с текстом */
.preview-header .telegram,
.preview-header .donate{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
}
.preview-header .telegram .icon,
.preview-header .donate .icon{
  width: 16px;
  height: 16px;
}

/* В блоке пожертвований — крупнее */
.support-amounts .amount-btn .icon{
  width: 18px;
  height: 18px;
  margin-right: 6px;
}

/* Hover — лёгкое увеличение */
.preview-header .telegram:hover .icon,
.preview-header .donate:hover .icon{
  transform: scale(1.1);
  transition: transform 0.15s ease;
}

/* На очень узких экранах прячем текст у иконок (опционально, не активно) */
/* Если в будущем захотите только иконку на мобилке — убрать комменты:
@media (max-width: 480px){
  .preview-header .telegram .icon-text,
  .preview-header .donate .icon-text{ display: none; }
}
*/

/* ============================================================
 * v14 — иконки PayPal и Telegram (оригинальные брендовые)
 * Дата: 10 мая 2026, версия v=20260510-brand-icons
 * ============================================================ */

/* Общий стиль для иконки внутри ссылок шапки */
.preview-header .telegram .icon,
.preview-header .donate .icon,
.support-amounts .amount-btn .icon,
.support-amounts .amount-btn-paypal .icon{
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* В шапке — рядом с текстом */
.preview-header .telegram,
.preview-header .donate{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
}
.preview-header .telegram .icon,
.preview-header .donate .icon{
  width: 16px;
  height: 16px;
}

/* В блоке пожертвований — крупнее */
.support-amounts .amount-btn .icon{
  width: 18px;
  height: 18px;
  margin-right: 6px;
}

/* Hover — лёгкое увеличение */
.preview-header .telegram:hover .icon,
.preview-header .donate:hover .icon{
  transform: scale(1.1);
  transition: transform 0.15s ease;
}

/* На очень узких экранах прячем текст у иконок (опционально, не активно) */
/* Если в будущем захотите только иконку на мобилке — убрать комменты:
@media (max-width: 480px){
  .preview-header .telegram .icon-text,
  .preview-header .donate .icon-text{ display: none; }
}
*/

/* ============================================================
 * v14 — иконки PayPal и Telegram (оригинальные брендовые)
 * Дата: 10 мая 2026, версия v=20260510-brand-icons
 * ============================================================ */

/* Общий стиль для иконки внутри ссылок шапки */
.preview-header .telegram .icon,
.preview-header .donate .icon,
.support-amounts .amount-btn .icon,
.support-amounts .amount-btn-paypal .icon{
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* В шапке — рядом с текстом */
.preview-header .telegram,
.preview-header .donate{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
}
.preview-header .telegram .icon,
.preview-header .donate .icon{
  width: 16px;
  height: 16px;
}

/* В блоке пожертвований — крупнее */
.support-amounts .amount-btn .icon{
  width: 18px;
  height: 18px;
  margin-right: 6px;
}

/* Hover — лёгкое увеличение */
.preview-header .telegram:hover .icon,
.preview-header .donate:hover .icon{
  transform: scale(1.1);
  transition: transform 0.15s ease;
}

/* На очень узких экранах прячем текст у иконок (опционально, не активно) */
/* Если в будущем захотите только иконку на мобилке — убрать комменты:
@media (max-width: 480px){
  .preview-header .telegram .icon-text,
  .preview-header .donate .icon-text{ display: none; }
}
*/

/* v16 mobile-flex override removed by v19 (restored native author's media queries) */

/* ============================================================
 * v15 — FAQ block
 * Дата: 10 мая 2026, версия v=20260510-faq
 * ============================================================ */

.faq-section{
  margin: 32px 0 16px;
  padding: 28px 32px;
  border-radius: 22px;
  background: linear-gradient(180deg,
    rgba(63,81,181,0.05) 0%,
    rgba(63,81,181,0.01) 100%);
  border: 1px solid rgba(63,81,181,0.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 8px 24px rgba(63,81,181,0.08);
}
.faq-section .faq-eyebrow{
  font-size: 13px;
  letter-spacing: 0.8px;
  color: #3f51b5;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.faq-section h2{
  font-size: 26px;
  font-weight: 800;
  color: #1c2540;
  margin: 0 0 18px;
  line-height: 1.2;
}

.faq-item{
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(63,81,181,0.18);
  border-radius: 12px;
  margin-bottom: 8px;
  padding: 0;
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.faq-item:hover{
  border-color: rgba(63,81,181,0.35);
}
.faq-item[open]{
  background: rgba(255,255,255,0.85);
  border-color: rgba(63,81,181,0.35);
  box-shadow: 0 4px 12px rgba(63,81,181,0.10);
}

.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 48px 14px 18px;
  font-size: 16px;
  font-weight: 700;
  color: #1c2540;
  position: relative;
  user-select: none;
  line-height: 1.4;
}
.faq-item summary::-webkit-details-marker{ display: none; }

.faq-item summary::after{
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 700;
  color: #3f51b5;
  transition: transform 0.2s ease;
  line-height: 1;
}
.faq-item[open] summary::after{
  content: "−";
}

.faq-item .faq-answer{
  padding: 0 18px 16px;
  font-size: 15px;
  line-height: 1.55;
  color: #2c3a52;
  margin: 0;
}
.faq-item .faq-answer a{
  color: #3f51b5;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.faq-item .faq-answer a:hover{
  color: #2c3aa0;
}

@media (max-width: 720px){
  .faq-section{ padding: 22px 18px; }
  .faq-section h2{ font-size: 22px; }
  .faq-item summary{ font-size: 15px; padding: 13px 42px 13px 14px; }
  .faq-item .faq-answer{ font-size: 14px; padding: 0 14px 14px; }
}

/* ============================================================
 * v17 — поиск ВНЕ шапки, отдельной полосой
 * Дата: 10 мая 2026, версия v=20260510-search-outside
 * Перебивает v16 (там был поиск второй строкой ВНУТРИ шапки)
 * ============================================================ */

/* Убираем правила v16 для .preview-header (они переносили поиск внутри шапки) */
/* v17 mobile-grid override removed by v18 */

/* === Контейнер вынесенного поиска под шапкой === */
.search-bar-outside{
  width: 100%;
  max-width: 1200px;
  margin: 12px auto 0;
  padding: 0 16px;
  box-sizing: border-box;
  position: relative;
}

.search-bar-outside .search-input,
.search-bar-outside input[type="search"]{
  width: 100% !important;
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(63,81,181,0.30) !important;
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  color: #1c2540 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: Inter, -apple-system, sans-serif !important;
  outline: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 4px 12px rgba(63,81,181,0.10) !important;
  box-sizing: border-box !important;
  caret-color: #3f51b5 !important;
}

.search-bar-outside .search-input::placeholder,
.search-bar-outside input[type="search"]::placeholder{
  color: rgba(63,81,181,0.55) !important;
  font-weight: 500 !important;
}

.search-bar-outside .search-input:focus,
.search-bar-outside input[type="search"]:focus{
  border-color: rgba(63,81,181,0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 0 0 3px rgba(63,81,181,0.15),
    0 4px 14px rgba(63,81,181,0.18) !important;
}

/* Выпадашка результатов под полем поиска */
.search-bar-outside #search-results{
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  top: calc(100% + 4px) !important;
  z-index: 100 !important;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  max-height: 60vh;
  overflow-y: auto;
}

@media (max-width: 600px){
  .search-bar-outside{
    padding: 0 12px;
    margin-top: 8px;
  }
  .search-bar-outside .search-input,
  .search-bar-outside input[type="search"]{
    height: 40px !important;
    font-size: 14px !important;
  }
}

/* Скрываем поиск в шапке (он переедет под шапку через JS) */
/* Но оставляем доступным для script.js пока он не перенёс — */
/* видимо скроет JS через class на body */
body.search-moved .preview-header .header-search{
  display: none !important;
}

/* ============================================================
 * v20 — desktop header layout: tools под меню, прижаты вправо
 * Дата: 10 мая 2026, версия v=20260510-tools-below-nav
 * Только для широких экранов (>1100px), мобилку не трогаем.
 * ============================================================ */

@media (min-width: 1101px){
  .preview-header{
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "brand nav"
      "brand tools" !important;
    row-gap: 8px !important;
    align-items: center !important;
  }
  .preview-header .brand{
    grid-area: brand !important;
    align-self: center !important;
  }
  .preview-header .main-nav{
    grid-area: nav !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
  }
  .preview-header .header-tools{
    grid-area: tools !important;
    justify-content: flex-end !important;
  }
}