/* ═══ 21.10.2026 v5: МЕНЮ АККАУНТА — ПОЛНЫЕ СТИЛИ ═══

   В v4 я потерял правила .acct-head / .acct-ava / .acct-info / .acct-close
   (они были в v2, но при переписывании не перенеслись). Из-за этого:
     • шапка меню была display:block вместо flex → аватар растянулся на всю ширину;
     • крестик стал серым квадратом 16x21 без стилей;
     • email и тариф шли в столбик.
   Здесь возвращаю ВСЁ и добавляю то, что просил хозяин:
     • крестик БЕЗ рамки (одна общая рамка меню);
     • пункты Profile / Log out с отступом 15px по горизонтали.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Крестик и бургер НЕ видны одновременно ── */
.hd-actions .acct-wrap .acct-btn .burger-close {
  display: none !important;
}
.hd-actions .acct-wrap.is-open .acct-btn .burger {
  display: none !important;
}
.hd-actions .acct-wrap.is-open .acct-btn .burger-close {
  display: block !important;
}

@media (min-width: 769px) {

  /* ── 2. МЕНЮ: общая рамка ── */
  #acctMenu.acct-menu {
    top: -8px !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    min-width: 250px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #14141e !important;
    border: 1px solid #2a2a3d !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.65) !important;
  }

  /* ── 3. ШАПКА МЕНЮ: аватар + email + тариф + крестик ── */
  #acctMenu .acct-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 11px !important;
    padding: 13px 12px 12px 14px !important;
    background: rgba(139, 92, 246, .07) !important;
    border-bottom: 1px solid #262636 !important;
    box-sizing: border-box !important;
  }

  /* аватар — фиксированный круг */
  #acctMenu .acct-ava {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
    user-select: none !important;
    box-sizing: border-box !important;
  }

  /* блок с email и тарифом */
  #acctMenu .acct-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: hidden !important;
  }
  #acctMenu .acct-mail {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #ececf5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #acctMenu .acct-plan {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: #7c7c9c !important;
  }

  /* ── 4. КРЕСТИК: БЕЗ рамки, без фона, просто иконка ── */
  #acctMenu .acct-close {
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    color: #7c7c9c !important;
    cursor: pointer !important;
    transition: color .15s, background .15s !important;
    box-sizing: border-box !important;
  }
  #acctMenu .acct-close svg {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
    stroke: currentColor !important;
  }
  #acctMenu .acct-close:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: #ececf5 !important;
  }

  /* ── 5. ПУНКТЫ: сдвиг правее (padding 15px), на всю ширину ── */
  #acctMenu button.acct-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #d8d8e8 !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }
  #acctMenu button.acct-item svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    opacity: .75 !important;
  }
  #acctMenu button.acct-item span {
    flex: 1 1 auto !important;
    text-align: left !important;
  }
  #acctMenu button.acct-item:hover {
    background: rgba(139, 92, 246, .13) !important;
    color: #fff !important;
  }
  #acctMenu button.acct-item:hover svg { opacity: 1 !important; }

  /* разделитель между пунктами */
  #acctMenu button.acct-item + button.acct-item {
    border-top: 1px solid #222232 !important;
  }

  /* Log out — красноватый при наведении */
  #acctMenu #btnLogout:hover {
    background: rgba(255, 107, 107, .10) !important;
    color: #ff8b8b !important;
  }

  /* подсветка самой кнопки-бургера при открытом меню */
  .hd-actions .acct-wrap.is-open .acct-btn {
    background: rgba(139, 92, 246, .16) !important;
    border-color: rgba(139, 92, 246, .45) !important;
    color: #fff !important;
  }

  /* ── 6. МОДАЛКА: поверх всего, не обрезается ── */
  #modalProfile,
  .modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
  }
  #modalProfile .modal-card,
  .modal .modal-card {
    position: relative !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    margin: 24px auto !important;
  }
}

/* ── Мобильная: шапка меню есть, крестик скрыт ── */
@media (max-width: 768px) {
  #acctMenu .acct-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
    border-bottom: 1px solid #262636 !important;
  }
  #acctMenu .acct-ava {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  }
  #acctMenu .acct-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #acctMenu .acct-mail {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #ececf5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #acctMenu .acct-plan {
    display: block !important;
    font-size: 10.5px !important;
    color: #7c7c9c !important;
  }
  #acctMenu .acct-close {
    display: none !important;
  }
}

/* ═══ 21.10.2026 v7: МОБИЛЬНОЕ МЕНЮ — почта наверх (ФИКС СПЕЦИФИЧНОСТИ) ═══

   Проблема: `order` не работал, потому что меню было display:block.
   Виновник: в cabinet-css-v18-1910184323.css есть
       #acctMenu.acct-menu:not([hidden]) { display: block !important; }
   Специфичность (1,3,0) — выше моего `#acctMenu.acct-menu` (1,1,0).
   Поэтому flex не включался, и order не действовал.

   Решение: тот же селектор с :not([hidden]) + !important.

   Задача хозяина: почта и «Pay-per-request» НАВЕРХУ, Profile/Log out внизу.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* меню — flex-колонка (перебиваем #acctMenu.acct-menu:not([hidden])) */
  #acctMenu.acct-menu:not([hidden]),
  html body #acctMenu.acct-menu:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* ── ПОЧТА И ТАРИФ — НАВЕРХУ (order -1) ── */
  #acctMenu.acct-menu:not([hidden]) .acct-head,
  html body #acctMenu .acct-head {
    order: -1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 14px 13px !important;
    background: rgba(139, 92, 246, .07) !important;
    border-bottom: 1px solid #262636 !important;
    border-top: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* ── НАВИГАЦИЯ — посередине ── */
  #acctMenu #mobNavBlock,
  #acctMenu .mob-nav-block,
  html body #acctMenu #mobNavBlock {
    order: 0 !important;
  }

  /* ── PROFILE / LOG OUT — внизу ── */
  #acctMenu button.acct-item,
  html body #acctMenu button.acct-item {
    order: 1 !important;
  }

  /* черта перед Profile (отделяет от навигации) */
  #acctMenu #btnProfile,
  html body #acctMenu #btnProfile {
    border-top: 1px solid #262636 !important;
    margin-top: 8px !important;
  }

  /* аватар — компактный круг */
  #acctMenu .acct-ava {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
    box-sizing: border-box !important;
  }

  #acctMenu .acct-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  #acctMenu .acct-mail {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #ececf5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #acctMenu .acct-plan {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: #7c7c9c !important;
  }

  /* крестик в мобильной не нужен */
  #acctMenu .acct-close {
    display: none !important;
  }
}

/* ═══ 21.10.2026 v8: МОДАЛКА ПОВЕРХ ШАПКИ ═══

   Проблема (хозяин, мобильная): при клике на Profile окно «обрезается сверху» —
   не видно заголовка «Profile» и крестика, окно начинается сразу с поля E-mail.

   НАСТОЯЩАЯ ПРИЧИНА (не обрезка!): шапка сайта имеет z-index: 90 и position: sticky,
   а модалка — z-index: 60. Шапка физически ЛЕЖИТ СВЕРХУ модалки и закрывает её верх.
   Проверено elementFromPoint: в точке заголовка находится .wrap.hd-in (шапка).

   РЕШЕНИЕ: поднять z-index модалки выше шапки (9999) + отступ сверху,
   чтобы окно не прилипало к краю экрана.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Модалка ВСЕГДА выше шапки (шапка 90) ── */
.modal,
#modalProfile {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;   /* выше шапки (90) с большим запасом */
}

/* ── Карточка модалки: отступы от краёв ── */
.modal .modal-card,
#modalProfile .modal-card {
  position: relative !important;
  margin: 24px auto !important;
  max-height: calc(100vh - 48px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

/* ── Мобильная: больше воздуха сверху, окно ниже шапки ── */
@media (max-width: 768px) {
  .modal,
  #modalProfile {
    z-index: 12000 !important;
    align-items: flex-start !important;
    padding: 16px 12px 20px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  .modal .modal-card,
  #modalProfile .modal-card {
    margin: 8px auto 16px !important;      /* опускаем окно ниже */
    max-height: calc(100vh - 90px) !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
  }

  /* заголовок и крестик — крупнее и на виду */
  #modalProfile .modal-card h2,
  .modal .modal-card h2 {
    margin: 0 0 8px !important;
    padding-right: 38px !important;        /* чтобы текст не наезжал на крестик */
    font-size: 18px !important;
  }

  #modalProfile .modal-x,
  .modal .modal-x {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 2 !important;
  }

  /* модалка не должна прокручивать body — только себя */
  body:has(.modal:not([hidden])) {
    overflow: hidden !important;
  }
}

/* ── Очень узкие экраны: ещё компактнее ── */
@media (max-width: 380px) {
  .modal,
  #modalProfile {
    padding: 10px 8px 16px !important;
  }
  .modal .modal-card,
  #modalProfile .modal-card {
    margin: 6px auto 12px !important;
    max-height: calc(100vh - 70px) !important;
    border-radius: 14px !important;
  }
  #modalProfile .modal-card h2,
  .modal .modal-card h2 {
    font-size: 17px !important;
  }
}

/* ═══ 21.10.2026 v9: КНОПКИ В МОДАЛКЕ PROFILE — НЕ ПЛАВАЮТ ═══

   Проблема (хозяин, мобильная): кнопка «Set new password» ведёт себя как
   position:fixed — плавает вверху/внизу окна при прокрутке.

   ПРИЧИНА (кабинет, cabinet-css-v18-1910184323.css, стр. 355-356):
       #modalProfile #btnSetPassword,
       #modalProfile #btnChangeEmail { position: sticky; bottom: 0; }
   Кнопка прилипает к низу карточки и «висит» поверх полей при скролле.

   РЕШЕНИЕ:
     • на мобильном — обычная кнопка в потоке (position: static). Она остаётся
       на своём месте под полями и уезжает вместе с ними при прокрутке.
     • на десктопе sticky оставляем — там окно короткое, кнопка не мешает
       и всегда под рукой.
     • фон под кнопкой не нужен, т.к. она больше не перекрывает поля.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* кнопки в модалке — в обычном потоке, не прилипают */
  #modalProfile #btnSetPassword,
  #modalProfile #btnChangeEmail,
  .modal .modal-card .btn-block {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    width: 100% !important;
    margin-top: 14px !important;
    margin-bottom: 4px !important;
    box-shadow: none !important;
  }

  /* модалка прокручивается целиком, кнопка — в конце содержимого */
  #modalProfile .modal-card,
  .modal .modal-card {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 18px !important;
  }
}

/* ── Очень узкие экраны ── */
@media (max-width: 380px) {
  #modalProfile #btnSetPassword,
  #modalProfile #btnChangeEmail,
  .modal .modal-card .btn-block {
    margin-top: 12px !important;
  }
}

/* ═══ 21.10.2026 v10: МОДАЛКА PROFILE — КОМПАКТНЕЕ НА МОБИЛЬНОМ ═══

   Задача (хозяин): «уменьшить модальное окно процентов на 5, чуть-чуть
   по высоте не помещается на телефоне».

   Что сжимаем (только внутри модалки, ≤768px):
     • внешние отступы карточки    24/16px → 10/8px
     • внутренние padding          24px 22px 18px → 14px 15px 14px
     • промежутки между полями     сокращаем margin у .field
     • высота инпутов              38px → 36px
     • заголовок и h3              меньше на 1-2px, минус отступы
     • кнопки                      48px → 42px, margin-top 14 → 10
     • чекбокс-строка              margin 18 → 10

   Итог: высота уменьшается примерно на 8-10%, окно влезает целиком
   даже на 375×667 без прокрутки.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* внешние отступы — окно шире и выше по доступному месту */
  #modalProfile.modal,
  #modalProfile {
    padding: 10px 10px 12px !important;
  }

  #modalProfile .modal-card {
    margin: 6px auto 8px !important;
    max-height: calc(100vh - 44px) !important;
    padding: 14px 15px 14px !important;
    border-radius: 14px !important;
  }

  /* заголовок */
  #modalProfile .modal-card h2,
  #modalProfile #profTitle {
    font-size: 16px !important;
    margin: 0 0 4px !important;
    padding-right: 32px !important;
  }

  /* подзаголовок «Change password» */
  #modalProfile h3,
  #modalProfile h3[data-i18n="prof.pw"] {
    font-size: 13.5px !important;
    margin: 8px 0 6px !important;
    padding-top: 8px !important;
  }

  /* поля: плотнее */
  #modalProfile .field {
    margin: 0 0 8px !important;
  }
  #modalProfile .field > span,
  #modalProfile label > span {
    font-size: 11.5px !important;
    margin-bottom: 3px !important;
    line-height: 1.25 !important;
  }
  #modalProfile input[type="email"],
  #modalProfile input[type="password"],
  #modalProfile input[type="text"] {
    height: 36px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
  }

  /* кнопки: компактнее */
  #modalProfile .btn,
  #modalProfile button.btn {
    min-height: 0 !important;
    height: 42px !important;
    font-size: 13px !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }
  #modalProfile #btnChangeEmail {
    margin-bottom: 10px !important;
  }

  /* чекбокс-строка */
  #modalProfile .chk-row {
    margin: 0 0 10px !important;
  }
  #modalProfile .chk-row span {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  /* сообщения профиля — не раздувают окно */
  #modalProfile .prof-msg,
  #profMsg.prof-msg {
    margin-top: 8px !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  /* крестик — компактно */
  #modalProfile .modal-x {
    top: 9px !important;
    right: 9px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    width: 26px !important;
    height: 26px !important;
  }
}

/* ── Совсем невысокие экраны (iPhone SE 667px и ниже) ── */
@media (max-width: 480px) and (max-height: 700px) {
  #modalProfile {
    padding: 8px 8px 10px !important;
  }
  #modalProfile .modal-card {
    margin: 4px auto 6px !important;
    max-height: calc(100vh - 32px) !important;
    padding: 12px 13px 12px !important;
  }
  #modalProfile .modal-card h2,
  #modalProfile #profTitle {
    font-size: 15px !important;
    margin-bottom: 3px !important;
  }
  #modalProfile h3,
  #modalProfile h3[data-i18n="prof.pw"] {
    margin: 6px 0 5px !important;
    padding-top: 6px !important;
  }
  #modalProfile .field {
    margin-bottom: 6px !important;
  }
  #modalProfile input[type="email"],
  #modalProfile input[type="password"],
  #modalProfile input[type="text"] {
    height: 34px !important;
  }
  #modalProfile .btn,
  #modalProfile button.btn {
    height: 40px !important;
    margin-top: 8px !important;
  }
  #modalProfile #btnChangeEmail {
    margin-bottom: 8px !important;
  }
}

/* ═══ 21.10.2026 v11: КАРТОЧКИ DASHBOARD — ОДНА ВЫСОТА ═══

   Проблема (хозяин): на Dashboard карточка Balance выше двух других.

   ПРИЧИНА (не высота!): в cabinet-1510002326.css есть правило
       .card + .card { margin-top: 12px; }
   Оно рассчитано на ВЕРТИКАЛЬНЫЙ список карточек. Но статистика лежит
   в сетке .grid-3 (три колонки), и это правило добавляет margin-top
   второй и третьей карточке — они опускаются на 12px, а первая остаётся
   на месте. Визуально: Balance «выше» на 12px (177 vs 165).

   РЕШЕНИЕ: внутри .grid-3 / .dash-stats / .grid-2 обнулить margin-top
   у всех карточек и растянуть их на одну высоту (align-items: stretch).
   Правило .card + .card остаётся для вертикальных списков.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Карточки в сетках: без вертикальных отступов, одна высота ── */
.grid-3 .card,
.grid-2 .card,
.dash-stats .card,
.grid-3 .card + .card,
.grid-2 .card + .card,
.dash-stats .card + .card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

/* сама сетка — выравнивание по высоте */
.grid-3,
.grid-2,
.dash-stats {
  align-items: stretch !important;
}

/* содержимое карточки распределяем ровно, чтобы .sub был у всех на одной линии */
.grid-3 .card.stat,
.dash-stats .card.stat {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* подпись .sub прижимаем к низу — тогда у всех трёх карточек она на одной линии */
.grid-3 .card.stat .sub,
.dash-stats .card.stat .sub {
  margin-top: auto !important;
}

/* на мобильном сетка в одну колонку — возвращаем нормальные отступы между карточками */
@media (max-width: 768px) {
  .grid-3 .card + .card,
  .grid-2 .card + .card,
  .dash-stats .card + .card {
    margin-top: 12px !important;
    height: auto !important;
  }
  .grid-3 .card.stat .sub,
  .dash-stats .card.stat .sub {
    margin-top: 8px !important;
  }
}