/* Демо приложения гостя. Экраны рисуются РАЗМЕТКОЙ, а не картинками: скриншот
   устаревает молча и не масштабируется под тёмный экран телефона посетителя,
   а разметка живёт вместе с токенами системы (shared/css/tokens.css) — теми
   же, что у самого приложения.

   CSP на сайте строгий и без 'unsafe-inline', поэтому здесь нет ни одного
   инлайн-стиля. Единственное исключение — --w у полос прогресса: это ЗНАЧЕНИЕ
   данных, а не оформление, и держать под каждый процент отдельный класс —
   расточительство. Такие атрибуты CSP не трогает (это style="", разрешённый
   через style-src нашего /demo — см. deploy/headers-demo.conf). */

/* ======================= ХРОМА СТРАНИЦЫ ======================= */

/* Ссылка «к содержанию» — своя, а не из page.css: тот файл тянет за собой
   шапку и подвал лендинга, которых на этой странице нет. */
.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 40;
  padding: 10px 18px;
  border-radius: var(--r-xs);
  background: var(--paper);
  color: var(--paper-ink);
  font-weight: 600;
}

.skip:focus { left: 16px; }

.dm-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px var(--gutter);
  background: rgba(10, 11, 13, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.dm-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-1);
}

.dm-brand b { font-weight: 600; color: var(--brass); }

.dm-mark {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: linear-gradient(140deg, var(--brass), var(--brass-deep));
}

.dm-badge {
  margin-left: auto;
  padding: 5px 11px;
  border: 1px solid var(--brass-deep);
  border-radius: var(--r-pill);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
}

.dm-cta { font-size: 13px; color: var(--text-2); }
.dm-cta:hover { color: var(--brass); }

.dm-stage { padding: clamp(36px, 7vw, 72px) var(--gutter) 80px; }

.dm-intro { max-width: 640px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }

.dm-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-1);
}

.dm-intro h1 em { font-style: normal; color: var(--brass); }

.dm-intro p { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* Телефон и пояснение рядом; на узком экране пояснение уезжает вниз — читать
   его, косясь на телефон в 375 px, всё равно невозможно. */
.dm-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 380px);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  justify-content: center;
}

@media (max-width: 860px) {
  .dm-layout { grid-template-columns: minmax(0, 380px); }
}

/* ======================= КОРПУС ТЕЛЕФОНА ======================= */

.dm-phone-wrap { position: sticky; top: 92px; }

@media (max-width: 860px) {
  .dm-phone-wrap { position: static; }
}

/* На телефоне корпус телефона внутри телефона выглядит нелепо и крадёт
   ширину: с узкого экрана рамку, чёлку и строку статуса убираем — остаётся
   сам экран приложения во всю ширину, а это и есть предмет разговора. */
@media (max-width: 560px) {
  .dm-phone {
    height: auto;
    max-height: none;
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }

  .dm-notch, .dm-status { display: none; }

  .dm-screen { overflow: visible; padding-top: 14px; }

  /* Табы прилипают к низу окна: иначе, чтобы переключить вкладку, пришлось бы
     каждый раз пролистывать экран до конца. */
  .dm-tabs {
    position: sticky;
    bottom: 0;
    z-index: 10;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
}

.dm-phone {
  position: relative; /* якорь для модальных экранов QR и отзыва */
  display: flex;
  flex-direction: column;
  height: 760px;
  max-height: calc(100svh - 130px);
  min-height: 560px;
  border: 10px solid #16181c;
  border-radius: 44px;
  background: var(--bg);
  box-shadow: var(--e-3), 0 0 0 1px var(--line);
  overflow: hidden;
}

.dm-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 26px;
  border-radius: var(--r-pill);
  background: #16181c;
  z-index: 3;
}

.dm-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}

.dm-icons { display: flex; gap: 5px; align-items: center; }
.dm-icons i { display: block; background: var(--text-3); border-radius: 2px; }
.dm-icons .sig { width: 14px; height: 9px; }
.dm-icons .wifi { width: 12px; height: 9px; }
.dm-icons .bat { width: 20px; height: 10px; border-radius: 3px; }

/* ======================= ЭКРАН ======================= */

.dm-screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 16px 20px;
  scrollbar-width: none;
}

.dm-screen::-webkit-scrollbar { display: none; }

.dm-view { display: none; }
.dm-view.is-on { display: block; animation: dm-in 260ms var(--ease); }

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

@media (prefers-reduced-motion: reduce) {
  .dm-view.is-on { animation: none; }
}

.dm-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px 16px;
}

.dm-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.dm-head h2 {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-1);
}

.dm-tier {
  padding: 5px 11px;
  border: 1px solid var(--brass-deep);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--brass);
  white-space: nowrap;
}

.dm-lead { margin-bottom: 14px; font-size: 12.5px; line-height: 1.55; color: var(--text-3); }

/* --- стопка карт (таб «Карта») ---
   Карты лежат внахлёст, как пассы в кошельке: у задних видно только верх.
   Это не приём вёрстки, а то, как устроен экран приложения. */

.dm-stack { position: relative; padding-top: 26px; }

.dm-stackcard {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  cursor: pointer;
  transition: transform var(--t-base) var(--ease);
}

/* Задние карты выглядывают из-под передней: отрицательный отступ съедает их
   низ, а не «высота 26px» — иначе текст в них обрезался бы по глифам. */
.dm-sc-back2, .dm-sc-back1 { margin-bottom: -34px; opacity: 0.72; }
.dm-sc-back2 { transform: scale(0.94); }
.dm-sc-back1 { transform: scale(0.97); }

.dm-stackcard:hover { transform: translateY(-2px) scale(1); }

.dm-sc-front {
  position: relative;
  padding: 18px;
  box-shadow: var(--e-2);
}

.dm-sc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.dm-sc-venue {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

.dm-sc-tier {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}

.dm-sc-tier.is-gold { color: var(--brass); }

.dm-sc-balance {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-3);
}

.dm-sc-balance b {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--bonus);
  margin-right: 4px;
}

.dm-sc-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--text-3);
}

/* --- раскрытая карта --- */

.dm-back {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 12px 7px 0;
  border: none;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brass);
  cursor: pointer;
}

.dm-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  box-shadow: var(--e-2);
}

.dm-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.dm-card-balance {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--bonus);
}

.dm-card-terms { margin-top: 12px; font-size: 12.5px; color: var(--text-2); }

.dm-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

.dm-terms-list li,
.dm-ladder li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--text-3);
}

.dm-terms-list li:first-child, .dm-ladder li:first-child { border-top: none; }
.dm-terms-list b { font-weight: 600; color: var(--text-1); }

/* Лестница уровней: своя ступень подсвечена — в приложении именно она
   применяется на кассе, и это главное, что гость здесь ищет. */
.dm-ladder li { gap: 8px; }
.dm-ladder li span { flex: 1; }
.dm-ladder li b { font-weight: 600; color: var(--bonus); }
.dm-ladder li i { font-style: normal; font-size: 11px; color: var(--text-3); }
.dm-ladder li.is-me { color: var(--text-1); }
.dm-ladder li.is-me span { color: var(--brass); font-weight: 600; }

.dm-saved {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--text-2);
}

.dm-saved b { font-family: var(--font-display); font-weight: 600; }
.dm-saved span { display: flex; align-items: center; gap: 9px; }

.dm-diamond {
  width: 8px;
  height: 8px;
  background: var(--bonus);
  transform: rotate(45deg);
  border-radius: 1px;
}

.dm-expiry {
  margin-top: 16px;
  text-align: center;
  font-size: 11px;
  color: var(--text-3);
}

/* Строка-вход в подраздел («Активности», «Меню», «Настройки аккаунта»). */
.dm-row-link {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.dm-row-link:hover { border-color: var(--brass-deep); }
.dm-row-l { display: flex; flex-direction: column; gap: 3px; }
.dm-row-l b { font-size: 13px; color: var(--text-1); }
.dm-row-l i { font-style: normal; font-size: 11px; color: var(--text-3); }
.dm-row-go { margin-left: auto; color: var(--brass); }


/* --- строка статуса и QR ---------------------------------------------------
   QR — заведомо НЕРАБОЧИЙ узор: сканировать демо-экран смысла нет, а
   поддельный рабочий код был бы враньём. Узор вшит в CSS картинкой — внешних
   запросов страница не делает вовсе. Пластина светлая: настоящий код
   приложение тоже выводит на белом, иначе сканер кассы его не берёт. */

.dm-time { font-variant-numeric: tabular-nums; }

.dm-qr-img {
  display: block;
  width: 150px;
  height: 150px;
  margin: 16px auto 0;
  padding: 9px;
  border-radius: 8px;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' shape-rendering='crispEdges' fill='%231b1a17'%3E%3Crect x='0' y='0' width='28' height='4'/%3E%3Crect x='32' y='0' width='4' height='4'/%3E%3Crect x='40' y='0' width='4' height='4'/%3E%3Crect x='56' y='0' width='4' height='4'/%3E%3Crect x='64' y='0' width='4' height='4'/%3E%3Crect x='72' y='0' width='28' height='4'/%3E%3Crect x='0' y='4' width='4' height='4'/%3E%3Crect x='24' y='4' width='4' height='4'/%3E%3Crect x='32' y='4' width='4' height='4'/%3E%3Crect x='44' y='4' width='4' height='4'/%3E%3Crect x='56' y='4' width='12' height='4'/%3E%3Crect x='72' y='4' width='4' height='4'/%3E%3Crect x='96' y='4' width='4' height='4'/%3E%3Crect x='0' y='8' width='4' height='4'/%3E%3Crect x='8' y='8' width='12' height='4'/%3E%3Crect x='24' y='8' width='4' height='4'/%3E%3Crect x='44' y='8' width='12' height='4'/%3E%3Crect x='64' y='8' width='4' height='4'/%3E%3Crect x='72' y='8' width='4' height='4'/%3E%3Crect x='80' y='8' width='12' height='4'/%3E%3Crect x='96' y='8' width='4' height='4'/%3E%3Crect x='0' y='12' width='4' height='4'/%3E%3Crect x='8' y='12' width='12' height='4'/%3E%3Crect x='24' y='12' width='4' height='4'/%3E%3Crect x='32' y='12' width='4' height='4'/%3E%3Crect x='52' y='12' width='8' height='4'/%3E%3Crect x='72' y='12' width='4' height='4'/%3E%3Crect x='80' y='12' width='12' height='4'/%3E%3Crect x='96' y='12' width='4' height='4'/%3E%3Crect x='0' y='16' width='4' height='4'/%3E%3Crect x='8' y='16' width='12' height='4'/%3E%3Crect x='24' y='16' width='4' height='4'/%3E%3Crect x='32' y='16' width='4' height='4'/%3E%3Crect x='56' y='16' width='4' height='4'/%3E%3Crect x='72' y='16' width='4' height='4'/%3E%3Crect x='80' y='16' width='12' height='4'/%3E%3Crect x='96' y='16' width='4' height='4'/%3E%3Crect x='0' y='20' width='4' height='4'/%3E%3Crect x='24' y='20' width='4' height='4'/%3E%3Crect x='40' y='20' width='8' height='4'/%3E%3Crect x='56' y='20' width='12' height='4'/%3E%3Crect x='72' y='20' width='4' height='4'/%3E%3Crect x='96' y='20' width='4' height='4'/%3E%3Crect x='0' y='24' width='28' height='4'/%3E%3Crect x='48' y='24' width='4' height='4'/%3E%3Crect x='56' y='24' width='4' height='4'/%3E%3Crect x='64' y='24' width='4' height='4'/%3E%3Crect x='72' y='24' width='28' height='4'/%3E%3Crect x='32' y='28' width='4' height='4'/%3E%3Crect x='52' y='28' width='16' height='4'/%3E%3Crect x='0' y='32' width='8' height='4'/%3E%3Crect x='16' y='32' width='4' height='4'/%3E%3Crect x='28' y='32' width='8' height='4'/%3E%3Crect x='40' y='32' width='20' height='4'/%3E%3Crect x='64' y='32' width='16' height='4'/%3E%3Crect x='88' y='32' width='4' height='4'/%3E%3Crect x='16' y='36' width='4' height='4'/%3E%3Crect x='24' y='36' width='8' height='4'/%3E%3Crect x='36' y='36' width='12' height='4'/%3E%3Crect x='60' y='36' width='4' height='4'/%3E%3Crect x='76' y='36' width='16' height='4'/%3E%3Crect x='96' y='36' width='4' height='4'/%3E%3Crect x='32' y='40' width='12' height='4'/%3E%3Crect x='48' y='40' width='8' height='4'/%3E%3Crect x='60' y='40' width='8' height='4'/%3E%3Crect x='76' y='40' width='8' height='4'/%3E%3Crect x='88' y='40' width='4' height='4'/%3E%3Crect x='4' y='44' width='4' height='4'/%3E%3Crect x='20' y='44' width='8' height='4'/%3E%3Crect x='52' y='44' width='4' height='4'/%3E%3Crect x='60' y='44' width='4' height='4'/%3E%3Crect x='68' y='44' width='4' height='4'/%3E%3Crect x='88' y='44' width='4' height='4'/%3E%3Crect x='96' y='44' width='4' height='4'/%3E%3Crect x='0' y='48' width='12' height='4'/%3E%3Crect x='16' y='48' width='4' height='4'/%3E%3Crect x='24' y='48' width='8' height='4'/%3E%3Crect x='44' y='48' width='16' height='4'/%3E%3Crect x='64' y='48' width='4' height='4'/%3E%3Crect x='72' y='48' width='16' height='4'/%3E%3Crect x='92' y='48' width='8' height='4'/%3E%3Crect x='4' y='52' width='8' height='4'/%3E%3Crect x='16' y='52' width='4' height='4'/%3E%3Crect x='24' y='52' width='4' height='4'/%3E%3Crect x='40' y='52' width='4' height='4'/%3E%3Crect x='48' y='52' width='4' height='4'/%3E%3Crect x='56' y='52' width='4' height='4'/%3E%3Crect x='72' y='52' width='8' height='4'/%3E%3Crect x='88' y='52' width='4' height='4'/%3E%3Crect x='4' y='56' width='4' height='4'/%3E%3Crect x='16' y='56' width='4' height='4'/%3E%3Crect x='24' y='56' width='20' height='4'/%3E%3Crect x='48' y='56' width='24' height='4'/%3E%3Crect x='80' y='56' width='4' height='4'/%3E%3Crect x='88' y='56' width='12' height='4'/%3E%3Crect x='12' y='60' width='4' height='4'/%3E%3Crect x='24' y='60' width='4' height='4'/%3E%3Crect x='32' y='60' width='4' height='4'/%3E%3Crect x='48' y='60' width='4' height='4'/%3E%3Crect x='76' y='60' width='24' height='4'/%3E%3Crect x='0' y='64' width='4' height='4'/%3E%3Crect x='8' y='64' width='4' height='4'/%3E%3Crect x='24' y='64' width='12' height='4'/%3E%3Crect x='60' y='64' width='4' height='4'/%3E%3Crect x='72' y='64' width='12' height='4'/%3E%3Crect x='92' y='64' width='8' height='4'/%3E%3Crect x='40' y='68' width='4' height='4'/%3E%3Crect x='56' y='68' width='8' height='4'/%3E%3Crect x='68' y='68' width='4' height='4'/%3E%3Crect x='80' y='68' width='4' height='4'/%3E%3Crect x='96' y='68' width='4' height='4'/%3E%3Crect x='0' y='72' width='28' height='4'/%3E%3Crect x='36' y='72' width='4' height='4'/%3E%3Crect x='56' y='72' width='4' height='4'/%3E%3Crect x='76' y='72' width='8' height='4'/%3E%3Crect x='88' y='72' width='4' height='4'/%3E%3Crect x='0' y='76' width='4' height='4'/%3E%3Crect x='24' y='76' width='4' height='4'/%3E%3Crect x='32' y='76' width='4' height='4'/%3E%3Crect x='64' y='76' width='8' height='4'/%3E%3Crect x='76' y='76' width='8' height='4'/%3E%3Crect x='92' y='76' width='8' height='4'/%3E%3Crect x='0' y='80' width='4' height='4'/%3E%3Crect x='8' y='80' width='12' height='4'/%3E%3Crect x='24' y='80' width='4' height='4'/%3E%3Crect x='32' y='80' width='4' height='4'/%3E%3Crect x='40' y='80' width='4' height='4'/%3E%3Crect x='52' y='80' width='4' height='4'/%3E%3Crect x='60' y='80' width='4' height='4'/%3E%3Crect x='72' y='80' width='4' height='4'/%3E%3Crect x='84' y='80' width='4' height='4'/%3E%3Crect x='0' y='84' width='4' height='4'/%3E%3Crect x='8' y='84' width='12' height='4'/%3E%3Crect x='24' y='84' width='4' height='4'/%3E%3Crect x='36' y='84' width='4' height='4'/%3E%3Crect x='68' y='84' width='8' height='4'/%3E%3Crect x='80' y='84' width='4' height='4'/%3E%3Crect x='88' y='84' width='4' height='4'/%3E%3Crect x='96' y='84' width='4' height='4'/%3E%3Crect x='0' y='88' width='4' height='4'/%3E%3Crect x='8' y='88' width='12' height='4'/%3E%3Crect x='24' y='88' width='4' height='4'/%3E%3Crect x='44' y='88' width='4' height='4'/%3E%3Crect x='72' y='88' width='4' height='4'/%3E%3Crect x='80' y='88' width='12' height='4'/%3E%3Crect x='0' y='92' width='4' height='4'/%3E%3Crect x='24' y='92' width='4' height='4'/%3E%3Crect x='44' y='92' width='4' height='4'/%3E%3Crect x='64' y='92' width='4' height='4'/%3E%3Crect x='80' y='92' width='16' height='4'/%3E%3Crect x='0' y='96' width='28' height='4'/%3E%3Crect x='32' y='96' width='12' height='4'/%3E%3Crect x='48' y='96' width='4' height='4'/%3E%3Crect x='60' y='96' width='4' height='4'/%3E%3Crect x='92' y='96' width='8' height='4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-origin: content-box;
}

.dm-qr-hint { margin-top: 12px; font-size: 11px; color: var(--text-3); }
.dm-qr-hint span { color: var(--brass); font-variant-numeric: tabular-nums; }

/* Три служебных цвета значения: бонус, латунь и «погашено». Держатся вместе,
   потому что употребляются во всех блоках сразу. */
.mint { color: var(--bonus); }
.brass { color: var(--brass); }
.dim2 { color: var(--text-3); }

/* --- универсальный блок --- */

.dm-block {
  margin-top: 12px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.dm-block-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
}

.dm-block-h b { color: var(--text-1); }
.dm-block-h span { font-size: 11.5px; color: var(--text-3); }

.dm-note { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
.dm-note-tight { margin: 8px 2px 0; }
.dm-note-top { margin-top: 0; margin-bottom: 10px; }

.dm-bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.dm-bar i { display: block; height: 100%; width: 50%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brass-deep), var(--brass)); }

.dm-bar i.w58 { width: 58%; }
.dm-bar i.w66 { width: 66%; }
.dm-bar i.w82 { width: 82%; }

.dm-stamps { display: flex; gap: 8px; }
.dm-stamps i {
  flex: 1;
  height: 30px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
}
.dm-stamps i.on { border-style: solid; border-color: var(--brass-deep); background: var(--brass-glow); }

.dm-mission-t { margin-bottom: 9px; font-size: 13px; font-weight: 600; color: var(--text-1); }

.dm-act {
  flex: 1;
  padding: 12px 10px;
  border: 1px solid var(--brass-deep);
  border-radius: var(--r-md);
  background: var(--brass-glow);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brass);
  cursor: pointer;
}

.dm-act.ghost { border-color: var(--line); background: transparent; color: var(--text-2); }
.dm-act:hover:not(:disabled) { border-color: var(--brass); }
.dm-act:disabled { opacity: 0.65; cursor: default; }
.dm-act-wide { display: block; width: 100%; margin-top: 12px; }
.dm-block .dm-act { width: 100%; margin-top: 12px; }

/* --- история --- */

.dm-feed { display: flex; flex-direction: column; }

.dm-feed li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line-soft);
}

.dm-op { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-1); }
.dm-op i { font-style: normal; font-size: 11px; color: var(--text-3); }
.dm-feed b { font-family: var(--font-display); font-size: 14px; font-weight: 600; }

.dm-buys li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--text-2);
}

.dm-buys b { font-weight: 600; color: var(--text-1); }
.dm-buys i { grid-column: 1 / -1; font-style: normal; font-size: 11px; color: var(--text-3); }

/* --- заведения --- */

.dm-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.dm-hero-img {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--r-sm);
  background: linear-gradient(140deg, var(--brass-deep), #2a2118);
}

.dm-hero-txt { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.dm-hero-txt b { font-family: var(--font-display); font-size: 14px; color: var(--text-1); }
.dm-hero-txt span { font-size: 11.5px; color: var(--text-3); }

.dm-hero-tag {
  margin-left: auto;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bonus);
  white-space: nowrap;
}

.dm-slots { display: flex; flex-wrap: wrap; gap: 8px; }

.dm-slot {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}

.dm-slot.is-on { border-color: var(--brass-deep); background: var(--brass-glow); color: var(--brass); }
.dm-slot.is-off { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

.dm-venues li,
.dm-survey li,
.dm-consents li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--text-3);
}

.dm-venues li:first-child,
.dm-survey li:first-child,
.dm-consents li:first-child { border-top: none; }

.dm-venues b, .dm-survey b, .dm-consents b { font-weight: 600; color: var(--text-1); }
.dm-venues span { color: var(--bonus); }

/* --- купоны --- */

.dm-coupon {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--brass-deep);
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--brass-glow), transparent);
}

.dm-coupon.is-plain { border-color: var(--line); background: var(--surface); }
.dm-coupon-l { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.dm-coupon-l b { font-size: 13.5px; color: var(--text-1); }
.dm-coupon-l span { font-size: 11px; color: var(--text-3); }

.dm-coupon-btn {
  margin-left: auto;
  flex: none;
  padding: 9px 14px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--brass);
  font-size: 12px;
  font-weight: 700;
  color: #1b1a17;
  cursor: pointer;
}

.dm-coupon-btn.is-done { background: var(--bonus); color: #08110e; }

.dm-coupon-tag {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.dm-bids li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--text-3);
}

.dm-bids li:first-child { border-top: none; }
.dm-bids b { font-family: var(--font-display); font-weight: 600; color: var(--text-2); }
.dm-bids .win span { color: var(--brass); }
.dm-bids .win b { color: var(--brass); }

/* --- ещё --- */

.dm-stars { display: flex; gap: 6px; }

.dm-stars button {
  flex: 1;
  padding: 8px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--text-3);
  cursor: pointer;
}

.dm-stars button.is-on { border-color: var(--brass-deep); color: var(--brass); }

/* --- каталог заведений --- */

.dm-search {
  margin-bottom: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--text-3);
}

.dm-catalog li { margin-top: 8px; }

.dm-catalog button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.dm-catalog button:hover { border-color: var(--brass-deep); }
.dm-cat-l { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.dm-cat-l b { font-size: 13.5px; color: var(--text-1); }
.dm-cat-l i { font-style: normal; font-size: 11px; color: var(--text-3); }

.dm-cat-pct {
  margin-left: auto;
  flex: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--bonus);
}

/* --- тумблер согласия --- */

.dm-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 12.5px;
}

.dm-toggle {
  position: relative;
  width: 38px;
  height: 22px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.dm-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-3);
  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.dm-toggle.is-on { border-color: var(--bonus); }
.dm-toggle.is-on::after { transform: translateX(16px); background: var(--bonus); }

/* --- модальные экраны (QR и оценка визита) ---
   В приложении оба — полноэкранные поверх любой вкладки, поэтому и здесь они
   накрывают ТЕЛЕФОН целиком, а не открываются очередным блоком в свитке. */

/* display:flex ниже перебивает [hidden] из стилей браузера — без этой строки
   модалка висит на экране с самой загрузки. Та же ловушка у слотов брони. */
.dm-modal[hidden], .dm-slots[hidden] { display: none; }

.dm-modal {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 7, 9, 0.86);
  backdrop-filter: blur(6px);
}

.dm-modal-in {
  width: 100%;
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
}

.dm-modal-venue { font-size: 11.5px; color: var(--text-3); }

.dm-modal-h {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-1);
}

.dm-modal-num { margin-top: 12px; font-size: 11.5px; letter-spacing: 0.08em; color: var(--text-3); }

.dm-modal-bal { margin-top: 10px; }
.dm-modal-bal b {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--bonus);
}
.dm-modal-bal span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-3); }

.dm-modal .dm-stars { margin-top: 16px; }
.dm-modal .dm-act { width: 100%; margin-top: 16px; }

/* Кнопка «прислать пуш» стоит ПОД телефоном, а не внутри: в приложении такой
   кнопки нет — отзыв приходит уведомлением, и это единственный способ показать
   его, не соврав про интерфейс. */
.dm-push {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 11px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: transparent;
  font-size: 12.5px;
  color: var(--text-3);
  cursor: pointer;
}

.dm-push:hover { border-color: var(--brass-deep); color: var(--brass); }

/* ======================= ТАБЫ ======================= */

.dm-tabs {
  display: flex;
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-bottom: 6px;
}

.dm-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 2px 9px;
  border: none;
  background: transparent;
  font-size: 9.5px;
  letter-spacing: 0;
  color: var(--text-3);
  cursor: pointer;
}

.dm-tab.is-on { color: var(--brass); }

.dm-ic {
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
}

.dm-ic.ic-card { border-radius: 4px; }
.dm-ic.ic-hist { border-radius: 50%; }
.dm-ic.ic-pin { border-radius: 50% 50% 50% 2px; transform: rotate(-45deg); }
.dm-ic.ic-tick { border-radius: 4px; border-style: dashed; }
.dm-ic.ic-user { border-radius: 50%; }

/* ======================= ПОЯСНЕНИЕ СБОКУ ======================= */

.dm-side {
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
}

.dm-side-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.dm-side-h {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-1);
}

.dm-side-p { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--text-2); }

.dm-side-list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }

.dm-side-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}

.dm-side-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass-deep);
}

.dm-side-list b { color: var(--text-1); font-weight: 600; }

.dm-side-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brass);
}

.dm-side-link:hover { text-decoration: underline; }

/* ======================= НИЗ ======================= */

.dm-foot-note {
  max-width: 640px;
  margin: clamp(40px, 6vw, 72px) auto 0;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
}

.dm-foot-note b { color: var(--text-2); }

.dm-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 26px var(--gutter) 40px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.dm-bottom a { color: var(--text-3); }
.dm-bottom a:hover { color: var(--brass); }