@charset "utf-8";

/* «Свой шаблон» — talon layout + blur hero + палитры */
body.visual-page {
  background: #0a0a0a;
  color: #fff;
  --af: var(--visual-accent, rgb(39, 211, 103));
  --at: var(--visual-accent, rgb(39, 211, 103));
}

body.visual-page[data-palette="green"] {
  --visual-accent: rgb(39, 211, 103);
  --visual-accent-soft: rgba(39, 211, 103, 0.14);
  --visual-shell-bg: rgb(20, 24, 38);
  --visual-shell-border: rgb(34, 42, 61);
  --visual-trust-bg: rgb(24, 29, 44);
  --visual-trust-border: rgb(39, 47, 68);
  --visual-cta: linear-gradient(rgb(47, 226, 119) 0%, rgb(39, 211, 103) 55%, rgb(31, 168, 85) 100%);
}

body.visual-page[data-palette="blue"] {
  --visual-accent: rgb(96, 165, 250);
  --visual-accent-soft: rgba(96, 165, 250, 0.16);
  --visual-shell-bg: rgb(18, 24, 42);
  --visual-shell-border: rgb(36, 48, 78);
  --visual-trust-bg: rgb(22, 30, 52);
  --visual-trust-border: rgb(40, 54, 88);
  --visual-cta: linear-gradient(rgb(96, 165, 250) 0%, rgb(59, 130, 246) 55%, rgb(37, 99, 235) 100%);
}

body.visual-page[data-palette="purple"] {
  --visual-accent: rgb(167, 139, 250);
  --visual-accent-soft: rgba(167, 139, 250, 0.16);
  --visual-shell-bg: rgb(24, 20, 40);
  --visual-shell-border: rgb(46, 38, 72);
  --visual-trust-bg: rgb(30, 24, 48);
  --visual-trust-border: rgb(52, 42, 82);
  --visual-cta: linear-gradient(rgb(192, 132, 252) 0%, rgb(168, 85, 247) 55%, rgb(126, 34, 206) 100%);
}

body.visual-page[data-palette="orange"] {
  --visual-accent: rgb(251, 146, 60);
  --visual-accent-soft: rgba(251, 146, 60, 0.16);
  --visual-shell-bg: rgb(32, 22, 16);
  --visual-shell-border: rgb(62, 42, 28);
  --visual-trust-bg: rgb(38, 26, 18);
  --visual-trust-border: rgb(72, 48, 32);
  --visual-cta: linear-gradient(rgb(251, 146, 60) 0%, rgb(249, 115, 22) 55%, rgb(234, 88, 12) 100%);
}

body.visual-page[data-palette="red"] {
  --visual-accent: rgb(248, 113, 113);
  --visual-accent-soft: rgba(248, 113, 113, 0.16);
  --visual-shell-bg: rgb(34, 18, 22);
  --visual-shell-border: rgb(68, 34, 42);
  --visual-trust-bg: rgb(42, 22, 28);
  --visual-trust-border: rgb(78, 38, 48);
  --visual-cta: linear-gradient(rgb(248, 113, 113) 0%, rgb(239, 68, 68) 55%, rgb(220, 38, 38) 100%);
}

body.visual-page[data-palette="neutral"] {
  --visual-accent: rgb(148, 163, 184);
  --visual-accent-soft: rgba(148, 163, 184, 0.14);
  --visual-shell-bg: rgb(22, 24, 28);
  --visual-shell-border: rgb(42, 46, 54);
  --visual-trust-bg: rgb(28, 30, 36);
  --visual-trust-border: rgb(48, 52, 62);
  --visual-cta: linear-gradient(rgb(203, 213, 225) 0%, rgb(148, 163, 184) 55%, rgb(100, 116, 139) 100%);
}

.visual-bg#bg::before {
  content: "";
  position: absolute;
  inset: -14%;
  background-image: var(--visual-hero-url, none);
  background-size: cover;
  background-position: center;
  filter: blur(24px);
  opacity: 0.52;
  transform: scale(1.06);
  pointer-events: none;
}

.visual-bg#bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(125% 85% at 50% 0%, var(--visual-accent-soft) 0%, transparent 55%),
    rgba(8, 10, 16, 0.72);
  pointer-events: none;
}

body.visual-page .talon-shell {
  background: var(--visual-shell-bg);
  border-color: var(--visual-shell-border);
}

body.visual-page .talon-cta {
  background: var(--visual-cta);
}

body.visual-page .talon-trust {
  background: var(--visual-trust-bg);
  border-color: var(--visual-trust-border);
}

body.visual-page .talon-trust svg {
  color: var(--visual-accent);
}

/* Phone / code steps — palette instead of fixed talon yellow */
body.visual-page #s2 .card,
body.visual-page #s3 .card,
body.visual-page #s4 .card {
  background: color-mix(in srgb, var(--visual-shell-bg) 92%, transparent);
  border-color: color-mix(in srgb, var(--visual-accent) 22%, transparent);
  box-shadow:
    rgba(0, 0, 0, 0.62) 0 20px 50px,
    color-mix(in srgb, var(--visual-accent) 8%, transparent) 0 0 0 1px inset;
}

body.visual-page .flow-badge {
  background: color-mix(in srgb, var(--visual-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--visual-accent) 28%, transparent);
}

body.visual-page .flow-badge-warm {
  background: color-mix(in srgb, var(--visual-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--visual-accent) 30%, transparent);
}

body.visual-page .fb-glow,
body.visual-page .flow-badge-warm .fb-glow {
  background: linear-gradient(135deg, var(--visual-accent), color-mix(in srgb, var(--visual-accent) 72%, #000));
  box-shadow: 0 0 10px color-mix(in srgb, var(--visual-accent) 55%, transparent);
}

body.visual-page .j-dot.on,
body.visual-page .j-dot.done {
  background: linear-gradient(135deg, var(--visual-accent), color-mix(in srgb, var(--visual-accent) 72%, #000));
  border-color: transparent;
  box-shadow: 0 0 12px color-mix(in srgb, var(--visual-accent) 45%, transparent);
}

body.visual-page .btn-a {
  background: var(--visual-cta);
  box-shadow:
    0 6px 26px color-mix(in srgb, var(--visual-accent) 42%, transparent),
    rgba(255, 255, 255, 0.16) 0 1px 0 inset;
}

body.visual-page .btn-a:hover:not(:disabled) {
  box-shadow:
    0 10px 36px color-mix(in srgb, var(--visual-accent) 52%, transparent),
    rgba(255, 255, 255, 0.16) 0 1px 0 inset;
}

body.visual-page .pf-inp:focus {
  border-color: color-mix(in srgb, var(--visual-accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--visual-accent) 18%, transparent);
}

body.visual-page .cd-box.active {
  border-color: color-mix(in srgb, var(--visual-accent) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--visual-accent) 20%, transparent);
}

body.visual-page .cd-box.filled {
  border-color: color-mix(in srgb, var(--visual-accent) 45%, transparent);
}

body.visual-page .ld-ring-spin {
  border-top-color: var(--visual-accent);
  border-right-color: color-mix(in srgb, var(--visual-accent) 72%, #000);
}

body.visual-page .code-disp {
  position: relative;
  cursor: text;
}

body.visual-page .visual-code-otp-hidden {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  z-index: 3;
  margin: 0;
  padding: 0;
  -webkit-text-fill-color: transparent;
  cursor: text;
  -webkit-tap-highlight-color: transparent;
}

body.visual-page .visual-code-otp-hidden:focus {
  outline: none;
}

body.visual-page .visual-phone-badge-label {
  display: inline-block;
  max-width: min(100%, 12rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

body.visual-page .visual-phone-title {
  max-width: 100%;
  line-height: 1.28;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

body.visual-page .visual-phone-send-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.visual-page .visual-phone-preview-pf {
  pointer-events: none;
  opacity: 0.92;
}

@media (max-width: 420px) {
  body.visual-page .visual-phone-title {
    font-size: clamp(1.15rem, 5.2vw, 1.45rem);
  }

  body.visual-page .flow-banner .flow-badge {
    max-width: 100%;
  }
}

.visual-hidden {
  display: none !important;
}

@media (max-width: 480px) {
  body.visual-page #app.talon-app {
    padding: 12px;
  }

  body.visual-page .talon-title {
    font-size: 22px;
  }
}