/* Страница подключения устройства (frdom.net) — облик кабинета v2: чёрный фон, синий градиент логотипа,
   текст Unbounded, подписи Onest. Шрифты — те же файлы кабинета (/webapp/static/v2/assets/fonts).
   Шаги «Установите → Добавьте подписку» и кнопка с волной — как «Настройка» в кабинете
   (design/miniapp-v2/cabinet.css: .step, .wave-btn, .copy-field). */
@font-face { font-family: "Unbounded"; src: url("/webapp/static/v2/assets/fonts/unbounded-cyrillic.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; src: url("/webapp/static/v2/assets/fonts/unbounded-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Обычный текст — тот же Unbounded на 10 % мельче (он шире SF), как в кабинете */
@font-face { font-family: "UnboundedText"; src: url("/webapp/static/v2/assets/fonts/unbounded-cyrillic.woff2") format("woff2"); font-weight: 200 900; font-display: swap; size-adjust: 90%; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "UnboundedText"; src: url("/webapp/static/v2/assets/fonts/unbounded-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; size-adjust: 90%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; src: url("/webapp/static/v2/assets/fonts/onest-cyrillic.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; src: url("/webapp/static/v2/assets/fonts/onest-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --color-bg: #000000;
  --color-surface: #0A0E14;
  --color-control: #161F2B;
  --color-control-hover: #1D2837;
  --color-ring: rgba(170, 200, 255, 0.08);
  --color-ring-strong: rgba(170, 200, 255, 0.14);
  --color-text: #F3F7FF;
  --color-text-secondary: #A3B1C6;
  --color-text-tertiary: #8591A7;
  --color-link: #8CC4FF;
  --color-accent-text: #8CC4FF;
  --color-accent-soft: rgba(47, 124, 246, 0.16);
  --color-accent-glow: rgba(47, 124, 246, 0.5);
  --color-wave: #33CFF5;
  --color-success: #4ADE9B;
  --color-success-soft: rgba(74, 222, 155, 0.14);
  --color-warning: #FF9A4D;
  --color-focus: #9BE8FF;
  --gradient-accent: linear-gradient(135deg, #1B45D6 0%, #2566E8 60%, #276FEA 100%);
  --gradient-accent-flow: linear-gradient(115deg, #1B45D6 0%, #2566E8 22%, #3C8DFF 40%, #2566E8 58%, #1B45D6 78%, #2566E8 100%);
  --shimmer: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.05) 70%, transparent 100%);
  --font-heading: "Unbounded", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", sans-serif;
  --font-ui: "UnboundedText", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", sans-serif;
  --font-secondary: "Onest", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", sans-serif;
  --text-sm: 13px;
  --text-body: 15px;
  --text-lg: 17px;
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --r-card: 26px;
  --r-btn: 16px;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, 0.0319, 0.1116, 0.2188, 0.3384, 0.4591, 0.5733, 0.6764, 0.7657, 0.8403, 0.9004, 0.9472, 0.9821, 1.0068, 1.0231, 1.0328, 1.0375, 1.0383, 1.0366, 1.0333, 1.029, 1.0244, 1.0198, 1.0155, 1.0116, 1.0083, 1.0056, 1.0034, 1.0017, 1.0005, 0.9996, 0.999, 1); }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* hidden всегда прячет: у .btn и .wave-btn свой display, без этого атрибут не работал (15-10: «Новый код» на чужой ссылке) */
[hidden] { display: none !important; }
html { background: var(--color-bg); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(120% 60% at 50% -10%, rgba(47, 124, 246, 0.16), transparent 60%), var(--color-bg);
  color: var(--color-text); font-family: var(--font-ui); font-size: var(--text-body); line-height: 1.45;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 6px; }
.icon { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.wrap { max-width: 880px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 28px; min-height: 100dvh; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; }
.brand img { border-radius: 10px; }

.view { display: flex; flex-direction: column; gap: 14px; animation: enter 640ms var(--ease-smooth) both; }
.view[hidden] { display: none; }
@keyframes enter { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }

h1 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(24px, 4.6vw, 36px); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.lead { font-family: var(--font-secondary); color: var(--color-text-secondary); font-size: 17px; max-width: 60ch; text-wrap: pretty; }
.muted { font-family: var(--font-secondary); color: var(--color-text-secondary); }

/* QR и шаги: на компьютере — рядом, на телефоне — друг под другом */
.qr-layout { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; margin-top: 10px; }
.qr-card { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qr {
  width: min(320px, 72vw); aspect-ratio: 1; padding: 14px; border-radius: 24px; background: #fff;
  box-shadow: 0 0 0 1px var(--color-ring-strong), 0 30px 80px -30px var(--color-accent-glow);
  animation: qr-in 760ms var(--ease-spring) both;
}
.qr svg { display: block; width: 100%; height: 100%; }
@keyframes qr-in { from { opacity: 0; transform: scale(0.9) rotate(-2deg); } to { opacity: 1; transform: none; } }
.timer { font-family: var(--font-secondary); font-size: 14px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.timer.low { color: var(--color-warning); }

.steps { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 18px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; row-gap: 2px; animation: enter 640ms var(--ease-smooth) both; }
.steps li:nth-child(2) { animation-delay: 70ms; }
.steps li:nth-child(3) { animation-delay: 140ms; }
.steps li::before {
  content: counter(s); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-heading); font-weight: 600; font-size: 15px;
  background: var(--color-accent-soft); color: var(--color-accent-text); box-shadow: inset 0 0 0 1px rgba(140, 196, 255, 0.24);
}
.steps b { font-family: var(--font-heading); font-weight: 600; font-size: 16px; line-height: 1.3; }
.steps span { font-family: var(--font-secondary); color: var(--color-text-secondary); font-size: 15px; }
.code { font-family: var(--font-heading); font-size: 17px; letter-spacing: 0.08em; color: var(--color-text); white-space: nowrap; }

.note { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--color-success-soft); color: var(--color-success); font-weight: 500; animation: enter 520ms var(--ease-spring) both; }
.note[hidden] { display: none; }

/* «Живая» точка ожидания — эхо волны с кнопки «Подключиться» в кабинете */
.pulse { position: relative; width: 12px; height: 12px; flex: none; border-radius: 50%; background: currentColor; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; animation: ring 1.8s var(--ease-smooth) infinite; }
.pulse.big { width: 22px; height: 22px; color: var(--color-wave); margin-bottom: 6px; }
@keyframes ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.2); opacity: 0; } }

.spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--color-control); border-top-color: var(--color-wave); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.ok-mark { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--color-success-soft); color: var(--color-success); animation: pop 700ms var(--ease-spring) both; }
.ok-mark svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw 520ms 220ms var(--ease-smooth) forwards; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── Кнопки (как в кабинете) ── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 18px;
  border-radius: var(--r-btn); font-family: var(--font-ui); font-size: var(--text-body); font-weight: 600; color: var(--color-text);
  cursor: pointer; text-decoration: none !important; transition: scale 150ms ease-out, background-color 150ms;
}
.btn:active { scale: 0.96; }
.btn .icon { width: 20px; height: 20px; stroke-width: 2; }
.btn-secondary { background: var(--color-control); }
.btn-secondary:hover { background: var(--color-control-hover); }
/* Главная синяя — переливается: градиент логотипа перетекает, по кнопке пробегает блик */
.btn-primary {
  overflow: hidden; isolation: isolate; color: #fff;
  background-image: var(--gradient-accent-flow); background-size: 300% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 26px -12px var(--color-accent-glow);
  animation: btn-flow 8s ease-in-out infinite alternate;
}
.btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; pointer-events: none; background: var(--shimmer); transform: translateX(-120%) skewX(-18deg); animation: btn-shimmer 4.2s var(--ease-smooth) infinite; }
@keyframes btn-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes btn-shimmer { 0%, 55% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }
.view > .btn { align-self: flex-start; }
/* Главные действия экранов («Новый код», «Открыть Telegram») — как «Подключиться» в кабинете: с волной */
.view > .wave-btn.act { max-width: 380px; min-height: 58px; margin-top: 6px; font-size: var(--text-lg); }
.row-chev { width: 18px; height: 18px; color: var(--color-text-tertiary); }
.grow { flex: 1; text-align: start; }
.btn .app-tag { font-family: var(--font-secondary); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-tertiary); }

/* ── «Настройка»: шаги, кнопки магазинов, кнопка с волной ── */
.setup { max-width: 560px; padding: 18px; border-radius: var(--r-card); background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-ring); animation: enter 640ms 90ms var(--ease-smooth) both; }
.stepper { list-style: none; }
.step { position: relative; display: flex; gap: 14px; padding-bottom: 22px; animation: enter 640ms var(--ease-smooth) both; }
.step:nth-child(2) { animation-delay: 140ms; }
.step:last-child { padding-bottom: 2px; }
.step:not(:last-child)::before { content: ""; position: absolute; left: calc(1.075em - 1px); top: calc(2.15em + 4px); bottom: 4px; width: 2px; border-radius: 1px; background: linear-gradient(180deg, rgba(140, 196, 255, 0.35), rgba(140, 196, 255, 0.08)); }
.step-num {
  display: grid; place-items: center; width: 2.15em; height: 2.15em; border-radius: 50%; flex: none;
  background: var(--color-accent-soft); color: var(--color-accent-text); font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(140, 196, 255, 0.24);
}
.step-body { flex: 1; min-width: 0; padding-top: 4px; }
.step-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
.step-sub { margin-top: 2px; font-family: var(--font-secondary); font-size: var(--text-sm); color: var(--color-text-tertiary); }
.step-sub.keep { margin-top: 8px; }
.step-actions { display: grid; gap: 8px; margin-top: 12px; }
.step-actions .btn { justify-content: flex-start; padding-inline: 14px 12px; animation: enter 560ms var(--ease-smooth) both; }
.step-actions .btn:nth-child(2) { animation-delay: 60ms; }
.step-actions .btn:nth-child(3) { animation-delay: 120ms; }
.add-other { width: 100%; margin-top: 8px; }

.wave-btn {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; margin-top: 12px; padding: 10px 18px 16px; border-radius: var(--r-btn); overflow: hidden;
  color: #fff; font-family: var(--font-ui); font-size: var(--text-body); font-weight: 600; text-decoration: none !important;
  background: var(--gradient-accent);
  box-shadow: inset 0 0 0 1px rgba(155, 232, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 14px 34px -10px var(--color-accent-glow);
  transition: scale 150ms ease-out, filter 150ms ease-out;
}
.wave-btn:hover { filter: brightness(1.08); }
.wave-btn:active { scale: 0.96; }
.wave { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wave svg { position: absolute; left: 0; bottom: 0; width: 200%; fill: currentColor; }
.wave .w1 { height: 27px; color: rgba(51, 207, 245, 0.42); animation: wave 5.2s linear infinite; }
.wave .w2 { height: 24px; color: rgba(155, 232, 255, 0.26); animation: wave 8.4s linear infinite reverse; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wave-label { position: relative; display: inline-flex; align-items: center; gap: 8px; text-shadow: 0 1px 3px rgba(8, 24, 80, 0.55); }
.wave-label .icon { width: 20px; height: 20px; }
/* Касание: от пальца расходится светлый круг — та же «волна» (pair.js) */
.ripple { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: rgba(255, 255, 255, 0.32); pointer-events: none; z-index: -1; animation: ripple 760ms var(--ease-smooth) forwards; }
@keyframes ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(var(--k, 30)); opacity: 0; } }

.or { margin-top: 12px; text-align: center; font-family: var(--font-secondary); font-size: var(--text-sm); color: var(--color-text-secondary); text-wrap: balance; }
.copy-field { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 6px 6px 14px; border-radius: 16px; background: var(--color-control); }
.copy-field .url { flex: 1; min-width: 0; font-family: var(--font-secondary); font-size: var(--text-sm); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; }
.copy-field .btn { min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: var(--text-sm); background: rgba(255, 255, 255, 0.07); }
.copy-field .btn .icon { width: 18px; height: 18px; }
.copy-field .btn.done { color: var(--color-success); }

.foot { margin-top: auto; padding-top: 12px; font-family: var(--font-secondary); font-size: 14px; }

@media (max-width: 640px) {
  .wrap { gap: 22px; }
  .qr-layout { grid-template-columns: 1fr; gap: 24px; justify-items: center; }
  .steps { width: 100%; }
  .view > .btn { align-self: stretch; }
  .setup { padding: 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .pulse::after, .btn-primary::after, .ripple { display: none; }
  .wave svg { animation: none !important; }
}