/* === Tabs: ширина от родителя (без 100vw) === */

.container-sub-info { width: 100%; }
.head-sub-info      { width: 100%; margin: 8px 0 18px; background: #0f141c; border-bottom: 1px solid rgba(255,255,255,.08); }

/* полоса с вкладками */
.head-sub-info ul{
  display:flex; align-items:flex-end;
  gap:0; margin:0; padding:0 10px; height:56px; list-style:none;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.head-sub-info ul::-webkit-scrollbar{height:8px}
.head-sub-info ul::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:6px}

/* вкладка */
.head-sub-info .tab{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 16px; margin:8px 2px 0;
  text-decoration:none; white-space:nowrap;

  color:#cfd6e4; font-weight:700; font-size:14px; line-height:1;
  background: linear-gradient(180deg,#1a2230,#141b28);
  border:1px solid rgba(255,255,255,.07); border-bottom:none;
  border-top-left-radius:12px; border-top-right-radius:12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 12px rgba(0,0,0,.22);
  transition: background .15s ease, color .15s ease, transform .08s ease, border-color .15s ease, box-shadow .15s ease;
}
.head-sub-info .tab > span{line-height:1}

/* hover только для НЕактивных */
.head-sub-info .tab:not(.sel):hover,
.head-sub-info .tab:not(.sel):focus-visible{
  color:#ffffff; background: linear-gradient(180deg,#213044,#1a2435);
  border-color: rgba(255,255,255,.12); outline:none;
}
.head-sub-info .tab:active{ transform: translateY(1px); }

/* активная: светлая, контрастная, приподнята */
.head-sub-info .tab.sel{
  color:#0b0f18;
  background: linear-gradient(180deg,#ffffff,#eef4ff);
  border-color: rgba(17,24,39,.12);
  margin-top:6px; /* чуть выше остальных */
  box-shadow: 0 8px 20px rgba(59,130,246,.22), inset 0 0 0 1px rgba(255,255,255,.9);
  z-index:1;
}
/* фикс ховера активной */
.head-sub-info .tab.sel:hover,
.head-sub-info .tab.sel:focus-visible{
  color:#0b0f18; background: linear-gradient(180deg,#ffffff,#eef4ff); border-color: rgba(17,24,39,.12);
}
/* аккуратный «стык» снизу активной */
.head-sub-info .tab.sel::after{
  content:""; position:absolute; left:-1px; right:-1px; bottom:-1px; height:1px; background:#eef4ff;
}

/* контент */
.content-sub-info{ width:100%; max-width:100%; margin:12px 0 40px; }

/* типографика legal-контента (один набор, без дублей) */
.content-sub-info-page{
  color:#e3e8f2; font-size:16.5px; line-height:1.75; letter-spacing:.1px;
  word-wrap:break-word; overflow-wrap:anywhere; hyphens:auto;
}
.content-sub-info-page h2{
  position:relative; margin:28px 0 12px; padding-left:14px;
  font-weight:800; font-size:clamp(18px,1rem + .9vw,22px); line-height:1.25; color:#ffffff; letter-spacing:.2px;
}
.content-sub-info-page h2:first-child{ margin-top:0; }
.content-sub-info-page h2::before{
  content:""; position:absolute; left:0; top:.2em; bottom:.2em; width:4px; border-radius:4px;
  background:linear-gradient(180deg,#8ecaff,#5aa9ff);
}
.content-sub-info-page p{ margin:0 0 14px; }

/* ссылки */
.content-sub-info-page a{
  color:#8ecaff; text-decoration:underline; text-decoration-color:rgba(142,202,255,.55); text-underline-offset:2px;
  transition:color .15s ease, text-decoration-color .15s ease;
}
.content-sub-info-page a:hover{ color:#b9ddff; text-decoration-color:transparent; }

/* списки */
.content-sub-info-page ol{ counter-reset:item; list-style:none; margin:0 0 16px 0; padding:0; }
.content-sub-info-page ol > li{ counter-increment:item; position:relative; margin:8px 0 10px; padding-left:44px; }
.content-sub-info-page ol > li::before{
  content: counter(item) ".";
  position:absolute; left:0; top:.1em; width:36px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; color:#7dc3ff; background:rgba(125,195,255,.14);
  box-shadow:inset 0 0 0 1px rgba(125,195,255,.35); border-radius:8px;
}
.content-sub-info-page ul{ list-style:none; margin:0 0 16px 0; padding:0; }
.content-sub-info-page ul > li{ position:relative; margin:8px 0; padding-left:28px; }
.content-sub-info-page ul > li::before{
  content:""; position:absolute; left:6px; top:.72em; width:10px; height:10px; border-radius:50%;
  background:#7dc3ff; box-shadow:0 0 0 4px rgba(125,195,255,.16);
}
.content-sub-info-page li ul, .content-sub-info-page li ol{ margin-top:8px; }

/* таблицы/цитаты (по минимуму) */
.content-sub-info-page table{ width:100%; border-collapse:collapse; margin:16px 0; font-size:15px; }
.content-sub-info-page th, .content-sub-info-page td{ border:1px solid rgba(255,255,255,.1); padding:10px 12px; }
.content-sub-info-page th{ background:rgba(255,255,255,.06); color:#fff; text-align:left; }
.content-sub-info-page blockquote{
  margin:14px 0; padding:12px 14px; background:rgba(125,195,255,.08);
  border-left:4px solid #7dc3ff; color:#dbe7f7; border-radius:6px;
}

/* важное: strong не перекрашиваем в белый, чтобы не сливаться в светлой теме */
.content-sub-info-page strong{ color: inherit; font-weight:800; }
/* Альтернатива: мягкая подложка */
/* Emphasis — читаемо на любом фоне */
.content-sub-info-page em {
  color: inherit; /* не выбеляем текст */
  font-style: italic;
  text-decoration: underline dotted rgba(125,195,255,.6);
  text-underline-offset: 2px;
}
@media (prefers-color-scheme: light){
  .content-sub-info-page em {
    text-decoration-color: rgba(37,99,235,.55);
  }
}


.content-sub-info-page :last-child{ margin-bottom:0; }

/* адаптив */
@media (max-width:1024px){
  .head-sub-info ul{ height:52px; padding:0 8px; }
  .head-sub-info .tab{ height:46px; padding:0 14px; font-size:13.5px; }
}
@media (max-width:640px){
  .head-sub-info ul{ height:50px; }
  .head-sub-info .tab{ height:44px; padding:0 12px; font-size:13px; }
}

/* светлая системная схема */
@media (prefers-color-scheme: light){
  .head-sub-info{ background:#f5f7fb; border-bottom-color:rgba(0,0,0,.08); }
  .head-sub-info .tab{
    color:#334155; background: linear-gradient(180deg,#ffffff,#f2f5fb); border-color: rgba(0,0,0,.08);
  }
  .head-sub-info .tab:not(.sel):hover,
  .head-sub-info .tab:not(.sel):focus-visible{
    background: linear-gradient(180deg,#ffffff,#e9eef8); border-color: rgba(0,0,0,.12);
  }
  .head-sub-info .tab.sel{
    color:#0b0f18; background: linear-gradient(180deg,#ffffff,#eef4ff); border-color: rgba(0,0,0,.1);
  }
  .head-sub-info .tab.sel::after{ background:#eef4ff; }

  .content-sub-info-page{ color:#111827; }
  .content-sub-info-page h2{ color:#0b0f18; }
  .content-sub-info-page h2::before{ background:linear-gradient(180deg,#60a5fa,#3b82f6); }
  .content-sub-info-page a{ color:#2563eb; text-decoration-color:rgba(37,99,235,.5); }
  .content-sub-info-page a:hover{ color:#1d4ed8; }
  .content-sub-info-page th, .content-sub-info-page td{ border-color:rgba(0,0,0,.08); }
  .content-sub-info-page th{ background:#f3f4f6; color:#111827; }
  .content-sub-info-page blockquote{ background:#eef5ff; border-left-color:#3b82f6; color:#0f172a; }
  .content-sub-info-page strong{ color: inherit; } /* сохраняем читабельность в light */
}



/* --- FORCE ACTIVE TAB HIGHLIGHT --- */
.head-sub-info ul li > a.tab.sel {
  position: relative;
  color: #0b0f18 !important;                       /* тёмный текст */
  background: linear-gradient(180deg,#ffffff,#eef4ff) !important;
  border-color: rgba(17,24,39,.12) !important;
  border-bottom: none !important;
  margin-top: 6px;                                  /* чуть выше остальных */
  box-shadow:
    0 8px 20px rgba(59,130,246,.22),
    inset 0 0 0 1px rgba(255,255,255,.9) !important;
  z-index: 2;
}

.head-sub-info ul li > a.tab.sel > span {
  color: inherit !important;
}

/* неактивные ховеры, чтобы не перетёрли активную */
.head-sub-info ul li > a.tab:not(.sel):hover,
.head-sub-info ul li > a.tab:not(.sel):focus-visible {
  color:#ffffff !important;
  background: linear-gradient(180deg,#213044,#1a2435) !important;
  border-color: rgba(255,255,255,.12) !important;
  outline: none;
}

/* аккуратный шов снизу активной, если линия снизу перекрывает */
.head-sub-info ul li > a.tab.sel::after {
  content:"";
  position:absolute;
  left:-1px; right:-1px; bottom:-1px;
  height:1px;
  background:#eef4ff;
}

/* светлая системная схема */
@media (prefers-color-scheme: light){
  .head-sub-info ul li > a.tab.sel {
    color:#0b0f18 !important;
    background: linear-gradient(180deg,#ffffff,#eef4ff) !important;
    border-color: rgba(0,0,0,.1) !important;
    box-shadow:
      0 8px 18px rgba(59,130,246,.18),
      inset 0 0 0 1px rgba(255,255,255,.9) !important;
  }
  .head-sub-info ul li > a.tab.sel::after { background:#eef4ff; }
}


/* ==== LIGHT THEME: background-driven tabs ==== */
@media (prefers-color-scheme: light){
  /* фон полосы вкладок */
  .head-sub-info{
    background: linear-gradient(180deg,#ffffff 0%, #f5f7fb 100%) !important;
    border-bottom-color:#e5e7eb !important;
  }

  /* НЕактивные вкладки: серые чипсы */
  .head-sub-info ul li > a.tab{
    color:#475569 !important;
    background:#f1f5f9 !important;
    border-color:#e2e8f0 !important;
    box-shadow:none !important;
    margin-top:8px !important;
  }
  .head-sub-info ul li > a.tab:not(.sel):hover,
  .head-sub-info ul li > a.tab:not(.sel):focus-visible{
    background:#e2e8f0 !important;
    border-color:#cbd5e1 !important;
    color:#111827 !important;
  }

  /* АКТИВНАЯ: цветной бэкграунд + белый текст */
  .head-sub-info ul li > a.tab.sel{
    color:#ffffff !important;
    background: linear-gradient(180deg,#3b82f6,#2563eb) !important; /* поменяй на свой бренд-цвет при желании */
    border-color: transparent !important;
    margin-top:4px !important; /* чуть выше остальных */
    box-shadow: 0 10px 20px rgba(37,99,235,.22),
                inset 0 1px 0 rgba(255,255,255,.35) !important;
    position: relative;
    z-index: 2;
  }
  .head-sub-info ul li > a.tab.sel::after{ display:none !important; } /* убираем нижний шов */
}


/* ===== Headline (2257 / любые инфо-страницы) ===== */

/* контейнер и отступы */
.headline-sub-info { margin: 8px 0 16px; }
.headline-sub-info-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

/* цветная планка слева */
.headline-sub-info-box::before {
  content: "";
  width: 6px;
  height: 32px;
  border-radius: 4px;
  background: linear-gradient(180deg, #8ecaff, #5aa9ff);
  box-shadow: 0 0 0 2px rgba(125,195,255,.15);
}

/* сам заголовок */
.headline-sub-info .headline-sub-info-box h1,
.headline-sub-info-box h1 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.2;
  letter-spacing: .2px;
  color: #ffffff;
  text-wrap: balance;
}

/* тонкая линия под заголовком (необязательно, но красиво) */
.headline-sub-info .headline-sub-info-box h1::after,
.headline-sub-info-box h1::after {
  content: "";
  display: block;
  margin-top: 6px;
  width: 100%;
  max-width: 520px;
  height: 2px;
  background: linear-gradient(90deg, rgba(142,202,255,.9), rgba(142,202,255,0));
  border-radius: 2px;
}

/* светлая тема */
@media (prefers-color-scheme: light){
  .headline-sub-info-box::before {
    background: linear-gradient(180deg, #60a5fa, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59,130,246,.15);
  }
  .headline-sub-info .headline-sub-info-box h1,
  .headline-sub-info-box h1 { color: #0b0f18; }
  .headline-sub-info .headline-sub-info-box h1::after,
  .headline-sub-info-box h1::after {
    background: linear-gradient(90deg, rgba(59,130,246,.9), rgba(59,130,246,0));
  }
}

/* =============== DARK THEME (ручное включение) =============== */
body.dark .head-sub-info{
  background:#0f141c;
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.dark .head-sub-info ul{
  scrollbar-color: rgba(255,255,255,.14) transparent;
}
body.dark .head-sub-info ul::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
}

/* вкладки */
body.dark .head-sub-info ul li > a.tab{
  color:#cfd6e4;
  background: linear-gradient(180deg,#1a2230,#141b28);
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 12px rgba(0,0,0,.22);
  margin-top:8px;
}
body.dark .head-sub-info ul li > a.tab:not(.sel):hover,
body.dark .head-sub-info ul li > a.tab:not(.sel):focus-visible{
  color:#ffffff;
  background: linear-gradient(180deg,#213044,#1a2435);
  border-color: rgba(255,255,255,.12);
}
body.dark .head-sub-info ul li > a.tab.sel{
  color:#0b0f18 !important;
  background: linear-gradient(180deg,#ffffff,#eef4ff) !important;
  border-color: rgba(17,24,39,.12) !important;
  border-bottom:none !important;
  margin-top:6px !important;
  box-shadow: 0 8px 20px rgba(59,130,246,.22), inset 0 0 0 1px rgba(255,255,255,.9) !important;
  position:relative; z-index:2;
}
body.dark .head-sub-info ul li > a.tab.sel::after{
  content:""; position:absolute; left:-1px; right:-1px; bottom:-1px; height:1px; background:#eef4ff;
}

/* контент */
body.dark .content-sub-info{ max-width:100%; }
body.dark .content-sub-info-page{
  color:#e3e8f2;
}
body.dark .content-sub-info-page h2{ color:#ffffff; }
body.dark .content-sub-info-page h2::before{
  background:linear-gradient(180deg,#8ecaff,#5aa9ff);
}
body.dark .content-sub-info-page a{
  color:#8ecaff;
  text-decoration-color:rgba(142,202,255,.55);
}
body.dark .content-sub-info-page a:hover{
  color:#b9ddff; text-decoration-color:transparent;
}

/* списки / таблицы / цитаты */
body.dark .content-sub-info-page th,
body.dark .content-sub-info-page td{
  border:1px solid rgba(255,255,255,.10);
}
body.dark .content-sub-info-page th{
  background:rgba(255,255,255,.06); color:#fff;
}
body.dark .content-sub-info-page blockquote{
  background:rgba(125,195,255,.08);
  border-left:4px solid #7dc3ff;
  color:#dbe7f7;
}

/* эмфаза */
body.dark .content-sub-info-page strong{ color:inherit; font-weight:800; }
body.dark .content-sub-info-page em{
  color:inherit;
  font-style:italic;
  text-decoration: underline dotted rgba(125,195,255,.6);
  text-underline-offset:2px;
}

/* заголовок секции (headline) */
body.dark .headline-sub-info-box::before{
  background: linear-gradient(180deg, #8ecaff, #5aa9ff);
  box-shadow: 0 0 0 2px rgba(125,195,255,.15);
}
body.dark .headline-sub-info .headline-sub-info-box h1,
body.dark .headline-sub-info-box h1{ color:#ffffff; }
body.dark .headline-sub-info .headline-sub-info-box h1::after,
body.dark .headline-sub-info-box h1::after{
  background: linear-gradient(90deg, rgba(142,202,255,.9), rgba(142,202,255,0));
}

/* фокусы/доступность */
body.dark .head-sub-info .tab:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(59,130,246,.5);
}

/* адаптив (высоты/шрифты тёмная — как в базовых) */
@media (max-width:1024px){
  body.dark .head-sub-info ul{ height:52px; }
  body.dark .head-sub-info .tab{ height:46px; font-size:13.5px; }
}
@media (max-width:640px){
  body.dark .head-sub-info ul{ height:50px; }
  body.dark .head-sub-info .tab{ height:44px; font-size:13px; }
}