/* ============================================================================
   site/demo.css — регистрация: форма «Попробовать» открывает кабинет.

   Форма — главный экран этой страницы, поэтому она собрана как продукт, а не
   как «поля в столбик»: выбор роли карточками со знаком, блоки-вопросы с
   кольцом-шагом в заголовке, ответы чипсами в одно касание, файл в одном
   боксе на оба состояния, пароль со шкалой и глазом, две галочки документов,
   одна яркая кнопка с замком.

   Рядом — КАРТА КАБИНЕТА (demo-pass.js): матовая карта, которая пишется
   вместе с формой. Сайт плоский (см. .glass в style.css: «у Ландо все
   поверхности плоские»), поэтому карта — не стекло и не голограмма, а тёмный
   металл: ровная заливка, шум, гравировка «∞», блик только от указателя.
   Цвет у карты один — лайм бренда (у поставщика — золото палитры), им горят
   деления готовности, статус и автограф.

   Форма отвечает ЗНАКАМИ (icons.js, пружина smooth), а стили дают знакам
   место и цвет. Что во что перетекает — в demo.js.
   ========================================================================== */

/* ── сцена ──
   Шапка и форма — один раздел под одним холстом «Велариса» (velaris.css
   кладёт холст, здесь — только воздух). */
.dm-stage{ padding-bottom:var(--sect-pad) }

/* Капкан: собственный display перекрывает атрибут hidden. Всё, что скрипт
   прячет атрибутом, обязано слушаться его сильнее собственной раскладки. */
.dm-stage [hidden],[data-role-only][hidden]{ display:none !important }

/* ── раскладка ──
   Широкий экран: форма (потом — «Кабинет открыт») слева, липкая колонка с
   картой справа. Узкий: колонка рассыпается (display:contents), и карта
   встаёт НАД формой — человек видит, что он строит, ещё до первого поля. */
.dm-split{ display:grid; gap:clamp(26px,3.2vw,52px); align-items:start;
  margin-top:clamp(34px,4vw,58px) }
@media (min-width:1000px){
  .dm-split{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-areas:"main aside" }
  .dm,.dm-ok{ grid-area:main }
  .dm-aside{ grid-area:aside; position:sticky; top:96px; display:grid;
    gap:clamp(24px,2.4vw,34px); align-content:start }
}
@media (max-width:999px){
  .dm-aside{ display:contents }
  .dm-pass-wrap{ order:-1; width:100%; max-width:460px }
  .dm-side{ order:3 }
}
/* Кабинет открыт: «что дальше» уже есть на экране входа — дубль в колонке не нужен.
   Карта и экран встают под шапкой, а не под ней (шапка сайта фиксирована). */
.dm-split.is-done .dm-side{ display:none }
.dm-split,.dm-pass-wrap,.dm-otp{ scroll-margin-top:96px }
/* Правая колонка лежит прямо на градиенте — тексту нужна тень, а не плашка. */
.dm-side{ text-shadow:0 1px 18px rgba(6,14,11,.55) }

/* ── форма ──
   ФОРМА СТОИТ НА СВОЁМ ФОНЕ, А НЕ НА АВРОРЕ: собственная почти непрозрачная
   плита отсекает градиент — поля лежат на ровном, и рамка видна по всей
   длине. Это лечится подложкой, а не цветом рамки. */
.dm,.dm-ok{ display:grid; gap:clamp(18px,1.8vw,26px); padding:clamp(22px,2.4vw,40px);
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  background-color:var(--glass-base) }
/* Уход формы, когда кабинет открылся: она гаснет и чуть приподнимается, а на
   её место встаёт «Кабинет открыт» (demo.js держит порядок). */
.dm{ transition:opacity .38s var(--e-micro), transform .38s var(--e-micro) }
.dm.is-leaving{ opacity:0; transform:translate3d(0,-14px,0) scale(.992); pointer-events:none }

/* ── выбор роли ── */
.dm-roles{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.dm-role{ appearance:none; cursor:pointer; text-align:left;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px;
  padding:13px 16px 13px 13px; border-radius:18px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:var(--ink); font:inherit;
  transition:border-color .18s var(--e-micro), background-color .18s var(--e-micro),
             transform .18s var(--e-micro) }
.dm-role-ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  transition:background-color .18s var(--e-micro), border-color .18s var(--e-micro) }
.dm-role-ic .ic{ width:22px; height:22px; color:var(--muted); stroke-width:1.7;
  transition:color .18s var(--e-micro) }
.dm-role-t{ display:grid; gap:2px; min-width:0 }
.dm-role-t b{ font-weight:800; font-size:clamp(15px,1.15vw,17.5px); letter-spacing:-.01em }
.dm-role-t span{ font-size:12.5px; color:var(--muted) }
.dm-role-ok{ width:17px; height:17px; stroke-width:2.4; color:var(--dim); opacity:.7;
  transition:color .18s var(--e-micro), opacity .18s var(--e-micro) }
.dm-role:hover{ border-color:rgba(255,255,255,.24) }
.dm-role:hover .dm-role-ic .ic{ color:var(--ink) }
.dm-role.is-on{ background:var(--cta-soft); border-color:var(--cta-edge) }
.dm-role.is-on .dm-role-ic{ background:rgba(217,246,92,.12); border-color:rgba(217,246,92,.28) }
.dm-role.is-on .dm-role-ic .ic,.dm-role.is-on:hover .dm-role-ic .ic{ color:var(--cta) }
.dm-role.is-on .dm-role-ok{ color:var(--cta); opacity:1 }

/* ── блоки-вопросы ──
   Заголовок блока держит линейку сверху: видно, где кончился один разговор и
   начался другой. В заголовке — кольцо-шаг: становится галочкой, когда блок
   закрыт ответом. Необязательные блоки помечены «можно пропустить». */
.dm-set{ border:0; margin:0; padding:0; display:grid; gap:10px; min-width:0 }
.dm-block{ padding-top:clamp(16px,1.6vw,22px); border-top:1px solid rgba(255,255,255,.10) }
.dm-set legend{ padding:0; margin-bottom:clamp(12px,1.2vw,18px); float:left; width:100% }
/* legend во float отдаёт поток следующему элементу — вернём его на место. */
.dm-block > legend + *{ clear:both }
.dm-lg{ display:flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--acc-lit) }
.dm-lg-n{ font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--dim) }
.ic-step{ width:16px; height:16px; stroke-width:2.2; color:var(--dim);
  transition:color .22s var(--e-micro) }
.dm-block.is-done .ic-step{ color:var(--acc-lit) }
.dm-block.is-done .dm-lg-n{ color:var(--acc-lit); opacity:.75 }
.dm-opt{ margin-left:auto; padding:4px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.13); color:var(--dim);
  font-size:11.5px; font-weight:600; letter-spacing:.01em; text-transform:none; white-space:nowrap }

.dm-lab,.dm-legend2{
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim) }
.dm-legend2{ margin-top:10px }
.dm-legend2.is-first{ margin-top:0 }

/* ── поля ── */
.dm-grid{ display:grid; gap:14px }
@media (min-width:680px){
  .dm-grid{ grid-template-columns:1fr 1fr }
  .dm-wide{ grid-column:1 / -1 }
}
.dm-field{ display:grid; gap:8px; min-width:0 }
.dm-in{ position:relative; display:block }
.dm-field input,.dm-field textarea,.dm-otp input{
  appearance:none; width:100%; border-radius:13px;
  background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.16);
  color:var(--ink); font:500 16px/1.4 Manrope, system-ui, sans-serif;
  padding:13px 15px; letter-spacing:-.005em;
  transition:border-color .16s var(--e-micro), background-color .16s var(--e-micro) }
.dm-in input{ padding-right:42px }
.dm-field textarea{ resize:vertical; min-height:74px }
.dm-field input::placeholder,.dm-field textarea::placeholder,.dm-otp input::placeholder{ color:var(--hint) }
.dm-field input:hover,.dm-field textarea:hover{ border-color:rgba(255,255,255,.24) }
.dm-field input:focus,.dm-field textarea:focus,.dm-otp input:focus{ outline:none;
  border-color:var(--acc-lit); background:rgba(0,0,0,.34) }
/* Знак у поля: тире, пока пусто, галочка — когда заполнено. */
.ic-ok{ position:absolute; right:13px; top:50%; translate:0 -50%; pointer-events:none;
  width:16px; height:16px; stroke-width:2.3; color:var(--ink); opacity:.22;
  transition:color .22s var(--e-micro), opacity .22s var(--e-micro) }
.dm-in.is-ok .ic-ok{ color:var(--acc-lit); opacity:1 }
.dm-field input.is-bad{ border-color:var(--bad) }
.dm-in.is-bad .ic-ok{ color:var(--bad); opacity:1 }

/* Телефон: код страны — плашкой в поле, набирают только девять цифр. Та же
   форма, что на входе в приложение: логин выглядит одинаково везде. */
.dm-cc{ position:absolute; left:15px; top:50%; translate:0 -50%; pointer-events:none;
  font-size:16px; color:var(--muted); padding-right:11px;
  border-right:1px solid rgba(255,255,255,.14); line-height:1.1 }
.dm-tel input{ padding-left:70px; font-variant-numeric:tabular-nums; letter-spacing:.01em }

/* Пароль: глаз справа. Перечёркнут, когда пароль ВИДЕН — знак показывает
   действие «спрятать», черта дорисовывается, а не подменяется. */
.dm-pw input{ padding-right:54px }
.dm-eye{ position:absolute; right:5px; top:50%; translate:0 -50%;
  display:grid; place-items:center; width:42px; height:42px; border-radius:10px;
  appearance:none; border:0; background:transparent; color:var(--muted); cursor:pointer;
  transition:color .15s var(--e-micro), background-color .15s var(--e-micro) }
.dm-eye:hover{ color:var(--ink); background:rgba(255,255,255,.06) }
.dm-eye-ic{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round }
.dm-eye-x{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .28s var(--e-micro) }
.dm-eye[aria-pressed="true"] .dm-eye-x{ stroke-dashoffset:0 }

/* Шкала пароля: три деления и слово. Золото — «сойдёт», мята — «хороший»,
   лайм — «надёжный»: та же лестница, что у статусов в приложении. */
.dm-meter{ display:flex; align-items:center; gap:10px; min-height:18px }
.dm-meter-bars{ display:grid; grid-template-columns:repeat(3,26px); gap:4px }
.dm-meter-bars i{ height:4px; border-radius:2px; background:rgba(255,255,255,.12);
  transition:background-color .25s var(--e-micro), box-shadow .25s var(--e-micro) }
.dm-meter-t{ font-size:12.5px; font-weight:600; color:var(--dim) }
.dm-meter[data-lv="1"] .dm-meter-bars i:nth-child(1){ background:var(--gold) }
.dm-meter[data-lv="1"] .dm-meter-t{ color:var(--gold) }
.dm-meter[data-lv="2"] .dm-meter-bars i:nth-child(-n+2){ background:var(--acc-lit) }
.dm-meter[data-lv="2"] .dm-meter-t{ color:var(--acc-lit) }
.dm-meter[data-lv="3"] .dm-meter-bars i{ background:var(--cta); box-shadow:0 0 10px rgba(217,246,92,.35) }
.dm-meter[data-lv="3"] .dm-meter-t{ color:var(--cta) }

/* ── документы ──
   Галочка — настоящий checkbox (клавиатура, чтение с экрана), поверх него
   своя коробка: лайм заливает её, галочка дорисовывается штрихом. */
.dm-docs{ display:grid; gap:12px; margin-top:4px }
.dm-check{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:12px; align-items:start; cursor:pointer;
  font-size:14.5px; line-height:1.45; color:var(--muted) }
.dm-check input{ position:absolute; left:0; top:0; width:24px; height:24px; margin:0;
  opacity:0; cursor:pointer }
.dm-box{ display:grid; place-items:center; width:24px; height:24px; border-radius:7px;
  border:1.5px solid rgba(255,255,255,.28); background:rgba(0,0,0,.3);
  transition:background-color .18s var(--e-micro), border-color .18s var(--e-micro),
             transform .18s var(--e-micro) }
.dm-box svg{ width:16px; height:16px; fill:none; stroke:var(--cta-ink); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round }
.dm-box path{ stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .3s var(--e-micro) .04s }
.dm-check:hover .dm-box{ border-color:rgba(255,255,255,.5) }
.dm-check input:checked + .dm-box{ background:var(--cta); border-color:var(--cta) }
.dm-check input:checked + .dm-box path{ stroke-dashoffset:0 }
.dm-check input:active + .dm-box{ transform:scale(.92) }
.dm-check input:focus-visible + .dm-box{ outline:2px solid var(--gold); outline-offset:3px }
.dm-check.is-bad .dm-box{ border-color:var(--bad); animation:dm-nudge .36s var(--e-micro) }
.dm-check a{ color:var(--ink); font-weight:700; border-bottom:1px solid rgba(255,255,255,.28);
  transition:border-color .15s var(--e-micro), color .15s var(--e-micro) }
.dm-check a:hover{ color:var(--cta); border-bottom-color:var(--cta) }
.dm-org{ font-size:12.5px; line-height:1.5; color:var(--dim) }
@keyframes dm-nudge{ 30%{ transform:translateX(-3px) } 60%{ transform:translateX(3px) } }

/* ── код из SMS (когда на сервере включат шлюз) ── */
.dm-otp{ display:grid; gap:10px; padding:16px; border-radius:16px;
  border:1px solid var(--acc-edge); background:var(--acc-soft) }
.dm-otp-h{ font-size:14.5px; color:var(--muted) }
.dm-otp-h b{ color:var(--ink) }
.dm-otp input{ font:700 26px/1 "Space Grotesk", Manrope, sans-serif; letter-spacing:.42em;
  text-align:center; padding:14px }
.dm-otp-re{ justify-self:start; appearance:none; border:0; background:none; cursor:pointer;
  padding:4px 0; color:var(--acc-lit); font:700 13.5px/1.2 Manrope, sans-serif }
.dm-otp-re[disabled]{ color:var(--dim); cursor:default }

/* ── чипсы ── */
.dm-chips{ display:flex; flex-wrap:wrap; gap:8px }
.dm-chip{ appearance:none; cursor:pointer; font:600 14px/1 Manrope, sans-serif;
  display:inline-flex; align-items:center; gap:7px;
  color:var(--muted); padding:10px 15px 10px 12px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  transition:color .15s var(--e-micro), border-color .15s var(--e-micro),
             background-color .15s var(--e-micro), transform .15s var(--e-micro) }
.dm-chip .ic{ width:13px; height:13px; stroke-width:2.5; opacity:.6;
  transition:opacity .15s var(--e-micro) }
.dm-chip:hover{ color:var(--ink); border-color:rgba(255,255,255,.3) }
.dm-chip:hover .ic{ opacity:.9 }
.dm-chip[aria-pressed="true"]{
  background:var(--acc-soft); border-color:var(--acc-edge); color:var(--acc-lit) }
.dm-chip[aria-pressed="true"] .ic{ opacity:1 }
.dm-chip:active{ transform:scale(.97) }
.dm-chips-tight .dm-chip{ font-size:13px; padding:8px 12px 8px 10px }
.dm-chips-tight .dm-chip .ic{ width:12px; height:12px }

/* приманка для ботов: визуально не существует, но в вёрстке есть */
.dm-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }

/* ── файл ── */
.dm-file{ display:grid; gap:8px }
.dm-drop{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:14px; padding:12px 14px 12px 12px; border-radius:16px; cursor:pointer;
  background:rgba(0,0,0,.26); border:1px dashed rgba(255,255,255,.24);
  transition:border-color .18s var(--e-micro), background-color .18s var(--e-micro) }
.dm-drop input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100% }
.dm-drop-ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  transition:background-color .18s var(--e-micro), border-color .18s var(--e-micro) }
.dm-drop-ic .ic{ width:22px; height:22px; color:var(--acc-lit); stroke-width:1.7;
  transition:color .18s var(--e-micro) }
.dm-drop-t{ display:grid; gap:3px; min-width:0 }
.dm-drop-t b{ font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dm-drop-t span{ font-size:12.5px; color:var(--dim) }
/* поле файла невидимо — фокус с клавиатуры показывает сама рамка */
.dm-drop:focus-within{ border-color:var(--acc-lit); outline:2px solid var(--gold); outline-offset:3px }
.dm-drop:hover,.dm-drop.is-over{ border-color:var(--acc-lit); background:rgba(0,0,0,.34) }
.dm-file.has-file .dm-drop{ border-style:solid; border-color:var(--acc-edge); background:var(--acc-soft) }
.dm-file.has-file .dm-drop-ic{ background:rgba(63,211,162,.12); border-color:rgba(63,211,162,.24) }
.dm-file.has-file .dm-drop-t span{ color:var(--muted) }
.dm-file.is-bad .dm-drop{ border-color:var(--bad) }
.dm-file.is-bad .dm-drop-ic .ic{ color:var(--bad) }
.dm-drop-msg,.dm-file.is-bad .dm-drop-msg{ color:var(--bad) }
.dm-fx{ position:relative; z-index:2; appearance:none; border:0; cursor:pointer;
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.06); color:var(--muted);
  transition:color .15s var(--e-micro), background-color .15s var(--e-micro) }
.dm-fx .ic{ width:15px; height:15px; stroke-width:2.2 }
.dm-fx:hover{ color:var(--ink); background:rgba(255,255,255,.12) }

/* ── отправка ──
   На кнопке замок: на наведении дужка приоткрывается (двойник lock →
   lockOpen в icons.js), на успехе открыт насовсем. */
.dm-send{ appearance:none; cursor:pointer; border:0;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:18px 22px; border-radius:16px;
  background:var(--cta); color:var(--cta-ink);
  font:800 16.5px/1 Manrope, sans-serif; letter-spacing:.01em;
  box-shadow:0 16px 36px -16px var(--cta-glow);
  transition:transform .16s var(--e-micro), filter .16s var(--e-micro), opacity .16s var(--e-micro) }
.dm-send .ic{ width:19px; height:19px; stroke-width:2.3 }
.dm-send:hover{ transform:translate3d(0,-1px,0); filter:brightness(1.05) }
.dm-send:active{ transform:none }
.dm-send[disabled]{ opacity:.78; cursor:progress; transform:none; filter:none }
.dm-note{ color:var(--dim); font-size:13px; text-align:center; margin-top:-6px }
.dm-err{ font-size:14px; line-height:1.45; color:#FFC2B6;
  padding:12px 15px; border-radius:12px;
  background:rgba(229,83,61,.10); border:1px solid rgba(229,83,61,.34) }

/* ── правая колонка: что будет дальше ──
   Компактно: колонка липкая, и вместе с картой обязана влезать в экран
   ноутбука. На низком экране описания шагов прячутся — остаются заголовки. */
.dm-side{ display:grid; gap:clamp(14px,1.4vw,20px); align-content:start }
.dm-steps{ display:grid; gap:clamp(12px,1.2vw,18px) }
.dm-steps li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start }
.dm-steps .dnum{ font-size:clamp(20px,1.6vw,26px); line-height:1; color:var(--acc-lit); min-width:2.2ch }
.dm-steps h3{ font-size:clamp(15px,1.1vw,17.5px); margin-bottom:4px }
.dm-steps p{ color:var(--muted); font-size:14px; line-height:1.5; max-width:40ch }
.dm-free{ display:flex; align-items:center; gap:14px; padding-top:clamp(12px,1.2vw,18px);
  border-top:1px solid rgba(255,255,255,.1) }
.dm-free-v{ font-size:clamp(34px,2.8vw,46px); line-height:1; color:var(--cta) }
.dm-free > span{ display:grid; gap:2px }
.dm-free b:not(.dnum){ font-size:14.5px }
.dm-free > span > span{ color:var(--muted); font-size:13.5px; line-height:1.45 }
@media (min-width:1000px) and (max-height:760px){
  .dm-side .dm-steps p{ display:none }
}

/* ═══════════════════════════ КАРТА КАБИНЕТА ═══════════════════════════
   Размеры внутри — в cqi (доля ширины карты): карта одна и та же на
   телефоне в 335 px и на мониторе в 440 px, и пропорции текста не плывут.
   Слои лицевой стороны снизу вверх: заливка и шум → блик указателя →
   гравировка «∞» → текст → автограф (поверх текста, как настоящая подпись
   на карте) → лаймовая черта активации. */
.dm-pass-wrap{ display:grid; gap:10px; justify-items:start }
.pass{ --pc:var(--cta); --pc-rgb:217,246,92;
  position:relative; width:100%; max-width:440px; aspect-ratio:1.586 / 1;
  perspective:1200px; container-type:inline-size }
.pass[data-role="supplier"]{ --pc:var(--gold); --pc-rgb:242,198,98 }
.pass-tilt,.pass-in,.pass-face{ position:absolute; inset:0 }
/* Наклон ведёт demo-pass.js со своим сглаживанием — CSS-переход тут только мешал бы. */
.pass-tilt{ transform-style:preserve-3d }
.pass-in{ transform-style:preserve-3d; transition:transform 1.05s cubic-bezier(.22,1,.36,1) }
.pass.is-flipped .pass-in{ transform:rotateY(180deg) }

.pass-face{ border-radius:20px; border-radius:clamp(14px,5cqi,24px); overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(0);
  color:var(--ink);
  background:
    radial-gradient(90% 70% at 92% -4%, rgba(var(--pc-rgb),.10), transparent 62%),
    radial-gradient(70% 70% at -6% 106%, rgba(63,211,162,.08), transparent 66%),
    linear-gradient(158deg, #1C2E27 0%, #13221C 46%, #0B1612 100%);
  border:1px solid rgba(234,243,239,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),
             0 34px 64px -30px rgba(0,0,0,.8), 0 14px 28px -18px rgba(0,0,0,.6);
  transition:border-color .5s var(--e-micro), box-shadow .6s var(--e-micro) }
/* шум — матовость металла; полоса — прокат листа */
.pass-face::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.11;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
.pass-face::after{ content:""; position:absolute; inset:-20%; pointer-events:none;
  background:linear-gradient(112deg, transparent 38%, rgba(255,255,255,.04) 47%,
    rgba(255,255,255,.012) 53%, transparent 62%) }

.pass-front{ display:grid; grid-template-rows:auto 1fr auto auto;
  gap:10px; gap:2.6cqi; padding:22px 24px 18px; padding:6.2cqi 6.6cqi 5.2cqi }
.pass-top,.pass-mid,.pass-bot,.pass-foot{ position:relative; z-index:2 }

/* блик указателя: свет на металле, а не стекло — без цвета и без радуги */
.pass-light{ position:absolute; left:0; top:0; z-index:1; width:300px; width:76cqi; aspect-ratio:1;
  margin:-150px 0 0 -150px; margin:-38cqi 0 0 -38cqi; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.13), rgba(255,255,255,.04) 48%, transparent);
  mix-blend-mode:screen; opacity:0; transition:opacity .45s var(--e-micro) }
.pass.is-hover .pass-light{ opacity:1 }

/* гравировка «∞»: тонкая линия и тень под ней — врезана, а не нарисована */
.pass-mark{ position:absolute; z-index:1; right:-10%; bottom:-21%; width:80%; height:auto;
  overflow:visible; pointer-events:none; filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) }
.pass-mark path{ fill:none; stroke:rgba(234,243,239,.075); stroke-width:1.1;
  vector-effect:non-scaling-stroke; transition:stroke .9s var(--e-micro) }
.pass.is-open .pass-mark path{ stroke:rgba(var(--pc-rgb),.2) }

.pass-sign{ position:absolute; z-index:3; right:2%; bottom:31%; width:44%; aspect-ratio:1.55;
  pointer-events:none }

.pass-sweep{ position:absolute; z-index:4; inset:-10% -60%; pointer-events:none; opacity:0;
  background:linear-gradient(100deg, transparent 42%, rgba(var(--pc-rgb),0) 44%,
    rgba(var(--pc-rgb),.55) 50%, rgba(var(--pc-rgb),0) 56%, transparent 58%);
  mix-blend-mode:screen; transform:translate3d(-60%,0,0) }
.pass.is-opening .pass-sweep{ animation:pass-sweep 1.15s var(--e-reveal) both }
@keyframes pass-sweep{
  0%{ opacity:1; transform:translate3d(-60%,0,0) }
  82%{ opacity:1 }
  100%{ opacity:0; transform:translate3d(60%,0,0) } }

.pass-top{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.pass-brand{ display:inline-flex; align-items:center; gap:8px }
.pass-brand img{ width:30px; width:clamp(24px,8cqi,32px); height:auto }
.pass-brand b{ font-family:var(--disp); font-weight:700; letter-spacing:.2em;
  font-size:13px; font-size:clamp(11px,3.5cqi,15px) }
.pass-role{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 8px;
  border-radius:999px; border:1px solid rgba(var(--pc-rgb),.32); background:rgba(var(--pc-rgb),.07);
  color:var(--pc); font-size:10.5px; font-size:clamp(9px,2.7cqi,11.5px); font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; transition:color .3s, border-color .3s, background-color .3s }
.pass-role > span{ display:inline-flex }
.pass-role .ic{ width:13px; height:13px; stroke-width:2 }

.pass-mid{ align-self:end; display:grid; gap:4px; gap:1.2cqi; min-width:0 }
.pass-lab{ font-size:9.5px; font-size:clamp(8.5px,2.4cqi,10.5px); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(234,243,239,.42);
  transition:color .2s var(--e-micro) }
.pass-venue{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  font-family:var(--disp); font-weight:600; letter-spacing:-.01em; line-height:1.1;
  font-size:30px; font-size:clamp(18px,8.2cqi,38px); min-height:1.1em; overflow-wrap:anywhere }
.pass-venue[data-len="m"]{ font-size:clamp(16px,6.8cqi,32px) }
.pass-venue[data-len="l"]{ font-size:clamp(15px,5.6cqi,26px) }
.pass-venue[data-len="xl"]{ font-size:clamp(14px,4.6cqi,21px) }
.pass-ph{ color:rgba(234,243,239,.2) }
/* Каретка — только пока поле названия в фокусе: карта пишется у вас на
   глазах. Мигает, потому что это ввод, а не украшение. */
.pass-venue.is-focus .pass-v::after{ content:""; display:inline-block; width:.07em; height:.9em;
  margin:0 .06em; vertical-align:-.1em; border-radius:1px; background:var(--pc);
  animation:pass-caret 1.06s steps(1) infinite }
@keyframes pass-caret{ 50%{ opacity:0 } }

.pass-bot{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.3fr) auto;
  gap:14px; gap:4cqi; align-items:end }
.pass-cell{ display:grid; gap:3px; gap:.9cqi; min-width:0 }
.pass-val{ font-size:13.5px; font-size:clamp(11px,3.5cqi,15px); font-weight:650;
  color:rgba(234,243,239,.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .2s var(--e-micro) }
.pass-cell.is-focus .pass-val{ color:var(--pc) }
.pass-cell.is-focus .pass-lab{ color:rgba(var(--pc-rgb),.75) }
@container (max-width:330px){
  .pass-since{ display:none }
  .pass-bot{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) }
}

.pass-foot{ display:flex; align-items:center; gap:10px; gap:3cqi; padding-top:10px; padding-top:2.8cqi;
  border-top:1px solid rgba(234,243,239,.08) }
.pass-segs{ display:flex; gap:4px }
.pass-segs i{ width:16px; width:clamp(11px,4.4cqi,20px); height:3px; border-radius:2px;
  background:rgba(234,243,239,.14);
  transition:background-color .35s var(--e-micro), box-shadow .35s var(--e-micro) }
.pass-segs i.is-on{ background:var(--pc); box-shadow:0 0 10px rgba(var(--pc-rgb),.45) }
.pass-st{ display:inline-flex; align-items:center; gap:6px; color:rgba(234,243,239,.5);
  font-size:10px; font-size:clamp(8.5px,2.6cqi,11px); font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; white-space:nowrap; transition:color .3s var(--e-micro) }
.pass-lock{ width:13px; height:13px; stroke-width:2.1 }
.pass[data-st="ready"] .pass-st,.pass[data-st="open"] .pass-st,.pass[data-st="code"] .pass-st{ color:var(--pc) }
.pass-no{ margin-left:auto; font-size:11px; font-size:clamp(9.5px,2.8cqi,12px);
  color:rgba(234,243,239,.55); letter-spacing:.06em }

/* готова — кромка теплеет; открыта — светится лаймом */
.pass[data-st="ready"] .pass-face{ border-color:rgba(var(--pc-rgb),.28) }
.pass.is-open .pass-face{ border-color:rgba(var(--pc-rgb),.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(var(--pc-rgb),.12),
             0 30px 80px -34px rgba(var(--pc-rgb),.42), 0 14px 28px -18px rgba(0,0,0,.6) }

/* оборот: QR на бумаге и что с ним делать */
.pass-back{ transform:rotateY(180deg) translateZ(0); display:grid;
  grid-template-columns:auto minmax(0,1fr); align-items:center;
  gap:20px; gap:5.6cqi; padding:22px; padding:6cqi }
.pass-qr{ width:150px; width:40cqi; aspect-ratio:1; border-radius:14px; border-radius:3.6cqi; overflow:hidden;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.75) }
.pass-qr-svg{ display:block; width:100%; height:100% }
.qr-paper,.qr-plate{ fill:var(--paper) }
.qr-ink{ color:var(--paper-ink) }
/* Капсулы — ровно .9 модуля: зазор между рядами виден глазу, а сканер
   по-прежнему читает модуль сплошным. «Глаза» квадратные НАМЕРЕННО: со
   скруглёнными углами OpenCV-детектор не находил их вовсе (проверено
   рендером и декодированием на 146–600 px, 12.10.2026). */
.qr-dots{ fill:none; stroke:var(--paper-ink); stroke-width:.9; stroke-linecap:round }
.qr-mark{ fill:none; stroke:var(--acc-d); stroke-width:.66; stroke-linejoin:round }
.pass-back-t{ position:relative; z-index:2; display:grid; gap:6px; gap:2cqi; align-content:center; min-width:0 }
.pass-back-t > b{ font-family:var(--disp); font-weight:600; letter-spacing:-.01em; line-height:1.15;
  font-size:17px; font-size:clamp(13px,4.6cqi,20px) }
.pass-back-t > span{ color:var(--muted); font-size:12.5px; font-size:clamp(10.5px,3.2cqi,13.5px); line-height:1.45 }
.pass-back-login{ display:grid; gap:3px; margin-top:4px; padding-top:9px; padding-top:2.6cqi;
  border-top:1px solid rgba(234,243,239,.08) }
.pass-back-login b{ color:var(--pc); font-size:14px; font-size:clamp(11.5px,3.6cqi,15px) }

.dm-flip{ appearance:none; border:0; background:none; cursor:pointer; padding:6px 2px;
  display:inline-flex; align-items:center; gap:8px; color:var(--muted);
  font:600 13.5px/1 Manrope, sans-serif; transition:color .15s var(--e-micro) }
.dm-flip:hover{ color:var(--ink) }
.dm-flip-ic{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .5s var(--e-reveal) }
.dm-flip:hover .dm-flip-ic{ transform:rotate(-200deg) }

/* ═══════════════════════════ КАБИНЕТ ОТКРЫТ ═══════════════════════════ */
.dm-ok-top{ display:flex; align-items:center; gap:14px }
.dm-ok-badge{ display:grid; place-items:center; width:56px; height:56px; flex:none; border-radius:50%;
  background:var(--cta); color:var(--cta-ink); box-shadow:0 14px 34px -14px var(--cta-glow) }
.dm-ok-badge .ic{ width:24px; height:24px; stroke-width:2.2 }
.dm-ok-k{ margin:0 }
.dm-ok-no{ margin-left:8px; color:var(--dim); letter-spacing:.06em }
.dm-ok-t{ font-family:var(--disp); font-weight:700; letter-spacing:-.01em; line-height:1.08;
  font-size:clamp(26px,3.1vw,48px); max-width:18ch; outline:none }
.dm-ok-v{ color:var(--cta) }
.dm-ok-l{ max-width:54ch }
.dm-ok-p{ color:var(--ink); white-space:nowrap }
.dm-get-k{ margin-top:4px }
/* Главная дверь — во всю ширину и лаймом, две другие — рядом под ней: человек
   видит, куда жать, а запасные двери не спорят с главной. */
.dm-get{ display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)) }
.dm-app.is-main{ grid-column:1 / -1; order:-1; padding:16px 18px 16px 14px }
.dm-app.is-main .dm-app-t b{ font-size:18px }
.dm-app{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px;
  padding:14px 14px 14px 12px; border-radius:16px; color:var(--ink);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  transition:border-color .18s var(--e-micro), background-color .18s var(--e-micro),
             transform .18s var(--e-micro), opacity .2s var(--e-micro) }
.dm-app:hover{ border-color:var(--cta-edge); background:rgba(255,255,255,.07); transform:translate3d(0,-2px,0) }
.dm-app-ic{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08) }
.dm-app-ic .ic{ width:21px; height:21px; color:currentColor; stroke-width:1.7 }
.dm-play{ width:19px; height:19px; fill:currentColor; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round }
.dm-app-t{ display:grid; gap:2px; min-width:0 }
.dm-app-t small{ font-size:11.5px; font-weight:600; color:var(--dim); letter-spacing:.02em; line-height:1.3 }
.dm-app-t b{ font-size:16px; font-weight:800; letter-spacing:-.01em; white-space:nowrap }
.dm-app-go{ width:17px; height:17px; color:var(--cta); stroke-width:2 }
/* главная дверь — та, что подходит этому устройству */
.dm-app.is-main{ background:var(--cta); border-color:var(--cta); color:var(--cta-ink);
  box-shadow:0 16px 36px -18px var(--cta-glow) }
.dm-app.is-main:hover{ background:var(--cta); filter:brightness(1.04) }
.dm-app.is-main .dm-app-ic{ background:rgba(21,32,11,.10); border-color:rgba(21,32,11,.14) }
.dm-app.is-main .dm-app-go{ color:var(--cta-ink) }
.dm-app.is-main small{ color:var(--punch-mut) }
.dm-open{ justify-self:start }
.dm-ok-next{ display:grid; gap:14px; margin-top:4px; padding-top:clamp(18px,1.8vw,26px);
  border-top:1px solid rgba(255,255,255,.10) }
.dm-help{ color:var(--muted); font-size:14.5px }
.dm-leadfail{ font-size:14px; line-height:1.5; color:var(--muted); padding:12px 14px; border-radius:12px;
  background:var(--gold-soft); border:1px solid var(--gold-edge) }
.dm-leadfail a{ color:var(--ink); font-weight:700 }
.dm-help a{ color:var(--ink); font-weight:700; border-bottom:1px solid rgba(255,255,255,.3) }
.dm-help a:hover{ color:var(--cta); border-bottom-color:var(--cta) }

/* вход экрана: значок выскакивает, строки поднимаются по очереди */
.dm-ok.is-in > *{ animation:dm-rise .6s var(--e-reveal) both }
.dm-ok.is-in > :nth-child(2){ animation-delay:.06s }
.dm-ok.is-in > :nth-child(3){ animation-delay:.12s }
.dm-ok.is-in > :nth-child(4){ animation-delay:.18s }
.dm-ok.is-in > :nth-child(5){ animation-delay:.22s }
.dm-ok.is-in > :nth-child(n+6){ animation-delay:.28s }
.dm-ok.is-in .dm-ok-badge{ animation:dm-pop .55s var(--e-reveal) .05s both }
@keyframes dm-rise{ from{ opacity:0; transform:translate3d(0,16px,0) } to{ opacity:1; transform:none } }
@keyframes dm-pop{ from{ transform:scale(.5); opacity:0 } to{ transform:none; opacity:1 } }

@media (max-width:560px){
  .dm-roles{ grid-template-columns:1fr }
  .dm-role{ padding:11px 14px 11px 11px }
  .dm-role-ic{ width:40px; height:40px; border-radius:12px }
  .dm-drop{ padding:11px 12px 11px 11px; gap:11px }
  .dm-drop-ic{ width:40px; height:40px; border-radius:12px }
  .dm-opt{ padding:3px 8px; font-size:11px }
  .dm-get{ grid-template-columns:1fr }
}

@media (prefers-reduced-motion: reduce){
  .dm,.pass-in{ transition:none }
  .pass.is-opening .pass-sweep{ animation:none }
  .pass-venue.is-focus .pass-v::after{ animation:none }
  .dm-ok.is-in > *,.dm-ok.is-in .dm-ok-badge{ animation:none }
  .dm-check.is-bad .dm-box{ animation:none }
}