/* Кабинет покупателя: форма входа, баланс Geizer Coin, заказы, выписка.
   Страницу собирает tools/chemistry-account-page.py. Ширину и клиренс
   даёт .cartp из cart.css — здесь только то, чего там нет.

   Шкала отступов (21.09.2026), общая с витриной и корзиной:
   8 / 12 / 16 / 20 / 24 / 32 / 40 / 48. Всё от 12px приведено к
   ближайшему шагу, при равном расстоянии — к меньшему. Радиусы
   свели к трём: 12 у полей, кнопок и мелких плашек, 16 у карточек
   и обойм, 24 у крупной панели входа. Было 10, 11, 13, 14, 15, 20, 22 —
   разница в пару пикселей не читается как решение, она читается как
   небрежность, когда плашки стоят рядом.
   Не трогали: 6 и 7px у рамки фокуса и галочки согласия (там радиус
   равен половине элемента), 74px справа у плашки баланса — это место
   под знак монеты, и min-height 44px у кнопок — цель под палец. */

/* Тёмная схема объявлена явно. Иначе браузер считает страницу светлой
   и при автозаполнении телефона красит поле своим белым фоном с почти
   чёрным текстом — посреди тёмной формы. */
:root { color-scheme: dark; }

/* ============================================================
   ВХОД: карточка слева, «что внутри» справа

   Раньше поля, кнопка и согласие стояли одной строкой во всю ширину
   страницы: адрес почты тянулся на 700 пикселей, кнопка уезжала к
   середине, галочка согласия висела правее кнопки. Глазу негде было
   остановиться, и порядок действий не читался.

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

.acc-gate {
  display: grid;
  grid-template-columns: minmax(0, 452px) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  max-width: 1000px;
  margin: 24px 0 8px;
}
/* display у сетки перебивает hidden — без этого кабинет вошедшего
   рисовался бы поверх формы входа. */
.acc-gate[hidden] { display: none; }

.acc-panel {
  padding: 20px;
  border: 1px solid rgba(112, 166, 226, .22);
  border-radius: 24px;
  /* Блик сверху — от того же света, что и на плашках каталога: карточка
     не выглядит наклейкой поверх страницы. */
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(69, 187, 255, .16), transparent 62%),
    linear-gradient(180deg, rgba(13, 44, 90, .96), rgba(7, 26, 56, .96));
  box-shadow: 0 30px 70px -42px rgba(0, 0, 0, .95);
}

/* Переключатель способа входа: три равные доли в одной обойме. Так он
   читается как выбор одного из трёх, а не как три отдельные кнопки. */
.acc-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 20px;
  padding: 5px;
  border: 1px solid rgba(112, 166, 226, .16);
  border-radius: 16px;
  background: rgba(4, 18, 40, .6);
}
.acc-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  padding: 9px 6px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: #a8c2e2;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.acc-tab:hover { color: #fff; }
.acc-tab.is-on {
  background: linear-gradient(180deg, rgba(69, 187, 255, .24), rgba(69, 187, 255, .1));
  box-shadow: inset 0 0 0 1px rgba(69, 187, 255, .34);
  color: #fff;
}
.acc-tab:focus-visible {
  outline: 2px solid var(--cyan, #45bbff);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { .acc-tab { transition: none; } }

.acc-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.acc-form[hidden] { display: none; }
/* Шаг с кодом приходит на смену формам — в ту же колонку, а не рядом. */
.acc-step h3 {
  margin: 0;
  font-size: 17px;
  color: #eaf3ff;
}

.acc-hint {
  margin: 0;
  color: #9fb6d6;
  font-size: 12.5px;
  line-height: 1.55;
}

/* Согласие: галочка и текст в строку, вся строка кликается по label. */
.acc-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 12px;
  border: 1px solid rgba(112, 166, 226, .16);
  border-radius: 12px;
  background: rgba(4, 18, 40, .42);
  color: #bfd4ef;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}
/* Своя галочка. Системная в тёмной схеме рисуется мутным серым
   квадратом — единственное пятно на карточке, которое не из нашей
   палитры, и именно на нём человек должен принять решение. */
.acc-consent input {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid rgba(120, 190, 255, .45);
  border-radius: 7px;
  background: rgba(4, 18, 40, .8);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.acc-consent input:checked {
  border-color: #45bbff;
  background: linear-gradient(180deg, #0d82f7, #0866c9) no-repeat center;
  /* Галочка нарисована фоном: одна картинка вместо лишнего элемента. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4 6.3 11.5 12.8 5' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #0d82f7, #0866c9);
  background-size: 16px 16px, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.acc-consent input:focus-visible {
  outline: 2px solid var(--cyan, #45bbff);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { .acc-consent input { transition: none; } }
.acc-consent a { color: #45bbff; text-decoration: underline; text-underline-offset: 2px; }

/* Кнопка, которая выглядит ссылкой: «Забыли пароль», «Выйти со всех
   устройств». Именно кнопка, а не ссылка: она ничего не открывает. */
.acc-linkbtn {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: #45bbff;
  font: inherit;
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.acc-linkbtn:hover { color: #8fd4ff; }
.acc-linkbtn:focus-visible {
  outline: 2px solid var(--cyan, #45bbff);
  outline-offset: 2px;
  border-radius: 6px;
}
/* «Забыли пароль» и «Ввести другой адрес» — под кнопкой, по центру:
   это выход из тупика, а не второе действие наравне с первым. */
.acc-form .acc-linkbtn { align-self: center; }

.acc-form label {
  position: relative;       /* якорь для кнопки «показать пароль» */
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #a8c2e2;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
}
/* Селектор нарочно длиннее, чем кажется нужным.

   В styles.css магазина есть общее правило `form input:not([type=checkbox])`
   — у него вес 0,1,2 против 0,1,1 у `.acc-form input`, и подключение
   файла позже не помогает: каскад решает не порядок, а вес. Поля входа
   рисовались чужим стилем (свой отступ, своя рамка, лишний отступ
   сверху) и не совпадали с плашками кабинета. */
.acc-form input:not([type=checkbox]) {
  height: 50px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid rgba(120, 190, 255, .26);
  border-radius: 12px;
  background: rgba(4, 18, 40, .72);
  color: #fff;
  font-size: 16px;          /* меньше 16px — iOS зумит страницу при фокусе */
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.acc-form input:not([type=checkbox])::placeholder {
  /* Браузерный серый по тёмно-синему даёт 3,7:1 при норме 4,5:1. */
  color: #8ba3c2;
  opacity: 1;
}
.acc-form input:focus {
  border-color: var(--cyan, #45bbff);
  box-shadow: 0 0 0 3px rgba(69, 187, 255, .18);
}
@media (prefers-reduced-motion: reduce) {
  .acc-form input:not([type=checkbox]) { transition: none; }
}
/* Главное действие — во всю ширину карточки: промахнуться нельзя, и
   видно, чем шаг заканчивается. */
.acc-form button[type=submit] {
  width: 100%;
  height: 52px;
  margin-top: 3px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
}
/* Единственное действие на странице — и единственное место, где фокус
   было не видно: общего `.button:focus-visible` в магазине нет, а
   системное кольцо Chrome тёмное и на тёмно-синем не читается. */
.acc-form button:focus-visible {
  outline: 2px solid var(--cyan, #45bbff);
  outline-offset: 3px;
}

/* Пароль вслепую — первая причина не войти с телефона. Глазок ставится
   скриптом в любое поле пароля, поэтому стиль общий. */
.acc-eye {
  position: absolute;
  right: 3px;
  bottom: 0;                /* высота кнопки равна высоте поля — так
                               значок стоит по центру при любой высоте */
  width: 44px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0 12px 12px 0;
  background: none;
  color: #8fb6e0;
  cursor: pointer;
}
.acc-eye:hover { color: #fff; background: rgba(69, 187, 255, .1); }
.acc-eye svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.acc-eye:focus-visible {
  outline: 2px solid var(--cyan, #45bbff);
  outline-offset: 2px;
}
.acc-form input[type=password] { padding-right: 48px; }

/* Код из письма набирают глазами по одной цифре — поле под это и
   сделано: крупно, по центру, с разрядкой. */
.acc-code-input {
  text-align: center;
  font-size: 25px !important;
  font-weight: 700;
  letter-spacing: .45em;
  text-indent: .45em;       /* гасит разрядку после последней цифры */
  font-variant-numeric: tabular-nums;
}

/* ---------- правая колонка: ради чего заводить кабинет ---------- */

.acc-why {
  padding: 20px 24px;
  border: 1px solid rgba(112, 166, 226, .14);
  border-radius: 16px;
  background: rgba(8, 31, 67, .38);
}
.acc-why h2 {
  margin: 0 0 16px;
  font-size: 15px;
  color: #eaf3ff;
}
.acc-why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.acc-why li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 3px 12px;
}
.acc-why-ico {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(69, 187, 255, .22);
  border-radius: 12px;
  background: rgba(69, 187, 255, .1);
}
.acc-why-ico svg { width: 19px; height: 19px; fill: none; stroke: #7cc9ff; stroke-width: 1.6; }
.acc-why b { color: #eaf3ff; font-size: 14px; }
.acc-why li > span:not(.acc-why-ico) { color: #9fb6d6; font-size: 13px; line-height: 1.5; }
.acc-why-note {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(112, 166, 226, .14);
  color: #8fa8c8;
  font-size: 12.5px;
  line-height: 1.55;
}

@media (max-width: 940px) {
  /* Колонки друг под друга, карточка первой: на планшете и телефоне
     человек пришёл войти, а не читать про кабинет. */
  .acc-gate { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 16px; }
  .acc-why { padding: 16px 20px; }
}
.acc-err {
  margin: 10px 0 0;
  padding: 11px 12px;
  border: 1px solid rgba(255, 140, 140, .35);
  border-radius: 12px;
  background: rgba(120, 30, 30, .22);
  color: #ffc7c7;
  font-size: 14px;
  line-height: 1.5;
}
/* Тот же блок говорит и хорошие новости: «код отправлен», «пароль
   изменён». Держать для них второй элемент незачем — человек смотрит
   в одно место, а цвет объясняет, что случилось. */
.acc-err.is-ok {
  border-color: rgba(127, 214, 166, .4);
  background: rgba(24, 82, 56, .22);
  color: #a8ecc8;
}
.acc-err[hidden] { display: none; }

/* Шапка кабинета (21.09.2026). Раньше это была строка с именем, а монеты
   шли отдельной плашкой ниже — на телефоне до первого заказа надо было
   пролистать два экрана «кто я». Теперь кто вошёл, сколько монет и выход
   стоят в одной карточке. */
.acc-who {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 12px 14px;
  border: 1px solid rgba(112, 166, 226, .18);
  border-radius: 16px;
  background: rgba(8, 31, 67, .6);
}
.acc-who-me { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 200px; }
/* В левой колонке карточка человека — без своей рамки: колонка уже
   карточка, а две рамки одна в другой выглядят коробкой в коробке. */
.acc-side .acc-who {
  margin: 0;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(120, 170, 230, .16);
  border-radius: 0;
  background: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}
.acc-side .acc-who b { font-size: 15px; }
.acc-side .acc-who span { font-size: 12.5px; word-break: break-word; }
.acc-who b { color: #fff; font-size: 18px; line-height: 1.25; }
.acc-who span { color: #9fb6d6; font-size: 13px; line-height: 1.4; }
/* Монеты внутри шапки: без своей рамки и фона — карточка уже одна. */
.acc-who .acc-coins { margin: 0; flex: 0 1 auto; }
.acc-who .acc-coin-box {
  flex: 0 0 auto;
  padding: 2px 10px 2px 0;
  border: 0;
  background: none;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.acc-who .acc-coin-box b { font-size: 22px; }
.acc-who .acc-coin-box span { font-size: 12px; max-width: 128px; }
.acc-who .acc-coin-pic { position: static; width: 28px; height: 28px; }

/* «Закрыть кабинет». Уводим вправо и делаем неяркой: это не действие,
   ради которого человек пришёл, но на общем компьютере мойки она нужна
   под рукой, а не в конце страницы. */
.acc-exit {
  margin-left: auto;
  /* 44 px, а не «сколько получится»: на общем компьютере мойки это
     кнопка, промах по которой оставляет твои заказы следующему. */
  min-height: 44px;
  padding: 7px 16px;
  border: 1px solid rgba(112, 166, 226, .3);
  border-radius: 12px;
  background: transparent;
  color: #bfd4ef;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.acc-exit:hover { border-color: rgba(120, 190, 255, .6); color: #fff; }
.acc-exit:focus-visible {
  outline: 2px solid var(--cyan, #45bbff);
  outline-offset: 2px;
}

.acc-coins {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.acc-coin-box {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid rgba(112, 166, 226, .18);
  border-radius: 16px;
  background: rgba(8, 31, 67, .6);
}
.acc-coin-box b { color: #eaf3ff; font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.acc-coin-box span { color: #9fb6d6; font-size: 13px; line-height: 1.45; }
.acc-coin-box.is-live { border-color: rgba(69, 187, 255, .38); }
.acc-coin-box.is-live b { color: var(--cyan, #45bbff); }
/* Монета в углу плашки живого баланса: не перед числом в строку (тогда
   она спорит с ним за место), а как знак самой плашки. */
.acc-coin-box { position: relative; padding-right: 74px; }
.acc-coin-pic {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 40px !important;
  height: 40px !important;
}
@media (max-width: 480px) {
  .acc-coin-box { padding-right: 62px; }
  .acc-coin-pic { width: 34px !important; height: 34px !important; right: 14px; }
}

.acc-note { margin-top: 12px; color: #9fb6d6; font-size: 13.5px; line-height: 1.6; }
/* Цвет ссылки отличается от соседнего текста по яркости всего в 1,05
   раза — то есть на глаз не отличается ничем. Подчёркиваем. */
.acc-note a {
  color: #45bbff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* ── Кабинет двумя колонками (22.09.2026) ──────────────────────────────
   Компоновка маркетплейсов: слева кто ты и разделы, справа содержимое.
   Разделы видны все сразу и не уезжают за край, когда их станет больше.
   На телефоне колонка складывается, и меню снова идёт лентой — там
   вертикальный список из пяти пунктов отнял бы полэкрана. */
.acc-shell {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.acc-side {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(120, 170, 230, .18);
  border-radius: 18px;
  background: rgba(10, 32, 68, .5);
}
.acc-main { min-width: 0; }

/* Аватар с инициалами: лицо кабинета без фотографии, которой у нас
   всё равно нет. */
.acc-ava {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(145deg, #2f6fd0, #1b3f7d);
  color: #eaf3ff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Плитки обзора — «Мои данные»: число крупно, подпись мелко, вся плитка
   ведёт в свой раздел. */
.acc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.acc-tile {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid rgba(120, 170, 230, .18);
  border-radius: 16px;
  background: rgba(10, 32, 68, .5);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.acc-tile:hover { border-color: rgba(120, 170, 230, .45); transform: translateY(-1px); }
.acc-tile b { color: #fff; font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.acc-tile.is-coin b { color: #ffd479; }
.acc-tile-k { color: #8fb0d8; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.acc-tile-s { color: #9fb6d6; font-size: 12.5px; line-height: 1.4; }

.acc-last {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(120, 170, 230, .18);
  border-radius: 18px;
  background: rgba(10, 32, 68, .5);
}
.acc-last-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.acc-last-row b { color: #eaf3ff; font-size: 16px; }
.acc-last-note { margin: 0; color: #9fb6d6; font-size: 13px; }
.acc-last-go { justify-self: start; min-height: 42px; }

@media (max-width: 860px) {
  .acc-shell { grid-template-columns: 1fr; gap: 14px; }
  .acc-side { position: static; padding: 14px; }
}

.acc-empty { color: #9fb6d6; }

/* Пустая вкладка с выходом в каталог (22.09.2026). Раньше здесь была одна
   серая строка «Заказов пока нет» — человек упирался в неё и закрывал
   вкладку. Теперь это карточка с понятным следующим шагом. */
.acc-nothing {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 22px;
  border: 1px solid rgba(120, 170, 230, .18);
  border-radius: 18px;
  background: rgba(10, 32, 68, .45);
}
.acc-nothing b { color: #eaf3ff; font-size: 16px; }
.acc-nothing p { margin: 0; max-width: 46ch; color: #9fb6d6; font-size: 13.5px; line-height: 1.55; }
.acc-nothing-go { min-height: 44px; display: inline-flex; align-items: center; }

#acc-result h2 { margin: 32px 0 12px; font-size: 19px; }

.acc-orders, .acc-hist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
/* Строго «свои» li: внутри заказа с 21.09.2026 живёт второй список — его
   позиции. Без «>» они получали бы рамку и фон карточки заказа. */
.acc-orders > li, .acc-hist > li {
  display: grid;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 16px;
  border: 1px solid rgba(112, 166, 226, .16);
  border-radius: 12px;
  background: rgba(8, 31, 67, .45);
  color: #cfe0f5;
  font-size: 14px;
}
/* Заказ раскрывается, поэтому отступы у него не на карточке, а на
   строке-кнопке: состав под ней идёт до самого края карточки. */
.acc-orders > li { display: block; padding: 0; overflow: hidden; }
/* display перебивает hidden — без этой строки отбор прятал бы заказы
   только в разметке, а на экране они оставались бы все. */
.acc-orders > li[hidden] { display: none; }
/* Треки не фиксированные, а «не меньше»: номер заказа и число монет
   растут, и на 92/60 пикселях шестизначное число вылезало из своей
   колонки и съедало зазор до соседней. Последняя колонка — стрелка
   (::after), у неё своя постоянная ширина. */
.acc-row { grid-template-columns: minmax(92px, auto) 104px minmax(0, 1fr) auto 14px; }
.acc-hist > li { grid-template-columns: 104px minmax(60px, auto) minmax(0, 1fr) auto; }
.acc-orders b, .acc-hist > li b { color: #fff; font-variant-numeric: tabular-nums; }
/* Вся строка заказа — одна кнопка: на телефоне попасть в маленькую
   стрелку нельзя, а промах по строке ничего не ломает. Обнуляем
   кнопочный вид: цвет, шрифт и выравнивание берём у списка. */
.acc-row {
  display: grid;
  align-items: center;
  gap: 4px 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.acc-row:hover { background: rgba(69, 187, 255, .07); }
.acc-row:focus-visible {
  outline: 2px solid var(--cyan, #45bbff);
  outline-offset: -2px;
}
/* Стрелка — последним элементом сетки, без лишнего узла в разметке.
   Место ей назначено прямо: в разметке она идёт после трека, а тот
   занимает всю ширину, и сама стрелка уехала бы третьей строкой. */
.acc-row::after {
  content: '';
  grid-column: 5;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  width: 8px;
  height: 8px;
  border: solid #8fb6e0;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.acc-row[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .acc-row::after { transition: none; } }

/* ---------- состав заказа ----------
   Что именно покупали и кнопка «Повторить заказ» (21.09.2026): для
   расходников это главное действие кабинета, поэтому кнопка стоит у
   состава, а не в общем подвале страницы. */
.acc-items {
  /* Отступы сверху и снизу живут не здесь, а в раскрытом состоянии
     створки (.acc-fold.is-open): у свёрнутой высота нулевая, но поля
     обнулить нельзя — они не сжимаются, и под каждым закрытым заказом
     оставалась бы полоса пустоты в три десятка пикселей.
     Черта сверху — тенью, а не рамкой, по той же причине: рамка видна
     и при нулевой высоте, а тень внутрь обрезается с содержимым. */
  padding: 0 16px;
  box-shadow: inset 0 1px 0 rgba(112, 166, 226, .14);
}
.acc-items[hidden] { display: none; }
.acc-items .acc-hint { font-size: 13px; }
.acc-lines {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.acc-lines li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 146px 100px auto;
  align-items: center;
  gap: 2px 12px;
  font-size: 13.5px;
}
.acc-ln { color: #eaf3ff; }
/* Фасовка — тем же кеглем, но приглушённо: это уточнение к названию, а
   не второе название. */
.acc-ln i { color: #9fb6d6; font-style: normal; }
.acc-q { color: #9fb6d6; font-variant-numeric: tabular-nums; }
.acc-t { color: #fff; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.acc-again {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.acc-again .button { min-height: 44px; }
/* Строка про пропущенные позиции: тянется рядом с кнопкой, а на узком
   экране переносится под неё целиком, а не по одному слову. */
.acc-again-note {
  flex: 1 1 220px;
  min-width: 0;
  color: #9fb6d6;
  font-size: 13px;
  line-height: 1.5;
}
.acc-again-note.is-warn { color: #ffd9a8; }

/* Оплата заказа из кабинета (22.09.2026). Стоит под составом и «повторить»:
   это самое сильное действие в карточке, и выглядеть оно должно
   соответственно — золотом, как кнопка оплаты в корзине. */
.acc-pay {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(120, 170, 230, .16);
}
.acc-pay-go.button.primary {
  min-height: 48px;
  border: 0;
  background: linear-gradient(180deg, #ffd479, #f0a93a);
  color: #23160a;
  font-weight: 700;
}
.acc-pay-go.button.primary:hover { filter: brightness(1.04); }
.acc-pay-go[disabled] { opacity: .6; }
/* Галочка «списать монеты» — строка, а не мелкий чекбокс: на телефоне по
   ней промахиваются, а промах здесь стоит человеку скидки. */
.acc-pay-coins {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid rgba(120, 170, 230, .2);
  border-radius: 12px;
  background: rgba(10, 32, 68, .45);
  color: #cfe4ff;
  font-size: 13.5px;
  line-height: 1.45;
  cursor: pointer;
}
.acc-pay-coins input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: #f0a93a; }
/* Способ оплаты плитками (22.09.2026, по образцу маркетплейсов).
   «Картой» и «через СБП» — разные вопросы в голове покупателя; увидев
   только слово «оплатить», он не знает, ждёт ли его ввод карты. */
.acc-ways { display: grid; gap: 8px; }
.acc-ways-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.acc-way {
  display: grid;
  gap: 2px;
  padding: 11px 14px;
  border: 1px solid rgba(120, 170, 230, .2);
  border-radius: 14px;
  background: rgba(10, 32, 68, .45);
}
.acc-way.is-on { border-color: rgba(240, 169, 58, .55); box-shadow: inset 0 0 0 1px rgba(240, 169, 58, .18); }
.acc-way b { color: #eaf3ff; font-size: 14px; }
.acc-way span { color: #9fb6d6; font-size: 12.5px; line-height: 1.4; }

/* Сводка «за что платим»: столбиком, как в чеке. */
.acc-sum-box {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(120, 170, 230, .2);
  border-radius: 16px;
  background: rgba(10, 32, 68, .45);
}
.acc-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.acc-sum-row span { color: #9fb6d6; font-size: 13.5px; }
.acc-sum-row b { color: #eaf3ff; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.acc-sum-row b.is-free { color: #7fd6a6; font-size: 13px; font-weight: 500; }
.acc-sum-row b.is-coin { color: #ffd479; }
.acc-sum-row.is-total {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(120, 170, 230, .22);
}
.acc-sum-row.is-total span { color: #eaf3ff; font-size: 15px; font-weight: 600; }
.acc-sum-row.is-total b { font-size: 20px; }

.acc-pay-note { margin: 0; color: #9fb6d6; font-size: 13px; line-height: 1.5; }
.acc-pay-note:empty { display: none; }
.acc-pay-note.is-warn { color: #ffd9a8; }

.acc-date { color: #8fa8c8; font-variant-numeric: tabular-nums; }
.acc-sum { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-state { color: #9fb6d6; }
.acc-state.is-paid { color: #7fd6a6; }
/* Начисление по отменённому заказу: число зачёркнуто, иначе строка
   читается как «монеты есть», а их нет. */
.acc-hist li.is-lost b { color: #8fa8c8; text-decoration: line-through; }
.acc-hist li.is-lost { opacity: .85; }

/* У полей подсветка стоит на :focus, а не :focus-visible: рамка
   появляется и от щелчка мышью. Для поля ввода это уместно — она
   показывает, куда попадёт набранное. */

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

   Колонок две, а не «сколько влезет»: карточка профиля — это форма, и
   поле шириной в треть экрана читается хуже, чем в половину. На телефоне
   одна колонка и поля друг под другом. */
.acc-profile {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* На телефоне обоймы колонок растворяются, и карточки встают одной
   лентой — порядок задаёт число: кто вы, реквизиты, вход. */
.acc-col { display: contents; }
.acc-flash { order: 0; }
.acc-n1 { order: 1; }
.acc-n2 { order: 2; }
.acc-n3 { order: 3; }
.acc-n4 { order: 4; }

@media (min-width: 900px) {
  /* Две колонки — двумя обоймами, а не сеткой. В сетке карточки
     выравниваются построчно: под короткой «Кто вы» оставалась дыра во
     всю высоту соседних реквизитов. В колонках карточки ложатся друг под
     друга вплотную, а раскладка через одну (см. account.js) держит
     колонки примерно равными. */
  .acc-profile { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .acc-col {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }
  .acc-flash { flex: 1 1 100%; }
}
.acc-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(112, 166, 226, .18);
  border-radius: 16px;
  background: rgba(8, 31, 67, .5);
}
.acc-card h3 { margin: 0; font-size: 16px; color: #eaf3ff; }
.acc-card label {
  position: relative;       /* якорь для глазка в поле пароля */
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #bfd4ef;
  font-size: 13px;
  font-weight: 600;
}
.acc-card .acc-eye { height: 44px; }
.acc-card input[type=password] { padding-right: 48px; }
.acc-card input:not([type=checkbox]) {
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid rgba(120, 190, 255, .24);
  border-radius: 12px;
  background: #081f43;
  color: #fff;
  font-size: 16px;
  outline: none;
}
.acc-card input:focus {
  border-color: var(--cyan, #45bbff);
  box-shadow: 0 0 0 3px rgba(69, 187, 255, .18);
}
/* Регион доставки (30.09.2026) — единственный список в кабинете.
   Вид повторяет поля ввода: иначе он читается как чужеродный элемент
   посреди формы. 16 px обязательны — Safari на iPhone увеличивает
   страницу на поле мельче 16 px и обратно её не отпускает. */
.acc-card select {
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid rgba(120, 190, 255, .24);
  border-radius: 12px;
  background: #081f43;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  outline: none;
}
.acc-card select:focus {
  border-color: var(--cyan, #45bbff);
  box-shadow: 0 0 0 3px rgba(69, 187, 255, .18);
}
.acc-card .button { align-self: flex-start; min-height: 44px; }
.acc-card .acc-hint { font-size: 12.5px; }
.acc-card h4 { margin: 4px 0 0; color: #eaf3ff; font-size: 14px; }
/* Карточка, которой пока нечего делать: реквизиты до привязки заказов.
   Не прячем — человек должен видеть, что здесь будет и почему пусто. */
.acc-card.is-off { opacity: .8; }
/* Карточка-повод: заказы не привязаны. Тёплая рамка, а не красная: это
   не ошибка человека, а незаконченное знакомство. */
.acc-card.is-warn {
  border-color: rgba(255, 196, 120, .4);
  background: linear-gradient(180deg, rgba(74, 52, 18, .5), rgba(8, 31, 67, .5));
}

/* Форма внутри карточки. Поля в столбик всегда, в том числе на широком
   экране: две колонки полей внутри колонки карточек — это уже сетка,
   которую глаз читает построчно, а заполняют её сверху вниз. */
.acc-fform {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.acc-fld { display: flex; flex-direction: column; gap: 6px; }
/* Пояснение под полем. Стоит всегда, а не всплывает после промаха:
   «десять цифр у компании, двенадцать у ИП» полезнее до ввода. */
.acc-tip { margin: 0; color: #8fa8c8; font-size: 12px; line-height: 1.45; }
.acc-bad { margin: 0; color: #ffc7c7; font-size: 12.5px; line-height: 1.45; }
.acc-bad[hidden] { display: none; }
.acc-fld.is-bad input:not([type=checkbox]) {
  border-color: rgba(255, 140, 140, .7);
  background: rgba(60, 20, 20, .35);
}

/* Строки «почта — такая-то». Подпись слева, значение справа: две
   колонки читаются как таблица, а не как ещё один абзац. */
.acc-props {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  margin: 0;
}
.acc-props dt { color: #8fa8c8; font-size: 13px; line-height: 1.45; }
.acc-props dd {
  margin: 0;
  color: #eaf3ff;
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;   /* длинная почта не разносит колонку */
}

/* Подвал карточки: кнопка и ответ рядом с ней — там, куда человек
   смотрит, нажимая. Общая плашка наверху страницы для этого не годится:
   у вошедшего она спрятана вместе с формой входа. */
.acc-save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.acc-save .acc-linkbtn { padding: 0; }
.acc-said {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #9fb6d6;
  font-size: 13px;
  line-height: 1.45;
}
.acc-said:empty { display: none; }
.acc-said.is-ok { color: #a8ecc8; }
.acc-said.is-bad { color: #ffc7c7; }
.acc-said svg { flex: 0 0 auto; width: 16px; height: 16px; }
@keyframes acc-pop {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
.acc-said.is-ok, .acc-said.is-bad, .acc-flash { animation: acc-pop .2s ease both; }

/* Итог привязки заказов: единственное, что переживает перерисовку
   кабинета, поэтому стоит во всю ширину сетки, над карточками. */
.acc-flash {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid rgba(127, 214, 166, .4);
  border-radius: 12px;
  background: rgba(24, 82, 56, .22);
  color: #a8ecc8;
  font-size: 13.5px;
  line-height: 1.45;
}
.acc-flash svg { flex: 0 0 auto; width: 17px; height: 17px; }

/* Кнопка, открывающая форму смены пароля. Выглядит строкой карточки, а
   не главным действием: пароль меняют раз в год, а место на телефоне
   занимала бы развёрнутая форма каждый заход. */
.acc-open {
  position: relative;
  min-height: 44px;
  padding: 10px 40px 10px 14px;
  border: 1px solid rgba(112, 166, 226, .22);
  border-radius: 12px;
  background: rgba(4, 18, 40, .42);
  color: #cfe0f5;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.acc-open:hover { border-color: rgba(120, 190, 255, .5); color: #fff; }
.acc-open:focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 2px; }
.acc-open::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border: solid #8fb6e0;
  border-width: 0 2px 2px 0;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}
.acc-open[aria-expanded="true"]::after { transform: translateY(-20%) rotate(-135deg); }
/* Створка формы пароля — та же, что у состава заказа: обойма растёт с
   нулевой доли высоты, содержимое закрыто и от программ чтения с экрана,
   иначе Tab уводил бы в невидимые поля. */
.acc-fold > .acc-pass {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s .26s, padding .26s ease;
}
.acc-fold.is-open > .acc-pass {
  visibility: visible;
  padding-top: 12px;
  transition: visibility 0s 0s, padding .26s ease;
}
@media (prefers-reduced-motion: reduce) {
  .acc-open, .acc-open::after { transition: none; }
}

/* Требования к паролю — до отправки, а не после отказа. Отмечаются по
   мере набора: пустое поле держит их серыми, иначе экран встречает
   человека тремя невыполненными условиями, будто он уже ошибся. */
.acc-rules { list-style: none; display: grid; gap: 5px; margin: 0; padding: 0; }
.acc-rules li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #8fa8c8;
  font-size: 12.5px;
  line-height: 1.5;
}
.acc-rules li::before {
  content: '';
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border: 1px solid rgba(120, 190, 255, .35);
  border-radius: 50%;
  transition: background-color .18s ease, border-color .18s ease;
}
.acc-rules li.is-ok { color: #a8ecc8; }
.acc-rules li.is-ok::before {
  border-color: rgba(127, 214, 166, .65);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.5 6.4 11.4 12.6 5' fill='none' stroke='%23a8ecc8' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / 11px 11px,
    rgba(127, 214, 166, .18);
}
.acc-rules li.is-no::before { border-color: rgba(255, 170, 170, .5); }
@media (prefers-reduced-motion: reduce) {
  .acc-rules li::before { transition: none; }
  .acc-said.is-ok, .acc-said.is-bad, .acc-flash { animation: none; }
}

/* Трек отгрузки в строке заказа: отдельной строкой под названием, а не
   четвёртой колонкой — номер длинный и колонку разносит. */
.acc-track {
  grid-column: 1 / -1;
  color: #8fd4ff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 680px) {
  /* Четыре строки вместо пяти: номер и сумма, под ними дата и плашка
     стадии, дальше снимки и трек. Стрелка стоит третьей колонкой в
     первой строке — иначе она занимает собой целую строку, а карточка
     вырастает на два десятка пикселей без единого нового слова.
     Колонка с суммой не растягивается по самому длинному соседу, а
     прижата вправо: так суммы всех заказов стоят столбиком и их можно
     сравнить глазом. */
  .acc-row {
    grid-template-columns: minmax(0, 1fr) auto 16px;
    row-gap: 3px;
    padding: 12px 12px;
  }
  .acc-orders b { grid-column: 1; grid-row: 1; }
  .acc-sum { grid-column: 2; grid-row: 1; text-align: right; }
  .acc-orders .acc-date { grid-column: 1; grid-row: 2; }
  /* Селекторы с двумя классами нарочно: раскладка строки на широком
     экране описана ниже по файлу, и при равном весе побеждала бы она —
     каскад решает не порядок правил в голове, а вес и порядок в файле. */
  .acc-row .acc-chip { grid-column: 2 / -1; grid-row: 2; justify-self: end; }
  .acc-row .acc-strip { grid-column: 1 / -1; grid-row: 3; }
  .acc-row::after { grid-column: 3; grid-row: 1; justify-self: end; }

  /* Состав в столбик: снимок слева на всю карточку строки, название во
     всю оставшуюся ширину, под ним слева «2 шт × 990 ₽», справа сумма.
     Пять колонок на 390 px не живут — от названия оставалось два слова. */
  .acc-items { padding-left: 12px; padding-right: 12px; }
  .acc-lines li { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .acc-lines .acc-pic { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .acc-ln { grid-column: 2 / -1; grid-row: 1; }
  .acc-q { grid-column: 2; grid-row: 2; }
  .acc-t { grid-column: 3; grid-row: 2; }
  /* Кнопка позиции — третьей строкой под ценой, по правому краю: там же,
     где сумма строки, и палец уже стоит в этом углу. */
  .acc-one { grid-column: 2 / -1; grid-row: 3; margin-top: 4px; }
  /* Кнопка во всю ширину карточки: так она не уезжает за край и по ней
     не промахнуться большим пальцем. */
  .acc-again .button { width: 100%; }

  /* Выписка: своя разметка. Раньше сюда попадало правило про .acc-sum,
     которого в выписке нет, число монет уезжало во вторую строку, и
     карточка разваливалась на три строки с дырой справа. */
  .acc-hist li {
    grid-template-columns: minmax(0, 1fr) 92px;
    row-gap: 2px;
  }
  .acc-hist li b { grid-column: 2; grid-row: 1; text-align: right; }
  .acc-hist li .acc-date { grid-column: 1; grid-row: 1; }
  .acc-hist li span:not(.acc-date):not(.acc-state) { grid-column: 1 / -1; grid-row: 2; }
  .acc-hist li .acc-state { grid-column: 1 / -1; grid-row: 3; }
  .acc-orders .acc-track { grid-column: 1 / -1; grid-row: 4; }

  .acc-date, .acc-state { font-size: 13px; }

  /* Вкладки на телефоне: три подряд не помещаются, пусть переносятся
     и не жмут друг друга. */
  .acc-tab { padding: 10px 12px; font-size: 13px; }
  .acc-form { border-radius: 16px; }
}

/* ── Вкладки кабинета (21.09.2026) ─────────────────────────────────────
   Кабинет — три разных занятия: посмотреть заказ, свериться по монетам,
   поправить свои данные. Раньше они шли одной лентой сверху вниз, и до
   «сменить пароль» человек листал через всю историю монет. Вкладки —
   капсулы того же вида, что и в воротах входа: тот же язык, что на
   соседнем экране. */
.acc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
}
/* В левой колонке разделы идут списком, как в кабинете маркетплейса:
   каждый занимает всю ширину, счётчик уходит вправо. */
.acc-side .acc-nav { flex-direction: column; flex-wrap: nowrap; gap: 2px; margin: 0; }
.acc-side .acc-nav-b { width: 100%; justify-content: space-between; min-height: 42px; }
.acc-side .acc-nav-b i { margin-left: auto; }
.acc-side .acc-exit { width: 100%; justify-content: center; }
@media (max-width: 860px) {
  /* На телефоне список из пяти строк отнял бы полэкрана — возвращаем
     ленту, а «Выйти» ставим отдельной строкой под ней. */
  .acc-side .acc-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .acc-side .acc-nav-b { width: auto; justify-content: center; }
}
.acc-nav-b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 7px 14px;
  border: 1px solid rgba(112, 166, 226, .22);
  border-radius: 999px;
  background: transparent;
  color: #bfd4ef;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.acc-nav-b:hover { border-color: rgba(120, 190, 255, .55); color: #fff; }
.acc-nav-b:focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 2px; }
.acc-nav-b.is-on {
  border-color: rgba(69, 187, 255, .55);
  background: rgba(69, 187, 255, .12);
  color: #fff;
}
/* Счётчик заказов в капсуле: число, а не подпись — «Заказы 3» читается
   быстрее, чем «Заказы (3 штуки)». */
.acc-nav-b i {
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(112, 166, 226, .18);
  color: #cfe2fb;
  font-variant-numeric: tabular-nums;
}
.acc-nav-b.is-on i { background: rgba(69, 187, 255, .22); color: #fff; }

.acc-secs { margin-top: 14px; }
.acc-sec[hidden] { display: none; }
.acc-sec > h3 { margin: 18px 0 8px; color: #eaf3ff; font-size: 15px; }
.acc-sec > h3:first-child { margin-top: 0; }

/* Отступы у профиля те же, что у карточек выше: кабинет должен читаться
   как одна страница, а не как три разных. */
.acc-profile { margin-top: 0; }

@media (max-width: 560px) {
  .acc-who { gap: 10px 12px; padding: 12px; }
  .acc-who .acc-coin-box span { max-width: none; }
  .acc-nav { gap: 5px; }
  .acc-nav-b { font-size: 13.5px; padding: 7px 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   КАБИНЕТ ПОКУПАТЕЛЯ, 22.09.2026: заказ как главный экран

   Владелец: «подобие как на Озоне, WB или AliExpress, только красивее и
   интерактивнее». Взяли оттуда ровно то, что работает на нашем
   покупателе — владельце мойки, который берёт химию раз в месяц крупно:
   снимки товаров в свёрнутой строке (свой заказ узнают по ним, а не по
   номеру), путь заказа с датами, трек с кнопкой «скопировать», отбор по
   стадии и поиск по составу, отложенное с сегодняшней ценой.

   Чего не взяли: обратного отсчёта доставки, рейтингов, «осталось две
   штуки». Этих данных у нас нет, а рисовать их — значит однажды
   объясняться за них по телефону.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- плашка со снимком ----------
   Один размер на все места: 40 px в строке заказа и в составе, 88 px в
   избранном. Фон — край кадра (--plate-bg), по умолчанию белый: снимки
   прайса сняты на белом, и серая подложка под ними выглядит грязью. */
.acc-pic {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(112, 166, 226, .16);
  border-radius: 10px;
  background: var(--plate-bg, #fff);
}
.acc-pic img { width: 100%; height: 100%; object-fit: contain; }
.acc-pic.is-big { width: 88px; height: 88px; border-radius: 12px; }
/* Снимка нет — белого квадрата тоже: пустая белая плашка читается как
   «картинка не загрузилась», а не как «её у нас нет». */
.acc-pic.is-none { background: rgba(8, 31, 67, .7); }

/* ---------- лента снимков в свёрнутой строке ---------- */
.acc-strip {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 6px;
  overflow: hidden;
}
.acc-strip:empty { display: none; }
/* «+3» — столько позиций не поместилось. Плашка того же размера, что и
   снимки: ряд не сбивается. */
.acc-more {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(112, 166, 226, .2);
  border-radius: 10px;
  background: rgba(8, 31, 67, .7);
  color: #bfd4ef;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.acc-cnt {
  min-width: 0;
  margin-left: 4px;
  color: #8fa8c8;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Плашка стадии. Цветов три, а не семь: «идёт работа», «доехало», «не
   состоялось» — тот же язык, что в кабинете менеджера. Список из десяти
   заказов так читается одним взглядом. */
.acc-chip {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px;
  border: 1px solid rgba(112, 166, 226, .28);
  border-radius: 999px;
  background: rgba(112, 166, 226, .1);
  color: #cfe0f5;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: nowrap;
}
.acc-chip::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.acc-chip.is-paid {
  border-color: rgba(127, 214, 166, .4);
  background: rgba(24, 82, 56, .22);
  color: #a8ecc8;
}
.acc-chip.is-done {
  border-color: rgba(69, 187, 255, .45);
  background: rgba(69, 187, 255, .14);
  color: #8fd4ff;
}
.acc-chip.is-off {
  border-color: rgba(255, 140, 140, .3);
  background: rgba(120, 30, 30, .2);
  color: #ffb4b4;
}

.acc-track { grid-row: 3; }

/* ---------- плавное раскрытие ----------
   Обойма растёт с нулевой доли высоты до своей: анимировать auto нельзя,
   а считать высоту скриптом значит промахиваться каждый раз, когда
   внутрь доезжают снимки. Закрытое содержимое спрятано и от программ
   чтения с экрана (visibility), а не только от глаз, иначе Tab уводил бы
   в невидимые кнопки. */
.acc-fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .26s ease;
}
.acc-fold > .acc-items {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s .26s, padding .26s ease;
}
.acc-fold.is-open { grid-template-rows: 1fr; }
.acc-fold.is-open > .acc-items {
  visibility: visible;
  padding-top: 14px;
  padding-bottom: 16px;
  transition: visibility 0s 0s, padding .26s ease;
}
@media (prefers-reduced-motion: reduce) {
  .acc-fold, .acc-fold > .acc-items { transition: none; }
}

/* ---------- путь заказа ----------
   «Подтверждён» без даты не отличить от «подтверждён неделю назад», а из
   одного слова не видно, сколько шагов впереди. Шаг без даты остаётся
   пройденным, но молчит: выдуманная дата хуже пустоты. */
.acc-flow {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0 0 16px;
  padding: 0;
}
.acc-flow li {
  position: relative;
  padding: 24px 4px 0;
  text-align: center;
  color: #6d86a8;
}
/* Точка шага. */
.acc-flow li::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border: 2px solid rgba(112, 166, 226, .35);
  border-radius: 50%;
  background: #0a2044;
}
/* Черта до следующего шага. Принадлежит шагу слева: тогда она красится
   вместе с ним и у последнего её просто нет. */
.acc-flow li::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: rgba(112, 166, 226, .2);
}
.acc-flow li:last-child::after { display: none; }
.acc-flow li b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.acc-flow li i {
  display: block;
  margin-top: 2px;
  color: #7f97b8;
  font-style: normal;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.acc-flow li.is-done { color: #a8c2e2; }
.acc-flow li.is-done::before { border-color: #45bbff; background: #45bbff; }
.acc-flow li.is-done::after { background: rgba(69, 187, 255, .5); }
.acc-flow li.is-now { color: #fff; }
.acc-flow li.is-now b { font-weight: 700; }
.acc-flow li.is-now::before {
  border-color: #45bbff;
  background: #45bbff;
  box-shadow: 0 0 0 4px rgba(69, 187, 255, .2);
  animation: acc-pulse 2.4s ease-in-out infinite;
}
@keyframes acc-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(69, 187, 255, .2); }
  50%      { box-shadow: 0 0 0 7px rgba(69, 187, 255, .07); }
}
@media (prefers-reduced-motion: reduce) {
  .acc-flow li.is-now::before { animation: none; }
}

/* Отменённый заказ. Ленту ему не рисуем: пути дальше нет. */
.acc-off {
  margin: 0 0 14px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 140, 140, .28);
  border-radius: 12px;
  background: rgba(120, 30, 30, .16);
  color: #ffc7c7;
  font-size: 13.5px;
  line-height: 1.5;
}

/* ---------- отметки брендов по позициям ----------
   Заказ едет от нескольких производителей, и каждый отвечает за свою
   строку. Сводка — полоской: доля готовых строк видна раньше, чем
   человек дочитает список. Цвета те же три, что у стадий: зелёное
   «готово», красное «под вопросом», остальное — ожидание. */
.acc-prog {
  display: grid;
  gap: 7px;
  margin: 0 0 14px;
}
.acc-prog-bar {
  display: flex;
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  /* Незакрашенный остаток — это и есть «ждём ответа»: отдельной заливки
     ему не нужно, иначе в полоске три цвета вместо двух. */
  background: rgba(112, 166, 226, .2);
}
.acc-prog-bar i {
  width: 0;                      /* растёт после первого кадра — см. account.js */
  transition: width .7s cubic-bezier(.22, .7, .3, 1);
}
.acc-prog-bar .is-ok { background: linear-gradient(90deg, #2bb673, #4fd19a); }
.acc-prog-bar .is-no { background: rgba(255, 120, 120, .75); }
.acc-prog-t { color: #9fb6d6; font-size: 12.5px; }

/* Плашка отметки в строке позиции. Стоит под названием, а не отдельной
   колонкой: колонок в строке и так пять, а подпись бывает длинной
   («Отгружено частично»). */
.acc-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  padding: 2px 9px 2px 7px;
  border: 1px solid rgba(112, 166, 226, .22);
  border-radius: 999px;
  background: rgba(4, 18, 40, .5);
  color: #bcd2ee;
  font-size: 11.5px;
  line-height: 1.6;
  white-space: nowrap;
}
.acc-mark em { color: #8fa8c8; font-style: normal; }
.acc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #70a6e2;
  /* Ждём ответа бренда — точка дышит: по одному взгляду видно, что это
     не конечное состояние, а «сейчас выясняется». */
  animation: acc-wait 2.2s ease-in-out infinite;
}
@keyframes acc-wait {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}
.acc-mark.is-ok { border-color: rgba(60, 200, 140, .3); color: #a9e7cb; }
.acc-mark.is-ok .acc-dot { background: #3cc88c; animation: none; }
.acc-mark.is-no { border-color: rgba(255, 140, 140, .32); color: #ffc7c7; }
.acc-mark.is-no .acc-dot { background: #ff8a8a; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .acc-dot { animation: none; }
  .acc-prog-bar i { transition: none; }
}

/* Снятая позиция. Не прячем: человек помнит, что заказывал её, и
   пропажа строки выглядит как ошибка кабинета. */
.acc-lines li.is-off .acc-ln,
.acc-lines li.is-off .acc-q,
.acc-lines li.is-off .acc-t { color: #7f97b8; text-decoration: line-through; }
.acc-lines li.is-off .acc-mark { text-decoration: none; }

/* Предупреждение в свёрнутой строке заказа. */
.acc-warn {
  margin-left: 4px;
  color: #ffb1b1;
  font-size: 12.5px;
  white-space: nowrap;
}

/* ---------- отправления ----------
   Заказ от трёх брендов едет тремя коробками, у каждой свой трек. В
   шапке заказа они склеены через запятую — из такой строки не понять,
   какой номер чей. Здесь по строке на коробку. */
.acc-ships {
  display: grid;
  gap: 9px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(112, 166, 226, .16);
  border-radius: 12px;
  background: rgba(4, 18, 40, .4);
}
.acc-ships h4 {
  margin: 0;
  color: #8fa8c8;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.acc-ship {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13.5px;
}
.acc-ship b { color: #eaf3ff; }
.acc-ship-c { color: #cfe0f5; }
.acc-ship-d { color: #8fa8c8; font-size: 12.5px; }

/* Трек-номер кнопкой. Его переписывают в форму перевозчика, и выделить
   двадцать цифр пальцем без промаха почти невозможно — ровно здесь
   человек бросает и звонит менеджеру. */
.acc-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 5px 11px;
  border: 1px solid rgba(120, 190, 255, .3);
  border-radius: 10px;
  background: rgba(69, 187, 255, .08);
  color: #8fd4ff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.acc-copy-n { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.acc-copy svg { flex: 0 0 auto; width: 15px; height: 15px; }
.acc-copy:hover { border-color: #45bbff; color: #fff; }
.acc-copy:focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 2px; }
.acc-copy.is-ok {
  border-color: rgba(127, 214, 166, .5);
  background: rgba(24, 82, 56, .25);
  color: #a8ecc8;
}
.acc-copy.is-bad {
  border-color: rgba(255, 190, 130, .45);
  background: rgba(90, 60, 20, .25);
  color: #ffd9a8;
}
.acc-copy-say { font-style: normal; font-size: 12px; }
.acc-copy-say:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .acc-copy { transition: none; } }

/* ---------- позиция заказа ---------- */
/* Артикул под названием: им сверяются с накладной и по нему ищут на
   витрине — но он уточнение, а не заголовок. */
.acc-ln em {
  margin-left: 7px;
  color: #7f97b8;
  font-style: normal;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* «Повторить только эту позицию». В заказе десять наименований, а
   закончился один шампунь — тащить ради него в корзину весь заказ
   значит потом вычёркивать девять строк. */
.acc-one {
  justify-self: end;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(120, 190, 255, .28);
  border-radius: 10px;
  background: #0a2450;
  color: #cfe2fb;
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.acc-one:hover { border-color: #45bbff; color: #fff; }
.acc-one:focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 2px; }
.acc-one.is-ok {
  border-color: rgba(127, 214, 166, .5);
  background: rgba(24, 82, 56, .22);
  color: #a8ecc8;
}
.acc-one.is-off { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .acc-one { transition: none; } }

/* ---------- отбор заказов ----------
   Появляется от четырёх заказов: три видно целиком, и панель над ними
   была бы мебелью. */
.acc-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.acc-find {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  align-items: center;
}
.acc-find svg {
  position: absolute;
  left: 13px;
  width: 17px;
  height: 17px;
  color: #8ba3c2;
  pointer-events: none;
}
.acc-find input {
  width: 100%;
  height: 44px;
  padding: 0 12px 0 38px;
  border: 1px solid rgba(120, 190, 255, .24);
  border-radius: 12px;
  background: rgba(4, 18, 40, .72);
  color: #fff;
  font: inherit;
  font-size: 16px;          /* меньше 16px — iOS зумит страницу при фокусе */
  outline: none;
}
.acc-find input::placeholder { color: #8ba3c2; opacity: 1; }
.acc-find input:focus {
  border-color: var(--cyan, #45bbff);
  box-shadow: 0 0 0 3px rgba(69, 187, 255, .18);
}
/* Свой список вместо системного: в тёмной схеме браузер рисует его
   серым прямоугольником — единственным пятном не из нашей палитры. */
.acc-sel {
  height: 44px;
  padding: 0 34px 0 13px;
  border: 1px solid rgba(120, 190, 255, .24);
  border-radius: 12px;
  background: rgba(4, 18, 40, .72)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5' fill='none' stroke='%238fb6e0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 11px center / 15px 15px;
  color: #cfe0f5;
  font: inherit;
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
}
.acc-sel:hover { border-color: rgba(120, 190, 255, .5); }
.acc-sel:focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 2px; }
.acc-reset {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: #45bbff;
  font: inherit;
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.acc-reset[hidden] { display: none; }
.acc-reset:hover { color: #8fd4ff; }
.acc-reset:focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 2px; border-radius: 8px; }
.acc-found { margin: 0 0 10px; color: #8fa8c8; font-size: 13px; }
.acc-found[hidden] { display: none; }

/* «Ничего не нашли» и «пока пусто» — один вид на оба случая: человек
   смотрит в пустое место и должен понять, что делать дальше. */
.acc-none {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 20px;
  border: 1px dashed rgba(112, 166, 226, .26);
  border-radius: 16px;
  background: rgba(8, 31, 67, .3);
  text-align: center;
}
.acc-none[hidden] { display: none; }
.acc-none b { color: #eaf3ff; font-size: 15px; }
.acc-none p { margin: 0; max-width: 42ch; color: #9fb6d6; font-size: 13px; line-height: 1.55; }
.acc-none .button { margin-top: 4px; min-height: 44px; }

/* ---------- избранное ----------
   Список ведёт fav.js и хранит браузер: ключ — адрес страницы товара, а
   не артикул, потому что «отложить ActiveBase» значит отложить средство,
   а не двадцатикилограммовую канистру. Фасовку выбирают здесь же. */
.acc-favs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}
.acc-fcard {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(112, 166, 226, .16);
  border-radius: 16px;
  background: rgba(8, 31, 67, .45);
}
.acc-fcard.is-gone { grid-template-columns: minmax(0, 1fr); opacity: .8; }
.acc-fcard.is-gone b { color: #cfe0f5; font-size: 14px; }
.acc-fpic { display: block; line-height: 0; }
.acc-fbody { display: flex; flex-direction: column; min-width: 0; }
.acc-fname { text-decoration: none; }
.acc-fname b {
  display: block;
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
}
.acc-fname span { display: block; margin-top: 3px; color: #9fb6d6; font-size: 12px; }
.acc-fname:hover b { color: #8fd4ff; }
.acc-fname:focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 3px; border-radius: 8px; }
.acc-vars { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.acc-var {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgba(120, 190, 255, .24);
  border-radius: 9px;
  background: transparent;
  color: #bfd4ef;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.acc-var:hover { border-color: rgba(120, 190, 255, .55); color: #fff; }
.acc-var.is-on {
  border-color: rgba(69, 187, 255, .6);
  background: rgba(69, 187, 255, .14);
  color: #fff;
}
.acc-var:focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 2px; }
.acc-fprice { display: flex; align-items: baseline; gap: 9px; margin: 10px 0 0; }
.acc-fprice b { color: #fff; font-size: 19px; font-variant-numeric: tabular-nums; }
.acc-fprice span { color: #8fa8c8; font-size: 12px; }
.acc-fask { color: #cfe0f5; font-size: 14px; }
.acc-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: auto;
  padding-top: 12px;
}
.acc-buy { min-height: 42px; padding: 9px 18px; font-size: 14px; }
.acc-buy.is-ok {
  border-color: rgba(127, 214, 166, .5);
  background: rgba(24, 82, 56, .3);
  color: #a8ecc8;
}
.acc-drop {
  min-height: 42px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: #8fa8c8;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.acc-drop:hover { color: #ff9fb2; }
.acc-drop:focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 2px; border-radius: 8px; }
.acc-fout { color: #ffd9a8; font-size: 13px; }

/* ---------- скелетоны ----------
   Пока сервер отвечает, помнит ли он нас, показывать форму входа
   нечестно: вошедший увидит её на долю секунды и решит, что его
   выкинуло. Серые плашки отвечают «грузится, а не сломалось» без слов. */
.acc-skel { margin-top: 24px; }
.acc-skel-who { height: 76px; border-radius: 16px; }
.acc-skel-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.acc-skel-nav span { width: 112px; height: 40px; border-radius: 999px; }
.acc-skel-row { height: 104px; margin-top: 8px; border-radius: 12px; }
.acc-skel-row:first-of-type { margin-top: 14px; }
.acc-fcard.is-wait { min-height: 116px; border: 0; }
.acc-skel-who, .acc-skel-nav span, .acc-skel-row,
.acc-pic.is-wait, .acc-fcard.is-wait {
  background: linear-gradient(100deg,
    rgba(112, 166, 226, .08) 28%,
    rgba(112, 166, 226, .2) 50%,
    rgba(112, 166, 226, .08) 72%);
  background-size: 220% 100%;
  animation: acc-shine 1.5s linear infinite;
}
.acc-pic.is-wait { border-color: transparent; }
@keyframes acc-shine {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-skel-who, .acc-skel-nav span, .acc-skel-row,
  .acc-pic.is-wait, .acc-fcard.is-wait {
    animation: none;
    background: rgba(112, 166, 226, .12);
  }
}

@media (max-width: 560px) {
  /* Путь заказа встаёт столбиком. Шесть шагов по 60 px в ширину — это
     «Подтвер…» и «Собира…»; читать такое нельзя, а стадия заказа как раз
     то, ради чего человек сюда зашёл. */
  .acc-flow { grid-auto-flow: row; grid-auto-columns: auto; }
  .acc-flow li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0 8px;
    padding: 0 0 13px;
    text-align: left;
  }
  .acc-flow li:last-child { padding-bottom: 0; }
  .acc-flow li::before { top: 4px; left: 4px; margin-left: 0; }
  .acc-flow li::after {
    top: 15px;
    left: 9px;
    width: 2px;
    height: calc(100% - 4px);
  }
  .acc-flow li b { grid-column: 2; }
  .acc-flow li i { grid-column: 3; margin-top: 0; }

  .acc-favs { grid-template-columns: minmax(0, 1fr); }
  .acc-fcard { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .acc-pic.is-big { width: 76px; height: 76px; }
  /* Кнопка во всю ширину карточки: по ней не промахнуться большим
     пальцем, а «Убрать» остаётся сбоку неярким. */
  .acc-facts { gap: 6px; }
  .acc-buy { flex: 1 1 auto; }

  .acc-filter { gap: 6px; }
  .acc-find { flex: 1 1 100%; }
  /* Два списка в строку: по половине ширины каждому, иначе «За всё
     время» выталкивает стадию на третью строку. */
  .acc-sel { flex: 1 1 calc(50% - 3px); min-width: 0; }
  .acc-reset { flex: 1 1 100%; }
  .acc-none { padding: 22px 14px; }
}

/* Пометки про Geizer Coin у способов оплаты в кабинете (23.09.2026).
   Те же правила, что на странице оформления: монеты начисляются только
   за СБП, и человек должен видеть это при выборе. */
.acc-way-coin {
  display: block;
  margin-top: 3px;
  color: #ffd479 !important;
  font-size: 11px !important;
  font-weight: 600;
}
.acc-way-coin.is-no { color: #8fa8c8 !important; font-weight: 500; }
.acc-pay-note.is-coin { color: #ffd479; }
/* Начисление, которого не будет: заказ оплачен не через СБП. */
.acc-coin-box.is-lost b { color: #9fb6d6; }
.acc-coin-box.is-lost span { color: #8fa8c8; }

/* Buyer workspace: clear order hierarchy and coherent transaction surfaces. */
.acc-panel, .acc-side, .acc-card, .acc-none, .acc-fcard {
  border-color: #34516f;
  background: #0b2240;
  box-shadow: 0 14px 36px -26px #0009;
}
.acc-panel { padding: 28px; border-radius: 20px; }
.acc-form { gap: 16px; }
.acc-form label { color: #d7e4f3; font-size: 13px; line-height: 1.5; }
.acc-form input:not([type=checkbox]), .acc-card input:not([type=checkbox]), .acc-card select, .acc-find input, .acc-sel {
  min-height: 48px; border-color: #4c6886; background-color: #071a32; color: #f4f8ff; font-size: 16px;
}
.acc-form input:not([type=checkbox])::placeholder, .acc-find input::placeholder { color: #a6bdd7; opacity: 1; }
.acc-form button[type=submit], .acc-pay-go.button.primary { min-height: 48px; box-shadow: none; }
.acc-tabs { border-color: #3b5776; background: #071a32; padding: 5px; }
.acc-tabs button { min-height: 44px; }
.acc-who { padding: 20px; background: #0c2545; border-color: #3b5c7d; }
.acc-who b { font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }
.acc-who span, .acc-found, .acc-none p, .acc-pay-note { color: #b5c8df; line-height: 1.55; }
.acc-coin-box { border-color: #3b5776; background: #091d37; }
.acc-coin-box span { color: #b5c8df; font-size: 13px; }
.acc-coin-box.is-live b { color: #8bd5ff; }
.acc-nav { gap: 8px; }
.acc-nav-b { min-height: 44px; border-color: #557391; }
.acc-nav-b.is-on { border-color: #83c8fb; background: #14528b; box-shadow: none; }
.acc-side .acc-nav-b { min-height: 46px; padding-inline: 14px; }
.acc-orders { gap: 12px; }
.acc-orders > li { border-color: #34516f; border-radius: 16px; background: #0a203b; box-shadow: none; }
.acc-row { min-height: 76px; padding: 18px 20px; gap: 8px 16px; font-size: 14px; }
.acc-row[aria-expanded="true"] { background: #123252; }
.acc-row .acc-sum { font-size: 18px; line-height: 1.35; }
.acc-row .acc-date { color: #b5c8df; font-size: 13px; }
.acc-chip { min-height: 28px; padding: 5px 10px; line-height: 1.3; }
.acc-items { padding-inline: 20px; }
.acc-lines li { padding-block: 12px; }
.acc-ln, .acc-fname b { line-height: 1.5; overflow-wrap: anywhere; }
.acc-q, .acc-fname span, .acc-fprice span, .acc-ship-d { color: #b5c8df; font-size: 13px; }
.acc-sum-box { padding: 18px; background: #071a32; border-color: #34516f; border-radius: 14px; }
.acc-sum-row { flex-wrap: wrap; gap: 5px 12px; }
.acc-sum-row span { color: #b5c8df; font-size: 13px; }
.acc-sum-row b { margin-left: auto; }
.acc-sum-row.is-total { padding-top: 14px; margin-top: 8px; }
.acc-sum-row.is-total b { font-size: 25px; line-height: 1.3; }
.acc-pay { gap: 14px; }
.acc-pay-go.button.primary { background: #f2c777; color: #182334; white-space: normal; line-height: 1.4; }
.acc-bad, .acc-said.is-bad { color: #ffc1bc; font-size: 13px; line-height: 1.6; }
.acc-none { padding: 28px; border-style: solid; }
.acc-none b { font-size: 18px; line-height: 1.4; }
.acc-fcard { padding: 18px; border-radius: 16px; }
.acc-var { min-height: 40px; padding: 8px 12px; }
.acc-var.is-on { background: #14528b; border-color: #83c8fb; }
.acc-buy { min-height: 46px; }
.acc-orders :is(a, button, input, summary):focus-visible,
.acc-gate :is(a, button, input):focus-visible,
.acc-side :is(a, button):focus-visible,
.acc-secs :is(a, button, input, select, summary):focus-visible { outline: 3px solid #8bd5ff; outline-offset: 3px; }
.acc-row:focus-visible { outline-offset: -3px; }
@media (max-width: 680px) {
  .acc-row { padding: 16px; gap: 6px 10px; }
  .acc-row .acc-sum { font-size: 17px; }
  .acc-items { padding-inline: 16px; }
  .acc-sum-box { padding: 16px; }
}
@media (max-width: 560px) {
  .acc-panel, .acc-who, .acc-none { padding: 18px; border-radius: 16px; }
  .acc-gate { gap: 20px; }
  .acc-side .acc-nav-b { font-size: 13px; min-height: 44px; padding-inline: 12px; }
  .acc-row .acc-chip { max-width: 100%; white-space: normal; text-align: right; }
  .acc-row .acc-sum { white-space: normal; overflow-wrap: anywhere; }
  .acc-sum-row.is-total b { font-size: 23px; }
  .acc-fcard { padding: 14px; }
  .acc-filter { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-gate :is(a, button, input), .acc-side :is(a, button),
  .acc-secs :is(a, button, input, select), .acc-row::after { transition: none; }
}