:root{
  --top:#0d1112;
  --text:#f2f5f7;
  --muted:rgba(242,245,247,.82);
  --stroke:rgba(255,255,255,.20);
  --shadow:0 18px 55px rgba(0,0,0,.55);
  --green:#5f985f;
  --green2:#74b274;
  --max:1200px;
  --font:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --fontTitle:"Adomino",var(--font);
  --tap:44px; /* minimum touch target */
  /* Larger topbar for better readability */
  --topbarH: 112px;
}

/* Ensure native [hidden] is never overridden by component styles */
[hidden],
[hidden=""],
.is-hidden{
  display:none !important;
}

/* Local font: place the file here:
   forumtest/assets/fonts/adomino.ttf
*/
@font-face{
  font-family:"Adomino";
  src:url("../fonts/adomino.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:#0a0f10;
  overflow-x:hidden;
}

/* TOP BAR */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background: linear-gradient(180deg, rgb(10 14 16 / 2%), rgb(10 14 16 / 36%));
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  height:auto;
  min-height:var(--topbarH);
}
.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(1200px 120px at 50% 0%, rgba(255,255,255,.10), transparent 60%);
  opacity:.85;
}
.topbar__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:18px 18px;
  display:grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items:center;
  gap:14px;
}
.topbar__logo{
  width:64px;height:64px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.65);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  object-fit:cover;
}
.topbar__title{
  margin:0;
  justify-self:stretch;
  text-align:center;
  font-family: var(--fontTitle);
  max-width:min(1095px, 100%);
  min-width:0;
  display:block;
  margin-inline:auto;
  /* Larger title: target ~33–35px on desktop, responsive on smaller screens */
  font-size: clamp(28px, calc(18px + 1.9vw), 35px) !important;
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.12;
  text-shadow: 0 10px 30px rgb(0 0 0 / 0%);
  text-wrap: balance;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  overflow-wrap:anywhere;
}
.topbar__tools{
  display:flex;
  align-items:center;
  gap:16px;
}

/* Language switch (KZ ↔ RU) */
.langSwitch{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  box-shadow:0 12px 26px rgba(0,0,0,.25);
  user-select:none;
}
.langSwitch__text{
  font-weight:900;
  letter-spacing:.6px;
  color:rgba(242,245,247,.70);
  font-size:12px;
}
.langSwitch__text.is-active{color:rgba(242,245,247,.95)}
.langSwitch__control{
  position:relative;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}
.langSwitch__input{
  position:absolute;
  inset:0;
  width:44px;
  height:26px;
  opacity:0;
  cursor:pointer;
}
.langSwitch__track{
  width:44px;
  height:26px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.20);
  position:relative;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.langSwitch__thumb{
  width:20px;
  height:20px;
  border-radius:999px;
  background:rgba(242,245,247,.92);
  box-shadow:0 10px 22px rgba(0,0,0,.28);
  position:absolute;
  left:3px;
  top:50%;
  transform:translateY(-50%);
  transition:transform .18s ease;
}

/* Checked => RU */
.langSwitch__input:checked + .langSwitch__track{
  background:rgba(242,245,247,.18);
  border-color:rgba(242,245,247,.28);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 10px 22px rgba(0,0,0,.18);
}
.langSwitch__input:checked + .langSwitch__track .langSwitch__thumb{
  transform:translate(18px, -50%);
}

/* Focus */
.langSwitch__input:focus-visible + .langSwitch__track{
  outline:2px solid rgba(242,245,247,.75);
  outline-offset:3px;
}

/* HERO */
.hero{
  position:relative;
  min-height: calc(100vh - var(--topbarH));
  display:grid;
  /* Keep the input close to the topbar (not vertically centered) */
  place-items:start center;
  padding-top: 14px;
  padding-bottom: 28px;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 520px at 20% 30%, rgba(120,180,120,.18), transparent 60%),
    radial-gradient(900px 520px at 80% 25%, rgba(90,160,255,.16), transparent 62%),
    radial-gradient(700px 480px at 50% 80%, rgba(255,180,90,.10), transparent 62%),
    linear-gradient(180deg, #071012, #0a1418 35%, #071012);
  background-size:cover;
}
.hero__shade{
  position:absolute; inset:0;
    position: absolute;
    inset: 0;
    background: radial-gradient(1000px 520px at 50% 35%, rgba(0, 0, 0, .10), rgb(0 0 0 / 2%) 70%, rgb(0 0 0 / 19%)), linear-gradient(180deg, rgba(0, 0, 0, .10), rgb(0 0 0 / 47%));
}

/* Rotating logos placed left/right of hero content */
.hero__shell{
  /* back to normal flow: do NOT pin the entire shell.
     We only keep the FIO input below the topbar (see #fioInput rule). */
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap: 0;
  padding: 0 14px;
}

/* Keep the FIO input always BELOW the sticky topbar while user scrolls.
   This prevents it from sliding under the topbar, without moving the whole hero shell. */
#fioInput{
  position: sticky;
  top: calc(var(--topbarH) + 10px);
  z-index: 6;
}

.spinLogo{
  position:fixed;
  /* place a bit higher under topbar */
  top: calc(var(--topbarH) - 28px);
  /* bigger on desktop */
  width: clamp(360px, 22vw, 640px);
  height: clamp(360px, 22vw, 640px);
  border-radius: 999px;

  opacity:.92;
  filter: drop-shadow(0 18px 46px rgba(0,0,0,.55)) brightness(1.04) saturate(1.05);
  mix-blend-mode: normal;
  pointer-events:none;
  z-index:1;
  /* IMPORTANT: do NOT rotate via CSS.
     The .webm files already contain the correct smooth rotation.
     CSS 3D rotation can cause edge-flash / direction flips on some GPUs. */
  transform: none;
}
.spinLogo__video{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
  backface-visibility:hidden;
  transform: translateZ(0);
}

/* Keep both videos in sync (playback, not CSS rotation) */
.spinLogo--left{left: 16px;}
.spinLogo--right{right: 16px; opacity:.88;}

@media (max-width: 980px){
  .spinLogo{
    top: calc(var(--topbarH) - 20px);
    width: clamp(220px, 34vw, 340px);
    height: clamp(220px, 34vw, 340px);
    opacity:.85;
  }
  .spinLogo--left{left: 10px;}
  .spinLogo--right{right: 10px;}
}

@media (prefers-reduced-motion: reduce){
  /* nothing to disable – videos rotate internally */
}

.hero__content{
  position:relative;
  z-index:2;
  border-radius: 22px;
  /* By default (before FIO selection) keep hero panel clean over video */
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
  /* compact, balanced panel after removing extra meta fields */
  width:min(760px, 92vw);
  padding: 22px 14px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

/* Enable glass/blur only AFTER user selected FIO */
body.has-fio .hero__content{
  /* stronger glass to improve readability after selection */
  background: rgba(6,10,12,.52);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.30);
  backdrop-filter: blur(5px) saturate(120%);
  /* No inner scroll: the panel should not show a scrollbar on 2K/desktop */
  max-height: none;
  overflow: visible;
  padding-bottom: 18px;
}

/* Keep the main action button visible while scrolling inside the hero panel */
/* A small fade hint at the bottom of the glass panel */
body.has-fio .hero__content::after{
  content:none;
  display:none;
}


/* Prevent inner blocks from overflowing hero__content */
.hero__content > *{max-width:100%; box-sizing:border-box;}

/* Input + check button */
.picker{
  width: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.picker__field{
  width:100%;
  display:flex;
  align-items:stretch;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.90);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.20);
  box-shadow: var(--shadow);
  overflow:visible;
}
.picker__input{
  flex:1;
  border:0;
  outline:none;
  background:transparent;
  padding: 18px 22px;
  font-size: clamp(16px, 1.35vw, 20px);
  color:#2a2f33;
}
.picker__input::placeholder{color: rgba(42,47,51,.52)}
.picker__hint{
  min-height: 18px;
  color: rgba(255,255,255,.90);
  font-weight:800;
  text-shadow:0 10px 24px rgba(0,0,0,.50);
}

/* CTA */
.cta{
  position: relative;
  isolation:isolate;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.15;
  margin-top: 14px;

  border: 1px solid rgba(255,255,255,.18);
  cursor:pointer;
  width: 100%;
  max-width: 560px;
  padding: 18px 22px;
  border-radius: 999px;
  font-size: clamp(18px, 2.0vw, 34px);
  font-weight:800;
  letter-spacing:.6px;
  color: rgba(255,255,255,.94);

  /* Cool cyan/teal — matched to AI video tones */
  background:
    radial-gradient(120% 180% at 18% 0%,
      rgba(140,255,238,.96) 0%,
      rgba(70,220,255,.92) 34%,
      rgba(24,150,210,.96) 100%);

  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    0 18px 44px rgba(70,220,255,.22);
  text-shadow: 0 10px 22px rgba(0,0,0,.45);

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* CTA loading state (used during registration request) */
.cta.is-loading{
  opacity: .88;
  cursor: progress;
  pointer-events: none;
}


.cta:hover{filter:saturate(1.10) brightness(1.03);transform: translateY(-1px);border-color: rgba(255,255,255,.26);box-shadow: 0 26px 70px rgba(0,0,0,.58), 0 22px 54px rgba(70,220,255,.28)}
.cta:active{filter:saturate(1.06) brightness(.99);transform: translateY(0px)}

.cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-120%) skewX(-18deg);
  opacity:.55;
  mix-blend-mode: screen;
  pointer-events:none;
  animation: ctaSheen 3.6s ease-in-out infinite;
}
.cta::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(80% 120% at 50% 0%, rgba(255,255,255,.26), transparent 60%);
  opacity:.6;
  pointer-events:none;
}
.cta:focus-visible{
  outline:none;
  border-color: rgba(255,255,255,.30);
  box-shadow:
    0 0 0 4px rgba(70,220,255,.22),
    0 22px 60px rgba(0,0,0,.55),
    0 18px 44px rgba(70,220,255,.22);
}

@keyframes ctaSheen{
  0%   { transform: translateX(-120%) skewX(-18deg); }
  45%  { transform: translateX(120%)  skewX(-18deg); }
  100% { transform: translateX(120%)  skewX(-18deg); }
}

@media (prefers-reduced-motion: reduce){
  .cta{transition:none}
  .cta:hover,.cta:active{transform:none}
  .cta::before{animation:none;opacity:0}
}


.note{
  margin:0;
  width:100%;
  max-width: 780px;
  text-align:center;
  color: rgba(255,255,255,.78);
  font-weight:600;
  line-height:1.5;
  text-shadow:0 10px 24px rgba(0,0,0,.45);
}

/* Hide helper texts (keep DOM hooks for logic/aria) */
.note{display:none !important;}
.picker__hint{display:none !important;}
.orgCard__sub{display:none !important;}

/* Responsive */
@media (max-width: 680px){
  .topbar__logo{width:52px;height:52px}
  .topbar__inner{gap:12px}
}
@media (max-width: 480px){
  .langSwitch{gap:8px;padding:5px 8px}
  .langSwitch__text{font-size:12px}
  .langSwitch__track{width:42px;height:24px}
  .langSwitch__thumb{width:18px;height:18px}
  .langSwitch__input{width:42px;height:24px}
  .picker__input{padding:16px 16px;font-size:16px}
    .cta{width: min(520px, 86vw)}
}


/* =========================
   2K (2560x1440) ADAPTATION
   Goal: hero__content and other panels should not feel small.
   We avoid `zoom` here (it can reduce sharpness and behaves inconsistently across engines).
   ========================= */
@media (min-width: 2200px) and (max-width: 3199px){
  :root{
    --max: 1560px;
    --topbarH: 128px;
  }

  .topbar__inner{padding:20px 22px; gap:18px;}
  .topbar__title{
    /* allow a bit bigger headline on QHD */
    font-size: clamp(34px, calc(18px + 1.5vw), 42px) !important;
    line-height: 1.12;
  }

  .hero{padding-top: 22px; padding-bottom: 44px;}
  .hero__content{
    width: min(1380px, 88vw);
    padding: 40px 28px 32px;
    gap: 28px;
    border-radius: 30px;
  }

  .picker__input{
    padding: 20px 26px;
    font-size: clamp(18px, 0.55vw + 16px, 24px);
  }

  .cta{
    max-width: 720px;
    padding: 20px 26px;
    font-size: clamp(22px, 1.25vw + 10px, 42px);
  }

  /* QHD: upscale orgCard (search + list items) so it doesn't feel tiny */
  .orgCard{padding: 24px; border-radius: 26px;}
  .orgCard__head{gap:10px; margin-bottom:14px;}
  .orgCard__title{font-size: 22px; line-height:1.15;}
  .orgCard__toolbar{margin-bottom:14px;}
  .orgCard__search{width: min(760px, 100%); padding: 16px 18px; font-size: 18px;}
  .orgCard__list{max-height: min(46vh, 620px); gap:14px;}

  .person{
    grid-template-columns: minmax(520px, 1fr) minmax(220px, 280px);
    gap: 14px;
  }
  .person__box{padding: 18px; min-height: 76px; border-radius: 20px;}
  .person__cap{font-size: 14px;}
  .person__org{font-size: 16px;}
  .person__pos,.person__position,.person__section{font-size: 15px;}


  .orgCard .btn{min-height: 46px; padding: 12px 16px; font-size: 16px;}

  /* QHD: larger modal so it doesn't look tiny on 2560x1440 */
  .modal.is-open{padding: 32px 20px;}
  .modal__panel{
    width: min(1180px, 92vw);
    border-radius: 28px;
    max-height: calc(100vh - 64px);
  }
  .modal__head{padding: 22px 22px 14px 22px;}
  .modal__body{padding: 18px 22px 10px 22px;}
  .modal__actions{padding: 14px 22px 22px 22px;}
  .modal__title{font-size: 22px;}
  .modal__sub{font-size: 15px;}

}



/* Global UI scaling for truly large displays (4K and up).
   QHD (2560x1440) is handled above without `zoom`. */
@media (min-width: 3200px){
  html{ zoom: 1.18; }
  :root{ --max: 1700px; }
}
@media (min-width: 3800px){
  html{ zoom: 1.32; }
  :root{ --max: 2100px; }
}
/* Fallback if zoom is not supported */
@supports not (zoom: 1){
  @media (min-width: 3200px){ html{ font-size: 18px; } }
  @media (min-width: 3800px){ html{ font-size: 20px; } }
}

/* Modal */
.modal{position:fixed; inset:0; display:none; z-index:50;}
.modal.is-open{display:flex; align-items:center; justify-content:center; padding: 24px 14px;}
.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.modal__panel{
  position:relative;
  width:min(820px, 94vw);
  margin: 0;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 26px 80px rgba(0,0,0,.65);

  max-height: calc(100vh - 48px);
  display:flex;
  flex-direction:column;
}
.modal__body{flex: 1 1 auto; overflow:auto; padding:14px 16px 6px 16px}

@media (max-width: 520px){
  .modal.is-open{padding: 18px 10px;}
  .modal__panel{width: min(96vw, 520px); border-radius: 20px;}
  .modal__head{padding:14px 14px 8px 14px;}
  .modal__body{padding:12px 14px 6px 14px;}
  .modal__actions{padding: 10px 14px 14px 14px;}
}

.modal__head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 16px 10px 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.modal__icon{
  width:44px; height:44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(120,180,120,.95), rgba(95,152,95,.98));
  box-shadow: 0 16px 40px rgba(95,152,95,.20);
}
.modal__titles{min-width:0}
.modal__title{font-weight:900; letter-spacing:.2px; font-size: 18px}
.modal__sub{color: rgba(242,245,247,.72); margin-top:2px; font-weight:700}
.modal__x{
  margin-left:auto;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(242,245,247,.92);
  border-radius: 14px;
  width:42px; height:42px;
  cursor:pointer;
}
.modal__x:hover{background: rgba(255,255,255,.10)}
/* modal__body overridden above for scroll */
.modal__msg{
  padding:14px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(242,245,247,.90);
  font-weight:700;
  line-height: 1.35;
  text-shadow:0 10px 24px rgba(0,0,0,.35);
}

/* Welcome modal structured content (stable layout at any zoom) */
.wm{display:flex; flex-direction:column; gap:12px}
.wm__fio{font-weight:950; letter-spacing:.2px; color: rgba(255,255,255,.98)}
.wm__grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px}
.wm__card{padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); min-width:0}
.wm__label{font-size:12px; font-weight:900; color: rgba(242,245,247,.68); text-transform:uppercase; letter-spacing:.08em}
.wm__value{margin-top:6px; font-size:14px; font-weight:900; color: rgba(242,245,247,.94); word-break:break-word}
.wm__status{padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04)}
.wm__statusTitle{font-weight:950}
.wm__line{margin-top:6px; color: rgba(242,245,247,.78); font-weight:850}

@media (max-width: 720px){ .wm__grid{grid-template-columns: 1fr 1fr;} }
@media (max-width: 520px){ .wm__grid{grid-template-columns: 1fr;} }
.modal__actions{
  padding: 12px 16px 16px 16px;
  display:flex;
  justify-content:flex-end;
}
.modal__btn{
  border:0;
  cursor:pointer;
  padding: 12px 16px;
  border-radius: 16px;
  font-weight:900;
  color: rgba(255,255,255,.94);
  background: linear-gradient(180deg, rgba(120,180,120,.95), rgba(95,152,95,.98));
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
}
.modal__btn:hover{filter:saturate(1.05); transform: translateY(-1px)}
.modal__btn:active{transform: translateY(0px)}


/* Autosearch dropdown */
.picker__combo{position:relative; flex:1; display:flex; align-items:center}
.picker__input{
  width:100%;
  padding-right: 22px;
}
.picker__drop{
  position:absolute;
  z-index: 60;
  left: 14px;
  right: 14px; /* full width (no button) */
  top: calc(100% + 10px);
  transform-origin: top center;
  max-height: 320px;
  overflow:auto;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(12,16,18,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 26px 70px rgba(0,0,0,.55);
  padding: 8px;
}
.drop__item{
  padding: 12px 12px;
  border-radius: 14px;
  cursor:pointer;
  color: rgba(242,245,247,.92);
  font-weight:700;
  border:1px solid transparent;
}
.drop__item:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
.drop__item.is-active{
  background: rgba(95,152,95,.20);
  border-color: rgba(95,152,95,.35);
}
.drop__empty{
  padding: 12px 12px;
  color: rgba(242,245,247,.65);
  font-weight:700;
}
@media (max-width: 680px){
  .picker__drop{right: 124px;}
}
@media (max-width: 480px){
  .picker__drop{left: 10px; right: 118px;}
}

}

/* Card with duplicates (FIO + org) */
.orgCard{
  width: 100%;
  max-width: 560px;
  margin: 10px auto 0;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  min-height: 0;
}
.orgCard__head{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.orgCard__title{font-weight:900;letter-spacing:.2px}
.orgCard__sub{color: rgba(242,245,247,.70); font-weight:700; font-size: 12px; line-height:1.45}
.orgCard__list{
  /* responsive scroll area: grows on large screens, but never forces the hero panel to stretch */
  max-height: min(44vh, 420px);
  overflow:auto;
  padding-right: 0;
  display:grid;
  gap:10px;
}

/* shorter viewports: keep list compact */
@media (max-height: 900px){
  .orgCard__list{max-height: min(34vh, 300px);}
  .hero__content{padding: 22px 14px 18px; gap:16px;}
  .orgCard{padding: 12px;}
}

.person{
  cursor:pointer;
  display:grid;
  /* FIO + section (compact) */
  grid-template-columns: minmax(360px, 1fr) minmax(160px, 220px);
  gap:10px;
  align-items:stretch;
}
.person__box{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  border-radius: 16px;
  padding: 12px;
  min-height: 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}
.person__cap{
  font-size:11px;
  letter-spacing:.22px;
  color: rgba(242,245,247,.60);
  font-weight:850;
  text-transform:none;
}
.person__box--meta{
  text-align:left;
  align-items:flex-start;
}
.person:hover .person__box{background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.22)}
.person.is-active .person__box{border-color: rgba(95,152,95,.55); background: rgba(95,152,95,.14)}
.person__fio{font-weight:900;color: rgba(242,245,247,.95); line-height:1.2}
.person__org{color: rgba(242,245,247,.92); font-weight:900; font-size:13px; line-height:1.2}

.person__pos{margin-top:6px; color: rgba(242,245,247,.72); font-weight:800; font-size:12px; line-height:1.25}
.person__position{color: rgba(242,245,247,.92); font-weight:900; font-size:12px; line-height:1.2}
.person__section{color: rgba(242,245,247,.86); font-weight:900; font-size:12px; line-height:1.2}
.person__section{

}

.person__metaRow{display:flex; gap:10px; align-items:baseline; justify-content:center}
.person__label{display:none; font-size:11px; letter-spacing:.2px; color: rgba(242,245,247,.55); font-weight:800}
.person__value{display:inline-block}
@media (max-width: 980px){
  .person{grid-template-columns: 1fr 1fr; gap:8px}
  .person__box--fio{grid-column:1 / -1; text-align:left; align-items:stretch}
  .person__box--meta{ text-align:left; align-items:stretch }
}

@media (max-width:520px){
  .person{grid-template-columns:1fr; gap:8px}
  .person__box{padding:12px}
  .person__box--meta{ text-align:left; align-items:stretch }
  .person__org{font-size:14px}
}

.orgCard__list::-webkit-scrollbar{width:10px}
.orgCard__list::-webkit-scrollbar-thumb{background: rgba(255,255,255,.12); border-radius: 999px}
.orgCard__list::-webkit-scrollbar-track{background: rgba(255,255,255,.04); border-radius: 999px}

/* orgCard search */
.orgCard__toolbar{display:flex; justify-content:flex-end; margin-bottom:10px}
.orgCard__search{
  width: min(520px, 100%);
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: rgba(242,245,247,.92);
  outline:none;
  padding: 12px 12px;
  border-radius: 16px;
  font-weight:800;
}
.orgCard__search:focus{
  border-color: rgba(95,152,95,.40);
  box-shadow: 0 0 0 4px rgba(95,152,95,.14);
}


/* =========================
   HERO AI VIDEO BACKGROUND
   ========================= */
.hero__bg{
  position:absolute;
  inset:0;

  z-index:-1;
}

.hero__bg-video{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: saturate(1.1) contrast(1.05);
}

.hero__bg-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 40% at 50% 30%, rgba(20,60,40,.35), transparent 70%),
    linear-gradient(180deg, rgba(5,10,12,.55), rgba(5,10,12,.85));
}


/* =========================
   HERO VIDEO FINAL FIX
   ========================= */
.hero{
  position: relative;

}

/* Video layer */
.hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Shade above video */
.hero__shade{
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Content above everything */
.hero__content{
  position: relative;
  z-index: 2;
}


/* =========================
   HERO VIDEO ROBUST LOOP FIX
   ========================= */
.hero__bg-video{
  pointer-events:none;
  will-change: transform;
}


/* =========================
   HERO GIF BACKGROUND (AI)
   ========================= */
.hero{ position: relative; overflow:hidden; }

.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;

  max-height: calc(100vh - 48px);
  display:flex;
  flex-direction:column;
}
.modal__body{flex: 1 1 auto; overflow:auto; padding:14px 16px 6px 16px}

@media (max-width: 520px){
  .modal.is-open{padding: 18px 10px;}
  .modal__panel{width: min(96vw, 520px); border-radius: 20px;}
  .modal__head{padding:14px 14px 8px 14px;}
  .modal__body{padding:12px 14px 6px 14px;}
  .modal__actions{padding: 10px 14px 14px 14px;}
}


.hero__bg-gif{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05) contrast(1.05);
}

.hero__shade{
  position:absolute;
  inset:0;
  z-index:1;
}

.hero__content{
  position:relative;
  z-index:2;
}


/* =========================
   HERO WEBM BACKGROUND (AI)
   ========================= */
.hero__bg-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}


/* Welcome modal structured content */
.wm{display:flex; flex-direction:column; gap:12px;}
.wm__fio{font-weight:950; font-size:18px; letter-spacing:.2px;}
.wm__grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px;}
.wm__card{border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); border-radius:14px; padding:10px 12px;}
.wm__label{font-weight:900; color: rgba(242,245,247,.70); font-size:12px; text-transform:uppercase; letter-spacing:.08em;}
.wm__value{margin-top:6px; font-weight:900; color: rgba(242,245,247,.96); line-height:1.2; word-break:break-word;}
.wm__status{border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); border-radius:14px; padding:10px 12px;}
.wm__statusTitle{font-weight:950;}
.wm__lines{margin-top:8px; display:flex; flex-direction:column; gap:6px;}
.wm__line{color: rgba(242,245,247,.78); font-weight:850;}
@media (max-width:720px){ .wm__grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .wm__grid{grid-template-columns:1fr;} }


/* Touch-target helpers */
.modal__x{width:var(--tap);height:var(--tap);}
.modal__btn{min-height:var(--tap);}
.drop__item{min-height:var(--tap); display:flex; align-items:center;}
button, .cta{min-height:var(--tap);}

@media (max-width: 720px){
  .topbar__inner{
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 12px 14px;
  }
  .topbar__logo{width:56px;height:56px}
  .topbar__title{
    grid-column: 1 / 3;
    grid-row: 2;
    max-width: min(92vw, 720px);
    font-size: 16px;
    /* allow full title; font-size is auto-fitted by JS */
    display:block;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
}
  .topbar__tools{
    grid-column: 2;
    grid-row: 1;
    justify-self:end;
  }
}

/* ===== OrgList usability: filters + suggestions ===== */
.orgCard__toolbar{display:flex; flex-direction:column; gap:10px}

.orgCard__filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.chipSelect{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(12,16,18,.72);
  color: rgba(242,245,247,.96);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 850;
  min-height: var(--tap);
  max-width: 100%;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

/* dropdown options (improves readability on bright/transparent backgrounds) */
.chipSelect option{
  background: #0b1114;
  color: rgba(242,245,247,.96);
}

.orgCard__suggest{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,12,14,.55);
  border-radius: 16px;
  padding: 6px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.suggest__item{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  padding: 10px 10px;
  border-radius: 14px;
  cursor:pointer;
  border:1px solid transparent;
  min-height: var(--tap);
}

.suggest__item:hover{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10);}
.suggest__fio{font-weight:950; color: rgba(242,245,247,.96); line-height:1.15;}
.suggest__meta{font-weight:800; color: rgba(242,245,247,.72); font-size: 12px; white-space:nowrap;}
.suggest__tags{margin-top:6px; display:flex; flex-wrap:wrap; gap:6px;}

.suggest__tag{
  font-size:12px;
  font-weight:850;
  color: rgba(242,245,247,.82);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: 4px 8px;
}

@media (max-width: 520px){
  .orgCard__filters{gap:6px}
  .chipSelect{flex:1 1 100%}
  .suggest__item{grid-template-columns: 1fr}
  .suggest__meta{white-space:normal}
}


/* V13.2: Topbar title — JS auto-fits font-size so the full text stays within 2 lines. */
.topbar__title{
  text-wrap: balance;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Subtle scrollbars (WebKit + Firefox) */
:root{
  --sb-thumb: rgba(242,245,247,.18);
  --sb-thumb-hover: rgba(242,245,247,.28);
  --sb-track: rgba(0,0,0,.10);
}
*{ scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{
  background: var(--sb-track);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,0); /* creates padding */
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background: var(--sb-thumb-hover); }
*::-webkit-scrollbar-corner{ background: transparent; }

/* Make inner scroll areas even cleaner */
.orgCard__list{ scrollbar-gutter: stable both-edges; }

/* =========================
   Vx: TOPBAR FONT + BRIGHTER BG VIDEO
   This block MUST stay at the very end of the file.
   ========================= */

/* Brighter background video (tune values here) */
.hero__bg-video{
  filter: brightness(1.22) contrast(1.02) saturate(1.10) !important;
}

/* Slightly lighter shade overlay so video is visible */
.hero__shade{
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.18),
    rgba(0,0,0,0.14) 45%,
    rgba(0,0,0,0.10)
  ) !important;
}

/* Topbar typography refresh (no external fonts required) */
.topbar,
.topbar__title,
.topbar .tb-chip,
.topbar .tb-group{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.topbar__title{
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.topbar .tb-chip{
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* =========================
   Vx: FORCE VIDEO TO FILL hero__shade (no black bands)
   Reason: earlier rules set .hero__bg max-height and other constraints.
   This block MUST stay at the very end of the file.
   ========================= */
.hero,
.hero__shell{
  position: relative;
  z-index: 2;
}

.hero__bg,
.hero__shade{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100svh !important;   /* stable viewport on mobile */
  min-height: 100svh !important;
  max-height: none !important;
  overflow: hidden !important;
}

@supports (height: 100dvh){
  .hero__bg,
  .hero__shade{
    height: 100dvh !important; /* dynamic viewport where supported */
    min-height: 100dvh !important;
  }
}

.hero__bg{
  z-index: -3 !important;
  background: transparent !important;
}

.hero__shade{
  z-index: -2 !important;
  pointer-events: none;
}

/* Make the <video> behave like a real fullscreen background */
.hero__bg-video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Prevent container backgrounds from showing as "black band" */
body,
.hero{
  background: transparent !important;
}



/* =========================
   QHD modal override (force)
   Reason: base .modal__panel rule appears later and overrides earlier QHD block.
   ========================= */
@media (min-width: 2200px) and (max-width: 3199px){
  .modal.is-open{padding: 32px 20px !important;}
  .modal.is-open .modal__panel{
    width: min(1180px, 92vw) !important;
    border-radius: 28px !important;
    max-height: calc(100vh - 64px) !important;
  }
  .modal.is-open .modal__head{padding: 22px 22px 14px 22px !important;}
  .modal.is-open .modal__body{padding: 18px 22px 10px 22px !important;}
  .modal.is-open .modal__actions{padding: 14px 22px 22px 22px !important;}
  .modal.is-open .modal__title{font-size: clamp(22px, 0.8vw + 18px, 30px) !important;}
  .modal.is-open .modal__sub{font-size: clamp(15px, 0.35vw + 12px, 18px) !important;}
}



/* ===== QHD/General: Seamless dual-video ping-pong (no flash) ===== */
.hero__bg { background:#000; } /* in case first frame isn't ready */
.hero__bg-video{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity, transform;
  opacity: 0;
  transition: opacity 140ms linear;
}
.hero__bg-video.is-active{ opacity:1; }

/* ===== QR Dock (bottom-right) ===== */
.qrDock{
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  padding: 10px;
  border-radius: 18px;
  background: rgba(15, 19, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  text-decoration: none;
  color: #fff;
  transform: translateZ(0);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.qrDock:hover{ transform: translateY(-2px); }
.qrDock:active{ transform: translateY(-1px); }
.qrDock:hover .qrDock__img{ transform: scale(1.12); }
.qrDock:active .qrDock__img{ transform: scale(1.06); }
.qrDock:focus-visible{
  outline: 2px solid rgba(255,255,255,0.55);
  outline-offset: 3px;
}
.qrDock__label{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2px;
  line-height: 1.15;
  opacity: 0.92;
  max-width: 160px;
  white-space: nowrap;
}
.qrDock__img{
  width: clamp(72px, 5vw, 170px);
  height: clamp(72px, 5vw, 170px);
  border-radius: 14px;
  background: #fff;
  padding: clamp(6px, 0.42vw, 10px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  transform: translateZ(0);
  transition: transform 160ms ease;
  will-change: transform;
}
@media (max-width: 520px){
  .qrDock{ padding: 6px; border-radius: 14px; }
  .qrDock__label{ display:none; }
  .qrDock__img{ width: 56px; height: 56px; border-radius: 12px; padding: 5px; }
}

/* QR Dock: upscale for 2K/large displays (prevents "tiny" QR on 2560px wide screens) */
@media (min-width: 1800px) {
  .qrDock__img,
  .qrDock__qr {
    width: 170px;
    height: 170px;
  }
  .qrDock {
    right: 22px;
    bottom: 22px;
  }
}
@media (min-width: 2400px) {
  .qrDock__img,
  .qrDock__qr {
    width: 170px;
    height: 170px;
  }
  .qrDock {
    right: 26px;
    bottom: 26px;
  }
}

/* KK-only mode: hide language switch UI (RU remains in code/data for easy rollback) */
.langSwitch{ display:none !important; }

/* V14.0: Desktop sizing rules for topbar title */
@media (min-width: 1920px){
  .topbar__title{
    font-size: 35px !important;
    max-width: 100% !important;
    letter-spacing: 0px;
  }
  .topbar__inner{
    gap: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }
  :root{ --topbarH: 92px; }
}

@media (min-width: 2560px){
  .topbar__title{
    font-size: 40px !important;
    max-width: 100% !important;
    letter-spacing: 0px;
  }
  .topbar__inner{
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }
  :root{ --topbarH: 102px; }
}