/* ══════════════════════════════════════════════════════════════════════════
   20.10.2026 — ШАПКА КАБИНЕТА В СТИЛЕ ГЛАВНОЙ (требование хозяина:
   «сделай такой же крутой стиль кнопочек и hover-эффектов, как на главной.
   Весь стиль шапки такой же по вёрстке, в том числе полосочка при скролле»).

   ЭТАЛОН ГЛАВНОЙ (замеры computed style при 1280px):
     header.top        position sticky, height 76, bg rgba(15,15,20,.72),
                       backdrop saturate(140%) blur(10px), border 0,
                       transition background/box-shadow/backdrop .25s
     .top-in           padding 6px 24px, height 56
     .logo-mark        30x30, radius 9, border 1px #35354e,
                       bg linear-gradient(135deg, rgba(139,92,246,.13), rgba(249,115,22,.13)),
                       цвет иконки #8b5cf6
     .logo-text        18px / 700 / letter-spacing -.02em, точка — оранжевая
     .top-nav a        padding 8px 12px, radius 9, 14px, #9a9ab4,
                       hover: #fff + bg rgba(139,92,246,.16) + полоска-градиент снизу
     .btn-ghost        padding 9px 16px, radius 10, border 1px #35354e,
                       bg rgba(255,255,255,.02), 15px/600,
                       hover: border #8b5cf6 + bg violet-soft
     .btn-primary      bg #8b5cf6, radius 10, 15px/600,
                       box-shadow 0 6px 20px rgba(139,92,246,.22),
                       hover: bg violet-hi + shadow 0 10px 26px rgba(139,92,246,.3)
     .is-scrolled      bg rgba(13,13,18,.92) +
                       box-shadow 0 6px 24px rgba(0,0,0,.45), 0 1px 0 rgba(139,92,246,.12)
     .btn:active       transform translateY(1px)

   КАБИНЕТ ДО: .hd sticky, bg rgba(15,15,20,.86), blur 12, и ПОСТОЯННЫЙ
   border-bottom 1px rgba(255,255,255,.045) — полоска видна всегда, скролл-эффекта нет.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. КОРПУС ШАПКИ: как header.top главной ── */
.hd {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
  background: rgba(15, 15, 20, .72) !important;
  backdrop-filter: saturate(140%) blur(10px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(10px) !important;
  border-bottom: 0 !important;          /* полоски в покое НЕТ (как на главной) */
  box-shadow: none !important;
  padding: 10px 0 !important;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease !important;
}

/* после прокрутки — плотнее + тень + тонкая фиолетовая линия (через shadow) */
.hd.is-scrolled {
  background: rgba(13, 13, 18, .92) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45), 0 1px 0 rgba(139, 92, 246, .12) !important;
}

/* ── 2. ВНУТРЕННЯЯ ПОЛОСА: та же геометрия ── */
.hd .hd-in {
  min-height: 56px !important;
  height: auto !important;
  padding: 6px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

/* ── 3. ЛОГОТИП: 30px, градиентная плашка, фиолетовая иконка ── */
.hd .logo { gap: 9px !important; }
.hd .logo-mark {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  border: 1px solid #35354e !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, .13), rgba(249, 115, 22, .13)) !important;
  color: #8b5cf6 !important;
  display: grid !important;
  place-items: center !important;
}
.hd .logo-mark svg { width: 18px !important; height: 18px !important; }
.hd .logo-text {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: #ececf5 !important;
}
.hd .logo-text span { color: #f97316 !important; margin: 0 1px !important; }

/* ── 4. ПИЛЮЛИ-РАЗДЕЛЫ: hover как у top-nav главной ── */
.hd .nav-pill {
  position: relative !important;
  padding: 8px 12px !important;
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--muted, #9a9ab0) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  transition: color .18s ease, background .18s ease, border-color .18s ease !important;
}
.hd .nav-pill:hover,
.hd .nav-pill:focus-visible {
  color: #fff !important;
  background: rgba(139, 92, 246, .16) !important;
  border-color: transparent !important;
  outline: none !important;
}
/* градиентная полоска снизу при наведении (фиолет → оранж) */
.hd .nav-pill::after {
  content: "" !important;
  position: absolute !important;
  left: 12px !important; right: 12px !important; bottom: 3px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, #8b5cf6, #f97316) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform .2s ease !important;
  pointer-events: none !important;
}
.hd .nav-pill:hover::after,
.hd .nav-pill:focus-visible::after { transform: scaleX(1) !important; }

/* активный раздел — полоска видна постоянно, цвет белый */
.hd .nav-pill.is-active {
  color: #fff !important;
  background: rgba(139, 92, 246, .16) !important;
  border-color: transparent !important;
}
.hd .nav-pill.is-active::after { transform: scaleX(1) !important; }

/* ── 5. КНОПКА АККАУНТА: как .btn-ghost главной ── */
.hd .acct-btn,
.hd .btn-icon {
  width: auto !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #35354e !important;
  background: rgba(255, 255, 255, .02) !important;
  color: #ececf5 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .25s cubic-bezier(.22,.61,.36,1),
              border-color .25s cubic-bezier(.22,.61,.36,1), color .25s ease !important;
}
.hd .acct-btn:hover,
.hd .btn-icon:hover {
  border-color: #8b5cf6 !important;
  background: rgba(139, 92, 246, .13) !important;
  color: #fff !important;
}
.hd .acct-btn:active,
.hd .btn-icon:active { transform: translateY(1px) !important; }
.hd .acct-btn .burger { width: 18px !important; height: 18px !important; }

/* ── 6. ПУНКТЫ МЕНЮ АККАУНТА: как pill-подсветка ── */
.hd .acct-item {
  border-radius: 9px !important;
  transition: background .18s ease, color .18s ease !important;
}
.hd .acct-item:hover {
  background: rgba(139, 92, 246, .16) !important;
  color: #fff !important;
}

/* ── 7. Якоря не прячутся под шапкой ── */
html { scroll-padding-top: 84px !important; }

@media (max-width: 880px) {
  .hd { background: rgba(13, 13, 18, .95) !important; padding: 8px 0 !important; }
  .hd .hd-in { padding: 6px 16px !important; }
  html { scroll-padding-top: 70px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   20.10.2026 v2 — ГЕОМЕТРИЯ ШАПКИ: убрать 88→76 и padding 0→6px.
   Замер показал: высота 88 (вместо 76), .hd-in padding 0px 24px (вместо 6px 24px).
   ПРИЧИНА: cabinet-css-v18 содержит `.hd .hd-in, .hd-in { min-height:68px !important;
   height:68px !important; padding:0 !important; }` — его !important приоритетнее по
   порядку подключения. Перебиваем более специфичным селектором с !important.
   ══════════════════════════════════════════════════════════════════════════ */

html body header.hd .hd-in {
  min-height: 56px !important;
  height: auto !important;
  padding: 6px 24px !important;
  box-sizing: border-box !important;
}

/* шапка = 10px padding сверху/снизу + 56px полоса = 76px, как на главной */
html body header.hd {
  padding: 10px 0 !important;
}

@media (max-width: 880px) {
  html body header.hd { padding: 8px 0 !important; }
  html body header.hd .hd-in { padding: 6px 16px !important; min-height: 52px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   20.10.2026 v3 — ПОБЕДА НАД КАСКАДОМ. Точная причина 88px вместо 76.
   В cabinet-css-v18-1910184323.css есть:
     header.hd > .wrap.hd-in, header.hd .hd-in, .hd-in {
       min-height:68px !important; height:68px !important; padding:0 !important; }
     header.hd .wrap.hd-in, header.hd .hd-in {
       padding:0 24px !important; }
   Специфичность `header.hd > .wrap.hd-in` = (0,3,2) — три КЛАССА (.hd, .wrap, .hd-in).
   Мой прежний `html body header.hd .hd-in` = (0,2,4) — четыре ТЕГА, два класса.
   При равных !important выигрывает БОЛЬШЕ КЛАССОВ, а не тегов.
   ПОЭТОМУ правило не применялось, хотя было в файле и селектор матчился.

   РЕШЕНИЕ: повторить их селектор ЦЕЛИКОМ и добавить себе класс/тег,
   чтобы специфичность была заведомо выше.
     .hd .wrap.hd-in → (0,2,0)... нужно больше: используем html body + три класса = (0,3,4).
   ══════════════════════════════════════════════════════════════════════════ */

html body header.hd > .wrap.hd-in,
html body header.hd .wrap.hd-in,
html body header.hd .hd-in,
html body .hd .hd-in {
  min-height: 56px !important;
  height: auto !important;
  padding: 6px 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

/* шапка: 10 + 56 + 10 = 76px, как на главной */
html body header.hd {
  padding: 10px 0 !important;
}

@media (max-width: 880px) {
  html body header.hd { padding: 8px 0 !important; }
  html body header.hd > .wrap.hd-in,
  html body header.hd .wrap.hd-in,
  html body header.hd .hd-in {
    padding: 6px 16px !important;
    min-height: 52px !important;
  }
}