/* =========================================================================
   СТРАНИЦА РАНГОВ  /dranks
   =========================================================================

   Переверстана 22.08. Была бутстраповская полосатая таблица на светлом
   фоне — единственная такая на сайте, и выглядела она как чужая
   страница, случайно попавшая внутрь.

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

/* --- Своё положение: первый экран ---------------------------------------

   Панель повторяет устройство панели репутации на бирже: где я сейчас,
   сколько набрал, сколько до следующей ступени. Три вещи и в том же
   порядке — так человеку не приходится учиться читать её заново. */
.acc-rank__me {
  display: flex;
  align-items: center;
  gap: var(--acc-sp-4, 16px);
  flex-wrap: wrap;
  margin-bottom: var(--acc-sp-4, 16px);
  padding: var(--acc-sp-4, 16px);
  border: 1px solid var(--acc-glass-brd);
  border-left: 3px solid var(--acc-cyan);
  border-radius: 6px;
  background: var(--acc-glass);
  box-shadow: var(--acc-shadow-inset);
}

.acc-rank__me-badge { flex: 0 0 auto; }
.acc-rank__me-body  { flex: 1 1 260px; min-width: 0; }

.acc-rank__me-kicker {
  display: block;
  font-family: var(--acc-font-mono);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
}

.acc-rank__me-name {
  margin: 2px 0 4px;
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-24, 24px);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--acc-cyan);
}

.acc-rank__me-hours {
  margin: 0 0 8px;
  font-family: var(--acc-font-mono);
  font-size: var(--acc-fs-14);
  color: var(--acc-text);
  font-variant-numeric: tabular-nums;
}

/* Полоса прогресса — та же, что у репутации на бирже. */
.acc-rank__bar {
  height: 6px;
  max-width: 420px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}

.acc-rank__bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--acc-cyan-dim), var(--acc-cyan));
}

.acc-rank__me-next {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--acc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--acc-text-mute);
  font-variant-numeric: tabular-nums;
}

/* Расхождение «налетал на одно, в профиле другое». Золото, а не
   красный: это не поломка, а порядок работы сайта. Красным пилот
   прочитал бы «что-то сломалось» и пошёл бы искать, что именно. */
.acc-rank__me-warn {
  margin: 8px 0 0;
  font-size: var(--acc-fs-12);
  color: var(--acc-gold);
}

/* --- Лестница ------------------------------------------------------------ */

.acc-rank__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--acc-sp-3);
  margin-top: var(--acc-sp-3);
}

.acc-rank__card {
  display: flex;
  flex-direction: column;
  padding: var(--acc-sp-3) var(--acc-sp-4, 16px);
  border: 1px solid var(--acc-glass-brd);
  border-radius: 6px;
  background: var(--acc-glass);
}

/* Своя ступень — циан, следующая — золото, взятые ранее приглушены.
   Три состояния читаются боковым зрением, без чтения подписей. */
.acc-rank__card--mine {
  border-color: rgba(0, 229, 255, 0.35);
  background: var(--acc-cyan-soft);
}

.acc-rank__card--next {
  border-color: var(--acc-gold-brd);
  background: var(--acc-gold-soft);
}

/* Недостижимое пока — тише, но НЕ невидимое: вся лестница должна быть
   видна целиком, иначе непонятно, куда идёшь. */
.acc-rank__card--locked { opacity: 0.62; }

.acc-rank__card-head {
  display: flex;
  align-items: center;
  gap: var(--acc-sp-3);
  padding-bottom: var(--acc-sp-3);
}

.acc-rank__name {
  margin: 0;
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-16);
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--acc-text);
}

.acc-rank__hours {
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--acc-text-mute);
  font-variant-numeric: tabular-nums;
}

.acc-rank__tag {
  margin-left: auto;
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--acc-font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.acc-rank__tag--mine {
  color: var(--acc-bg, #070b12);
  background: var(--acc-cyan);
}

.acc-rank__tag--next {
  color: var(--acc-bg, #070b12);
  background: var(--acc-gold);
}

/* --- Цифры внутри карточки ---------------------------------------------- */

.acc-rank__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--acc-sp-3);
  margin: 0;
  padding-top: var(--acc-sp-3);
  border-top: 1px solid var(--acc-glass-brd);
}

.acc-rank__facts dt {
  font-family: var(--acc-font-mono);
  font-size: 9px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
  font-weight: 400;
}

.acc-rank__facts dd {
  margin: 2px 0 0;
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-16);
  font-weight: 600;
  color: var(--acc-text);
  font-variant-numeric: tabular-nums;
}

/* Единица измерения мельче числа: «45 USD/h» — важно «45», а не «/h». */
.acc-rank__facts dd span {
  font-size: var(--acc-fs-12);
  font-weight: 400;
  color: var(--acc-text-mute);
}

/* Вложенный селектор, а не один класс: `.acc-rank__facts dd` выше
   по весу, и голый класс молча проиграл бы. Та же ловушка, что уже
   стоила цвета суммам на доске контрактов 15.08. */
.acc-rank__facts dd.acc-rank__pay { color: var(--acc-gold); }

.acc-rank__unpaid {
  font-family: var(--acc-font-mono);
  font-size: var(--acc-fs-12);
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--acc-err);
}

.acc-rank__facts dd.acc-rank__auto {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.acc-rank__ok,
.acc-rank__no {
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--acc-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.6px;
  font-weight: 400;
}

.acc-rank__ok  { color: var(--acc-ok);  background: var(--acc-ok-soft); }
.acc-rank__no  { color: var(--acc-gold); background: var(--acc-gold-soft); }

/* --- Какие борта открываются -------------------------------------------- */

.acc-rank__fleet { margin-top: var(--acc-sp-3); }

.acc-rank__fleet summary {
  cursor: pointer;
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--acc-cyan-dim);
}

.acc-rank__fleet summary:hover { color: var(--acc-cyan); }

.acc-rank__fleet ul {
  margin: 8px 0 0;
  padding-left: 0;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
}

.acc-rank__fleet li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  font-size: var(--acc-fs-12);
  border-bottom: 1px solid var(--acc-glass-brd);
}

.acc-rank__fleet li:last-child { border-bottom: 0; }
.acc-rank__fleet a { color: var(--acc-text); text-decoration: none; }
.acc-rank__fleet a:hover { color: var(--acc-cyan); }

.acc-rank__fleet-va {
  font-family: var(--acc-font-mono);
  font-size: 9.5px;
  color: var(--acc-text-mute);
  text-align: right;
  white-space: nowrap;
}

.acc-rank__foot {
  margin: var(--acc-sp-4, 16px) 0 0;
  font-size: var(--acc-fs-12);
  color: var(--acc-text-mute);
}

@media (max-width: 560px) {
  .acc-rank__grid  { grid-template-columns: 1fr; }
  .acc-rank__facts { grid-template-columns: 1fr; }
}

/* =========================================================================
   СТРАНИЦА ДОСТИЖЕНИЙ  /dawards
   =========================================================================

   Живёт в одном файле со страницей рангов намеренно: это две половины
   одного разговора — «до какой ступени дорос» и «чем при этом
   занимался». Разносить их по файлам значило бы дважды описывать одни
   и те же карточки.
   ========================================================================= */

.acc-aw__group { margin-top: var(--acc-sp-5, 24px); }

.acc-aw__group-title {
  display: flex;
  align-items: baseline;
  gap: var(--acc-sp-2);
  margin: 0;
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-16);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--acc-text);
}

/* Счёт по ветке: «3/6». Он и есть ответ на «куда мне дальше» —
   ветка, где взято меньше всего, и есть ближайшая цель. */
.acc-aw__group-count {
  font-family: var(--acc-font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--acc-cyan);
  font-variant-numeric: tabular-nums;
}

.acc-aw__group-lead {
  margin: 2px 0 var(--acc-sp-3);
  font-size: var(--acc-fs-12);
  color: var(--acc-text-mute);
}

.acc-aw__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--acc-sp-3);
}

.acc-aw__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--acc-sp-4, 16px) var(--acc-sp-3);
  border: 1px solid var(--acc-glass-brd);
  border-radius: 6px;
  background: var(--acc-glass);
}

/* ВЗЯТОЕ — ЯРКОЕ, НЕВЗЯТОЕ — ТИХОЕ, но видимое. Прятать невзятые
   нельзя: тогда страница перестанет показывать, куда идти, и
   превратится в витрину заслуг. Смысл ровно обратный. */
.acc-aw__card:not(.acc-aw__card--got) { opacity: 0.55; }

.acc-aw__card--got {
  border-color: rgba(0, 229, 255, 0.30);
  background: var(--acc-cyan-soft);
}

/* Выключенная награда — приглушена сильнее и без цвета: стараться
   ради неё сейчас нельзя, и подсвечивать её было бы обманом. */
.acc-aw__card--off:not(.acc-aw__card--got) { opacity: 0.35; }

.acc-aw__img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin-bottom: var(--acc-sp-3);
}

/* Заглушка вместо отсутствующей картинки. Круг с буквой, а не пустота:
   дыра в карточке читается как сломанная вёрстка, а буква — как
   «значок ещё не нарисован». */
.acc-aw__img--none {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px dashed var(--acc-glass-hi);
  font-family: var(--acc-font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--acc-text-mute);
}

.acc-aw__card--got .acc-aw__img--none {
  border-color: var(--acc-cyan-dim);
  color: var(--acc-cyan);
}

.acc-aw__name {
  margin: 0 0 4px;
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-14);
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--acc-text);
}

.acc-aw__card--got .acc-aw__name { color: var(--acc-cyan); }

.acc-aw__descr {
  flex: 1 1 auto;
  margin: 0 0 var(--acc-sp-3);
  font-size: var(--acc-fs-12);
  line-height: 1.45;
  color: var(--acc-text-mute);
}

.acc-aw__foot {
  font-family: var(--acc-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.acc-aw__got  { color: var(--acc-cyan); }
.acc-aw__todo { color: var(--acc-text-mute); }
.acc-aw__off  { color: var(--acc-gold); }

@media (max-width: 560px) {
  .acc-aw__grid { grid-template-columns: 1fr 1fr; }
  .acc-aw__img  { width: 60px; height: 60px; }
}

/* =========================================================================
   РЕГИСТРАЦИЯ  /register
   ========================================================================= */

.acc-reg__h {
  margin: 0 0 var(--acc-sp-2);
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-16);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--acc-text);
}

.acc-reg__rules,
.acc-reg__exam {
  margin-top: var(--acc-sp-4, 16px);
  padding: var(--acc-sp-4, 16px);
  border: 1px solid var(--acc-glass-brd);
  border-radius: 6px;
  background: var(--acc-glass);
}

.acc-reg__rules { border-left: 3px solid var(--acc-gold); }
.acc-reg__exam  { border-left: 3px solid var(--acc-cyan); }

.acc-reg__rules-text {
  font-size: var(--acc-fs-14);
  line-height: 1.6;
  color: var(--acc-text-mute);
}

.acc-reg__exam-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--acc-sp-3);
}

/* Таймер моноширинным и с табличными цифрами: иначе на каждой секунде
   строка дёргается, потому что «1» уже «4». */
.acc-reg__timer {
  font-family: var(--acc-font-mono);
  font-size: var(--acc-fs-16);
  color: var(--acc-cyan);
  font-variant-numeric: tabular-nums;
}

.acc-reg__exam-lead {
  margin: 0 0 var(--acc-sp-3);
  font-size: var(--acc-fs-12);
  color: var(--acc-text-mute);
}

.acc-reg__q {
  margin: 0 0 var(--acc-sp-3);
  padding: 0 0 var(--acc-sp-3);
  border: 0;
  border-bottom: 1px solid var(--acc-glass-brd);
}

.acc-reg__q legend {
  float: none;
  width: auto;
  margin-bottom: var(--acc-sp-2);
  font-size: var(--acc-fs-14);
  font-weight: 600;
  color: var(--acc-text);
}

/* Номер вопроса кружком — чтобы взглядом было видно, сколько пройдено,
   без отдельного счётчика «3 из 10». */
.acc-reg__q legend span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--acc-cyan-soft);
  border: 1px solid var(--acc-cyan-dim);
  font-family: var(--acc-font-mono);
  font-size: 11px;
  color: var(--acc-cyan);
}

.acc-reg__q label {
  display: block;
  padding: 5px 0;
  font-size: var(--acc-fs-14);
  color: var(--acc-text-mute);
  cursor: pointer;
}

.acc-reg__q label:hover { color: var(--acc-text); }
.acc-reg__q input[type=radio] { margin-right: 6px; }

.acc-reg__exam-foot {
  display: flex;
  align-items: center;
  gap: var(--acc-sp-3);
  flex-wrap: wrap;
}

.acc-reg__exam-msg {
  font-family: var(--acc-font-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--acc-text-mute);
}

/* --- Сама форма ---------------------------------------------------------- */

.acc-reg__form { margin-top: var(--acc-sp-4, 16px); }

.acc-reg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--acc-sp-3);
}

.acc-reg__field { display: block; }

.acc-reg__field > span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--acc-font-mono);
  font-size: 9.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
}

.acc-reg__field input,
.acc-reg__field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--acc-glass-brd);
  border-radius: 4px;
  background: var(--acc-glass);
  color: var(--acc-text);
  font-size: var(--acc-fs-14);
}

.acc-reg__field input:focus,
.acc-reg__field select:focus {
  outline: none;
  border-color: var(--acc-cyan-dim);
  box-shadow: 0 0 0 2px var(--acc-cyan-soft);
}

.acc-reg__toc {
  max-height: 220px;
  overflow-y: auto;
  margin: var(--acc-sp-4, 16px) 0 var(--acc-sp-3);
  padding: var(--acc-sp-3);
  border: 1px solid var(--acc-glass-brd);
  border-radius: 4px;
  font-size: var(--acc-fs-12);
  color: var(--acc-text-mute);
}

.acc-reg__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: var(--acc-sp-2);
  font-size: var(--acc-fs-12);
  color: var(--acc-text-mute);
  cursor: pointer;
}

.acc-reg__go { margin-top: var(--acc-sp-3); }
.acc-reg__go[disabled] { opacity: 0.45; cursor: not-allowed; }

/* =========================================================================
   МАГАЗИН  /dmarket
   ========================================================================= */

.acc-shop__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--acc-sp-3);
  margin: var(--acc-sp-3) 0;
}

.acc-shop__cats { display: flex; flex-wrap: wrap; gap: 6px; }

.acc-shop__cat {
  padding: 4px 10px;
  border: 1px solid var(--acc-glass-brd);
  border-radius: 999px;
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
  text-decoration: none;
}

.acc-shop__cat:hover { color: var(--acc-text); border-color: var(--acc-glass-hi); }

.acc-shop__cat--on {
  color: var(--acc-bg, #070b12);
  background: var(--acc-cyan);
  border-color: var(--acc-cyan);
}

.acc-shop__tools { display: flex; align-items: center; gap: var(--acc-sp-3); }

.acc-shop__sort a {
  margin-right: 8px;
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
  text-decoration: none;
}

.acc-shop__sort a:hover { color: var(--acc-cyan); }

/* --- Карточка товара ----------------------------------------------------- */

.acc-shop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--acc-sp-3);
}

.acc-shop__card {
  display: flex;
  gap: var(--acc-sp-3);
  padding: var(--acc-sp-3);
  border: 1px solid var(--acc-glass-brd);
  border-radius: 6px;
  background: var(--acc-glass);
}

/* Своё — cyan, распроданное — приглушено. Распроданное не прячем:
   витрина должна показывать, что бывает, а не только что осталось. */
.acc-shop__card--own  { border-color: rgba(0, 229, 255, 0.30); background: var(--acc-cyan-soft); }
.acc-shop__card--sold { opacity: 0.5; }

.acc-shop__pic { flex: 0 0 78px; }

.acc-shop__pic img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  border-radius: 4px;
}

.acc-shop__pic-none {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 4px;
  border: 1px dashed var(--acc-glass-hi);
  font-family: var(--acc-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--acc-text-mute);
}

.acc-shop__body { flex: 1 1 auto; min-width: 0; }

.acc-shop__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--acc-sp-2);
}

.acc-shop__name {
  margin: 0;
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-16);
  font-weight: 600;
  color: var(--acc-text);
}

.acc-shop__price {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-16);
  font-weight: 700;
  color: var(--acc-gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Не хватает денег — цена красная. Кнопка при этом тоже выключена,
   но цвет виден раньше, чем человек дотянется до кнопки. */
.acc-shop__price--no { color: var(--acc-err); }

.acc-shop__descr {
  margin: 6px 0 var(--acc-sp-3);
  font-size: var(--acc-fs-12);
  line-height: 1.5;
  color: var(--acc-text-mute);
}

.acc-shop__descr--fold summary {
  cursor: pointer;
  list-style: none;
}

/* Подпись «more» на английском: на сайте не должно быть русского
   нигде, включая псевдоэлементы CSS. Их не видит ни один сканер
   шаблонов — а посетитель видит. */
.acc-shop__descr--fold summary::after {
  content: ' more';
  color: var(--acc-cyan-dim);
}

.acc-shop__descr--fold[open] summary { color: var(--acc-text); }
.acc-shop__descr--fold[open] summary::after { content: ''; }

.acc-shop__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--acc-sp-2) var(--acc-sp-3);
}

.acc-shop__tag {
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--acc-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.acc-shop__tag--own  { color: var(--acc-cyan); background: var(--acc-cyan-soft); }
.acc-shop__tag--sold { color: var(--acc-text-mute); background: rgba(255,255,255,0.06); }
.acc-shop__tag--no   { color: var(--acc-err); background: var(--acc-err-soft); }

/* Подарок — ссылкой, а не кнопкой: это не главное действие карточки,
   и вторая крупная кнопка спорила бы с «Buy» за внимание. Раньше он
   был зелёной кнопкой без подписи, и понять, что это, было нельзя. */
.acc-shop__gift {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--acc-cyan-dim);
  cursor: pointer;
  text-decoration: underline dotted;
}

.acc-shop__gift:hover { color: var(--acc-cyan); }

.acc-shop__pages { margin-top: var(--acc-sp-4, 16px); }

@media (max-width: 560px) {
  .acc-shop__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   СТРАНИЦА «ЧТО У ПИЛОТА КУПЛЕНО» (/dmarket/{id}).
   Добавлено 22.08.

   Витрина и личная полка — разные задачи. На витрине пилот
   выбирает, здесь он смотрит на то, что уже своё, поэтому
   кнопок покупки тут нет вообще, а карточка спокойнее.
   ============================================================ */

/* ЗАМЕТКА ПРОДАВЦА видна только владельцу товара. Это не
   украшение: в ней админ пишет пилоту, что делать дальше,
   и потерять её среди описания нельзя. */
.acc-shop__note {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 2px solid var(--acc-gold);
  background: rgba(245, 158, 11, 0.07);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--acc-text-dim);
}

.acc-shop__note b,
.acc-shop__note strong { color: var(--acc-gold); }

.acc-shop__note-lab {
  display: block;
  margin-bottom: 3px;
  font-family: var(--acc-font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--acc-gold);
}

/* ПУСТАЯ ПОЛКА — не сообщение об ошибке, а приглашение.
   Пилот, который сюда зашёл и ничего не нашёл, должен уйти
   в магазин, а не закрыть вкладку. */
.acc-shop__empty {
  padding: var(--acc-sp-6, 24px);
  text-align: center;
  border: 1px dashed var(--acc-glass-hi);
  border-radius: var(--acc-r-card, 8px);
  background: var(--acc-glass);
}

.acc-shop__empty p {
  margin: 0 0 var(--acc-sp-4, 16px);
  color: var(--acc-text-dim);
  font-size: 13px;
}

/* Чип со стоимостью полки. Живёт в одной строке с кнопкой
   «назад в магазин», поэтому выравнивание по центру. */
.acc-shop__worth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.25);
  background: var(--acc-cyan-soft);
  font-family: var(--acc-font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--acc-cyan);
}

.acc-shop__worth span { color: var(--acc-text-mute); }

/* ============================================================
   СТРАНИЦА-УКАЗАТЕЛЬ /dp_page. Добавлено 23.08.

   Три шага, три кнопки. Нумерация нарисована, а не взята из
   маркеров списка: цифра здесь часть заголовка, и она должна
   читаться как «шаг первый», а не как пункт перечисления.
   ============================================================ */
.acc-start {
  list-style: none;
  margin: var(--acc-sp-4, 16px) 0 0;
  padding: 0;
  display: grid;
  gap: var(--acc-sp-3, 12px);
}

.acc-start li {
  padding: var(--acc-sp-4, 16px);
  border: 1px solid var(--acc-glass-brd);
  border-left: 3px solid var(--acc-cyan);
  border-radius: var(--acc-r-card, 8px);
  background: var(--acc-glass);
}

.acc-start h2 {
  margin: 0 0 6px;
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-20, 20px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--acc-text);
}

.acc-start p {
  margin: 0 0 var(--acc-sp-3, 12px);
  max-width: 62ch;
  font-size: var(--acc-fs-14, 14px);
  line-height: 1.6;
  color: var(--acc-text-dim);
}

/* Третий шаг — справочник, к нему возвращаются, а не идут сразу.
   Приглушённая рамка говорит это без единого слова. */
.acc-start li:last-child { border-left-color: var(--acc-glass-hi); }

.acc-start__foot {
  margin: var(--acc-sp-4, 16px) 0 0;
  font-size: var(--acc-fs-12, 12px);
  color: var(--acc-text-mute);
}

.acc-start__foot a { color: var(--acc-cyan); }

/* ============================================================
   СРОК ДОПУСКА В КАБИНЕТЕ. Добавлено 23.08.

   Полоса появляется, только если есть о чём предупреждать:
   допуск просрочен или до конца меньше тридцати дней. В остальное
   время её нет вообще — постоянное напоминание перестают замечать
   на третий день, и тогда оно не работает и в тот день, когда нужно.
   ============================================================ */
.acc-exp {
  margin-bottom: var(--acc-sp-4, 16px);
  padding: var(--acc-sp-4, 16px);
  border: 1px solid var(--acc-gold-brd, rgba(245, 158, 11, 0.3));
  border-left: 3px solid var(--acc-gold);
  border-radius: var(--acc-r-card, 8px);
  background: var(--acc-gold-soft, rgba(245, 158, 11, 0.07));
}

/* Просрочено — уже не предупреждение, а факт. Красный. */
.acc-exp--bad {
  border-color: var(--acc-err-brd, rgba(239, 68, 68, 0.3));
  border-left-color: var(--acc-err);
  background: var(--acc-err-soft);
}

.acc-exp__head { margin-bottom: var(--acc-sp-3, 12px); }

.acc-exp__kicker {
  display: block;
  font-family: var(--acc-font-mono);
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
}

.acc-exp__title {
  margin: 2px 0 0;
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-20, 20px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--acc-gold);
}

.acc-exp--bad .acc-exp__title { color: var(--acc-err); }

.acc-exp__list {
  list-style: none;
  margin: 0 0 var(--acc-sp-3, 12px);
  padding: 0;
  display: grid;
  gap: 4px;
}

.acc-exp__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--acc-sp-3, 12px);
  padding: 6px 0;
  border-bottom: 1px solid var(--acc-glass-brd);
}

.acc-exp__item:last-child { border-bottom: 0; }

.acc-exp__name {
  font-size: var(--acc-fs-14, 14px);
  color: var(--acc-text);
}

.acc-exp__when {
  flex: 0 0 auto;
  font-family: var(--acc-font-mono);
  font-size: 11px;
  color: var(--acc-gold);
}

.acc-exp__item--bad .acc-exp__when { color: var(--acc-err); }

.acc-exp__lead {
  margin: 0 0 var(--acc-sp-3, 12px);
  max-width: 68ch;
  font-size: var(--acc-fs-12, 12px);
  line-height: 1.6;
  color: var(--acc-text-dim);
}

/* ============================================================
   FREE FLIGHT — страница личного рейса. 25.08

   Зачем свои классы, а не bootstrap-сетка темы. В прежней вёрстке
   подпись поля стояла рядом с полем (col-5 + col-7). Внутри узкой
   половины «Departure» и «Arrival» ломались посередине слова:
   «De parture», «Arr ival». Здесь подпись стоит НАД полем — тогда
   ширина колонки на неё не влияет вовсе, и ломаться нечему.
   ============================================================ */

.acc-ff__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--acc-sp-4, 16px);
}

@media (max-width: 900px) {
  .acc-ff__grid { grid-template-columns: 1fr; }
}

.acc-ff__field {
  margin-bottom: var(--acc-sp-4, 16px);
}

.acc-ff__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-family: var(--acc-font-display, inherit);
  font-size: var(--acc-fs-12, 12px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acc-text-mute);
}

.acc-ff__label i { font-size: 15px; color: var(--acc-cyan); }

/* Пометка «обязательно». Раньше у самолёта стояло «Optional»,
   а кнопка без него не работала — подпись врала. */
.acc-ff__req {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--acc-cyan);
}

.acc-ff__hint {
  margin-top: 5px;
  font-size: var(--acc-fs-12, 12px);
  line-height: 1.5;
  color: var(--acc-text-dim);
}

/* Строка ошибки: вылет и прилёт совпали. Показывается скриптом. */
.acc-ff__warn {
  display: none;
  margin: 0 0 var(--acc-sp-3, 12px);
  padding: 10px 12px;
  border: 1px solid var(--acc-err, #e5484d);
  border-radius: var(--acc-r-card, 10px);
  background: var(--acc-err-soft, rgba(229, 72, 77, .12));
  font-size: var(--acc-fs-12, 12px);
  color: var(--acc-text);
}

.acc-ff__warn.is-on { display: block; }

.acc-ff__foot {
  display: flex;
  align-items: center;
  gap: var(--acc-sp-3, 12px);
  flex-wrap: wrap;
  margin-top: var(--acc-sp-4, 16px);
  padding-top: var(--acc-sp-3, 12px);
  border-top: 1px solid var(--acc-glass-brd);
}

.acc-ff__cost {
  font-family: var(--acc-font-mono, monospace);
  font-size: var(--acc-fs-12, 12px);
  color: var(--acc-gold);
}

.acc-ff__go { margin-left: auto; }

/* Сноска про академию: свободный рейс закрывает практическое
   задание, если подходит под его условия. Раньше об этой связи
   не было сказано нигде. */
.acc-ff__tie {
  margin-top: var(--acc-sp-4, 16px);
  padding: 12px 14px;
  border: 1px solid var(--acc-cyan-dim, rgba(0, 200, 255, .25));
  border-left: 3px solid var(--acc-cyan);
  border-radius: var(--acc-r-card, 10px);
  background: var(--acc-cyan-soft, rgba(0, 200, 255, .07));
  font-size: var(--acc-fs-12, 12px);
  line-height: 1.6;
  color: var(--acc-text);
}

.acc-ff__tie a { color: var(--acc-cyan); }

/* Поля ввода. Добавлено 25.08 после проверки глазами.

   В прежней вёрстке у полей стоял класс bg-white из темы. Вынув поля
   из обёртки form-bg-grey, я оставил этот класс — и получилось белое
   поле с бледно-серым текстом: rgb(206,212,218) на белом. Проверено
   в живом DOM: набранное значение читалось как подсказка, а не как
   введённый текст.

   Поэтому цвет и фон задаются здесь явно, а не наследуются. */

.acc-ff__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-card, 10px);
  background: var(--acc-glass, rgba(255, 255, 255, .04));
  font-family: var(--acc-font-mono, monospace);
  font-size: var(--acc-fs-16, 16px);
  letter-spacing: .04em;
  color: var(--acc-text);
}

.acc-ff__input::placeholder { color: var(--acc-text-mute); }

.acc-ff__input:focus {
  outline: none;
  border-color: var(--acc-cyan);
  background: var(--acc-glass-hi, rgba(255, 255, 255, .07));
}

/* Поле только для чтения: вылет там, где стоит самолёт. Видно, что
   значение настоящее, но менять его нельзя. */
.acc-ff__input[readonly] {
  color: var(--acc-text-mute);
  cursor: not-allowed;
}

/* ============================================================
   LIVE OPS — доска для второго монитора. 25.08

   Не страница, которую открывают и закрывают, а табло, которое
   висит открытым весь полёт. Отсюда все решения:

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

.acc-ops {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--acc-sp-3, 12px);
  height: 78vh;
  min-height: 540px;
}

@media (max-width: 1100px) {
  .acc-ops { grid-template-columns: 1fr; height: auto; }
  .acc-ops__map { height: 60vh; }
}

/* --- шапка --- */

.acc-ops__bar {
  display: flex;
  align-items: center;
  gap: var(--acc-sp-3, 12px);
  flex-wrap: wrap;
  margin-bottom: var(--acc-sp-3, 12px);
}

.acc-ops__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--acc-font-display, inherit);
  font-size: var(--acc-fs-12, 12px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acc-cyan);
}

.acc-ops__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc-cyan);
  box-shadow: 0 0 0 0 var(--acc-cyan);
  animation: acc-ops-pulse 2.4s infinite;
}

.acc-ops__dot.is-stale { background: var(--acc-err, #e5484d); animation: none; }

@keyframes acc-ops-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 200, 255, .45); }
  70%  { box-shadow: 0 0 0 9px rgba(0, 200, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 200, 255, 0); }
}

.acc-ops__clock {
  font-family: var(--acc-font-mono, monospace);
  font-size: var(--acc-fs-16, 16px);
  color: var(--acc-text);
}

.acc-ops__meta {
  font-family: var(--acc-font-mono, monospace);
  font-size: var(--acc-fs-12, 12px);
  color: var(--acc-text-mute);
}

.acc-ops__spacer { margin-left: auto; }

.acc-ops__tool {
  padding: 6px 12px;
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-card, 10px);
  background: var(--acc-glass, rgba(255, 255, 255, .04));
  font-family: var(--acc-font-display, inherit);
  font-size: var(--acc-fs-12, 12px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acc-text-mute);
  cursor: pointer;
}

.acc-ops__tool.is-on { border-color: var(--acc-cyan); color: var(--acc-cyan); }

/* --- список слева --- */

.acc-ops__list {
  overflow-y: auto;
  padding-right: 4px;
}

.acc-ops__row {
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--acc-glass-brd);
  border-left: 3px solid transparent;
  border-radius: var(--acc-r-card, 10px);
  background: var(--acc-glass, rgba(255, 255, 255, .04));
  cursor: pointer;
}

.acc-ops__row:hover { background: var(--acc-glass-hi, rgba(255, 255, 255, .07)); }
.acc-ops__row.is-sel { border-left-color: var(--acc-cyan); background: var(--acc-cyan-soft, rgba(0, 200, 255, .07)); }

.acc-ops__cs {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--acc-font-mono, monospace);
  font-size: var(--acc-fs-14, 14px);
  color: var(--acc-text);
}

.acc-ops__reg { margin-left: auto; font-size: var(--acc-fs-12, 12px); color: var(--acc-text-mute); }

.acc-ops__leg {
  margin-top: 4px;
  font-family: var(--acc-font-mono, monospace);
  font-size: var(--acc-fs-12, 12px);
  color: var(--acc-cyan);
}

.acc-ops__sub {
  margin-top: 3px;
  font-size: var(--acc-fs-12, 12px);
  color: var(--acc-text-mute);
}

.acc-ops__none {
  padding: 24px 14px;
  border: 1px dashed var(--acc-glass-brd);
  border-radius: var(--acc-r-card, 10px);
  font-size: var(--acc-fs-12, 12px);
  line-height: 1.6;
  color: var(--acc-text-mute);
}

/* --- карта --- */

.acc-ops__map {
  position: relative;
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-card, 10px);
  overflow: hidden;
  background: var(--acc-bg, #0a1120);
}

.acc-ops__map .leaflet-container { background: #0a1120; }

/* Подписи и элементы Leaflet под тёмную тему */
.acc-ops__map .leaflet-control-zoom a {
  background: rgba(10, 17, 32, .9);
  border-color: rgba(255, 255, 255, .12);
  color: #e8eef7;
}

.acc-ops__map .leaflet-control-attribution {
  background: rgba(10, 17, 32, .7);
  color: #7c8aa0;
}

.acc-ops__map .leaflet-control-attribution a { color: #7c8aa0; }

/* Значок самолёта: поворачивается по курсу. */
.acc-ops__plane {
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 4px rgba(0, 200, 255, .5));
}

.acc-ops__tag {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(10, 17, 32, .85);
  font-family: var(--acc-font-mono, monospace);
  font-size: 11px;
  color: #e8eef7;
  white-space: nowrap;
}

/* --- карточка выбранного рейса поверх карты --- */

.acc-ops__card {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500;
  width: 268px;
  padding: 14px;
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-card, 10px);
  background: rgba(10, 17, 32, .92);
  backdrop-filter: blur(6px);
}

.acc-ops__card-cs {
  font-family: var(--acc-font-display, inherit);
  font-size: var(--acc-fs-20, 20px);
  color: var(--acc-text);
}

.acc-ops__card-leg {
  margin-top: 2px;
  font-family: var(--acc-font-mono, monospace);
  font-size: var(--acc-fs-14, 14px);
  color: var(--acc-cyan);
}

.acc-ops__card-sub {
  margin-top: 2px;
  font-size: var(--acc-fs-12, 12px);
  color: var(--acc-text-mute);
}

.acc-ops__nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.acc-ops__num {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--acc-glass, rgba(255, 255, 255, .04));
}

.acc-ops__num-l {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acc-text-mute);
}

.acc-ops__num-v {
  margin-top: 2px;
  font-family: var(--acc-font-mono, monospace);
  font-size: var(--acc-fs-16, 16px);
  color: var(--acc-text);
}

.acc-ops__prog {
  height: 4px;
  margin-top: 12px;
  border-radius: 3px;
  background: var(--acc-glass, rgba(255, 255, 255, .06));
  overflow: hidden;
}

.acc-ops__prog i {
  display: block;
  height: 100%;
  background: var(--acc-cyan);
}

.acc-ops__prog-t {
  margin-top: 5px;
  font-family: var(--acc-font-mono, monospace);
  font-size: 11px;
  color: var(--acc-text-mute);
}

/* =========================================================================
   AWARD CHIP - the small badge placeholder, added 30.08

   The dashboard widget "Latest Awards" printed image_url with no check,
   and 23 of our 34 awards have no picture at all. An empty src makes the
   browser fetch the PAGE, get HTML back and draw its broken-file glyph -
   so an absent badge looked like a corrupted one.

   Same treatment as the awards page (.acc-aw__img--none), only smaller:
   a lettered circle. It says the honest thing - the badge is not drawn,
   the award is real - instead of leaving a hole that reads as broken
   layout.

   Cyan rather than muted grey: everything in this widget has already
   been earned by somebody, and the awards page uses cyan for earned.
   ========================================================================= */
.acc-aw__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px dashed var(--acc-cyan-dim);
  font-family: var(--acc-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--acc-cyan);
  background: var(--acc-cyan-soft, transparent);
  user-select: none;
}