/* ==========================================================================
 * SW-ACC — ПРЕМИАЛЬНАЯ ПАНЕЛЬ АККАУНТА В ШАПКЕ ПК
 * --------------------------------------------------------------------------
 * Один цельный модуль интерфейса вместо деревянной картинки и отдельных кнопок:
 *
 *   ┌───────────────────────────────────────────────────────────────────────┐
 *   │ ◈ (ава) Ник           │ ◇ 189 ₽  [✦ Пополнить] │ Покупки 63 … Выйти    │
 *   └───────────────────────────────────────────────────────────────────────┘
 *
 * Иерархия акцентов:
 *   1) профиль, баланс, «Пополнить»  — золото, объём, свечение;
 *   2) разделы кабинета              — графитовые капсулы с золотым откликом;
 *   3) «Выйти»                       — приглушённая, спорит по акценту только
 *                                      при наведении (тёплый красный).
 *
 * Все классы живут в namespace .sw-acc* и не задевают глобальные стили.
 * Класс .profile-frame оставлен у контейнера намеренно: на нём держится сетка
 * строки шапки (css/header-profile.css, селекторы :has(.profile-frame)).
 * !important оставлен только там, где без него не обойтись — тема объявляет
 * те же свойства с !important:
 *   background, box-shadow, backdrop-filter, filter  →  css/profile.css,
 *   min-height строки шапки и её поля               →  css/header-profile.css,
 *   transform в prefers-reduced-motion              →  бьёт :hover-трансформы.
 * Всё остальное берётся точностью селектора и порядком загрузки файла.
 *
 * Откат дизайна: sw-shops-header-backup-v2-before-premium.zip (версия до
 * этой доработки) или sw-shops-header-OLD-design-backup.zip (деревянная
 * версия). Подключается после css/header-profile.css.
 * ========================================================================== */

@media (min-width: 1101px) {

  /* ======================================================================
   * 1. СТРОКА ШАПКИ: у вошедшего счётчики сайта не показываются (они в
   *    разметке только для гостей), поэтому панель стоит по центру строки.
   *    Высоту строки задаём свою: тема держит min-height 196px и поля 28px
   *    под деревянную панель — с новой компактной панелью столько воздуха
   *    не нужно, иначе сверху и снизу остаются большие пустые полосы.
   * ====================================================================== */
  html body .header__second:has(.profile-frame):has(.sw-acc) {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    column-gap: 0;
    min-height: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* ======================================================================
   * 2. КОРПУС ПАНЕЛИ — одна аккуратная рамка, без «рамки в рамке»
   *    Три слоя фона (тёплое свечение сверху-слева, холодный блик справа,
   *    графитовый объём) и мягкая тень. Внутренней второй рамки нет: раньше
   *    она давала эффект обводки в обводке.
   * ====================================================================== */
  html body .header__second:has(.profile-frame) .profile-frame.sw-acc {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 10px 16px;
    /* на всю ширину строки: панель не уедет на вторую строку, даже если
       рядом когда-нибудь снова появятся счётчики сайта */
    grid-column: 1 / -1;
    justify-self: center;
    align-self: center;
    /* Светлое стекло: на тёмной шапке чистый чёрный (как на /sell поверх
       светлого арта) читался как «просто тёмный», поэтому здесь светлая плёнка
       с той же прозрачностью и тем же размытием 15px. */
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .035) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .16),
      0 8px 32px rgba(0, 0, 0, .28) !important;
    -webkit-backdrop-filter: blur(15px) saturate(1.05) !important;
    backdrop-filter: blur(15px) saturate(1.05) !important;
    /* filter тема задаёт с !important (деревянное свечение) — гасим тем же приёмом */
    filter: none !important;
    clip-path: none;
    overflow: visible;
    font-family: Arial, sans-serif;
  }

  /* Деревянная маска-слой темы отключена: ::before нужен только для этого */
  html body .header__second .profile-frame.sw-acc::before {
    content: none;
    display: none;
    background: none;
    border: 0;
    -webkit-mask: none;
    mask: none;
  }

  /* Единственная внутренняя линия — тонкий световой штрих сверху */
  html body .header__second .profile-frame.sw-acc::after {
    content: "";
    position: absolute;
    top: 0;
    left: 16%;
    right: 16%;
    height: 1px;
    z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(255, 226, 160, .32), transparent);
    pointer-events: none;
  }

  /* Дети панели всегда выше декоративных слоёв */
  .sw-acc > * { position: relative; z-index: 2; }

  /* ======================================================================
   * 3. ПРОФИЛЬ: аватар в золотой оправе, имя, статусный ID, настройки
   * ====================================================================== */
  .sw-acc__id {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .sw-acc__avatar {
    position: relative;
    flex: 0 0 auto;
    display: block;
    width: 46px;
    height: 46px;
    padding: 2px;                       /* толщина золотой оправы */
    border-radius: 12px;
    background: linear-gradient(145deg, #f9e2a6 0%, #d3a24a 42%, #8a6320 78%, #c99a3f 100%);
    box-shadow:
      0 8px 18px -12px rgba(0, 0, 0, .95),
      0 0 16px -8px rgba(255, 190, 80, .5);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }

  .sw-acc__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: 10px;                /* внутри оправы */
    background: #14141a;
  }

  /* Внутри только мягкая виньетка и лёгкий отблеск — без второго кольца */
  .sw-acc__avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 9px rgba(0, 0, 0, .5);
    background: linear-gradient(160deg, rgba(255, 255, 255, .14) 0%, transparent 42%);
    pointer-events: none;
  }

  .sw-acc__avatar:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
      0 14px 26px -12px rgba(0, 0, 0, .95),
      0 0 26px -6px rgba(255, 196, 90, .7);
  }

  .sw-acc__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
  }

  .sw-acc__name {
    display: block;
    max-width: 200px;
    padding: 3px 0;                     /* зона нажатия по имени — не тоньше строки текста */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f8f5ed;
    /* один шрифт на всю панель: Arial, как у остальных кнопок сайта */
    font: 700 15px/1.25 Arial, sans-serif;
    letter-spacing: .01em;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .65);
    transition: color .16s ease, text-shadow .16s ease;
  }

  .sw-acc__name:hover {
    color: #ffd98c;
    text-shadow: 0 0 14px rgba(255, 190, 80, .55);
  }

  /* ID — статусная капсула, а не голая строка */
  .sw-acc__sub {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    color: #a3a3af;
    font: 700 10.5px/1.35 Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* Кнопка настроек — круглая «стеклянная» кнопка, как иконки-кнопки в референсе */
  .sw-acc__gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    /* светлое стекло, как у кнопок меню */
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .18),
      0 6px 16px -12px rgba(0, 0, 0, .8);
    color: #b5bac5;
    text-decoration: none;
    transition: color .16s ease, border-color .16s ease, box-shadow .18s ease, transform .22s ease;
  }

  .sw-acc__gear svg { display: block; width: 15px; height: 15px; }

  .sw-acc__gear:hover {
    color: #ffd98c;
    border-color: rgba(255, 205, 110, .45);
    background:
      linear-gradient(180deg, rgba(255, 216, 132, .2), rgba(255, 198, 7, .04) 52%, rgba(255, 255, 255, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
    transform: rotate(28deg);
    box-shadow:
      inset 0 1px 0 rgba(255, 240, 190, .24),
      0 12px 24px -12px rgba(255, 180, 60, .6);
  }

  /* ======================================================================
   * 4. БАЛАНС И ГЛАВНОЕ ДЕЙСТВИЕ
   * ====================================================================== */
  .sw-acc__money {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }

  /* Баланс — отдельная капсула с внутренней глубиной */
  /* Баланс — «стеклянная» золотая пилюля с внутренним объёмом */
  .sw-acc__balance {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 7px 14px 7px 11px;
    /* светлая золотая капсула: золото 16% на прозрачном стекле */
    border: 1px solid rgba(255, 205, 110, .38);
    border-radius: 10px;
    background:
      radial-gradient(125% 165% at 12% -40%, rgba(255, 224, 150, .22), transparent 58%),
      linear-gradient(180deg, rgba(255, 198, 7, .16), rgba(255, 198, 7, .05));
    box-shadow:
      inset 0 1px 0 rgba(255, 236, 186, .26),
      0 8px 18px -12px rgba(0, 0, 0, .9);
    color: #ffd98c;
    font: 800 16px/1 Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Монета перед суммой */
  .sw-acc__coin {
    align-self: center;
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    color: #ffcf6a;
    filter: drop-shadow(0 0 6px rgba(255, 190, 80, .5));
  }

  .sw-acc__balance small {
    font-size: 11.5px;
    font-weight: 700;
    opacity: .9;
  }

  /* CTA «Пополнить» — золотая пилюля со стеклянным блеском и ambient glow */
  .sw-acc__topup {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 18px;
    /* золотая кнопка с блеском — как была, в тон золоту /sell */
    border: 1px solid rgba(255, 238, 158, .9);
    border-radius: 10px;
    background: linear-gradient(180deg, #fff0bd 0%, #ffd75f 30%, #f0a81c 72%, #d08c0d 100%);
    color: #2b1d04;
    font: 700 13px/1 Arial, sans-serif;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, .85),
      inset 0 -7px 12px -8px rgba(140, 84, 0, .55),
      0 10px 24px -12px rgba(255, 175, 45, .85),
      0 1px 0 rgba(0, 0, 0, .4);
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  }

  .sw-acc__topup svg { display: block; width: 14px; height: 14px; }

  /* Блик, проходящий по кнопке (сдержанно, раз в несколько секунд) */
  .sw-acc__topup::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, .65) 47%, transparent 64%);
    transform: translateX(-140%);
    animation: sw-acc-shine 7.5s cubic-bezier(.35, .1, .25, 1) 1.5s infinite;
    pointer-events: none;
  }

  @keyframes sw-acc-shine {
    0%, 68% { transform: translateX(-140%); }
    78%, 100% { transform: translateX(140%); }
  }

  .sw-acc__topup:hover {
    transform: translateY(-2px);
    filter: brightness(1.05) saturate(1.05);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .95),
      inset 0 -3px 7px rgba(146, 88, 0, .4),
      0 16px 30px -12px rgba(255, 176, 45, .9),
      0 1px 0 rgba(0, 0, 0, .45);
  }

  .sw-acc__topup:active {
    transform: translateY(0);
    filter: brightness(.97);
    box-shadow:
      inset 0 3px 8px rgba(120, 70, 0, .5),
      0 6px 14px -10px rgba(255, 170, 40, .8);
  }

  /* ======================================================================
   * 5. МЕНЮ РАЗДЕЛОВ — графитовые капсулы с золотым откликом
   * ====================================================================== */
  .sw-acc__menu {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-left: 4px;
    padding-left: 18px;
  }

  /* Благородный разделитель между зонами: линия с ромбом по центру */
  .sw-acc__menu::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6%;
    bottom: 6%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 214, 130, .30) 22%, rgba(255, 214, 130, .30) 78%, transparent);
    pointer-events: none;
  }

  .sw-acc__menu::after {
    content: "";
    position: absolute;
    left: -2.5px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 1px;
    background: linear-gradient(135deg, #ffe6a8, #c08e33);
    transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(255, 190, 80, .6);
    pointer-events: none;
  }

  .sw-acc__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 14px;
    /* «стеклянная» поверхность: светлая плёнка сверху, лёгкое стекло под ней */
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .18),
      0 6px 16px -12px rgba(0, 0, 0, .8);
    color: #f2f3f6;
    /* тот же шрифт, вес и кегль, что у кнопки «Пополнить» — кнопки выглядят
       единым набором и текст читается одинаково */
    font: 700 13px/1 Arial, sans-serif;
    white-space: nowrap;
    text-decoration: none;
    /* фон-градиент не интерполируется, поэтому в transition его нет */
    transition: color .16s ease, border-color .16s ease,
                box-shadow .18s ease, transform .16s ease;
  }

  .sw-acc__item svg {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: #f0c978;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
    transition: color .16s ease, filter .16s ease;
  }

  .sw-acc__item:hover {
    color: #fff6e0;
    border-color: rgba(255, 205, 110, .5);
    background:
      linear-gradient(180deg, rgba(255, 216, 132, .22), rgba(255, 198, 7, .04) 52%, rgba(255, 255, 255, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 240, 190, .26),
      0 12px 24px -14px rgba(255, 180, 60, .6);
  }

  .sw-acc__item:hover svg {
    color: #ffdc96;
    filter: drop-shadow(0 0 8px rgba(255, 190, 80, .6));
  }

  .sw-acc__item:active { transform: translateY(0); }

  /* Счётчик — премиальный badge. Золота в самом фоне немного: иначе цифра
     #ffe3a6 на золотой капсуле давала контраст ниже 4,5:1. */
  .sw-acc__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 19px;
    margin-left: 1px;
    padding: 0 7px;
    border: 1px solid rgba(255, 205, 110, .45);
    border-radius: 6px;
    background:
      radial-gradient(120% 170% at 30% -45%, rgba(255, 232, 160, .16), transparent 62%),
      linear-gradient(180deg, rgba(255, 198, 7, .14), rgba(120, 80, 12, .35));
    box-shadow:
      inset 0 1px 0 rgba(255, 243, 200, .22),
      0 0 10px -4px rgba(255, 190, 80, .5);
    color: #ffe3a6;
    font: 700 11.5px/1 Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
  }

  /* Ярлык избранного скрывается, когда избранного нет */
  .sw-acc [data-fav-count][hidden] { display: none; }

  /* Приоритет 3: «Выйти» — та же стеклянная форма, но без золота */
  .sw-acc__item--out {
    border-color: rgba(255, 255, 255, .12);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 50%),
      linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .12),
      0 6px 16px -12px rgba(0, 0, 0, .8);
    color: #b5bac5;
  }

  .sw-acc__item--out svg { color: #8f8f9c; filter: none; }

  .sw-acc__item--out:hover {
    color: #ffc0c0;
    border-color: rgba(226, 108, 108, .5);
    background:
      linear-gradient(180deg, rgba(226, 108, 108, .22), rgba(226, 108, 108, .04) 52%, rgba(255, 255, 255, 0)),
      linear-gradient(180deg, rgba(40, 30, 32, .72), rgba(22, 18, 20, .82));
    box-shadow:
      inset 0 1px 0 rgba(255, 200, 200, .2),
      inset 0 -9px 15px -11px rgba(0, 0, 0, .85),
      0 14px 26px -14px rgba(226, 108, 108, .55);
  }

  .sw-acc__item--out:hover svg { color: #ffc0c0; filter: drop-shadow(0 0 8px rgba(226, 108, 108, .5)); }

  /* ======================================================================
   * 6. ФОКУС С КЛАВИАТУРЫ — единая золотая обводка
   * ====================================================================== */
  .sw-acc__avatar:focus-visible,
  .sw-acc__name:focus-visible,
  .sw-acc__gear:focus-visible,
  .sw-acc__topup:focus-visible,
  .sw-acc__item:focus-visible {
    outline: 2px solid #f0cf85;
    outline-offset: 3px;
  }

  /* ======================================================================
   * 7. ГАШЕНИЕ НАСЛЕДИЯ ДЕРЕВЯННОЙ ПАНЕЛИ (css/profile.css)
   *    Там есть `.profile-frame span, .profile-frame button` с заглавными
   *    буквами, зелёным цветом #ebf9ab и тенью, плюс размеры 650×140.
   *    Внутри новой панели это не нужно — точность селектора выше, без !important.
   * ====================================================================== */
  /* Тема задаёт заглавные буквы, тень и свой цвет для span/button внутри
     .profile-frame — снимаем это там, где мешает (подпись профиля, баланс,
     кнопка «Пополнить»), и сразу возвращаем свои значения: у имени мягкая
     тень и золотое свечение, у ID-капсулы разрядка заглавными, у CTA светлая
     фаска. Так заглушка не перебивает сам модуль. */
  html body .header__second .profile-frame.sw-acc .sw-acc__text,
  html body .header__second .profile-frame.sw-acc .sw-acc__balance,
  html body .header__second .profile-frame.sw-acc .sw-acc__topup {
    text-transform: none;
    text-shadow: none;
  }

  html body .header__second .profile-frame.sw-acc .sw-acc__name {
    color: #f8f5ed;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .65);
  }
  html body .header__second .profile-frame.sw-acc .sw-acc__name:hover {
    color: #ffd98c;
    text-shadow: 0 0 14px rgba(255, 190, 80, .55);
  }
  html body .header__second .profile-frame.sw-acc .sw-acc__sub {
    color: #a3a3af;
    text-transform: uppercase;
    text-shadow: none;
  }
  html body .header__second .profile-frame.sw-acc .sw-acc__balance { color: #ffd166; }
  html body .header__second .profile-frame.sw-acc .sw-acc__topup {
    color: #2b1d04;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  }
  html body .header__second .profile-frame.sw-acc .sw-acc__count { color: #ffe3a6; }
  html body .header__second .profile-frame.sw-acc .sw-acc__gear { color: #b9b9c6; }
  html body .header__second .profile-frame.sw-acc .sw-acc__gear:hover { color: #ffd98c; }
  html body .header__second .profile-frame.sw-acc .sw-acc__item { color: #e9e7e0; }
  html body .header__second .profile-frame.sw-acc .sw-acc__item svg { color: #f0c978; }
  html body .header__second .profile-frame.sw-acc .sw-acc__item:hover,
  html body .header__second .profile-frame.sw-acc .sw-acc__item:hover svg { color: #fff6e0; }
  html body .header__second .profile-frame.sw-acc .sw-acc__item--out,
  html body .header__second .profile-frame.sw-acc .sw-acc__item--out svg { color: #9d9daa; }
  html body .header__second .profile-frame.sw-acc .sw-acc__item--out:hover,
  html body .header__second .profile-frame.sw-acc .sw-acc__item--out:hover svg { color: #ffc0c0; }

  /* ======================================================================
   * 8. ШИРОКИЕ ЭКРАНЫ (1920+): больше воздуха и веса — панель «дышит»
   * ====================================================================== */
  @media (min-width: 1760px) {
    html body .header__second:has(.profile-frame) .profile-frame.sw-acc {
      gap: 13px 22px;
      padding: 12px 20px;
      border-radius: 20px;
    }
    .sw-acc__avatar { width: 50px; height: 50px; }
    .sw-acc__avatar img { border-radius: 10px; }
    .sw-acc__name { max-width: 240px; font-size: 15.5px; }
    .sw-acc__sub { font-size: 10.5px; padding: 3px 9px; }
    .sw-acc__gear { flex-basis: 36px; width: 36px; height: 36px; }
    .sw-acc__gear svg { width: 16px; height: 16px; }
    .sw-acc__balance { font-size: 18px; padding: 8px 16px 8px 13px; }
    .sw-acc__coin { flex-basis: 18px; width: 18px; height: 18px; }
    .sw-acc__topup { min-height: 40px; padding: 0 22px; font-size: 13px; }
    .sw-acc__item { min-height: 38px; padding: 0 16px; font-size: 13px; gap: 8px; }
    .sw-acc__item svg { flex-basis: 16px; width: 16px; height: 16px; }
    .sw-acc__count { min-width: 24px; height: 20px; font-size: 11.5px; }
    .sw-acc__menu { gap: 8px; padding-left: 22px; }
  }
}

/* ==========================================================================
 * УЗКИЙ ПК (1101–1399px): та же панель, компактнее по метрикам.
 * Ниже 1101px панель не показывается вовсе — там работает мобильная шапка
 * с карточкой пользователя в меню (это поведение темы, не этого файла).
 * ========================================================================== */
@media (min-width: 1101px) and (max-width: 1399px) {
  html body .header__second:has(.profile-frame) .profile-frame.sw-acc {
    gap: 9px 12px;
    padding: 8px 11px;
    border-radius: 16px;
  }
  .sw-acc__avatar { width: 40px; height: 40px; }
  .sw-acc__avatar img { border-radius: 8px; }
  .sw-acc__id { gap: 10px; }
  .sw-acc__name { max-width: 140px; font-size: 13px; padding: 3px 0; }
  .sw-acc__sub { font-size: 10px; padding: 2px 7px; letter-spacing: .06em; }
  .sw-acc__gear { flex-basis: 32px; width: 32px; height: 32px; }
  .sw-acc__gear svg { width: 14px; height: 14px; }
  .sw-acc__balance { font-size: 14px; padding: 6px 12px 6px 10px; }
  .sw-acc__coin { flex-basis: 14px; width: 14px; height: 14px; }
  .sw-acc__topup { min-height: 34px; padding: 0 14px; font-size: 12.5px; }
  .sw-acc__item { min-height: 32px; padding: 0 11px; font-size: 12px; gap: 6px; }
  .sw-acc__item svg { flex-basis: 14px; width: 14px; height: 14px; }
  .sw-acc__count { min-width: 20px; height: 17px; padding: 0 6px; font-size: 11px; }
  .sw-acc__menu { gap: 6px; padding-left: 14px; }
}

/* ==========================================================================
 * ЩАДЯЩИЙ РЕЖИМ: без движения и блика для тех, кто просил меньше анимации
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sw-acc__avatar,
  .sw-acc__gear,
  .sw-acc__topup,
  .sw-acc__item,
  .sw-acc__name {
    transition: none;
    transform: none !important;         /* бьёт :hover-трансформы модуля */
  }
  .sw-acc__topup::after { animation: none; content: none; }
}