/* ══════════════════════════════════════════════════════════════════════════
   VRV · Command Deck — слой доработки поверх vrv-theme-v2.css
   Только усиления (стекло, свечение, движение, состояния успеха, подсказки).
   Подключается ПОСЛЕДНИМ. Ничего не ломает: расширяет существующие классы,
   уважает prefers-reduced-motion. Токены берём из vrv-theme-v2.css.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --deck-glass-top: rgba(255,255,255,.045);
  --deck-glass-bot: rgba(255,255,255,.008);
  --deck-hi: rgba(255,255,255,.06);
  --deck-glow: 0 0 24px -6px rgba(34,211,238,.45);
  --deck-lift: 0 16px 40px -18px rgba(0,0,8,.75);
}

/* ── Плавный вход контента страницы ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  main.main > *{ animation: deckIn .42s var(--ease-spring) both; }
  main.main > *:nth-child(2){ animation-delay:.04s; }
  main.main > *:nth-child(3){ animation-delay:.08s; }
  @keyframes deckIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
}

/* ── Стекло на карточках (top-highlight + мягкая тень) ────────────────── */
.card, .st-card, .ws-card, .cc-sec, .cd-card{
  background:
    linear-gradient(180deg, var(--deck-glass-top), var(--deck-glass-bot)),
    var(--surface);
  box-shadow: inset 0 1px 0 var(--deck-hi), 0 10px 30px -20px rgba(0,0,8,.8);
  transition: transform var(--t-base) var(--ease-spring),
              box-shadow var(--t-base) ease,
              border-color var(--t-base) ease;
}
/* Подъём — только для действительно «живых» карточек */
.ws-card:hover, .cc-sec:hover, .cd-card:hover, .vrv-lift:hover{
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--deck-hi), var(--deck-lift);
  border-color: var(--border-strong);
}
.cc-sec.cc-danger:hover{ border-color: rgba(248,113,113,.4); }

/* ── Кнопки: свечение и «пружина» ────────────────────────────────────── */
.btn{ transition: background var(--t-fast) ease, border-color var(--t-fast) ease,
                  box-shadow var(--t-base) ease, transform var(--t-fast) var(--ease-spring); }
.btn--primary{
  box-shadow: 0 0 0 1px var(--accent-line) inset, 0 6px 18px -6px rgba(34,211,238,.4);
}
.btn--primary:hover{
  box-shadow: 0 0 0 1px var(--accent) inset, 0 10px 26px -6px rgba(34,211,238,.6), var(--deck-glow);
  transform: translateY(-1px);
}
.btn--primary:active{ transform: translateY(0) scale(.97); }
.btn:not(.btn--primary):hover{ transform: translateY(-1px); }

/* Мягкий блик по первичной кнопке при наведении */
@media (prefers-reduced-motion: no-preference){
  .btn--primary{ position:relative; overflow:hidden; }
  .btn--primary::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-130%); transition: none;
  }
  .btn--primary:hover::after{ animation: deckSheen .7s ease; }
  @keyframes deckSheen{ to{ transform: translateX(130%); } }
}

/* ── Флеш-сообщения Flask: стекло + въезд + иконка ────────────────────── */
main.main > div:has(> [class]) { /* контейнер flash оставляем как есть по разметке */ }
.vrv-flash{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 15px; border-radius: var(--r-2); font-size:13px; font-weight:500;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 var(--deck-hi), 0 10px 26px -16px rgba(0,0,8,.7);
  animation: flashIn .4s var(--ease-spring) both;
}
@keyframes flashIn{ from{ opacity:0; transform: translateY(-8px); } to{ opacity:1; transform:none; } }
.vrv-flash::before{ content:""; width:18px; height:18px; flex:0 0 auto; margin-top:1px;
  background: currentColor; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
.vrv-flash--ok{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.vrv-flash--err{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E"); }
.vrv-flash--warn{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }

/* ── Тосты (JS: vrvToast) ────────────────────────────────────────────── */
.vrv-toasts{
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  display:flex; flex-direction: column; gap:10px; max-width: min(360px, calc(100vw - 36px));
  pointer-events:none;
}
.vrv-toast{
  pointer-events:auto; display:flex; align-items:center; gap:11px;
  padding:12px 15px; border-radius: var(--r-2); font: 500 13.5px 'Geist', system-ui, sans-serif;
  color: var(--fg); background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 var(--deck-hi), 0 16px 40px -16px rgba(0,0,10,.85);
  backdrop-filter: blur(10px);
  animation: toastIn .42s var(--ease-spring) both;
}
.vrv-toast.--leaving{ animation: toastOut .3s ease forwards; }
@keyframes toastIn{ from{ opacity:0; transform: translateX(18px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes toastOut{ to{ opacity:0; transform: translateX(18px) scale(.96); } }
.vrv-toast__dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.vrv-toast--ok   .vrv-toast__dot{ background: var(--ok);     box-shadow:0 0 10px var(--ok); }
.vrv-toast--err  .vrv-toast__dot{ background: var(--danger); box-shadow:0 0 10px var(--danger); }
.vrv-toast--warn .vrv-toast__dot{ background: var(--warn);   box-shadow:0 0 10px var(--warn); }
.vrv-toast--info .vrv-toast__dot{ background: var(--accent); box-shadow:0 0 10px var(--accent); }
.vrv-toast__x{ margin-left:auto; opacity:.5; cursor:pointer; font-size:16px; line-height:1;
  background:none; border:none; color:inherit; padding:0 2px; transition:opacity .2s; }
.vrv-toast__x:hover{ opacity:1; }

/* ── Оверлей успеха (JS: vrvSuccess) — большой момент ─────────────────── */
.vrv-succ{
  position: fixed; inset:0; z-index: 10000; display:grid; place-items:center;
  background: rgba(6,8,14,.62); backdrop-filter: blur(4px);
  animation: succFade .28s ease both;
}
@keyframes succFade{ from{opacity:0;} to{opacity:1;} }
.vrv-succ.--leaving{ animation: succFade .28s ease reverse forwards; }
.vrv-succ__card{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:34px 40px; border-radius: var(--r-4);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--surface-2);
  border:1px solid var(--accent-line);
  box-shadow: inset 0 1px 0 var(--deck-hi), 0 30px 80px -30px rgba(0,0,12,.9), var(--deck-glow);
  animation: succPop .5s var(--ease-spring) both;
}
@keyframes succPop{ from{ opacity:0; transform: translateY(10px) scale(.94);} to{ opacity:1; transform:none;} }
.vrv-succ__msg{ font: 600 17px 'Cabinet Grotesk', system-ui, sans-serif; letter-spacing:-.01em; color: var(--fg); }
.vrv-succ__sub{ font-size:13px; color: var(--muted); margin-top:-8px; }

/* Рисующаяся галочка — общий компонент .vrv-check */
.vrv-check{ width:64px; height:64px; }
.vrv-check .ring{ stroke: var(--accent); stroke-width:3; fill:none;
  stroke-dasharray:170; stroke-dashoffset:170;
  filter: drop-shadow(0 0 6px rgba(34,211,238,.7)); }
.vrv-check .tick{ stroke: var(--accent); stroke-width:4; fill:none;
  stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:48; stroke-dashoffset:48; }
@media (prefers-reduced-motion: no-preference){
  .vrv-check .ring{ animation: ringDraw .5s var(--ease-spring) forwards; }
  .vrv-check .tick{ animation: tickDraw .4s .34s var(--ease-spring) forwards; }
}
@media (prefers-reduced-motion: reduce){
  .vrv-check .ring, .vrv-check .tick{ stroke-dashoffset:0; }
}
@keyframes ringDraw{ to{ stroke-dashoffset:0; } }
@keyframes tickDraw{ to{ stroke-dashoffset:0; } }
/* Вариант успеха «лайм» (деньги/подтверждение) */
.vrv-check--ok .ring, .vrv-check--ok .tick{ stroke: var(--ok); }
.vrv-check--ok .ring{ filter: drop-shadow(0 0 6px rgba(163,230,53,.6)); }
.vrv-succ--ok .vrv-succ__card{ border-color: rgba(163,230,53,.4);
  box-shadow: inset 0 1px 0 var(--deck-hi), 0 30px 80px -30px rgba(0,0,12,.9), 0 0 24px -6px rgba(163,230,53,.4); }

/* ── Подсказки (data-tip, CSS-only) ──────────────────────────────────── */
.vrv-hint{ position: relative; display:inline-flex; align-items:center; gap:5px; cursor: help;
  color: var(--accent); border-bottom:1px dashed var(--accent-line); }
.vrv-hint__i{ display:inline-grid; place-items:center; width:15px; height:15px; border-radius:50%;
  border:1px solid var(--accent-line); font: 700 10px 'Geist', sans-serif; }
.vrv-hint[data-tip]::after{
  content: attr(data-tip); position:absolute; bottom: calc(100% + 9px); left:0;
  width: max-content; max-width: 250px; padding:9px 12px; border-radius: var(--r-2);
  background: var(--surface-3); color: var(--fg-2); border:1px solid var(--border-strong);
  font: 400 12px 'Geist', system-ui, sans-serif; line-height:1.45; text-align:left;
  box-shadow: 0 18px 44px -18px rgba(0,0,10,.85);
  opacity:0; visibility:hidden; transform: translateY(4px); transition: all var(--t-base) ease; z-index:50;
}
.vrv-hint[data-tip]:hover::after, .vrv-hint[data-tip]:focus-visible::after{
  opacity:1; visibility:visible; transform:none;
}

/* ── Статус-точка «онлайн» с пульсом (переиспользуемая) ───────────────── */
.vrv-pulse{ position:relative; width:9px; height:9px; border-radius:50%; background: var(--ok); display:inline-block; }
@media (prefers-reduced-motion: no-preference){
  .vrv-pulse::before{ content:""; position:absolute; inset:0; border-radius:50%; background: var(--ok);
    animation: pulse 1.8s ease-out infinite; }
  @keyframes pulse{ 0%{ transform:scale(1); opacity:.6; } 70%,100%{ transform:scale(2.6); opacity:0; } }
}
.vrv-pulse--off{ background: var(--muted-2); }
.vrv-pulse--off::before{ display:none; }

/* ── Пикер аккаунтов: сетка аватар-тайлов (вход на киоске + «действую как») ── */
.vrv-pick{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:9px; margin-top:4px; }
.vrv-pick__tile{ appearance:none; cursor:pointer; text-align:center; padding:10px 6px 9px; position:relative;
  border-radius:13px; color:var(--fg); text-decoration:none; display:block;
  background:linear-gradient(180deg, var(--deck-glass-top), var(--deck-glass-bot)), var(--surface);
  border:1px solid var(--border); box-shadow:inset 0 1px 0 var(--deck-hi);
  transition:transform .28s var(--ease-spring), box-shadow .28s ease, border-color .28s ease; }
.vrv-pick__tile:hover{ transform:translateY(-3px);
  box-shadow:inset 0 1px 0 var(--deck-hi), 0 16px 34px -20px rgba(0,0,12,.9), 0 0 0 1px var(--accent-line); }
.vrv-pick__tile:active{ transform:translateY(-1px) scale(.98); }
.vrv-pick__tile:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--accent), 0 0 18px -6px var(--accent); }
.vrv-pick__av{ width:46px; height:46px; border-radius:50%; margin:0 auto 7px; display:block; object-fit:cover;
  background:var(--surface-2); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 0 0 2px rgba(34,211,238,.12), 0 6px 16px -10px rgba(0,0,12,.85);
  transition:box-shadow .28s ease, transform .28s var(--ease-spring); }
.vrv-pick__tile:hover .vrv-pick__av{ transform:scale(1.06);
  box-shadow:0 0 0 2px rgba(34,211,238,.45), 0 0 18px -4px rgba(34,211,238,.55); }
/* аватар-заглушка с инициалами (если нет картинки) */
.vrv-pick__av--ini{ display:grid; place-items:center; font:700 17px 'Cabinet Grotesk','Geist',sans-serif;
  color:#bff3fb; background:linear-gradient(135deg, rgba(34,211,238,.22), rgba(168,85,247,.22)); }
.vrv-pick__nm{ font:600 12px 'Geist',sans-serif; letter-spacing:-.01em; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vrv-pick__role{ font-size:10px; color:var(--muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vrv-pick__tile.--sel{ border-color:var(--accent);
  box-shadow:inset 0 1px 0 var(--deck-hi), 0 0 0 1px var(--accent), 0 0 26px -6px var(--accent); }
.vrv-pick__tile.--sel .vrv-pick__av{ box-shadow:0 0 0 3px rgba(34,211,238,.5), 0 0 22px -4px rgba(34,211,238,.6); }
.vrv-pick__tile.--off .vrv-pick__av--ini{ background:var(--surface-3); color:var(--muted); }
@media (prefers-reduced-motion: reduce){ .vrv-pick__tile,.vrv-pick__av{ transition:none; } }

/* ── Флайаут выбора пользователя (кнопка → выпадающий столбец, как в Windows) ── */
.vrv-fly{ position:relative; }
.vrv-fly__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(180deg, var(--deck-glass-top), var(--deck-glass-bot)), var(--surface-2);
  border:1px solid var(--border-strong); color:var(--fg); border-radius:12px; padding:13px 15px;
  font:600 14px 'Geist',sans-serif; cursor:pointer;
  transition:border-color .2s ease, box-shadow .25s ease, transform .12s var(--ease-spring); }
.vrv-fly__btn:hover{ border-color:var(--accent-line); box-shadow:0 0 18px -8px var(--accent); }
.vrv-fly__btn:active{ transform:scale(.99); }
.vrv-fly__btn .lbl{ display:inline-flex; align-items:center; gap:9px; }
.vrv-fly__btn .chev{ color:var(--muted); transition:transform .3s var(--ease-spring); }
.vrv-fly.--open .vrv-fly__btn{ border-color:var(--accent-line); }
.vrv-fly.--open .vrv-fly__btn .chev{ transform:rotate(180deg); }
.vrv-fly__panel{ overflow:hidden; max-height:0; opacity:0; margin-top:0;
  transition:max-height .32s var(--ease-spring), opacity .24s ease, margin-top .2s ease; }
.vrv-fly.--open .vrv-fly__panel{ max-height:360px; opacity:1; margin-top:8px; overflow-y:auto; }
.vrv-fly__row{ width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  background:linear-gradient(180deg, var(--deck-glass-top), var(--deck-glass-bot)), var(--surface);
  border:1px solid var(--border); color:var(--fg); border-radius:12px; padding:9px 12px; margin-bottom:7px;
  cursor:pointer; transition:transform .18s var(--ease-spring), border-color .2s ease, box-shadow .2s ease; }
.vrv-fly__row:last-child{ margin-bottom:0; }
.vrv-fly__row:hover{ transform:translateX(3px); border-color:var(--accent-line);
  box-shadow:0 0 0 1px var(--accent-line), 0 0 18px -8px var(--accent); }
.vrv-fly__row:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.vrv-fly__row img{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:1px solid rgba(255,255,255,.10); box-shadow:0 0 0 2px rgba(34,211,238,.12); }
.vrv-fly__row .nm{ font:600 13.5px 'Geist',sans-serif; letter-spacing:-.01em; }
.vrv-fly__row .rl{ font-size:11px; color:var(--muted); margin-top:1px; }
.vrv-fly__row .go{ margin-left:auto; color:var(--muted-2); font-size:16px; transition:transform .2s var(--ease-spring); }
.vrv-fly__row:hover .go{ transform:translateX(3px); color:var(--accent); }

/* Крупный аватар выбранного (в панели ПИН/пароля) */
.vrv-pick__hero{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:6px; }
.vrv-pick__hero img,.vrv-pick__hero .vrv-pick__av--ini{ width:72px; height:72px; }

/* ── Мелочи: фокус-кольцо, tabular-nums на суммах, аккуратные ссылки ──── */
.vrv-num, .g-cash, .cc-mono, .st-mono{ font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════════
   ФОРМЫ — единый вид полей по всей админке (было: голые дефолтные инпуты).
   Поднимает .st-input/.gf-input и любые «сырые» input/select/textarea.
   ══════════════════════════════════════════════════════════════════════════ */
.st-input, .gf-input,
input[type="text"], input[type="number"], input[type="tel"],
input[type="email"], input[type="password"], input[type="search"],
input[type="url"], input[type="date"], input[type="time"],
input[type="datetime-local"], input:not([type]),
select, textarea{
  width:100%;
  min-height:44px;                       /* удобно для тача */
  padding:11px 13px;
  font:500 15px/1.3 'Geist', system-ui, sans-serif;
  color:var(--fg);
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  border-radius:var(--r-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
  -webkit-appearance:none; appearance:none;
}
textarea{ min-height:88px; line-height:1.5; resize:vertical; padding-top:10px; }
select{
  padding-right:38px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.st-input::placeholder, .gf-input::placeholder,
input::placeholder, textarea::placeholder{ color:var(--muted-2); opacity:1; }

.st-input:hover, .gf-input:hover,
input:hover:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select:hover, textarea:hover{ border-color:rgba(255,255,255,.16); }

.st-input:focus, .gf-input:focus,
input:focus:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select:focus, textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--surface-3);
  box-shadow:0 0 0 3px var(--accent-soft-2), var(--deck-glow);
}
.st-input:disabled, input:disabled, select:disabled, textarea:disabled{
  opacity:.5; cursor:not-allowed;
}
input[aria-invalid="true"], .st-input.--err, .gf-input.--err{
  border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft);
}

/* Подписи полей */
.st-field, .gf-field{
  display:block; margin-bottom:6px;
  font:600 12.5px/1.2 'Geist', sans-serif; letter-spacing:.01em;
  color:var(--fg-2); text-transform:none;
}

/* Нативная кнопка выбора файла */
input[type="file"]{
  font:500 14px 'Geist', sans-serif; color:var(--muted);
  max-width:100%;
}
input[type="file"]::file-selector-button{
  margin-right:12px; padding:9px 16px;
  font:600 13.5px 'Geist', sans-serif; cursor:pointer;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent-line); border-radius:var(--r-2);
  transition:background .16s ease, border-color .16s ease, transform .12s var(--ease-spring);
}
input[type="file"]::file-selector-button:hover{
  background:var(--accent-soft-2); border-color:var(--accent); transform:translateY(-1px);
}

/* Чекбоксы и радио — фирменный цвет + размер под палец */
input[type="checkbox"], input[type="radio"]{
  width:19px; height:19px; accent-color:var(--accent); cursor:pointer;
  vertical-align:-3px; margin-right:6px;
}
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]){ cursor:pointer; }

/* ══════════════════════════════════════════════════════════════════════════
   КНОПКА КОПИРОВАНИЯ ТЕЛЕФОНА — навешивается JS-ом рядом с номером.
   ══════════════════════════════════════════════════════════════════════════ */
.vrv-copy{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-left:6px; padding:0;
  vertical-align:middle; flex:0 0 auto;
  color:var(--muted); background:var(--surface-2);
  border:1px solid var(--border-strong); border-radius:var(--r-1);
  cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:color .15s ease, border-color .15s ease, background .15s ease, transform .12s var(--ease-spring);
}
.vrv-copy svg{ width:14px; height:14px; display:block; }
.vrv-copy:hover{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.vrv-copy:active{ transform:scale(.9); }
.vrv-copy:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft-2); }
.vrv-copy.--done{ color:var(--ok); border-color:rgba(163,230,53,.4); background:var(--ok-soft); }

/* ══════════════════════════════════════════════════════════════════════════
   АНИМАЦИЯ ПРИКЛАДЫВАНИЯ КАРТЫ (мини-сцена): карта прилетает к считывателю,
   тап → волны NFC → считыватель загорается зелёным → галочка. window.vrvCardTap.
   ══════════════════════════════════════════════════════════════════════════ */
.vrv-tap{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  background:rgba(6,9,15,.74); backdrop-filter:blur(7px) saturate(1.1); animation:tapBg .25s ease both; }
@keyframes tapBg{ from{opacity:0} to{opacity:1} }
.vrv-tap.--leaving{ animation:tapBgOut .3s ease both; }
@keyframes tapBgOut{ to{opacity:0} }
.vrv-tap__card{ background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--border-strong); border-radius:var(--r-4); padding:24px 34px 22px; text-align:center;
  box-shadow:var(--deck-lift),0 0 46px -14px rgba(34,211,238,.45); animation:tapPop .42s var(--ease-spring) both; }
@keyframes tapPop{ from{opacity:0; transform:translateY(12px) scale(.96)} to{opacity:1;transform:none} }

.vrv-tap__scene{ position:relative; width:210px; height:184px; margin:0 auto 8px; }

/* Считыватель */
.vrv-tap__reader{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  width:152px; height:54px; border-radius:15px;
  background:linear-gradient(180deg,#1b2130,#0d1017); border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06),0 14px 28px -14px #000;
  transition:border-color .3s ease, box-shadow .3s ease; }
.vrv-tap__zone{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  width:60px; height:26px; border-radius:8px; background:radial-gradient(ellipse,var(--accent-soft-2),transparent 70%);
  box-shadow:0 0 0 1px var(--accent-line) inset; transition:all .3s ease; }
.vrv-tap.--ok .vrv-tap__reader{ animation:tapReaderOk .55s ease .4s both; }
@keyframes tapReaderOk{ 0%{border-color:rgba(255,255,255,.12)}
  50%{border-color:var(--ok); box-shadow:0 0 30px -4px var(--ok),inset 0 2px 0 rgba(255,255,255,.06)}
  100%{border-color:rgba(163,230,53,.55); box-shadow:0 0 16px -8px var(--ok),inset 0 2px 0 rgba(255,255,255,.06)} }
.vrv-tap.--ok .vrv-tap__zone{ background:radial-gradient(ellipse,rgba(163,230,53,.32),transparent 70%);
  box-shadow:0 0 0 1px rgba(163,230,53,.5) inset; }

/* Волны NFC — вверх от зоны считывателя, в момент касания */
.vrv-tap__ring{ position:absolute; left:50%; bottom:41px; transform:translate(-50%,50%);
  width:42px; height:42px; border-radius:50%; border:2px solid var(--accent); opacity:0; }
.vrv-tap.--play .vrv-tap__ring{ animation:tapRing 1s ease-out .5s 2; }
.vrv-tap.--play .vrv-tap__ring:nth-child(3){ animation-delay:.75s; }
.vrv-tap.--play .vrv-tap__ring:nth-child(4){ animation-delay:1s; }
@keyframes tapRing{ 0%{opacity:.7;transform:translate(-50%,50%) scale(.4)} 100%{opacity:0;transform:translate(-50%,50%) scale(2.4)} }

/* Тень-контакт под картой на считывателе (появляется в момент касания) */
.vrv-tap__contact{ position:absolute; left:50%; top:120px; transform:translateX(-50%) scaleX(.4);
  width:110px; height:14px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,6,.6),transparent 70%);
  opacity:0; }
.vrv-tap.--play .vrv-tap__contact{ animation:tapContact 1.5s ease both; }
@keyframes tapContact{ 0%,18%{opacity:0;transform:translateX(-50%) scaleX(.3)}
  24%{opacity:.85;transform:translateX(-50%) scaleX(1)} 64%{opacity:.85;transform:translateX(-50%) scaleX(1)}
  100%{opacity:0;transform:translateX(-50%) scaleX(.5)} }

/* Карта — опускается, ЛОЖИТСЯ на считыватель (перекрывает его край), затем уходит */
.vrv-tap__nfccard{ position:absolute; left:50%; top:0; transform:translateX(-50%) translateY(50px);
  width:120px; height:76px; border-radius:13px;
  background:linear-gradient(135deg,var(--accent) 0%,#3b82f6 52%,var(--vi) 100%);
  box-shadow:0 10px 20px -9px rgba(0,0,8,.5),inset 0 1px 0 rgba(255,255,255,.4); overflow:hidden; opacity:0; }
.vrv-tap__nfccard::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.30) 50%,transparent 62%); }
.vrv-tap.--play .vrv-tap__nfccard{ animation:tapCardIn 1.5s var(--ease-spring) both; }
@keyframes tapCardIn{
  0%{ transform:translateX(-50%) translateY(-42px) rotate(-4deg); opacity:0; }
  22%{ transform:translateX(-50%) translateY(50px) rotate(0); opacity:1; }
  32%{ transform:translateX(-50%) translateY(55px) scaleY(.94); }
  44%{ transform:translateX(-50%) translateY(50px) scaleY(1); }
  66%{ transform:translateX(-50%) translateY(50px); opacity:1; }
  100%{ transform:translateX(-50%) translateY(20px); opacity:0; } }
.vrv-tap__chip{ position:absolute; left:16px; top:22px; width:22px; height:16px; border-radius:4px;
  background:linear-gradient(135deg,#ffe08a,#c9a227); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.vrv-tap__waves{ position:absolute; right:13px; top:18px; width:22px; height:22px; color:rgba(255,255,255,.92); }

/* Галочка — по центру, после того как карта ушла (без наложения) */
.vrv-tap__check{ position:absolute; left:50%; top:78px; transform:translate(-50%,-50%) scale(.5); width:62px; height:62px; opacity:0; }
.vrv-tap.--ok .vrv-tap__check{ animation:tapCheck .5s var(--ease-spring) .6s both; }
@keyframes tapCheck{ from{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1.12)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
.vrv-tap__check circle{ fill:var(--ok); }
.vrv-tap__check path{ fill:none; stroke:#0a0d14; stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26; stroke-dashoffset:26; }
.vrv-tap.--ok .vrv-tap__check path{ animation:tapTick .32s ease .9s both; }
@keyframes tapTick{ to{stroke-dashoffset:0} }

.vrv-tap__msg{ font:700 18px 'Cabinet Grotesk','Geist',sans-serif; letter-spacing:-.01em; color:var(--fg); }
.vrv-tap__sub{ font:500 13px 'Geist',sans-serif; color:var(--muted); margin-top:3px; }

@media (prefers-reduced-motion: reduce){
  .vrv-tap__nfccard,.vrv-tap__ring,.vrv-tap__reader,.vrv-tap__zone,.vrv-tap__check,.vrv-tap__check path{ animation:none!important; }
  .vrv-tap__nfccard{ opacity:0; }
  .vrv-tap__check{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  .vrv-tap__check path{ stroke-dashoffset:0; }
}

/* Инфо-заметка (напр. «фото через бота») — мягкий акцентный блок */
.cc-note{
  font:500 12.5px/1.5 'Geist', sans-serif; color:var(--fg-2);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:var(--r-2); padding:10px 12px; margin-top:2px;
}

/* Номер + кнопка — всегда в одну строку, кнопка справа (не под номером) */
[data-vrv-copy-ready]{ white-space:nowrap; }
.g-phone[data-vrv-copy-ready], .bl-phone[data-vrv-copy-ready],
.gc-phone[data-vrv-copy-ready], .b-guest__phone[data-vrv-copy-ready],
.gphone[data-vrv-copy-ready]{ display:inline-flex; align-items:center; }
a{ transition: color var(--t-fast) ease; }

/* ══════════════════════════════════════════════════════════════════════════
   Неоновый тумблер вкл/выкл — фирменный стиль VRV (по макету владельца).
   Состояние: чекбокс :checked ИЛИ класс .is-on (для кнопок-сабмитов).
   ══════════════════════════════════════════════════════════════════════════ */
.vrv-switch{
  display:inline-flex; align-items:center; gap:12px; vertical-align:middle;
  cursor:pointer; user-select:none; line-height:1;
  font:600 13px 'Geist', sans-serif; color:var(--fg-2);
}
button.vrv-switch{ background:none; border:0; padding:0; margin:0; font:inherit; text-align:left; }
.vrv-switch__input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.vrv-switch__track{
  --sw-w:58px; --sw-h:30px; --sw-pad:3px;
  position:relative; flex:0 0 auto;
  width:var(--sw-w); height:var(--sw-h); border-radius:999px;
  background:#1c1114; border:1px solid rgba(255,80,92,.6);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6), 0 0 7px rgba(255,60,72,.35);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.vrv-switch__knob{
  position:absolute; top:var(--sw-pad); left:var(--sw-pad);
  width:calc(var(--sw-h) - var(--sw-pad)*2); height:calc(var(--sw-h) - var(--sw-pad)*2);
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #4a2830, #1a1013);
  box-shadow:inset 0 0 5px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.5), 0 0 4px rgba(255,60,72,.4);
  transition:left .3s cubic-bezier(.4,.15,.2,1), background .3s ease, box-shadow .3s ease;
}
.vrv-switch:hover .vrv-switch__track{ border-color:rgba(255,120,132,.9); }
/* ── ВКЛ (зелёный неон) ── */
.vrv-switch__input:checked ~ .vrv-switch__track,
.vrv-switch.is-on .vrv-switch__track{
  background:linear-gradient(100deg,#3df59e 0%,#17d47c 55%,#07b869 100%);
  border-color:rgba(150,255,196,.95);
  box-shadow:0 0 8px 1px rgba(45,230,140,.75), 0 0 18px 3px rgba(20,210,120,.42),
             inset 0 0 7px rgba(255,255,255,.28);
}
.vrv-switch__input:checked ~ .vrv-switch__track .vrv-switch__knob,
.vrv-switch.is-on .vrv-switch__track .vrv-switch__knob{
  left:calc(var(--sw-w) - var(--sw-h) + var(--sw-pad));
  background:radial-gradient(circle at 38% 32%, #ffffff, #d6ffe8 72%);
  box-shadow:0 0 11px 1px rgba(255,255,255,.85), 0 0 6px rgba(60,240,150,.9);
}
.vrv-switch__input:focus-visible ~ .vrv-switch__track{ outline:2px solid #25e08a; outline-offset:3px; }
/* подпись состояния: ВЫКЛ красная, ВКЛ зелёная */
.vrv-switch__state{ font:800 12px 'Geist', sans-serif; letter-spacing:.04em; color:#ff5b6a; transition:color .3s ease; }
.vrv-switch.is-on .vrv-switch__state,
.vrv-switch__input:checked ~ .vrv-switch__state{ color:#25e08a; }
@media (prefers-reduced-motion: reduce){ .vrv-switch__track, .vrv-switch__knob{ transition:none; } }
