/* GE SHOP — Account dashboard styles. Served from backend; loaded by Tilda 09_ACCOUNT loader. */
  #ge-account-dashboard,
  #ge-account-dashboard * {
    box-sizing: border-box;
  }

  #ge-account-dashboard [hidden] {
    display: none !important;
  }

  #ge-account-dashboard {
    --black: #090a0c;
    --dark: #202126;
    --white: #eef0f1;
    --gray: #dfe2e4;
    --red: #202126;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--white);
    background-color: var(--black);
    /* Своя клетка убрана: фон рисует общий слой .ge-texture из global.js, иначе две
       сетки складывались и рисунок отличался от страниц без собственной клетки. */
    font-family: "Cyngle", "Cygre", "Akrobat", Arial, sans-serif;
  }

  #ge-account-dashboard button,
  #ge-account-dashboard input,
  #ge-account-dashboard textarea,
  #ge-account-dashboard select {
    font: inherit;
  }

  #ge-account-dashboard .gea-sitebar {
    position: relative;
    z-index: 20;
    width: min(1240px, calc(100% - 48px));
    min-height: 86px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 0;   /* отделение шапки рисует общее правило (мягкое затемнение фона) */
  }

  /* Размеры логотипа и иконок шапки задаёт global.js — единым правилом на все страницы. */
  #ge-account-dashboard .gea-site-logo {
    display: inline-flex;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  #ge-account-dashboard .gea-site-logo:hover {
    opacity: 0.75;
  }

  #ge-account-dashboard .gea-site-logo:active {
    transform: scale(0.96);
  }

  #ge-account-dashboard .gea-site-logo img,
  #ge-account-dashboard .gea-header-action img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }

  #ge-account-dashboard .gea-site-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  #ge-account-dashboard .gea-header-action {
    padding: 0;
    border: 0;
    display: inline-flex;
    background: transparent;
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.15s ease;
  }

  #ge-account-dashboard .gea-header-action:hover {
    opacity: 0.72;
  }

  #ge-account-dashboard .gea-header-action:active {
    transform: scale(0.94);
  }



  #ge-account-dashboard .gea-page {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
    padding: 42px 0 80px;
  }

  #ge-account-dashboard .gea-heading {
    margin: 0 0 26px;
    font: 800 clamp(28px, 3.6vw, 42px) / 0.95 "Akrobat", Arial, sans-serif;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }

  #ge-account-dashboard .gea-layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }

  #ge-account-dashboard .gea-sidebar,
  #ge-account-dashboard .gea-main {
    border: 0;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  }

  #ge-account-dashboard .gea-sidebar {
    position: sticky;
    top: 16px;
    padding: 20px;
    border-radius: 32px;
    color: var(--black);
    background: var(--white);
    overflow: hidden;
  }

  /* Мягкая монохромная «сфера» над профилем — тот же приём, что в редизайне рулетки:
     объём без единого цветного пикселя, видна на каждой вкладке (сайдбар общий). */
  #ge-account-dashboard .gea-sidebar::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -90px;
    right: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 34%, rgba(9, 10, 12, 0.1), rgba(9, 10, 12, 0.02) 46%, transparent 72%);
    pointer-events: none;
  }

  #ge-account-dashboard .gea-profile,
  #ge-account-dashboard .gea-nav {
    position: relative;
    z-index: 1;
  }

  #ge-account-dashboard .gea-profile {
    padding: 5px 5px 21px;
    border-bottom: 1px solid rgba(9, 10, 12, 0.14);
  }

  #ge-account-dashboard .gea-avatar {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #fff;
    background: var(--dark);
    font: 800 27px/1 "Akrobat", Arial, sans-serif;
  }

  #ge-account-dashboard .gea-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  #ge-account-dashboard .gea-profile-name {
    margin-top: 15px;
    font: 800 25px/1 "Akrobat", Arial, sans-serif;
    text-transform: uppercase;
  }

  #ge-account-dashboard .gea-profile-email {
    margin-top: 6px;
    overflow-wrap: anywhere;
    color: rgba(9, 10, 12, 0.55);
    font-size: 13px;
  }

  #ge-account-dashboard .gea-nav {
    margin-top: 14px;
    display: grid;
    gap: 5px;
  }

  #ge-account-dashboard .gea-nav-button,
  #ge-account-dashboard .gea-nav-link {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 0;
    border-radius: 999px;
    color: var(--black);
    background: transparent;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.18s ease, background 0.18s ease;
  }

  #ge-account-dashboard .gea-nav-button:hover,
  #ge-account-dashboard .gea-nav-link:hover {
    background: var(--gray);
  }

  #ge-account-dashboard .gea-nav-button.is-active {
    color: #fff;
    background: var(--dark);
  }

  #ge-account-dashboard .gea-nav-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0;
  }

  #ge-account-dashboard .gea-nav-icon svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  #ge-account-dashboard .gea-nav-button.gea-logout {
    margin-top: 8px;
    color: rgba(9, 10, 12, 0.55);
  }

  #ge-account-dashboard .gea-main {
    min-height: 650px;
    padding: clamp(23px, 4vw, 42px);
    border-radius: 32px;
    color: var(--black);
    background: var(--white);
  }

  #ge-account-dashboard .gea-panel[hidden] {
    display: none !important;
  }

  #ge-account-dashboard .gea-panel-head {
    margin-bottom: 24px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
  }

  #ge-account-dashboard .gea-panel h2 {
    margin: 0;
    font: 800 clamp(23px, 2.6vw, 32px) / 1 "Akrobat", Arial, sans-serif;
    text-transform: uppercase;
  }

  #ge-account-dashboard .gea-panel-subtitle {
    max-width: 400px;
    color: rgba(9, 10, 12, 0.55);
    font-size: 14px;
    line-height: 1.4;
  }

  #ge-account-dashboard .gea-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
  }

  #ge-account-dashboard .gea-summary-card {
    min-height: 155px;
    padding: 21px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(9, 10, 12, 0.08);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(9, 10, 12, 0.07);
  }

  #ge-account-dashboard .gea-summary-card.is-dark {
    color: #fff;
    background: var(--dark);
    border-color: var(--dark);
  }

  #ge-account-dashboard .gea-summary-label {
    color: rgba(9, 10, 12, 0.52);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
  }

  #ge-account-dashboard .is-dark .gea-summary-label {
    color: rgba(255, 255, 255, 0.58);
  }

  #ge-account-dashboard .gea-summary-value {
    font: 800 42px/0.9 "Akrobat", Arial, sans-serif;
  }

  /* Тёмная плашка — та же семья, что и «Бонусы» (.gea-summary-card.is-dark): та же
     заливка var(--dark) и тот же border-radius, чтобы не смотреться отдельным чужеродным
     блоком на странице, а просто ещё одной тёмной карточкой в общем ряду. */
  /* ===== ПОПОЛНЕНИЕ БАЛАНСА =====
     Плашка была тёмно-серой с синеватым отливом (#202126) — единственный такой цвет на
     всей странице: рядом белые карточки, вокруг светлый фон, и она читалась как деталь
     из чужого макета. Теперь это такая же белая карточка, как «Баланс» и «G coins»:
     тот же радиус, та же тонкая линейка, без тени. Цвет в блоке ровно один — чёрный,
     и он достаётся тому, что важно: сумме и кнопке оплаты. */
  /* ===== ПОПОЛНЕНИЕ БАЛАНСА =====
     Плашка прошла три состояния и здесь останавливается. Была серо-синяя (#202126) —
     единственный такой цвет на странице, читался как деталь из чужого макета. Стала
     белой — и оказалась пустоватой: крупная светлая площадь без единого акцента.
     Теперь карточка целиком чёрная, но чёрным именно сайта (#090a0c) — тем же, что у
     тёмной карточки «Бонусы» рядом, поэтому она не выпадает из ряда, а читается как
     второй акцент страницы.
     Внутри — две половины, разделённые волосяной линией: слева (на телефоне сверху)
     зачем это нужно и сколько на балансе сейчас, справа — сама сумма и оплата.
     Ввод суммы не тронут: то же поле, то же зеркало ширины, тот же знак ₽ за
     последней цифрой, те же быстрые суммы и та же проверка границ. */
  #ge-account-dashboard .gea-topup-card {
    margin-top: 16px;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    gap: 0;
    align-items: stretch;
    overflow: hidden;
    border-radius: 22px;
    color: #fff;
    background: var(--black);
    border: 1px solid var(--black);
    box-shadow: none;
  }

  #ge-account-dashboard .gea-topup-intro {
    padding: clamp(24px, 3vw, 34px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    color: #fff;
    background: transparent;
  }

  #ge-account-dashboard .gea-topup-title {
    margin: 0;
    color: #fff;
    font: 800 clamp(26px, 2.8vw, 36px) / 0.98 "Akrobat", Arial, sans-serif;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  #ge-account-dashboard .gea-topup-text {
    margin: 0;
    max-width: 460px;
    color: rgba(255, 255, 255, 0.58);
    font: 13.5px/1.5 "Cyngle", "Cygre", "Akrobat", Arial, sans-serif;
  }

  /* Сколько на балансе сейчас — это первое, что хочется знать, прежде чем пополнять.
     Значение подставляет тот же код, что и в карточку «Баланс» наверху. */
  #ge-account-dashboard .gea-topup-now {
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
  }

  #ge-account-dashboard .gea-topup-now-label {
    color: rgba(255, 255, 255, 0.45);
    font: 750 10.5px/1 "Akrobat", Arial, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* Знак рубля в подписи к балансу — тот же системный гротеск, что и у крупной суммы. */
  #ge-account-dashboard .gea-rub {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
      Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    opacity: 0.62;
  }

  #ge-account-dashboard .gea-topup-now-value {
    color: #fff;
    font: 800 clamp(20px, 2.2vw, 26px) / 1 "Akrobat", Arial, sans-serif;
    white-space: nowrap;
  }

  /* Вторая половина карточки. Отделена волосяной линией, а не другим фоном: два разных
     тёмных оттенка рядом дают ту самую «серую муть», от которой уходим. */
  #ge-account-dashboard .gea-topup-form {
    padding: clamp(22px, 3vw, 32px);
    border-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
  }

  /* Сумма — главный элемент окна. Никакой коробки: подпись, крупное число и одна
     линия под ним, которая загорается белым, когда в поле стоит курсор. */
  #ge-account-dashboard .gea-topup-sum {
    display: block;
    padding: 2px 0 14px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0;
    text-align: center;
    cursor: text;
    transition: border-color 0.16s ease;
  }

  #ge-account-dashboard .gea-topup-sum:focus-within {
    border-bottom-color: #fff;
  }

  #ge-account-dashboard .gea-topup-sum-label {
    display: block;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.45);
    font: 750 10.5px/1 "Akrobat", Arial, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* Строка «число + ₽»: центрируем ЦЕЛИКОМ, поэтому знак всегда вплотную к цифрам.
     Выравнивание по базовой линии, а не по центру: знак набран другим шрифтом, и только
     общая базовая линия ставит его «на строку» вместе с цифрами. */
  #ge-account-dashboard .gea-topup-sum-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    min-height: clamp(38px, 10vw, 52px);
  }

  #ge-account-dashboard .gea-topup-sum-input,
  #ge-account-dashboard .gea-topup-sum-mirror {
    font: 800 clamp(38px, 10vw, 52px) / 1 "Akrobat", Arial, sans-serif;
    letter-spacing: -0.01em;
  }

  /* Знак рубля — обычный символ ₽, только своим шрифтом. Рисовать его вручную оказалось
     тупиковой затеей: рядом с наборным числом всегда видно, что знак нарисован.
     Системный гротеск (SF Pro на телефоне, Segoe UI на Windows, Roboto на Android)
     рисует ₽ ровно так, как его видят в клавиатуре и в банковском приложении. */
  #ge-account-dashboard .gea-topup-sum-cur {
    display: inline-block;
    color: rgba(255, 255, 255, 0.5);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
      Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(27px, 7.2vw, 37px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    margin-left: 3px;
  }

  /* КЛЕТКА, КОТОРУЮ РАСПИРАЕТ ЗЕРКАЛО. Зеркало и поле лежат одно на другом в одной
     клетке сетки: ширину клетки задаёт зеркало — оно невидимо, но место занимает, —
     а поле растягивается на всю клетку. Так ширина считается САМОЙ РАСКЛАДКОЙ, и при
     подмене шрифта всё переезжает одним обычным пересчётом, без рывков.
     Раньше ширину в пикселях выставлял скрипт, и делал это семь раз за первые две с
     половиной секунды — число дёргалось при каждом заходе на вкладку. */
  #ge-account-dashboard .gea-topup-sum-fit {
    position: relative;
    display: inline-block;
  }

  /* Поле вынуто из потока НАМЕРЕННО. В общей клетке сетки оно всё равно просило свою
     ширину (даже с size="1" — шестьдесят точек вместо сорока) и продолжало её менять
     вслед за подгрузкой шрифта. Вынутый из потока элемент в расчёте ширины не участвует
     ВООБЩЕ — значит, ширину держит одно зеркало, и держит намертво. */
  #ge-account-dashboard .gea-topup-sum-input {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    color: #fff;
    background: transparent !important;
    text-align: right;
    outline: none;
    box-shadow: none !important;
    -moz-appearance: textfield;
  }

  #ge-account-dashboard .gea-topup-sum-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
  }

  #ge-account-dashboard .gea-topup-sum-input:focus {
    border: 0 !important;
    box-shadow: none !important;
  }

  #ge-account-dashboard .gea-topup-sum-input::-webkit-outer-spin-button,
  #ge-account-dashboard .gea-topup-sum-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Зеркало держит ширину клетки и в кадре не участвует. visibility, а НЕ display:none
     и не увод за край экрана: невидимый элемент должен занимать место — в этом вся его
     работа. */
  #ge-account-dashboard .gea-topup-sum-mirror {
    white-space: pre;
    visibility: hidden;
    pointer-events: none;
  }

  #ge-account-dashboard .gea-topup-sum-hint {
    display: block;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.42);
    font: 750 11px/1 "Akrobat", Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.16s ease;
  }

  #ge-account-dashboard .gea-topup-sum-hint.is-bad {
    color: #fff;
  }

  #ge-account-dashboard .gea-topup-form .gea-button {
    width: 100%;
    margin-top: 18px;
    min-height: 54px;
    border-radius: 999px;
    color: var(--black);
    background: #f4f4f1;
  }

  #ge-account-dashboard .gea-topup-form .gea-button:hover {
    color: #f4f4f1;
    background: transparent;
    box-shadow: inset 0 0 0 2px #f4f4f1;
  }

  #ge-account-dashboard .gea-topup-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
  }

  #ge-account-dashboard .gea-topup-preset {
    min-height: 42px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.82);
    background: transparent;
    cursor: pointer;
    font: 750 12px/1 "Akrobat", Arial, sans-serif;
    letter-spacing: 0.04em;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  }

  #ge-account-dashboard .gea-topup-preset:hover {
    border-color: #f4f4f1;
    color: #fff;
  }

  #ge-account-dashboard .gea-topup-preset.is-active {
    color: var(--black);
    background: #f4f4f1;
    border-color: #f4f4f1;
  }

  #ge-account-dashboard .gea-section-title {
    margin: 34px 0 14px;
    font: 800 25px/1 "Akrobat", Arial, sans-serif;
    text-transform: uppercase;
  }

  #ge-account-dashboard .gea-list {
    display: grid;
    gap: 10px;
  }

  #ge-account-dashboard .gea-list-item {
    padding: 17px 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(9, 10, 12, 0.07);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(9, 10, 12, 0.06);
  }

  /* ====================== КАРТОЧКА ЗАКАЗА ======================
     Здесь был <details>: он раскрывается мгновенно, и плавность к нему не приделать —
     браузер просто перестаёт прятать содержимое, промежуточных состояний у него нет.
     Владелец: «при нажатии на заказ, он так с анимацией раскрывался, такое окошко
     закругленное». Поэтому кнопка и панель, а высоту везёт сетка. */

  #ge-account-dashboard .gea-ord {
    overflow: hidden;
    border: 1px solid rgba(9, 10, 12, 0.07);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(9, 10, 12, 0.06);
    transition: box-shadow 0.2s ease;
  }

  #ge-account-dashboard .gea-ord.is-open {
    box-shadow: 0 18px 44px rgba(9, 10, 12, 0.12);
  }

  #ge-account-dashboard .gea-ord-head {
    display: grid;
    /* minmax(0,1fr) обязателен: без него длинное название товара распирает сетку и на
       телефоне появляется горизонтальная прокрутка. */
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(12px, 2.4vw, 16px);
    width: 100%;
    padding: clamp(12px, 2.6vw, 16px);
    border: 0;
    color: inherit;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
  }

  #ge-account-dashboard .gea-ord-head:focus-visible {
    outline: 2px solid rgba(9, 10, 12, 0.5);
    outline-offset: -3px;
  }

  /* Фотографии стопкой — так же, как на странице отслеживания: заказ должен выглядеть
     одинаково там и тут, иначе человек не узнаёт в списке тот же самый заказ. */
  #ge-account-dashboard .gea-ord-pics {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
  }

  #ge-account-dashboard .gea-ord-pics img {
    width: clamp(46px, 11vw, 58px);
    height: clamp(46px, 11vw, 58px);
    border-radius: 14px;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(9, 10, 12, 0.08);
  }

  #ge-account-dashboard .gea-ord-pics img + img {
    margin-left: clamp(-22px, -5vw, -16px);
  }

  #ge-account-dashboard .gea-ord-more {
    margin-left: 8px;
    color: rgba(9, 10, 12, 0.5);
    font: 750 12px/1 "Akrobat", Arial, sans-serif;
  }

  #ge-account-dashboard .gea-ord-text {
    display: grid;
    /* Колонка обязана быть minmax(0,1fr), а не «auto». «Auto» тянется по самой широкой
       строке — и строка «номер … сумма» распирала колонку до 206px внутри ячейки в
       161px: название товара уезжало под значок штрих-кода, а страница ехала вбок. */
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    min-width: 0;
  }

  #ge-account-dashboard .gea-ord-num {
    color: #0a0a0b;
    font: 800 clamp(14.5px, 3.3vw, 17px) / 1.15 "Akrobat", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #ge-account-dashboard .gea-ord-meta {
    overflow: hidden;
    color: rgba(9, 10, 12, 0.55);
    font-size: clamp(11.5px, 2.7vw, 13px);
    /* Названия товаров бывают длинными. Пусть обрезается многоточием в одну строку:
       карточка в списке должна быть одного роста у всех заказов, иначе список
       «прыгает» и его тяжело просматривать. */
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #ge-account-dashboard .gea-ord-status {
    justify-self: start;
    margin-top: 2px;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 999px;
    color: #f4f4f1;
    background: #0a0a0b;
    font: 750 10.5px/1.25 "Akrobat", Arial, sans-serif;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    /* Подпись бывает длинной («Готовится к отправке») — пусть переносится внутри
       пилюли, а не выпирает за карточку. */
    white-space: normal;
  }

  /* «Готов к выдаче» — самый важный статус в списке: за ним едут. Отмечаем его самым
     заметным, что есть в чёрно-белом магазине, — сплошной заливкой чернилами. Остальные
     статусы ниже тише: серая подложка и тонкая обводка. Жёлтого в магазине больше нет
     (владелец: «чтобы не было жёлтого»), и разницу теперь держит вес, а не цвет. */
  #ge-account-dashboard .gea-ord-status.is-ready {
    color: #ffffff;
    background: #0a0a0b;
  }

  #ge-account-dashboard .gea-ord-status.is-done {
    color: #0a0a0b;
    background: rgba(9, 10, 12, 0.1);
  }

  #ge-account-dashboard .gea-ord-status.is-bad {
    color: #f4f4f1;
    background: #8a1f1f;
  }

  #ge-account-dashboard .gea-ord-bc {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: #ffffff;
    background: #0a0a0b;
  }

  #ge-account-dashboard .gea-ord-bc svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

  #ge-account-dashboard .gea-ord-go {
    display: grid;
    place-items: center;
    width: 26px;
    color: rgba(9, 10, 12, 0.35);
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  #ge-account-dashboard .gea-ord.is-open .gea-ord-go {
    transform: rotate(180deg);
  }

  #ge-account-dashboard .gea-ord-go svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* На узком экране значок кода и стрелка вместе съедали ширину у номера заказа — он
     обрезался до «ЗАКАЗ № GE-1…». Стрелку убираем: карточка нажимается целиком, и
     стрелка здесь украшение, а номер — то, ради чего в список и заходят. Значок кода
     остаётся: он говорит, что заказ уже можно забрать. */
  @media (max-width: 460px) {
    #ge-account-dashboard .gea-ord-head {
      grid-template-columns: auto minmax(0, 1fr) auto;
    }
    #ge-account-dashboard .gea-ord-go {
      display: none;
    }
  }

  /* РАСКРЫТИЕ БЕЗ ЗАМЕРОВ В ПИКСЕЛЯХ. Сетка умеет ехать от 0fr к 1fr, и высоту считает
     сама — поэтому панель раскрывается ровно на своё содержимое, каким бы оно ни было,
     и не надо ни мерить, ни пересчитывать при смене шрифта. */
  #ge-account-dashboard .gea-ord-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  #ge-account-dashboard .gea-ord.is-open .gea-ord-body {
    grid-template-rows: 1fr;
  }

  #ge-account-dashboard .gea-ord-clip {
    overflow: hidden;
    min-height: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    #ge-account-dashboard .gea-ord-body,
    #ge-account-dashboard .gea-ord-go {
      transition: none;
    }
  }

  /* «Такое окошко закругленное»: содержимое лежит на своей плашке внутри карточки —
     видно, что это раскрывшаяся подробность, а не продолжение строки. */
  #ge-account-dashboard .gea-ord-inner {
    margin: 0 clamp(12px, 2.6vw, 16px) clamp(12px, 2.6vw, 16px);
    padding: clamp(12px, 2.4vw, 16px);
    border-radius: 18px;
    background: #f4f4f1;
  }

  /* Куда едет заказ. Подпись сверху, адрес под ней: он длинный («Россия, Пермский
     край, г Пермь, ПВЗ Почта России») и в строку с подписью не помещается. */
  #ge-account-dashboard .gea-ord-where {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(9, 10, 12, 0.1);
  }

  #ge-account-dashboard .gea-ord-where span {
    display: block;
    margin-bottom: 5px;
    color: rgba(9, 10, 12, 0.45);
    font: 750 10.5px/1 "Akrobat", Arial, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  #ge-account-dashboard .gea-ord-where b {
    display: block;
    color: #0a0a0b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  #ge-account-dashboard .gea-ord-where i {
    display: block;
    margin-top: 4px;
    color: rgba(9, 10, 12, 0.5);
    font-size: 12.5px;
    font-style: normal;
  }

  /* Действия в строку. Кнопка не растягивается во всю ширину: растянутая читается как
     «главное на экране», а здесь это одно из действий внутри раскрытой карточки. */
  #ge-account-dashboard .gea-ord-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 14px;
  }

  #ge-account-dashboard .gea-ord-acts .gea-button,
  #ge-account-dashboard .gea-ord-acts .gea-pay-order {
    /* Кегль и высота поменьше общих: это действие внутри карточки, а не кнопка раздела.
       Надпись в ОДНУ строку — двухстрочная кнопка выглядит поломкой. */
    min-height: 44px;
    padding: 0 20px;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  /* Второстепенное действие — надписью с линейкой, а не второй капсулой: две капсулы
     рядом спорят за то, какая из них главная. */
  #ge-account-dashboard .gea-ord-second {
    padding: 0 0 2px;
    border-bottom: 1px solid rgba(9, 10, 12, 0.35);
    color: rgba(9, 10, 12, 0.7);
    text-decoration: none;
    font: 750 11.5px/1.2 "Akrobat", Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.16s ease, border-color 0.16s ease;
  }

  @media (hover: hover) {
    #ge-account-dashboard .gea-ord-second:hover {
      color: #0a0a0b;
      border-bottom-color: #0a0a0b;
    }
  }

  #ge-account-dashboard .gea-ord-second:focus-visible {
    outline: 2px solid #0a0a0b;
    outline-offset: 3px;
  }

  #ge-account-dashboard .gea-order-product {
    padding: 14px 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 14px;
    border-bottom: 1px solid rgba(9, 10, 12, 0.08);
  }

  #ge-account-dashboard .gea-order-product-image {
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 13px;
    background: #f1f1ef;
  }

  #ge-account-dashboard .gea-order-product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }

  #ge-account-dashboard .gea-order-product:last-child {
    border-bottom: 0;
  }

  #ge-account-dashboard .gea-order-product strong {
    display: block;
  }

  #ge-account-dashboard .gea-order-product small {
    display: block;
    margin-top: 4px;
    color: rgba(9, 10, 12, 0.52);
  }

  #ge-account-dashboard .gea-item-title {
    font-weight: 750;
  }

  #ge-account-dashboard .ge-order-kind {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #20242d;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  #ge-account-dashboard .gea-item-note {
    margin-top: 5px;
    color: rgba(9, 10, 12, 0.54);
    font-size: 13px;
  }

  #ge-account-dashboard .gea-item-value {
    text-align: right;
    font-weight: 800;
  }

  #ge-account-dashboard .gea-status {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    align-self: flex-start;
    padding: 6px 9px;
    border-radius: 999px;
    color: #fff;
    background: var(--dark);
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    white-space: nowrap;
  }

  #ge-account-dashboard .gea-empty {
    padding: 34px;
    border: 1px solid rgba(9, 10, 12, 0.08);
    border-radius: 24px;
    color: rgba(9, 10, 12, 0.5);
    background: rgba(9, 10, 12, 0.025);
    text-align: center;
  }

  /* ===== ПРИГЛАШЕНИЕ ПОПОЛНИТЬ (первая вкладка) =====
     Приведено к тому же виду, что и само окно пополнения: тот же чёрный, что у сайта,
     без серо-синего отлива, без радиального «орба» за углом и без крупной мягкой тени —
     на светлой странице она давала мутный ореол. Заголовок набран тем же Akrobat, что и
     в окне пополнения, текст выключен влево (на телефоне было по центру — из-за этого
     блок читался как чужая реклама), а под ним той же линейкой отделена строка с текущим
     балансом: прежде чем пополнять, полезно видеть, сколько уже есть.
     Кнопка ведёт туда же, куда вела: на вкладку пополнения. */










  @media (max-width: 680px) {


    /* Колонка меняет главную ось: «основа 320px» из горизонтальной раскладки стала бы
       высотой блока, и между текстом и кнопкой зияла бы пустота в треть экрана. */





  }

  #ge-account-dashboard .gea-button {
    min-height: 52px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--dark);
    cursor: pointer;
    text-decoration: none;
    font: 750 14px/1 "Akrobat", Arial, sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
  }

  #ge-account-dashboard .gea-button:hover {
    background: #fff;
    color: var(--black);
    box-shadow: inset 0 0 0 2px var(--black);
    transform: none;
  }

  #ge-account-dashboard .gea-button.is-light {
    color: var(--black);
    background: #fff;
    border: 2px solid var(--dark);
  }

  /* «Оплатить заказ» — заметная кнопка под заказом со статусом «Ожидает оплаты».
     Выделяется КОНТРАСТОМ (белая с чёрной обводкой на фоне тёмных кнопок), не цветом. */
  #ge-account-dashboard .gea-pay-order {
    width: 100%;
    margin-top: 10px;
    color: var(--black);
    background: #fff;
    border: 2px solid var(--black);
  }
  #ge-account-dashboard .gea-pay-order:hover {
    color: #fff;
    background: var(--black);
  }
  #ge-account-dashboard .gea-pay-order:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
  }

  #ge-account-dashboard .gea-form {
    display: grid;
    gap: 15px;
  }

  #ge-account-dashboard .gea-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  #ge-account-dashboard .gea-field {
    display: block;
  }

  #ge-account-dashboard .gea-admin-user-card {
    margin-top: 20px;
    padding: 20px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(9, 10, 12, 0.07);
    box-shadow: 0 12px 36px rgba(9, 10, 12, 0.07);
  }
  #ge-account-dashboard .gea-admin-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
  }
  #ge-account-dashboard .gea-admin-stats > div {
    padding: 13px 14px;
    border-radius: 16px;
    background: #f3f4f5;
  }
  #ge-account-dashboard .gea-admin-stats span {
    display: block;
    color: rgba(9, 10, 12, 0.55);
    font: 750 11px/1 "Akrobat", Arial, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  #ge-account-dashboard .gea-admin-stats b {
    display: block;
    margin-top: 6px;
    font: 900 17px/1.1 "Akrobat", Arial, sans-serif;
    word-break: break-word;
  }
  #ge-account-dashboard .gea-admin-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  @media (max-width: 560px) {
    #ge-account-dashboard .gea-admin-stats { grid-template-columns: 1fr; }
    #ge-account-dashboard .gea-admin-row { grid-template-columns: 1fr; }
  }

  #ge-account-dashboard .gea-field span {
    display: block;
    margin-bottom: 7px;
    font: 750 12px/1 "Akrobat", Arial, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  #ge-account-dashboard .gea-field input,
  #ge-account-dashboard .gea-field textarea,
  #ge-account-dashboard .gea-field select {
    width: 100%;
    min-height: 56px;
    padding: 0 15px;
    border: 1px solid rgba(9, 10, 12, 0.16);
    border-radius: 16px;
    outline: 0;
    color: var(--black);
    background: #fff;
  }

  #ge-account-dashboard .gea-field textarea {
    min-height: 120px;
    padding-top: 14px;
    resize: vertical;
  }

  #ge-account-dashboard .gea-field input:focus,
  #ge-account-dashboard .gea-field textarea:focus,
  #ge-account-dashboard .gea-field select:focus {
    border-color: var(--black);
    box-shadow: 0 0 0 3px rgba(9, 10, 12, 0.08);
  }

  #ge-account-dashboard .gea-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  #ge-account-dashboard .gea-checkbox input {
    width: 18px;
    height: 18px;
  }

  #ge-account-dashboard .gea-form-status {
    min-height: 20px;
    font-size: 14px;
  }

  #ge-account-dashboard .gea-form-status.is-error {
    color: var(--black);
    font-weight: 700;
  }

  #ge-account-dashboard .gea-form-status.is-success {
    color: #14783c;
  }

  /* Карточка пополнения тёмная — статусы светлые, иначе тёмное по тёмному. */
  #ge-account-dashboard .gea-topup-form .gea-form-status.is-success {
    color: #b9ffd2;
  }

  #ge-account-dashboard .gea-topup-form .gea-form-status.is-error {
    color: #fff;
    font-weight: 700;
  }

  #ge-account-dashboard .gea-address-actions {
    display: flex;
    justify-content: flex-end;
  }

  #ge-account-dashboard .gea-delete {
    padding: 7px 12px;
    border: 0;
    border-radius: 999px;
    color: var(--black);
    background: rgba(9, 10, 12, 0.06);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
  }

  #ge-account-dashboard .gea-delete:hover {
    color: #fff;
    background: var(--black);
  }

  #ge-account-dashboard .gea-favorites-grid,
  #ge-account-dashboard .gea-recommend-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  #ge-account-dashboard .gea-product-link {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--dark);
    text-decoration: none;
    font: 850 13px/1 "Akrobat", Arial, sans-serif;
    text-transform: uppercase;
    transition: background .18s, color .18s, transform .15s;
  }

  #ge-account-dashboard .gea-product-link:hover {
    background: #fff;
    color: var(--black);
    box-shadow: inset 0 0 0 2px var(--black);
    transform: none;
  }

  #ge-account-dashboard .gea-avatar-settings {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(9, 10, 12, 0.06);
  }

  #ge-account-dashboard .gea-avatar-settings + .gea-form {
    margin-top: 16px;
  }

  #ge-account-dashboard .gea-avatar-preview {
    width: 86px;
    height: 86px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #fff;
    background: var(--dark);
    font: 800 28px/1 "Akrobat", Arial, sans-serif;
  }

  #ge-account-dashboard .gea-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #ge-account-dashboard .gea-avatar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  #ge-account-dashboard .gea-avatar-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
  }

  #ge-account-dashboard .gea-auth-gate {
    min-height: 500px;
    display: grid;
    place-items: center;
    text-align: center;
  }

  #ge-account-dashboard .gea-auth-gate h2 {
    margin: 0;
    font: 800 clamp(26px, 3vw, 36px) / 1 "Akrobat", Arial, sans-serif;
    text-transform: uppercase;
  }

  #ge-account-dashboard .gea-auth-gate p {
    max-width: 450px;
    margin: 15px auto 20px;
    color: rgba(9, 10, 12, 0.58);
  }

  #ge-account-dashboard .gea-loading {
    min-height: 500px;
    display: grid;
    place-items: center;
    font-weight: 700;
    text-transform: uppercase;
  }

  @media (max-width: 920px) {
    #ge-account-dashboard .gea-layout {
      grid-template-columns: 1fr;
    }

    #ge-account-dashboard .gea-sidebar {
      position: static;
    }

    #ge-account-dashboard .gea-profile {
      display: grid;
      grid-template-columns: 64px 1fr;
      align-items: center;
      column-gap: 14px;
    }

    #ge-account-dashboard .gea-avatar {
      width: 64px;
      height: 64px;
      grid-row: 1 / 3;
    }

    #ge-account-dashboard .gea-profile-name,
    #ge-account-dashboard .gea-profile-email {
      margin: 0;
    }

    #ge-account-dashboard .gea-nav {
      display: flex;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
    }

    #ge-account-dashboard .gea-nav::-webkit-scrollbar {
      display: none;
    }

    #ge-account-dashboard .gea-nav-button,
    #ge-account-dashboard .gea-nav-link {
      width: auto;
      flex: 0 0 auto;
      white-space: nowrap;
    }

    #ge-account-dashboard .gea-nav-button.gea-logout {
      margin: 0;
    }
  }

  @media (max-width: 680px) {
    #ge-account-dashboard {
      margin: 0 !important;
      border-radius: 0 !important;
    }
    /* Убираем белую полосу сверху/слева: full-bleed внутри контейнера Tilda */
    #ge-account-dashboard .gea-shell,
    #ge-account-dashboard .gea-layout,
    #ge-account-dashboard .gea-page {
      margin: 0 !important;
    }
    /* Контейнеры Tilda вокруг кабинета — на всю ширину, без полей (современные браузеры) */
    .t-rec:has(#ge-account-dashboard),
    .t-rec:has(#ge-account-dashboard) > .t-container,
    .t-rec:has(#ge-account-dashboard) > .t-container > .t-col,
    .t-rec:has(#ge-account-dashboard) .t-width {
      margin: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
    }

    #ge-account-dashboard .gea-sitebar,
    #ge-account-dashboard .gea-page {
      width: calc(100% - 22px);
    }

    #ge-account-dashboard .gea-sitebar {
      min-height: 0;
    }




    #ge-account-dashboard .gea-page {
      padding-top: 24px;
    }

    #ge-account-dashboard .gea-heading {
      font-size: 54px;
    }

    #ge-account-dashboard .gea-sidebar,
    #ge-account-dashboard .gea-main {
      border-radius: 24px;
    }

    #ge-account-dashboard .gea-summary,
    #ge-account-dashboard .gea-topup-card,
    #ge-account-dashboard .gea-form-grid,
    #ge-account-dashboard .gea-favorites-grid,
    #ge-account-dashboard .gea-recommend-grid {
      grid-template-columns: 1fr;
    }

    /* Половины встали друг под друга — значит и линия между ними должна лечь поперёк,
       иначе она осталась бы вертикальной чертой сбоку у нижней половины. */
    #ge-account-dashboard .gea-topup-form {
      border-left: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    #ge-account-dashboard .gea-panel-head {
      align-items: flex-start;
      flex-direction: column;
    }

    #ge-account-dashboard .gea-list-item {
      grid-template-columns: 1fr;
    }

    #ge-account-dashboard .gea-item-value {
      text-align: left;
    }

    #ge-account-dashboard .gea-order-product {
      grid-template-columns: 50px minmax(0, 1fr);
    }

    #ge-account-dashboard .gea-order-product > strong {
      grid-column: 2;
    }
  }

  @media (max-width: 680px) {
    #ge-account-dashboard {
      min-height: 100dvh;
    }

    #ge-account-dashboard .gea-sitebar,
    #ge-account-dashboard .gea-page {
      width: calc(100% - 18px) !important;
      max-width: calc(100% - 18px) !important;
    }

    #ge-account-dashboard .gea-sitebar {
      min-height: 64px !important;
      gap: 12px !important;
      padding: 10px 12px !important;
      border-radius: 0 0 22px 22px !important;
    }


    #ge-account-dashboard .gea-site-actions {
      gap: 7px !important;
      min-width: 0 !important;
    }



    #ge-account-dashboard .gea-page {
      padding: 18px 0 58px !important;
      overflow: hidden !important;
    }

    #ge-account-dashboard .gea-heading {
      margin: 0 0 14px !important;
      font-size: clamp(44px, 14vw, 58px) !important;
      line-height: .84 !important;
      letter-spacing: -.02em !important;
    }

    #ge-account-dashboard .gea-layout {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 12px !important;
      min-width: 0 !important;
    }

    #ge-account-dashboard .gea-sidebar {
      position: static !important;
      width: 100% !important;
      min-width: 0 !important;
      padding: 14px 14px 12px !important;
      overflow: hidden !important;
      border-radius: 24px !important;
    }

    #ge-account-dashboard .gea-profile {
      padding: 0 0 13px !important;
      display: grid !important;
      grid-template-columns: 58px minmax(0, 1fr) !important;
      column-gap: 12px !important;
      row-gap: 4px !important;
      align-items: center !important;
    }

    #ge-account-dashboard .gea-avatar {
      width: 58px !important;
      height: 58px !important;
      grid-row: 1 / 3 !important;
      font-size: 21px !important;
      box-shadow: 0 12px 26px rgba(0, 0, 0, .18) !important;
    }

    #ge-account-dashboard .gea-profile-name {
      margin: 0 !important;
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      font-size: 25px !important;
      line-height: .9 !important;
      letter-spacing: .01em !important;
    }

    #ge-account-dashboard .gea-profile-email {
      margin: 0 !important;
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      font-size: 12px !important;
      line-height: 1.2 !important;
    }

    #ge-account-dashboard .gea-nav {
      width: 100% !important;
      margin: 12px -14px 0 !important;
      padding: 0 14px 4px !important;
      display: flex !important;
      gap: 8px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scroll-snap-type: x proximity !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: none !important;
    }

    #ge-account-dashboard .gea-nav::-webkit-scrollbar {
      display: none !important;
    }

    /* ЛЕНТА ДОЛЖНА ВЫГЛЯДЕТЬ ЛЕНТОЙ. Вкладок девять, на телефон влезает две с половиной,
       и полосы прокрутки нет — со стороны это выглядит как «вот все разделы», а не «их
       больше, потяните». Гасим правый край: обрезанная вкладка под растворяющимся краем
       читается как продолжение, и листать догадываются сразу.
       mask, а не градиент поверх: под лентой белая карточка, и накладка из белого
       перестала бы работать, как только карточку перекрасят. */
    #ge-account-dashboard .gea-nav {
      -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 42px), transparent 100%);
      mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 42px), transparent 100%);
    }

    /* Долистали до конца — гасить нечего, край снимаем. Класс ставит скрипт. */
    #ge-account-dashboard .gea-nav.is-end {
      -webkit-mask-image: none;
      mask-image: none;
    }

    #ge-account-dashboard .gea-nav-button,
    #ge-account-dashboard .gea-nav-link {
      width: auto !important;
      min-width: max-content !important;
      min-height: 52px !important;
      flex: 0 0 auto !important;
      scroll-snap-align: start !important;
      /* Поля и кегль подрезаны: 17/16 против 14/15. Разница на одной вкладке пустяковая,
         а на полосе из десяти — это ещё один раздел на экране целиком, а не выглядывающий
         из-под растворяющегося края. Ниже 44 точек по высоте не опускаемся: меньше —
         уже неудобно попадать пальцем. */
      padding: 0 14px !important;
      gap: 8px !important;
      border-radius: 16px !important;
      white-space: nowrap !important;
      font: 700 15px/1 "Akrobat", Arial, sans-serif !important;
      letter-spacing: .01em !important;
      /* Невыбранная вкладка была прозрачной — на белой карточке она читалась как простой
         текст, а не как то, на что можно нажать. Своя подложка это чинит. */
      background: rgba(9, 10, 12, 0.055) !important;
    }

    #ge-account-dashboard .gea-nav-button.is-active {
      background: var(--dark) !important;
    }

    #ge-account-dashboard .gea-nav-icon {
      width: 20px !important;
      height: 20px !important;
      flex: 0 0 20px !important;
    }

    #ge-account-dashboard .gea-nav-icon svg {
      width: 20px !important;
      height: 20px !important;
    }

    #ge-account-dashboard .gea-nav-button.gea-logout {
      margin: 0 !important;
    }

    #ge-account-dashboard .gea-main {
      width: 100% !important;
      min-width: 0 !important;
      min-height: auto !important;
      padding: 22px 18px 24px !important;
      overflow: hidden !important;
      border-radius: 24px !important;
    }

    #ge-account-dashboard .gea-panel-head {
      margin-bottom: 18px !important;
      display: grid !important;
      gap: 10px !important;
      align-items: start !important;
    }

    #ge-account-dashboard .gea-panel h2 {
      font-size: clamp(43px, 14vw, 58px) !important;
      line-height: .85 !important;
      letter-spacing: -.02em !important;
    }

    #ge-account-dashboard .gea-panel-subtitle {
      max-width: 100% !important;
      font-size: 13px !important;
      line-height: 1.35 !important;
    }

    #ge-account-dashboard .gea-summary {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }

    #ge-account-dashboard .gea-summary-card {
      min-height: 132px !important;
      padding: 20px !important;
      border-radius: 22px !important;
    }

    #ge-account-dashboard .gea-summary-label {
      font-size: 13px !important;
      letter-spacing: .05em !important;
    }

    #ge-account-dashboard .gea-summary-value {
      font-size: clamp(44px, 15vw, 68px) !important;
      line-height: .9 !important;
    }

    #ge-account-dashboard .gea-list,
    #ge-account-dashboard .gea-form,
    #ge-account-dashboard .gea-topup-card,
    #ge-account-dashboard .gea-return-card,
    #ge-account-dashboard .gea-avatar-settings {
      min-width: 0 !important;
    }

    #ge-account-dashboard .gea-list-item,
    #ge-account-dashboard .gea-form-grid,
    #ge-account-dashboard .gea-favorites-grid,
    #ge-account-dashboard .gea-recommend-grid {
      grid-template-columns: 1fr !important;
    }

    #ge-account-dashboard .gea-topup-presets {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #ge-account-dashboard .gea-button,
    #ge-account-dashboard .gea-product-link {
      min-height: 50px !important;
    }
  }

	  @media (max-width: 390px) {
    #ge-account-dashboard .gea-nav-button,
    #ge-account-dashboard .gea-nav-link {
      min-height: 48px !important;
      padding: 0 14px !important;
      font-size: 15px !important;
    }

    #ge-account-dashboard .gea-main {
      padding: 20px 15px 22px !important;
    }

    #ge-account-dashboard .gea-summary-card {
      min-height: 122px !important;
    }
	  }

	  html.ge-account-page-mounted,
	  html.ge-account-page-mounted body {
	    overflow-x: hidden !important;
	  }

	  @media (max-width: 680px) {
	    html.ge-account-page-mounted #allrecords,
	    html.ge-account-page-mounted .t-records,
	    html.ge-account-page-mounted .t-rec,
	    html.ge-account-page-mounted .t123,
	    html.ge-account-page-mounted .t-container {
	      width: 100vw !important;
	      max-width: 100vw !important;
	      min-width: 0 !important;
	      overflow-x: hidden !important;
	    }

	    html.ge-account-page-mounted .t-container {
	      padding-left: 0 !important;
	      padding-right: 0 !important;
	    }

	    #ge-account-dashboard,
	    #ge-account-dashboard .gea-page,
	    #ge-account-dashboard .gea-layout,
	    #ge-account-dashboard .gea-sidebar,
	    #ge-account-dashboard .gea-main,
	    #ge-account-dashboard .gea-panel {
	      width: 100% !important;
	      max-width: 100% !important;
	      min-width: 0 !important;
	    }

	    #ge-account-dashboard .gea-sitebar,
	    #ge-account-dashboard .gea-page {
	      width: calc(100vw - 16px) !important;
	      max-width: calc(100vw - 16px) !important;
	      margin-left: auto !important;
	      margin-right: auto !important;
	    }

	    #ge-account-dashboard .gea-main {
	      padding: 20px 14px 24px !important;
	    }

	    #ge-account-dashboard .gea-sidebar {
	      padding: 16px 14px 12px !important;
	    }

	    #ge-account-dashboard .gea-profile-name {
	      white-space: normal !important;
	      overflow: visible !important;
	      text-overflow: clip !important;
	      overflow-wrap: anywhere !important;
	    }

	    #ge-account-dashboard .gea-panel h2 {
	      overflow-wrap: anywhere !important;
	    }

	    #ge-account-dashboard .gea-list-item,
	    #ge-account-dashboard .gea-ord,
	    #ge-account-dashboard .gea-item-title,
	    #ge-account-dashboard .gea-item-note,
	    #ge-account-dashboard .gea-fav-name {
	      overflow-wrap: anywhere !important;
	    }
	  }

  @media (max-width: 680px) {
    html.ge-account-page-mounted,
    html.ge-account-page-mounted body {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      overflow-x: hidden !important;
    }

    html.ge-account-page-mounted #allrecords,
    html.ge-account-page-mounted .t-records,
    html.ge-account-page-mounted .t-rec,
    html.ge-account-page-mounted .t123,
    html.ge-account-page-mounted .t-container,
    html.ge-account-page-mounted .t-col {
      width: 100vw !important;
      max-width: 100vw !important;
      min-width: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      overflow-x: hidden !important;
    }

    #ge-account-dashboard {
      width: 100vw !important;
      max-width: 100vw !important;
      overflow-x: hidden !important;
    }

    #ge-account-dashboard .gea-sitebar,
    #ge-account-dashboard .gea-page {
      width: calc(100vw - 20px) !important;
      max-width: calc(100vw - 20px) !important;
      margin-left: auto !important;
      margin-right: auto !important;
      box-sizing: border-box !important;
    }

    #ge-account-dashboard .gea-layout {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    #ge-account-dashboard .gea-sidebar,
    #ge-account-dashboard .gea-main {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      margin: 0 0 12px !important;
      box-sizing: border-box !important;
    }

    #ge-account-dashboard .gea-main {
      padding: 22px 14px 24px !important;
    }

    #ge-account-dashboard .gea-nav {
      max-width: 100% !important;
      padding-right: 38vw !important;
    }

    /* КЕГЛЬ В ПОЛСОТНИ ТОЧЕК — ТОЛЬКО ЧИСЛУ, А НЕ ВСЕМУ ПОДРЯД.
       В этом правиле рядом с .gea-summary-value стоял ещё список: подзаголовок панели,
       название и примечание позиции, сама карточка сводки, строка списка, карточка
       заказа. Всем им назначался кегль 42–56 точек с !important. Видно этого не было,
       потому что каждому из них ниже по файлу кегль переопределяли ещё раз, — но
       наследование оставалось: любой НОВЫЙ текст внутри .gea-summary-card приезжал
       пятидесятым кеглем. На этом и развалились плитки рядом с бонусной картой:
       «4 767 ₽» переносилось по слогам, «30%» вылезало за плитку.
       Крупным должно быть число, и только оно. */
    #ge-account-dashboard .gea-summary-value {
      font-size: clamp(42px, 13vw, 56px) !important;
    }

    #ge-account-dashboard .gea-profile {
      grid-template-columns: 58px minmax(0, 1fr) !important;
      gap: 13px !important;
      align-items: center !important;
    }

    #ge-account-dashboard .gea-avatar {
      width: 58px !important;
      height: 58px !important;
      font-size: 22px !important;
      flex: 0 0 58px !important;
    }

    #ge-account-dashboard .gea-profile-name,
    #ge-account-dashboard .gea-profile-email {
      max-width: 100% !important;
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      overflow-wrap: anywhere !important;
    }

    #ge-account-dashboard .gea-nav {
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      scroll-snap-type: x proximity !important;
      gap: 9px !important;
      margin-left: -2px !important;
      padding: 10px 12px 10px 2px !important;
    }

    #ge-account-dashboard .gea-nav-button,
    #ge-account-dashboard .gea-nav-link {
      flex: 0 0 auto !important;
      scroll-snap-align: start !important;
      white-space: nowrap !important;
    }

    #ge-account-dashboard .gea-panel {
      border-radius: 28px !important;
      padding: 22px 14px 18px !important;
      overflow: hidden !important;
    }

    #ge-account-dashboard .gea-panel-head {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 12px !important;
      align-items: start !important;
      /* Кнопка в шапке раздела («В каталог», «Правила программы») — действие
         второстепенное, и растянутая во всю строку она спорит с заголовком за внимание.
         Прижимаем к левому краю по ширине содержимого. */
      justify-items: start !important;
    }

    #ge-account-dashboard .gea-panel-head .gea-button {
      width: auto !important;
      min-width: 0 !important;
    }

    #ge-account-dashboard .gea-panel h2 {
      font-size: clamp(36px, 12vw, 54px) !important;
      line-height: .92 !important;
      max-width: 100% !important;
    }

    #ge-account-dashboard .gea-panel-subtitle {
      font-size: 15px !important;
      line-height: 1.35 !important;
    }

    #ge-account-dashboard .gea-item-value {
      width: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 10px !important;
      text-align: left !important;
    }

    #ge-account-dashboard .gea-order-details,
    #ge-account-dashboard .gea-order-product {
      max-width: 100% !important;
      min-width: 0 !important;
    }

    #ge-account-dashboard .gea-order-product {
      grid-template-columns: 62px minmax(0, 1fr) !important;
      align-items: center !important;
    }

    #ge-account-dashboard .gea-order-product > strong {
      grid-column: 2 !important;
      justify-self: start !important;
    }

    #ge-account-dashboard .gea-avatar-settings {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 14px !important;
      text-align: left !important;
    }

    #ge-account-dashboard .gea-avatar-actions {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }

    #ge-account-dashboard .gea-field,
    #ge-account-dashboard .gea-form,
    #ge-account-dashboard .gea-form-grid {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }

    #ge-account-dashboard .gea-field input,
    #ge-account-dashboard .gea-field textarea,
    #ge-account-dashboard .gea-field select {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      font-size: 16px !important;
    }

    /* Компактная карточка избранного: фото слева ~104px, контент справа, без гигантских пустых плашек */
  }
  /* ===== Уведомления + админ-блоки ===== */
  #ge-account-dashboard .gea-nav-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:7px;padding:0 5px;border-radius:999px;background:#090a0c;color:#fff;font:700 11px/1 "Akrobat",Arial,sans-serif}
  #ge-account-dashboard .gea-notif-list{display:grid;gap:12px}
  #ge-account-dashboard .gea-notif{position:relative;padding:16px 18px;border:1px solid rgba(9,10,12,.07);border-radius:20px;background:#fff;box-shadow:0 10px 28px rgba(9,10,12,.06)}
  #ge-account-dashboard .gea-notif.is-unread{border-color:rgba(9,10,12,.3);box-shadow:0 10px 28px rgba(9,10,12,.06),0 0 0 1px rgba(9,10,12,.08)}
  /* Непрочитанное отмечаем красным: чёрная точка на чёрно-белой карточке терялась. */
  #ge-account-dashboard .gea-notif.is-unread::before{content:"";position:absolute;top:16px;right:16px;width:9px;height:9px;border-radius:50%;background:#e01b32;box-shadow:0 0 0 3px rgba(224,27,50,.16)}
  #ge-account-dashboard .gea-notif-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
  /* Типы уведомлений — строго чёрно-белые (без цветовой кодировки по тону), различаются
     только текстом/насыщенностью, чтобы не выбиваться из общей ч/б палитры сайта. */
  #ge-account-dashboard .gea-notif-type{padding:2px 10px;border-radius:999px;font:700 11px/1.4 "Akrobat",Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em;background:#eef0f1;color:#090a0c}
  #ge-account-dashboard .gea-notif-type-order{background:#090a0c;color:#fff}
  #ge-account-dashboard .gea-notif-type-promo{background:rgba(9,10,12,.1);color:#090a0c}
  #ge-account-dashboard .gea-notif-type-system{background:transparent;color:rgba(9,10,12,.55);border:1px solid rgba(9,10,12,.2)}
  #ge-account-dashboard .gea-notif-top time{font-size:12px;color:rgba(9,10,12,.55)}
  #ge-account-dashboard .gea-notif-title{font:700 16px/1.3 "Cyngle","Akrobat",Arial,sans-serif;color:#090a0c}
  #ge-account-dashboard .gea-notif-msg{margin-top:4px;font-size:14px;line-height:1.45;color:rgba(9,10,12,.72)}
  #ge-account-dashboard .gea-notif-link{display:inline-block;margin-top:8px;font-weight:700;color:#090a0c;text-decoration:underline}
  #ge-account-dashboard .gea-admin-block{margin-top:18px;padding-top:18px;border-top:1px solid rgba(9,10,12,.10)}
  #ge-account-dashboard .gea-admin-subhead{margin:12px 0 10px;font:800 15px/1.2 "Akrobat",Arial,sans-serif;text-transform:uppercase;letter-spacing:.03em;color:#090a0c}
  @media(max-width:600px){
    #ge-account-dashboard .gea-notif{padding:14px}
    #ge-account-dashboard .gea-admin-row{grid-template-columns:1fr!important}
  }

/* ===== Админ: список клиентов ===== */
#ge-account-dashboard .gea-users-list{display:grid;gap:12px;margin-top:12px}
#ge-account-dashboard .gea-user-card{padding:14px 16px;border:1px solid rgba(9,10,12,.07);border-radius:20px;background:#fff;box-shadow:0 10px 28px rgba(9,10,12,.06);display:grid;gap:10px}
#ge-account-dashboard .gea-user-main{display:flex;flex-direction:column;gap:2px}
#ge-account-dashboard .gea-user-main b{font:800 16px/1.2 "Cyngle","Akrobat",Arial,sans-serif;color:#090a0c}
#ge-account-dashboard .gea-user-main span{font-size:13px;color:rgba(9,10,12,.7)}
#ge-account-dashboard .gea-user-main small{font-size:11px;color:rgba(9,10,12,.5)}
#ge-account-dashboard .gea-user-stats{display:flex;flex-wrap:wrap;gap:14px}
#ge-account-dashboard .gea-user-stats span{display:flex;flex-direction:column;font-size:11px;color:rgba(9,10,12,.55);text-transform:uppercase;letter-spacing:.03em}
#ge-account-dashboard .gea-user-stats b{font:800 15px/1.1 "Akrobat",Arial,sans-serif;color:#090a0c}
#ge-account-dashboard .gea-user-actions{display:flex;flex-wrap:wrap;gap:8px}
#ge-account-dashboard .gea-user-actions button{padding:7px 12px;border:1px solid rgba(9,10,12,.16);border-radius:10px;background:#fff;font:600 12px/1 "Akrobat",Arial,sans-serif;cursor:pointer;transition:background .15s,color .15s}
#ge-account-dashboard .gea-user-actions button:hover{background:#090a0c;color:#fff;border-color:#090a0c}
#ge-account-dashboard .gea-user-orders{display:grid;gap:6px;margin-top:4px}
#ge-account-dashboard .gea-user-order{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#f4f5f6;font-size:13px}
#ge-account-dashboard .gea-user-order b{font-weight:700;color:#090a0c}
#ge-account-dashboard .gea-user-order small{color:rgba(9,10,12,.55)}
/* трек-номер/комментарий в заказе клиента */
#ge-account-dashboard .gea-order-track{margin-top:6px;font-size:13px;color:rgba(9,10,12,.72)}
#ge-account-dashboard .gea-order-track b{color:#090a0c}
@media(max-width:600px){
  #ge-account-dashboard .gea-user-stats{gap:10px}
  #ge-account-dashboard .gea-user-actions button{flex:1 1 30%}
}

/* ===== Уведомления: действия (Открыть / Прочитано) ===== */
#ge-account-dashboard .gea-notif-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px}
#ge-account-dashboard .gea-notif-link{font:700 14px/1 "Akrobat",Arial,sans-serif;color:#090a0c;text-decoration:underline;text-underline-offset:3px;transition:opacity .15s}
#ge-account-dashboard .gea-notif-link:hover{opacity:.6}
#ge-account-dashboard .gea-notif-read{margin:0;padding:0;border:0;background:transparent;color:rgba(9,10,12,.5);font:600 13px/1 "Akrobat",Arial,sans-serif;cursor:pointer;transition:color .15s}
#ge-account-dashboard .gea-notif-read:hover{color:#090a0c}
#ge-account-dashboard .gea-notif-readlabel{color:rgba(9,10,12,.35);font:600 13px/1 "Akrobat",Arial,sans-serif}

/* ===== Админ: все заказы ===== */
#ge-account-dashboard .gea-orders-admin{display:grid;gap:14px;margin-top:12px}
#ge-account-dashboard .gea-orders-admin,#ge-account-dashboard .gea-aorder{max-width:100%;overflow-x:hidden}
#ge-account-dashboard .gea-aorder{padding:14px 16px;border:1px solid rgba(9,10,12,.07);border-radius:20px;background:#fff;box-shadow:0 10px 28px rgba(9,10,12,.06);display:grid;gap:10px;min-width:0}
#ge-account-dashboard .gea-aorder *{min-width:0;word-break:break-word;overflow-wrap:anywhere}
#ge-account-dashboard .gea-aorder-head b{overflow-wrap:anywhere}
#ge-account-dashboard .gea-aorder-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#ge-account-dashboard .gea-aorder-head b{font:800 15px/1.2 "Akrobat",Arial,sans-serif;display:block}
#ge-account-dashboard .gea-aorder-head small{font-size:11px;color:rgba(9,10,12,.5)}
#ge-account-dashboard .gea-aorder-client{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:4px 16px;padding:8px 10px;border-radius:12px;background:rgba(9,10,12,.035);font-size:12px;color:rgba(9,10,12,.7)}
#ge-account-dashboard .gea-aorder-client b{color:#090a0c;font-weight:800}
#ge-account-dashboard .gea-content-list{display:grid;gap:12px}
#ge-account-dashboard .gea-content-item{display:grid;gap:10px;padding:14px;border-radius:20px;border:1px solid rgba(9,10,12,.07);background:#fff;box-shadow:0 10px 28px rgba(9,10,12,.06)}
#ge-account-dashboard .gea-content-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px}
#ge-account-dashboard .gea-content-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px 16px;font-size:13px;color:rgba(9,10,12,.75)}
#ge-account-dashboard .gea-content-body b{color:#090a0c;font-weight:700}
#ge-account-dashboard .gea-content-body a{color:#090a0c;font-weight:700;text-decoration:underline;text-underline-offset:3px}
#ge-account-dashboard .gea-aorder-items{display:grid;gap:8px}
#ge-account-dashboard .gea-aorder-item{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:10px;align-items:center}
#ge-account-dashboard .gea-aorder-item img{width:54px;height:54px;border-radius:10px;object-fit:contain;background:#f4f4f4}
#ge-account-dashboard .gea-aorder-item b{font:700 13px/1.2 "Akrobat",Arial,sans-serif;display:block}
#ge-account-dashboard .gea-aorder-item small{font-size:11px;color:rgba(9,10,12,.55)}
#ge-account-dashboard .gea-aorder-totals{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:rgba(9,10,12,.6)}
#ge-account-dashboard .gea-aorder-totals b{color:#090a0c;font-weight:800}
#ge-account-dashboard .gea-aorder-edit summary{cursor:pointer;font:700 13px/1 "Akrobat",Arial,sans-serif;color:#090a0c;padding:6px 0}
#ge-account-dashboard .gea-orders-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px;font-size:13px;color:rgba(9,10,12,.7)}
#ge-account-dashboard .gea-orders-pager button[disabled]{opacity:.4;cursor:default}
/* «Изменить статус»: компактный блок и МАЛЕНЬКАЯ кнопка сохранения */
#ge-account-dashboard .gea-aorder-edit{margin-top:4px;padding-top:8px;border-top:1px solid rgba(9,10,12,.08)}
#ge-account-dashboard .gea-aorder-edit[open]{display:grid;gap:8px}
#ge-account-dashboard .gea-aorder-edit .gea-field{margin:0}
#ge-account-dashboard .gea-aorder-edit .gea-field span{font-size:11px;margin-bottom:3px}
#ge-account-dashboard .gea-aorder-edit .gea-field input,
#ge-account-dashboard .gea-aorder-edit .gea-field select{min-height:40px;font-size:13px}
#ge-account-dashboard .gea-aorder-save{min-height:38px;padding:0 16px;width:auto;justify-self:start;font-size:12px;border-radius:12px}
/* Админ: адрес клиента и заявки на возврат */
#ge-account-dashboard .gea-admin-subblock{margin-top:12px;padding-top:12px;border-top:1px solid rgba(9,10,12,.08)}
#ge-account-dashboard .gea-admin-info{font-size:13px;color:rgba(9,10,12,.75);line-height:1.5}
#ge-account-dashboard .gea-admin-addr,#ge-account-dashboard .gea-admin-return{padding:8px 0;border-bottom:1px dashed rgba(9,10,12,.1)}
#ge-account-dashboard .gea-admin-addr:last-child,#ge-account-dashboard .gea-admin-return:last-child{border-bottom:0}
#ge-account-dashboard .gea-admin-addr small,#ge-account-dashboard .gea-admin-return small{display:block;margin-top:3px;font-size:11px;color:rgba(9,10,12,.55)}
@media(max-width:600px){
  #ge-account-dashboard .gea-aorder{padding:12px}
  #ge-account-dashboard .gea-aorder-item{grid-template-columns:44px minmax(0,1fr) auto;gap:8px}
  #ge-account-dashboard .gea-aorder-item img{width:44px;height:44px}
  #ge-account-dashboard .gea-admin-row{grid-template-columns:1fr!important;gap:8px!important}
  #ge-account-dashboard .gea-aorder-totals{gap:8px;font-size:11px}
}

/* FINAL account icon hover fix — не трогаем размер и не ломаем круглые аватары */
#ge-account-dashboard .gea-avatar,#ge-account-dashboard .gea-avatar-preview{overflow:hidden!important;border-radius:50%!important}
#ge-account-dashboard .gea-avatar img,#ge-account-dashboard .gea-avatar-preview img{border-radius:50%!important;object-fit:cover!important}
[data-ge-account-trigger],[data-ge-account],.ge-account-trigger,.desktop-account-link,.desktop-account-hitbox{overflow:visible!important;transform-origin:center!important;will-change:transform}
[data-ge-account-trigger]:hover,[data-ge-account]:hover,.ge-account-trigger:hover{transform:scale(1.025)!important}

/* GE rescue v2: avatars stay round */
.gea-avatar,.gea-avatar-preview{border-radius:50%!important;overflow:hidden!important}
.gea-avatar img,.gea-avatar-preview img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;border-radius:50%!important}


/* ============ СТРОКА ТОВАРА В РАСКРЫТОМ ЗАКАЗЕ ============
   Здесь стояли ДВА «спасательных» набора правил на один и тот же элемент — на 680 и на
   640 точек, оба сплошь из !important. Первый задавал сетку областями
   «img info» / «img price» с выравниванием по центру, второй тут же переопределял
   колонки, но области оставлял. Фотография растягивалась на две строки и висела по
   центру, название разъезжалось, цена уезжала под текст отдельной строкой. Владелец:
   «ровнее изобрази в моих заказах».
   Вместо двух наборов — один. Одна сетка на все экраны: фотография, текст, цена справа.
   На узком телефоне цена переходит под текст — но влево, в общую колонку, а не в
   отдельную область. */
#ge-account-dashboard .gea-order-product {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 2.6vw, 14px);
  padding: 12px 0;
  border-bottom: 1px solid rgba(9, 10, 12, 0.08);
}

#ge-account-dashboard .gea-order-product:last-child {
  border-bottom: 0;
}

#ge-account-dashboard .gea-order-product-image {
  flex: 0 0 auto;
  overflow: hidden;
  width: clamp(52px, 13vw, 62px);
  height: clamp(52px, 13vw, 62px);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(9, 10, 12, 0.08);
}

#ge-account-dashboard .gea-order-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Название товара. Две строки ровно — иначе строки разной высоты и список «прыгает». */
#ge-account-dashboard .gea-order-product > div:not(.gea-order-product-image) strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #0a0a0b;
  font: 700 clamp(13.5px, 3.4vw, 15px) / 1.25 "Akrobat", Arial, sans-serif;
  overflow-wrap: anywhere;
}

#ge-account-dashboard .gea-order-product small {
  display: block;
  margin-top: 4px;
  color: rgba(9, 10, 12, 0.55);
  font-size: clamp(11.5px, 2.9vw, 13px);
  line-height: 1.3;
  white-space: normal;
}

/* Цена — прямой ребёнок строки, в отличие от названия, которое лежит внутри блока. */
#ge-account-dashboard .gea-order-product > strong {
  justify-self: end;
  white-space: nowrap;
  font: 800 clamp(14px, 3.6vw, 16px) / 1 "Akrobat", Arial, sans-serif;
}

@media (max-width: 420px) {
  /* Совсем узкий экран: цена не помещается в строку с названием. Переносим её под
     текст, но в ту же колонку — так столбец остаётся один и ничего не разъезжается. */
  #ge-account-dashboard .gea-order-product {
    grid-template-columns: auto minmax(0, 1fr);
  }
  #ge-account-dashboard .gea-order-product > strong {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }
}

/* ===== ДЛИННОЕ УВЕДОМЛЕНИЕ: обрезка в списке + окно с полным текстом =====
   Раньше одно большое уведомление растягивало карточку на весь экран и его нельзя
   было нормально прочитать. Теперь в списке текст обрезан, а по кнопке открывается
   аккуратное окно. Оформление — как у остальных наших окон. */
.gea-notif-msg.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gea-notif-more {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #090a0c;
  cursor: pointer;
  font: 750 12px/1 "Akrobat", Arial, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.16s ease;
}

.gea-notif-more:hover {
  opacity: 0.65;
}

html.gea-notif-lock,
html.gea-notif-lock body {
  overflow: hidden !important;
}

#gea-notif-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: grid;
  place-items: center;
  padding: 18px;
  font-family: "Cyngle", "Cygre", "Akrobat", Arial, sans-serif;
}

#gea-notif-modal .gea-nm-backdrop {
  position: absolute;
  inset: 0;
  background: #0b0b0c;
  opacity: 0;
  transition: opacity 0.22s ease;
}

#gea-notif-modal.is-open .gea-nm-backdrop {
  opacity: 1;
}

#gea-notif-modal .gea-nm-grip { display: none; }
/* Всё внутри окна считаем по внешнему краю: иначе отступы прибавляются к ширине. */
#gea-notif-modal .gea-nm-card,
#gea-notif-modal .gea-nm-card * { box-sizing: border-box; max-width: 100%; }
#gea-notif-modal .gea-nm-card {
  position: relative;
  width: min(520px, 100%);
  max-height: min(78vh, 680px);
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(9, 10, 12, 0.1);
  border-radius: 26px;
  background: #eef0f1;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#gea-notif-modal.is-open .gea-nm-card {
  opacity: 1;
  transform: none;
}

#gea-notif-modal .gea-nm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

#gea-notif-modal .gea-nm-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #090a0c;
  background: rgba(9, 10, 12, 0.06);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

#gea-notif-modal .gea-nm-close:hover {
  color: #fff;
  background: #090a0c;
}

#gea-notif-modal .gea-nm-close svg {
  width: 17px;
  height: 17px;
}

#gea-notif-modal .gea-nm-date {
  display: block;
  color: rgba(9, 10, 12, 0.45);
  font-size: 12.5px;
}

#gea-notif-modal .gea-nm-title {
  margin: 8px 0 14px;
  color: #090a0c;
  font: 800 clamp(19px, 3.4vw, 25px) / 1.15 "Akrobat", Arial, sans-serif;
  text-transform: uppercase;
}

/* Переносы строк из текста уведомления сохраняем как есть. */
#gea-notif-modal .gea-nm-body {
  color: rgba(9, 10, 12, 0.72);
  font-size: 15px;
  line-height: 1.62;
  white-space: pre-line;
}

#gea-notif-modal .gea-nm-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 20px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  color: #eef0f1;
  background: #090a0c;
  text-decoration: none;
  font: 750 13px/1 "Akrobat", Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

#gea-notif-modal .gea-nm-action:hover {
  color: #090a0c;
  background: transparent;
  border-color: #090a0c;
}

/* ТЕЛЕФОН. Окно во весь экран с острыми краями выглядело как системная ошибка.
   Делаем карточку-шторку снизу: крупные скругления сверху, безопасные отступы под
   «чёлку» и жест, привычный для телефона. */
@media (max-width: 640px) {
  #gea-notif-modal {
    padding: 0;
    place-items: end stretch;
  }
  #gea-notif-modal .gea-nm-card {
    /* Без этого отступы и рамка прибавляются к 100% — карточка вылезала за экран. */
    box-sizing: border-box;
    width: 100%;
    max-height: 88vh;
    padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0;
    border-bottom: 0;
    transform: translateY(28px);
  }
  /* Ручка сверху: полоска, за которую карточку тянут вниз (закрыть) или вверх
     (развернуть на весь экран). Область нажатия шире самой полоски — иначе в неё
     не попасть пальцем. */
  #gea-notif-modal .gea-nm-grip {
    display: block;
    width: 100%;
    padding: 4px 0 12px;
    margin: -6px 0 0;
    border: 0;
    background: transparent;
    cursor: grab;
    touch-action: none;
  }
  #gea-notif-modal .gea-nm-grip::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto;
    border-radius: 999px;
    background: rgba(9, 10, 12, 0.22);
  }
  #gea-notif-modal.is-tall .gea-nm-card { max-height: 96dvh; }
  #gea-notif-modal.is-dragging .gea-nm-card { transition: none; }
  #gea-notif-modal .gea-nm-action { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #gea-notif-modal .gea-nm-card,
  #gea-notif-modal .gea-nm-backdrop {
    transition: none;
  }
}

/* ==========================================================================
   ЛЁГКИЙ РЕДИЗАЙН КАБИНЕТА (белая схема сохранена)
   ==========================================================================
   Прошлая попытка перекрасила кабинет в тёмный — и вышло плохо: поверхности
   стали тёмными, а цвета текста остались от светлой схемы, поэтому названия
   товаров, «Убрать» и почта читались тёмным по тёмному. Тот заход откачен
   целиком.
   Здесь — только то, что можно проверить: белые панели остаются белыми,
   структура и все функции не тронуты, меняются исключительно читаемость
   вторичного текста, единый радиус, толщина линеек и поведение кнопок.
   Каждое правило ниже прогнано аудитом контраста по всем десяти вкладкам. */

/* ---- 1. Читаемость вторичного текста ----
   Подписи, даты и примечания были набраны прозрачностью .35–.55 — на белом это
   2.3–4.4 при норме 4.5 (WCAG AA). Не «сливалось», но читалось с усилием, а на
   солнце и на плохом экране — тем более. Поднимаем плотность, не трогая иерархию:
   вторичный текст остаётся заметно светлее основного. */

#ge-account-dashboard .gea-panel-subtitle,
#ge-account-dashboard .gea-profile-email,
#ge-account-dashboard .gea-nav-button.gea-logout,
#ge-account-dashboard .gea-item-note,
#ge-account-dashboard .gea-notif-read,
#ge-account-dashboard time {
  color: rgba(9, 10, 12, 0.66);
}

#ge-account-dashboard .gea-summary-label {
  color: rgba(9, 10, 12, 0.64);
}

#ge-account-dashboard .gea-empty,
#ge-account-dashboard .gea-notif-readlabel {
  color: rgba(9, 10, 12, 0.62);
}

/* На тёмной плашке «Бонусы» — та же логика, но в белую сторону.
   Пополнение сюда больше не входит: карточка стала белой, и белый текст на ней
   означал бы «белым по белому» — ровно та ошибка, из-за которой откатывали тёмную схему. */
#ge-account-dashboard .is-dark .gea-summary-label {
  color: rgba(255, 255, 255, 0.72);
}

#ge-account-dashboard .gea-topup-card .gea-summary-label,
#ge-account-dashboard .gea-topup-card span {
  color: rgba(255, 255, 255, 0.72);
}

/* ---- 2. Единый радиус и линейки вместо теней ----
   Карточки жили с разными радиусами (24 / 20 / 18) и мягкой тенью — на белом
   фоне тень даёт мутный ореол. Один радиус и одна тонкая линейка: спокойнее и
   ближе к остальным страницам, но схема остаётся светлой. */

#ge-account-dashboard .gea-summary-card {
  border-radius: 22px;
  border-color: rgba(9, 10, 12, 0.12);
  box-shadow: none;
}

#ge-account-dashboard .gea-summary-card.is-dark {
  border-color: var(--dark);
}

/* ---- 3. Кнопки: инверсия вместо затемнения ----
   По сайту принято, что активная кнопка при наведении меняется на противоход
   (тёмное ↔ светлое), а не просто гаснет. Приводим к тому же, и обязательно
   задаём фон и цвет ВМЕСТЕ: если менять только один из них, получается тёмное
   по тёмному — ровно так уже ломались «Отметить прочитанным» и кнопка входа. */

#ge-account-dashboard .gea-nav-button {
  border-radius: 999px;
}

#ge-account-dashboard .gea-nav-button:hover:not(.is-active) {
  color: #090a0c;
  background: rgba(9, 10, 12, 0.07);
}

/* ---- 4. Заголовки разделов ---- */

#ge-account-dashboard .gea-panel h2 {
  letter-spacing: -0.015em;
}

/* ---- 1б. Точечно: подписи, которые перебивались более цепкими правилами ----
   Общее правило выше их не достало — у этих селекторов своя специфичность
   (а у состава заказа на мобилке ещё и !important). Дотягиваем адресно, иначе
   аудит контраста продолжает на них ругаться. */

#ge-account-dashboard .gea-order-product small {
  color: rgba(9, 10, 12, 0.66) !important;
}

#ge-account-dashboard .gea-amount-suffix,
#ge-account-dashboard .gea-topup-form .gea-field span {
  color: rgba(255, 255, 255, 0.74);
}

/* Карточка уведомления кликабельна целиком — значит это должно быть видно.
   Курсор и подсветка при наведении: без них человек не догадается, что по карточке
   вообще можно нажать (а раньше и правда было нельзя — открывала только кнопка
   «Читать полностью», и то лишь у длинных уведомлений). */
#ge-account-dashboard .gea-notif {
  cursor: pointer;
  transition: background 0.16s ease;
}

#ge-account-dashboard .gea-notif:hover {
  background: rgba(9, 10, 12, 0.04);
}

/* Ссылка и кнопка внутри живут своей жизнью — курсор у них свой. */
#ge-account-dashboard .gea-notif a,
#ge-account-dashboard .gea-notif button {
  cursor: pointer;
}

/* Части поля суммы задаём ПОСЛЕ общего правила «все span в карточке — один серый»:
   иначе подпись, подсказка и знак ₽ получали одинаковый тон и переставали различаться,
   а подсветка ошибки не срабатывала вовсе. */
#ge-account-dashboard .gea-topup-card .gea-topup-sum-label { color: rgba(255, 255, 255, 0.45); }
#ge-account-dashboard .gea-topup-card .gea-topup-sum-cur { color: rgba(255, 255, 255, 0.5); }
#ge-account-dashboard .gea-topup-card .gea-topup-sum-hint { color: rgba(255, 255, 255, 0.42); }
#ge-account-dashboard .gea-topup-card .gea-topup-sum-hint.is-bad { color: #ffffff; }
#ge-account-dashboard .gea-topup-card .gea-topup-sum-input { color: #ffffff; }
#ge-account-dashboard .gea-topup-card .gea-topup-now-label { color: rgba(255, 255, 255, 0.45); }
#ge-account-dashboard .gea-topup-card .gea-topup-now-value { color: #ffffff; }

/* ===== ФОТО В УВЕДОМЛЕНИИ =====
   В списке — маленькая картинка справа, как в почтовых приложениях: сразу видно, что
   уведомление с картинкой, и карточка при этом не превращается в афишу. По нажатию
   фото открывается во весь экран отдельным слоем — и на телефоне, и на компьютере. */
#ge-account-dashboard .gea-notif.has-pic {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
#ge-account-dashboard .gea-notif.has-pic .gea-notif-main { flex: 1 1 auto; min-width: 0; }
#ge-account-dashboard .gea-notif-pic {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 1px solid rgba(9, 10, 12, 0.12);
  border-radius: 14px;
  background: rgba(9, 10, 12, 0.04);
  cursor: zoom-in;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
#ge-account-dashboard .gea-notif-pic { position: relative; }
#ge-account-dashboard .gea-notif-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Кружок «не прочитано» висит в правом верхнем углу карточки — миниатюра упиралась в
   него и выглядела сбитой. Сдвигаем фото левее ровно настолько, чтобы точка стояла
   в своём углу, а не на картинке. */
#ge-account-dashboard .gea-notif.has-pic.is-unread .gea-notif-pic { margin-right: 16px; }
#ge-account-dashboard .gea-notif.has-pic.is-unread { padding-right: 14px; }
/* Сколько всего фото внутри: видно, что это подборка, а не одна картинка. */
#ge-account-dashboard .gea-notif-piccount {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(9, 10, 12, 0.78);
  color: #f4f4f1;
  font: 700 11px/1 "Akrobat", Arial, sans-serif;
}
#ge-account-dashboard .gea-notif-pic:hover { transform: scale(1.03); border-color: rgba(9, 10, 12, 0.3); }
@media (max-width: 560px) {
  #ge-account-dashboard .gea-notif-pic { width: 62px; height: 62px; border-radius: 12px; }
}

/* ===== ПОДБОРКА ФОТО В КРУПНОМ ПЛАНЕ =====
   Лента с прилипанием: пальцем на телефоне, кнопками и точками на компьютере.
   Никакого JS-«движка» — обычный overflow-x + scroll-snap, поэтому она не ломается,
   когда картинки догружаются вразнобой. */
#gea-notif-modal .gea-nm-carousel { position: relative; margin: 14px 0 4px; }
#gea-notif-modal .gea-nm-shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 18px;
}
#gea-notif-modal .gea-nm-shots::-webkit-scrollbar { display: none; }
#gea-notif-modal .gea-nm-shots.is-single { display: block; margin: 14px 0 4px; overflow: visible; }
#gea-notif-modal .gea-nm-slide { scroll-snap-align: center; padding: 0 2px; }

#gea-notif-modal .gea-nm-pic {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: rgba(9, 10, 12, 0.05);
  cursor: zoom-in;
  overflow: hidden;
}
/* Фото показываем целиком. Раньше стояло object-fit: cover — картинка растягивалась
   на всю ширину ленты и всё, что не влезло, срезалось сверху и снизу; на снимках
   владельца у уведомлений были видны только середины кадров. */
#gea-notif-modal .gea-nm-pic img {
  width: 100%;
  height: auto;
  max-height: 52vh;
  object-fit: contain;
  display: block;
}

#gea-notif-modal .gea-nm-cap {
  margin: 8px 2px 0;
  color: rgba(9, 10, 12, 0.6);
  font: 600 13px/1.4 "Akrobat", Arial, sans-serif;
}
/* Кнопка у отдельного фото — тоньше общей: она про одну вещь, а не про всю новость.
   СПЛОШНАЯ, как и во всплывающем уведомлении на сайте: пустая обводка подхватывала
   чужое подчёркивание ссылок Тильды и снизу рисовалась лишняя линия. Подчёркивание и
   фоновый градиент (им Тильда и рисует линию) гасим явно. */
#gea-notif-modal .gea-nm-shotbtn {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin: 8px 2px 0;
  padding: 0 18px;
  border: 2px solid #090a0c;
  border-radius: 999px;
  color: #f4f4f1;
  background: #090a0c;
  text-decoration: none !important;
  background-image: none !important;
  box-shadow: none;
  font: 750 12px/1 "Akrobat", Arial, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.16s ease, background 0.16s ease;
}
/* Наведение — обратный ход: заливка уходит, текст чернеет. */
#gea-notif-modal .gea-nm-shotbtn:hover,
#gea-notif-modal .gea-nm-shotbtn:focus-visible { color: #090a0c; background: transparent; }

#gea-notif-modal .gea-nm-arrow {
  position: absolute;
  top: 50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-top: -30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 244, 241, 0.92);
  color: #090a0c;
  box-shadow: 0 6px 18px rgba(9, 10, 12, 0.18);
  cursor: pointer;
  transition: transform 0.16s ease, opacity 0.16s ease;
}
#gea-notif-modal .gea-nm-arrow.is-prev { left: 8px; }
#gea-notif-modal .gea-nm-arrow.is-next { right: 8px; }
#gea-notif-modal .gea-nm-arrow svg { width: 18px; height: 18px; }
#gea-notif-modal .gea-nm-arrow:hover { transform: scale(1.06); }
/* На телефоне листают пальцем — стрелки только мешают и закрывают фото. */
@media (max-width: 640px), (hover: none) {
  #gea-notif-modal .gea-nm-arrow { display: none; }
}

#gea-notif-modal .gea-nm-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
#gea-notif-modal .gea-nm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(9, 10, 12, 0.2);
  transition: width 0.2s ease, background 0.2s ease;
}
#gea-notif-modal .gea-nm-dot.is-on { width: 18px; border-radius: 999px; background: #090a0c; }

/* Просмотр во весь экран. */
#gea-photo-view {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#gea-photo-view.is-open { opacity: 1; }
#gea-photo-view .gea-pv-backdrop { position: absolute; inset: 0; background: rgba(6, 7, 9, 0.92); }
#gea-photo-view .gea-pv-img {
  position: relative;
  max-width: min(1100px, 96vw);
  max-height: 88vh;
  border-radius: 16px;
  object-fit: contain;
  transform: scale(0.96);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.25, 1);
}
#gea-photo-view.is-open .gea-pv-img { transform: none; }
#gea-photo-view .gea-pv-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(244, 244, 241, 0.25);
  border-radius: 50%;
  background: rgba(12, 13, 16, 0.6);
  color: #f4f4f1;
  cursor: pointer;
}
#gea-photo-view .gea-pv-close svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  #gea-photo-view, #gea-photo-view .gea-pv-img { transition: none; }
}

/* Виды уведомлений: акция, новости, обновление — каждый со своей плашкой, но в
   одном чёрно-белом ключе. Цвет здесь только подсказка: слово написано рядом. */
#ge-account-dashboard .gea-notif-type-promo {
  background: #090a0c;
  color: #fff;
}
#ge-account-dashboard .gea-notif-type-news {
  background: transparent;
  color: #090a0c;
  border: 1px solid rgba(9, 10, 12, 0.28);
}
#ge-account-dashboard .gea-notif-type-update {
  background: rgba(9, 10, 12, 0.08);
  color: rgba(9, 10, 12, 0.72);
}


/* ===== РЕКВИЗИТЫ ДЛЯ ВОЗВРАТА =====
   Отдельная карточка внутри формы: это не «ещё одно поле», а место, куда уйдут
   деньги — человек должен видеть границу и понимать, что с номером будет. */
#ge-account-dashboard .gea-refund {
  margin: 4px 0 2px;
  padding: 16px;
  border: 1px solid rgba(9, 10, 12, 0.1);
  border-radius: 18px;
  background: rgba(9, 10, 12, 0.03);
}
#ge-account-dashboard .gea-refund-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
#ge-account-dashboard .gea-refund-title {
  font: 800 13px/1.2 "Akrobat", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #090a0c;
}
/* Обещание про шифрование — рядом с полем, а не в подвале страницы: читают его
   именно в тот момент, когда решают, вводить номер или нет. */
#ge-account-dashboard .gea-refund-safe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(9, 10, 12, 0.5);
  font: 600 11.5px/1.3 "Akrobat", Arial, sans-serif;
}
#ge-account-dashboard .gea-refund-safe svg { width: 15px; height: 15px; flex: 0 0 auto; }
#ge-account-dashboard .gea-refund-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  #ge-account-dashboard .gea-refund { padding: 14px; }
  #ge-account-dashboard .gea-refund-row { grid-template-columns: 1fr; }
}
/* Номер набирают цифрами — моноширинный шрифт и разрядка, чтобы перечитать. */
#ge-account-dashboard .gea-refund input[name="cardNumber"] {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}
#ge-account-dashboard .gea-field-note {
  display: block;
  margin-top: 6px;
  font: 600 12px/1.35 "Akrobat", Arial, sans-serif;
  font-style: normal;
  color: rgba(9, 10, 12, 0.45);
  transition: color 0.15s ease;
}
#ge-account-dashboard .gea-field-note.is-warn { color: #b8341f; }
#ge-account-dashboard .gea-field-note.is-ok { color: #1a7f4b; }


/* ===== ФОТО К ЗАЯВКЕ НА ВОЗВРАТ =====
   Снимок брака закрывает спор за минуту, поэтому кнопка добавления — крупная и
   заметная, а миниатюры стоят сеткой, которая сама перестраивается под экран. */
#ge-account-dashboard .gea-shots {
  margin: 2px 0;
  padding: 16px;
  border: 1px solid rgba(9, 10, 12, 0.1);
  border-radius: 18px;
  background: rgba(9, 10, 12, 0.03);
}
#ge-account-dashboard .gea-shots-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
#ge-account-dashboard .gea-shots-hint {
  color: rgba(9, 10, 12, 0.5);
  font: 600 11.5px/1.3 "Akrobat", Arial, sans-serif;
}
#ge-account-dashboard .gea-shots-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}
#ge-account-dashboard .gea-shots-list:empty { display: none; }
#ge-account-dashboard .gea-shot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(9, 10, 12, 0.06);
  animation: gea-shot-in 0.22s ease both;
}
@keyframes gea-shot-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
#ge-account-dashboard .gea-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
#ge-account-dashboard .gea-shot-x {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(9, 10, 12, 0.72);
  color: #f4f4f1;
  cursor: pointer;
}
#ge-account-dashboard .gea-shot-x svg { width: 13px; height: 13px; }
#ge-account-dashboard .gea-shots-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 11px 18px;
  border: 1px dashed rgba(9, 10, 12, 0.28);
  border-radius: 14px;
  color: rgba(9, 10, 12, 0.65);
  background: transparent;
  cursor: pointer;
  font: 700 12.5px/1 "Akrobat", Arial, sans-serif;
  transition: color 0.16s ease, border-color 0.16s ease;
}
#ge-account-dashboard .gea-shots-add:hover { color: #090a0c; border-color: #090a0c; }
#ge-account-dashboard .gea-shots-add svg { width: 16px; height: 16px; }
#ge-account-dashboard .gea-shots-list:empty + .gea-shots-add { margin-top: 0; }

/* Миниатюры в уже отправленной заявке — мелкие, в одну строку. */
#ge-account-dashboard .gea-shots-mini { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
#ge-account-dashboard .gea-shot-mini {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(9, 10, 12, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(9, 10, 12, 0.04);
  cursor: zoom-in;
  transition: transform 0.16s ease;
}
#ge-account-dashboard .gea-shot-mini:hover { transform: scale(1.06); }
#ge-account-dashboard .gea-shot-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ===== ЕДИНАЯ ФОРМА ВОЗВРАТА И ОБМЕНА =====
   Раньше это была лента полей во всю длину экрана — до кнопки приходилось листать.
   Теперь поля стоят парами, а половина формы вообще скрыта: при обмене реквизиты
   карты не показываются, при возврате — размер обмена. */
#ge-account-dashboard .gea-rf { gap: 14px; }
#ge-account-dashboard .gea-rf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#ge-account-dashboard .gea-rf-part[hidden] { display: none; }
#ge-account-dashboard .gea-rf-part { animation: gea-rf-in 0.2s ease both; }
@keyframes gea-rf-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Выбор «вернуть или обменять» — две крупные карточки, а не мелкие кружки:
   это главное решение в форме, и промахнуться по нему пальцем нельзя. */
#ge-account-dashboard .gea-rf-kind {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#ge-account-dashboard .gea-rf-opt { position: relative; display: block; cursor: pointer; }
#ge-account-dashboard .gea-rf-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#ge-account-dashboard .gea-rf-opt-box {
  display: block;
  padding: 14px 16px;
  border: 1px solid rgba(9, 10, 12, 0.14);
  border-radius: 16px;
  background: #fff;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
#ge-account-dashboard .gea-rf-opt-title {
  display: block;
  font: 800 14px/1.2 "Akrobat", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #090a0c;
}
#ge-account-dashboard .gea-rf-opt-note {
  display: block;
  margin-top: 4px;
  font: 600 12px/1.3 "Akrobat", Arial, sans-serif;
  color: rgba(9, 10, 12, 0.5);
}
#ge-account-dashboard .gea-rf-opt input:checked + .gea-rf-opt-box {
  border-color: #090a0c;
  background: #090a0c;
}
#ge-account-dashboard .gea-rf-opt input:checked + .gea-rf-opt-box .gea-rf-opt-title { color: #f4f4f1; }
#ge-account-dashboard .gea-rf-opt input:checked + .gea-rf-opt-box .gea-rf-opt-note { color: rgba(244, 244, 241, 0.6); }
#ge-account-dashboard .gea-rf-opt input:focus-visible + .gea-rf-opt-box {
  outline: 2px solid #090a0c;
  outline-offset: 2px;
}

/* Кнопка отправки и статус — одной строкой внизу, а не через весь экран. */
#ge-account-dashboard .gea-rf-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#ge-account-dashboard .gea-rf-foot .gea-form-status { margin: 0; }
#ge-account-dashboard .gea-rf textarea { min-height: 64px; }

@media (max-width: 620px) {
  #ge-account-dashboard .gea-rf-grid { grid-template-columns: 1fr; }
  #ge-account-dashboard .gea-rf-kind { grid-template-columns: 1fr; }
  #ge-account-dashboard .gea-rf-foot .gea-button { width: 100%; }
}

/* ============================================================================
   КАРТОЧКИ КАБИНЕТА — СПОКОЙНЫЙ СВЕТЛЫЙ ЛИСТ.
   Схема остаётся прежней: чёрная страница, на ней светлая рабочая область. Меняется
   то, из чего она собрана. Раньше каждая карточка была отдельной белой плашкой с
   мягкой тенью — на белом листе тень даёт мутный ореол, и десяток таких плашек
   читается как россыпь наклеек. Здесь принят ход больших сервисов вроде ChatGPT:
   одна белая поверхность, волосяная линейка вместо тени, крупный спокойный радиус,
   подписи обычными строчными серым, а не капслоком, и ровно один чёрный акцент на
   экран. Разметка не трогается — только цвет, линейки, радиусы и начертания.
   ============================================================================ */
#ge-account-dashboard {
  --лист: #ffffff;
  --лист-2: #f7f7f6;
  --линия: #e4e4e1;
  --линия-2: #d6d6d2;
  --чернила: #0d0d0d;
  /* Второй план: серее уже нельзя — на белом ниже 4.5 по контрасту. */
  --чернила-2: #5d5d5d;
  --акцент: #090a0c;
}

/* ---- 1. Карточки сводки: «Бонусы», «Баланс», «Заказы», «G coins» ---- */
#ge-account-dashboard .gea-summary {
  gap: 14px;
}

#ge-account-dashboard .gea-summary-card {
  /* Карточка вытянута: высота ниже, а углы скруглены сильнее — так четыре
     показателя читаются одной строкой, а не столбиком коробок. */
  min-height: 104px;
  padding: 18px 24px;
  gap: 10px;
  border: 1px solid var(--линия);
  border-radius: 30px;
  background: var(--лист);
  box-shadow: none;
  transition: border-color 0.16s ease;
}

@media (hover: hover) {
  #ge-account-dashboard .gea-summary-card:hover {
    border-color: var(--линия-2);
  }
}

/* Один чёрный акцент на экран — «Бонусы». Тот же чёрный, что у блока пополнения:
   два разных тёмных рядом читались бы как ошибка печати. */
#ge-account-dashboard .gea-summary-card.is-dark {
  color: #ffffff;
  background: var(--акцент);
  border-color: var(--акцент);
}

@media (hover: hover) {
  #ge-account-dashboard .gea-summary-card.is-dark:hover {
    border-color: var(--акцент);
  }
}

/* Подпись — обычными строчными, а не капслоком с разрядкой: так её читают, а не
   разбирают. Размер меньше значения ровно настолько, чтобы не спорить с ним. */
#ge-account-dashboard .gea-summary-label {
  color: var(--чернила-2);
  font: 600 13.5px/1.2 "Cyngle", "Cygre", "Akrobat", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

#ge-account-dashboard .is-dark .gea-summary-label,
#ge-account-dashboard .gea-topup-card .gea-summary-label {
  color: rgba(255, 255, 255, 0.72);
}

#ge-account-dashboard .gea-summary-value {
  color: inherit;
  font: 800 36px/1 "Akrobat", Arial, sans-serif;
  letter-spacing: -0.02em;
}

/* ---- 2. Остальные карточки — тем же языком ----
   Заказ, операция, товар в избранном, уведомление и служебные блоки собираются из
   одного набора: белая поверхность, линейка, тот же радиус. */
#ge-account-dashboard .gea-list-item,
/* Поле для фото товара — не белое, иначе снимок на белом фоне теряет края. */
/* ---- 3. Пополнение баланса — второй чёрный блок, тот же оттенок ---- */
#ge-account-dashboard .gea-topup-card,


/* Подписи внутри чёрного блока были прозрачностью .42–.45 — на чёрном это ровно на
   границе читаемости. Поднимаем до .72: та же роль второго плана, но текст видно. */
#ge-account-dashboard .gea-topup-card .gea-topup-now-label,
#ge-account-dashboard .gea-topup-card .gea-topup-sum-label,
#ge-account-dashboard .gea-topup-card .gea-topup-sum-hint,
#ge-account-dashboard .gea-topup-card .gea-topup-text,
/* ---- 4. Подписи, которые не дотягивали до нормы контраста ----
   Прозрачность .45–.5 чёрным по светлому даёт 3.0–3.7 при норме 4.5: строка вроде
   бы есть, а прочитать её нельзя. Задаём цвет плотностью, а не прозрачностью. */
#ge-account-dashboard .gea-rf-opt-note,
#ge-account-dashboard .gea-refund-safe,
#ge-account-dashboard .gea-field-note,
#ge-account-dashboard .gea-shots-hint {
  color: var(--чернила-2);
}

#ge-account-dashboard .gea-rf-opt input:checked + .gea-rf-opt-box .gea-rf-opt-note {
  color: rgba(255, 255, 255, 0.72);
}

/* ---- 5. Кнопки и разделы ----
   Главное действие — чёрная капсула, второстепенное — та же капсула обводкой.
   Разделы слева: без обводок, текущий подсвечен мягкой заливкой, как пункт меню в
   боковой колонке ChatGPT. */
#ge-account-dashboard .gea-button,
#ge-account-dashboard .gea-product-link {
  border-radius: 999px;
}

/* Заливка раздела — капсула, а не прямоугольник со скруглением: полукруглые торцы
   повторяют форму кнопок на сайте. Радиус берём заведомо больше половины высоты. */
#ge-account-dashboard .gea-nav-button,
#ge-account-dashboard .gea-nav-link {
  border: 0;
  border-radius: 999px;
  color: var(--чернила);
  background: transparent;
  transition: background 0.16s ease, color 0.16s ease;
}

@media (hover: hover) {
  #ge-account-dashboard .gea-nav-button:hover:not(.is-active),
  #ge-account-dashboard .gea-nav-link:hover {
    color: var(--чернила);
    background: #ececea;
  }
}

/* Текущий раздел — чёрная капсула; надпись и значок на ней белые. Значок нарисован
   currentColor, поэтому отдельного правила ему не нужно — он идёт за цветом текста. */
#ge-account-dashboard .gea-nav-button.is-active,
#ge-account-dashboard .gea-nav-button[aria-selected="true"] {
  color: #ffffff;
  background: var(--акцент);
}

/* Счётчик на чёрной капсуле переворачивается: он сам был чёрным с белой цифрой. */
#ge-account-dashboard .gea-nav-button.is-active .gea-nav-badge {
  color: var(--акцент);
  background: #ffffff;
}

/* Полоса разделов на телефоне: там свои размеры с !important — радиус тоже. */
@media (max-width: 900px) {
  #ge-account-dashboard .gea-nav-button,
  #ge-account-dashboard .gea-nav-link {
    border-radius: 999px !important;
  }
}

#ge-account-dashboard .gea-nav-button.gea-logout {
  color: var(--чернила-2);
}

/* ---- 6. «Правила программы» — надписью, а не кнопкой ----
   Ссылка стояла чёрной пилюлей вровень с заголовком «Баланс и бонусы» и спорила с
   ним за внимание: две тяжёлые формы в одной строке. Это не действие раздела, а
   отсылка к правилам — поэтому надпись у правого края, мельче заголовка, с тонким
   подчёркиванием.

   ТОЛЬКО ОНА. «В каталог» и «Пополнить баланс» — это действия, и надписью они
   выглядят потерянно: человек ищет глазами кнопку. Им оставлена капсула, только
   она не растягивается на всю ширину заголовка (ниже). */
#ge-account-dashboard .gea-panel-head a.gea-button[href*="bonus-system"] {
  align-self: flex-end;
  justify-self: end;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--чернила-2);
  background: transparent;
  box-shadow: none;
  font: 700 13.5px/1.3 "Cyngle", "Cygre", "Akrobat", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(9, 10, 12, 0.22);
  transition: color 0.16s ease, text-decoration-color 0.16s ease;
}

@media (hover: hover) {
  #ge-account-dashboard .gea-panel-head a.gea-button[href*="bonus-system"]:hover {
    color: var(--чернила);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    text-decoration-color: var(--чернила);
  }
}

/* Кнопка в шапке раздела — обычного размера, как все кнопки кабинета: уменьшенная
   она читалась как второстепенная, хотя «Пополнить баланс» — главное действие
   раздела. На компьютере стоит у правого края, вровень с заголовком.

   НА ТЕЛЕФОНЕ — ВО ВСЮ ШИРИНУ. Там шапка раздела становится столбиком, и короткая
   кнопка, прижатая к правому краю, висит в пустоте под заголовком. Во всю ширину
   она читается как то, что и надо нажать. */
#ge-account-dashboard .gea-panel-head .gea-button {
  justify-self: end;
  align-self: end;
  width: auto;
}

@media (max-width: 900px) {
  /* Кнопка в шапке раздела на телефоне НЕ растягивается. Растянутая во всю ширину, она
     читается как главное действие экрана, хотя «В каталог» и «Правила программы» —
     уход со страницы. Владелец: «ровнее изобрази». Прижимаем влево, по содержимому. */
  #ge-account-dashboard .gea-panel-head .gea-button {
    justify-self: start;
    width: auto;
  }
  /* Кроме ссылки на правила: она и на телефоне остаётся надписью у правого края. */
  #ge-account-dashboard .gea-panel-head a.gea-button[href*="bonus-system"] {
    justify-self: end;
    width: auto;
  }
}

/* ---- 7. Кнопки — один чёрный и одна форма ----
   Кнопки достались от прежнего кабинета: заливка серо-чёрная (#202126) — единственный
   такой цвет на странице, рядом с чистым чёрным карточки бонусов он читается как
   выцветший. Плюс крупный кегль с разрядкой, из-за которого «Сохранить адрес» или
   «В каталог» весили больше заголовка раздела. Приводим к языку карточек: тот же
   чёрный, что у акцентов, кегль поменьше, форма — капсула. Второстепенная кнопка не
   заливается вовсе: белая с волосяной линейкой, как сами карточки. */
#ge-account-dashboard .gea-button,
#ge-account-dashboard .gea-product-link {
  min-height: 50px;
  padding: 0 26px;
  border: 2px solid var(--акцент);
  color: #ffffff;
  background: var(--акцент);
  box-shadow: none;
  font: 750 12.5px/1 "Akrobat", Arial, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

@media (hover: hover) {
  #ge-account-dashboard .gea-button:hover,
  #ge-account-dashboard .gea-product-link:hover {
    color: var(--акцент);
    background: transparent;
    border-color: var(--акцент);
    box-shadow: none;
  }
}

/* Светлая и «оплатить» — та же капсула наоборот. Пара «цвет + фон» задаётся вместе:
   именно на раздельных правилах в этом файле уже получалось тёмное по тёмному. */
#ge-account-dashboard .gea-button.is-light,
#ge-account-dashboard .gea-pay-order {
  color: var(--акцент);
  background: var(--лист);
  border: 2px solid var(--акцент);
}

@media (hover: hover) {
  #ge-account-dashboard .gea-button.is-light:hover,
  #ge-account-dashboard .gea-pay-order:hover {
    color: #ffffff;
    background: var(--акцент);
    border-color: var(--акцент);
    box-shadow: none;
  }
}

/* Мелкие действия внутри карточек («Удалить», «Прочитать») — не заливка, а линейка:
   заливка делала из них вторые главные кнопки. */
#ge-account-dashboard .gea-delete,
#ge-account-dashboard .gea-notif-read,
#ge-account-dashboard .gea-user-actions button,
#ge-account-dashboard .gea-address-actions button {
  padding: 8px 15px;
  border: 1px solid var(--линия);
  border-radius: 999px;
  color: var(--чернила-2);
  background: transparent;
  font: 700 12.5px/1 "Cyngle", "Cygre", "Akrobat", Arial, sans-serif;
}

@media (hover: hover) {
  #ge-account-dashboard .gea-delete:hover,
  #ge-account-dashboard .gea-notif-read:hover,
  #ge-account-dashboard .gea-user-actions button:hover,
  #ge-account-dashboard .gea-address-actions button:hover {
    color: #ffffff;
    background: var(--акцент);
    border-color: var(--акцент);
  }
}

/* ============================================================================
   ОКНО УВЕДОМЛЕНИЯ НА КОМПЬЮТЕРЕ.
   Сначала окно было карточкой в 520 пикселей — на большом экране она читалась как
   всплывающее сообщение, а не как открытое письмо. Потом его развернули во весь
   экран, и вышло другое: страница пропадала целиком, а окно с острыми углами
   занимало монитор от края до края. Владелец: «не прям уж такими сделай на весь
   экран, сделай чуть меньше, и углы прям скругленными».
   Середина: широкое окно с крупными скруглениями и полем вокруг, сквозь которое
   видно затемнённую страницу. Шапка окна — во всю его ширину: метка «ИНФО» у левого
   верхнего края, крестик у правого; текст держится колонкой, читать строку в двести
   знаков всё равно нельзя.
   ============================================================================ */
@media (min-width: 641px) {
  #gea-notif-modal {
    padding: clamp(24px, 4vh, 48px);
    place-items: center;
  }

  #gea-notif-modal .gea-nm-card {
    /* Блоком, а не сеткой: колонку под текст держит max-width у самих строк, и
       шапка при этом остаётся во всю ширину окна — крестик у края, как просили. */
    display: block;
    width: min(980px, 100%);
    height: auto;
    max-width: none;
    max-height: min(86vh, 920px);
    padding: 22px 34px 34px;
    border: 1px solid rgba(9, 10, 12, 0.1);
    border-radius: 34px;
    background: #eef0f1;
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.45);
    transform: translateY(16px) scale(0.99);
  }

  #gea-notif-modal.is-open .gea-nm-card {
    transform: none;
  }

  /* Шапка окна: метка слева у края, крестик справа у края. */
  #gea-notif-modal .gea-nm-head {
    margin: 0 0 6px;
    align-items: flex-start;
  }

  /* Крестик крупнее: в широком окне он единственный выход, кроме Escape. */
  #gea-notif-modal .gea-nm-close {
    width: 48px;
    height: 48px;
  }

  #gea-notif-modal .gea-nm-close svg {
    width: 22px;
    height: 22px;
  }

  #gea-notif-modal .gea-nm-title {
    font-size: clamp(26px, 2.4vw, 36px);
    line-height: 1.05;
  }

  #gea-notif-modal .gea-nm-body {
    font-size: 16.5px;
    line-height: 1.6;
  }

  /* Колонка чтения. Фото и лента — во всю ширину окна: их и надо смотреть крупно. */
  #gea-notif-modal .gea-nm-date,
  #gea-notif-modal .gea-nm-title,
  #gea-notif-modal .gea-nm-body {
    max-width: 760px;
  }
}

/* ПОЛОСА ПРОКРУТКИ ВНУТРИ ОКНА НЕ РИСУЕТСЯ.
   Окно светлое, полоса — тёмная черта поверх него у самого края; на снимке экрана
   она читается как случайная деталь. Прокрутка при этом работает: убран только её
   видимый след. */
#gea-notif-modal .gea-nm-card,
#gea-notif-modal .gea-nm-shots,
#ge-account-dashboard .gea-nav,
#ge-account-dashboard [data-gea-notifications] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#gea-notif-modal .gea-nm-card::-webkit-scrollbar,
#gea-notif-modal .gea-nm-shots::-webkit-scrollbar,
#ge-account-dashboard .gea-nav::-webkit-scrollbar,
#ge-account-dashboard [data-gea-notifications]::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ============================================================================
   ЕДИНЫЙ ЧЁРНЫЙ И РЕДИЗАЙН ОСТАВШИХСЯ КАРТОЧЕК.
   В кабинете жили два тёмных цвета: чистый чёрный #090a0c у акцентов и серо-синий
   #202126 у кнопок, меток и плашек, доставшийся от прежнего оформления. Рядом они
   читаются как ошибка печати — владелец заметил это на кнопке «В каталог».
   Здесь тёмный один. Заодно карточки, которые остались от старого набора — заказ,
   товар в избранном, «рекомендуем вам» и строка истории операций — собираются тем же
   способом, что карточки сводки: белая поверхность, волосяная линейка, крупный
   радиус, подписи обычными строчными плотным серым, цены фирменным шрифтом.
   ============================================================================ */
#ge-account-dashboard {
  --dark: #090a0c;
  --red: #090a0c;
}

/* ---- Заказ и строка истории операций ---- */
#ge-account-dashboard .gea-list-item,
#ge-account-dashboard .gea-aorder {
  padding: 16px 18px;
  border: 1px solid var(--линия);
  border-radius: 22px;
  background: var(--лист);
  box-shadow: none;
}

#ge-account-dashboard .gea-item-title {
  color: var(--чернила);
  font: 700 15px/1.3 "Cyngle", "Cygre", "Akrobat", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

#ge-account-dashboard .gea-item-note {
  color: var(--чернила-2);
  font: 600 13px/1.4 "Cyngle", "Cygre", "Akrobat", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

/* Цены и суммы — фирменным шрифтом: тот же знак рубля, что на странице товара. */
#ge-account-dashboard .gea-item-value,
/* Метки статуса и вида заказа — одной формы и одного чёрного. */
#ge-account-dashboard .gea-status,
#ge-account-dashboard .ge-order-kind {
  padding: 6px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--акцент);
  font: 750 11px/1 "Akrobat", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Подзаголовок раздела («Рекомендуем вам», «Последние заказы») — заметно меньше
   заголовка страницы: раньше два одинаковых капслока спорили за внимание. */
#ge-account-dashboard .gea-section-title {
  color: var(--чернила);
  font: 800 20px/1.1 "Akrobat", Arial, sans-serif;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   КОШЕЛЁК НА ГЛАВНОЙ
   ==========================================================================
   Здесь стояли четыре разнородные плитки, а сразу под ними — чёрный блок «Пополнить
   баланс», в котором ещё раз повторялась строка «Сейчас на балансе». Баланс был написан
   на экране дважды, в двух разных начертаниях. Человек приходит в кабинет с одним
   вопросом — «сколько у меня» — и получал на него два ответа.
   Теперь ответ один, крупный, и кнопка рядом с ним. Заказы и монеты — не деньги, им
   место сбоку и помельче. */

#ge-account-dashboard .gea-wallet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 28px);
  margin-bottom: clamp(20px, 3vw, 28px);
  padding: clamp(20px, 3.4vw, 32px);
  border-radius: 26px;
  color: #f4f4f1;
  background: #0a0a0b;
}

#ge-account-dashboard .gea-wallet-main {
  min-width: 0;
}

#ge-account-dashboard .gea-wallet-label {
  display: block;
  color: rgba(244, 244, 241, 0.45);
  font: 750 10.5px/1 "Akrobat", Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Сумма — самое крупное на экране. Ради неё в кабинет и заходят. */
#ge-account-dashboard .gea-wallet-sum {
  display: block;
  margin: 10px 0 0;
  color: #fff;
  /* Сумма должна быть НЕ МЕНЬШЕ заголовка раздела. На телефоне заголовок выходит 47
     точек, и при 8vw сумма оказывалась мельче его — экран кричал «ГЛАВНАЯ», а человек
     пришёл узнать, сколько у него денег. 13vw ставит число выше заголовка на любом
     телефоне. */
  font: 800 clamp(46px, 13vw, 64px) / 1 "Akrobat", Arial, sans-serif;
  letter-spacing: -0.02em;
}

#ge-account-dashboard .gea-wallet-sum .gea-rub {
  /* Знак рубля системным шрифтом — тем же приёмом, что и на вкладке пополнения:
     нарисованный знак рядом с наборным числом всегда видно. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.62em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}

#ge-account-dashboard .gea-wallet-text {
  max-width: 42ch;
  margin: 12px 0 0;
  color: rgba(244, 244, 241, 0.55);
  font-size: clamp(13px, 2.8vw, 14.5px);
  line-height: 1.5;
}

#ge-account-dashboard .gea-wallet-btn {
  margin-top: 18px;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  color: #0a0a0b;
  background: #f4f4f1;
  cursor: pointer;
  font: 750 12px/1 "Akrobat", Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.16s ease, background 0.18s ease;
}

@media (hover: hover) {
  #ge-account-dashboard .gea-wallet-btn:hover {
    background: #ececea;
  }
}

#ge-account-dashboard .gea-wallet-btn:active {
  transform: scale(0.98);
}

/* Три второстепенных числа столбцом, разделённые волосяной линией. Столбец, а не
   плитки: плитки уравняли бы их с суммой, а они не равны ей по важности. */
#ge-account-dashboard .gea-wallet-side {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 150px;
  padding-left: clamp(16px, 3vw, 28px);
  border-left: 1px solid rgba(244, 244, 241, 0.14);
}

#ge-account-dashboard .gea-wallet-cell span {
  display: block;
  margin-bottom: 4px;
  color: rgba(244, 244, 241, 0.45);
  font: 750 10px/1 "Akrobat", Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#ge-account-dashboard .gea-wallet-cell strong {
  color: #fff;
  font: 800 clamp(18px, 3.6vw, 22px) / 1 "Akrobat", Arial, sans-serif;
}

/* На телефоне столбец переезжает под сумму и разворачивается в строку: вертикальная
   линейка там резала бы и без того узкую карточку. */
@media (max-width: 720px) {
  #ge-account-dashboard .gea-wallet {
    grid-template-columns: minmax(0, 1fr);
  }

  #ge-account-dashboard .gea-wallet-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(244, 244, 241, 0.14);
  }

  #ge-account-dashboard .gea-wallet-btn {
    width: 100%;
  }
}

/* ============ ЗАГОЛОВКИ РАЗДЕЛОВ ============
   Раздел должен быть виден сразу, как на странице отслеживания: там заголовок крупный,
   и по нему понятно, где ты. Здесь он был почти вровень с остальным текстом. */
#ge-account-dashboard .gea-panel-head h2 {
  font: 800 clamp(26px, 5vw, 40px) / 0.98 "Akrobat", Arial, sans-serif;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

#ge-account-dashboard .gea-section-title {
  margin: clamp(22px, 3.4vw, 32px) 0 14px;
  font: 800 clamp(15px, 3vw, 18px) / 1.1 "Akrobat", Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============ ВЫБРАННЫЙ РАЗДЕЛ В КОЛОНКЕ ============
   Здесь значок был лаймовым. Владелец: «вкладки в лк тоже без жёлтого цвета». На чёрной
   плитке самый сильный цвет — белый, им и отмечаем текущий раздел. */
#ge-account-dashboard .gea-nav-button.is-active .gea-nav-icon {
  color: #ffffff;
}

/* ==========================================================================
   ИЗБРАННОЕ
   ==========================================================================
   Было: маленькое фото, название, цена, ЧЁРНАЯ КНОПКА «Перейти к товару» во всю ширину
   (на телефоне она переносилась в две строки) и под ней подчёркнутая ссылочка «Убрать».
   Главным пятном карточки была кнопка, повторяющая то, что и так делает нажатие по
   карточке, а единственное осмысленное здесь действие — убрать из избранного — выглядело
   сноской.
   Стало: карточка целиком и есть ссылка на товар. Убрать — сердце в углу фотографии:
   тем же значком товар в избранное добавляли в каталоге, и обратное действие должно
   выглядеть так же. */

#ge-account-dashboard .gea-fav {
  position: relative;
  min-width: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(9, 10, 12, 0.07);
  transition: transform 0.18s var(--гладко, cubic-bezier(0.2, 0.8, 0.2, 1)),
    box-shadow 0.2s ease, opacity 0.2s ease;
}

@media (hover: hover) {
  #ge-account-dashboard .gea-fav:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(9, 10, 12, 0.14);
  }
}

/* Состояние «убираем»: карточка съёживается и гаснет. Мгновенное исчезновение читается
   как сбой — человек не успевает связать своё нажатие с пропажей. */
#ge-account-dashboard .gea-fav[data-state="removing"] {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}

#ge-account-dashboard .gea-fav-link {
  display: grid;
  gap: 2px;
  padding: 10px 10px 14px;
  color: var(--black);
  text-decoration: none;
}

#ge-account-dashboard .gea-fav-link:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: -3px;
  border-radius: 22px;
}

/* Фото портретное, как товар на витрине: одежду и обувь снимают вертикально, и квадрат
   резал их полями сверху и снизу. */
#ge-account-dashboard .gea-fav-shot {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  margin-bottom: 12px;
  border-radius: 16px;
  background: #f1f1ef;
}

#ge-account-dashboard .gea-fav-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
  #ge-account-dashboard .gea-fav:hover .gea-fav-shot img {
    transform: scale(1.04);
  }
}

#ge-account-dashboard .gea-fav-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* Две строки ровно: иначе карточки в ряду разной высоты и сетка «прыгает». */
  min-height: 2.2em;
  padding: 0 3px;
  font: 800 clamp(13px, 3.2vw, 15px) / 1.1 "Akrobat", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

#ge-account-dashboard .gea-fav-price {
  padding: 0 3px;
  font: 800 clamp(14px, 3.6vw, 17px) / 1 "Akrobat", Arial, sans-serif;
}

/* ---- Сердце: убрать из избранного ----
   Восемь состояний, как требует правило компонентов: обычное, наведение, фокус с
   клавиатуры, нажатие, отключено, идёт запрос, ошибка, успех. Успех здесь — это уход
   самой карточки (см. data-state="removing" выше). */
#ge-account-dashboard .gea-fav-heart {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--black);
  background: rgba(255, 255, 255, 0.92);
  /* Тень, а не рамка: фотографии бывают и светлые, и тёмные, и рамка на светлой
     пропадала бы. */
  box-shadow: 0 2px 10px rgba(9, 10, 12, 0.18);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.16s ease, background 0.18s ease, color 0.18s ease;
}

#ge-account-dashboard .gea-fav-heart svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 0.18s ease;
}

@media (hover: hover) {
  /* При наведении сердце «разжимается» — показывает, что нажатие его выключит. */
  #ge-account-dashboard .gea-fav-heart:hover {
    color: #fff;
    background: var(--black);
  }
  #ge-account-dashboard .gea-fav-heart:hover svg {
    transform: scale(0.88);
  }
}

#ge-account-dashboard .gea-fav-heart:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

#ge-account-dashboard .gea-fav-heart:active {
  transform: scale(0.9);
}

#ge-account-dashboard .gea-fav-heart:disabled {
  cursor: default;
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  #ge-account-dashboard .gea-fav,
  #ge-account-dashboard .gea-fav-shot img,
  #ge-account-dashboard .gea-fav-heart,
  #ge-account-dashboard .gea-fav-heart svg {
    transition: none;
  }
}

/* Сетка: три в ряд на широком экране, две на телефоне. Одна колонка превращала
   избранное в длинный столбец, по которому нечего просматривать. */
#ge-account-dashboard .gea-favorites-grid,
#ge-account-dashboard .gea-recommend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 760px) {
  #ge-account-dashboard .gea-favorites-grid,
  #ge-account-dashboard .gea-recommend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #ge-account-dashboard .gea-fav-heart {
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
  }
}

/* ==========================================================================
   ПОПОЛНЕНИЕ ПРЯМО НА ГЛАВНОЙ
   ==========================================================================
   Раньше кнопка «Пополнить баланс» уводила на вкладку «Баланс и бонусы»: человек
   нажимал «пополнить», и у него менялся весь экран — приходилось искать глазами, куда
   он попал. Владелец: «надо чтобы именно в самой главной при нажатии пополнить баланс
   раскрывалась красиво карточка для заполнения суммы».
   Высоту везёт сетка (0fr → 1fr) — тот же приём, что у карточки заказа: она считается
   сама, без замеров в пикселях. */

#ge-account-dashboard .gea-topup-drop {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#ge-account-dashboard .gea-topup-drop.is-open {
  grid-template-rows: 1fr;
}

#ge-account-dashboard .gea-topup-clip {
  overflow: hidden;
  min-height: 0;
}

/* Гнездо под форму. Чёрное, как кошелёк над ним: это продолжение той же карточки, а не
   новый блок — поэтому верхние углы не скруглены, и вместе они читаются одним телом. */
#ge-account-dashboard .gea-topup-slot {
  margin: 0 0 clamp(20px, 3vw, 28px);
  padding: clamp(24px, 3.4vw, 32px) clamp(20px, 3.4vw, 32px) clamp(20px, 3vw, 28px);
  border-radius: 0 0 26px 26px;
  background: #0a0a0b;
}

/* ПОДЪЁМ ВИСИТ НА САМОМ ЯЩИКЕ, А НЕ НА ГНЕЗДЕ.
   Раньше гнездо поднималось на -22px само. Отступ у кошелька снизу он гасил исправно,
   но заодно съедал и собственное верхнее поле гнезда: сумма пополнения прижималась
   вплотную к строке «Бонусы · G coins · Заказов», а волосяная черта над ней ложилась
   прямо на эту строку. Подъём переехал на ящик — гасит он ровно то, что должен (отступ
   кошелька), а поле и черта у гнезда остались нетронутыми. */
#ge-account-dashboard .gea-topup-drop {
  margin-top: calc(-1 * clamp(20px, 3vw, 28px));
}

/* ФОРМА, ПЕРЕЕХАВШАЯ СЮДА, СНИМАЕТ СВОЮ ОПРАВУ.
   Форма пополнения одна на весь кабинет, а живёт в двух местах. На вкладке «Баланс» она
   правая половина тёмной карточки, и её от левой половины отделяет волосяная линия
   СЛЕВА. На главной код переносит ровно этот же узел в гнездо под кошельком — а стили
   на нём остаются прежние. Разделять там больше нечего, и линия повисала вертикальной
   чертой сбоку: начиналась ниоткуда, кончалась нигде. Владелец показал её на снимке
   словом «косяк». Заодно складывались два поля — своё у формы и своё у гнезда, — и
   содержимое уезжало от края на двойное расстояние, из-за чего сумма с кнопкой стояли
   заметно уже кошелька над ними.
   Здесь форма отдаёт оправу гнезду: рамок нет, поля нет. Черта, отделяющая форму от
   кошелька, теперь у гнезда — и потому идёт от края до края, а не с отступом. */
#ge-account-dashboard .gea-topup-slot .gea-topup-form {
  padding: 0;
  border: 0;
  background: transparent;
}

#ge-account-dashboard .gea-topup-slot {
  border-top: 1px solid rgba(244, 244, 241, 0.12);
}

/* Пока закрыто, гнездо не должно оставлять полосу: отрицательный отступ выше сдвигает
   его под кошелёк, и в схлопнутом виде от него не остаётся ничего. */
#ge-account-dashboard .gea-topup-drop:not(.is-open) .gea-topup-slot {
  margin-bottom: 0;
}

/* Кошелёк и раскрытая форма — одно тело: нижние углы кошелька распрямляются. */
#ge-account-dashboard .gea-topup-drop.is-open {
  margin-top: 0;
}

#ge-account-dashboard .gea-wallet:has(+ .gea-topup-drop.is-open) {
  margin-bottom: 0;
  border-radius: 26px 26px 0 0;
}

/* Кнопка в открытом состоянии перестаёт быть «зовущей»: дело уже сделано, она теперь
   просто закрывает. */
#ge-account-dashboard .gea-wallet-btn[aria-expanded="true"] {
  color: #f4f4f1;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(244, 244, 241, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  #ge-account-dashboard .gea-topup-drop {
    transition: none;
  }
}

/* ==========================================================================
   РАЗДЕЛЫ КАБИНЕТА — ГРУППЫ В КОЛОНКЕ, КОРОТКИЕ ПОДПИСИ В ЛЕНТЕ
   ==========================================================================
   Было две разные беды у одного и того же списка.

   В КОЛОНКЕ на компьютере девять разделов шли сплошным столбиком без единой паузы.
   Между «Избранным» и «Балансом» нет ничего общего, между «Балансом» и «Историей
   операций» — есть, но по виду все девять одинаковы, и «Настройки» приходилось
   искать перебором сверху вниз. Теперь разделы разбиты по смыслу — покупки, деньги,
   профиль — и каждая тройка подписана мелким серым. Подписи нарочно тихие: это
   разметка для глаза, а не ещё один уровень заголовков. Для чтения с экрана они
   помечены aria-hidden — озвучивать «Покупки» перед каждой кнопкой незачем, порядок
   и так понятен по самим названиям.

   В ЛЕНТЕ на телефоне разделы лежат в одну строку, и подписи были полные: «Баланс и
   бонусы», «История операций», «Возврат товара». На экран влезало две с половиной
   вкладки, дальше — только листать вслепую. Поэтому в ленте подписи короткие:
   «Баланс», «История», «Возврат». Смысл тот же, а видно вдвое больше — и понять,
   что разделов много, можно не листая.

   Подписи не подменяются через content: attr() — это сломало бы выделение и чтение
   с экрана. В кнопке лежат обе, лишняя выключена display:none и потому не попадает
   ни в вывод, ни в дерево доступности. */

#ge-account-dashboard .gea-nav-short {
  display: none;
}

#ge-account-dashboard .gea-nav-group {
  margin: 18px 6px 7px;
  color: var(--чернила-2);
  font: 750 10.5px/1 "Akrobat", Arial, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Первой группе отступ сверху не нужен: над ней линейка профиля. */
#ge-account-dashboard .gea-nav-group:first-child {
  margin-top: 4px;
}

@media (max-width: 900px) {
  /* Лента — одна строка. Заголовкам групп в ней места нет, и разрывать ими полосу
     нельзя: это превратило бы прокрутку в чехарду. */
  #ge-account-dashboard .gea-nav-group {
    display: none !important;
  }

  #ge-account-dashboard .gea-nav-full {
    display: none !important;
  }

  #ge-account-dashboard .gea-nav-short {
    display: inline !important;
  }
}

/* ==========================================================================
   ДВА ЗАГОЛОВКА НА ОДНУ СТРАНИЦУ — ОДИН ЛИШНИЙ
   ==========================================================================
   Владелец прислал снимок кабинета с телефона и написал: «вообще не красиво всё».
   Первое, что видно на этом снимке, — два капслочных заголовка подряд: «ЛИЧНЫЙ
   КАБИНЕТ» в 55 пикселей и сразу под ним «ГЛАВНАЯ» в 47. Вместе они занимают треть
   экрана телефона и не сообщают ничего: человек и так знает, куда зашёл, а название
   раздела всё равно продублировано на вкладке, которая подсвечена рядом.

   Заголовков должно быть не два, а один, и главным должен быть тот, что меняется, —
   название раздела. Поэтому «Личный кабинет» становится надстрочной пометкой: мелкой,
   разряжённой, приглушённой. Она остаётся первым заголовком страницы для чтения с
   экрана (это по-прежнему h1) и остаётся видимой, но перестаёт спорить за внимание —
   и кошелёк с балансом поднимается на первый экран, куда человек и шёл.

   !important здесь не украшение: выше стоят два слоя правил с !important, ставящие
   размер 54 и clamp(44px, 14vw, 58px), и без него пометка осталась бы слабой. */
#ge-account-dashboard .gea-heading {
  margin: 0 0 14px !important;
  /* Пометка лежит НА ТЁМНОМ ПОЛЕ страницы, а не на белой карточке. Первый заход сюда
     был с тёмными чернилами — и заголовок пропал со страницы совсем: чёрным по чёрному.
     Цвет здесь только светлый. */
  color: rgba(244, 244, 241, 0.55) !important;
  font: 750 12px/1.2 "Akrobat", Arial, sans-serif !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* Название раздела теперь единственный крупный заголовок — ему и место на первом
   экране, а не под чужим заголовком. */
#ge-account-dashboard .gea-panel-head h2 {
  margin: 0 !important;
}

/* ==========================================================================
   БОНУСЫ — КАРТА, А НЕ СТРОКА В ТАБЛИЦЕ
   ==========================================================================
   Владелец: «изобрази бонусы как будто не просто на балансе, а прямо в личном
   кабинете отдельно бонусная карта».

   Здесь стояли четыре одинаковые плитки в ряд: «Бонусы», «Баланс», «Максимальная
   оплата», «G coins». Бонусы среди них терялись — та же рамка, тот же кегль, тот же
   размер, что у справочной цифры «30%». Между тем это единственное в магазине, что
   принадлежит лично человеку и копится.

   Теперь слева карта (её рисует global.js, она же в меню и в корзине), справа — три
   коротких показателя, которые её поясняют. На телефоне карта сверху во всю ширину,
   показатели под ней в три колонки: карту надо видеть целиком, а показатели читаются
   и мелкими.
   ========================================================================== */
/* Владелец: «сделай от неё нормальные отступы, почему она прямо впритык с другими
   элементами». Над зоной стоит чёрная плашка пополнения, под ней — плитки; отступ
   зона держит сама, а не ждёт его от соседей. */
#ge-account-dashboard .gea-bonus-zone {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(14px, 2.6vw, 18px);
  align-items: stretch;
  margin: clamp(16px, 3.4vw, 22px) 0;
}

#ge-account-dashboard .gea-bonus-slot {
  display: grid;
}

/* Карта растягивается на всю высоту колонки: рядом с ней три плитки, и если карта
   окажется ниже их суммы, снизу останется дыра. */
#ge-account-dashboard .gea-bonus-slot .ge-bcard {
  max-width: none;
  height: 100%;
  /* Свой отступ карта здесь снимает: высоту ей задаёт колонка (height:100%), и поля
     поверх этого вылезали за гнездо — карта на четырнадцать точек залезала на плитки
     снизу. Просветы в этой зоне везёт сетка. */
  margin: 0;
}

#ge-account-dashboard .gea-bonus-facts {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.8vw, 14px);
}

/* Плитки рядом с картой — тише и ниже обычных: они поясняют карту, а не спорят с ней. */
#ge-account-dashboard .gea-bonus-facts .gea-summary-card {
  min-height: 0;
  padding: clamp(13px, 2.2vw, 17px) clamp(15px, 2.4vw, 19px);
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border-radius: 18px;
}

#ge-account-dashboard .gea-bonus-facts .gea-summary-value {
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1;
}

/* Планшет: карта уходит наверх, показатели встают под ней в три колонки. */
@media (max-width: 860px) {
  #ge-account-dashboard .gea-bonus-zone {
    grid-template-columns: minmax(0, 1fr);
  }

  #ge-account-dashboard .gea-bonus-facts {
    grid-template-rows: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #ge-account-dashboard .gea-bonus-facts .gea-summary-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  #ge-account-dashboard .gea-bonus-facts .gea-summary-label {
    font-size: 10.5px;
    letter-spacing: 0.06em;
  }

  #ge-account-dashboard .gea-bonus-facts .gea-summary-value {
    font-size: clamp(17px, 4.6vw, 22px) !important;
  }
}

/* ТЕЛЕФОН: ТРИ КОЛОНКИ — ЭТО НЕ ТРИ ПОКАЗАТЕЛЯ, А ТРИ ОБРЕЗКА.
   На 393 точках каждая плитка выходит около ста: «Максимальная оплата» не помещается
   ни в одну строку, ни в две, «4 767 ₽» переносится по слогам. Показателей всего три,
   и каждый — это пара «подпись → число»: строками они читаются сразу и занимают
   меньше места, чем сетка из обрезков. */
@media (max-width: 560px) {
  #ge-account-dashboard .gea-bonus-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  #ge-account-dashboard .gea-bonus-facts .gea-summary-card {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    min-height: 0 !important;
    padding: 13px 16px !important;
    border-radius: 16px !important;
  }

  #ge-account-dashboard .gea-bonus-facts .gea-summary-label {
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
    text-transform: none;
  }

  #ge-account-dashboard .gea-bonus-facts .gea-summary-value {
    flex: 0 0 auto;
    font-size: 20px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }
}

/* ==========================================================================
   ИЗБРАННОЕ НА ТЕЛЕФОНЕ — СТРОКАМИ, А НЕ ДВУМЯ КОЛОНКАМИ ОБРЕЗКОВ
   ==========================================================================
   Владелец: «отображения карточек избранного и карточек заказов также измени».

   В две колонки карточка выходит около ста сорока точек шириной. Название товара в
   магазине одежды — это марка, модель и часто цвет: «Пуховик Moncler Alaska Dist»,
   «Кеды Rick Owens x Chrome Hearts». В две строки по сто сорок точек такое не влезает
   никогда, и на экране стояло «ПУХОВИК MONCLER ALASK…» — обрезок посреди слова.
   Человек смотрит в избранное, чтобы вспомнить, что он откладывал; обрезанное название
   этой работы не делает.

   Поэтому на телефоне строка: фото слева, название и цена справа, сердце с краю. Место
   под название сразу утраивается, и оно помещается целиком. Заодно строка читается тем
   же способом, что и «Мои заказы» рядом, — в кабинете становится один язык вместо двух.

   На компьютере остаётся сетка: там карточка широкая, название и так помещается, а
   крупное фото — единственное, ради чего избранное вообще листают глазами.
   ========================================================================== */
@media (max-width: 560px) {
  #ge-account-dashboard .gea-favorites-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #ge-account-dashboard .gea-fav {
    border-radius: 18px;
  }

  #ge-account-dashboard .gea-fav-link {
    display: grid;
    /* Две колонки и ДВЕ СТРОКИ, с явной расстановкой. Без неё название и цена —
       отдельные дети сетки: название встаёт во вторую колонку, а цена переносится на
       новую строку в ПЕРВУЮ, то есть под фотографию. Снимок показал ровно это. */
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 4px;
    align-content: center;
    padding: 10px;
  }

  #ge-account-dashboard .gea-fav-shot {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  #ge-account-dashboard .gea-fav-name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  #ge-account-dashboard .gea-fav-price {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  /* Фото перестаёт быть во всю карточку: квадрат слева, как в строке заказа. */
  #ge-account-dashboard .gea-fav-shot {
    width: 84px;
    height: 84px;
    aspect-ratio: auto;
    border-radius: 14px;
    overflow: hidden;
  }

  #ge-account-dashboard .gea-fav-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Название теперь помещается: три строки при тройной ширине — это весь запас,
     который вообще может понадобиться, и обрезка перестаёт срабатывать. */
  #ge-account-dashboard .gea-fav-name {
    -webkit-line-clamp: 3;
    min-height: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.22;
    /* Переносим по словам, а не по буквам: anywhere нужен был тесной колонке, где
       длинное слово иначе вылезало за край. В строке места хватает, и разрыв посреди
       слова только мешает читать. */
    overflow-wrap: break-word;
  }

  #ge-account-dashboard .gea-fav-price {
    padding: 4px 0 0;
    font-size: 17px;
  }

  /* Сердце уходит из угла фотографии на правый край строки — там, где у заказа стоит
     его действие. В углу маленького квадрата оно закрывало бы сам товар. */
  #ge-account-dashboard .gea-fav-heart {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
  }

  /* Место под сердце, чтобы оно не легло на цену. */
  #ge-account-dashboard .gea-fav-link {
    padding-right: 58px;
  }
}

/* ==========================================================================
   КАРТОЧКА ЗАКАЗА: ДЕНЬГИ СПРАВА, ТОВАР ЧИТАЕМО
   ==========================================================================
   Владелец: «отображения карточек избранного и карточек заказов также измени».

   В карточке было четыре строки подряд, три из них одинаково серые: номер, название
   товара, «дата · сумма · бонусы», статус. Сумма — то, ради чего в список заказов чаще
   всего и заходят, — стояла в середине самой тихой строки, между датой и бонусами, и
   ничем не отличалась от них.

   Теперь в первой строке номер слева и сумма справа, как в любом счёте; название товара
   идёт следом обычным чтением, а дата с бонусами уходит вниз мелким. Сумма набрана тем
   же способом, что «К оплате» в корзине и цена в избранном, — в кабинете один язык для
   денег вместо трёх.
   ========================================================================== */
#ge-account-dashboard .gea-ord-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

/* Номер — гибкий элемент строки, и по умолчанию гибкий элемент не сжимается уже своего
   содержимого. С nowrap это значит «никогда»: номер выталкивал сумму за край. Разрешаем
   сжиматься — многоточие в номере лучше, чем сумма под значком штрих-кода. */
#ge-account-dashboard .gea-ord-line .gea-ord-num {
  min-width: 0;
  flex: 0 1 auto;
}

#ge-account-dashboard .gea-ord-sum {
  flex: 0 0 auto;
  color: var(--чернила, #0a0a0b);
  font: 800 clamp(15px, 3.8vw, 18px) / 1 "Akrobat", Arial, sans-serif;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Название товара — то, по чему заказ узнают в лицо. Оно было такой же серой строкой,
   как дата; делаем его плотнее и темнее, но не крупнее номера: спорить им незачем. */
#ge-account-dashboard .gea-ord-goods-line {
  color: rgba(9, 10, 12, 0.72);
  font-weight: 600;
}

/* Слово «Заказ №» на узком экране прячем: панель уже называется «Мои заказы», а место
   в строке нужно номеру и сумме. На просторном экране слово остаётся — там оно не мешает
   и карточка читается целой фразой. */
@media (max-width: 520px) {
  #ge-account-dashboard .gea-ord-word {
    display: none;
  }
}

/* ==========================================================================
   ВКЛАДКИ КАБИНЕТА — ТОТ ЖЕ ЯЗЫК, ЧТО И ВКЛАДКИ МЕНЮ
   ==========================================================================
   Владелец: «и вкладки в ЛК делай редизайн также» — сразу после того, как попросил
   переделать вкладки в меню аккаунта.

   В меню вкладка теперь плитка: значок в квадратной подложке, скруглённый угол, воздух
   между соседями. В кабинете та же вкладка была капсулой с полукруглыми торцами и
   значком без подложки — два разных языка на двух экранах одного личного кабинета.
   Человек переходит из меню в кабинет и попадает в другое приложение.

   Здесь тот же предмет: подложка под значок, тот же радиус угла, тот же отклик на
   наведение. Лаймовый значок у текущего раздела был и раньше и остаётся — он тут
   единственный цвет и означает «вы здесь»; на чёрной плитке под него добавилась
   светлая подложка, чтобы значок не висел в пустоте, как у соседей теперь не висит.

   Капсулы остаются у кнопок («В каталог», «Оплатить») — там они и уместны: кнопка это
   действие, вкладка это место. Разная форма для разного смысла. */

#ge-account-dashboard .gea-nav-button,
#ge-account-dashboard .gea-nav-link {
  gap: 12px;
  border-radius: 16px;
}

/* Значок в подложке. Он же задаёт левый край, по которому выстраиваются все названия
   независимо от того, какой ширины нарисован сам значок. */
#ge-account-dashboard .gea-nav-icon {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(9, 10, 12, 0.06);
  transition: background 0.16s ease, color 0.16s ease;
}

#ge-account-dashboard .gea-nav-icon svg {
  width: 18px;
  height: 18px;
}

#ge-account-dashboard .gea-nav-button.is-active,
#ge-account-dashboard .gea-nav-button[aria-selected="true"] {
  border-radius: 16px;
}

/* На чёрной плитке подложка значка светлеет, а сам значок — белый. */
#ge-account-dashboard .gea-nav-button.is-active .gea-nav-icon,
#ge-account-dashboard .gea-nav-button[aria-selected="true"] .gea-nav-icon {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
}

@media (hover: hover) {
  #ge-account-dashboard .gea-nav-button:hover:not(.is-active) .gea-nav-icon,
  #ge-account-dashboard .gea-nav-link:hover .gea-nav-icon {
    background: rgba(9, 10, 12, 0.11);
  }
}

/* «Выйти» — не раздел, а действие: подложки у значка нет, иначе строка выглядит как
   ещё одно место, куда можно перейти. */
#ge-account-dashboard .gea-nav-button.gea-logout .gea-nav-icon {
  background: none;
}

/* Полоса вкладок на телефоне. Размеры там свои, с !important, поэтому и радиус, и
   подложка повторяются здесь — иначе в ленте осталась бы капсула. */
@media (max-width: 900px) {
  #ge-account-dashboard .gea-nav-button,
  #ge-account-dashboard .gea-nav-link {
    border-radius: 16px !important;
    gap: 9px !important;
    padding: 0 13px 0 9px !important;
  }

  #ge-account-dashboard .gea-nav-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 10px !important;
    background: rgba(9, 10, 12, 0.07) !important;
  }

  #ge-account-dashboard .gea-nav-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  #ge-account-dashboard .gea-nav-button.is-active .gea-nav-icon {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18) !important;
  }

  #ge-account-dashboard .gea-nav-button.gea-logout .gea-nav-icon {
    background: none !important;
  }
}

/* ==========================================================================
   ИЗБРАННОЕ — ВИТРИНА, А НЕ СПИСОК СТРОК
   ==========================================================================
   Владелец: «избранное в ЛК ЧИНИ, делай другой дизайн карточек этих».

   Карточка была строкой: слева маленькое фото, справа название и цена, у края сердце.
   Избранное так не смотрят. Человек копил эти товары глазами — по фотографиям, — а
   строка показывает фотографию размером с ноготь и заставляет читать. В каталоге тот же
   товар выглядит совсем иначе, и, переходя из каталога в избранное, человек не узнаёт
   своё.

   Теперь это витрина: фотография во всю ширину карточки, под ней название и цена,
   сердце — кружком поверх снимка, как на витрине. Две колонки на телефоне, больше на
   широком экране: столько же товаров помещается на экран, но видно их, а не их подписи.
   ========================================================================== */

#ge-account-dashboard .gea-favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: clamp(10px, 1.8vw, 14px);
}

#ge-account-dashboard .gea-fav {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(9, 10, 12, 0.05);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;
}

@media (hover: hover) {
  #ge-account-dashboard .gea-fav:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(9, 10, 12, 0.12);
  }
}

/* Одна колонка вместо прежних двух: фотография сверху, подписи снизу. */
#ge-account-dashboard .gea-fav-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 0;
  padding: 0;
  text-decoration: none;
  color: inherit;
}

/* Снимок держит квадрат сам: в избранном товары разной высоты, и без этого карточки
   стояли бы лесенкой. Фон светлый — у половины фотографий в магазине он прозрачный. */
#ge-account-dashboard .gea-fav-shot {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f2f2f0;
}

#ge-account-dashboard .gea-fav-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: clamp(8px, 2vw, 14px);
  box-sizing: border-box;
}

#ge-account-dashboard .gea-fav-name {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding: clamp(10px, 2vw, 13px) clamp(11px, 2.2vw, 14px) 0;
  color: #0a0a0b;
  font: 700 clamp(12.5px, 2.9vw, 13.5px) / 1.3 "Cyngle", "Cygre", "Akrobat", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  /* Две строки и многоточие: названия у товаров длинные, а карточки в сетке обязаны
     быть одного роста, иначе витрина едет ступеньками. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.3em);
}

#ge-account-dashboard .gea-fav-price {
  grid-column: 1;
  grid-row: 3;
  padding: 4px clamp(11px, 2.2vw, 14px) clamp(12px, 2.2vw, 14px);
  color: #0a0a0b;
  font: 800 clamp(14px, 3.4vw, 16px) / 1 "Akrobat", Arial, sans-serif;
  letter-spacing: -0.01em;
}

/* Сердце — поверх снимка, как на витрине каталога. В строке оно стояло у правого края
   и читалось как «удалить строку»; на снимке оно читается как «это отмечено». */
#ge-account-dashboard .gea-fav-heart {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #0a0a0b;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(9, 10, 12, 0.14);
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
}

#ge-account-dashboard .gea-fav-heart svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

@media (hover: hover) {
  #ge-account-dashboard .gea-fav-heart:hover {
    background: #ffffff;
    transform: scale(1.08);
  }
}

#ge-account-dashboard .gea-fav-heart:active {
  transform: scale(0.94);
}

/* На узком экране — ровно две колонки: три превращают фотографию в марку. */
@media (max-width: 560px) {
  #ge-account-dashboard .gea-favorites-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* ==========================================================================
   ВКЛАДКИ КРУГЛЕЕ, КНОПКИ ПАНЕЛЕЙ — ВО ВСЮ ШИРИНУ
   ==========================================================================
   Владелец: «вкладки в лк с более скруглёнными углами», «вот кнопки каталог в избранном
   в лк, сделай на всю ширину окна, и кнопки все другие которые в этом же месте, по типу
   программа лояльности, на всю ширину окна также, а не справа там или слева».

   Кнопка в шапке панели стояла в одной строке с заголовком и занимала ровно свою
   надпись — на телефоне это узкий прямоугольник, прижатый к краю, с большим пустым
   полем рядом. Теперь заголовок и кнопка идут друг под другом, а кнопка — во всю
   ширину: по ней и попасть легче, и панель перестаёт выглядеть недособранной.
   ========================================================================== */

#ge-account-dashboard .gea-nav-button,
#ge-account-dashboard .gea-nav-link {
  border-radius: 20px;
}

@media (max-width: 900px) {
  #ge-account-dashboard .gea-nav-button,
  #ge-account-dashboard .gea-nav-link {
    border-radius: 20px !important;
  }
}

#ge-account-dashboard .gea-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(12px, 2vw, 16px);
}

#ge-account-dashboard .gea-panel-head > .gea-button,
#ge-account-dashboard .gea-panel-head > .gea-panel-action,
#ge-account-dashboard .gea-panel-head > button,
#ge-account-dashboard .gea-panel-head > a {
  justify-self: stretch;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ==========================================================================
   КАРТОЧКА ЗАКАЗА: СТАТУС СВЕРХУ, РАСКРЫТИЕ С ЖИЗНЬЮ
   ==========================================================================
   Владелец: «сделай редизайн кнопок вкладок и моих заказов опять же, и измени чтобы
   по-другому выглядело раскрывание заказа, красиво с анимацией».

   Статус стоял последней строкой карточки — под номером, названием товара и датой. На
   него натыкались в конце, хотя это первое, что хотят знать про заказ: приехал или ещё
   едет. Теперь он первой строкой, а дата — рядом с ним, тихо и справа: вместе они
   отвечают «что с заказом и когда он был».
   ========================================================================== */

#ge-account-dashboard .gea-ord-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 3px;
}

/* Статус в первой строке — мельче прежнего: он больше не единственная примета внизу
   карточки, и кричать ему незачем.
   NOWRAP ОБЯЗАТЕЛЕН. Ниже по файлу у статуса стоит white-space: normal — это правильно,
   пока он лежит сам по себе и длинная подпись переносится внутри пилюли. Но здесь он
   гибкий элемент строки, и «переносится» означает «сжимается до одной буквы»: длинный
   статус вставал вертикальной колонкой из букв. */
#ge-account-dashboard .gea-ord-top .gea-ord-status {
  flex: 0 1 auto;
  min-width: 0;
  margin-top: 0;
  padding: 4px 9px;
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Дата — в строке с названием товара, справа. Название сжимается охотно, дата нет:
   так у статуса выше остаётся вся ширина, а у даты — ровно столько, сколько ей надо. */
#ge-account-dashboard .gea-ord-goods-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

#ge-account-dashboard .gea-ord-goods-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ge-account-dashboard .gea-ord-when {
  flex: 0 0 auto;
  color: rgba(9, 10, 12, 0.45);
  font: 600 11.5px/1.2 "Akrobat", Arial, sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Заработанные бонусы — приписка к названию товара, а не отдельная строка: строк в
   карточке и так хватает, а бонусы начисляются не у каждого заказа. */
#ge-account-dashboard .gea-ord-bonus {
  color: rgba(9, 10, 12, 0.45);
  font-weight: 600;
}

/* Фотографии крупнее: карточка стала на строку короче, и место есть. */
#ge-account-dashboard .gea-ord-pics img {
  width: clamp(52px, 12.5vw, 64px);
  height: clamp(52px, 12.5vw, 64px);
  border-radius: 16px;
}

/* ===== РАСКРЫТИЕ ===== */
/* Раскрытая карточка приподнимается: так видно, что открыта именно она, даже когда
   список длинный и её край ушёл за экран. */
#ge-account-dashboard .gea-ord {
  transition:
    box-shadow 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#ge-account-dashboard .gea-ord.is-open {
  box-shadow: 0 18px 44px rgba(9, 10, 12, 0.14);
  transform: translateY(-1px);
}

/* Содержимое не просто «появляется целиком». Строки внутри всплывают одна за другой —
   сначала товары, потом адрес, потом кнопки: глаз успевает за ними пройти, и панель
   читается как разворачивание, а не как мигание. Задержки крошечные, в сумме четверть
   секунды: это отклик, а не представление. */
@keyframes gea-ord-step {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

#ge-account-dashboard .gea-ord.is-open .gea-ord-inner > * {
  animation: gea-ord-step 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#ge-account-dashboard .gea-ord.is-open .gea-ord-inner > *:nth-child(1) { animation-delay: 0.04s; }
#ge-account-dashboard .gea-ord.is-open .gea-ord-inner > *:nth-child(2) { animation-delay: 0.1s; }
#ge-account-dashboard .gea-ord.is-open .gea-ord-inner > *:nth-child(3) { animation-delay: 0.16s; }
#ge-account-dashboard .gea-ord.is-open .gea-ord-inner > *:nth-child(4) { animation-delay: 0.22s; }

/* Стрелка не просто переворачивается, а переворачивается с тем же ускорением, что и
   сама панель: два разных движения в одном жесте выглядят как сбой. */
#ge-account-dashboard .gea-ord-go {
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}

#ge-account-dashboard .gea-ord.is-open .gea-ord-go {
  opacity: 1;
}

/* Кому движение мешает — тому его и не будет. */
@media (prefers-reduced-motion: reduce) {
  #ge-account-dashboard .gea-ord,
  #ge-account-dashboard .gea-ord.is-open,
  #ge-account-dashboard .gea-ord.is-open .gea-ord-inner > *,
  #ge-account-dashboard .gea-ord-go {
    animation: none;
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   НЕОПЛАЧЕННЫЙ ЗАКАЗ: НАПОМИНАНИЕ НА ГЛАВНОЙ И СВОЯ КНОПКА ОПЛАТЫ
   ==========================================================================
   Владелец: «кнопку оплатить также по-другому изобрази, если человек не оплатил, и
   также если человек не оплатил заказ, форму оплаты закрыл, то надо чтобы в ЛК на
   главной высвечивался, закончите оформление заказа или что-то типо того».

   Закрыв окно банка, человек остаётся с заказом, который создан, но не оплачен, — и
   узнать об этом было неоткуда: заказ лежал во вкладке «Мои заказы» обычной строкой
   среди оплаченных, и отличала его только мелкая подпись статуса.

   Напоминание стоит первым на главной, выше кошелька: пока заказ не оплачен, это
   главное, что стоит сделать в кабинете. Оно тёмное — единственная тёмная плита на
   светлой панели, и взгляд попадает на неё раньше, чем на всё остальное.
   ========================================================================== */

#ge-account-dashboard .gea-unpaid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2.4vw, 18px);
  /* Отступ снизу крупнее обычного: под напоминанием стоит чёрный кошелёк, и без
     заметного просвета две тёмные плиты читались бы как одна. */
  margin-bottom: clamp(18px, 3.2vw, 26px);
  padding: clamp(14px, 2.6vw, 20px);
  border-radius: 22px;
  color: #f4f4f1;
  background: #0a0a0b;
  box-shadow: 0 16px 40px rgba(9, 10, 12, 0.18);
  animation: gea-unpaid-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes gea-unpaid-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

#ge-account-dashboard .gea-unpaid-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #0a0a0b;
  background: #ffffff;
}

#ge-account-dashboard .gea-unpaid-mark svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#ge-account-dashboard .gea-unpaid-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#ge-account-dashboard .gea-unpaid-title {
  color: #ffffff;
  font: 800 clamp(15px, 3.6vw, 18px) / 1.2 "Akrobat", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

#ge-account-dashboard .gea-unpaid-note {
  color: rgba(244, 244, 241, 0.62);
  font: 500 clamp(12px, 2.9vw, 13.5px) / 1.4 "Cyngle", "Cygre", Arial, sans-serif;
}

/* Кнопка на тёмной плите — белая: на чёрном это самое заметное, что бывает. */
#ge-account-dashboard .gea-unpaid-btn {
  flex: 0 0 auto;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  color: #0a0a0b;
  background: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  font: 800 13px/1 "Akrobat", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform 0.16s ease, background 0.16s ease;
}

@media (hover: hover) {
  #ge-account-dashboard .gea-unpaid-btn:hover { background: #ececea; transform: translateY(-1px); }
}

#ge-account-dashboard .gea-unpaid-btn:active { transform: scale(0.97); }
#ge-account-dashboard .gea-unpaid-btn[disabled] { opacity: 0.6; cursor: default; }

/* Оплата не прошла — то же напоминание, но словами про отказ банка; краснить плиту
   незачем, человек и так читает заголовок. Метка слева становится предупреждением. */
#ge-account-dashboard .gea-unpaid.is-error .gea-unpaid-mark {
  color: #ffffff;
  background: #8a1f1f;
}

@media (max-width: 560px) {
  #ge-account-dashboard .gea-unpaid {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }
  /* Кнопка уходит под текст и занимает всю ширину: в три колонки на телефоне она
     сжимается до «Оплатить …», а это ровно то место, где ошибаться нельзя. */
  #ge-account-dashboard .gea-unpaid-btn {
    grid-column: 1 / -1;
    width: 100%;
    padding: 14px 18px;
  }
}

/* ===== КНОПКА ОПЛАТЫ В КАРТОЧКЕ ЗАКАЗА ===== */
/* Была такой же белой капсулой, как «Отследить заказ» рядом. У неоплаченного заказа
   оплата — единственное незаконченное дело, и выглядеть она должна иначе: тёмная
   плитка, подпись слева, сумма справа, как в счёте. */
#ge-account-dashboard .gea-ord-acts .gea-pay-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 18px;
  border: 0;
  border-radius: 16px;
  color: #f4f4f1;
  background: #0a0a0b;
  cursor: pointer;
  text-align: left;
  font-family: "Akrobat", Arial, sans-serif;
  transition: transform 0.16s ease, background 0.16s ease;
}

#ge-account-dashboard .gea-pay-order-label {
  font: 750 13px/1 "Akrobat", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ge-account-dashboard .gea-pay-order-sum {
  flex: 0 0 auto;
  font: 800 16px/1 "Akrobat", Arial, sans-serif;
  letter-spacing: -0.01em;
}

@media (hover: hover) {
  #ge-account-dashboard .gea-ord-acts .gea-pay-order:hover {
    background: #1b1c20;
    transform: translateY(-1px);
  }
}

#ge-account-dashboard .gea-ord-acts .gea-pay-order:active { transform: scale(0.99); }
#ge-account-dashboard .gea-ord-acts .gea-pay-order[disabled] { opacity: 0.6; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  #ge-account-dashboard .gea-unpaid,
  #ge-account-dashboard .gea-unpaid-btn,
  #ge-account-dashboard .gea-ord-acts .gea-pay-order {
    animation: none;
    transition: none;
    transform: none;
  }
}