/* VRpass — единое оформление для Telegram, VK и сайта.
   Дизайн-код взят у Люми: фирменная фиолетовая палитра, градиентная шапка со скруглённым низом
   и бликом, живой размытый фон, полупрозрачные плитки, жёлтая метка активного раздела.

   ПАЛИТРА — три переменные (--brand-1/2/3), переключается data-skin на <html>.
   ТЕМА — светлая/тёмная: от Telegram/VK/системы или вручную (data-theme="light|dark").
   ДВИЖЕНИЕ — живой фон и блики выключаются data-motion="off" и системным «уменьшить движение».
   ШИРОКИЙ ЭКРАН (веб-панель на компьютере) — нижняя панель становится боковым меню. */

/* ---------- палитры ---------- */
:root,
:root[data-skin="violet"] {
  --brand-1: #6C2BD9;            /* основной */
  --brand-2: #A45BF2;            /* светлый конец градиента */
  --brand-3: #C8FF3C;            /* салатовый неон — ТОЛЬКО мелкие акценты: метка раздела, точки, тонкие полосы */
}
:root[data-skin="pink"] {
  --brand-1: #D81E7A;
  --brand-2: #F25BA4;
  --brand-3: #FFD166;
}
:root {
  --amber: #FFC93C; --on-neon: #0E0927; --pink: #F0288F; --soft: #CDB4FF;
  /* салатовый неон: зелёный с жёлтыми вкраплениями */
  --lime-grad: linear-gradient(90deg, #8CFF3A 0%, #C8FF3C 55%, #F2FF4A 100%);
  --neon-glow: 0 0 14px color-mix(in srgb, var(--brand-3) 45%, transparent);
}

:root {
  --brand-grad: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
  --card-grad: linear-gradient(135deg, #4A1E8C 0%, var(--brand-1) 55%, var(--brand-2) 100%);

  --bg: var(--tg-theme-bg-color, #ffffff);
  --fg: var(--tg-theme-text-color, #15121d);
  --hint: var(--tg-theme-hint-color, #8b86a0);
  --link: var(--brand-1);
  --accent: var(--brand-1);
  --accent-fg: #ffffff;
  --accent-soft: color-mix(in srgb, var(--brand-1) 12%, transparent);
  --hl: var(--brand-1);          /* акцентный текст: в тёмной теме — светло-фиолетовый */

  --card: color-mix(in srgb, var(--brand-1) 6%, var(--tg-theme-secondary-bg-color, #f4f2fa));
  --sunk: color-mix(in srgb, var(--brand-1) 10%, var(--bg));
  --line: color-mix(in srgb, var(--brand-1) 22%, transparent);
  --line-soft: color-mix(in srgb, var(--brand-1) 11%, transparent);
  --sheet-bg: var(--bg);
  --shadow: 0 1px 2px rgba(30, 12, 60, .06), 0 10px 28px rgba(30, 12, 60, .10);
  --glow: 0 6px 18px color-mix(in srgb, var(--brand-1) 38%, transparent);
  --bg-strength: .62;

  --ok: #1f9d55;
  --warn: #b07600;
  --bad: #d63d4e;
  --ok-bg: color-mix(in srgb, var(--ok) 14%, transparent);
  --warn-bg: color-mix(in srgb, var(--amber) 34%, transparent);
  --bad-bg: color-mix(in srgb, var(--bad) 13%, transparent);

  --r-lg: 18px; --r-md: 13px; --r-sm: 10px;
  --gap: 10px; --pad: 16px;
  --nav-h: 62px;
  --side-w: 248px;
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));

  color-scheme: light dark;
}

/* тёмная тема: от системы/клиента и принудительно */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--tg-theme-bg-color, #110e1a);
    --fg: var(--tg-theme-text-color, #f3effd);
    --hint: var(--tg-theme-hint-color, #9c95b5);
    --card: color-mix(in srgb, var(--brand-2) 13%, var(--tg-theme-secondary-bg-color, #1b1726));
    --sunk: color-mix(in srgb, var(--brand-2) 16%, var(--bg));
    --line: color-mix(in srgb, var(--brand-2) 32%, transparent);
    --line-soft: color-mix(in srgb, var(--brand-2) 18%, transparent);
    --sheet-bg: color-mix(in srgb, var(--brand-2) 8%, var(--bg));
    --link: var(--soft); --warn: var(--amber); --hl: var(--soft);
    --accent-soft: color-mix(in srgb, var(--brand-2) 22%, transparent);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
    --bg-strength: .5;
  }
}
:root[data-theme="dark"] {
  --bg: #110e1a; --fg: #f3effd; --hint: #9c95b5;
  --card: color-mix(in srgb, var(--brand-2) 13%, #1b1726);
  --sunk: color-mix(in srgb, var(--brand-2) 16%, #110e1a);
  --line: color-mix(in srgb, var(--brand-2) 32%, transparent);
  --line-soft: color-mix(in srgb, var(--brand-2) 18%, transparent);
  --sheet-bg: color-mix(in srgb, var(--brand-2) 8%, #110e1a);
  --link: var(--soft); --warn: var(--amber); --hl: var(--soft);
  --accent-soft: color-mix(in srgb, var(--brand-2) 22%, transparent);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
  --bg-strength: .5;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #ffffff; --fg: #15121d; --hint: #8b86a0;
  --card: color-mix(in srgb, var(--brand-1) 6%, #f4f2fa);
  --sunk: color-mix(in srgb, var(--brand-1) 10%, #ffffff);
  --line: color-mix(in srgb, var(--brand-1) 22%, transparent);
  --line-soft: color-mix(in srgb, var(--brand-1) 11%, transparent);
  --sheet-bg: #ffffff;
  --link: var(--brand-1); --warn: #b07600; --hl: var(--brand-1);
  --accent-soft: color-mix(in srgb, var(--brand-1) 12%, transparent);
  --bg-strength: .62;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overscroll-behavior-y: contain; }
body {
  margin: 0; background: transparent; color: var(--fg);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: var(--tg-viewport-stable-height, 100vh);
}
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.015em; }
a { color: var(--link); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
[hidden] { display: none !important; }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* ---------- живой фон (как у Люми) ---------- */
.bg {
  position: fixed; inset: -25%; z-index: 0; pointer-events: none;
  opacity: var(--bg-strength);
  background:
    radial-gradient(30% 26% at 20% 14%, var(--brand-2), transparent 70%),
    radial-gradient(22% 20% at 84% 10%, var(--pink), transparent 70%),
    radial-gradient(34% 30% at 72% 86%, var(--brand-1), transparent 72%);
  filter: blur(54px) saturate(1.15);
  animation: bgfloat 13s ease-in-out infinite alternate;
  will-change: transform;
}
.bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(26% 22% at 70% 24%, var(--brand-1), transparent 72%),
    radial-gradient(30% 26% at 20% 76%, var(--brand-3), transparent 72%);
  filter: blur(42px);
  animation: bgfloat2 9s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bgfloat { from { transform: translate3d(-7%, -5%, 0) scale(1); } to { transform: translate3d(7%, 6%, 0) scale(1.14); } }
@keyframes bgfloat2 { from { transform: translate3d(6%, 4%, 0) scale(1.06); } to { transform: translate3d(-6%, -5%, 0) scale(1); } }
:root[data-motion="off"] .bg, :root[data-motion="off"] .bg::after,
:root[data-motion="off"] header::after { animation: none; }
:root[data-motion="off"] .bg { filter: blur(54px); }
@media (prefers-reduced-motion: reduce) {
  .bg, .bg::after, header::after, .pulse, .ses-timer.over { animation: none !important; }
}

#app { position: relative; z-index: 1; }

/* ---------- запуск ---------- */
.boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 24px; text-align: center; }
/* логотип VR PASS — svg: «V» и «PASS» цветом текста, «R» — фирменный #BF1687 */
svg.brand { display: block; height: 30px; width: auto; aspect-ratio: 204 / 56; color: var(--fg); flex: none; }
.boot svg.brand { height: 64px; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand-1); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { padding: 60px 0; display: grid; place-items: center; }

/* ---------- шапка ---------- */
header.hd {
  position: sticky; top: 0; z-index: 30; overflow: hidden; transform: translateZ(0);
  background: var(--brand-grad); color: #fff;
  padding: calc(env(safe-area-inset-top) + 12px) var(--pad) 13px;
  border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
  box-shadow: var(--glow);
}
header.hd::after {
  content: ""; position: absolute; inset: -40% -20%; pointer-events: none;
  background:
    radial-gradient(40% 60% at 90% 10%, color-mix(in srgb, var(--pink) 45%, transparent), transparent 70%),
    radial-gradient(30% 60% at 78% 105%, color-mix(in srgb, var(--brand-3) 50%, transparent), transparent 70%),
    radial-gradient(45% 70% at 10% 90%, rgba(255, 255, 255, .22), transparent 70%);
  animation: shine 8s ease-in-out infinite alternate;
}
@keyframes shine { from { transform: translate3d(-9%, -7%, 0); } to { transform: translate3d(10%, 8%, 0); } }
.hd-row { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.hd-bk {
  flex: none; width: 34px; height: 34px; border-radius: 50%; padding: 0 2px 0 0;
  background: rgba(255, 255, 255, .2); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px);
}
.hd-bk:active { transform: scale(.92); }
.hd-ttl { flex: 1; min-width: 0; }
.hd-ttl h1 { font-size: 20px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-sub { font-size: 12.5px; opacity: .88; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-act { display: flex; gap: 6px; flex: none; }
.hd-chip {
  font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 99px; white-space: nowrap;
  background: rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(6px);
}
.hd-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); color: #fff; }
.hd-ico .dot, .tab .dot {
  position: absolute; min-width: 17px; height: 17px; border-radius: 9px; background: var(--brand-3); color: var(--on-neon);
  font-size: 10px; font-weight: 800; line-height: 17px; padding: 0 4px; text-align: center;
}

/* ---------- содержимое ---------- */
#view { padding: 14px var(--pad) calc(var(--nav-h) + var(--safe-bottom) + 24px); max-width: 680px; margin: 0 auto; }
.no-tabbar #view { padding-bottom: calc(var(--safe-bottom) + 32px); }


/* ---------- нижняя панель разделов ---------- */
nav.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.7) blur(16px); -webkit-backdrop-filter: saturate(1.7) blur(16px);
  border-top: 1px solid var(--line-soft);
  padding-bottom: var(--safe-bottom);
}
.tab {
  flex: 1; height: var(--nav-h); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 11px; color: var(--hint); position: relative; text-align: center; line-height: 1.1;
}
.tab svg.i { width: 23px; height: 23px; }
.tab.on { color: var(--brand-1); font-weight: 650; }
.tab.on::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--lime-grad); box-shadow: var(--neon-glow);
}
.tab .dot { top: 7px; left: 50%; margin-left: 6px; }
.side-brand, .side-foot { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tab.on { color: var(--soft); } }
:root[data-theme="dark"] .tab.on { color: var(--soft); }

/* ---------- типографика и секции ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.page-title { font-size: 22px; font-weight: 750; letter-spacing: -.02em; margin: 4px 0 12px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 20px 2px 8px; gap: 8px; }
.section-title {
  margin: 20px 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--hint);
}
.section-head .section-title { margin: 0; }
.section-title:first-child { margin-top: 2px; }
.hint { color: var(--hint); font-size: 13px; }
.tiny { color: var(--hint); font-size: 12px; text-align: center; margin-top: 22px; opacity: .85; }
.mono, .num { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.neg { color: var(--bad); }
.pos { color: var(--ok); }

.panel {
  background: color-mix(in srgb, var(--card) 92%, transparent); border-radius: var(--r-lg);
  padding: 14px 15px; margin-bottom: var(--gap); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.panel h3 { font-size: 16px; margin-bottom: 12px; }
.note { background: var(--sunk); border-radius: var(--r-md); padding: 12px 14px; font-size: 14px; color: var(--hint); margin-top: 14px; }
.warn-box { background: var(--warn-bg); border-radius: var(--r-md); padding: 12px 14px; font-size: 14px; margin: 8px 0; }
.empty {
  text-align: center; color: var(--hint); padding: 26px 16px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--card) 80%, transparent); border: 1px dashed var(--line);
}
.empty svg.i { width: 30px; height: 30px; opacity: .6; display: block; margin: 0 auto 8px; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 16px; border-radius: var(--r-md);
  background: var(--sunk); color: var(--fg); font-weight: 600; font-size: 15px; line-height: 1.2;
  transition: transform .08s, opacity .15s;
}
.btn:active { transform: translateY(1px); opacity: .92; }
.btn:disabled { opacity: .42; pointer-events: none; box-shadow: none; }
.btn.primary { background: var(--brand-grad); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-1) 28%, transparent); }
.btn.ghost { background: transparent; color: var(--brand-1); border: 1px solid var(--line); }
.btn.yellow { background: var(--brand-3); color: var(--on-neon); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-3) 40%, transparent); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.danger-soft { background: var(--bad-bg); color: var(--bad); }
.btn.block { display: flex; width: 100%; }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn-row { display: flex; gap: 8px; margin-top: 10px; }
.btn-row > .btn { flex: 1; }
.link-btn { color: var(--link); font-weight: 600; padding: 8px 0; }
.link-btn.danger { color: var(--bad); }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--hint); flex: none; }
.icon-btn:active { background: var(--line-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.ghost { color: var(--soft); } }
:root[data-theme="dark"] .btn.ghost { color: var(--soft); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip {
  min-height: 36px; padding: 0 14px; border-radius: 99px; background: var(--sunk);
  font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-soft);
}
.chip.on { background: var(--brand-grad); color: #fff; border-color: transparent; }
.chip.small { min-height: 28px; padding: 0 10px; font-size: 12px; }
.chip:disabled { opacity: .35; text-decoration: line-through; }
.chip.pc { min-width: 44px; justify-content: center; border-radius: 12px; }
.chip.pc.dim { opacity: .35; }

.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.quick button {
  background: color-mix(in srgb, var(--card) 92%, transparent); border-radius: var(--r-md); padding: 12px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-align: center;
  backdrop-filter: blur(8px);
}
.quick svg.i { width: 26px; height: 26px; color: var(--brand-1); }
.quick button:active { transform: scale(.97); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .quick svg.i { color: var(--soft); } }
:root[data-theme="dark"] .quick svg.i { color: var(--soft); }

/* ---------- формы ---------- */
.field { display: block; margin-bottom: 12px; }
.field > span, .field-label { display: block; font-size: 13px; color: var(--hint); margin: 0 0 6px 2px; }
.field-label { margin-top: 16px; }
input[type=text], input[type=tel], input[type=number], input[type=search], input:not([type]), select, textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 85%, var(--bg)); outline: none;
  -webkit-appearance: none; appearance: none;
}
textarea { min-height: 72px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-1); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
.dur { display: flex; align-items: center; gap: 8px; }
.dur input { flex: 1; text-align: center; }
.dur em { font-style: normal; color: var(--hint); font-size: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.code-input { font-size: 26px; font-weight: 800; letter-spacing: .25em; text-align: center; font-variant-numeric: tabular-nums; }

.search { position: relative; margin-bottom: 12px; display: flex; gap: 8px; }
.search > svg.i { position: absolute; left: 13px; top: 13px; color: var(--hint); pointer-events: none; }
.search input { padding-left: 42px; }
.search .icon-btn { width: 46px; height: 46px; background: var(--brand-grad); color: #fff; border-radius: var(--r-md); }

.seg { display: flex; background: var(--sunk); border-radius: var(--r-md); padding: 3px; gap: 3px; }
.seg button { flex: 1; min-height: 40px; border-radius: var(--r-sm); font-weight: 650; text-align: center; color: var(--hint); }
.seg button.on { background: var(--bg); color: var(--fg); box-shadow: var(--shadow); }
.seg button:disabled { opacity: .3; }

.tariffs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tariff {
  position: relative; background: color-mix(in srgb, var(--card) 92%, transparent); border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md); padding: 10px; display: flex; flex-direction: column; gap: 2px; text-align: left;
}
.tariff b { font-size: 15px; }
.tariff span { font-size: 12px; color: var(--hint); }
.tariff.on { border-color: var(--brand-1); background: var(--accent-soft); }
.tariff span svg.i { width: 12px; height: 12px; margin-left: 2px; }
.hit {
  position: absolute; top: -9px; right: 6px; font: italic 800 11px/1 inherit; background: var(--brand-3); color: var(--on-neon);
  padding: 4px 7px; border-radius: 8px; transform: rotate(-3deg);
}
.tariff-more { margin-top: 8px; }

.bonus {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--card) 92%, transparent);
  border-radius: var(--r-md); margin-bottom: 6px; border: 1px solid var(--line-soft);
}
.bonus input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--brand-1); flex: none; margin: 0; }
.bonus-name { flex: 1; font-weight: 500; }
.bonus-name small { display: block; color: var(--hint); font-size: 12px; font-weight: 400; }
.bonus-min { display: flex; align-items: center; gap: 6px; color: var(--hint); font-size: 13px; }
.bonus-min input { width: 72px; min-height: 38px; padding: 6px 8px; text-align: center; }
.bonus:not(.on) .bonus-min { opacity: .4; }

.summary { background: color-mix(in srgb, var(--card) 92%, transparent); border-radius: var(--r-lg); padding: 14px 16px; margin: 16px 0; }
.summary > div { display: flex; justify-content: space-between; padding: 3px 0; }
.summary > div span { color: var(--hint); }
.summary .total:not(:first-child) { border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 9px; font-size: 17px; }
.summary .total span { color: var(--fg); }
.summary .hint { display: block; padding-top: 6px; }
.check-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; }
.check-row input { width: 20px; height: 20px; accent-color: var(--brand-1); }
details.more-opt summary { cursor: pointer; color: var(--link); font-weight: 600; font-size: 14px; padding: 8px 2px; list-style: none; }
details.more-opt summary::-webkit-details-marker { display: none; }

/* ---------- клубная карта с 3D-переворотом ---------- */
/* Лицо — только имя и остаток: карту показывают с экрана в клубе, лишнее видеть незачем.
   Номер и QR — на обороте, открываются нажатием.
   ПЕРЕВОРОТ БЕЗ ИЗНАНКИ: карта поворачивается до ребра (90°), в этот момент сторона меняется,
   и карта доворачивается обратно уже другой стороной. Двусторонний 3D (rotateY 180° +
   backface-visibility) WebKit на iPhone рисовал криво: зеркальный текст без фона и пустые кадры.
   Здесь изнанки нет вообще — видна всегда ровно одна сторона. Фазы ставит A.flip в app.js. */
.card3d { perspective: 900px; margin-bottom: 14px; }
.card3d-inner {
  position: relative; width: 100%; aspect-ratio: 1.62; max-height: 250px; container-type: inline-size;
  transition: transform .26s cubic-bezier(.2, .9, .3, 1.15); will-change: transform;
}
/* фаза 1: уводим к ребру с ускорением, чуть отдаляя */
.card3d.turn-out .card3d-inner { transform: rotateY(90deg) scale(.96); transition: transform .17s cubic-bezier(.5, 0, .9, .5); }
/* фаза 2: другая сторона появляется с противоположного ребра и докатывается с лёгким перелётом */
.card3d.turn-in .card3d-inner { transform: rotateY(-90deg) scale(.96); transition: none; }
.card3d.turn-out .card3d-face, .card3d.turn-in .card3d-face { filter: brightness(.82); }
.card3d-face {
  position: absolute; inset: 0; border-radius: 22px; padding: 18px 20px; color: #fff; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--card-grad);
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--brand-1) 85%, transparent);
  transition: filter .17s;
}
.card3d:not(.flipped) .card3d-back,
.card3d.flipped .card3d-face:not(.card3d-back) { visibility: hidden; }
.card3d-face::before {
  content: ""; position: absolute; inset: -30% -10%; pointer-events: none;
  background:
    radial-gradient(40% 50% at 92% 8%, color-mix(in srgb, var(--pink) 40%, transparent), transparent 70%),
    radial-gradient(34% 42% at 96% 104%, color-mix(in srgb, var(--brand-3) 30%, transparent), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(255, 255, 255, .18), transparent 70%);
}
.card3d-face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 14px);
}
.card3d-face > * { position: relative; z-index: 1; }
.card3d-back { flex-direction: row; align-items: center; gap: 5cqw; justify-content: flex-start; padding: 5cqw; }
.card3d.blocked .card3d-face { filter: grayscale(.9); }
.c3-top { display: flex; justify-content: space-between; align-items: center; }
.c3-top svg.brand { height: 28px; color: #fff; }
.card-placeholder .c3-top svg.brand { color: var(--fg); }
.c3-kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .78; }
.c3-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.c3-big { font-size: 22px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.c3-big b { font-size: 42px; font-weight: 800; letter-spacing: -.03em; }
.c3-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.c3-name { font-size: 18px; font-weight: 700; }
.c3-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, .18); backdrop-filter: blur(8px); padding: 6px 10px; border-radius: 99px;
}
.c3-badge svg.i { width: 16px; height: 16px; color: var(--brand-3); }
.c3-flip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .2); padding: 7px 12px; border-radius: 99px; backdrop-filter: blur(8px);
}
.c3-flip svg.i { width: 16px; height: 16px; }
/* оборот: размеры от ширины карты (cqw), чтобы номер и подсказка влезали на любом телефоне
   и при крупном системном шрифте Android */
.c3-qr { width: 46%; max-height: 100%; aspect-ratio: 1; flex: none; display: grid; place-items: center; }
.c3-qr svg { width: 100%; height: 100%; display: block; }
.c3-num { font-size: 26px; font-size: min(28px, 8.4cqw); font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.c3-back-info { display: flex; flex-direction: column; gap: 1.6cqw; min-width: 0; flex: 1; }
.c3-back-info .c3-label { font-size: min(11px, 3.2cqw); }
.c3-hint { font-size: 12px; font-size: min(13px, 3.6cqw); line-height: 1.3; opacity: .85; }
.c3-back-info .c3-flip { align-self: flex-start; margin-top: 1cqw; font-size: min(13px, 3.8cqw); padding: 1.6cqw 3.4cqw; }
.card-placeholder .card3d-face { background: color-mix(in srgb, var(--card) 92%, transparent); color: var(--fg); box-shadow: none; border: 1.5px dashed var(--line); }
.card-placeholder .card3d-face::before, .card-placeholder .card3d-face::after { display: none; }

.qr-box { background: color-mix(in srgb, var(--card) 92%, transparent); border-radius: 22px; padding: 22px 18px 16px; text-align: center; margin-bottom: 14px; backdrop-filter: blur(8px); }
.qr-box svg { width: 100%; max-width: 230px; height: auto; display: block; margin: 0 auto; }
.qr-num { font-size: 20px; font-weight: 800; letter-spacing: .08em; margin-top: 8px; }
/* QR: тонкая салатовая кайма и лёгкое свечение — изюминка, не мешает ни глазу, ни сканеру */
svg.vrqr { filter: drop-shadow(0 0 1px color-mix(in srgb, var(--brand-3) 70%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--brand-3) 30%, transparent)); }

/* ---------- списки ---------- */
.list { background: color-mix(in srgb, var(--card) 92%, transparent); border-radius: var(--r-lg); overflow: hidden; backdrop-filter: blur(8px); }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 15px; text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.list > :last-child { border-bottom: 0; }
button.row:active, a.row:active { background: var(--line-soft); }
.row-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; color: #fff; background: var(--brand-grad); position: relative;
}
.row-avatar.live::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--bg);
}
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 13px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub.wrap { white-space: normal; }
.row-right { text-align: right; flex: none; }
.row-right b { font-size: 15px; }
.row .chev { color: var(--brand-2); opacity: .75; }
.row-icon {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--brand-1) 14%, transparent); color: var(--brand-1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .row-icon { color: var(--soft); } }
:root[data-theme="dark"] .row-icon { color: var(--soft); }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--sunk); color: var(--hint); vertical-align: middle; }
.badge.live { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.danger { background: var(--bad-bg); color: var(--bad); }
.badge.club, .badge.brand { background: var(--accent-soft); color: var(--hl); }
.badge.single { background: color-mix(in srgb, var(--brand-2) 20%, transparent); color: var(--brand-2); }

/* значки входов: Telegram, VK, сайт */
.prov { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; font-size: 10px; font-weight: 800; color: #fff; vertical-align: middle; flex: none; }
.prov.tg { background: #2aabee; }
.prov.vk { background: #0077ff; }
.prov.web { background: var(--brand-1); }
.prov.demo { background: var(--hint); }
.provs { display: inline-flex; gap: 4px; vertical-align: middle; }

.op { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--line-soft); }
.op-main { flex: 1; min-width: 0; }
.op-title { font-weight: 600; font-size: 14px; }
.op-sub { font-size: 12px; color: var(--hint); }
.op-amt { font-weight: 700; font-size: 14px; white-space: nowrap; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; margin: 0; }
.kv dt { color: var(--hint); }
.kv dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.kv.rules dd { text-align: left; color: var(--hint); font-weight: 400; }

/* ---------- игровые сессии ---------- */
.ses {
  display: flex; align-items: stretch; gap: 12px; background: color-mix(in srgb, var(--card) 92%, transparent);
  border-radius: var(--r-lg); padding: 12px; margin-bottom: 8px; border: 1.5px solid transparent; transition: border-color .3s;
  backdrop-filter: blur(8px);
}
.ses.overdue { border-color: var(--bad); }
.ses.low, .live-panel.low { border-color: var(--amber); }
.ses-pc {
  width: 54px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--hl);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.ses-pc small { font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.ses-pc b { font-size: 24px; font-weight: 800; margin-top: 3px; }
.ses-pc.multi b { font-size: 14px; line-height: 1.15; text-align: center; padding: 0 2px; }
.ses.single .ses-pc { background: color-mix(in srgb, var(--brand-2) 18%, transparent); color: var(--brand-2); }
.ses-main { flex: 1; min-width: 0; text-align: left; }
.ses-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ses-meta { font-size: 13px; color: var(--hint); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ses-meta svg.i { width: 14px; height: 14px; }
.ses-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; flex: none; }
.ses-timer { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.ses-timer.off { font-size: 12px; font-weight: 500; color: var(--hint); }
.ses-timer.soon { color: var(--warn); }
.ses-timer.over { color: var(--bad); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .45; } }

.live-panel { border: 1.5px solid color-mix(in srgb, var(--ok) 45%, transparent); }
.live-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; margin-bottom: 12px; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: pulse 1.6s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.live-grid > div { background: var(--sunk); border-radius: 12px; padding: 10px 12px; }
.live-grid b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.live-grid .hint { font-size: 12px; }
.timer-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.timer-row .ses-timer { font-size: 22px; margin-right: auto; }

/* ---------- главная админа ---------- */
.greet { margin: 2px 2px 14px; }
.greet-hi { font-size: 22px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.greet .hint { margin-top: 4px; }
.greet .link-btn { padding: 0; font-size: 13px; }
.plan { background: var(--brand-grad); color: #fff; position: relative; overflow: hidden; box-shadow: var(--glow); }
.plan::after {
  content: ""; position: absolute; inset: -40% -20%; pointer-events: none;
  background: radial-gradient(40% 60% at 90% 10%, color-mix(in srgb, var(--pink) 40%, transparent), transparent 70%);
}
.plan > * { position: relative; z-index: 1; }
.plan .hint { color: rgba(255, 255, 255, .82); }
.plan-head { display: flex; justify-content: space-between; align-items: center; }
.plan-sum { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 12px; font-variant-numeric: tabular-nums; }
.plan-sum .hint { font-size: 14px; font-weight: 500; letter-spacing: 0; }
.pct { font-weight: 800; color: var(--brand-3); font-size: 18px; }
.bar { height: 10px; border-radius: 99px; background: var(--sunk); overflow: hidden; margin-bottom: 10px; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand-grad); }
.plan .bar { background: rgba(255, 255, 255, .22); }
.plan .bar i { background: var(--lime-grad); box-shadow: var(--neon-glow); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.stat { background: color-mix(in srgb, var(--card) 92%, transparent); border-radius: var(--r-md); padding: 12px 14px; backdrop-filter: blur(8px); }
.stat b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--hint); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.tile { background: color-mix(in srgb, var(--card) 92%, transparent); border-radius: var(--r-md); padding: 12px 14px; display: flex; align-items: center; gap: 10px; text-align: left; backdrop-filter: blur(8px); }
.tile b { font-size: 21px; font-weight: 800; }
.tile .row-icon { width: 38px; height: 38px; }
@media (max-width: 520px) { .tile { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; } .tile .hint { font-size: 12px; } }
.tile.hot { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-3) 55%, transparent); }
/* главная админа: смена и крупные рабочие кнопки */
.shift-chip {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 10px; padding: 10px 14px;
  border-radius: var(--r-md); background: var(--accent-soft); color: var(--hl); font-weight: 650; font-size: 14px;
}
.shift-chip span { flex: 1; text-align: left; }
.shift-chip svg.i { width: 18px; height: 18px; }
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.actions button {
  min-height: 84px; border-radius: var(--r-md); padding: 12px 4px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  font-size: 12px; font-weight: 650; text-align: center; line-height: 1.15;
  background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(8px);
}
.actions button:first-child { background: var(--brand-grad); color: #fff; box-shadow: var(--glow), inset 0 0 0 1px color-mix(in srgb, var(--brand-3) 45%, transparent); }
.actions button:first-child svg.i { color: #fff; }
.actions svg.i { width: 26px; height: 26px; color: var(--brand-1); }
.actions button:active { transform: scale(.97); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .actions svg.i { color: var(--soft); } }
:root[data-theme="dark"] .actions svg.i { color: var(--soft); }

/* ---------- гость ---------- */
.hero { text-align: center; padding: 18px 8px 16px; }
.hero-icon { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: var(--brand-grad); box-shadow: var(--glow); }
.hero-icon svg.i { width: 36px; height: 36px; }
.hero h1 { font-size: 22px; margin-bottom: 8px; }
.or { text-align: center; color: var(--hint); font-size: 13px; margin: 18px 0 12px; display: flex; align-items: center; gap: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.live-banner {
  display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ok) 45%, transparent); border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 12px;
}
.live-banner > div:nth-child(2) { flex: 1; }
.info-row { display: flex; gap: 12px; align-items: flex-start; }
.info-row .row-icon { margin-top: 2px; }
.mode-banner { background: var(--warn-bg); border-radius: var(--r-md); padding: 10px 14px; font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mode-banner .link-btn { padding: 0; font-size: 13px; color: inherit; text-decoration: underline; }

.loc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.loc-name { font-size: 16px; font-weight: 700; }
.loc-row { display: flex; align-items: flex-start; gap: 8px; color: var(--hint); font-size: 14px; margin-bottom: 4px; }
.loc-row span { color: var(--fg); }
.loc-row small { display: block; font-size: 13px; color: var(--hint); margin-top: 2px; }
.loc-row svg.i { width: 16px; height: 16px; margin-top: 2px; color: var(--brand-2); }
.loc .btn-row .btn { padding: 0 10px; font-size: 14px; white-space: nowrap; }
.loc-short {
  min-width: 52px; height: 36px; padding: 0 6px; border-radius: 10px; flex: none; display: grid; place-items: center;
  font-weight: 800; font-size: 11px; background: var(--accent-soft); color: var(--hl); white-space: nowrap;
}
.map-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; flex: none; }
.map-dot.y { background: #fc3f1d; }
.map-dot.g { background: #19aa1e; }

.reception-phone { display: block; font-size: 19px; font-weight: 800; color: var(--fg); }
.phone-row { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: 10px; }
.phone-row .reception-phone { flex: 1; }
.phone-row .icon-btn { background: var(--sunk); color: var(--brand-2); }
.phone-row .icon-btn.call { background: var(--brand-grad); color: #fff; }

/* профиль: входы аккаунта */
.conn { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--line-soft); }
.conn .prov { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.conn-main { flex: 1; min-width: 0; }
.code-big { font-size: 38px; font-weight: 800; letter-spacing: .18em; text-align: center; font-variant-numeric: tabular-nums; margin: 6px 0; color: var(--hl); }

/* приглашение сотрудника */
.invite-links { display: grid; gap: 8px; margin-top: 12px; }
.invite-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--sunk); }
.invite-link .grow { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hint); }

/* ---------- очередь ---------- */
.q-row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.q-pos { width: 32px; height: 32px; border-radius: 50%; background: var(--sunk); display: grid; place-items: center; font-weight: 800; flex: none; }
.q-row:first-child .q-pos { background: var(--brand-3); color: var(--on-neon); }
.q-note { font-size: 13px; margin-top: 2px; }
.q-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.q-actions .icon-btn { width: 32px; height: 32px; }
.q-actions .btn { margin-left: 4px; }
.picked { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.picked > div { flex: 1; min-width: 0; }

/* ---------- заявки ---------- */
.req { padding: 12px 15px; border-bottom: 1px solid var(--line-soft); }
.req-head { display: flex; align-items: center; gap: 8px; }
.req-head .row-title { flex: 1; }
.req-body { font-size: 14px; margin-top: 4px; }
.req .btn-row { margin-top: 8px; }

/* ---------- настройки ---------- */
.rule-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; color: var(--hint); }
.rule-row input { width: 80px; min-height: 40px; text-align: center; }
.price-cat summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.price-cat summary::-webkit-details-marker { display: none; }
.price-cat summary::after { content: "Открыть ▾"; font-size: 12px; color: var(--link); margin-top: 4px; }
.price-cat[open] summary::after { content: "Свернуть ▴"; }
.price-row { display: grid; gap: 6px; align-items: center; margin-bottom: 6px; }
.price-row.cards { grid-template-columns: .8fr 1.2fr 34px 34px 32px; }
.price-row.singles { grid-template-columns: 64px .8fr 1fr 1fr 34px 34px 32px; }
.price-row.hint span { font-size: 11px; }
.price-row input:not([type=checkbox]) { min-height: 38px; padding: 6px 8px; }
.price-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--brand-1); justify-self: center; }
.price-row select { min-height: 38px; padding: 6px 4px; font-size: 13px; }
.price-row .icon-btn { width: 30px; height: 30px; }
.pc-group-label { font-size: 12px; font-weight: 700; color: var(--brand-2); margin: 4px 0 6px 2px; }

.skins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.skin { border-radius: var(--r-md); padding: 14px 12px; color: #fff; font-weight: 700; text-align: left; border: 2px solid transparent; }
.skin small { display: block; font-weight: 500; font-size: 12px; opacity: .85; }
.skin.violet { background: linear-gradient(135deg, #6C2BD9, #A45BF2); }
.skin.pink { background: linear-gradient(135deg, #D81E7A, #F25BA4); }
.skin.on { border-color: var(--brand-3); box-shadow: var(--glow); }
.sw { width: 46px; height: 28px; border-radius: 99px; background: var(--line); position: relative; flex: none; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.sw.on { background: var(--brand-1); }
.sw.on::after { transform: translateX(18px); }

/* ---------- шторка ---------- */
#sheet-root { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
#sheet-root.open { pointer-events: auto; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(10, 4, 24, .55); animation: fade .22s; backdrop-filter: blur(2px); }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--sheet-bg); border-radius: 22px 22px 0 0; padding: 0 16px calc(20px + var(--safe-bottom));
  border-top: 1px solid var(--line); animation: up .34s cubic-bezier(.2, 1.1, .3, 1); max-width: 680px; margin: 0 auto;
}
.sheet-head { position: sticky; top: 0; background: var(--sheet-bg); display: flex; align-items: center; padding: 16px 0 10px; z-index: 2; }
.sheet-head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line); }
.sheet-title { flex: 1; font-size: 17px; font-weight: 700; }
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }

/* камера для QR на сайте */
.scanner { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #000; aspect-ratio: 1; margin-bottom: 12px; }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner::after { content: ""; position: absolute; inset: 18%; border: 3px solid var(--brand-3); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }

/* ---------- всплывашка ---------- */
#toast-root { position: fixed; left: 16px; right: 16px; top: 12px; z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  max-width: 480px; background: #2a1d4a; color: #fff; padding: 12px 16px; border-radius: 14px; font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3); animation: drop .42s cubic-bezier(.2, 1.4, .4, 1);
  display: flex; align-items: center; gap: 10px;
}
.toast.error { background: var(--bad); }
.toast.ok { background: var(--brand-grad); }
.toast.out { opacity: 0; transform: translateY(-10px) scale(.96); transition: .25s; }
@keyframes drop { from { opacity: 0; transform: translateY(-18px) scale(.94); } }

@media (min-width: 560px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 380px) {
  .quick button { font-size: 11px; padding: 10px 2px; }
  .c3-big b { font-size: 34px; }
}

/* ---------- веб-панель на компьютере: боковое меню ---------- */
@media (min-width: 960px) {
  body.wide { padding-left: var(--side-w); }
  body.wide nav.tabbar {
    top: 0; bottom: 0; right: auto; width: var(--side-w); flex-direction: column; justify-content: flex-start;
    gap: 2px; padding: 18px 12px; border-top: 0; border-right: 1px solid var(--line-soft);
  }
  body.wide .side-brand { display: block; padding: 6px 12px 18px; }
  body.wide .side-brand svg.brand { height: 36px; }
  body.wide .side-brand .hint { display: block; font-size: 12px; margin-top: 2px; }
  body.wide .tab {
    flex: none; height: 44px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px;
    font-size: 14px; border-radius: 12px;
  }
  body.wide .tab.on { background: var(--accent-soft); }
  body.wide .tab.on::before { top: 10px; bottom: 10px; left: 0; transform: none; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  body.wide .tab .dot { position: static; margin-left: auto; }
  body.wide .side-foot { display: block; margin-top: auto; padding: 12px; font-size: 12px; color: var(--hint); }
  body.wide header.hd { border-radius: 0 0 20px 20px; margin: 0 16px; }
  body.wide #view, body.wide .hd-row { max-width: 1040px; }
  body.wide #view { padding-bottom: 40px; }
  body.wide .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
  body.wide .sheet { bottom: auto; top: 50%; left: 50%; right: auto; width: min(560px, 92vw); transform: translate(-50%, -50%); border-radius: 22px; max-height: 86vh; animation: pop .2s; border: 1px solid var(--line); }
  @keyframes pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
  body.wide #sheet-root.closing .sheet { animation: popout .2s ease-in forwards; }
  @keyframes popout { to { opacity: 0; transform: translate(-50%, -47%) scale(.97); } }
}


/* =====================================================================
   Анимации касаний и переходов (fx.js). Только transform и opacity —
   на видеокарте, без тормозов. «Движение» выключено или система просит
   меньше движения — всё ниже гасится в самом конце файла.
   ===================================================================== */

/* пружинка на нажатие — у всего, что нажимается */
button, .row, .tile, .chip, .tariff, .shift-chip, a.btn {
  transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), opacity .15s, background-color .2s, box-shadow .2s;
}
button:active:not(:disabled), .row:active, .tile:active, .chip:active, .tariff:active, .shift-chip:active { transform: scale(.965); }
.btn:active:not(:disabled) { transform: scale(.97); opacity: 1; }
.actions button:active, .quick button:active { transform: scale(.94); }
.tab:active { transform: scale(.9); }

/* волна от пальца */
.fx-host { position: relative; }
.fx-ripple-wrap { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, currentColor 26%, transparent) 0%, color-mix(in srgb, currentColor 10%, transparent) 45%, transparent 70%);
  transform: scale(.15); opacity: 1; animation: fx-ripple .6s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes fx-ripple { to { transform: scale(1); opacity: 0; } }
.btn.primary .fx-ripple, .actions button:first-child .fx-ripple, .chip.on .fx-ripple { background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 70%); }

/* переходы экранов: вглубь — справа, назад — слева, разделы — подъём */
#view.fx-enter[data-nav="tab"] { animation: fx-tab .34s cubic-bezier(.2, .8, .2, 1) both; }
#view.fx-enter[data-nav="push"] { animation: fx-push .36s cubic-bezier(.2, .9, .25, 1) both; }
#view.fx-enter[data-nav="back"] { animation: fx-back .32s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes fx-tab { from { opacity: 0; transform: translateY(10px); } }
@keyframes fx-push { from { opacity: 0; transform: translateX(34px); } }
@keyframes fx-back { from { opacity: 0; transform: translateX(-30px); } }

/* появление лесенкой */
.fx-rise { animation: fx-rise .46s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(var(--i, 0) * 32ms + 40ms); }
@keyframes fx-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* иконка раздела подпрыгивает, метка под ней вытягивается */
.tab.bump svg.i { animation: fx-bump .45s cubic-bezier(.3, 1.8, .5, 1); }
.tab.bump::before { animation: fx-bar .4s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes fx-bump { 40% { transform: translateY(-4px) scale(1.14); } }
@keyframes fx-bar { from { width: 0; opacity: 0; } }
body.wide .tab.bump::before { animation: none; }

/* выбор: тариф, место, сегмент — короткий «щелчок» (только от пальца, не при фоновом обновлении) */
.fx-pick { animation: fx-pick .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fx-pick { 50% { transform: scale(1.06); } }

/* шторка закрывается плавно */
#sheet-root.closing { pointer-events: none; }
#sheet-root.closing .sheet { animation: fx-down .22s cubic-bezier(.5, 0, .9, .5) forwards; }
#sheet-root.closing .sheet-backdrop { animation: fx-fadeout .22s forwards; }
@keyframes fx-down { to { transform: translateY(100%); } }
@keyframes fx-fadeout { to { opacity: 0; } }

/* всплывашки: успех с галочкой, ошибка вздрагивает */
.toast-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .22); animation: fx-check .5s .1s cubic-bezier(.3, 1.8, .5, 1) both; }
.toast-ic svg.i { width: 15px; height: 15px; stroke-width: 3; color: var(--brand-3); }
@keyframes fx-check { from { transform: scale(0) rotate(-40deg); } }
.toast.error { animation: drop .42s cubic-bezier(.2, 1.4, .4, 1), fx-shake .45s .3s; }
@keyframes fx-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* салют успеха */
.fx-burst { position: fixed; z-index: 300; pointer-events: none; width: 0; height: 0; }
.fx-burst i {
  position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%);
  animation: fx-spark .75s cubic-bezier(.15, .7, .3, 1) both;
}
@keyframes fx-spark {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 14px)) scale(0); opacity: 0; }
}

/* скелет загрузки вместо крутилки */
.fx-skel { display: grid; gap: 10px; padding-top: 4px; }
.fx-sk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fx-sk { height: 64px; border-radius: var(--r-md); background: color-mix(in srgb, var(--card) 92%, transparent); position: relative; overflow: hidden; }
.fx-sk.h { height: 44px; }
.fx-sk.l { height: 58px; }
.fx-sk.s { width: 60%; }
.fx-sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-2) 14%, transparent), transparent);
  animation: fx-shimmer 1.2s ease-in-out infinite;
}
@keyframes fx-shimmer { to { transform: translateX(100%); } }

/* всё выключается вместе с «Движением» */
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}