:root {
  --motion-standard: cubic-bezier(.22, .72, .24, 1);
  --motion-emphasis: cubic-bezier(.16, 1, .3, 1);
  --premium-cta: linear-gradient(112deg, #137f9e 0%, #6d4ed2 34%, #ca2f78 68%, #df5b43 100%);
  --premium-cta-cool: linear-gradient(112deg, #147f9c 0%, #3972c9 48%, #7050ce 100%);
  --premium-cta-shadow: 0 7px 18px rgba(48, 39, 61, .12), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* One continuous Mini App canvas. Telegram must not reveal background seams. */
html[data-route="app"] {
  --bg: #fff;
  --studio-bg: #fff;
  min-height: 100%;
  min-height: 100dvh;
  background: #fff;
  color-scheme: light;
}

html[data-route="app"] body,
html[data-route="app"] .guide-head-shell,
html[data-route="app"] .guide-head-shell::after {
  background-color: #fff;
  background-image: none;
}

html[data-route="app"] body,
html[data-route="app"] #appView {
  min-height: 100%;
  min-height: 100dvh;
  background: #fff;
}

html[data-route="app"] body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

html[data-route="app"] :where(button, a, select, input, textarea, label),
html[data-route="site"] :where(button, a, select, input, textarea, label),
html[data-route="admin"] :where(button, a, select, input, textarea, label) {
  -webkit-tap-highlight-color: transparent;
}

html[data-route="app"] #appView {
  isolation: isolate;
}

html[data-route="app"] body::after {
  content: none;
  display: none;
}

html[data-route="app"] #appView::after {
  bottom: -2px;
  height: calc(184px + max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px)));
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .04) 14%,
    rgba(255, 255, 255, .18) 28%,
    rgba(255, 255, 255, .44) 43%,
    rgba(255, 255, 255, .72) 58%,
    rgba(255, 255, 255, .92) 73%,
    #fff 89%,
    #fff 100%
  );
}

/* Covers the WebView safe area while Telegram paints its own bottom bar. */
html[data-route="app"] #appView::before {
  content: "";
  position: fixed;
  right: 0;
  bottom: -2px;
  left: 0;
  z-index: 79;
  height: calc(2px + max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px)));
  pointer-events: none;
  background: #fff;
}

/* The logo keeps depth, but no longer produces a pink halo. */
html[data-route="app"] .mark-img,
html[data-route="site"] .mark-img,
html[data-native-admin="true"] .mark-img {
  box-shadow:
    0 0 0 1px rgba(70, 53, 94, .10),
    0 7px 17px rgba(54, 42, 73, .11),
    0 0 11px rgba(103, 78, 190, .065);
}

/* Primary actions use white text and a deeper, accessible gradient. */
html[data-route="app"] .home-cta,
html[data-route="app"] .btn.primary,
html[data-native-admin="true"] .btn.primary {
  color: #fff;
  border-color: transparent;
  background: var(--premium-cta);
  background-size: 100% 100%;
  box-shadow: var(--premium-cta-shadow);
  text-shadow: 0 1px 1px rgba(28, 16, 38, .20);
}

/* Keep the main welcome action elevated without a colored halo. */
html[data-route="app"] .home-hero {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 16px 38px rgba(54, 43, 68, .09);
}

html[data-route="app"] .home-cta {
  box-shadow:
    0 6px 15px rgba(45, 36, 56, .12),
    inset 0 1px 0 rgba(255, 255, 255, .24);
  animation: none;
}

html[data-route="app"] .home-cta::before {
  inset: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(
    108deg,
    transparent 34%,
    rgba(255, 255, 255, .28) 48%,
    transparent 62%
  ) 160% 0 / 240% 100% no-repeat;
  transform: none;
  animation: motionButtonSheen .9s .42s var(--motion-standard) both;
}

html[data-route="site"] #landingOpenApp {
  color: #fff;
  background: var(--premium-cta-cool);
  box-shadow: var(--premium-cta-shadow);
  text-shadow: 0 1px 1px rgba(22, 24, 45, .20);
}

html[data-route="site"] #landingRegister,
html[data-route="site"] .landing-cta.primary {
  color: #fff;
  background: var(--premium-cta);
  box-shadow: var(--premium-cta-shadow);
  text-shadow: 0 1px 1px rgba(28, 16, 38, .20);
}

html[data-route="app"] .home-cta:hover,
html[data-route="app"] .btn.primary:hover,
html[data-native-admin="true"] .btn.primary:hover,
html[data-route="site"] #landingOpenApp:hover,
html[data-route="site"] #landingRegister:hover,
html[data-route="site"] .landing-cta.primary:hover {
  box-shadow:
    0 13px 29px rgba(58, 45, 88, .18),
    inset 0 1px 0 rgba(255, 255, 255, .26);
}

html[data-route="app"] .home-cta:hover {
  box-shadow:
    0 8px 18px rgba(45, 36, 56, .14),
    inset 0 1px 0 rgba(255, 255, 255, .26);
}

/* Softer surfaces: depth without visible gray cut lines. */
html[data-route="app"] .topbar,
html[data-route="app"] .progress-wrap,
html[data-route="app"] .home-hero,
html[data-route="app"] .card,
html[data-route="app"] .note,
html[data-route="app"] .inline-warning,
html[data-route="app"] #navWrap {
  border-color: rgba(54, 43, 68, .075);
}

html[data-route="app"] .card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 14px 38px rgba(54, 43, 68, .065);
}

html[data-route="app"] .note,
html[data-route="app"] .inline-warning {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 10px 30px rgba(54, 43, 68, .045);
}

html[data-route="app"] #navWrap {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 12px 34px rgba(54, 43, 68, .09);
}

html[data-route="app"] .bullet,
html[data-route="app"] .bullet .dot-ico,
html[data-route="app"] .icon-badge,
html[data-route="app"] .home-logo,
html[data-route="app"] .home-chip svg,
html[data-route="app"] .btn svg {
  align-items: center;
  justify-content: center;
}

html[data-route="app"] .bullet .dot-ico,
html[data-route="app"] .icon-badge,
html[data-route="app"] .home-logo {
  display: grid;
  place-items: center;
}

html[data-route="app"] .bullet .dot-ico svg,
html[data-route="app"] .icon-badge svg,
html[data-route="app"] .home-logo svg,
html[data-route="app"] .home-chip svg,
html[data-route="app"] .btn svg {
  display: block;
  flex: 0 0 auto;
}

html[data-route="app"] :where(button, a, select):focus-visible {
  outline: 3px solid rgba(109, 78, 210, .22);
  outline-offset: 2px;
}

html[data-route="app"] .btn.primary.is-register-focus {
  animation: premiumRegisterFocus 1.9s ease-in-out infinite;
}

/* Mini App: movement is reserved for navigation and direct feedback. */
html[data-route="app"] .progress-fill {
  transition: width .58s var(--motion-emphasis);
  will-change: width;
}

html[data-route="app"] .dots i {
  transform: scaleY(1);
  transform-origin: center;
  transition:
    background-color .34s ease,
    box-shadow .34s ease,
    transform .34s var(--motion-standard);
}

html[data-route="app"] .dots i.done {
  transform: scaleY(1.08);
}

html[data-route="app"] .dots i.active {
  transform: scaleY(1.55);
  box-shadow: 0 2px 9px rgba(124, 92, 255, .18);
}

html[data-route="app"] .step.active > .icon-badge,
html[data-route="app"] .step.active > .eyebrow,
html[data-route="app"] .step.active > h2,
html[data-route="app"] .step.active > .card,
html[data-route="app"] .step.active > .note,
html[data-route="app"] .step.active > .inline-warning,
html[data-route="app"] .step.active .home-hero,
html[data-route="app"] .step.active .home-point,
html[data-route="app"] .step.active .home-row {
  animation-duration: .46s;
  animation-timing-function: var(--motion-emphasis);
}

html[data-route="app"] #navWrap {
  animation: motionDockIn .38s var(--motion-emphasis) both;
}

html[data-route="app"] .btn,
html[data-route="app"] .home-chip,
html[data-route="site"] .btn,
html[data-route="site"] .landing-cta {
  transform: translateZ(0);
  transition:
    transform .18s var(--motion-standard),
    box-shadow .22s ease,
    filter .22s ease,
    opacity .22s ease;
}

html[data-route="app"] .btn:active,
html[data-route="app"] .home-chip:active,
html[data-route="site"] .btn:active,
html[data-route="site"] .landing-cta:active {
  transform: translateY(1px) scale(.985);
}

@media (hover: hover) and (pointer: fine) {
  html[data-route="app"] .btn:not(:disabled):hover,
  html[data-route="app"] .home-chip:hover,
  html[data-route="site"] .btn:not(:disabled):hover,
  html[data-route="site"] .landing-cta:hover {
    transform: translateY(-2px);
    filter: saturate(1.04);
  }
}

/* CMS: stable loading placeholders and short, purposeful transitions. */
html[data-route="admin"] .admin-page:not([hidden]),
html[data-route="admin"] .admin-menu:not([hidden]) {
  animation: cmsPanelIn .32s var(--motion-emphasis) both;
}

html[data-route="admin"] .admin-app button,
html[data-route="admin"] .admin-app .btn,
html[data-route="admin"] .notification-item,
html[data-route="admin"] .user-card,
html[data-route="admin"] .autopost-card,
html[data-route="admin"] .automation-rule,
html[data-route="admin"] .campaign-card {
  transition:
    transform .18s var(--motion-standard),
    box-shadow .22s ease,
    border-color .22s ease,
    background-color .22s ease,
    opacity .22s ease;
}

html[data-route="admin"] .admin-app button:active,
html[data-route="admin"] .admin-app .btn:active {
  transform: translateY(1px) scale(.985);
}

@media (hover: hover) and (pointer: fine) {
  html[data-route="admin"] .admin-menu .btn:hover,
  html[data-route="admin"] .autopost-card:hover,
  html[data-route="admin"] .automation-rule:hover,
  html[data-route="admin"] .campaign-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(62, 44, 84, .12);
  }
}

html[data-route="admin"] .btn.is-busy {
  position: relative;
  overflow: hidden;
  cursor: wait;
}

html[data-route="admin"] .btn.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, .34) 48%, transparent 68%);
  transform: translateX(-110%);
  animation: cmsButtonSweep 1.05s ease-in-out infinite;
}

.cms-skeleton-list {
  min-height: 148px;
}

.cms-skeleton-card {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: var(--panel);
}

.cms-skeleton-card + .cms-skeleton-card {
  margin-top: 10px;
}

.cms-skeleton-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 22%, rgba(255, 255, 255, .46) 46%, transparent 70%);
  transform: translateX(-110%);
  animation: cmsSkeletonSweep 1.28s ease-in-out infinite;
}

.cms-skeleton-line {
  display: block;
  height: 12px;
  margin-top: 11px;
  border-radius: 999px;
  background: var(--panel-2);
}

.cms-skeleton-line:first-child {
  width: 38%;
  height: 14px;
  margin-top: 0;
}

.cms-skeleton-line:nth-child(2) { width: 88%; }
.cms-skeleton-line:nth-child(3) { width: 72%; }
.cms-skeleton-line:nth-child(4) { width: 56%; }

html[data-native-admin="true"] .cms-skeleton-card {
  border-color: var(--admin-light-line);
  background: rgba(255, 255, 255, .93);
  box-shadow: var(--admin-light-shadow);
}

html[data-native-admin="true"] .cms-skeleton-line {
  background: linear-gradient(90deg, #efecf3, #f5f3f8);
}

html[data-route="admin"] .metric-updated {
  animation: cmsMetricUpdate .34s var(--motion-emphasis) both;
}

@keyframes motionDockIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes motionButtonSheen {
  0% { background-position: 160% 0; opacity: 0; }
  22% { opacity: .9; }
  100% { background-position: -160% 0; opacity: 0; }
}

@keyframes cmsPanelIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cmsButtonSweep {
  0% { transform: translateX(-110%); }
  65%, 100% { transform: translateX(110%); }
}

@keyframes cmsSkeletonSweep {
  0% { transform: translateX(-110%); }
  68%, 100% { transform: translateX(110%); }
}

@keyframes cmsMetricUpdate {
  0% { opacity: .45; transform: translateY(3px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes premiumRegisterFocus {
  0%, 100% {
    transform: translateZ(0);
    box-shadow: var(--premium-cta-shadow);
  }
  50% {
    transform: translateY(-1px) scale(1.004);
    box-shadow:
      0 14px 30px rgba(62, 48, 94, .19),
      inset 0 1px 0 rgba(255, 255, 255, .26);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-route="app"] #navWrap,
  html[data-route="admin"] .admin-page:not([hidden]),
  html[data-route="admin"] .admin-menu:not([hidden]),
  html[data-route="admin"] .metric-updated,
  html[data-route="app"] .btn.primary.is-register-focus,
  html[data-route="admin"] .btn.is-busy::after,
  .cms-skeleton-card::after {
    animation: none !important;
  }

  html[data-route="app"] .home-cta::before {
    display: none !important;
  }

  html[data-route="app"] .progress-fill,
  html[data-route="app"] .dots i,
  html[data-route="app"] .btn,
  html[data-route="app"] .home-chip,
  html[data-route="admin"] .admin-app button,
  html[data-route="admin"] .admin-app .btn {
    transition-duration: .01ms !important;
  }
}

@media (max-width: 360px) {
  html[data-route="app"] .app {
    padding-right: 10px;
    padding-left: 10px;
  }

  html[data-route="app"] #navWrap {
    width: calc(100% - 20px);
  }

  html[data-route="app"] .btn {
    padding-right: 13px;
    padding-left: 13px;
  }
}

@media (max-height: 700px) {
  html[data-route="app"] #navWrap {
    bottom: max(6px, env(safe-area-inset-bottom));
    padding: 7px;
  }

  html[data-route="app"] .btn {
    min-height: 48px;
  }
}

/* Final canvas: one uninterrupted surface behind every section. */
html[data-route="app"] {
  --app-canvas: #f7f6fb;
  --app-canvas-gradient: linear-gradient(
    180deg,
    #f5f4f8 0%,
    #efeff4 46%,
    #f7f6fb 100%
  );
  --bg: var(--app-canvas);
  --studio-bg: var(--app-canvas);
  background-color: var(--app-canvas);
  background-image: none;
}

html[data-route="app"] body {
  position: relative;
  isolation: isolate;
  background-color: var(--app-canvas);
  background-image: none;
}

/* Fixed oversized layer prevents WebView seams when mobile bars resize. */
html[data-route="app"] body::before {
  content: "";
  position: fixed;
  inset: -20vh -20vw;
  z-index: 0;
  display: block;
  pointer-events: none;
  opacity: 1;
  background-color: var(--app-canvas);
  background-image: var(--app-canvas-gradient);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-mask-image: none;
  mask-image: none;
  transform: translateZ(0);
}

html[data-route="app"] #appView {
  position: relative;
  z-index: 1;
  background-color: transparent;
  background-image: none;
}

html[data-route="app"] .app,
html[data-route="app"] .stage,
html[data-route="app"] .step,
html[data-route="app"] .step.active {
  background-color: transparent;
  background-image: none;
}

html[data-route="app"] .guide-head-shell {
  background-color: rgba(245, 244, 248, .88);
  background-image: none;
  -webkit-backdrop-filter: blur(18px) saturate(110%);
  backdrop-filter: blur(18px) saturate(110%);
}

html[data-route="app"] .guide-head-shell::after {
  right: -24px;
  left: -24px;
  height: 72px;
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(245, 244, 248, .94) 0%,
    rgba(245, 244, 248, .86) 18%,
    rgba(245, 244, 248, .66) 42%,
    rgba(245, 244, 248, .34) 66%,
    rgba(245, 244, 248, .09) 84%,
    transparent 100%
  );
  -webkit-mask-image: none;
  mask-image: none;
}

html[data-route="app"] .app:has(.step[data-step="home"].active) .guide-head-shell::after {
  height: 28px;
  background-image: linear-gradient(
    to bottom,
    rgba(245, 244, 248, .88),
    rgba(245, 244, 248, .34) 56%,
    transparent 100%
  );
  -webkit-mask-image: none;
  mask-image: none;
}

html[data-route="app"] #appView::after {
  background: linear-gradient(
    to bottom,
    rgba(247, 246, 251, 0) 0%,
    rgba(247, 246, 251, .06) 14%,
    rgba(247, 246, 251, .22) 28%,
    rgba(247, 246, 251, .48) 43%,
    rgba(247, 246, 251, .76) 58%,
    rgba(247, 246, 251, .94) 73%,
    var(--app-canvas) 89%,
    var(--app-canvas) 100%
  );
}

html[data-route="app"] #appView::before {
  background: var(--app-canvas);
}

html[data-route="app"] #navWrap {
  background: rgba(255, 255, 255, .90);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 16px 46px rgba(54, 43, 68, .045);
}

html[data-route="app"] .card,
html[data-route="app"] .home-hero {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 18px 52px rgba(54, 43, 68, .035);
}

html[data-route="app"] .topbar,
html[data-route="app"] .progress-wrap,
html[data-route="app"] .note,
html[data-route="app"] .inline-warning {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 14px 42px rgba(54, 43, 68, .035);
}

/* Content surfaces dissolve into the shared canvas instead of ending in a gray strip. */
html[data-route="app"] .card {
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(68, 52, 86, .085);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .99) 0%,
      rgba(253, 252, 255, .97) 52%,
      rgba(248, 247, 252, .94) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 14px 36px rgba(54, 43, 68, .045),
    0 3px 10px rgba(54, 43, 68, .025);
}

html[data-route="app"] .card::before {
  z-index: 2;
}

html[data-route="app"] .card::after {
  content: none;
  display: none;
}

html[data-route="app"] .note,
html[data-route="app"] .inline-warning {
  background:
    linear-gradient(
      120deg,
      rgba(var(--scene-rgb-a), .075),
      rgba(var(--scene-rgb-b), .022) 54%,
      rgba(255, 255, 255, .68) 100%
    ),
    rgba(255, 255, 255, .72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 14px 30px -26px rgba(54, 43, 68, .14);
}

/* Every checklist uses one fixed icon column, independent of text length. */
html[data-route="app"] .card .bullet {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  column-gap: 12px;
  width: 100%;
  text-align: left;
}

html[data-route="app"] .card .bullet .dot-ico {
  grid-column: 1;
  place-self: center;
  width: 24px;
  height: 24px;
  margin: 0;
}

html[data-route="app"] .card .bullet > div {
  grid-column: 2;
  min-width: 0;
  width: 100%;
  margin: 0;
  text-align: left;
}

html[data-route="app"] .card .bullet b {
  display: inline;
}

/* Production polish: short, seamless occlusion below the sticky guide header. */
html[data-route="app"] {
  --app-canvas: #fbfafd;
  --app-canvas-gradient: linear-gradient(
    180deg,
    #fcfbfe 0%,
    #faf9fd 46%,
    #fbfafd 100%
  );
  background-color: var(--app-canvas);
}

html[data-route="app"] body,
html[data-route="app"] #appView,
html[data-route="app"] .app,
html[data-route="app"] .stage,
html[data-route="app"] .step,
html[data-route="app"] .step.active {
  background-color: transparent;
  background-image: none;
}

html[data-route="app"] body {
  background-color: var(--app-canvas);
}

html[data-route="app"] body::before {
  background-color: var(--app-canvas);
  background-image: var(--app-canvas-gradient);
}

html[data-route="app"] .guide-head-shell {
  background-color: rgba(251, 250, 253, .88);
  background-image: none;
  -webkit-backdrop-filter: blur(20px) saturate(112%);
  backdrop-filter: blur(20px) saturate(112%);
}

html[data-route="app"] .guide-head-shell::after {
  top: calc(100% - 2px);
  right: auto;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 48px;
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(251, 250, 253, .90) 0%,
    rgba(251, 250, 253, .70) 22%,
    rgba(251, 250, 253, .42) 46%,
    rgba(251, 250, 253, .17) 70%,
    rgba(251, 250, 253, .04) 84%,
    transparent 100%
  );
  -webkit-backdrop-filter: blur(7px) saturate(106%);
  backdrop-filter: blur(7px) saturate(106%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.82) 44%, rgba(0,0,0,.34) 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.82) 44%, rgba(0,0,0,.34) 76%, transparent 100%);
  transform: translateZ(0);
}

html[data-route="app"] .app:has(.step[data-step="home"].active) .guide-head-shell::after {
  height: 18px;
  background-image: linear-gradient(
    to bottom,
    rgba(251, 250, 253, .62),
    rgba(251, 250, 253, .16) 58%,
    transparent 100%
  );
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

html[data-route="app"] #appView::after {
  background: linear-gradient(
    to bottom,
    rgba(251, 250, 253, 0) 0%,
    rgba(251, 250, 253, .05) 22%,
    rgba(251, 250, 253, .24) 42%,
    rgba(251, 250, 253, .60) 62%,
    rgba(251, 250, 253, .92) 80%,
    var(--app-canvas) 100%
  );
}

html[data-route="app"] #appView::before {
  background: var(--app-canvas);
}

html[data-route="app"] .card,
html[data-route="app"] .home-hero {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 10px 28px rgba(54, 43, 68, .028),
    0 2px 8px rgba(54, 43, 68, .018);
}

html[data-route="app"] .topbar,
html[data-route="app"] .progress-wrap,
html[data-route="app"] .note,
html[data-route="app"] .inline-warning {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 9px 26px rgba(54, 43, 68, .028);
}

html[data-route="app"] .progress-fill {
  transition: width .76s cubic-bezier(.2, .86, .24, 1), background-color .32s ease;
}

html[data-route="app"] .step.active > .icon-badge,
html[data-route="app"] .step.active > .eyebrow,
html[data-route="app"] .step.active > h2,
html[data-route="app"] .step.active > .card,
html[data-route="app"] .step.active > .note,
html[data-route="app"] .step.active > .inline-warning,
html[data-route="app"] .step.active .home-hero,
html[data-route="app"] .step.active .home-row {
  animation-duration: .52s;
  animation-timing-function: var(--motion-emphasis);
}

/* Full-bleed atmosphere: never let the canvas tint end at the card width. */
html[data-route="app"] body::before {
  inset: -24vh -48vw;
  background-color: var(--app-canvas);
  background-image:
    radial-gradient(
      ellipse 72% 48% at 50% 42%,
      rgba(73, 61, 88, .032) 0%,
      rgba(73, 61, 88, .014) 46%,
      transparent 78%
    ),
    var(--app-canvas-gradient);
  background-size: 100% 100%, 100% 100%;
  background-position: center, center;
}

html[data-route="app"] .card {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .98) 0%,
      rgba(255, 255, 255, .91) 58%,
      rgba(255, 255, 255, .84) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 18px 44px -30px rgba(54, 43, 68, .14),
    0 4px 12px -9px rgba(54, 43, 68, .08);
}

/* Opaque sticky header with a tighter hand-off to the scroll fade. */
html[data-route="app"] .guide-head-shell {
  background-color: var(--app-canvas);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-route="app"] .topbar,
html[data-route="app"] .progress-wrap {
  background-color: #fff;
  background-image: linear-gradient(
    118deg,
    rgba(var(--scene-rgb-a), .022),
    rgba(var(--scene-rgb-b), .012) 52%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-route="app"] .stage {
  margin-top: 16px;
}

html[data-route="app"] .app:has(.step[data-step="home"].active) .stage {
  margin-top: 4px;
}

html[data-route="app"] .guide-head-shell::after {
  height: 40px;
  background-image: linear-gradient(
    to bottom,
    rgba(251, 250, 253, .92) 0%,
    rgba(251, 250, 253, .66) 14%,
    rgba(251, 250, 253, .30) 34%,
    rgba(251, 250, 253, .10) 54%,
    rgba(251, 250, 253, .02) 72%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, .76) 34%,
    rgba(0, 0, 0, .24) 68%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, .76) 34%,
    rgba(0, 0, 0, .24) 68%,
    transparent 100%
  );
}

html[data-route="app"] .app:has(.step[data-step="home"].active) .guide-head-shell::after {
  height: 16px;
  background-image: linear-gradient(
    to bottom,
    rgba(251, 250, 253, .58),
    rgba(251, 250, 253, .12) 52%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .72), transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .72), transparent 100%);
}

/* Every checklist item keeps a complete, equally visible outline. */
html[data-route="app"] .card .bullet,
html[data-route="app"] .card .bullet:first-of-type {
  border: 1px solid rgba(60, 45, 79, .13);
  background-color: rgba(249, 248, 252, .97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .86),
    0 3px 9px rgba(54, 43, 68, .025);
}

/* Notes should read as intentional guidance, not as a disabled card. */
html[data-route="app"] .note,
html[data-route="app"] .inline-warning {
  color: #473e52;
  border: 1px solid rgba(var(--scene-rgb-a), .32);
  background:
    linear-gradient(
      118deg,
      rgba(var(--scene-rgb-a), .16) 0%,
      rgba(var(--scene-rgb-b), .085) 52%,
      rgba(255, 255, 255, .82) 100%
    ),
    #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .76),
    0 10px 24px -18px rgba(var(--scene-rgb-a), .34);
}

html[data-route="app"] .note svg,
html[data-route="app"] .inline-warning svg {
  stroke: var(--scene-a);
  filter: drop-shadow(0 2px 5px rgba(var(--scene-rgb-a), .18));
}

/* Direction follows the navigation action without turning the guide into a carousel. */
html[data-route="app"] #appView[data-step-direction="forward"] .step.active {
  animation: guideStepForwardIn .38s var(--motion-emphasis) both;
}

html[data-route="app"] #appView[data-step-direction="backward"] .step.active {
  animation: guideStepBackwardIn .38s var(--motion-emphasis) both;
}

/* Compact visual explanation for the income conversion path. */
html[data-route="app"] .income-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  margin: 2px 0 11px;
  padding: 10px 8px;
  border: 1px solid rgba(60, 45, 79, .10);
  border-radius: 12px;
  background: linear-gradient(115deg, rgba(255, 102, 145, .065), rgba(121, 92, 255, .055) 52%, rgba(47, 207, 159, .06));
}

html[data-route="app"] .income-flow-node {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  color: #302838;
  text-align: center;
}

html[data-route="app"] .income-flow-node b {
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
  color: #302838;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
}

html[data-route="app"] .income-flow-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 11px;
  color: #fff;
  box-shadow: 0 8px 18px -12px rgba(47, 38, 63, .44), inset 0 1px 0 rgba(255, 255, 255, .28);
}

html[data-route="app"] .income-flow-node:nth-of-type(1) .income-flow-icon {
  background: linear-gradient(145deg, #ff7b76, #ef428f);
}

html[data-route="app"] .income-flow-node:nth-of-type(2) .income-flow-icon {
  background: linear-gradient(145deg, #58cde9, #7656ec);
}

html[data-route="app"] .income-flow-node:nth-of-type(3) .income-flow-icon {
  background: linear-gradient(145deg, #52d6b0, #269b83);
}

html[data-route="app"] .income-flow-icon svg {
  width: 20px;
  height: 20px;
}

html[data-route="app"] .income-flow-arrow {
  width: 16px;
  height: 12px;
  overflow: visible;
  stroke: rgba(70, 57, 84, .42);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-route="app"] .step[data-step="3"].active .income-flow-node {
  animation: incomeFlowNodeIn .46s var(--motion-emphasis) both;
}

html[data-route="app"] .step[data-step="3"].active .income-flow-node:nth-of-type(1) {
  animation-delay: .18s;
}

html[data-route="app"] .step[data-step="3"].active .income-flow-node:nth-of-type(2) {
  animation-delay: .32s;
}

html[data-route="app"] .step[data-step="3"].active .income-flow-node:nth-of-type(3) {
  animation-delay: .46s;
}

html[data-route="app"] .step[data-step="3"].active .income-flow-arrow {
  animation: incomeFlowArrowIn .38s .30s var(--motion-standard) both;
}

html[data-route="app"] .step[data-step="3"].active .income-flow-arrow:last-of-type {
  animation-delay: .44s;
}

/* Every checklist is read top-to-bottom: row first, then its check mark. */
html[data-route="app"] .step.active.is-motion-entry .card .bullet {
  animation: guideChecklistRowReveal .46s var(--bullet-delay, 340ms) var(--motion-emphasis) both;
}

html[data-route="app"] .step.active.is-motion-entry .card .bullet .dot-ico {
  animation: guideCheckReveal .40s var(--check-delay, 420ms) var(--motion-emphasis) both;
}

html[data-route="app"] .step[data-step="3"].active.is-motion-entry .rate-box .exchange-count {
  display: inline-block;
  min-width: 1ch;
  font-variant-numeric: tabular-nums;
  animation: exchangeCountFocus .56s .62s var(--motion-emphasis) both;
}

html[data-route="app"] .step[data-step="4"].active.is-motion-entry .pay-chip {
  animation: payoutMethodReveal .42s var(--motion-emphasis) both;
}

html[data-route="app"] .step[data-step="4"].active.is-motion-entry .pay-chip:nth-child(1) {
  animation-delay: .34s;
}

html[data-route="app"] .step[data-step="4"].active.is-motion-entry .pay-chip:nth-child(2) {
  animation-delay: .47s;
}

html[data-route="app"] .step[data-step="4"].active.is-motion-entry .pay-chip:nth-child(3) {
  animation-delay: .60s;
}

html[data-route="app"] .step[data-step="4"].active.is-motion-entry .pay-chip:nth-child(4) {
  animation-delay: .73s;
}

html[data-route="app"] #nextBtn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

html[data-route="app"] #nextBtn::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%);
  transform: translateX(-130%);
  opacity: 0;
}

html[data-route="app"] #nextBtn.is-content-cue::after {
  animation: nextActionSheen .72s var(--motion-standard) both;
}

/* A single completion cue, then the interface settles. */
html[data-route="app"] .step[data-step="final"].active .final .icon-badge {
  overflow: visible;
}

/* The completion screen reads as one short sequence, not simultaneous motion. */
html[data-route="app"] .step[data-step="final"].active.is-motion-entry .final::after {
  animation: finalGuideMediaReveal .64s .06s var(--motion-emphasis) both;
  transform-origin: 50% 32%;
}

html[data-route="app"] .step[data-step="final"].active.is-motion-entry .final > .icon-badge {
  animation: finalGuideContentReveal .42s .30s var(--motion-emphasis) both;
}

html[data-route="app"] .step[data-step="final"].active.is-motion-entry .final > h2 {
  animation: finalGuideContentReveal .46s .40s var(--motion-emphasis) both;
}

html[data-route="app"] .step[data-step="final"].active.is-motion-entry .final > p {
  animation: finalGuideContentReveal .48s .50s var(--motion-emphasis) both;
}

html[data-route="app"] .step[data-step="final"].active.is-motion-entry .final > .final-home-row {
  animation: finalGuideContentReveal .48s .62s var(--motion-emphasis) both;
}

html[data-route="app"] .step[data-step="final"].active .final .icon-badge::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid rgba(115, 83, 232, .34);
  border-radius: inherit;
  pointer-events: none;
  animation: guideCompletionRing .9s .26s var(--motion-emphasis) both;
}

html[data-route="app"] .progress-track {
  position: relative;
  overflow: hidden;
}

html[data-route="app"] .app:has(.step[data-step="final"].active) .progress-track::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 28%, rgba(255, 255, 255, .72) 50%, transparent 72%);
  transform: translateX(-120%);
  animation: guideCompletionSweep .72s .24s var(--motion-standard) both;
}

html[data-route="app"] .btn.primary.is-register-focus {
  animation: guideCompletionCta .88s .42s var(--motion-emphasis) both;
}

@keyframes guideStepForwardIn {
  from { opacity: .28; transform: translate3d(0, 5px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes guideStepBackwardIn {
  from { opacity: .28; transform: translate3d(0, -3px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes incomeFlowNodeIn {
  from { opacity: 0; transform: translateY(5px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes incomeFlowArrowIn {
  from { opacity: 0; transform: translateX(-5px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes guideCheckReveal {
  0% { opacity: 0; filter: saturate(.72) brightness(1.08); }
  68% { opacity: 1; filter: saturate(1.08) brightness(1.03); }
  100% { opacity: 1; filter: none; }
}

@keyframes guideChecklistRowReveal {
  0% { opacity: 0; transform: translateY(7px); }
  72% { opacity: 1; transform: translateY(-1px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes exchangeCountFocus {
  0% { opacity: .42; transform: translateY(3px) scale(.94); }
  64% { opacity: 1; transform: translateY(0) scale(1.045); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes payoutMethodReveal {
  0% { opacity: 0; transform: translateY(7px) scale(.96); }
  72% { opacity: 1; transform: translateY(-1px) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nextActionSheen {
  0% { opacity: 0; transform: translateX(-130%); }
  18% { opacity: .78; }
  100% { opacity: 0; transform: translateX(130%); }
}

@keyframes guideCompletionRing {
  0% { opacity: 0; transform: scale(.76); }
  46% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.24); }
}

@keyframes finalGuideMediaReveal {
  from { opacity: 0; transform: translateY(7px) scale(1.018); filter: saturate(.86); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); }
}

@keyframes finalGuideContentReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes guideCompletionSweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

@keyframes guideCompletionCta {
  0%, 100% { transform: translateZ(0); box-shadow: var(--premium-cta-shadow); }
  50% { transform: translateY(-2px) scale(1.006); box-shadow: 0 13px 28px rgba(62, 48, 94, .19), inset 0 1px 0 rgba(255, 255, 255, .28); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-route="app"] #appView[data-step-direction] .step.active,
  html[data-route="app"] .step[data-step="3"].active .income-flow-node,
  html[data-route="app"] .step[data-step="3"].active .income-flow-arrow,
  html[data-route="app"] .step.active.is-motion-entry .card .bullet,
  html[data-route="app"] .step.active.is-motion-entry .card .bullet .dot-ico,
  html[data-route="app"] .step[data-step="3"].active.is-motion-entry .rate-box .exchange-count,
  html[data-route="app"] .step[data-step="4"].active.is-motion-entry .pay-chip,
  html[data-route="app"] #nextBtn.is-content-cue::after,
  html[data-route="app"] .step[data-step="final"].active.is-motion-entry .final::after,
  html[data-route="app"] .step[data-step="final"].active.is-motion-entry .final > .icon-badge,
  html[data-route="app"] .step[data-step="final"].active.is-motion-entry .final > h2,
  html[data-route="app"] .step[data-step="final"].active.is-motion-entry .final > p,
  html[data-route="app"] .step[data-step="final"].active.is-motion-entry .final > .final-home-row,
  html[data-route="app"] .step[data-step="final"].active .final .icon-badge::after,
  html[data-route="app"] .app:has(.step[data-step="final"].active) .progress-track::after,
  html[data-route="app"] .btn.primary.is-register-focus {
    animation: none !important;
  }
}