:root {
  --bg: #0f172a;
  --text: #fff;
  --glass-bg: #ffffff08;
  --glass-border: #ffffff1a;
  --track-bg: #0f172a;
  --thumb: #3282b8;
  --thumb-hover: #bbe1fa;
  color-scheme: dark;
  --radius-sm: .75rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;
  --radius-xl: 2.5rem;
  --radius-pill: 999px;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --dur-fast: .2s;
  --dur-base: .3s;
  --dur-slow: .4s;
  --accent: #3282b8;
  --accent-strong: #1b6ca8;
  --accent-soft: #bbe1fa;
  --accent-deep: #0f4c75;
  --accent-fill: #2b719f;
  --accent-on-dark: #4b9ad2;
  --surface-1: #ffffff08;
  --surface-2: #ffffff0f;
  --surface-pop: #1e2739;
  --surface-bead: #161e30;
  --border-1: #ffffff14;
  --border-2: #ffffff24;
  --shadow-xs: 0 2px 8px #0000002e;
  --shadow-sm: 0 6px 16px -4px #00000047;
  --shadow-md: 0 12px 28px -8px #00000061;
  --shadow-lg: 0 20px 48px -12px #00000073;
  --shadow-accent: 0 10px 28px -6px #3282b852;
  --shadow-accent-lg: 0 16px 40px -8px #3282b85c;
  --focus-ring: 0 0 0 3px #3282b859;
  --font-mono: "Vazirmatn", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
}

body.light-theme {
  --bg: #f8fafc;
  --text: #0f172a;
  --glass-bg: #ffffffdb;
  --glass-border: #0f172a14;
  --track-bg: #e2e8f0;
  --thumb: #3282b8;
  --thumb-hover: #1b6ca8;
  color-scheme: light;
  --accent: #3282b8;
  --accent-strong: #1b6ca8;
  --accent-soft: #0f4c75;
  --accent-deep: #0f4c75;
  --surface-1: #0f172a06;
  --surface-2: #0f172a0d;
  --surface-pop: #fff;
  --surface-bead: #fdfefe;
  --border-1: #0f172a14;
  --border-2: #0f172a24;
  --shadow-xs: 0 2px 6px #0f172a0f;
  --shadow-sm: 0 6px 16px -4px #0f172a14;
  --shadow-md: 0 14px 32px -10px #0f172a1a;
  --shadow-lg: 0 24px 54px -16px #0f172a1f;
  --shadow-accent: 0 10px 24px -6px #3282b838;
  --shadow-accent-lg: 0 16px 36px -8px #3282b847;
  --focus-ring: 0 0 0 3px #3282b840;
}

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

.pc-preloader {
  z-index: 9999;
  background: var(--bg);
  justify-content: center;
  align-items: center;
  transition: opacity .5s, visibility .5s;
  display: flex;
  position: fixed;
  inset: 0;
}

.pc-preloader--done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pc-preloader__inner {
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  animation: .5s both pcPreloaderIn;
  display: flex;
  position: relative;
}

@keyframes pcPreloaderIn {
  from {
    opacity: 0;
    transform: scale(.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.pc-preloader__stage {
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  display: flex;
  position: relative;
}

.pc-preloader__blob {
  background: linear-gradient(135deg, #0f4c75, #3282b8 45%, #bbe1fa) 0 0 / 220% 220%;
  border-radius: 42% 58% 62% 38% / 46% 42% 58% 54%;
  width: 84px;
  height: 84px;
  animation: 3.6s ease-in-out infinite pcBlobMorph, 3.6s ease-in-out infinite pcBlobGradient;
  box-shadow: 0 18px 44px -14px #3282b88c;
}

body.light-theme .pc-preloader__blob {
  box-shadow: 0 18px 40px -14px #3282b866;
}

@keyframes pcBlobMorph {
  0%, 100% {
    border-radius: 42% 58% 62% 38% / 46% 42% 58% 54%;
    transform: rotate(0);
  }

  33% {
    border-radius: 58% 42% 44% 56% / 40% 60%;
    transform: rotate(8deg);
  }

  66% {
    border-radius: 46% 54% 58% 42% / 58% 44% 56% 42%;
    transform: rotate(-6deg);
  }
}

@keyframes pcBlobGradient {
  0%, 100% {
    background-position: 0 0;
  }

  50% {
    background-position: 100% 100%;
  }
}

.pc-preloader__ring {
  animation: pcRingPulse 2.4s var(--ease-standard) infinite;
  pointer-events: none;
  border: 1.5px solid #3282b873;
  border-radius: 50%;
  position: absolute;
  inset: 12px;
}

@keyframes pcRingPulse {
  0% {
    opacity: .9;
    transform: scale(.72);
  }

  70%, 100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

.pc-preloader__orbitwrap {
  pointer-events: none;
  animation: 2.8s linear infinite pcOrbitSpin;
  position: absolute;
  inset: 0;
}

.pc-preloader__orb {
  background: #bbe1fa;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  position: absolute;
  top: 4px;
  left: 50%;
  box-shadow: 0 0 10px #bbe1fae6;
}

body.light-theme .pc-preloader__orb {
  background: #1b6ca8;
  box-shadow: 0 0 8px #1b6ca899;
}

@keyframes pcOrbitSpin {
  to {
    transform: rotate(360deg);
  }
}

.pc-preloader__brand {
  letter-spacing: 0;
  background: linear-gradient(90deg,
    var(--accent-soft) 0%,
    var(--accent) 40%,
    var(--accent-soft) 80%);
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-clip: text;
  font-size: 1rem;
  font-weight: 900;
  animation: 2.4s linear infinite pcBrandShimmer;
}

@keyframes pcBrandShimmer {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-preloader__inner, .pc-preloader__inner * {
    animation: none !important;
  }
}

a:focus-visible, button:focus-visible, input:focus-visible, .theme-switch:focus-visible, [tabindex]:focus-visible {
  box-shadow: var(--focus-ring);
  border-radius: inherit;
  outline: none;
}

button:disabled, button.btn-ripple:disabled, .btn-primary-pill:disabled, .btn-secondary-pill:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

a, button, [role="button"], label.pc-switch, .faq-toggle, .theme-switch {
  cursor: pointer;
}

.faq-answer {
  transition: max-height var(--dur-base) var(--ease-in-out);
}

.faq-toggle:active {
  background: var(--surface-1);
}

.skip-link {
  z-index: 10000;
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
  color: #fff;
  transition: transform var(--dur-fast) var(--ease-standard);
  padding: 10px 20px;
  font-size: .85rem;
  font-weight: 700;
  position: fixed;
  top: 10px;
  right: 10px;
  transform: translateY(-250%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.theme-switch:after {
  content: "";
  position: absolute;
  inset: -8px;
}

.mobile-nav-btn {
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.text-white\/30 {
  color: #ffffff80 !important;
}

.text-white\/40 {
  color: #ffffff8c !important;
}

.text-white\/45 {
  color: #ffffff94 !important;
}

.text-white\/50 {
  color: #ffffff9e !important;
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  [data-aos] {
    opacity: 1 !important;
    transition: none !important;
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass-effect, .pc-menu, .notif-drawer, .pc-modal__overlay {
    -webkit-backdrop-filter: none !important;
  }

  .pc-modal__overlay {
    background: #020817e6;
  }

  body.light-theme .pc-modal__overlay {
    background: #0f172ab8;
  }
}

@media (prefers-contrast: more) {
  .glass, .glass-effect, .pc-menu, .notif-drawer, .pc-modal__panel, .spec-card {
    background: #09101ef5 !important;
    border-color: #ffffff8c !important;
  }

  .spec-card__sheen {
    display: none;
  }

  .spec-card__meta {
    border-top-color: #ffffff8c !important;
  }

  .svc__item {
    border-color: #ffffff8c !important;
  }

  body.light-theme .svc__item {
    border-color: #0f172aa6 !important;
  }

  body.light-theme .spec-card {
    background: #fff !important;
    border-color: #0f172aa6 !important;
  }

  body.light-theme .spec-card__meta {
    border-top-color: #0f172aa6 !important;
  }

  body.light-theme .glass, body.light-theme .glass-effect, body.light-theme .pc-menu, body.light-theme .notif-drawer, body.light-theme .pc-modal__panel {
    background: #fff !important;
    border-color: #0f172aa6 !important;
  }

  .form-hint, .pc-field__hint, .ad-muted {
    color: var(--text) !important;
    opacity: .92 !important;
  }

  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline-offset: 2px !important;
    outline: 3px solid !important;
  }
}

.art-layer {
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.art-layer img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity .4s;
}

body.light-theme .art-blueprint img {
  filter: invert() hue-rotate(195deg) saturate(1.15);
  mix-blend-mode: multiply;
}

.art-blueprint img {
  opacity: .34;
  mix-blend-mode: screen;
  object-position: center 30%;
}

body.light-theme .art-blueprint img {
  opacity: .35;
}

.kyc-card {
  border: 1px solid #3282b84d;
}

.kyc-icon {
  width: 48px;
  height: 48px;
  color: var(--accent);
  background: #3282b81f;
  border: 1px solid #3282b840;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  font-size: 1.15rem;
  display: flex;
}

.kyc-chip {
  border-radius: var(--radius-pill);
  color: #eab308;
  background: #eab3081f;
  border: 1px solid #eab3084d;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

body.light-theme .kyc-chip {
  color: #854d0e;
  background: #eab30824;
  border-color: #a1620759;
}

.kyc-secure {
  color: var(--text);
  opacity: .6;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 10px;
  display: inline-flex;
}

.kyc-secure i {
  color: #22c55e;
}

.kyc-mini-steps {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.kyc-mini-step {
  border-radius: var(--radius-pill);
  color: var(--text);
  opacity: .5;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
}

.kyc-mini-step.is-done {
  opacity: 1;
  color: #22c55e;
  background: #22c55e1a;
  border-color: #22c55e4d;
}

body.light-theme .kyc-mini-step.is-done {
  color: #166534;
}

.kyc-mini-step.is-current {
  opacity: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  box-shadow: var(--shadow-accent);
  border-color: #0000;
}

.kyc-mini-sep {
  background: var(--border-2);
  border-radius: 999px;
  flex-shrink: 0;
  width: 14px;
  height: 2px;
}

.kyc-chip--info {
  color: var(--accent);
  background: #3282b81f;
  border-color: #3282b84d;
}

body.light-theme .kyc-chip--info {
  color: #0f4c75;
  background: #3282b81f;
  border-color: #0f4c7559;
}

.pc-profile {
  position: relative;
}

.pc-avatar-btn {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  cursor: pointer;
  width: 44px;
  height: 44px;
  transition: transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
  border: none;
  border-radius: 50%;
  padding: 2px;
  position: relative;
}

.pc-avatar-btn:hover {
  box-shadow: var(--shadow-accent);
  transform: translateY(-2px);
}

.pc-avatar-btn:active {
  transform: scale(.92);
}

.pc-avatar-btn.is-open {
  box-shadow: var(--focus-ring);
}

.pc-avatar-btn__inner {
  background: var(--bg);
  width: 100%;
  height: 100%;
  color: var(--accent-soft);
  transition: background var(--dur-slow) ease;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  display: flex;
}

.pc-menu {
  z-index: 150;
  overscroll-behavior: contain;
  border: 1px solid var(--border-2);
  width: 304px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 84px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 #ffffff0f;
  opacity: 0;
  transform-origin: 0 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) ease,
    transform var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
  background: linear-gradient(#16274a 0%, #0f172a 72%);
  border-radius: 1.85rem;
  padding: 10px;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  overflow-y: auto;
  transform: translateY(-8px) scale(.96);
}

.pc-menu.open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  transform: none;
}

body.light-theme .pc-menu {
  background: #fff;
}

.pc-menu__hero {
  background: radial-gradient(130% 150% at 88% -25%, #3282b88c 0%, #0000 58%), linear-gradient(140deg, #1b3058 0%, #10203c 62%);
  border: 1px solid #bbe1fa29;
  border-radius: 1.4rem;
  align-items: center;
  gap: 13px;
  padding: 15px 14px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff14;
}

.pc-menu__hero-orb {
  filter: blur(42px);
  pointer-events: none;
  inset-inline-end: -34px;
  background: #3282b866;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  position: absolute;
  top: -46px;
}

.pc-menu__field {
  z-index: 0;
  opacity: .75;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pc-menu__field {
    opacity: .55;
  }
}

.pc-menu__avatar {
  z-index: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent) 55%, var(--accent-strong));
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  font-size: 18px;
  display: flex;
  position: relative;
  box-shadow: 0 6px 16px #3282b873, inset 0 1px #ffffff59;
}

.pc-menu__avatar-badge {
  color: #fff;
  bottom: -2px;
  background: #22c55e;
  border: 2px solid #10203c;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  font-size: 8px;
  display: flex;
  position: absolute;
  inset-inline-end: -2px;
}

.pc-menu__id {
  z-index: 1;
  flex: 1;
  min-width: 0;
  position: relative;
}

.pc-menu__name {
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 800;
  overflow: hidden;
}

.pc-menu__phone {
  color: #ffffff9e;
  text-align: right;
  font-size: 11px;
  font-family: var(--font-mono);
  direction: ltr;
  margin-top: 3px;
}

.pc-menu__kyc {
  white-space: nowrap;
  color: #fbbf24;
  background: #f59e0b2e;
  border: 1px solid #f59e0b4d;
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.pc-menu__kyc.is-verified {
  color: #4ade80;
  background: #22c55e2e;
  border-color: #22c55e52;
}

.pc-menu__wallet {
  cursor: pointer;
  width: 100%;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
    transform var(--dur-fast) ease;
  background: #3282b81a;
  border: 1px solid #3282b833;
  border-radius: 1.2rem;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  padding: 11px 12px;
  display: flex;
}

.pc-menu__wallet:hover, .pc-menu__wallet:focus-visible {
  background: #3282b829;
  border-color: #3282b861;
}

.pc-menu__wallet:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #3282b899;
}

.pc-menu__wallet:active {
  transform: scale(.985);
}

.pc-menu__wallet-ico {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  font-size: 15px;
  display: flex;
  box-shadow: inset 0 1px #ffffff47;
}

.pc-menu__wallet-body {
  text-align: right;
  flex: 1;
  min-width: 0;
}

.pc-menu__wallet-label {
  color: var(--text);
  opacity: .55;
  font-size: 10.5px;
  font-weight: 700;
  display: block;
}

.pc-menu__wallet-amount {
  color: var(--text);
  margin-top: 2px;
  font-size: 14px;
  font-weight: 900;
  display: block;
}

.pc-menu__wallet-cta {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: var(--shadow-accent);
  border-radius: 999px;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.pc-menu__group {
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  display: flex;
}

.pc-menu__item {
  width: 100%;
  min-height: 46px;
  color: var(--text);
  cursor: pointer;
  text-align: right;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
  background: none;
  border: none;
  border-radius: 14px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
}

.pc-menu__label {
  flex: 1;
  min-width: 0;
}

.pc-menu__chev {
  color: var(--text);
  opacity: .3;
  transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
  font-size: 10px;
}

.pc-menu__item:hover, .pc-menu__item:focus-visible {
  background: var(--surface-2);
  outline: none;
}

.pc-menu__item:focus-visible {
  box-shadow: inset 0 0 0 2px #3282b899;
}

.pc-menu__item:hover .pc-menu__chev, .pc-menu__item:focus-visible .pc-menu__chev {
  opacity: .6;
  transform: translateX(-3px);
}

.pc-menu__item:active {
  transform: scale(.98);
}

.pc-menu__icon {
  width: 36px;
  height: 36px;
  color: var(--accent);
  background: #3282b81a;
  border: 1px solid #3282b82e;
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  display: flex;
}

.pc-menu__icon.tone-blue {
  color: #5eb0e6;
  background: #3282b824;
  border-color: #3282b842;
}

.pc-menu__icon.tone-cyan {
  color: #38bdf8;
  background: #38bdf821;
  border-color: #38bdf840;
}

.pc-menu__icon.tone-green {
  color: #4ade80;
  background: #22c55e21;
  border-color: #22c55e40;
}

.pc-menu__icon.tone-violet {
  color: #a78bfa;
  background: #a78bfa24;
  border-color: #a78bfa42;
}

.pc-menu__icon.tone-amber {
  color: #fbbf24;
  background: #f59e0b24;
  border-color: #f59e0b42;
}

body.light-theme .pc-menu__icon.tone-blue {
  color: #1b6ca8;
}

body.light-theme .pc-menu__icon.tone-cyan {
  color: #0e7490;
}

body.light-theme .pc-menu__icon.tone-green {
  color: #15803d;
}

body.light-theme .pc-menu__icon.tone-violet {
  color: #6d28d9;
}

body.light-theme .pc-menu__icon.tone-amber {
  color: #b45309;
}

.pc-menu__sep {
  background: var(--border-1);
  height: 1px;
  margin: 8px 10px;
}

.pc-menu__item--danger {
  color: #f87171;
}

body.light-theme .pc-menu__item--danger {
  color: #dc2626;
}

.pc-menu__item--danger .pc-menu__icon {
  color: #ef4444;
  background: #ef44441a;
  border-color: #ef44442e;
}

.pc-menu__item--danger:hover, .pc-menu__item--danger:focus-visible {
  background: #ef44441a;
}

.pc-dp-anchor {
  position: relative;
}

.pc-dp {
  z-index: 20;
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform-origin: top;
  visibility: hidden;
  transition: opacity var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-standard),
    visibility 0s linear var(--dur-fast);
  background: linear-gradient(#14213b 0%, #0f172a 70%);
  border-radius: 1.25rem;
  padding: 14px;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  transform: translateY(-6px) scale(.97);
}

.pc-dp.open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  transform: none;
}

body.light-theme .pc-dp {
  background: #fff;
}

.pc-dp__head {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  display: flex;
}

.pc-dp__nav {
  width: 38px;
  height: 38px;
  color: var(--text);
  opacity: .65;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  cursor: pointer;
  transition: background var(--dur-fast) ease, opacity var(--dur-fast) ease,
    transform var(--dur-fast) ease;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  display: flex;
}

.pc-dp__nav:hover:not(:disabled) {
  opacity: 1;
  background: var(--surface-2);
}

.pc-dp__nav:active {
  transform: scale(.92);
}

.pc-dp__nav:disabled {
  opacity: .2;
  cursor: not-allowed;
}

.pc-dp__label {
  height: 38px;
  color: var(--accent-soft);
  cursor: pointer;
  transition: background var(--dur-fast) ease;
  background: none;
  border: none;
  border-radius: 12px;
  flex: 1;
  font-size: 13px;
  font-weight: 800;
}

.pc-dp__label:hover {
  background: var(--surface-1);
}

.pc-dp__week {
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
  display: grid;
}

.pc-dp__week span {
  color: var(--text);
  opacity: .45;
  text-align: center;
  padding: 4px 0;
  font-size: 10px;
  font-weight: 700;
}

.pc-dp__grid {
  animation: pcDpIn .18s var(--ease-standard);
  gap: 4px;
  display: grid;
}

.pc-dp__grid--days {
  grid-template-columns: repeat(7, 1fr);
}

.pc-dp__grid--months, .pc-dp__grid--years {
  grid-template-columns: repeat(3, 1fr);
}

@keyframes pcDpIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.pc-dp__cell {
  height: 38px;
  color: var(--text);
  opacity: .85;
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
    transform var(--dur-fast) ease;
  background: none;
  border: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
}

.pc-dp__grid--months .pc-dp__cell, .pc-dp__grid--years .pc-dp__cell {
  height: 44px;
}

.pc-dp__cell:hover:not(:disabled) {
  background: var(--surface-2);
  opacity: 1;
}

.pc-dp__cell:active {
  transform: scale(.94);
}

.pc-dp__cell:disabled {
  opacity: .22;
  cursor: not-allowed;
}

.pc-dp__cell.is-selected {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  color: #fff;
  opacity: 1;
  box-shadow: var(--shadow-accent);
}

.kyc-chip--ok {
  color: #22c55e;
  background: #22c55e1f;
  border-color: #22c55e4d;
}

body.light-theme .kyc-chip--ok {
  color: #166534;
  border-color: #16a34a59;
}

.txn-card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
  border-radius: 18px;
  overflow: hidden;
}

.txn-card:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}

.txn-card__head {
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  display: flex;
}

.txn-card__id {
  flex: 1;
  min-width: 0;
}

.txn-card__sub {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 6px;
  display: flex;
}

.txn-flow {
  border-radius: var(--radius-pill);
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.txn-flow--in {
  color: #4ade80;
  background: #22c55e1f;
  border: 1px solid #22c55e3d;
}

.txn-flow--out {
  color: var(--accent-soft);
  background: #3282b81f;
  border: 1px solid #3282b83d;
}

.txn-flow--void {
  color: var(--text);
  opacity: .55;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
}

body.light-theme .txn-flow--void, body.light-theme .txn-date, body.light-theme .txn-tile__k, body.light-theme .txn-ref__k {
  opacity: .75;
}

body.light-theme .txn-flow--in {
  color: #166534;
}

body.light-theme .txn-flow--out {
  color: var(--accent-strong);
}

.txn-card__detail {
  border-top: 1px dashed var(--border-1);
  background: #0000001f;
  padding: 12px 16px 14px;
}

body.light-theme .txn-card__detail {
  background: #0f172a05;
}

.txn-refs {
  flex-wrap: wrap;
  gap: 6px 8px;
  display: flex;
}

.txn-ref {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 10.5px;
  display: inline-flex;
}

.txn-ref__k {
  color: var(--text);
  opacity: .5;
}

.txn-ref__v {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.txn-ref.is-copy {
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
  position: relative;
}

.txn-ref.is-copy:after {
  content: "";
  position: absolute;
  inset: -9px 0;
}

.txn-ref.is-copy:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}

.txn-ref.is-copy:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.txn-ref__ico, .txn-ref__ok {
  font-size: 9.5px;
}

.txn-ref__ico {
  opacity: .4;
}

.txn-ref__ok {
  color: #4ade80;
  display: none;
}

.txn-ref.is-copied .txn-ref__ico {
  display: none;
}

.txn-ref.is-copied .txn-ref__ok {
  display: inline;
}

.txn-tiles {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 8px;
  margin-top: 10px;
  display: grid;
}

.txn-tile {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  flex-direction: column;
  gap: 4px;
  padding: 9px 11px;
  display: flex;
}

.txn-tile__k {
  color: var(--text);
  opacity: .5;
  font-size: 10px;
}

.txn-tile__v {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 800;
}

.txn-tile__u {
  opacity: .6;
  font-size: 9.5px;
  font-weight: 500;
}

.txn-tile--fee {
  background: #f59e0b1a;
  border-color: #f59e0b47;
}

.txn-tile--fee .txn-tile__v {
  color: #fbbf24;
}

body.light-theme .txn-tile--fee .txn-tile__v {
  color: #92400e;
}

.txn-tile--usd {
  background: #3282b81f;
  border-color: #3282b847;
}

.txn-tile--usd .txn-tile__v {
  color: var(--accent-soft);
}

body.light-theme .txn-tile--usd .txn-tile__v {
  color: var(--accent-deep);
}

.txn-icon {
  border-radius: 14px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  font-size: 14px;
  display: flex;
}

.txn-icon--in {
  color: #22c55e;
  background: #22c55e1f;
  border: 1px solid #22c55e33;
}

.txn-icon--out {
  color: var(--accent);
  background: #3282b81f;
  border: 1px solid #3282b833;
}

.txn-icon--fail {
  color: #ef4444;
  background: #ef44441a;
  border: 1px solid #ef44442e;
}

.txn-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.txn-date {
  color: var(--text);
  opacity: .5;
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
}

.txn-amount {
  white-space: nowrap;
  text-align: left;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 800;
}

.txn-amount__u {
  opacity: .6;
  font-size: 10px;
  font-weight: 400;
}

.txn-amount--in {
  color: #22c55e;
}

body.light-theme .txn-amount--in {
  color: #166534;
}

.txn-amount--out {
  color: var(--text);
  opacity: .85;
}

.txn-amount--fail {
  color: #f87171;
  opacity: .85;
  text-decoration: line-through;
}

body.light-theme .txn-amount--fail {
  color: #b91c1c;
}

.amount-chip {
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease,
    color var(--dur-fast) ease, transform var(--dur-fast) ease;
  border-radius: 14px;
  padding: 12px 8px;
  font-size: 12px;
  font-weight: 700;
}

.amount-chip:hover {
  background: var(--surface-2);
  border-color: #3282b880;
}

.amount-chip:active {
  transform: scale(.97);
}

.amount-chip.is-active {
  color: var(--accent-soft);
  border-color: var(--accent);
  background: #3282b81f;
}

.bank-item {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  transition: border-color var(--dur-fast) ease;
  border-radius: 20px;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  display: flex;
}

.bank-item.is-default {
  border-color: #3282b866;
}

.bank-item__icon {
  width: 44px;
  height: 44px;
  color: var(--accent);
  background: #3282b81a;
  border: 1px solid #3282b82e;
  border-radius: 14px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  display: flex;
}

.topup-step {
  color: var(--text);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}

.topup-step__num {
  width: 22px;
  height: 22px;
  color: var(--accent-soft);
  background: #3282b824;
  border: 1px solid #3282b847;
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  display: inline-flex;
}

body.light-theme .topup-step__num {
  color: var(--accent-strong);
}

.topup-hint {
  color: #fbbf24;
  background: #eab30814;
  border: 1px dashed #eab30859;
  border-radius: 14px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.8;
  display: flex;
}

.topup-hint__btn {
  color: #fbbf24;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
  background: #eab3081f;
  border: 1px solid #eab30859;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
}

.topup-hint__btn:hover {
  color: #fde68a;
  background: #eab3083d;
}

body.light-theme .topup-hint {
  color: #a16207;
  background: #eab3081a;
  border-color: #a1620759;
}

body.light-theme .topup-hint__btn {
  color: #854d0e;
  border-color: #a1620759;
}

body.light-theme .topup-hint__btn:hover {
  color: #713f12;
  background: #eab30838;
}

.wallet-card-option {
  text-align: right;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  cursor: pointer;
  width: 100%;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease,
    transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  border-radius: 18px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}

.wallet-card-option:hover {
  background: var(--surface-2);
  border-color: #3282b873;
}

.wallet-card-option:active {
  transform: scale(.985);
}

.wallet-card-option.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
  background: #3282b81a;
}

.wallet-card-option__logo {
  border: 1px solid #0000;
  border-radius: 13px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  font-size: 17px;
  display: flex;
}

.wallet-card-option__logo img, .wallet-card-option__logo-img {
  object-fit: contain;
  width: 26px;
  height: 26px;
}

.wallet-card-option__tag {
  color: var(--accent-soft);
  background: #3282b81a;
  border: 1px solid #3282b840;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700;
}

.wallet-card-option__check {
  color: #fff;
  background: var(--accent);
  opacity: 0;
  width: 22px;
  height: 22px;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-standard);
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  display: flex;
  transform: scale(.5);
}

.wallet-card-option.is-selected .wallet-card-option__check {
  opacity: 1;
  transform: scale(1);
}

.vpn-modal__icon {
  color: #fbbf24;
  background: #eab3081f;
  border: 1px solid #eab3084d;
  border-radius: 22px;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  font-size: 24px;
  display: flex;
}

.vpn-modal__summary {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 16px;
  margin-top: 20px;
  padding: 4px 16px;
}

.vpn-modal__summary > div {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  font-size: 12px;
  display: flex;
}

.vpn-modal__summary > div + div {
  border-top: 1px dashed var(--border-1);
}

.vpn-modal__summary span {
  color: var(--text);
  opacity: .55;
  font-weight: 600;
}

.vpn-modal__summary b {
  font-weight: 800;
}

.vpn-modal__summary b span {
  opacity: 1;
  color: inherit;
  font-weight: inherit;
}

.vpn-modal__pan {
  font-family: var(--font-mono);
  letter-spacing: .04em;
  opacity: .85;
}

body.light-theme .vpn-modal__icon {
  color: #b45309;
  background: #b453091a;
  border-color: #b4530940;
}

.pen-alert__head {
  align-items: flex-start;
  gap: 14px;
  padding-inline-end: 34px;
  display: flex;
}

.pen-alert__icon {
  color: #f87171;
  background: #ef44441f;
  border: 1px solid #ef44444d;
  border-radius: 18px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  font-size: 20px;
  display: flex;
}

.pen-alert__title {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.7;
}

.pen-alert__box {
  background: #ef444412;
  border: 1px solid #ef444438;
  border-radius: 16px;
  margin-top: 18px;
  padding: 4px 15px;
}

.pen-alert__row {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  font-size: 12px;
  display: flex;
}

.pen-alert__row + .pen-alert__row {
  border-top: 1px dashed #ef444433;
}

.pen-alert__row > span {
  color: var(--text);
  opacity: .6;
  font-weight: 600;
}

.pen-alert__row > b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  display: inline-flex;
}

.pen-alert__row--sub {
  font-size: 11px;
}

.pen-alert__usd {
  color: #f87171;
  background: #ef44441f;
  border: 1px solid #ef44443d;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 800;
}

.pen-alert__state {
  color: #fbbf24 !important;
}

.pen-alert__revoked {
  color: #f87171;
  background: #ef44441a;
  border: 1px solid #ef444447;
  border-radius: 14px;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.9;
  display: flex;
}

.pen-alert__revoked[hidden] {
  display: none;
}

.pen-alert__why {
  color: #fbbf24;
  width: 100%;
  min-height: 44px;
  transition: background var(--dur-fast) ease;
  background: #fbbf241a;
  border: 1px dashed #fbbf2457;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
}

.pen-alert__why:hover {
  background: #fbbf242b;
}

.pen-alert__why:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fbbf244d;
}

body.light-theme .pen-alert__icon {
  color: #b91c1c;
  background: #b91c1c17;
  border-color: #b91c1c3d;
}

body.light-theme .pen-alert__usd, body.light-theme .pen-alert__revoked {
  color: #b91c1c;
}

body.light-theme .pen-alert__state {
  color: #b45309 !important;
}

body.light-theme .pen-alert__why {
  color: #92400e;
  background: #b4530914;
  border-color: #b453094d;
}

.pen-info__head {
  border-bottom: 1px solid var(--border-1);
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  display: flex;
}

.pen-info__icon {
  color: #fbbf24;
  background: #fbbf241f;
  border: 1px solid #fbbf244d;
  border-radius: 14px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  font-size: 16px;
  display: flex;
}

.pen-info__title {
  color: var(--text);
  flex: 1;
  font-size: 15px;
  font-weight: 900;
}

.pen-info__scroll {
  max-height: min(56vh, 460px);
  margin-inline-end: -4px;
  padding: 16px 4px 4px;
  overflow-y: auto;
}

.pen-info__lead {
  color: var(--text);
  opacity: .85;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 2.1;
}

.pen-info__sec {
  margin-top: 18px;
}

.pen-info__sec h3 {
  color: var(--text);
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
}

.pen-info__num {
  color: #fff;
  background: var(--accent-strong);
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  font-size: 10.5px;
  font-weight: 800;
  display: inline-flex;
}

.pen-info__num.is-danger {
  background: #dc2626;
}

.pen-info__num.is-ok {
  background: #16a34a;
}

.pen-info__sec p {
  color: var(--text);
  opacity: .75;
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 2.1;
}

.pen-info__amount {
  background: #fbbf241a;
  border: 1px solid #fbbf2447;
  border-radius: 12px;
  padding: 11px 13px;
  opacity: 1 !important;
}

.pen-info__amount b {
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.pen-info__list {
  flex-direction: column;
  gap: 7px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.pen-info__list li {
  color: var(--text);
  opacity: .75;
  padding-inline-start: 16px;
  font-size: 11.5px;
  line-height: 2.1;
  position: relative;
}

.pen-info__list li:before {
  content: "";
  background: var(--accent);
  inset-inline-start: 0;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 11px;
}

.pen-info__list li b {
  color: var(--text);
  opacity: 1;
  font-weight: 800;
}

.pen-info__sec--danger, .pen-info__sec--ok {
  border-radius: 14px;
  padding: 13px 14px;
}

.pen-info__sec--danger {
  background: #ef444414;
  border: 1px solid #ef44443d;
}

.pen-info__sec--danger .pen-info__list li:before {
  background: #ef4444;
}

.pen-info__sec--ok {
  background: #22c55e12;
  border: 1px solid #22c55e38;
}

.pen-info__sec--ok .pen-info__list li:before {
  background: #22c55e;
}

.pen-info__summary {
  color: var(--text);
  opacity: .85;
  background: var(--pcp-tint);
  border: 1px solid var(--pcp-tint-bd);
  border-radius: 14px;
  margin-top: 18px;
  padding: 12px 14px;
  font-size: 11.5px;
  line-height: 2.1;
}

.pen-info__summary b {
  opacity: 1;
  font-weight: 900;
}

body.light-theme .pen-info__icon {
  color: #b45309;
  background: #b453091a;
  border-color: #b4530942;
}

body.light-theme .pen-info__amount {
  background: #b4530914;
  border-color: #b4530942;
}

body.light-theme .pen-info__amount b {
  color: #92400e;
}

body.light-theme .pen-info__lead, body.light-theme .pen-info__sec p, body.light-theme .pen-info__list li, body.light-theme .pen-info__summary {
  opacity: 1;
  color: #0f172ac7;
}

body.light-theme .pen-info__list li b, body.light-theme .pen-info__summary b {
  color: #0f172a;
}

.pc-confirm {
  text-align: center;
  padding-top: 2px;
}

.pc-confirm__icon {
  color: #f87171;
  background: #ef44441f;
  border: 1px solid #ef44444d;
  border-radius: 22px;
  justify-content: center;
  align-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  font-size: 26px;
  display: flex;
  position: relative;
}

.pc-confirm__icon:after {
  content: "";
  border-radius: inherit;
  animation: pcConfirmPulse 2s var(--ease-standard) infinite;
  pointer-events: none;
  border: 1px solid #ef444447;
  position: absolute;
  inset: -6px;
}

@keyframes pcConfirmPulse {
  0% {
    opacity: .65;
    transform: scale(1);
  }

  70% {
    opacity: 0;
    transform: scale(1.14);
  }

  100% {
    opacity: 0;
  }
}

.pc-confirm__icon.is-brand {
  color: var(--accent);
  background: #3282b81f;
  border-color: #3282b84d;
}

.pc-confirm__icon.is-brand:after {
  border-color: #3282b847;
}

.pc-confirm__title {
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
}

.pc-confirm__msg {
  color: var(--text);
  opacity: .62;
  max-width: 320px;
  margin: 8px auto 0;
  font-size: 13px;
  line-height: 1.9;
}

.pc-confirm__actions {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
  display: grid;
}

.pc-confirm__btn {
  cursor: pointer;
  min-height: 48px;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
    transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
}

.pc-confirm__btn:active {
  transform: scale(.97);
}

.pc-confirm__btn:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.pc-confirm__btn--ghost {
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
}

.pc-confirm__btn--ghost:hover {
  border-color: var(--border-2);
  background: var(--surface-1);
}

.pc-confirm__btn--danger {
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 12px 26px -8px #ef444480;
}

.pc-confirm__btn--danger:hover {
  background: linear-gradient(135deg, #f05252, #e02424);
}

.pc-confirm__btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: var(--shadow-accent);
}

.pc-confirm__btn--primary:hover {
  filter: brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .pc-confirm__icon:after {
    animation: none;
  }
}

.wallet-hero {
  border-radius: var(--radius-xl);
  min-height: 240px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 #ffffff14;
  background: radial-gradient(120% 170% at 88% -25%, #3282b873 0%, #0000 55%), radial-gradient(95% 130% at -5% 115%, #0f4c7599 0%, #0000 60%), linear-gradient(150deg, #111d38 0%, #0c1425 48%, #12283f 100%);
  border: 1px solid #bbe1fa24;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.wallet-hero:before {
  content: "";
  border-radius: inherit;
  -webkit-mask-composite: xor;
  pointer-events: none;
  background: linear-gradient(135deg, #bbe1fa59, #0000 30% 62%, #3282b873);
  padding: 1px;
  position: absolute;
  inset: 0;
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-position: 0 0, 0 0;
  mask-size: auto, auto;
  mask-repeat: repeat, repeat;
  mask-clip: content-box, border-box;
  mask-origin: content-box, border-box;
  mask-composite: exclude;
  mask-mode: match-source, match-source;
}

.wallet-hero__sheen {
  animation: walletSheen 8s var(--ease-standard) infinite;
  pointer-events: none;
  background: linear-gradient(115deg, #0000 42%, #bbe1fa14 50%, #0000 58%);
  position: absolute;
  inset: -60%;
  transform: translateX(-70%);
}

@keyframes walletSheen {
  0%, 55% {
    transform: translateX(-70%);
  }

  85%, 100% {
    transform: translateX(70%);
  }
}

.wallet-hero__rings {
  pointer-events: none;
  background: repeating-radial-gradient(circle, #bbe1fa0e 0 1.5px, #0000 1.5px 26px);
  border-radius: 50%;
  width: 460px;
  height: 460px;
  position: absolute;
  bottom: -220px;
  left: -160px;
}

.wallet-hero__glow {
  filter: blur(70px);
  pointer-events: none;
  background: #3282b838;
  border-radius: 50%;
  width: 260px;
  height: 260px;
  position: absolute;
  top: -110px;
  right: -70px;
}

.wallet-hero__top, .wallet-hero__footer {
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
  position: relative;
}

.wallet-hero__top {
  align-items: flex-start;
}

.wallet-hero__mid {
  z-index: 1;
  position: relative;
}

.wallet-hero__chipwrap {
  align-items: center;
  gap: 14px;
  display: flex;
}

.wallet-hero__chip {
  background: linear-gradient(140deg, #ecdcae 0%, #c9a866 55%, #a8874b 100%);
  border-radius: 8px;
  width: 44px;
  height: 32px;
  position: relative;
  box-shadow: inset 0 0 0 1px #46341440, inset 0 1px #ffffff73, 0 2px 8px #00000059;
}

.wallet-hero__chip:before {
  content: "";
  border: 1px solid #4634144d;
  border-radius: 5px;
  position: absolute;
  inset: 5px;
}

.wallet-hero__chip:after {
  content: "";
  background: #4634144d;
  width: 1px;
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 50%;
}

.wallet-hero__nfc {
  color: #bbe1fa73;
  font-size: 17px;
  transform: rotate(90deg);
}

.wallet-hero__labelrow {
  align-items: center;
  gap: 10px;
  display: flex;
}

.wallet-hero__label {
  color: #fff9;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 700;
}

.wallet-hero__eye {
  color: #ffffff80;
  width: 32px;
  height: 32px;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
  background: #ffffff0f;
  border: 1px solid #ffffff1a;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  display: inline-flex;
  position: relative;
}

.wallet-hero__eye:after {
  content: "";
  position: absolute;
  inset: -7px;
}

.wallet-hero__eye:hover {
  color: #fff;
  background: #ffffff1f;
}

.wallet-hero__amount {
  letter-spacing: -.5px;
  color: #0000;
  transition: filter var(--dur-base) ease, opacity var(--dur-base) ease;
  background: linear-gradient(#fff 15%, #bbe1fa 95%) text;
  font-size: clamp(2.3rem, 5vw, 2.9rem);
  font-weight: 900;
  line-height: 1;
}

.wallet-hero--masked .wallet-hero__amount {
  filter: blur(14px);
  opacity: .75;
}

.wallet-hero__currency {
  color: #ffffff80;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 700;
}

.wallet-hero__brand {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.wallet-hero__brand-name {
  color: #bbe1fa;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 900;
}

.wallet-hero__brand-sub {
  color: #ffffff59;
  letter-spacing: 0;
  font-size: 9.5px;
  font-weight: 700;
}

.wallet-hero__shield {
  color: #bbe1fa40;
  font-size: 20px;
}

body.light-theme .wallet-hero .wallet-hero__label, body.light-theme .wallet-hero .wallet-hero__currency {
  color: #fff9;
}

.pcv-scene {
  perspective: 1200px;
  flex-direction: column;
  gap: 14px;
  display: flex;
  position: relative;
  container: pcv / inline-size;
}

.pcv-scene.is-enter {
  animation: pcvIn .38s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes pcvIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pcv-orb {
  filter: blur(46px);
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
}

.pcv-orb--a {
  animation: pcvFloatA 7s var(--ease-standard) infinite;
  top: -26px;
  background: #3282b880;
  inset-inline-end: -20px;
}

.pcv-orb--b {
  animation: pcvFloatB 9s var(--ease-standard) infinite;
  bottom: -30px;
  background: #bbe1fa59;
  inset-inline-start: -24px;
}

@keyframes pcvFloatA {
  50% {
    transform: translate(-14px, 12px) scale(1.12);
  }
}

@keyframes pcvFloatB {
  50% {
    transform: translate(16px, -12px) scale(1.14);
  }
}

.pcv-card {
  z-index: 1;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease-standard);
  will-change: transform;
  outline: none;
  position: relative;
}

.pcv-card.is-tap {
  animation: pcvTap .32s var(--ease-standard);
}

@keyframes pcvTap {
  40% {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(.965);
  }
}

.pcv-flip {
  aspect-ratio: 1.586;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.65, 0, .35, 1);
  position: relative;
}

.pcv-card.is-flipped .pcv-flip {
  transform: rotateY(180deg);
}

.pcv-face {
  border-radius: var(--radius-lg);
  backface-visibility: hidden;
  box-shadow: var(--shadow-lg), inset 0 1px 0 #ffffff14;
  color: #fff;
  background: radial-gradient(120% 170% at 88% -25%, #3282b88c 0%, #0000 55%), radial-gradient(95% 130% at -5% 115%, #0f4c759e 0%, #0000 60%), linear-gradient(150deg, #12233f 0%, #0c1526 48%, #103254 100%);
  padding: clamp(13px, 6.2cqw, 22px) clamp(15px, 6.8cqw, 24px);
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pcv-face:before {
  content: "";
  border-radius: inherit;
  -webkit-mask-composite: xor;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(135deg, #bbe1fa66, #0000 30% 62%, #3282b880);
  padding: 1px;
  position: absolute;
  inset: 0;
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-position: 0 0, 0 0;
  mask-size: auto, auto;
  mask-repeat: repeat, repeat;
  mask-clip: content-box, border-box;
  mask-origin: content-box, border-box;
  mask-composite: exclude;
  mask-mode: match-source, match-source;
}

.pcv-back {
  visibility: hidden;
  padding: 0;
  transform: rotateY(180deg);
}

.pcv-card.pcv-back-shown .pcv-front {
  visibility: hidden;
}

.pcv-card.pcv-back-shown .pcv-back {
  visibility: visible;
}

.pcv-sheen {
  animation: pcvSheen 7s var(--ease-standard) infinite;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(115deg, #0000 42%, #bbe1fa1f 50%, #0000 58%);
  position: absolute;
  inset: -60%;
  transform: translateX(-70%);
}

@keyframes pcvSheen {
  0%, 55% {
    transform: translateX(-70%);
  }

  85%, 100% {
    transform: translateX(70%);
  }
}

.pcv-rings {
  pointer-events: none;
  z-index: 1;
  inset-inline-start: -130px;
  background: repeating-radial-gradient(circle, #bbe1fa0f 0 1.5px, #0000 1.5px 24px);
  border-radius: 50%;
  width: 380px;
  height: 380px;
  position: absolute;
  bottom: -190px;
}

.pcv-glow {
  filter: blur(64px);
  pointer-events: none;
  z-index: 1;
  top: -100px;
  background: #3282b842;
  border-radius: 50%;
  width: 220px;
  height: 220px;
  position: absolute;
  inset-inline-end: -60px;
}

.pcv-glare {
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    #ffffff38,
    #fff0 45%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .3s var(--ease-standard);
  pointer-events: none;
  z-index: 2;
  position: absolute;
  inset: 0;
}

.pcv-card:hover .pcv-glare {
  opacity: 1;
}

.pcv-front {
  flex-direction: column;
  justify-content: space-between;
  display: flex;
}

.pcv-front__top {
  z-index: 4;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
  position: relative;
}

.pcv-front__topright {
  align-items: center;
  gap: 10px;
  display: flex;
}

.pcv-chipwrap {
  align-items: center;
  gap: 13px;
  display: flex;
}

.pcv-chip {
  background: linear-gradient(140deg, #ecdcae 0%, #c9a866 55%, #a8874b 100%);
  border-radius: 8px;
  width: 44px;
  height: 32px;
  position: relative;
  box-shadow: inset 0 0 0 1px #46341440, inset 0 1px #ffffff73, 0 2px 8px #00000059;
}

.pcv-chip:before {
  content: "";
  border: 1px solid #4634144d;
  border-radius: 5px;
  position: absolute;
  inset: 5px;
}

.pcv-chip:after {
  content: "";
  background: #4634144d;
  width: 1px;
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 50%;
}

.pcv-nfc {
  color: #bbe1fa80;
  font-size: 17px;
  transform: rotate(90deg);
}

.pcv-eye {
  color: #ffffffb3;
  width: 34px;
  height: 34px;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease,
    transform var(--dur-fast) ease;
  background: #ffffff1a;
  border: 1px solid #ffffff29;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  display: inline-flex;
  position: relative;
}

.pcv-eye:after {
  content: "";
  position: absolute;
  inset: -6px;
}

.pcv-eye:hover {
  color: #fff;
  background: #ffffff2e;
  transform: scale(1.08);
}

.pcv-eye:active {
  transform: scale(.92);
}

.pcv-eye:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #bbe1fab3;
}

.pcv-eye__hide, .pcv-card.is-revealed .pcv-eye__show {
  display: none;
}

.pcv-card.is-revealed .pcv-eye__hide {
  display: inline;
}

.pcv-number-row {
  z-index: 4;
  align-items: center;
  gap: clamp(6px, 2.4cqw, 10px);
  margin: 6px 0;
  display: flex;
  position: relative;
}

.pcv-number {
  white-space: nowrap;
  min-width: 0;
  font-family: var(--font-mono);
  letter-spacing: .12em;
  color: #0000;
  background: linear-gradient(#fff 20%, #bbe1fa 100%) text;
  font-size: clamp(.69rem, 4.9cqw, 1.5rem);
  font-weight: 600;
}

.pcv-copy {
  color: #ffffffb8;
  width: clamp(26px, 10cqw, 30px);
  height: clamp(26px, 10cqw, 30px);
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease,
    transform var(--dur-fast) ease;
  background: #ffffff1a;
  border: 1px solid #ffffff29;
  border-radius: 9px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: clamp(10px, 4cqw, 12px);
  display: inline-flex;
  position: relative;
}

.pcv-copy:after {
  content: "";
  position: absolute;
  inset: -9px;
}

.pcv-copy:hover {
  color: #fff;
  background: #3282b859;
  transform: translateY(-1px);
}

.pcv-copy:active {
  transform: scale(.9);
}

.pcv-copy:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #bbe1fab3;
}

.pcv-copy .fa-check {
  color: #4ade80;
}

.pcv-number__full, .pcv-card.is-revealed .pcv-number__mask {
  display: none;
}

.pcv-card.is-revealed .pcv-number__full {
  display: inline;
}

.pcv-mid {
  z-index: 4;
  flex-direction: column;
  gap: 4px;
  display: flex;
  position: relative;
}

.pcv-mid .pcv-number-row {
  margin: 0;
}

.pcv-nick {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.pcv-nick__name {
  color: #ffffffeb;
  white-space: nowrap;
  text-overflow: ellipsis;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: clamp(10px, 3.5cqw, 12px);
  font-weight: 700;
  display: inline-flex;
  overflow: hidden;
}

.pcv-nick__name i {
  color: #bbe1fab3;
  flex-shrink: 0;
  font-size: 10px;
}

.pcv-nick__type {
  letter-spacing: .3px;
  color: #bbe1fa;
  background: #3282b847;
  border: 1px solid #bbe1fa40;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 3px clamp(6px, 2.2cqw, 8px);
  font-size: clamp(8px, 2.7cqw, 9px);
  font-weight: 800;
}

.pcv-front__bottom {
  z-index: 4;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(8px, 3cqw, 12px);
  display: flex;
  position: relative;
}

.pcv-field {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.pcv-field__label {
  letter-spacing: clamp(.8px, .45cqw, 1.5px);
  color: #ffffff9e;
  white-space: nowrap;
  font-size: clamp(7px, 2.4cqw, 8px);
  font-weight: 700;
}

.pcv-field__value {
  letter-spacing: .4px;
  color: #ffffffeb;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: clamp(10px, 3.7cqw, 13px);
  font-weight: 600;
  overflow: hidden;
}

.pcv-field--exp {
  text-align: center;
  flex: none;
}

.pcv-exp__full, .pcv-card.is-revealed .pcv-exp__mask {
  display: none;
}

.pcv-card.is-revealed .pcv-exp__full {
  display: inline;
}

.pcv-brand {
  letter-spacing: -.5px;
  color: #0000;
  filter: drop-shadow(0 1px 4px #3282b866);
  background: linear-gradient(100deg, #dfefff 0%, #8fbfe6 35%, #fff 50%, #7fb2e0 65%, #dfefff 100%) 0 0 / 220% 100% text;
  flex-shrink: 0;
  font-family: Vazirmatn, system-ui, sans-serif;
  font-size: clamp(1.1rem, 7.8cqw, 1.7rem);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  animation: 5s linear infinite pcvHolo;
}

@keyframes pcvHolo {
  to {
    background-position: 220% 0;
  }
}

.pcv-back {
  flex-direction: column;
  padding: 0 0 clamp(10px, 4.2cqw, 16px);
  display: flex;
}

.pcv-magstripe {
  z-index: 2;
  background: linear-gradient(90deg, #05070c, #161c26 50%, #05070c);
  flex-shrink: 0;
  height: clamp(32px, 13.5cqw, 46px);
  margin-top: clamp(15px, 7cqw, 26px);
  position: static;
}

.pcv-sign {
  z-index: 3;
  background: repeating-linear-gradient(45deg, #e9edf3 0 8px, #dfe4ec 8px 16px);
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: clamp(28px, 11cqw, 38px);
  margin: clamp(9px, 4cqw, 16px) clamp(15px, 6.8cqw, 24px) 0;
  padding: 0 clamp(8px, 3.4cqw, 12px);
  display: flex;
  position: static;
}

.pcv-sign__label {
  letter-spacing: clamp(.8px, .45cqw, 1.5px);
  color: #6b7280;
  font-size: clamp(7px, 2.4cqw, 8px);
  font-weight: 800;
}

.pcv-sign__cvv {
  font-family: var(--font-mono);
  letter-spacing: clamp(2px, .9cqw, 3px);
  color: #0b1220;
  font-size: clamp(12px, 4.4cqw, 15px);
  font-weight: 800;
}

.pcv-cvv__full, .pcv-card.is-revealed .pcv-cvv__mask {
  display: none;
}

.pcv-card.is-revealed .pcv-cvv__full {
  display: inline;
}

.pcv-back__foot {
  z-index: 3;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(8px, 3cqw, 14px);
  margin: auto clamp(15px, 6.8cqw, 24px) 0;
  display: flex;
}

.pcv-back__info {
  text-align: right;
  direction: rtl;
  min-width: 0;
}

.pcv-back__info p {
  color: #ffffff9e;
  margin-top: 4px;
  font-size: clamp(9px, 3.2cqw, 11px);
  line-height: 1.5;
}

.pcv-back__info b {
  color: #bbe1fa;
  font-weight: 800;
}

.pcv-back__fine {
  color: #fff6 !important;
  font-size: 9px !important;
}

.pcv-brand--back {
  flex-shrink: 0;
  font-size: clamp(.85rem, 5.4cqw, 1.15rem);
}

.pcv-scene.is-blocked .pcv-card {
  filter: grayscale(.35) brightness(.82);
}

.pcv-bar {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  display: flex;
}

.pcv-flip-btn {
  min-height: 40px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
  border-radius: 12px;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.pcv-flip-btn i {
  color: var(--accent);
  transition: transform var(--dur-base) var(--ease-standard);
}

.pcv-flip-btn:hover {
  background: #3282b824;
  transform: translateY(-1px);
}

.pcv-flip-btn:hover i {
  transform: rotate(180deg);
}

.pcv-block {
  min-height: 40px;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
    transform var(--dur-fast) ease;
  border-radius: 12px;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.pcv-block:hover {
  transform: translateY(-1px);
}

.pcv-flip-btn:focus-visible, .pcv-block:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.pcv-block.is-block {
  color: #f87171;
  background: #ef44441a;
  border: 1px solid #ef444433;
}

.pcv-block.is-block:hover {
  background: #ef44442e;
}

.pcv-block.is-unblock {
  color: #4ade80;
  background: #22c55e1f;
  border: 1px solid #22c55e38;
}

.pcv-block.is-unblock:hover {
  background: #22c55e33;
}

@media (prefers-reduced-motion: reduce) {
  .pcv-scene, .pcv-orb--a, .pcv-orb--b, .pcv-sheen, .pcv-brand, .pcv-scene.is-enter {
    animation: none;
  }

  .pcv-card, .pcv-flip {
    transition: transform .3s;
  }
}

.pcp {
  z-index: 1;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  --pcp-muted: #ffffff94;
  --pcp-faint: #ffffff8c;
  --pcp-ok: #4ade80;
  --pcp-ok-bg: #4ade801f;
  --pcp-ok-bd: #4ade804d;
  --pcp-err: #f87171;
  --pcp-err-bg: #ef44441f;
  --pcp-err-bd: #ef44448c;
  --pcp-tint: #3282b81a;
  --pcp-tint-soft: #3282b824;
  --pcp-tint-strong: #3282b833;
  --pcp-tint-bd: #3282b838;
  --pcp-grad: linear-gradient(135deg, #0f4c75, #2a7bb0);
  --pcp-grad-hover: linear-gradient(135deg, #0f4c75, #1b6ca8);
  --pcp-pop-bg: #17223c;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  display: flex;
  position: relative;
}

body.light-theme .pcp {
  --pcp-muted: #0f172a9e;
  --pcp-faint: #0f172a9e;
  --pcp-ok: #15803d;
  --pcp-ok-bg: #15803d1a;
  --pcp-ok-bd: #15803d40;
  --pcp-err: #dc2626;
  --pcp-pop-bg: #fff;
}

.pcp__meta {
  color: var(--pcp-muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  font-size: 11px;
  display: flex;
}

.pcp__meta-item {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.pcp__meta-item i {
  color: var(--accent);
  font-size: 11px;
}

.pcp__meta-item b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.pcp__tabs {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  grid-template-columns: repeat(4, 1fr);
  padding: 4px;
  display: grid;
  position: relative;
}

.pcp__ink {
  border-radius: calc(var(--radius-sm) - 5px);
  background: var(--pcp-grad);
  width: calc(25% - 2px);
  box-shadow: var(--shadow-accent);
  transition: transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
  top: 4px;
  bottom: 4px;
  position: absolute;
  inset-inline-start: 4px;
}

.pcp__tabs.is-t0 .pcp__ink {
  transform: translateX(0);
}

.pcp__tabs.is-t1 .pcp__ink {
  transform: translateX(-100%);
}

.pcp__tabs.is-t2 .pcp__ink {
  transform: translateX(-200%);
}

.pcp__tabs.is-t3 .pcp__ink {
  transform: translateX(-300%);
}

[dir="ltr"] .pcp__tabs.is-t1 .pcp__ink {
  transform: translateX(100%);
}

[dir="ltr"] .pcp__tabs.is-t2 .pcp__ink {
  transform: translateX(200%);
}

[dir="ltr"] .pcp__tabs.is-t3 .pcp__ink {
  transform: translateX(300%);
}

.pcp__tab {
  z-index: 1;
  white-space: nowrap;
  min-height: 44px;
  color: var(--pcp-muted);
  border-radius: calc(var(--radius-sm) - 5px);
  transition: color var(--dur-fast) ease;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  position: relative;
}

.pcp__tab i {
  font-size: 11px;
}

.pcp__tab-lbl--short {
  display: none;
}

.pcp__tab:not(.is-active):hover {
  color: var(--text);
}

.pcp__tab.is-active {
  color: #fff;
}

.pcp__tab:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.pcp__badge {
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  min-width: 17px;
  height: 17px;
  color: var(--pcp-muted);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.pcp__tab.is-active .pcp__badge {
  color: #fff;
  background: #ffffff38;
}

.pcp__badge.is-danger {
  background: var(--pcp-err-bg);
  color: var(--pcp-err);
  border: 1px solid var(--pcp-err-bd);
}

.pcp__tab.is-active .pcp__badge.is-danger {
  color: #b91c1c;
  background: #ffffffe6;
  border-color: #0000;
}

.pcp__panels {
  min-height: 180px;
  position: relative;
}

.pcp__panel {
  display: none;
}

.pcp__panel.is-active {
  animation: pcpFade var(--dur-base) var(--ease-out);
  display: block;
}

@keyframes pcpFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.pcp__label {
  color: var(--pcp-muted);
  font-size: 11px;
  font-weight: 700;
}

.pcp__label--mt {
  margin: 14px 0 6px;
  display: block;
}

.pcp__hint {
  color: var(--pcp-faint);
  gap: 6px;
  margin-top: 10px;
  font-size: 10.5px;
  line-height: 1.8;
  display: flex;
}

.pcp__hint--top {
  margin: 0 0 10px;
}

.pcp__hint i {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
}

.pcp__err {
  color: var(--pcp-err);
  margin-top: 7px;
  font-size: 11px;
  font-weight: 600;
  display: block;
}

.pcp__err[hidden] {
  display: none;
}

body.light-theme .pcp__err {
  color: #dc2626;
}

.pcp-wd__head {
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 8px;
  display: flex;
}

.pcp-wd__avail {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.pcp-wd__avail b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 800;
}

.pcp-wd__max {
  min-height: 28px;
  color: var(--accent-soft);
  background: var(--pcp-tint);
  border: 1px solid var(--pcp-tint-bd);
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
  padding: 5px 11px;
  font-size: 10.5px;
  font-weight: 700;
}

.pcp-wd__max:hover {
  background: var(--pcp-tint-strong);
  transform: translateY(-1px);
}

.pcp-wd__max:focus-visible, .pcp-ba__all:focus-visible, .pcp-empty__btn:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.pcp-wd__field {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  height: 50px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  display: flex;
}

.pcp-wd__field:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.pcp-wd__field.has-error {
  border-color: var(--pcp-err-bd);
}

.pcp-wd__field .pcp-wd__input:focus, .pcp-wd__field .pcp-wd__input:focus-visible {
  box-shadow: none;
  outline: none;
}

body.light-theme .pcp-wd__field .pcp-wd__input {
  color: var(--text) !important;
  background-color: #0000 !important;
  border: none !important;
}

body.light-theme .pcp-wd__field .pcp-wd__input:focus {
  box-shadow: none !important;
  border: none !important;
}

.pcp-wd__cur {
  color: var(--accent-soft);
  font-size: 15px;
  font-weight: 800;
}

.pcp-wd__input {
  min-width: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-size: 16px;
  font-weight: 700;
}

.pcp-wd__input::placeholder {
  color: var(--text);
  opacity: .32;
  font-weight: 400;
}

.pcp-wd__eq {
  white-space: nowrap;
  color: var(--pcp-faint);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-size: 10.5px;
}

.pcp-pick {
  position: relative;
}

.pcp-pick__btn {
  text-align: start;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 100%;
  min-height: 50px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease,
    background var(--dur-fast) ease;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  display: flex;
}

.pcp-pick__btn:hover {
  background: var(--surface-2);
}

.pcp-pick__btn:focus-visible, .pcp-pick.is-open .pcp-pick__btn {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.pcp-pick__lead {
  color: var(--accent);
  flex-shrink: 0;
  font-size: 13px;
}

.pcp-pick__val {
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  display: flex;
}

.pcp-pick__name {
  color: var(--text);
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
}

.pcp-pick__num {
  color: var(--pcp-faint);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
}

.pcp-pick__chip {
  color: var(--accent-soft);
  background: var(--pcp-tint-soft);
  border: 1px solid var(--pcp-tint-bd);
  border-radius: var(--radius-pill);
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.6;
}

.pcp-pick__caret {
  color: var(--pcp-faint);
  transition: transform var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
  font-size: 10px;
}

.pcp-pick.is-open .pcp-pick__caret {
  transform: rotate(180deg);
}

.pcp-pick__list {
  z-index: 20;
  background: var(--pcp-pop-bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  max-height: 232px;
  box-shadow: var(--shadow-lg);
  animation: pcpPickIn var(--dur-fast) var(--ease-out);
  inset-inline: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  position: absolute;
  top: calc(100% + 6px);
  overflow-y: auto;
}

@keyframes pcpPickIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.pcp-pick__opt {
  border-radius: calc(var(--radius-sm) - 4px);
  cursor: pointer;
  min-height: 44px;
  transition: background var(--dur-fast) ease;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  display: flex;
}

.pcp-pick__opt + .pcp-pick__opt {
  margin-top: 2px;
}

.pcp-pick__opt.is-active {
  background: var(--pcp-tint-strong);
}

.pcp-pick__opt-ico {
  width: 30px;
  height: 30px;
  color: var(--accent);
  background: var(--pcp-tint);
  border: 1px solid var(--pcp-tint-bd);
  border-radius: 9px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  display: flex;
}

.pcp-pick__opt-body {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.pcp-pick__opt-check {
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
  font-size: 11px;
  transform: scale(.6);
}

.pcp-pick__opt.is-selected .pcp-pick__opt-check {
  opacity: 1;
  transform: scale(1);
}

.pcp-wd__submit {
  color: #fff;
  background: var(--pcp-grad);
  border-radius: var(--radius-sm);
  width: 100%;
  min-height: 46px;
  box-shadow: var(--shadow-accent);
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) ease, background var(--dur-fast) ease,
    opacity var(--dur-fast) ease;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 800;
  display: inline-flex;
}

.pcp-wd__submit:hover:not(:disabled) {
  background: var(--pcp-grad-hover);
  box-shadow: var(--shadow-accent-lg);
  transform: translateY(-2px);
}

.pcp-wd__submit:active:not(:disabled) {
  transform: translateY(0) scale(.985);
}

.pcp-wd__submit:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.pcp-wd__submit:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.pcp-ba {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.pcp-ba__row {
  text-align: start;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
    transform var(--dur-fast) ease;
  padding: 9px 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding-inline-end: 32px;
  display: flex;
  position: relative;
}

.pcp-ba__row.is-wide {
  grid-column: 1 / -1;
}

.pcp-ba__row:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  transform: translateY(-1px);
}

.pcp-ba__row:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.pcp-ba__k {
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--pcp-faint);
  font-size: 10px;
  font-weight: 700;
}

.pcp-ba__v {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
}

.pcp-ba__ico, .pcp-ba__ok {
  transition: opacity var(--dur-fast) ease;
  inset-inline-end: 11px;
  font-size: 11px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.pcp-ba__ico {
  color: var(--pcp-faint);
  opacity: .5;
}

.pcp-ba__row:hover .pcp-ba__ico, .pcp-ba__row:focus-visible .pcp-ba__ico {
  opacity: 1;
}

.pcp-ba__ok {
  color: var(--pcp-ok);
  opacity: 0;
}

.pcp-ba__row.is-copied {
  border-color: var(--pcp-ok-bd);
  background: var(--pcp-ok-bg);
}

.pcp-ba__row.is-copied .pcp-ba__ico {
  opacity: 0;
}

.pcp-ba__row.is-copied .pcp-ba__ok {
  opacity: 1;
}

.pcp-ba__all, .pcp-empty__btn {
  min-height: 40px;
  color: var(--accent-soft);
  background: var(--pcp-tint);
  border: 1px solid var(--pcp-tint-bd);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
    border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
}

.pcp-ba__all {
  width: 100%;
  margin-top: 10px;
}

.pcp-ba__all:hover, .pcp-empty__btn:hover {
  background: var(--pcp-tint-strong);
  transform: translateY(-1px);
}

.pcp-ba__all.is-copied {
  color: var(--pcp-ok);
  background: var(--pcp-ok-bg);
  border-color: var(--pcp-ok-bd);
}

.pcp-tx__head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  display: flex;
}

.pcp-tx__count {
  color: var(--pcp-muted);
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.pcp-tx__count i {
  color: var(--accent);
  font-size: 11px;
}

.pcp-tx__sync {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.pcp-tx__synced {
  color: var(--pcp-faint);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

.pcp-tx__refresh {
  min-height: 30px;
  color: var(--accent-soft);
  background: var(--pcp-tint);
  border: 1px solid var(--pcp-tint-bd);
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease,
    opacity var(--dur-fast) ease;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
}

.pcp-tx__refresh:hover:not(:disabled) {
  background: var(--pcp-tint-strong);
  transform: translateY(-1px);
}

.pcp-tx__refresh:active:not(:disabled) {
  transform: translateY(0) scale(.97);
}

.pcp-tx__refresh:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.pcp-tx__refresh:disabled {
  cursor: progress;
  opacity: .7;
}

.pcp-tx__refresh.is-syncing i {
  animation: .9s linear infinite pcpSpin;
}

@keyframes pcpSpin {
  to {
    transform: rotate(-360deg);
  }
}

.pcp-tx {
  flex-direction: column;
  gap: 6px;
  max-height: 236px;
  margin: 0;
  padding-inline-end: 4px;
  list-style: none;
  display: flex;
  overflow-y: auto;
}

.pcp-tx__item {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) ease;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  display: flex;
}

.pcp-tx__item:hover {
  background: var(--surface-2);
}

.pcp-tx__icon {
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  font-size: 11px;
  display: inline-flex;
}

.pcp-tx__icon.is-in {
  color: var(--pcp-ok);
  background: var(--pcp-ok-bg);
}

.pcp-tx__icon.is-out {
  color: var(--accent-soft);
  background: var(--pcp-tint-soft);
}

.pcp-tx__icon.is-fail {
  color: var(--pcp-err);
  background: var(--pcp-err-bg);
}

.pcp-tx__body {
  flex: 1;
  min-width: 0;
}

.pcp-tx__title {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}

.pcp-tx__meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 4px;
  display: flex;
}

.pcp-tx__time {
  color: var(--pcp-faint);
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  display: inline-flex;
}

.pcp-tx__id {
  letter-spacing: .3px;
  min-height: 24px;
  color: var(--pcp-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.pcp-tx__id .fa-hashtag {
  opacity: .7;
  font-size: 8px;
}

.pcp-tx__id:hover {
  color: var(--accent-soft);
  background: var(--pcp-tint-soft);
}

.pcp-tx__id:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.pcp-tx__ok {
  display: none;
}

.pcp-tx__id.is-copied {
  color: var(--pcp-ok);
  background: var(--pcp-ok-bg);
  border-color: var(--pcp-ok-bd);
}

.pcp-tx__id.is-copied .fa-hashtag {
  display: none;
}

.pcp-tx__id.is-copied .pcp-tx__ok {
  display: inline;
}

.pcp-tx__amt {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
}

.pcp-tx__amt.is-in {
  color: var(--pcp-ok);
}

.pcp-tx__amt.is-out {
  color: var(--text);
}

.pcp-tx__amt.is-fail {
  color: var(--pcp-err);
  opacity: .7;
  text-decoration: line-through;
}

.pcp-lock {
  background: var(--pcp-err-bg);
  border: 1px solid var(--pcp-err-bd);
  border-radius: var(--radius-sm);
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  display: flex;
}

.pcp-lock__ico {
  width: 32px;
  height: 32px;
  color: var(--pcp-err);
  background: var(--pcp-err-bg);
  border: 1px solid var(--pcp-err-bd);
  border-radius: 11px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  display: inline-flex;
}

.pcp-lock__body {
  flex: 1;
  min-width: 0;
}

.pcp-lock__title {
  color: var(--pcp-err);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.7;
  display: block;
}

.pcp-lock__sub {
  color: var(--pcp-muted);
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.8;
  display: block;
}

.pcp-lock__sub b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.pcp-lock__btn {
  color: #fff;
  border-radius: var(--radius-pill);
  min-height: 32px;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
  background: #dc2626;
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 10.5px;
  font-weight: 800;
}

.pcp-lock__btn:hover {
  background: #b91c1c;
  transform: translateY(-1px);
}

.pcp-lock__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #dc262659;
}

.pcp-pn__head {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-1);
  background: var(--surface-1);
  align-items: center;
  gap: 11px;
  padding: 12px;
  display: flex;
}

.pcp-pn__head.is-due {
  background: var(--pcp-err-bg);
  border-color: var(--pcp-err-bd);
}

.pcp-pn__head.is-clear {
  background: var(--pcp-ok-bg);
  border-color: var(--pcp-ok-bd);
}

.pcp-pn__head-ico {
  border-radius: 13px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  font-size: 15px;
  display: inline-flex;
}

.pcp-pn__head.is-due .pcp-pn__head-ico {
  color: var(--pcp-err);
  background: var(--pcp-err-bg);
  border: 1px solid var(--pcp-err-bd);
}

.pcp-pn__head.is-clear .pcp-pn__head-ico {
  color: var(--pcp-ok);
  background: var(--pcp-ok-bg);
  border: 1px solid var(--pcp-ok-bd);
}

.pcp-pn__head-body {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.pcp-pn__head-k {
  color: var(--pcp-muted);
  font-size: 10.5px;
  font-weight: 700;
}

.pcp-pn__head-v {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
}

.pcp-pn__head-eq {
  color: var(--pcp-faint);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

.pcp-pn__pay {
  color: #fff;
  border-radius: var(--radius-sm);
  min-height: 38px;
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) ease, opacity var(--dur-fast) ease;
  background: linear-gradient(135deg, #b91c1c, #dc2626);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  box-shadow: 0 6px 16px #dc262640;
}

.pcp-pn__pay:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px #dc262652;
}

.pcp-pn__pay:active:not(:disabled) {
  transform: translateY(0) scale(.985);
}

.pcp-pn__pay:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

.pcp-pn__pay:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #dc262659;
}

.pcp-pn {
  flex-direction: column;
  gap: 6px;
  max-height: 176px;
  margin: 10px 0 0;
  padding-inline-end: 4px;
  list-style: none;
  display: flex;
  overflow-y: auto;
}

.pcp-pn__item {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) ease;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  display: flex;
}

.pcp-pn__item:hover {
  background: var(--surface-2);
}

.pcp-pn__item.is-paid {
  opacity: .72;
}

.pcp-pn__ico {
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  font-size: 11px;
  display: inline-flex;
}

.pcp-pn__ico.is-due {
  color: var(--pcp-err);
  background: var(--pcp-err-bg);
}

.pcp-pn__ico.is-paid {
  color: var(--pcp-ok);
  background: var(--pcp-ok-bg);
}

.pcp-pn__body {
  flex: 1;
  min-width: 0;
}

.pcp-pn__title {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}

.pcp-pn__meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 4px;
  display: flex;
}

.pcp-pn__time {
  color: var(--pcp-faint);
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  display: inline-flex;
}

.pcp-pn__state {
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 800;
}

.pcp-pn__state.is-due {
  color: var(--pcp-err);
  background: var(--pcp-err-bg);
  border: 1px solid var(--pcp-err-bd);
}

.pcp-pn__state.is-paid {
  color: var(--pcp-ok);
  background: var(--pcp-ok-bg);
  border: 1px solid var(--pcp-ok-bd);
}

.pcp-pn__amt {
  white-space: nowrap;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
}

.pcp-pn__item.is-paid .pcp-pn__amt {
  color: var(--pcp-muted);
  text-decoration: line-through;
}

.pcp-pn__why {
  color: #fbbf24;
  border-radius: var(--radius-sm);
  width: 100%;
  min-height: 40px;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
  background: #fbbf241a;
  border: 1px dashed #fbbf2452;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.pcp-pn__why:hover {
  background: #fbbf2429;
  transform: translateY(-1px);
}

.pcp-pn__why:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fbbf244d;
}

body.light-theme .pcp-pn__why {
  color: #92400e;
  background: #b4530914;
  border-color: #b453094d;
}

body.light-theme .pcp-pn__why:hover {
  background: #b4530924;
}

.pcp-empty {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 216px;
  padding: 20px 14px;
  display: flex;
}

.pcp-empty__icon {
  width: 46px;
  height: 46px;
  color: var(--accent-soft);
  background: var(--pcp-tint-soft);
  border: 1px solid var(--pcp-tint-strong);
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  display: inline-flex;
}

.pcp-empty__icon.is-warn {
  color: #fbbf24;
  background: #fbbf241f;
  border-color: #fbbf243d;
}

body.light-theme .pcp-empty__icon.is-warn {
  color: #b45309;
  background: #b453091a;
  border-color: #b4530938;
}

.pcp-empty__icon.is-danger {
  color: var(--pcp-err);
  background: var(--pcp-err-bg);
  border-color: var(--pcp-err-bd);
}

.pcp-empty__icon.is-ok {
  color: var(--pcp-ok);
  background: var(--pcp-ok-bg);
  border-color: var(--pcp-ok-bd);
}

.pcp-empty__btn.is-danger {
  color: #fff;
  background: linear-gradient(135deg, #b91c1c, #dc2626);
  border-color: #0000;
}

.pcp-empty__btn.is-danger:hover {
  background: linear-gradient(135deg, #991b1b, #b91c1c);
}

.pcp-empty__btn.is-danger:focus-visible {
  box-shadow: 0 0 0 3px #dc262659;
}

.pcp-empty p {
  max-width: 268px;
  color: var(--pcp-muted);
  font-size: 11.5px;
  line-height: 1.9;
}

@media (width <= 560px) {
  .pcp__tab {
    gap: 5px;
    font-size: 10.5px;
  }

  .pcp__tab i, .pcp__tab-lbl {
    display: none;
  }

  .pcp__tab-lbl--short {
    display: inline;
  }
}

@media (width <= 420px) {
  .pcp {
    padding: 12px;
  }

  .pcp__tab {
    min-height: 44px;
  }

  .pcp__panels {
    min-height: 0;
  }

  .pcp-ba {
    grid-template-columns: 1fr;
  }

  .pcp-ba__row.is-wide {
    grid-column: auto;
  }

  .pcp-wd__max {
    min-height: 36px;
    padding: 8px 14px;
  }

  .pcp-tx__id {
    min-height: 32px;
    padding: 4px 10px;
  }

  .pcp-tx__refresh {
    min-height: 36px;
  }

  .pcp-lock, .pcp-pn__head {
    flex-wrap: wrap;
  }

  .pcp-lock__btn, .pcp-pn__pay {
    flex: 1 0 100%;
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pcp__ink {
    transition: none;
  }

  .pcp__panel.is-active {
    animation: none;
  }

  .pcp-ba__row:hover, .pcp-ba__all:hover, .pcp-empty__btn:hover, .pcp-wd__max:hover, .pcp-wd__submit:hover:not(:disabled), .pcp-tx__refresh:hover:not(:disabled), .pcp-lock__btn:hover, .pcp-pn__pay:hover:not(:disabled), .pcp-pn__why:hover {
    transform: none;
  }

  .pcp-tx__refresh.is-syncing i {
    animation: none;
  }

  .pcp-tx__refresh.is-syncing {
    opacity: .6;
  }

  .pcp-pick__list {
    animation: none;
  }

  .pcp-pick__caret, .pcp-pick__opt-check {
    transition: none;
  }
}

.profile-savebar {
  border-radius: var(--radius-md);
  animation: saveBarIn var(--dur-base) var(--ease-out);
  background: #3282b81a;
  border: 1px solid #3282b83d;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 12px;
  display: flex;
}

.profile-savebar[hidden] {
  display: none;
}

@keyframes saveBarIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.profile-savebar__note {
  color: var(--accent-soft);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

body.light-theme .profile-savebar__note {
  color: var(--accent-strong);
}

.profile-savebar__actions {
  align-items: stretch;
  gap: 10px;
  margin-inline-start: auto;
  display: flex;
}

.profile-savebar__ghost {
  min-height: 44px;
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
  background: none;
  padding: 0 18px;
  font-size: 12.5px;
  font-weight: 700;
}

.profile-savebar__ghost:hover {
  background: var(--surface-2);
}

.profile-savebar__ghost:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

@media (width <= 520px) {
  .profile-savebar__actions {
    width: 100%;
  }

  .profile-savebar__actions > * {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-savebar {
    animation: none;
  }
}

.profile-avatar {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  border-radius: 50%;
  width: 72px;
  height: 72px;
  padding: 2.5px;
  position: relative;
}

.profile-avatar__inner {
  background: var(--bg);
  width: 100%;
  height: 100%;
  color: var(--accent-soft);
  transition: background var(--dur-slow) ease;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  display: flex;
}

.profile-avatar__badge {
  color: #fff;
  border: 2px solid var(--bg);
  background: #22c55e;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  font-size: 9px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

.profile-stats {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  display: grid;
}

.profile-stat {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  text-align: center;
  border-radius: 16px;
  min-width: 0;
  padding: 14px 10px;
}

.profile-stat span {
  color: var(--accent-soft);
  white-space: nowrap;
  font-size: 15px;
  font-weight: 900;
  display: block;
}

.profile-stat label {
  color: var(--text);
  opacity: .45;
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 700;
  display: block;
}

.profile-ring {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  position: relative;
}

.profile-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.profile-ring circle {
  fill: none;
  stroke-width: 7px;
  stroke-linecap: round;
}

.profile-ring__track {
  stroke: var(--surface-2);
}

.profile-ring__fill {
  stroke: var(--accent);
  stroke-dasharray: 226.2;
  stroke-dashoffset: 226.2px;
  transition: stroke-dashoffset .8s var(--ease-standard),
    stroke var(--dur-base) ease;
}

.profile-ring.is-complete .profile-ring__fill {
  stroke: #22c55e;
}

.profile-ring__pct {
  color: var(--accent-soft);
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  position: absolute;
  inset: 0;
}

.profile-task {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  color: var(--text);
  text-align: right;
  transition: background var(--dur-fast) ease,
    border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
  border-radius: 16px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
}

.profile-task__icon {
  width: 30px;
  height: 30px;
  color: var(--accent);
  background: #3282b81a;
  border: 1px solid #3282b82e;
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  display: flex;
}

.profile-task__arrow {
  opacity: .35;
  margin-inline-start: auto;
  font-size: 10px;
}

.profile-task.is-done {
  border-color: #22c55e4d;
}

.profile-task.is-done .profile-task__icon {
  color: #22c55e;
  background: #22c55e1f;
  border-color: #22c55e40;
}

button.profile-task {
  cursor: pointer;
}

button.profile-task:hover {
  background: var(--surface-2);
  border-color: #3282b873;
  transform: translateY(-2px);
}

button.profile-task:active {
  transform: scale(.98);
}

#profileContent {
  scroll-margin-top: 14px;
}

.profile-tabs {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.profile-tab-btn {
  border-radius: var(--radius-pill);
  height: 44px;
  color: var(--text);
  opacity: .55;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
    opacity var(--dur-fast) ease, box-shadow var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.profile-tab-btn:hover {
  opacity: .9;
  background: var(--surface-2);
}

.profile-tab-btn:active {
  transform: scale(.98);
}

.profile-tab-btn.is-active {
  opacity: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent-strong));
  box-shadow: var(--shadow-accent);
  border-color: #0000;
}

body.light-theme .profile-tab-btn.is-active {
  color: #fff !important;
}

.pw-meter {
  gap: 6px;
  margin-top: 10px;
  display: flex;
}

.pw-meter span {
  background: var(--surface-2);
  height: 5px;
  transition: background var(--dur-base) ease;
  border-radius: 999px;
  flex: 1;
}

.pw-meter[data-level="1"] span:first-child {
  background: #ef4444;
}

.pw-meter[data-level="2"] span:nth-child(-n+2) {
  background: #eab308;
}

.pw-meter[data-level="3"] span:nth-child(-n+3) {
  background: #22c55e;
}

.pw-label {
  color: var(--text);
  opacity: .55;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
}

.pc-modal {
  z-index: 300;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-base);
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: fixed;
  inset: 0;
}

.pc-modal.open {
  visibility: visible;
  transition-delay: 0s;
}

.pc-modal__overlay {
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-base) ease;
  background: #0208179e;
  position: absolute;
  inset: 0;
}

.pc-modal.open .pc-modal__overlay {
  opacity: 1;
}

body.light-theme .pc-modal__overlay {
  background: #0f172a73;
}

.pc-modal__panel {
  border: 1px solid var(--border-2);
  width: 100%;
  max-width: 480px;
  max-height: min(92dvh, 760px);
  box-shadow: var(--shadow-lg);
  padding: 24px 24px calc(28px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out),
    opacity var(--dur-base) ease;
  background: linear-gradient(#14213b 0%, #0f172a 55%);
  border-radius: 28px 28px 0 0;
  position: relative;
  overflow-y: auto;
  transform: translateY(48px);
}

.pc-modal.open .pc-modal__panel {
  opacity: 1;
  transform: translateY(0);
}

body.light-theme .pc-modal__panel {
  background: #fff;
}

.pc-modal__handle {
  background: var(--border-2);
  touch-action: none;
  cursor: grab;
  border-radius: 999px;
  width: 44px;
  height: 5px;
  margin: 0 auto 20px;
  display: block;
  position: relative;
}

.pc-modal__handle:active {
  cursor: grabbing;
}

.pc-modal__handle:before {
  content: "";
  position: absolute;
  inset: -20px -60px;
}

@media (width >= 768px) {
  .pc-modal {
    align-items: center;
    padding: 24px;
  }

  .pc-modal__panel {
    border-radius: var(--radius-xl);
    padding: 40px 36px;
    transform: translateY(16px) scale(.97);
  }

  .pc-modal.open .pc-modal__panel {
    transform: translateY(0) scale(1);
  }

  .pc-modal__handle {
    display: none;
  }
}

.pc-modal__subtitle {
  color: var(--text);
  opacity: .55;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.8;
}

.pc-modal__close {
  width: 40px;
  height: 40px;
  color: var(--text);
  opacity: .6;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  transition: opacity var(--dur-fast) ease, background var(--dur-fast) ease;
  border-radius: 14px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.pc-modal__close:hover {
  opacity: 1;
  background: var(--surface-2);
}

.pc-modal__close:active, .pc-menu__item:active {
  transition: transform .1s var(--ease-out);
  transform: scale(.96);
}

.kyc-progress__label {
  color: var(--accent-soft);
  font-size: 11px;
  font-weight: 700;
}

.kyc-progress__pct {
  color: var(--text);
  opacity: .55;
  font-size: 11px;
  font-weight: 800;
}

.kyc-progress__track {
  background: var(--surface-2);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.kyc-progress__fill {
  background: linear-gradient(270deg, var(--accent-strong), var(--accent));
  transform-origin: 100%;
  height: 100%;
  transition: transform .6s var(--ease-standard);
  border-radius: 999px;
  display: block;
  transform: scaleX(0);
}

.pc-field {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.pc-field__label {
  color: var(--text);
  opacity: .8;
  padding-right: 6px;
  font-size: 12px;
  font-weight: 700;
}

.pc-field__req {
  color: #ef4444;
}

body.light-theme .pc-field__req {
  color: #b91c1c;
}

.pc-field__box {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  height: 56px;
  transition: border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
  border-radius: 1rem;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  display: flex;
}

.pc-field__box:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.pc-field__icon {
  color: var(--text);
  opacity: .4;
  transition: color var(--dur-fast) ease, opacity var(--dur-fast) ease;
  flex-shrink: 0;
  font-size: 15px;
}

.pc-field__box:focus-within .pc-field__icon {
  color: var(--accent);
  opacity: 1;
}

.pc-field__clear {
  width: 26px;
  height: 26px;
  color: var(--text);
  opacity: .45;
  cursor: pointer;
  transition: opacity var(--dur-fast) ease, background var(--dur-fast) ease;
  background: none;
  border: 0;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  display: none;
}

.pc-field__box input:not(:placeholder-shown) ~ .pc-field__clear {
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.pc-field__clear:hover, .pc-field__clear:focus-visible {
  opacity: 1;
  background: var(--surface-2, #7f7f7f29);
}

.pc-field__box input {
  min-width: 0;
  color: var(--text);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  align-self: stretch;
  font-size: 16px;
  font-weight: 600;
}

.pc-field__box input::placeholder {
  color: var(--text);
  opacity: .35;
  font-family: Vazirmatn, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
}

.pc-field__box input:focus, .pc-field__box input:focus-visible {
  box-shadow: none;
  outline: none;
}

body.light-theme .pc-field__box:not(.ad-prize__box) input, body.light-theme .cb-link input {
  background-color: #0000 !important;
  border: none !important;
}

body.light-theme .pc-field__box:not(.ad-prize__box) input:focus, body.light-theme .cb-link input:focus {
  box-shadow: none !important;
  border: none !important;
}

.pc-field__box select {
  min-width: 0;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 / 11px 7px no-repeat;
  border: none;
  outline: none;
  flex: 1;
  align-self: stretch;
  padding-inline-end: 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
}

body.light-theme .pc-field__box select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230f172a' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pc-field__box select:focus, .pc-field__box select:focus-visible {
  box-shadow: none;
  outline: none;
}

.pc-field__box select:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.pc-field__box select option {
  background: var(--bg);
  color: var(--text);
}

.pc-field__box.is-locked {
  background: #22c55e0d;
  border-style: dashed;
}

.pc-field__box.is-locked:focus-within {
  border-color: var(--border-2);
  box-shadow: none;
}

.pc-field__box.is-locked input {
  cursor: default;
  opacity: .85;
}

.pc-field__check {
  color: #22c55e;
  flex-shrink: 0;
  display: none;
}

.pc-field.is-valid .pc-field__check {
  animation: kycCheckIn .25s var(--ease-standard) both;
  display: inline-flex;
}

@keyframes kycCheckIn {
  from {
    opacity: 0;
    transform: scale(.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.pc-field.has-error .pc-field__box {
  border-color: #ef44448c;
}

.pc-field.has-error .pc-field__box:focus-within {
  border-color: #ef4444b3;
  box-shadow: 0 0 0 3px #ef44442e;
}

.pc-field.has-error .pc-field__icon {
  color: #ef4444;
  opacity: 1;
}

.pc-field__error {
  color: #f87171;
  align-items: center;
  gap: 6px;
  padding-right: 6px;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
}

.pc-field__error:before {
  content: "";
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
}

body.light-theme .pc-field__error {
  color: #dc2626;
}

.pc-field__hint {
  color: var(--text);
  opacity: .5;
  padding-right: 6px;
  font-size: 11px;
  line-height: 1.7;
}

.pc-field__hint--count {
  font-variant-numeric: tabular-nums;
}

.pc-field__hint--count.is-over {
  color: #fbbf24;
  opacity: 1;
  font-weight: 700;
}

body.light-theme .pc-field__hint--count.is-over {
  color: #b45309;
}

.pc-fieldlabel {
  color: var(--text);
  opacity: .72;
  margin: 0 2px 8px;
  font-size: 12px;
  font-weight: 700;
  display: block;
}

.pc-seg {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.pc-seg__opt {
  text-align: right;
  cursor: pointer;
  background: var(--surface-1);
  border: 1.5px solid var(--border-1);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease,
    transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  border-radius: 1.05rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 13px 14px;
  display: flex;
  position: relative;
}

.pc-seg__opt:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
}

.pc-seg__opt:active {
  transform: scale(.98);
}

.pc-seg__opt:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.pc-seg__opt.is-active {
  box-shadow: none;
  background: none;
  border-color: #0000;
}

.pc-seg__opt.is-active:after {
  content: "✓";
  color: #fff;
  background: var(--accent);
  top: 10px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  display: flex;
  position: absolute;
  inset-inline-end: 12px;
}

.pc-seg__ico {
  color: var(--text);
  opacity: .5;
  transition: color var(--dur-fast) ease, opacity var(--dur-fast) ease;
  font-size: 16px;
}

.pc-seg__opt.is-active .pc-seg__ico {
  color: var(--accent);
  opacity: 1;
}

.pc-seg__ttl {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.pc-seg__sub {
  color: var(--text);
  opacity: .6;
  font-size: 10.5px;
  font-weight: 600;
}

.pcv-rate {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.pcv-rate__dot {
  background: #22c55e;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  animation: 1.8s ease-out infinite pcvRatePulse;
  box-shadow: 0 0 #22c55e8c;
}

@keyframes pcvRatePulse {
  0% {
    box-shadow: 0 0 #22c55e80;
  }

  70% {
    box-shadow: 0 0 0 6px #22c55e00;
  }

  100% {
    box-shadow: 0 0 #22c55e00;
  }
}

.pcv-rate__flash {
  animation: pcvRateFlash .5s var(--ease-standard);
}

@keyframes pcvRateFlash {
  0% {
    color: #4ade80;
  }

  100% {
    color: inherit;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pcv-rate__dot, .pcv-rate__flash {
    animation: none;
  }
}

.kyc-success {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 4px 4px;
  display: flex;
}

.kyc-success[hidden] {
  display: none;
}

.kyc-success__ring {
  color: #22c55e;
  background: #22c55e1f;
  border: 1.5px solid #22c55e73;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 76px;
  height: 76px;
  font-size: 30px;
  animation: .45s cubic-bezier(.34, 1.56, .64, 1) both kycPopIn;
  display: flex;
  position: relative;
}

.kyc-success__ring:after {
  content: "";
  animation: kycDotPulse 2.2s var(--ease-standard) infinite;
  border: 1.5px solid #22c55e59;
  border-radius: 50%;
  position: absolute;
  inset: -10px;
}

@keyframes kycDotPulse {
  0% {
    opacity: 1;
    transform: scale(.7);
  }

  70%, 100% {
    opacity: 0;
    transform: scale(1.25);
  }
}

@keyframes kycPopIn {
  from {
    opacity: 0;
    transform: scale(.4);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.kyc-success__text {
  color: var(--text);
  opacity: .6;
  max-width: 320px;
  font-size: 12.5px;
  line-height: 2;
}

.empty-state {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 40px 20px;
  display: flex;
}

.empty-state__icon {
  width: 56px;
  height: 56px;
  color: var(--accent);
  background: #3282b81a;
  border: 1px dashed #3282b859;
  border-radius: 18px;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  display: flex;
}

.empty-state__text {
  color: var(--text);
  opacity: .6;
  max-width: 320px;
  font-size: .85rem;
  line-height: 1.8;
}

html, body {
  width: 100%;
  max-width: 100vw;
  touch-action: pan-y pinch-zoom !important;
  overscroll-behavior-x: none !important;
  overflow-x: hidden !important;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: Vazirmatn, sans-serif;
  transition: background-color .4s, color .4s;
  position: relative;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--track-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--thumb);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--thumb-hover);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--thumb) var(--track-bg);
}

.pc-modal__panel, .pc-menu, .notif-drawer, #notifList {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pc-modal__panel::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.pc-menu::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.notif-drawer::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

#notifList::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.glass, .glass-effect {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(15px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-slow) ease, border-color var(--dur-slow) ease,
    background-color var(--dur-slow) ease;
}

body.light-theme .glass, body.light-theme .glass-effect {
  box-shadow: var(--shadow-md);
}

.glow-sphere {
  filter: blur(80px);
  z-index: -1;
  opacity: .32;
  border-radius: 50%;
  transition: opacity .4s;
  position: absolute;
}

.marquee-wrapper {
  direction: ltr;
  overflow: hidden;
  mask-image: linear-gradient(to right, #0000, #000 12% 88%, #0000);
}

.marquee-content {
  will-change: transform;
  direction: ltr;
  width: max-content;
  animation: 30s linear infinite marquee;
  display: flex;
  animation-play-state: running !important;
}

.marquee-group {
  flex: none;
  align-items: center;
  gap: 4rem;
  padding-inline-end: 4rem;
  display: flex;
}

.brand-icon {
  color: #ffffff4d;
  cursor: default;
  font-size: 2.5rem;
  transition: color .3s, transform .3s;
}

.brand-icon:hover {
  transform: translateY(-4px);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-25%);
  }
}

.premium-card {
  position: relative;
}

.float-animation {
  animation: 6s ease-in-out infinite floaty;
}

@keyframes floaty {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

.hero-card-img {
  filter: drop-shadow(0 34px 50px #00000080);
}

body.light-theme .hero-card-img {
  filter: drop-shadow(0 28px 44px #0f172a4d);
}

.about-card-img {
  filter: drop-shadow(0 24px 40px #00000073);
  rotate: -.39deg;
}

body.light-theme .about-card-img {
  filter: drop-shadow(0 20px 36px #0f172a40);
}

.hero-kicker {
  color: #ffffffb8;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  display: flex;
}

.hero-kicker__rule {
  background: linear-gradient(to bottom, var(--accent-soft), var(--accent));
  border-radius: 2px;
  flex-shrink: 0;
  width: 2px;
  height: 15px;
}

.hero-kicker__n {
  color: var(--accent-soft);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 800;
}

.hero-kicker__sep {
  opacity: .45;
  background: currentColor;
  border-radius: 50%;
  flex-shrink: 0;
  width: 3px;
  height: 3px;
}

body.light-theme .hero-kicker {
  color: #0f172ab8;
}

.hero-title {
  letter-spacing: 0;
  font-size: clamp(2.375rem, 1.35rem + 4.2vw, 4.375rem);
  line-height: 1.3;
}

.hero-copy {
  text-wrap: pretty;
}

.hero-pay {
  white-space: nowrap;
  color: #0000;
  filter: drop-shadow(0 3px 5px #0208178c);
  background: linear-gradient(#eaf6ff 0%, #bbe1fa 32%, #6ea8d4 50%, #a9d6f2 66%, #dcefff 100%) text;
  display: inline-block;
  position: relative;
}

.hero-pay:after {
  content: attr(data-text);
  pointer-events: none;
  color: #0000;
  background: linear-gradient(105deg, #0000 38%, #ffffff40 45%, #fffffff2 50%, #ffffff40 55%, #0000 62%) 0 0 / 220% 100% no-repeat text;
  animation: 5.5s ease-in-out 1.6s infinite heroPaySheen;
  position: absolute;
  inset: 0;
}

@keyframes heroPaySheen {
  0% {
    background-position: 0 0;
  }

  32%, 100% {
    background-position: 100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pay:after {
    animation: none;
  }
}

.hero-title--armed {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(28px);
}

.hero-title--play {
  opacity: 1;
  filter: blur();
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out),
    filter .9s var(--ease-out);
  transform: translateY(0);
}

body.light-theme .hero-pay {
  filter: drop-shadow(0 2px 4px #0f172a40);
  background-image: linear-gradient(#2a76a8 0%, #0f4c75 38%, #0a3a5c 55%, #1b6ca8 72%, #2f7fb3 100%);
}

body.light-theme .hero-pay:after {
  background-image: linear-gradient(105deg, #0000 38%, #ffffff4d 45%, #ffffffe6 50%, #ffffff4d 55%, #0000 62%);
}

:root {
  --spec-muted: #ffffff9e;
  --spec-faint: #ffffff8c;
  --spec-line: #ffffff21;
  --spec-card-bg: #111c309e;
}

body.light-theme {
  --spec-muted: #0f172ab8;
  --spec-faint: #0f172aa8;
  --spec-line: #0f172a24;
  --spec-card-bg: #ffffffc7;
}

.spec {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  display: grid;
}

@media (width >= 480px) {
  .spec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.spec-card {
  --num-reserve: 1.85em;
  border-radius: var(--radius-lg);
  background: linear-gradient(var(--spec-card-bg), var(--spec-card-bg)) padding-box,
    linear-gradient(140deg,
        #78bef08c,
        #3282b82e 42%,
        #3282b80f)
      border-box;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--shadow-md), 0 1px 0 #ffffff0f inset;
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-standard);
  border: 1px solid #0000;
  flex-direction: column;
  gap: .9rem;
  padding: 1.35rem 1.3rem 1.25rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .spec-card:hover {
    box-shadow: var(--shadow-lg), 0 14px 34px -14px #3282b880,
      0 1px 0 #ffffff14 inset;
    transform: translateY(-3px);
  }
}

.spec-card--lead {
  --num-reserve: 4.2em;
}

.spec-card__sheen {
  pointer-events: none;
  top: -55%;
  background: linear-gradient(100deg, #ffffff1c, #fff0 62%);
  width: 90%;
  height: 130%;
  position: absolute;
  inset-inline-start: -20%;
  transform: rotate(-14deg);
}

body.light-theme .spec-card__sheen {
  background: linear-gradient(100deg, #ffffffbf, #fff0 62%);
}

.spec-card__label {
  color: var(--spec-muted);
  font-size: 12px;
  font-weight: 600;
  position: relative;
}

.spec-card__body {
  flex-direction: column;
  gap: .75rem;
  margin: auto 0 0;
  display: flex;
  position: relative;
}

.spec-card__figure {
  color: var(--text);
  align-items: baseline;
  gap: 7px;
  margin: 0;
  display: flex;
}

.hb-num {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: var(--num-reserve, 1.85em);
  font-size: clamp(2.1rem, 8vw, 2.75rem);
  font-weight: 300;
  line-height: 1;
}

.spec-card__unit {
  color: var(--spec-faint);
  font-size: 12.5px;
  font-weight: 600;
}

.spec-card__note {
  color: var(--spec-faint);
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}

.spec-card__meta {
  border-top: 1px solid var(--spec-line);
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  margin: 0;
  padding-top: .8rem;
  display: flex;
}

.spec-card__meta span {
  align-items: baseline;
  gap: 5px;
  display: flex;
}

.spec-card__meta .hb-num {
  min-width: 0;
  font-size: 1.15rem;
  font-weight: 500;
}

.spec-card__meta small {
  color: var(--spec-faint);
  font-size: 11.5px;
  font-weight: 500;
}

.hero-stage {
  overflow: visible;
}

.hero-stage__light {
  filter: blur(14px);
  background: radial-gradient(52% 46% at 50% 42%, #78bef042 0%, #3282b826 38%, #0f4c750f 62%, #0000 78%);
  width: 118%;
  height: 108%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
}

.hero-stage__ground {
  --stage-img-overflow: 2.5%;
  left: 44%;
  bottom: calc(-1 * var(--stage-img-overflow) - 20px);
  filter: blur(11px);
  background: radial-gradient(closest-side, #020612b8 0%, #0206126b 45%, #0206121f 72%, #0000 100%);
  border-radius: 50%;
  width: 66%;
  height: 46px;
  animation: 6s ease-in-out infinite groundBreathe;
  position: absolute;
  transform: translateX(-50%);
}

@keyframes groundBreathe {
  0%, 100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  50% {
    opacity: .62;
    transform: translateX(-50%) scale(.88);
  }
}

@media (width >= 1024px) {
  .hero-stage__ground {
    --stage-img-overflow: 11%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage__ground, .float-animation {
    animation: none;
  }
}

body.light-theme .hero-stage__ground {
  background: radial-gradient(closest-side, #0f172a42 0%, #0f172a24 45%, #0f172a0d 72%, #0000 100%);
}

.hero-stage__disc {
  aspect-ratio: 1;
  background-image: radial-gradient(#8bb2de73 1.4px, #0000 1.45px);
  background-position: center;
  background-size: 13px 13px;
  border-radius: 50%;
  width: min(112%, 380px);
  animation: 6s ease-in-out infinite discBreathe;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mask-image: radial-gradient(circle, #000 0%, #000000b3 34%, #00000052 58%, #0000001a 74%, #0000 88%);
}

@keyframes discBreathe {
  0%, 100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: .82;
    transform: translate(-50%, -50%) scale(.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage__disc {
    animation: none;
  }
}

body.light-theme .hero-stage__disc {
  background-image: radial-gradient(#1b6ca866 1.4px, #0000 1.45px);
}

.hero-stage__grain {
  opacity: .32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  position: absolute;
  inset: 0;
  mask-image: radial-gradient(58% 52% at 50% 46%, #000 0%, #0000008c 55%, #0000 82%);
}

body.light-theme .hero-stage__light {
  background: radial-gradient(52% 46% at 50% 42%, #3282b829 0%, #78bef01f 40%, #bbe1fa0f 64%, #0000 78%);
}

body.light-theme .hero-stage__grain {
  opacity: .18;
  mix-blend-mode: multiply;
}

.orbit-slow-spin {
  transform-origin: 200px 200px;
  animation: 90s linear infinite orbitRingsSpin;
}

@keyframes orbitRingsSpin {
  to {
    transform: rotate(360deg);
  }
}

body.light-theme .network-svg g[stroke="#BBE1FA"] circle {
  stroke: #1b6ca8;
}

.earth-rotate {
  animation: 80s linear infinite earthSpin;
}

@keyframes earthSpin {
  to {
    transform: rotate(360deg);
  }
}

.earth-ring {
  border-color: #ffffff1f;
}

body.light-theme .earth-ring {
  border-color: #e5e7eb;
}

.earth-disc-tint {
  background: linear-gradient(#1b6ca838, #0f4c751a);
}

body.light-theme .earth-disc-tint {
  background: linear-gradient(#dbeafecc, #eff6ff99);
}

.earth-img {
  opacity: 1;
}

body.light-theme .earth-img {
  opacity: .65;
}

.showcase-card {
  filter: drop-shadow(0 10px 18px #00000073);
  transition: transform var(--dur-slow) var(--ease-standard);
  transform: rotate(-8deg);
}

.showcase-card:hover {
  transform: rotate(-2deg) scale(1.04);
}

body.light-theme .showcase-card {
  filter: drop-shadow(0 10px 18px #0f172a47);
}

.callout-bubble {
  color: #0b1c3f;
  background: #ffffffd9;
  border-color: #ffffff8c;
}

.callout-bubble .hl {
  color: #1b6ca8;
  font-weight: 800;
}

body:not(.light-theme) .callout-bubble {
  color: #fff;
  background: #0d1b30b8;
  border-color: #bbe1fa2e;
  box-shadow: 0 12px 32px -8px #0000008c;
}

body:not(.light-theme) .callout-bubble .hl {
  color: #bbe1fa;
}

.callout-line {
  background: #bbe1fa66;
}

.callout-dot {
  background: #bbe1fa;
  border-color: #0f172a99;
}

body.light-theme .callout-line {
  background: #9ca3af;
}

body.light-theme .callout-dot {
  background: #9ca3af;
  border-color: #fff;
}

.earth-sat-orbit {
  pointer-events: none;
  animation: 22s linear infinite earthSatSpin;
}

.earth-sat-orbit.sat-b {
  animation: 36s linear infinite earthSatSpinRev;
}

@keyframes earthSatSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes earthSatSpinRev {
  to {
    transform: rotate(-360deg);
  }
}

.earth-sat {
  background: #bbe1fa;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  position: absolute;
  top: -5px;
  left: 50%;
  box-shadow: 0 0 12px #bbe1faf2, 0 0 26px #3282b899;
}

.earth-sat-orbit:before {
  content: "";
  pointer-events: none;
  background: conic-gradient(from 0deg,
    #bbe1fa00 0 72%,
    #bbe1fa80 92%,
    #bbe1fae6 100%);
  border-radius: 50%;
  position: absolute;
  inset: -1.5px;
  mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 3px));
}

.earth-sat-orbit.sat-b:before {
  background: conic-gradient(from 0deg,
    #bbe1fab3 0,
    #bbe1fa59 7%,
    #bbe1fa00 20%);
  mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 calc(100% - 2px));
}

.earth-sat--small {
  background: #3282b8;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  top: -3.5px;
  box-shadow: 0 0 10px #3282b8e6;
}

.earth-sat--small:after {
  background: linear-gradient(to right, #3282b8bf, #0000);
  width: 40px;
  left: 100%;
  right: auto;
}

body.light-theme .earth-sat {
  background: #1b6ca8;
  box-shadow: 0 0 10px #1b6ca8b3, 0 0 22px #3282b866;
}

body.light-theme .earth-sat:after {
  background: linear-gradient(to left, #1b6ca899, #0000);
}

body.light-theme .earth-sat--small {
  background: #3282b8;
}

body.light-theme .earth-sat--small:after {
  background: linear-gradient(to right, #3282b88c, #0000);
}

.dot-blink {
  animation: 1.6s ease-in-out infinite dotBlink;
}

@keyframes dotBlink {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 6px #9ca3afb3;
  }

  50% {
    opacity: .35;
    box-shadow: none;
  }
}

.bubble-1 {
  animation: 5s ease-in-out infinite bubbleFloat;
}

@keyframes bubbleFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

.card-callout {
  color: #0f172a;
  background: #fff;
  border: 1px solid #3282b833;
  border-radius: 1.1rem;
  padding: .9rem 1.15rem;
  font-size: .72rem;
  line-height: 1.7;
  position: relative;
  box-shadow: 0 18px 35px #0f172a59;
}

.card-callout b, .card-callout strong {
  color: #1b6ca8;
  font-weight: 800;
}

.card-callout.connector-right:after, .card-callout.connector-left:after {
  content: "";
  background: #3282b880;
  width: 26px;
  height: 1px;
  position: absolute;
  top: 50%;
}

.card-callout.connector-right:before, .card-callout.connector-left:before {
  content: "";
  background: #3282b8;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  position: absolute;
  top: 50%;
  box-shadow: 0 0 8px #3282b899;
}

.card-callout.connector-right:after {
  right: -26px;
}

.card-callout.connector-right:before {
  right: -32px;
}

.card-callout.connector-left:after {
  left: -26px;
}

.card-callout.connector-left:before {
  left: -32px;
}

.heritage-image-filter img {
  filter: grayscale() contrast(1.05) brightness(1.4);
  opacity: .14;
  mix-blend-mode: luminosity;
  mask-image: linear-gradient(to top, #000000e6 0%, #00000059 55%, #0000 100%);
}

.dir-ltr {
  direction: ltr;
}

.login-body {
  overflow: hidden;
}

.bg-glow {
  z-index: -1;
  background: radial-gradient(circle at 10% 20%, #3282b826 0%, #0000 40%), radial-gradient(circle at 90% 80%, #1b262c33 0%, #0000 40%);
  position: fixed;
  inset: 0;
}

.input-glass {
  background: #ffffff0d;
  border: 1px solid #ffffff1a;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.input-glass:focus {
  background: #ffffff1a;
  border-color: #3282b8;
  outline: none;
  box-shadow: 0 0 15px #3282b84d;
}

.phone-prefix {
  z-index: 1;
  letter-spacing: .3px;
  color: #fff9;
  pointer-events: none;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 16px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.phone-prefix:after {
  content: "";
  background: #ffffff24;
  width: 1px;
  height: 22px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.phone-prefix i {
  color: #ffffff80;
  opacity: 1;
  font-size: 15px;
}

body.light-theme .phone-prefix i {
  color: #0f172a80;
}

.phone-prefix__code {
  color: #ffffffe0;
}

.phone-input {
  padding-left: 5.6rem;
}

body.light-theme .phone-prefix {
  color: #0f172a8c;
}

body.light-theme .phone-prefix:after {
  background: #0f172a24;
}

body.light-theme .phone-prefix__code {
  color: #0f172ae6;
}

.form-label {
  color: var(--text);
  opacity: .75;
  margin-bottom: 6px;
  padding-inline-start: 4px;
  font-size: 12px;
  font-weight: 700;
  display: block;
}

.form-label__opt {
  font-weight: 400;
}

.form-hint {
  color: #ffffff9e;
  margin-top: 5px;
  padding-inline-start: 4px;
  font-size: 12px;
  line-height: 1.7;
}

body.light-theme .form-hint {
  color: #475569;
}

.input-affix-btn {
  opacity: .45;
  width: 48px;
  color: var(--text);
  transition: opacity var(--dur-fast) ease;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.input-affix-btn:hover, .input-affix-btn:focus-visible {
  opacity: 1;
}

.login-meta-row {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  display: flex;
}

.login-remember, .login-forgot {
  align-items: center;
  min-height: 44px;
  display: inline-flex;
}

.login-remember {
  cursor: pointer;
  opacity: .75;
  transition: opacity var(--dur-fast) ease;
  gap: 8px;
}

.login-remember:hover {
  opacity: 1;
}

.login-remember input {
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
  position: absolute;
}

.login-remember__box {
  background: var(--surface-1);
  border: 1.5px solid var(--border-1);
  width: 20px;
  height: 20px;
  transition: background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
  border-radius: 7px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: relative;
}

.login-remember__box i {
  color: #fff;
  opacity: 0;
  transition: transform var(--dur-fast) var(--ease-bounce, cubic-bezier(.34, 1.56, .64, 1)),
    opacity var(--dur-fast) var(--ease-standard);
  font-size: 11px;
  transform: scale(.4);
}

.login-remember input:checked + .login-remember__box {
  background: var(--accent-fill, var(--accent));
  border-color: var(--accent-fill, var(--accent));
}

.login-remember input:checked + .login-remember__box i {
  opacity: 1;
  transform: scale(1);
}

.login-remember input:focus-visible + .login-remember__box {
  box-shadow: var(--focus-ring, 0 0 0 3px #3282b859);
  border-color: var(--accent);
  outline: none;
}

.login-remember:hover .login-remember__box {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.login-remember__label {
  -webkit-user-select: none;
  user-select: none;
}

body.light-theme .login-remember__box {
  background: #fff;
  border-color: #0f172a38;
}

body.light-theme .login-remember input:checked + .login-remember__box {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

@media (prefers-reduced-motion: reduce) {
  .login-remember__box, .login-remember__box i {
    transition-duration: .01ms;
  }

  .login-remember__box i {
    transform: none;
  }
}

.login-forgot, .link-accent {
  color: var(--accent-soft);
  font-weight: 700;
}

.login-forgot:hover, .link-accent:hover {
  text-decoration: underline;
}

.tab-active {
  box-shadow: 0 4px 15px #3282b866;
  background: var(--accent-fill) !important;
  color: #fff !important;
}

.input-error {
  background: #ef44440d !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 15px #ef444433 !important;
}

.input-success {
  background: #22c55e0d !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 15px #22c55e33 !important;
}

.error-msg {
  color: #f87171;
  margin-top: 5px;
  padding-right: 4px;
  font-size: 12px;
  font-weight: 700;
  display: none;
}

.error-msg.show {
  animation: .2s fadeInDown;
  display: block;
}

body.light-theme .error-msg {
  color: #dc2626;
}

.form-alert {
  border-radius: var(--radius-sm);
  border: 1px solid #0000;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  animation: .2s fadeInDown;
  display: flex;
}

.form-alert[hidden] {
  display: none;
}

.form-alert i {
  flex-shrink: 0;
  margin-top: 3px;
}

.form-alert--success {
  color: #86efac;
  background: #22c55e14;
  border-color: #22c55e4d;
}

body.light-theme .form-alert--success {
  color: #166534;
  background: #22c55e1a;
  border-color: #22c55e59;
}

button.login-forgot {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-weight: 700;
}

.form-step {
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}

.step-enter {
  animation: .35s cubic-bezier(.4, 0, .2, 1) slideInRight;
}

.btn-ripple {
  transition: background-color .3s ease, box-shadow .3s ease,
    transform .15s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.btn-ripple:active {
  transform: scale(.98);
}

.btn-ripple:after {
  content: "";
  width: 0;
  height: 0;
  top: var(--ry, 50%);
  left: var(--rx, 50%);
  opacity: 1;
  background: #fff3;
  border-radius: 50%;
  transition: width .4s, height .4s, opacity .4s;
  position: absolute;
  transform: translate(-50%, -50%);
}

.btn-ripple:active:after {
  opacity: 0;
  width: 300px;
  height: 300px;
}

#loginTab:active, #registerTab:active {
  transform: scale(.97);
}

.otp-input {
  caret-color: #3282b8;
  background: #ffffff0d;
  border: 1px solid #ffffff1a;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.otp-input:focus {
  background: #3282b81a;
  border-color: #3282b8;
  outline: none;
  transform: scale(1.05);
  box-shadow: 0 0 20px #3282b84d;
}

.otp-input.filled {
  background: #22c55e0d;
  border-color: #22c55e80;
}

.otp-merge {
  position: relative;
}

.otp-merge.is-merging .otp-input {
  transform: translateX(var(--dx, 0)) scale(.94);
  border-color: var(--accent);
  opacity: var(--o, 1);
  transition: transform .42s var(--ease-in-out), opacity .42s ease,
    border-color .25s ease, background-color .25s ease,
    box-shadow .25s ease;
  background: #3282b81f;
  box-shadow: 0 0 18px #3282b840;
}

.otp-merge.is-done #otp-container {
  opacity: 0;
  transition: opacity .22s ease, transform .22s var(--ease-out);
  pointer-events: none;
  transform: scale(.94);
}

.otp-done {
  pointer-events: none;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0;
}

.otp-done:before {
  content: "";
  opacity: 0;
  background: radial-gradient(circle, #22c55e57 0%, #0000 66%);
  border-radius: 50%;
  width: 190px;
  height: 190px;
  transition: opacity .45s;
  position: absolute;
}

.otp-done__tile, .otp-done > i {
  color: #fff;
  opacity: 0;
  width: 56px;
  height: 56px;
  transition: transform .34s var(--ease-out), opacity .26s ease;
  background: #0b1b2b;
  border: 2px solid #22c55e;
  border-radius: 18px;
  place-items: center;
  font-size: 22px;
  display: grid;
  position: relative;
  transform: scale(.92);
  box-shadow: 0 0 26px #22c55e73;
}

.otp-merge.is-done .otp-done:before {
  opacity: 1;
}

.otp-merge.is-done .otp-done > i {
  opacity: 1;
  transition-delay: 60ms;
  transform: scale(1);
}

body.light-theme .otp-done > i {
  color: #15803d;
  background: #fff;
}

.step-dot {
  width: 8px;
  height: 8px;
  transition: width .3s var(--ease-out), background-color .3s ease,
    box-shadow .3s ease;
  background: #ffffff26;
  border-radius: 50%;
}

.step-dot.active {
  background: #3282b8;
  border-radius: 4px;
  width: 24px;
  box-shadow: 0 0 10px #3282b880;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-8px);
  }

  40% {
    transform: translateX(8px);
  }

  60% {
    transform: translateX(-5px);
  }

  80% {
    transform: translateX(5px);
  }
}

.shake {
  animation: .4s shake;
}

.spinner {
  border: 2px solid #ffffff4d;
  border-top-color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: .7s linear infinite spin;
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.timer-ring {
  transform-origin: 50%;
  transform: rotate(-90deg);
}

#main-content {
  container: pane / inline-size;
}

.auto-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  display: grid;
}

.auto-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  justify-content: start;
}

.auto-grid--wide > .pcv-scene {
  max-width: 460px;
}

.wl-shell {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 1.5rem;
  display: grid;
}

@container pane (width >= 780px) {
  .wl-shell {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

.pf-shell {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
  display: grid;
}

.pf-shell__aside {
  min-width: 0;
}

@container pane (width >= 820px) {
  .pf-shell {
    grid-template-columns: 340px minmax(0, 1fr);
  }

  .pf-shell__aside {
    position: sticky;
    top: 1.5rem;
  }
}

@media (width >= 1024px) {
  .mobile-nav {
    display: none !important;
  }
}

@media (width <= 1023px) {
  .desktop-sidebar {
    display: none !important;
  }

  .dashboard-body {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

:root {
  --jelly-surface: #0d182bf2;
  --jelly-border: #ffffff1a;
  --jelly-inactive: #ffffff9e;
  --jelly-pill: linear-gradient(135deg, #0f4c75 0%, #1b6ca8 100%);
  --jelly-active: #fff;
  --jelly-shadow: 0 14px 34px -10px #0009, 0 2px 8px #0000004d;
}

body.light-theme {
  --jelly-surface: #fffffff7;
  --jelly-border: #0f172a1a;
  --jelly-inactive: #0f172aa8;
  --jelly-shadow: 0 14px 34px -12px #0f172a3d, 0 2px 8px #0f172a14;
}

.mobile-nav.jelly {
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  max-width: 440px;
  margin: 0 auto;
  position: fixed;
  overflow: visible;
}

.jelly__track {
  box-sizing: border-box;
  background: var(--jelly-surface);
  height: 64px;
  box-shadow: inset 0 0 0 1px var(--jelly-border), var(--jelly-shadow);
  contain: layout;
  touch-action: none;
  transform-origin: center;
  will-change: transform;
  border-radius: 999px;
  padding: 4px;
  position: relative;
  overflow: visible;
}

.jelly__row {
  height: 100%;
  color: var(--jelly-inactive);
  display: flex;
}

.jelly__tab {
  min-width: 0;
  height: 100%;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
  box-shadow: none !important;
  background: none !important;
}

.jelly__tab:focus, .jelly__tab:focus-visible {
  outline: none;
}

.jelly__tab:focus-visible .jelly__tab-inner {
  box-shadow: var(--focus-ring);
}

.jelly__tab-inner {
  transform-origin: center;
  border-radius: 999px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  display: flex;
}

.jelly__tab i {
  font-size: 20px;
  line-height: 1;
}

.mobile-nav-btn__label {
  letter-spacing: .01em;
  color: inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
}

.jelly__pill {
  clip-path: inset(0 round 999px);
  background: var(--jelly-pill);
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
  border-radius: 999px;
  position: absolute;
  top: 4px;
  left: 4px;
  overflow: hidden;
}

.jelly__pill-content {
  box-sizing: border-box;
  transform-origin: center;
  will-change: transform;
  padding: 4px;
  position: absolute;
  top: -4px;
  left: -4px;
}

.jelly__row--mirror {
  color: var(--jelly-active);
}

@media (prefers-reduced-motion: reduce) {
  .jelly__tab:active .jelly__tab-inner {
    opacity: .55;
  }

  .jelly__pill, .jelly__pill-content, .jelly__track {
    will-change: auto;
  }
}

.active-link {
  box-shadow: 0 10px 20px #3282b84d;
  background: var(--accent-fill) !important;
  color: #fff !important;
}

.balance-card {
  background: linear-gradient(135deg, #3282b8 0%, #1b262c 100%);
  position: relative;
  overflow: hidden;
}

.notif-panel {
  z-index: 200;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.notif-overlay {
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  background: #00000080;
  transition: opacity .3s;
  position: absolute;
  inset: 0;
}

.notif-drawer {
  visibility: hidden;
  width: min(380px, 100vw);
  height: 100%;
  transition: transform .4s var(--ease-drawer),
    visibility 0s linear .4s;
  pointer-events: auto;
  background: #0f172a;
  border-left: 1px solid #ffffff14;
  flex-direction: column;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(100%);
}

.notif-panel.open {
  pointer-events: auto;
}

.notif-panel.open .notif-overlay {
  opacity: 1;
  pointer-events: auto;
}

.notif-panel.open .notif-drawer {
  visibility: visible;
  transition: transform .4s var(--ease-drawer), visibility 0s;
  transform: translateX(0);
}

.notif-item {
  cursor: pointer;
  background: #ffffff08;
  border: 1px solid #ffffff0f;
  border-radius: 16px;
  padding: 16px;
  transition: background-color .2s, border-color .2s;
}

.notif-item:hover {
  background: #ffffff0f;
}

.notif-item.unread {
  background: #3282b80d;
  border-color: #3282b833;
}

.notif-badge {
  color: #fff;
  background: #dc2626;
  border: 2px solid #0f172a;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  font-size: 10px;
  font-weight: 900;
  transition: transform .34s cubic-bezier(.34, 1.56, .64, 1), opacity .18s;
  display: flex;
  position: absolute;
  top: -4px;
  left: -4px;
}

.notif-badge.hidden-badge {
  opacity: 0;
  transform: scale(.4);
}

.notif-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.notif-dot.blue {
  background: #3282b8;
}

.notif-dot.green {
  background: #22c55e;
}

.notif-dot.yellow {
  background: #eab308;
}

.notif-dot.red {
  background: #ef4444;
}

@keyframes notifPop {
  0% {
    opacity: 0;
    transform: scale(.8) translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.notif-toast-item {
  animation: .3s forwards notifPop;
}

.datepicker-plot-area {
  z-index: 9999 !important;
  background-color: #111827 !important;
  border: 1px solid #ffffff1a !important;
  border-radius: 1.5rem !important;
  padding: 10px !important;
  font-family: Vazirmatn, sans-serif !important;
  box-shadow: 0 20px 25px -5px #00000080 !important;
}

.datepicker-plot-area .datepicker-header {
  background: none !important;
  border-bottom: 1px solid #ffffff0d !important;
}

.datepicker-plot-area .datepicker-header .month-item, .datepicker-plot-area .datepicker-header .year-item {
  color: #bbe1fa !important;
  font-weight: bold !important;
}

.datepicker-plot-area .datepicker-day-view .table-days thead td {
  color: #ffffff4d !important;
  font-size: 11px !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td span {
  color: #fffc !important;
  background: none !important;
  border-radius: 10px !important;
  transition: background-color .2s, color .2s !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td.selected span {
  color: #fff !important;
  background-color: #3282b8 !important;
  box-shadow: 0 4px 10px #3282b866 !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td span:hover {
  color: #fff !important;
  background: #ffffff1a !important;
}

.datepicker-plot-area .datepicker-footer {
  display: none !important;
}

.datepicker-plot-area .datepicker-header .next, .datepicker-plot-area .datepicker-header .prev {
  filter: invert() brightness(2) !important;
}

.contact-card {
  transition: transform .35s var(--ease-out), border-color .35s ease,
    box-shadow .35s ease;
}

.contact-card:hover {
  border-color: #3282b880;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px #3282b826;
}

.contact-icon-wrapper {
  transition: transform .4s;
}

.contact-card:hover .contact-icon-wrapper {
  transform: scale(1.1);
}

.theme-switch {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  width: 42px;
  height: 42px;
  transition: background var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: relative;
  overflow: visible;
}

.theme-switch:hover {
  background: var(--surface-2);
  border-color: #3282b899;
}

.theme-switch:active {
  transform: scale(.92);
}

.theme-switch__icon {
  width: 21px;
  height: 21px;
  display: block;
}

.theme-switch__icon svg {
  width: 100%;
  height: 100%;
  transition: transform .3s var(--ease-out);
  display: block;
  overflow: visible;
  transform: rotate(0);
}

.ts-disc {
  fill: #cfe6ff;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .3s var(--ease-standard), transform .3s var(--ease-out);
}

.ts-cut {
  transform-box: view-box;
  transform-origin: center;
  transition: transform .3s var(--ease-out);
}

.ts-rays {
  stroke: #f0a83c;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transition: opacity .22s var(--ease-standard), transform .3s var(--ease-out);
  transform: scale(.35) rotate(-40deg);
}

body.light-theme .theme-switch__icon svg {
  transform: rotate(180deg);
}

body.light-theme .ts-disc {
  fill: #f0a83c;
  transform: scale(.68);
}

body.light-theme .ts-cut {
  transform: translate(9px, -10px);
}

body.light-theme .ts-rays {
  opacity: 1;
  transform: scale(1) rotate(0);
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch, .theme-switch__icon, .theme-switch__icon:before {
    transition-duration: .01ms;
  }
}

.theme-icon {
  transition: color .3s;
}

body.light-theme {
  color: #0f172a !important;
  background-color: #f8fafc !important;
  background-image: radial-gradient(circle at 12% 8%, #3282b80d 0%, #0000 45%), radial-gradient(circle at 88% 92%, #1b6ca80b 0%, #0000 45%) !important;
  background-attachment: fixed !important;
}

body.light-theme.text-white, body.light-theme .text-white, body.light-theme .text-white\/90, body.light-theme .text-white\/80 {
  color: #0f172a !important;
}

body.light-theme .text-white\/70, body.light-theme .text-white\/60 {
  color: #334155 !important;
}

body.light-theme .text-white\/50, body.light-theme .text-white\/45, body.light-theme .text-white\/40, body.light-theme .text-white\/30 {
  color: #5c6b80 !important;
}

body.light-theme .text-white\/20, body.light-theme .text-white\/10 {
  color: #94a3b8 !important;
}

body.light-theme .text-\[\#BBE1FA\], body.light-theme .text-\[\#BBE1FA\]\/80 {
  color: #0f4c75 !important;
}

body.light-theme .from-\[\#BBE1FA\] {
  --tw-gradient-from: #0f4c75 !important;
}

body.light-theme .text-\[\#3282B8\] {
  color: var(--accent-strong) !important;
}

body:not(.light-theme) .text-\[\#3282B8\], body:not(.light-theme) .hover\:text-\[\#3282B8\]:hover {
  color: var(--accent-on-dark);
}

body.light-theme .text-blue-400 {
  color: #1d4ed8 !important;
}

body.light-theme .text-red-400 {
  color: #dc2626 !important;
}

body.light-theme .text-green-400 {
  color: #166534 !important;
}

body.light-theme i[style*="color: rgb(255, 255, 255)"], body.light-theme i[style*="color: white"], body.light-theme i[style*="color: hsl(0, 0%, 100%)"] {
  color: #475569 !important;
}

body.light-theme .bg-white\/5 {
  background-color: #0f172a08 !important;
}

body.light-theme .bg-white\/10 {
  background-color: #0f172a0d !important;
}

body.light-theme .bg-white\/20 {
  background-color: #0f172a14 !important;
}

body.light-theme .bg-white\/\[0\.01\] {
  background-color: #0f172a03 !important;
}

body.light-theme .bg-white\/\[0\.02\] {
  background-color: #0f172a05 !important;
}

body.light-theme .hover\:bg-white\/5:hover {
  background-color: #0f172a0d !important;
}

body.light-theme .hover\:bg-white\/10:hover {
  background-color: #0f172a12 !important;
}

body.light-theme .hover\:bg-white\/15:hover {
  background-color: #0f172a17 !important;
}

body.light-theme .hover\:bg-white\/25:hover {
  background-color: #0f172a1f !important;
}

body.light-theme .hover\:bg-\[\#3282B8\]:hover {
  background-color: var(--accent-fill) !important;
}

body.light-theme .hover\:bg-\[\#1B6CA8\]:hover {
  background-color: #1b6ca8 !important;
}

body.light-theme .hover\:bg-\[\#E1306C\]:hover {
  background-color: #c1275c !important;
}

body.light-theme .hover\:bg-\[\#3282B8\]:hover, body.light-theme .hover\:bg-\[\#3282B8\]:hover i, body.light-theme .hover\:bg-\[\#1B6CA8\]:hover, body.light-theme .hover\:bg-\[\#1B6CA8\]:hover i, body.light-theme .hover\:bg-\[\#E1306C\]:hover, body.light-theme .hover\:bg-\[\#E1306C\]:hover i {
  color: #fff !important;
}

body.light-theme .border-white\/5, body.light-theme .border-white\/10, body.light-theme .border-white\/20, body.light-theme .border-white\/08 {
  border-color: #0f172a1a !important;
}

body.light-theme .bg-gradient-to-br.from-\[\#0F172A\], body.light-theme .bg-gradient-to-br.from-\[\#1B262C\], body.light-theme .premium-card {
  background: linear-gradient(135deg, #fff 0%, #e0f2fe 100%) !important;
  border: 1px solid #bae6fd !important;
  box-shadow: 0 10px 30px #0ea5e91a !important;
}

body.light-theme .bg-gradient-to-b.from-white\/\[0\.03\] {
  background: linear-gradient(#0f172a08, #0000) !important;
}

body.light-theme .from-\[\#0F172A\] {
  --tw-gradient-from: #fff !important;
}

body.light-theme .via-\[\#0F172A\]\/70, body.light-theme .via-\[\#0F172A\]\/80 {
  --tw-gradient-stops: var(--tw-gradient-from), #ffffffe6, var(--tw-gradient-to) !important;
}

body.light-theme .to-\[\#0F172A\]\/80 {
  --tw-gradient-to: #ffffffe6 !important;
}

body.light-theme .to-\[\#0F172A\] {
  --tw-gradient-to: #fff !important;
}

.feature-pattern {
  transition: transform .7s;
}

.group:hover .feature-pattern {
  transform: scale(1.06);
}

.feature-pattern-network {
  background-color: #101d33;
  background-image: radial-gradient(circle at 20% 28%, #3282b859 0, #0000 45%), radial-gradient(circle at 82% 72%, #bbe1fa38 0, #0000 42%), radial-gradient(#3282b873 1.5px, #0000 1.5px);
  background-size: 100% 100%, 100% 100%, 22px 22px;
}

.feature-pattern-ledger {
  background-color: #101d33;
  background-image: repeating-linear-gradient(#ffffff0d 0 1px, #0000 1px 26px);
}

.feature-pattern-circuit {
  background-color: #101d33;
  background-image: linear-gradient(#3282b852 1px, #0000 1px), linear-gradient(90deg, #3282b852 1px, #0000 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 50% 35%, #000 0%, #0000 78%);
}

.feature-pattern-shield {
  background-color: #0d2b45;
  background-image: repeating-radial-gradient(circle at 50% 32%, #ffffff1f 0 2px, #0000 2px 18px);
}

body.light-theme .feature-pattern-network, body.light-theme .feature-pattern-ledger, body.light-theme .feature-pattern-circuit {
  background-color: #eaf3fa;
}

body.light-theme .feature-pattern-shield {
  background-color: #dcecf7;
}

body.light-theme .feature-pattern-network {
  background-image: radial-gradient(circle at 20% 28%, #3282b838 0, #0000 45%), radial-gradient(circle at 82% 72%, #1b6ca829 0, #0000 42%), radial-gradient(#3282b84d 1.5px, #0000 1.5px);
  background-size: 100% 100%, 100% 100%, 22px 22px;
}

body.light-theme .feature-pattern-ledger {
  background-image: repeating-linear-gradient(#0f172a12 0 1px, #0000 1px 26px);
}

body.light-theme .feature-pattern-circuit {
  background-image: linear-gradient(#3282b838 1px, #0000 1px), linear-gradient(90deg, #3282b838 1px, #0000 1px);
  background-size: 28px 28px;
}

body.light-theme .feature-pattern-shield {
  background-image: repeating-radial-gradient(circle at 50% 32%, #1b6ca826 0 2px, #0000 2px 18px);
}

.feature-card .feature-bg-img {
  opacity: .85 !important;
}

.feature-card:hover .feature-bg-img {
  opacity: 1 !important;
}

.feature-card .feature-overlay-dark {
  background: linear-gradient(to top, #0f172aeb 0%, #0f172a8c 38%, #0f172a0d 75%, #0000 100%) !important;
}

.feature-card .feature-overlay-right {
  background: linear-gradient(to right, #0f172aeb 0%, #0f172a73 45%, #0f172a0d 80%, #0000 100%) !important;
}

.feature-card.mix-blend-remove .feature-bg-img, .feature-card .feature-bg-img.mix-blend-overlay {
  mix-blend-mode: normal !important;
}

body.light-theme .feature-card .feature-bg-img {
  opacity: .9 !important;
}

body.light-theme .feature-card:hover .feature-bg-img {
  opacity: 1 !important;
}

body.light-theme .feature-card .feature-overlay-dark {
  background: linear-gradient(to top, #fffffff2 0%, #ffffff8c 38%, #ffffff14 75%, #0000 100%) !important;
}

body.light-theme .feature-card .feature-overlay-right {
  background: linear-gradient(to right, #fffffff2 0%, #ffffff80 45%, #ffffff14 80%, #0000 100%) !important;
}

body.light-theme .feature-card {
  border-color: #3282b833 !important;
}

body.light-theme .feature-card:hover {
  border-color: #3282b880 !important;
  box-shadow: 0 10px 40px #3282b826 !important;
}

body.light-theme .feature-card .feature-icon-box {
  background: #ffffffb3 !important;
  border-color: #3282b84d !important;
}

body.light-theme .feature-card h3 {
  color: #0f172a !important;
}

body.light-theme .feature-card p {
  color: #334155 !important;
}

body.light-theme .shadow-blue-900\/20, body.light-theme .shadow-blue-900\/30, body.light-theme .shadow-blue-900\/40 {
  box-shadow: 0 10px 25px #3282b82e !important;
}

body.light-theme .group:hover .group-hover\:opacity-70 {
  opacity: .85 !important;
}

body.light-theme .group:hover .group-hover\:opacity-50 {
  opacity: .7 !important;
}

:where(body.light-theme) input:where(:not([type="range"]):not([type="checkbox"]):not([type="radio"])), :where(body.light-theme) :where(.input-glass, .otp-input) {
  color: #0f172a !important;
  background-color: #fff !important;
  border: 1px solid #cbd5e1 !important;
}

:where(body.light-theme) input:where(:not([type="range"]):not([type="checkbox"]):not([type="radio"])):focus, :where(body.light-theme) :where(.input-glass, .otp-input):focus {
  border-color: #3282b8 !important;
  box-shadow: 0 0 0 3px #3282b826 !important;
}

body.light-theme input::placeholder {
  color: #94a3b8 !important;
}

body.light-theme .otp-input.filled {
  background: #22c55e0d !important;
  border-color: #22c55e !important;
}

body.light-theme .timer-ring circle[stroke="rgba(255,255,255,0.08)"] {
  stroke: #e2e8f0 !important;
}

body.light-theme .notif-drawer {
  background: #f8fafc !important;
  border-left: 1px solid #e2e8f0 !important;
}

body.light-theme .notif-item {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
}

body.light-theme .notif-item:hover {
  background: #f1f5f9 !important;
}

body.light-theme .notif-item.unread {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}

body.light-theme .notif-badge {
  border-color: #f8fafc !important;
}

body.light-theme .datepicker-plot-area {
  background-color: #fff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 25px #00000014 !important;
}

body.light-theme .datepicker-plot-area .datepicker-header {
  border-bottom-color: #0f172a0f !important;
}

body.light-theme .datepicker-plot-area .datepicker-header .month-item, body.light-theme .datepicker-plot-area .datepicker-header .year-item, body.light-theme .datepicker-plot-area .datepicker-day-view .table-days td span {
  color: #0f172a !important;
}

body.light-theme .datepicker-plot-area .datepicker-day-view .table-days td.selected span {
  color: #fff !important;
}

body.light-theme .datepicker-plot-area .datepicker-day-view .table-days thead td {
  color: #64748b !important;
}

body.light-theme .datepicker-plot-area .datepicker-day-view .table-days td span:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}

body.light-theme .datepicker-plot-area .datepicker-header .next, body.light-theme .datepicker-plot-area .datepicker-header .prev {
  opacity: .5;
  filter: invert(0) brightness(0) !important;
}

body.light-theme .profile-tab-btn:not(.is-active) {
  opacity: 1;
  color: #475569 !important;
}

body.light-theme .profile-tab-btn:not(.is-active):hover {
  color: #0f172a !important;
}

body.light-theme img[src*="/logo."]:not([alt=""]) {
  filter: brightness(0) saturate();
  opacity: .88;
}

body.light-theme .hero-info-box {
  color: #0f172a !important;
  background-color: #3282b81a !important;
  border-color: #3282b84d !important;
}

body.light-theme .hero-info-box strong {
  color: #1b6ca8 !important;
}

body.light-theme .glow-sphere, body.light-theme .bg-glow {
  filter: blur(100px);
  opacity: .15 !important;
}

body.light-theme .brand-icon {
  color: #94a3b8 !important;
}

body.light-theme .brand-icon:hover {
  filter: drop-shadow(0 0 5px #0f4c7533);
  color: #0f4c75 !important;
}

body.light-theme .step-dot {
  background: #cbd5e1 !important;
}

body.light-theme .step-dot.active {
  background: #3282b8 !important;
}

body.light-theme .heritage-image-filter img {
  filter: grayscale() contrast(1.05) brightness(.95);
  opacity: .16;
  mix-blend-mode: multiply;
}

body.light-theme .hover\:bg-white:hover {
  background-color: #0f172a !important;
}

body.light-theme .hover\:text-\[\#0F172A\]:hover {
  color: #fff !important;
}

[class~="bg-[#3282B8]"]:not(:hover), [class~="bg-[#3282b8]"]:not(:hover) {
  background-color: var(--accent-fill) !important;
}

body.light-theme [class~="text-white"][class*="bg-[#3282B8]"], body.light-theme [class~="text-white"][class*="bg-[#3282b8]"], body.light-theme [class~="text-white"][class*="bg-[#1B6CA8]"], body.light-theme [class~="text-white"][class*="bg-[#1b6ca8]"], body.light-theme [class~="text-white"][class*="from-[#1B6CA8]"], body.light-theme [class~="text-white"][class*="from-[#1b6ca8]"], body.light-theme [class~="text-white"][class*="from-[#3282B8]"], body.light-theme [class~="text-white"][class*="bg-gradient-to-"], body.light-theme .active-link, body.light-theme .tab-active, body.light-theme #toast, body.light-theme .wallet-card [class*="text-white"], body.light-theme .invite-banner [class*="text-white"], body.light-theme [class*="hover:text-white"][class*="hover:bg-"]:hover {
  color: #fff !important;
}

body.light-theme [class*="hover:text-white"]:not([class*="hover:bg-"]):hover {
  color: var(--accent-strong) !important;
}

.btn-primary-pill, .btn-secondary-pill {
  border-radius: var(--radius-pill);
  cursor: pointer;
  height: 52px;
  transition: transform var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
  letter-spacing: 0;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  padding: 0 42px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  display: inline-flex;
}

.btn-primary-pill:active, .btn-secondary-pill:active {
  transform: translateY(0) scale(.98);
}

.btn-primary-pill {
  color: #fff;
  transition: transform .2s cubic-bezier(.22, .9, .3, 1),
    box-shadow .2s cubic-bezier(.22, .9, .3, 1),
    filter .2s var(--ease-standard),
    color var(--dur-base) var(--ease-standard);
  background-image: linear-gradient(100deg, #0000 40%, #ffffff2e 50%, #0000 60%), linear-gradient(#ffffff1a, #ffffff08 52%, #0000 62%), linear-gradient(#256a97 0%, #1b5583 46%, #123f66 100%);
  background-position: 130% 0, 0 0, 0 0;
  background-repeat: no-repeat;
  background-size: 240% 100%, 100% 100%, 100% 100%;
  border: none;
  position: relative;
  transform: translateY(0);
  box-shadow: inset 0 1.5px #ffffff80, inset 0 -1.5px #04182a59, inset 0 0 0 1px #ffffff24;
}

.btn-primary-pill--hero, .earn-banner__cta {
  animation: 6.5s cubic-bezier(.4, 0, .2, 1) infinite pillSheen;
}

@keyframes pillSheen {
  0%, 64% {
    background-position: 130% 0, 0 0, 0 0;
  }

  88%, 100% {
    background-position: -40% 0, 0 0, 0 0;
  }
}

.btn-primary-pill:hover {
  filter: brightness(1.09) saturate(1.05);
  transform: translateY(-2px);
  box-shadow: inset 0 1.5px #fff9, inset 0 -1.5px #04182a59, inset 0 0 0 1px #fff3;
}

.btn-primary-pill:active {
  transition-duration: 90ms;
  transform: translateY(1px) scale(.985);
  box-shadow: inset 0 1px #ffffff38, inset 0 3px 8px #04182a80, inset 0 0 0 1px #ffffff1a;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary-pill--hero, .earn-banner__cta {
    animation: none;
  }
}

.btn-primary-pill--hero {
  gap: 12px;
  height: auto;
  min-height: 62px;
  padding: 0 40px;
  font-weight: 700;
}

.btn-primary-pill--hero i {
  opacity: .92;
  font-size: 1.05em;
}

.btn-secondary-pill {
  color: #bbe1fa;
  background: none;
  border: 2px solid #3282b8;
}

.btn-secondary-pill:hover {
  color: #fff;
  background: var(--accent-fill);
  box-shadow: var(--shadow-accent-lg);
  transform: translateY(-2px);
}

body.light-theme .btn-primary-pill {
  box-shadow: inset 0 1.5px #fff9, inset 0 -1.5px #04182a47, inset 0 0 0 1px #ffffff2e;
}

body.light-theme .btn-primary-pill:hover {
  box-shadow: inset 0 1.5px #ffffffb3, inset 0 -1.5px #04182a47, inset 0 0 0 1px #ffffff3d;
}

body.light-theme .btn-primary-pill:active {
  box-shadow: inset 0 1px #ffffff42, inset 0 3px 8px #04182a57, inset 0 0 0 1px #ffffff24;
}

body.light-theme .btn-secondary-pill {
  color: #0f4c75;
}

body.light-theme .btn-secondary-pill:hover {
  color: #fff;
}

.footer-legal {
  gap: 1.5rem;
  display: flex;
}

.footer-legal a {
  align-items: center;
  min-height: 24px;
  display: inline-flex;
}

.footer-badge {
  border-radius: var(--radius-sm);
  background: #ffffff08;
  border: 1px dashed #ffffff38;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 18px auto 0;
  padding: 10px 14px;
  display: flex;
}

.footer-badge img {
  border-radius: 8px;
  width: 72px;
  height: auto;
  display: block;
}

.footer-badge__ico {
  color: #ffffff73;
  background: #ffffff0f;
  border-radius: 10px;
  flex-shrink: 0;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 16px;
  display: grid;
}

.footer-badge__txt {
  color: #ffffff9e;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
  line-height: 1.6;
  display: flex;
}

.footer-badge__note {
  color: #fbbf24;
  border-radius: var(--radius-pill);
  background: #fbbf241f;
  border: 1px solid #fbbf244d;
  align-self: flex-start;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 700;
}

body.light-theme .footer-badge {
  background: #0f172a08;
  border-color: #0f172a38;
}

body.light-theme .footer-badge__txt {
  color: #0f172ab3;
}

body.light-theme .footer-badge__ico {
  color: #0f172a80;
  background: #0f172a0f;
}

body.light-theme .footer-badge__note {
  color: #92400e;
  background: #fbbf2429;
  border-color: #92400e66;
}

.earn__kicker {
  color: var(--accent-soft);
  margin: 0 0 .6rem;
  font-size: 12px;
  font-weight: 700;
}

body.light-theme .earn__kicker {
  color: var(--accent-strong);
}

.earn__lede {
  max-width: 40rem;
  color: var(--spec-muted);
  margin: 0 auto;
  font-size: 14.5px;
  line-height: 2;
}

.earn__ways {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
  display: grid;
}

@media (width >= 820px) {
  .earn__ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.earn-card {
  border-radius: var(--radius-lg);
  background: linear-gradient(var(--spec-card-bg), var(--spec-card-bg)) padding-box,
    linear-gradient(140deg, #78bef080, #3282b829 45%, #3282b80d) border-box;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--shadow-md);
  border: 1px solid #0000;
  padding: 1.6rem 1.4rem 1.4rem;
  position: relative;
}

.earn-card__num {
  color: #fff;
  background: linear-gradient(135deg, #1b6ca8, #2b76a9);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: .85rem;
  font-size: 15px;
  font-weight: 800;
  display: inline-flex;
}

.earn-card__title {
  color: var(--text);
  margin: 0 0 .6rem;
  font-size: clamp(1.1rem, 4vw, 1.35rem);
  font-weight: 800;
  line-height: 1.7;
}

.earn-card__lede {
  color: var(--spec-muted);
  margin: 0 0 1.1rem;
  font-size: 13.5px;
  line-height: 2;
}

.earn-card__list {
  flex-direction: column;
  gap: 9px;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  display: flex;
}

.earn-card__list li {
  color: var(--text);
  align-items: start;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.9;
  display: flex;
}

.earn-card__list i {
  color: #38ef7d;
  flex-shrink: 0;
  margin-top: 6px;
  font-size: 10px;
}

body.light-theme .earn-card__list i {
  color: #0f9d58;
}

.earn-card__note {
  border-top: 1px solid var(--spec-line);
  color: var(--spec-faint);
  margin: 0;
  padding-top: .9rem;
  font-size: 12.5px;
  line-height: 1.9;
}

.page-light {
  z-index: -1;
  pointer-events: none;
  width: min(860px, 104vw);
  height: 780px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.page-light__source {
  opacity: .5;
  width: 360px;
  height: 360px;
  top: -210px;
  left: 50%;
  transform: translateX(-50%);
}

.page-light__beam {
  filter: blur(30px);
  position: absolute;
  inset: 0;
}

.page-light__beam:before {
  content: "";
  clip-path: polygon(41% 0, 59% 0, 96% 100%, 4% 100%);
  background: linear-gradient(#bbe1fa42, #78bef01a 46%, #3282b800 80%);
  position: absolute;
  inset: 0;
}

body.light-theme .page-light__beam:before {
  background: linear-gradient(#3282b833, #3282b817 46%, #3282b800 80%);
}

.earn-hero {
  text-align: center;
  justify-items: center;
  gap: clamp(.9rem, 3vw, 1.5rem);
  margin-bottom: 2.5rem;
  padding-top: clamp(.25rem, 2vw, .75rem);
  display: grid;
  position: relative;
}

.earn-portrait {
  width: clamp(220px, 55vw, 330px);
  margin: clamp(-2.5rem, -5vw, -.75rem) 0 0;
  position: relative;
}

.earn-portrait img {
  width: 100%;
  height: auto;
  display: block;
}

.earn-portrait:before {
  content: "";
  z-index: -1;
  filter: blur(28px);
  background: radial-gradient(closest-side, #bbe1fa38, #0000 72%);
  border-radius: 50%;
  width: 78%;
  height: 32%;
  position: absolute;
  top: -7%;
  left: 50%;
  transform: translateX(-50%);
}

body.light-theme .earn-portrait:before {
  background: radial-gradient(closest-side, #3282b821, #0000 74%);
}

.sell {
  border-radius: var(--radius-lg);
  background: linear-gradient(var(--spec-card-bg), var(--spec-card-bg)) padding-box,
    linear-gradient(140deg,
        #78bef080,
        #3282b829 45%,
        #3282b80d)
      border-box;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--shadow-md);
  text-align: center;
  border: 1px solid #0000;
  margin-bottom: 16px;
  padding: clamp(1.3rem, 4.5vw, 2.1rem) clamp(1.05rem, 4vw, 1.9rem);
}

.sell__intro {
  max-width: 42rem;
  margin: 0 auto clamp(1.1rem, 4vw, 1.6rem);
}

.sell__eyebrow {
  color: var(--spec-faint);
  margin: 0 0 .5rem;
  font-size: 12px;
  font-weight: 700;
}

.sell__eyebrow--mid {
  margin: 1.25rem 0 .75rem;
}

.sell__title {
  color: var(--text);
  margin: 0 0 .55rem;
  font-size: clamp(1.15rem, 4.4vw, 1.55rem);
  font-weight: 800;
  line-height: 1.7;
}

.sell__lede {
  color: var(--spec-muted);
  margin: 0;
  font-size: 13.5px;
  line-height: 2;
}

.sell__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.sell-cat {
  border-radius: var(--radius-md);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  text-align: start;
  min-height: 76px;
  transition: border-color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
  grid-template: "ico title"
                 "ico desc"
                 "brands brands" 1fr
                 / auto minmax(0, 1fr);
  gap: 3px 13px;
  padding: .95rem 1rem .85rem;
  display: grid;
}

.sell-cat:hover {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--brand, var(--accent)) 45%, transparent);
}

.sell-cat__ico {
  width: 44px;
  height: 44px;
  color: var(--brand, var(--accent-soft));
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--brand, var(--accent)) 24%, transparent),
    color-mix(in srgb, var(--brand, var(--accent)) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand, var(--accent)) 26%, transparent);
  box-shadow: inset 0 1px 0
    color-mix(in srgb, var(--brand, var(--accent)) 34%, transparent);
  border-radius: 14px;
  flex-shrink: 0;
  grid-area: ico;
  justify-content: center;
  align-self: center;
  align-items: center;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
}

body.light-theme .sell-cat__ico {
  color: var(--brand-light, var(--brand, var(--accent-strong)));
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--brand-light, var(--accent-strong)) 16%, transparent),
    color-mix(in srgb, var(--brand-light, var(--accent-strong)) 5%, transparent));
  border-color: color-mix(in srgb, var(--brand-light, var(--accent-strong)) 24%, transparent);
  box-shadow: inset 0 1px 0
    color-mix(in srgb, var(--brand-light, var(--accent-strong)) 18%, transparent);
}

.sell-cat__title {
  color: var(--text);
  grid-area: title;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.6;
}

.sell-cat__desc {
  color: var(--spec-faint);
  grid-area: desc;
  font-size: 12px;
  line-height: 1.75;
}

.sell-cat__brands {
  border-top: 1px solid var(--border-1);
  grid-area: brands;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: end;
  gap: 5px;
  margin: .8rem 0 0;
  padding: .7rem 0 0;
  list-style: none;
  display: grid;
}

.sell-brand {
  --logo: var(--brand, var(--accent-soft));
  --logo-lt: var(--brand-light, var(--brand, var(--accent-strong)));
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  min-width: 0;
  color: var(--spec-muted);
  transition: border-color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
  border-radius: 10px;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
  display: flex;
}

.sell-brand i {
  text-align: center;
  width: 14px;
  color: var(--logo);
  flex-shrink: 0;
  font-size: 12.5px;
  line-height: 1;
}

.sell-brand span {
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: isolate;
  overflow: hidden;
}

.sell-cat:hover .sell-brand {
  background: color-mix(in srgb, var(--brand, var(--accent)) 9%, transparent);
  border-color: color-mix(in srgb, var(--brand, var(--accent)) 22%, transparent);
}

body.light-theme .sell-brand {
  color: var(--spec-muted);
}

body.light-theme .sell-brand i {
  color: var(--logo-lt);
}

body.light-theme .sell-cat:hover .sell-brand {
  background: color-mix(in srgb, var(--brand-light, var(--accent-strong)) 7%, transparent);
  border-color: color-mix(in srgb, var(--brand-light, var(--accent-strong)) 20%, transparent);
}

.sb-openai {
  --logo: #19c37d;
  --logo-lt: #0a7a5e;
}

.sb-claude {
  --logo: #e08a63;
  --logo-lt: #b8552f;
}

.sb-google {
  --logo: #6aa0f8;
  --logo-lt: #1a73e8;
}

.sb-copilot {
  --logo: #a371f7;
  --logo-lt: #6d28d9;
}

.sb-spotify {
  --logo: #1ed760;
  --logo-lt: #0e7a37;
}

.sb-youtube {
  --logo: #ff5c5c;
  --logo-lt: #c00000;
}

.sb-apple {
  --logo: #e2e8f0;
  --logo-lt: #1f2937;
}

.sb-meta {
  --logo: #4b9bff;
  --logo-lt: #0064e0;
}

.sb-tiktok {
  --logo: #ff5878;
  --logo-lt: #c7003f;
}

.sb-x {
  --logo: #e2e8f0;
  --logo-lt: #0f172a;
}

.sb-aws {
  --logo: #ff9f43;
  --logo-lt: #a85c00;
}

.sb-do {
  --logo: #39f;
  --logo-lt: #0069d9;
}

.sb-linode {
  --logo: #00c46a;
  --logo-lt: #00803f;
}

.sb-cloudflare {
  --logo: #f6a01f;
  --logo-lt: #c9660c;
}

.sb-play {
  --logo: #3ddc84;
  --logo-lt: #188038;
}

.sb-steam {
  --logo: #66c0f4;
  --logo-lt: #1b6ca8;
}

.sb-xbox {
  --logo: #4fc94f;
  --logo-lt: #0b5a0b;
}

.sb-amazon {
  --logo: #ffa726;
  --logo-lt: #a85c00;
}

.sb-ebay {
  --logo: #f4585c;
  --logo-lt: #b3232a;
}

.sb-etsy {
  --logo: #ff8a4c;
  --logo-lt: #c24f00;
}

.sb-figma {
  --logo: #ff7262;
  --logo-lt: #c53d16;
}

.sb-microsoft {
  --logo: #4cc2ff;
  --logo-lt: #0067b8;
}

.sb-notion {
  --logo: #e2e8f0;
  --logo-lt: #1f2937;
}

.sb-stripe {
  --logo: #9a90ff;
  --logo-lt: #4f46e5;
}

.sell-cat--generic {
  background: #3282b81a;
  border-color: #3282b847;
}

.sell-cat--generic .sell-cat__ico {
  color: var(--accent-soft);
}

body.light-theme .sell-cat--generic .sell-cat__ico {
  color: var(--accent-strong);
}

.sell__note {
  color: var(--spec-muted);
  align-items: center;
  gap: 8px;
  margin: 1.4rem 0 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.7;
  display: inline-flex;
}

.sell__note i {
  color: #38ef7d;
  flex-shrink: 0;
  font-size: 14px;
}

body.light-theme .sell__note i {
  color: #0f9d58;
}

.earn-cta {
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  text-align: center;
  padding: 1.75rem 1.4rem;
}

.earn-cta__title {
  color: var(--text);
  margin: 0 0 .6rem;
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  font-weight: 800;
}

.earn-cta__lede {
  max-width: 34rem;
  color: var(--spec-muted);
  margin: 0 auto 1.4rem;
  font-size: 13.5px;
  line-height: 2;
}

.earn-cta__row {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  display: flex;
}

.earn-cta__alt {
  border-radius: var(--radius-pill);
  color: #bbe1fa;
  min-height: 48px;
  transition: background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
  border: 1px solid #3282b857;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
}

body.light-theme .earn-cta__alt, body.light-theme .earn-cta__alt span {
  color: #14507a;
}

.earn-cta__alt:hover {
  color: var(--text);
  background: #3282b81f;
}

.earn-banner {
  isolation: isolate;
  border: 1px solid var(--glass-border);
  background: radial-gradient(90% 120% at 12% 4%,
      #3282b833,
      transparent 62%),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(15px) saturate(140%);
  box-shadow: var(--shadow-md);
  border-radius: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(1.6rem, 4.5vw, 3.25rem);
  position: relative;
  overflow: hidden;
}

.earn-banner__body {
  z-index: 2;
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  position: relative;
}

.earn-banner__eyebrow {
  color: var(--accent-soft);
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 0 .85rem;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}

.earn-banner__rule {
  background: linear-gradient(to left,
    var(--accent-soft),
    #bbe1fa00);
  flex-shrink: 0;
  width: 34px;
  height: 1px;
  display: block;
}

body.light-theme .earn-banner__eyebrow {
  color: var(--accent-strong);
}

body.light-theme .earn-banner__rule {
  background: linear-gradient(to left,
    var(--accent-strong),
    #1b6ca800);
}

.earn-banner__title {
  color: #fff;
  margin: 0 0 .7rem;
  font-size: clamp(1.5rem, 5.2vw, 2.35rem);
  font-weight: 900;
  line-height: 1.65;
}

body.light-theme .earn-banner__title {
  color: #0f172a;
}

.earn-banner__lede {
  color: #ffffffb8;
  max-width: 34rem;
  margin: 0 auto 1.5rem;
  font-size: clamp(.85rem, 3.2vw, .95rem);
  line-height: 2;
}

body.light-theme .earn-banner__lede {
  color: #0f172ab8;
}

.earn-banner__ways {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  display: grid;
}

@media (width >= 620px) {
  .earn-banner__ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.earn-banner__ways li {
  text-align: start;
  border-radius: var(--radius-md);
  -webkit-backdrop-filter: blur(6px);
  background: #ffffff0b;
  border: 1px solid #bbe1fa24;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ico title"
                       "ico desc";
  gap: 3px 11px;
  padding: .85rem .95rem;
  display: grid;
}

.earn-banner__ways i {
  width: 34px;
  height: 34px;
  color: var(--accent-soft);
  background: #3282b829;
  border: 1px solid #bbe1fa29;
  border-radius: 11px;
  grid-area: ico;
  align-self: center;
  place-items: center;
  font-size: 15px;
  display: grid;
}

.earn-banner__ways b {
  color: #fff;
  grid-area: title;
  font-size: 13.5px;
  font-weight: 800;
}

.earn-banner__ways span {
  color: #fff9;
  grid-area: desc;
  font-size: 12px;
  line-height: 1.75;
}

body.light-theme .earn-banner__ways li {
  background: #ffffffb8;
  border-color: #1b6ca82e;
}

body.light-theme .earn-banner__ways i {
  color: var(--accent-strong);
  background: #3282b81f;
  border-color: #1b6ca833;
}

body.light-theme .earn-banner__ways b {
  color: #0f172a;
}

body.light-theme .earn-banner__ways span {
  color: #0f172ab3;
}

.earn-banner__cta {
  gap: 10px;
  height: auto;
  min-height: 58px;
  padding: 0 34px;
  font-size: 15px;
  font-weight: 700;
}

@media (width <= 479px) {
  .earn-banner__cta {
    white-space: normal;
    text-align: center;
    width: 100%;
    padding: 0 18px;
    line-height: 1.6;
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .earn-banner:after {
    opacity: 0;
    animation: none;
  }
}

.gd {
  max-width: 62rem;
  margin: 0 auto;
}

.gd__hint {
  color: var(--spec-muted);
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.9;
  display: inline-flex;
}

.gd__nav {
  justify-content: flex-end;
  margin-bottom: 10px;
  display: flex;
}

.gd__next {
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  width: 44px;
  height: 44px;
  color: var(--accent-soft);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform .12s var(--ease-standard);
  justify-content: center;
  align-items: center;
  font-size: 14px;
  display: inline-flex;
}

body.light-theme .gd__next {
  color: var(--accent-strong);
}

.gd__next:active {
  transform: scale(.94);
}

.gd__next i {
  animation: 1.8s ease-in-out infinite gdNudge;
}

.gd.is-used .gd__next i {
  animation: none;
}

@media (hover: hover) {
  .gd__next:hover {
    color: #fff;
    background: linear-gradient(135deg, #1b6ca8, #2b76a9);
    border-color: #0000;
  }

  .gd__next:hover i {
    animation: none;
  }
}

.gd__next:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

@keyframes gdNudge {
  0%, 100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gd__next i {
    animation: none;
  }
}

.gd__tabs {
  scrollbar-width: none;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 4px;
  display: flex;
  overflow-x: auto;
  mask-image: linear-gradient(to left, #0000 0, #000 18px calc(100% - 18px), #0000 100%);
}

.gd__tabs::-webkit-scrollbar {
  display: none;
}

.gd__tab {
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  min-height: 44px;
  color: var(--spec-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
}

.gd__tab i {
  color: var(--accent-soft);
  font-size: 13px;
}

body.light-theme .gd__tab i {
  color: var(--accent-strong);
}

.gd__tab:hover {
  color: var(--text);
  border-color: #3282b866;
}

.gd__tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, #1b6ca8, #2b76a9);
  border-color: #0000;
}

.gd__tab.is-active i {
  color: #fff;
}

.gd__tab:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.gd__body {
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  padding: 1.5rem 1.4rem;
}

@media (width >= 640px) {
  .gd__body {
    padding: 1.85rem 1.75rem;
  }
}

.gd__panel[hidden] {
  display: none;
}

.gd__title {
  color: var(--text);
  margin: 0 0 .8rem;
  font-size: clamp(1.05rem, 3.8vw, 1.3rem);
  font-weight: 800;
  line-height: 1.7;
}

.gd__panel p {
  color: var(--spec-muted);
  margin: 0 0 .55rem;
  font-size: 14px;
  line-height: 2.1;
}

.gd__panel p:last-child {
  margin-bottom: 0;
}

.faq-list {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.faq-item {
  border-radius: var(--radius-md);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  transition: border-color var(--dur-base) var(--ease-standard);
  overflow: hidden;
}

.faq-toggle {
  text-align: start;
  cursor: pointer;
  width: 100%;
  color: var(--text);
  background: none;
  border: none;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 1.05rem 1.15rem;
  display: flex;
}

.faq-q {
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.75;
}

.faq-ico {
  width: 26px;
  height: 26px;
  color: var(--accent-soft);
  transition: transform var(--dur-base) var(--ease-standard);
  background: #3282b824;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  display: inline-flex;
}

body.light-theme .faq-ico {
  color: var(--accent-strong);
}

.faq-toggle:hover .faq-q {
  color: var(--accent-soft);
}

body.light-theme .faq-toggle:hover .faq-q {
  color: var(--accent-strong);
}

.faq-toggle:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.faq-answer {
  max-height: 0;
  transition: max-height var(--dur-slow) var(--ease-out);
  overflow: hidden;
}

.faq-a {
  color: var(--spec-muted);
  padding: 0 1.15rem 1.15rem;
  font-size: 13.5px;
  line-height: 2;
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer {
    transition: none;
  }
}

.hero-perks {
  flex-direction: column;
  gap: 10px;
  margin: .65rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.hero-perks li {
  color: var(--text);
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.7;
  display: flex;
}

.hero-perks i {
  color: #bbe1fa;
  background: #bbe1fa1f;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  display: inline-flex;
}

body.light-theme .hero-perks i {
  color: var(--accent-strong);
  background: #1b6ca81a;
}

.svc {
  text-align: center;
  max-width: 62rem;
  margin: 0 auto;
}

.svc__intro {
  max-width: 44rem;
  margin: 0 auto 1.75rem;
}

.svc__title {
  color: var(--text);
  margin: 0 0 .6rem;
  font-size: clamp(1.25rem, 4.4vw, 1.7rem);
  font-weight: 800;
  line-height: 1.6;
}

.svc__lede {
  color: var(--spec-muted);
  margin: 0;
  font-size: clamp(.9rem, 3.4vw, 1rem);
  line-height: 1.9;
}

.svc__eyebrow {
  color: var(--spec-faint);
  margin: 0 0 .9rem;
  font-size: 12px;
  font-weight: 700;
}

.svc__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

@media (width >= 560px) {
  .svc__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.svc__item {
  border-radius: var(--radius-md);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  text-align: start;
  min-height: 60px;
  transition: border-color var(--dur-base) var(--ease-standard),
    background var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
  align-items: center;
  gap: 12px;
  padding: .75rem .9rem;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff0d;
}

.svc__item:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(closest-side circle,
    color-mix(in srgb, var(--brand, var(--accent)) 30%, transparent),
    transparent 70%);
  opacity: .35;
  width: 62%;
  height: 220%;
  transition: opacity var(--dur-base) var(--ease-standard);
  inset-inline-start: -10%;
  position: absolute;
  top: -60%;
}

.svc__item:hover {
  border-color: color-mix(in srgb, var(--brand, var(--accent)) 42%, transparent);
  background: var(--surface-2);
  transform: translateY(-2px);
}

.svc__item:hover:before {
  opacity: .7;
}

body.light-theme .svc__item {
  box-shadow: inset 0 1px #fffc;
}

body.light-theme .svc__item:before {
  background: radial-gradient(closest-side circle,
    color-mix(in srgb, var(--brand-light, var(--accent-strong)) 22%, transparent),
    transparent 70%);
  opacity: .3;
}

.svc__logo {
  width: 30px;
  height: 30px;
  color: var(--brand, var(--accent));
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  position: relative;
}

.svc__logo svg {
  display: block;
}

.svc__name {
  color: var(--text);
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  position: relative;
}

body.light-theme .svc__logo {
  color: var(--brand-light, var(--brand, var(--accent)));
}

.svc__item--mono .svc__logo {
  color: #e8e8ed;
}

body.light-theme .svc__item--mono .svc__logo {
  color: #1d1d1f;
}

.svc__item--cat {
  --brand: var(--accent);
  --brand-light: var(--accent-strong);
  background: #3282b81a;
  border-color: #3282b847;
}

.svc__item--cat .svc__logo {
  color: var(--accent-soft);
}

body.light-theme .svc__item--cat .svc__logo {
  color: var(--accent-strong);
}

.svc__note {
  color: var(--spec-muted);
  align-items: center;
  gap: 8px;
  margin: 1.5rem 0 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.7;
  display: inline-flex;
}

.svc__note i {
  color: #38ef7d;
  font-size: 14px;
}

body.light-theme .svc__note i {
  color: #0f9d58;
}

.footer-brand {
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.footer-brand__logo {
  object-fit: contain;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}

.footer-cta {
  color: #fff;
  min-height: 48px;
  box-shadow: var(--shadow-accent);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
  background: linear-gradient(135deg, #1b6ca8, #2b76a9);
  border: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
}

.footer-cta i {
  font-size: 15px;
}

.footer-cta:hover {
  color: #fff;
  box-shadow: var(--shadow-accent-lg);
  background: linear-gradient(135deg, #0f4c75, #1b6ca8);
  transform: translateY(-2px);
}

.footer-cta:active {
  transform: translateY(0) scale(.98);
}

.footer-cta[aria-current="page"] {
  color: #fff;
  background: #3282b847;
  border-color: #bbe1fa73;
}

body.light-theme .footer-cta {
  color: #0f4c75;
  background: #3282b81a;
  border-color: #3282b86b;
}

body.light-theme .footer-cta:hover, body.light-theme .footer-cta[aria-current="page"] {
  color: #fff;
  background: #1b6ca8;
  border-color: #1b6ca8;
}

.btn {
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  height: 48px;
  transition: transform var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: 0 1.75rem;
  font-size: .875rem;
  font-weight: 700;
  display: inline-flex;
}

.btn:active {
  transform: scale(.98);
}

.btn-lg {
  height: 56px;
  padding: 0 2.25rem;
  font-size: .95rem;
}

.btn-sm {
  height: 38px;
  padding: 0 1.25rem;
  font-size: .8rem;
}

.btn.btn-solid {
  color: #fff;
  box-shadow: var(--shadow-accent);
  background: linear-gradient(135deg, #1b6ca8, #2b76a9);
  border: none;
}

.btn.btn-solid:hover {
  box-shadow: var(--shadow-accent-lg);
  background: linear-gradient(135deg, #0f4c75, #1b6ca8);
  transform: translateY(-2px);
}

.btn.btn-outline {
  color: var(--accent-soft);
  border: 1.5px solid var(--accent);
  background: none;
}

.btn.btn-outline:hover {
  color: #fff;
  background: var(--accent);
  box-shadow: var(--shadow-accent-lg);
  transform: translateY(-2px);
}

.btn.btn-ghost {
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
}

.btn.btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}

body.light-theme .btn.btn-outline {
  color: var(--accent-deep);
}

.gradient-neon-text {
  text-shadow: 0 0 1px #bbe1fa80, 0 1px 2px #0f172a59, 0 0 6px #3282b847;
}

body.light-theme .gradient-neon-text {
  text-shadow: 0 0 1px #3282b840, 0 1px 1px #0f172a0d, 0 0 4px #3282b81f;
}

.steps-contrast-panel {
  isolation: isolate;
  background: linear-gradient(135deg, #0f4c75 0%, #14263f 55%, #0f172a 100%);
  position: relative;
  transform: translateZ(0);
}

.invite-banner, .clip-fix {
  isolation: isolate;
  transform: translateZ(0);
}

.steps-glow-clip {
  border-radius: inherit;
  clip-path: inset(0 round 3rem);
  pointer-events: none;
  isolation: isolate;
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateZ(0);
}

.steps-contrast-panel:before {
  content: "";
  opacity: .6;
  background: linear-gradient(90deg, #0000, #bbe1fa, #3282b8, #bbe1fa, #0000);
  height: 2px;
  position: absolute;
  inset: 0 0 auto;
}

.steps-contrast-dots {
  background-image: radial-gradient(#bbe1fa 1.5px, #0000 1.5px);
  background-size: 26px 26px;
}

body.light-theme .steps-contrast-panel {
  background: linear-gradient(135deg, #fff 0%, #eaf6ff 55%, #dceefc 100%) !important;
  border-color: #bae6fd !important;
  box-shadow: 0 20px 60px -20px #3282b840 !important;
}

body.light-theme .steps-contrast-panel:before {
  opacity: .5;
  background: linear-gradient(90deg, #0000, #3282b8, #1b6ca8, #3282b8, #0000);
}

body.light-theme .steps-contrast-dots {
  opacity: .1 !important;
  background-image: radial-gradient(#3282b8 1.5px, #0000 1.5px) !important;
}

.steps-v2-grid {
  flex-direction: column;
  gap: 2.25rem;
  display: flex;
  position: relative;
}

@media (width >= 768px) {
  .steps-v2-grid {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
  }
}

.steps-v2-hline {
  display: none;
}

@media (width >= 768px) {
  .steps-v2-hline {
    background: repeating-linear-gradient(90deg,
      var(--accent-soft) 0 6px,
      transparent 6px 15px);
    opacity: .5;
    z-index: 0;
    background-size: 160px 100%;
    height: 2px;
    animation: 7s linear infinite stepsFlowLine;
    display: block;
    position: absolute;
    top: 2.25rem;
    left: 12.5%;
    right: 12.5%;
  }
}

@keyframes stepsFlowLine {
  to {
    background-position: -160px 0;
  }
}

body.light-theme .steps-v2-hline {
  opacity: .4;
}

.steps-v2-vline {
  background: repeating-linear-gradient(180deg,
    var(--accent-soft) 0 6px,
    transparent 6px 15px);
  opacity: .45;
  z-index: 0;
  width: 2px;
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 2rem;
}

body.light-theme .steps-v2-vline {
  opacity: .35;
}

.step-v2 {
  z-index: 1;
  text-align: right;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  display: flex;
  position: relative;
}

@media (width >= 768px) {
  .step-v2 {
    text-align: center;
    flex-direction: column;
    flex: 1;
    align-items: center;
    gap: 0;
    padding: 0 .5rem;
  }
}

.step-v2-icon-wrap {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  position: relative;
}

@media (width >= 768px) {
  .step-v2-icon-wrap {
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1.25rem;
  }
}

.step-v2-icon {
  width: 100%;
  height: 100%;
  color: var(--accent-soft);
  background-color: #17253f;
  background-image: linear-gradient(135deg, #ffffff0a, #fff0);
  border: 1.5px solid #3282b840;
  border-radius: 1.25rem;
  justify-content: center;
  align-items: center;
  font-size: 1.35rem;
  transition: box-shadow .4s, border-color .4s, transform .4s, color .4s, background .4s;
  display: flex;
  box-shadow: 0 10px 30px -8px #00000073, inset 0 1px #ffffff0f;
}

.step-v2:hover .step-v2-icon, .step-v2:focus-within .step-v2-icon {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  border-color: #3282b8b3;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 14px 40px -8px #3282b88c, 0 0 0 1px #3282b866;
}

body.light-theme .step-v2-icon {
  color: var(--accent-strong);
  background-color: #fff;
  background-image: none;
  box-shadow: 0 10px 26px -10px #0f172a26, inset 0 1px #fff9;
}

body.light-theme .step-v2:hover .step-v2-icon {
  color: #fff;
  box-shadow: 0 14px 34px -10px #3282b859, 0 0 0 1px #3282b859;
}

.step-v2-num {
  color: #fff;
  min-width: 26px;
  height: 26px;
  box-shadow: 0 4px 12px #3282b880,
    0 0 0 3px var(--bg);
  z-index: 2;
  background: linear-gradient(135deg, #2b76a9, #1b6ca8);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  font-family: Vazirmatn, sans-serif;
  font-size: 12px;
  font-weight: 800;
  transition: box-shadow .4s;
  display: flex;
  position: absolute;
  top: -8px;
  left: -8px;
}

body.light-theme .step-v2-num {
  box-shadow: 0 4px 12px #3282b859, 0 0 0 3px #fff;
}

.step-v2-body h3 {
  color: var(--text);
  margin-bottom: .35rem;
  font-size: .95rem;
  font-weight: 800;
}

.step-v2-body p {
  color: var(--text);
  opacity: .6;
  font-size: .75rem;
  line-height: 1.65;
}

@media (width >= 768px) {
  .step-v2-body {
    max-width: 165px;
  }
}

body.light-theme .step-v2-body h3 {
  color: #0f172a;
}

body.light-theme .step-v2-body p {
  color: #64748b;
  opacity: 1;
}

.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.notif-dot.purple {
  background: #a855f7;
}

.notif-dot.teal {
  background: #14b8a6;
}

.timeline-item {
  padding-inline-start: 28px;
  padding-bottom: 22px;
  position: relative;
}

.timeline-item:before {
  content: "";
  background: #ffffff14;
  width: 1.5px;
  position: absolute;
  top: 16px;
  bottom: -6px;
  right: 3px;
}

.timeline-item:last-child:before {
  display: none;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  border: 2px solid #0f172a;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  position: absolute;
  top: 5px;
  right: -1px;
  box-shadow: 0 0 0 2px #3282b826;
}

body.light-theme .timeline-item:before {
  background: #0f172a1a;
}

body.light-theme .timeline-dot {
  border-color: #fff;
}

.data-table-wrap {
  overflow-x: auto;
}

.data-table {
  border-collapse: collapse;
  white-space: nowrap;
  width: 100%;
  font-size: .8rem;
}

.data-table th {
  text-align: right;
  color: #ffffff9e;
  padding: 0 14px 12px;
  font-size: .7rem;
  font-weight: 700;
}

.data-table td {
  border-top: 1px solid #ffffff0f;
  padding: 14px;
}

body.light-theme .data-table td {
  border-top: 1px solid #0f172a0f;
}

body.light-theme .data-table th {
  color: #64748b;
}

.data-table th.text-center, .data-table td.text-center {
  text-align: center;
}

.data-table td[dir="ltr"], .data-table th[dir="ltr"] {
  text-align: right;
}

.data-table tbody tr {
  transition: background var(--dur-fast) var(--ease-standard);
}

.data-table tbody tr:hover {
  background: var(--surface-1);
}

.status-pill {
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: .65rem;
  font-weight: 700;
  display: inline-flex;
}

.status-pill.active {
  color: #22c55e;
  background: #22c55e26;
  border: 1px solid #22c55e40;
}

.status-pill.revoked {
  color: #f87171;
  background: #ef44441f;
  border: 1px solid #ef444438;
}

body.light-theme .status-pill.revoked {
  color: #b91c1c;
}

.status-pill.warn {
  color: #fbbf24;
  background: #fbbf2424;
  border: 1px solid #fbbf2442;
}

.session-card-mobile {
  background: #ffffff08;
  border: 1px solid #ffffff12;
  border-radius: 20px;
  padding: 16px;
}

body.light-theme .session-card-mobile {
  background: #0f172a08;
  border-color: #0f172a14;
}

.pc-switch {
  cursor: pointer;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.pc-switch input {
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
}

.pc-switch .pc-switch-track {
  background: #ffffff14;
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  transition: background .25s, border-color .25s;
  position: absolute;
  inset: 0;
}

.pc-switch .pc-switch-thumb {
  background: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  position: absolute;
  top: 3px;
  right: 3px;
  box-shadow: 0 2px 4px #0000004d;
}

.pc-switch input:checked ~ .pc-switch-track {
  background: #3282b8;
  border-color: #3282b8;
}

.pc-switch input:checked ~ .pc-switch-thumb {
  transform: translateX(-18px);
}

.pc-switch input:focus-visible ~ .pc-switch-track {
  outline-offset: 2px;
  outline: 2px solid #bbe1fa;
}

body.light-theme .pc-switch .pc-switch-track {
  background: #0f172a1a;
  border-color: #0f172a26;
}

body.light-theme .pc-switch input:checked ~ .pc-switch-track {
  background: #3282b8;
  border-color: #3282b8;
}

.badge-verified {
  color: #22c55e;
  background: #22c55e26;
  border: 1px solid #22c55e40;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: .65rem;
  font-weight: 800;
  display: inline-flex;
}

body.light-theme .badge-verified {
  color: #166534;
}

.wallet-card {
  color: #fff;
  background: linear-gradient(135deg, #7b2ff7 0%, #3282b8 100%);
  border-radius: 1.75rem;
  padding: 1.5rem;
  transition: transform .35s, box-shadow .35s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 35px -10px #3282b859;
}

.wallet-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -8px #3282b873;
}

.wallet-card:after {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 100% 0, #ffffff40, #0000 55%);
  position: absolute;
  inset: 0;
}

.wallet-card.wallet-card-secondary {
  background: linear-gradient(135deg, #9d4dff 0%, #3282b8 100%);
}

.ref-stat-card {
  text-align: center;
  background: #ffffff05;
  border: 1px dashed #ffffff1f;
  border-radius: 1.5rem;
  padding: 1.5rem;
  transition: border-color .3s, transform .3s;
}

.ref-stat-card:hover {
  border-color: #3282b866;
  transform: translateY(-3px);
}

body.light-theme .ref-stat-card {
  background: #0f172a05;
  border-color: #0f172a1a;
}

#guide-section {
  --gd-muted: #ffffff9e;
  --gd-faint: #ffffff8f;
}

body.light-theme #guide-section {
  --gd-muted: #0f172ab8;
  --gd-faint: #0f172ac2;
}

.gd-ring {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  position: relative;
}

.gd-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.gd-ring circle {
  fill: none;
  stroke-width: 5px;
  stroke-linecap: round;
}

.gd-ring__track {
  stroke: var(--border-1);
}

.gd-ring__fill {
  stroke: var(--accent);
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
}

.gd-ring__pct {
  color: var(--accent-soft);
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  position: absolute;
  inset: 0;
}

body.light-theme .gd-ring__pct {
  color: var(--accent-strong);
}

.gd-head {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  display: flex;
}

.gd-head__ico {
  width: 40px;
  height: 40px;
  color: var(--accent);
  background: #3282b81f;
  border: 1px solid #3282b838;
  border-radius: 13px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  display: flex;
}

.gd-head__ico.is-warn {
  color: #fbbf24;
  background: #f59e0b1f;
  border-color: #f59e0b3d;
}

body.light-theme .gd-head__ico.is-warn {
  color: #b45309;
}

.gd-head__title {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.gd-head__sub {
  color: var(--gd-muted);
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.7;
}

.gd-steps {
  counter-reset: none;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  display: flex;
}

.gd-step {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  display: flex;
  position: relative;
}

.gd-step:not(:last-child):after {
  content: "";
  background: var(--border-1);
  top: 100%;
  width: 1px;
  height: 10px;
  position: absolute;
  inset-inline-start: 32px;
}

.gd-step.is-now {
  background: #3282b812;
  border-color: #3282b866;
}

.gd-step.is-next .gd-step__mark {
  opacity: .55;
}

.gd-step__mark {
  width: 34px;
  height: 34px;
  color: var(--gd-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 11px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  display: flex;
}

.gd-step.is-done .gd-step__mark {
  color: #4ade80;
  background: #4ade801f;
  border-color: #4ade804d;
}

body.light-theme .gd-step.is-done .gd-step__mark {
  color: #15803d;
}

.gd-step.is-now .gd-step__mark {
  color: #fff;
  background: linear-gradient(135deg, #0f4c75, #2a7bb0);
  border-color: #0000;
}

.gd-step__body {
  flex: 1;
  min-width: 0;
}

.gd-step__top {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.gd-step__title {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 800;
}

.gd-step__badge {
  border-radius: var(--radius-pill);
  color: var(--gd-faint);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.7;
}

.gd-step.is-done .gd-step__badge {
  color: #4ade80;
  background: #4ade801f;
  border-color: #4ade8047;
}

body.light-theme .gd-step.is-done .gd-step__badge {
  color: #166534;
}

.gd-step.is-now .gd-step__badge {
  color: var(--accent-soft);
  background: #3282b829;
  border-color: #3282b84d;
}

body.light-theme .gd-step.is-now .gd-step__badge {
  color: var(--accent-soft);
}

.gd-step__desc {
  color: var(--gd-muted);
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.75;
}

.gd-step__cta {
  color: #fff;
  border-radius: var(--radius-pill);
  cursor: pointer;
  min-height: 44px;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  background: linear-gradient(135deg, #0f4c75, #2a7bb0);
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.gd-step__cta:hover {
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}

.gd-step__cta:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.gd-step__cta i {
  font-size: 9px;
}

.gd-demo__tag {
  color: var(--gd-faint);
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  font-size: 11px;
  display: flex;
}

.gd-demo {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  display: grid;
}

@container pane (width >= 720px) {
  .gd-demo {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }
}

.gd-demo__form, .gd-demo__src {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 14px;
}

.gd-demo__store {
  color: var(--gd-faint);
  margin-bottom: 10px;
  font-size: 11px;
  display: block;
}

.gd-demo__pair {
  gap: 8px;
  display: flex;
}

.gd-demo__pair > .gd-fld {
  flex: 1;
  min-width: 0;
}

.gd-fld {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
  margin-bottom: 8px;
  padding: 8px 10px;
}

.gd-fld:hover {
  border-color: var(--border-2);
}

.gd-fld.is-on {
  border-color: var(--accent);
  background: #3282b81f;
}

.gd-fld__k {
  color: var(--gd-faint);
  margin-bottom: 3px;
  font-size: 10px;
  display: block;
}

.gd-fld.is-on .gd-fld__k:before {
  content: "";
  vertical-align: 1px;
  background: var(--accent);
  border-radius: 50%;
  width: 5px;
  height: 5px;
  margin-inline-end: 5px;
  display: inline-block;
}

.gd-fld__v {
  font-family: var(--font-mono);
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12.5px;
  font-weight: 600;
  display: block;
  overflow: hidden;
}

.gd-demo__src {
  flex-direction: column;
  gap: 6px;
  list-style: none;
  display: flex;
}

.gd-src {
  min-height: 44px;
  color: var(--gd-muted);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
  border: 1px solid #0000;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.gd-src i {
  color: var(--accent);
  font-size: 12px;
}

.gd-src.is-on {
  color: var(--text);
  background: #3282b824;
  border-color: #3282b852;
}

.gd-demo__note {
  min-height: 68px;
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  margin-top: 14px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.8;
}

.gd-demo__bar {
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  display: flex;
}

.gd-btn {
  min-height: 44px;
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) ease, opacity var(--dur-fast) ease;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
}

.gd-btn i {
  font-size: 9px;
}

.gd-btn:hover:not(:disabled) {
  background: var(--surface-2);
}

.gd-btn:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.gd-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.gd-btn.is-primary {
  color: #fff;
  background: linear-gradient(135deg, #0f4c75, #2a7bb0);
  border-color: #0000;
}

.gd-btn.is-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #0f4c75, #1b6ca8);
}

.gd-dots {
  gap: 5px;
  margin-inline-start: auto;
  display: flex;
}

.gd-dot {
  background: var(--border-2);
  width: 7px;
  height: 7px;
  transition: background var(--dur-fast) ease;
  border-radius: 50%;
}

.gd-dot.is-on {
  background: var(--accent);
}

.gd-demo__foot {
  color: var(--gd-faint);
  align-items: flex-start;
  gap: 7px;
  margin-top: 11px;
  font-size: 11px;
  line-height: 1.7;
  display: flex;
}

.gd-rules {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px;
  display: grid;
}

.gd-rule {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 15px;
}

.gd-rule.is-danger {
  background: #ef444412;
  border-color: #ef444442;
}

.gd-rule__n {
  width: 26px;
  height: 26px;
  color: var(--accent-soft);
  background: #3282b829;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

body.light-theme .gd-rule__n {
  color: var(--accent-soft);
}

.gd-rule.is-danger .gd-rule__n {
  color: #f87171;
  background: #ef444429;
}

body.light-theme .gd-rule.is-danger .gd-rule__n {
  color: #b91c1c;
}

.gd-rule__t {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.gd-rule__d {
  color: var(--gd-muted);
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.8;
}

.gd-more {
  min-height: 44px;
  color: var(--text);
  background: var(--surface-1);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) ease;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.gd-more:hover {
  background: var(--surface-2);
}

.gd-more:focus-visible {
  border-style: solid;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.gd-faq {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.gd-q {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.gd-q summary {
  min-height: 52px;
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast) ease;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  font-size: 12.5px;
  font-weight: 700;
  list-style: none;
  display: flex;
}

.gd-q summary::-webkit-details-marker {
  display: none;
}

.gd-q summary:after {
  content: "";
  color: var(--gd-faint);
  transition: transform var(--dur-fast) var(--ease-out);
  margin-inline-start: auto;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-size: 10px;
  font-weight: 900;
}

.gd-q[open] summary:after {
  transform: rotate(180deg);
}

.gd-q summary:hover {
  background: var(--surface-2);
}

.gd-q summary:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.gd-q p {
  color: var(--gd-muted);
  padding: 0 15px 14px;
  font-size: 11.5px;
  line-height: 1.9;
}

.gd-q[open] summary {
  color: var(--accent-soft);
}

body.light-theme .gd-q[open] summary {
  color: var(--accent-strong);
}

#club-section {
  --cb-muted: #ffffff9e;
  --cb-faint: #ffffff8f;
  container: club / inline-size;
}

body.light-theme #club-section {
  --cb-muted: #0f172ab8;
  --cb-faint: #0f172aad;
}

.cb-earned {
  border-radius: var(--radius-md);
  background: #4ade801a;
  border: 1px solid #4ade8042;
  flex-direction: column;
  gap: 4px;
  padding: 12px 18px;
  display: flex;
}

.cb-earned.is-zero {
  background: var(--surface-1);
  border-color: var(--border-1);
}

.cb-earned__k {
  color: var(--cb-muted);
  font-size: 10.5px;
}

.cb-earned__v {
  color: #4ade80;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 800;
}

body.light-theme .cb-earned__v {
  color: #166534;
}

.cb-earned.is-zero .cb-earned__v {
  color: var(--text);
}

.cb-head {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  display: flex;
}

.cb-head__ico {
  width: 40px;
  height: 40px;
  color: var(--accent);
  background: #3282b81f;
  border: 1px solid #3282b838;
  border-radius: 13px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  display: flex;
}

.cb-head__ico.is-amber {
  color: #fbbf24;
  background: #f59e0b1f;
  border-color: #f59e0b3d;
}

body.light-theme .cb-head__ico.is-amber {
  color: #92400e;
}

.cb-head__title {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.cb-head__sub {
  color: var(--cb-muted);
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.7;
}

.cb-sub {
  color: var(--text);
  margin: 22px 0 12px;
  font-size: 12.5px;
  font-weight: 800;
}

.cb-sub--flush {
  margin-top: 0;
}

.cb-link {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px;
  display: flex;
}

.cb-link__ico {
  width: 40px;
  height: 40px;
  color: var(--accent);
  background: #3282b81f;
  border: 1px solid #3282b838;
  border-radius: 13px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  display: flex;
}

body.light-theme .cb-link__ico {
  color: var(--accent-strong);
}

.cb-link__body {
  flex-direction: column;
  flex: 999 200px;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.cb-link__label {
  color: var(--spec-faint);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}

.cb-link__input {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  font-family: var(--font-mono);
  color: var(--accent-soft);
  text-align: right;
  text-overflow: ellipsis;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
}

body.light-theme .cb-link__input {
  color: var(--accent-strong);
  background-color: #0000 !important;
  border: none !important;
}

.cb-link__btn {
  color: #fff;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: linear-gradient(135deg, #0f4c75, #2a7bb0);
  flex: 1 0 auto;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.cb-link__btn:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.cb-link__btn.is-copied {
  background: linear-gradient(135deg, #166534, #22a05a);
}

.cb-sum {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 10px;
  margin-top: 14px;
  display: grid;
}

.cb-stat {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  flex-direction: column;
  gap: 4px;
  padding: 13px 15px;
  display: flex;
}

.cb-stat.is-ready {
  background: #4ade8017;
  border-color: #4ade8047;
}

.cb-stat__k {
  color: var(--cb-muted);
  font-size: 10.5px;
}

.cb-stat__v {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 800;
}

.cb-stat.is-ready .cb-stat__v {
  color: #4ade80;
}

body.light-theme .cb-stat.is-ready .cb-stat__v {
  color: #166534;
}

.cb-stat__sub {
  color: var(--cb-faint);
  font-size: 10px;
}

.cb-funnel {
  flex-direction: column;
  gap: 10px;
  list-style: none;
  display: flex;
}

.cb-inv {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 14px;
}

.cb-inv.is-ready {
  background: #4ade800f;
  border-color: #4ade8052;
}

.cb-inv__top {
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  display: flex;
}

.cb-inv__av {
  width: 38px;
  height: 38px;
  color: var(--accent-soft);
  background: #3282b824;
  border: 1px solid #3282b83d;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  display: flex;
}

body.light-theme .cb-inv__av {
  color: var(--accent-soft);
}

.cb-inv__name {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  display: block;
}

.cb-inv__date {
  color: var(--cb-faint);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  font-size: 10px;
  display: block;
}

.cb-pay {
  border-radius: var(--radius-pill);
  align-items: center;
  gap: 7px;
  min-height: 40px;
  margin-inline-start: auto;
  padding: 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
}

.cb-pay.is-locked {
  color: var(--cb-faint);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
}

.cb-pay.is-paid {
  color: #4ade80;
  background: #4ade801f;
  border: 1px solid #4ade8047;
}

body.light-theme .cb-pay.is-paid {
  color: #166534;
}

button.cb-pay.is-ready {
  color: #fff;
  cursor: pointer;
  min-height: 44px;
  transition: transform var(--dur-fast) ease;
  background: linear-gradient(135deg, #166534, #22a05a);
  border: none;
}

button.cb-pay.is-ready:hover {
  transform: translateY(-1px);
}

button.cb-pay.is-ready:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.cb-steps {
  align-items: center;
  gap: 4px;
  max-width: 460px;
  margin-top: 14px;
  list-style: none;
  display: flex;
}

.cb-step {
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
  position: relative;
}

.cb-step:not(:last-child):after {
  content: "";
  background: var(--border-1);
  top: 9px;
  width: calc(100% - 24px);
  height: 2px;
  position: absolute;
  inset-inline-start: calc(50% + 12px);
}

.cb-step.is-on:not(:last-child):after {
  background: #4ade8073;
}

.cb-step__dot {
  color: #fff;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 8px;
  display: flex;
}

.cb-step.is-on .cb-step__dot {
  background: #22a05a;
  border-color: #0000;
}

.cb-step__lbl {
  text-align: center;
  color: var(--cb-faint);
  font-size: 10px;
}

.cb-step.is-on .cb-step__lbl {
  color: var(--text);
}

.cb-inv__nudge {
  border-top: 1px dashed var(--border-1);
  color: var(--cb-muted);
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  padding-top: 11px;
  font-size: 11px;
  line-height: 1.7;
  display: flex;
}

.cb-inv__nudge i {
  color: #fbbf24;
  margin-top: 3px;
}

body.light-theme .cb-inv__nudge i {
  color: #92400e;
}

.cb-empty {
  text-align: center;
  background: var(--surface-1);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-md);
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 34px 22px;
  display: flex;
}

.cb-empty p {
  color: var(--cb-muted);
  max-width: 46ch;
  font-size: 12px;
  line-height: 1.9;
}

.cb-empty__ico {
  width: 46px;
  height: 46px;
  color: var(--accent);
  background: #3282b81a;
  border: 1px solid #3282b833;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  display: flex;
}

.cb-share {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  display: grid;
}

@container club (width >= 720px) {
  .cb-share {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    align-items: start;
  }
}

.cb-story {
  flex-direction: column;
  gap: 10px;
  margin: 0;
  display: flex;
}

.cb-story canvas {
  box-sizing: border-box;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-1);
  width: 100%;
  max-width: 260px;
  height: auto;
  margin-inline: auto;
  display: block;
}

.cb-story__cap {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
}

.cb-story__name {
  text-align: center;
  color: var(--cb-muted);
  flex-basis: 100%;
  font-size: 11px;
  font-weight: 700;
}

.cb-btn {
  min-height: 44px;
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) ease;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.cb-btn:hover {
  background: var(--surface-2);
}

.cb-btn:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.cb-btn.is-primary {
  color: #fff;
  background: linear-gradient(135deg, #0f4c75, #2a7bb0);
  border-color: #0000;
}

.cb-cap {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  padding: 13px 15px;
}

.cb-cap__head {
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  display: flex;
}

.cb-cap__tag {
  color: var(--accent-soft);
  border-radius: var(--radius-pill);
  background: #3282b824;
  border: 1px solid #3282b842;
  padding: 2px 9px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.8;
}

body.light-theme .cb-cap__tag {
  color: var(--accent-soft);
}

.cb-cap__copy {
  min-height: 36px;
  color: var(--cb-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  cursor: pointer;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  position: relative;
}

.cb-cap__copy:before {
  content: "";
  position: absolute;
  inset: -4px 0;
}

.cb-cap__copy:hover {
  color: var(--text);
}

.cb-cap__copy:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.cb-cap__ok {
  color: #4ade80;
  display: none;
}

.cb-cap__copy.is-copied .cb-cap__ok {
  display: inline;
}

.cb-cap__copy.is-copied .fa-copy, .cb-cap__copy.is-copied .cb-cap__copy-lbl {
  display: none;
}

.cb-cap__body {
  color: var(--cb-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 70ch;
  font-size: 12px;
  line-height: 2;
}

.cb-social {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.cb-social__btn {
  min-height: 46px;
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) ease;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
}

.cb-social__btn:hover {
  background: var(--surface-2);
}

.cb-social__btn:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.cb-social__btn.is-ig i {
  color: #e1518c;
}

body.light-theme .cb-social__btn.is-ig i {
  color: #c1275f;
}

.cb-social__btn.is-tg i {
  color: #34a3dd;
}

.cb-social__btn.is-wa i {
  color: #4ade80;
}

body.light-theme .cb-social__btn.is-wa i {
  color: #166534;
}

.cb-wh-sec .cb-head {
  flex-wrap: wrap;
}

.cb-wh__headtxt {
  flex: 200px;
}

.cb-wh__tickets {
  color: #fbbf24;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: #f59e0b1f;
  border: 1px solid #f59e0b42;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  padding: 7px 13px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

body.light-theme .cb-wh__tickets {
  color: #92400e;
}

.cb-wh__tickets.is-empty {
  color: var(--cb-muted);
  background: var(--surface-1);
  border-color: var(--border-1);
}

@container club (width <= 470px) {
  .cb-wh__tickets {
    margin-inline-start: 52px;
  }
}

.cb-wh {
  align-items: start;
  gap: 26px;
  display: grid;
}

@container club (width >= 700px) {
  .cb-wh {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
  }
}

.cb-wh__stage {
  aspect-ratio: 1;
  place-items: center;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  display: grid;
  position: relative;
}

.cb-wh__glow {
  filter: blur(16px);
  pointer-events: none;
  background: radial-gradient(circle, #3282b84d, #0000 68%);
  border-radius: 50%;
  position: absolute;
  inset: 6%;
}

.cb-wh__disc {
  will-change: transform;
  transition: transform 4s cubic-bezier(.16, .84, .26, 1);
  position: absolute;
  inset: 0;
  transform: rotate(0);
}

.cb-wh__disc svg {
  filter: drop-shadow(0 10px 26px #0006);
  width: 100%;
  height: 100%;
  display: block;
}

body.light-theme .cb-wh__disc svg {
  filter: drop-shadow(0 10px 26px #0f172a38);
}

.cb-wh__slice {
  stroke: #ffffff21;
  stroke-width: 1px;
}

.cb-wh__slice.is-a {
  fill: #123a5e;
}

.cb-wh__slice.is-b {
  fill: #17496f;
}

.cb-wh__slice.is-jack {
  fill: url("#cbWhJack");
}

.cb-wh__jack-0 {
  stop-color: #9a6212;
}

.cb-wh__jack-1 {
  stop-color: #6b4108;
}

.cb-wh__edge {
  fill: none;
  stroke: #ffffff38;
  stroke-width: 2px;
}

.cb-wh__rim {
  fill: none;
  stroke: #3282b880;
  stroke-width: 7px;
}

.cb-wh__t {
  fill: #fff;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
}

.cb-wh__t.is-spin {
  fill: #ffe3ab;
}

.cb-wh__u {
  fill: #ffffffa8;
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 600;
}

.cb-wh__u.is-spin {
  fill: #ffe3ab;
  font-size: 11px;
  font-weight: 700;
}

.cb-wh__u.is-jack {
  fill: #fff;
}

.cb-wh__bulb {
  fill: #bbe1fa8c;
}

.cb-wh__disc.is-spinning .cb-wh__bulb {
  animation: .5s ease-in-out infinite cb-wh-bulb;
  animation-delay: calc(var(--i) * 30ms);
}

@keyframes cb-wh-bulb {
  0%, 100% {
    opacity: .3;
  }

  50% {
    opacity: 1;
  }
}

.cb-wh__pin {
  z-index: 3;
  color: #f0b23c;
  filter: drop-shadow(0 3px 6px #00000073);
  pointer-events: none;
  justify-content: center;
  align-items: flex-start;
  width: 30px;
  height: 34px;
  font-size: 21px;
  display: flex;
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}

.cb-wh__hub {
  z-index: 2;
  color: #fff;
  cursor: pointer;
  width: 84px;
  height: 84px;
  transition: transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
  background: linear-gradient(150deg, #2b76a8, #0f4c75);
  border: 3px solid #ffffff3d;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  display: flex;
  position: relative;
  box-shadow: 0 8px 22px #0f4c758c;
}

.cb-wh__hub:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 10px 28px #0f4c75b3;
}

.cb-wh__hub:active:not(:disabled) {
  transform: scale(.97);
}

.cb-wh__hub:focus-visible {
  box-shadow: var(--focus-ring), 0 8px 22px #0f4c758c;
  outline: none;
}

.cb-wh__hub:disabled {
  cursor: not-allowed;
  color: #ffffffeb;
  box-shadow: none;
  background: linear-gradient(150deg, #3a4f66, #26374a);
  border-color: #ffffff29;
}

.cb-wh__hub-lbl {
  font-size: 13px;
  font-weight: 800;
}

.cb-wh__hub-sub {
  font-size: 9.5px;
  font-weight: 600;
}

.cb-wh__burst {
  z-index: 4;
  pointer-events: none;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0;
}

.cb-wh__burst i {
  background: var(--c);
  opacity: 0;
  border-radius: 2px;
  width: 7px;
  height: 7px;
  position: absolute;
}

.cb-wh__burst.is-on i {
  animation: cb-wh-burst 1.1s var(--ease-out) forwards;
  animation-delay: var(--t);
}

@keyframes cb-wh-burst {
  0% {
    opacity: 1;
    transform: rotate(var(--a)) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.4);
  }
}

.cb-wh__side {
  min-width: 0;
  max-width: 420px;
}

.cb-wh__state {
  min-height: 46px;
  color: var(--cb-muted);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.7;
  display: flex;
}

.cb-wh__state b {
  color: var(--text);
}

.cb-wh__state.is-win {
  color: #4ade80;
  background: #4ade801a;
  border-color: #4ade804d;
}

.cb-wh__state.is-win b {
  color: #4ade80;
}

body.light-theme .cb-wh__state.is-win, body.light-theme .cb-wh__state.is-win b {
  color: #166534;
}

.cb-wh__state.is-err {
  color: #fca5a5;
  background: #ef44441a;
  border-color: #ef444447;
}

body.light-theme .cb-wh__state.is-err {
  color: #b91c1c;
}

.cb-wh__note {
  color: var(--cb-faint);
  align-items: flex-start;
  gap: 7px;
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.8;
  display: flex;
}

.cb-wh__note i {
  color: var(--accent);
  margin-top: 3px;
}

body.light-theme .cb-wh__note i {
  color: var(--accent-strong);
}

.cb-wh__note b {
  color: var(--text);
  font-weight: 700;
}

.cb-wh__hist {
  gap: 6px;
  display: grid;
}

.cb-wh__hist li {
  background: var(--surface-1);
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  display: flex;
}

.cb-wh__hist-p {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 700;
}

.cb-wh__hist-d {
  color: var(--cb-faint);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

.cb-chs {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  display: grid;
}

@container club (width >= 560px) {
  .cb-chs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container club (width >= 880px) {
  .cb-chs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cb-ch {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  flex-direction: column;
  padding: 15px;
  display: flex;
}

.cb-ch.is-done {
  background: #4ade800f;
  border-color: #4ade8057;
}

.cb-ch.is-claimed {
  opacity: .82;
}

.cb-ch__top {
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.cb-ch__ico {
  width: 34px;
  height: 34px;
  color: var(--accent);
  background: #3282b81f;
  border: 1px solid #3282b838;
  border-radius: 11px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  display: flex;
}

.cb-ch.is-done .cb-ch__ico {
  color: #4ade80;
  background: #4ade8024;
  border-color: #4ade804d;
}

body.light-theme .cb-ch.is-done .cb-ch__ico {
  color: #166534;
}

.cb-ch__t {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.cb-ch__d {
  color: var(--cb-muted);
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.7;
}

.cb-ch__prize {
  color: #fbbf24;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
  background: #f59e0b1f;
  border: 1px solid #f59e0b42;
  flex-shrink: 0;
  margin-inline-start: auto;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 800;
}

body.light-theme .cb-ch__prize {
  color: #92400e;
}

.cb-ch__bar {
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  height: 7px;
  margin-top: 14px;
  overflow: hidden;
}

.cb-ch__bar > span {
  border-radius: var(--radius-pill);
  height: 100%;
  transition: width var(--dur-slow) var(--ease-out);
  background: linear-gradient(90deg, #0f4c75, #2a7bb0);
  display: block;
}

.cb-ch.is-done .cb-ch__bar > span {
  background: linear-gradient(90deg, #166534, #22a05a);
}

.cb-ch__foot {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  display: flex;
}

.cb-ch__num {
  color: var(--cb-muted);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.cb-ch__left, .cb-ch__got {
  color: var(--cb-faint);
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
}

.cb-ch__got {
  color: #4ade80;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

body.light-theme .cb-ch__got {
  color: #166534;
}

.cb-ch__claim {
  color: #fff;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: linear-gradient(135deg, #166534, #22a05a);
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-inline-start: auto;
  padding: 0 15px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
}

.cb-ch__claim:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  button.cb-pay.is-ready:hover {
    transform: none;
  }

  .cb-ch__bar > span, .cb-wh__disc {
    transition: none;
  }

  .cb-wh__disc.is-spinning .cb-wh__bulb {
    animation: none;
  }

  .cb-wh__hub:hover:not(:disabled), .cb-wh__hub:active:not(:disabled) {
    transform: none;
  }
}

#tickets-section {
  --tk-muted: #ffffff9e;
  --tk-faint: #ffffff8f;
  --tk-pop: #17223c;
  container: tickets / inline-size;
}

body.light-theme #tickets-section {
  --tk-muted: #0f172ab8;
  --tk-faint: #0f172aad;
  --tk-pop: #fff;
}

.tk-new {
  color: #fff;
  border-radius: var(--radius-pill);
  cursor: pointer;
  min-height: 44px;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  background: linear-gradient(135deg, #0f4c75, #2a7bb0);
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
}

.tk-new:hover {
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}

.tk-new:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.tk {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  display: grid;
}

.tk__list-col, .tk__chat-col {
  min-width: 0;
}

@container tickets (width >= 740px) {
  .tk {
    grid-template-columns: minmax(0, clamp(260px, 32%, 340px)) minmax(0, 1fr);
    align-items: start;
  }
}

.tk-filters {
  scrollbar-width: none;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 4px;
  display: flex;
  overflow-x: auto;
}

.tk-filters::-webkit-scrollbar {
  display: none;
}

.tk-filter {
  white-space: nowrap;
  min-height: 40px;
  color: var(--tk-muted);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.tk-filter:hover {
  background: var(--surface-2);
}

.tk-filter.is-active {
  color: #fff;
  background: linear-gradient(135deg, #0f4c75, #2a7bb0);
  border-color: #0000;
}

.tk-filter:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.tk-filter__n {
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--tk-faint);
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 800;
}

.tk-filter.is-active .tk-filter__n {
  color: #fff;
  background: #00000038;
}

.tk-list {
  flex-direction: column;
  gap: 8px;
  list-style: none;
  display: flex;
}

@container tickets (width >= 740px) {
  .tk-list {
    max-height: clamp(320px, 100vh - 320px, 680px);
    padding: 2px;
    overflow-y: auto;
  }
}

.tk-row {
  text-align: start;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  cursor: pointer;
  width: 100%;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  display: flex;
}

.tk-row:hover {
  background: var(--surface-2);
}

.tk-row.is-active {
  background: #3282b817;
  border-color: #3282b873;
}

.tk-row:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.tk-row__ico {
  width: 36px;
  height: 36px;
  color: var(--accent);
  background: #3282b81f;
  border: 1px solid #3282b838;
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  display: flex;
}

.tk-row__ico.is-answered {
  color: #4ade80;
  background: #4ade801f;
  border-color: #4ade8042;
}

body.light-theme .tk-row__ico.is-answered {
  color: #166534;
}

.tk-row__ico.is-closed {
  color: var(--tk-faint);
  background: var(--surface-2);
  border-color: var(--border-1);
}

.tk-row__body {
  flex: 1;
  min-width: 0;
}

.tk-row__top {
  align-items: center;
  gap: 8px;
  display: flex;
}

.tk-row__subj {
  min-width: 0;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
}

.tk-row__dot {
  background: #f87171;
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.tk-row__prev {
  color: var(--tk-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.6;
  display: block;
  overflow: hidden;
}

.tk-row__meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 8px;
  display: flex;
}

.tk-row__code, .tk-row__time {
  color: var(--tk-faint);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

.tk-badge {
  border-radius: var(--radius-pill);
  color: var(--accent-soft);
  background: #3282b824;
  border: 1px solid #3282b842;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.8;
  display: inline-flex;
}

body.light-theme .tk-badge {
  color: var(--accent-soft);
}

.tk-badge.is-answered {
  color: #4ade80;
  background: #4ade801f;
  border-color: #4ade8047;
}

body.light-theme .tk-badge.is-answered {
  color: #166534;
}

.tk-badge.is-closed {
  color: var(--tk-faint);
  background: var(--surface-2);
  border-color: var(--border-1);
}

.tk-empty, .tk-blank {
  text-align: center;
  background: var(--surface-1);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-md);
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 22px;
  display: flex;
}

.tk-empty p, .tk-blank p {
  color: var(--tk-muted);
  max-width: 34ch;
  font-size: 12px;
  line-height: 1.9;
}

.tk-empty__ico, .tk-blank__ico {
  width: 46px;
  height: 46px;
  color: var(--accent);
  background: #3282b81a;
  border: 1px solid #3282b833;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  display: flex;
}

.tk-empty__btn {
  color: #fff;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: linear-gradient(135deg, #0f4c75, #2a7bb0);
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.tk-empty__btn:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.tk-chat {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.tk-chat__head {
  border-bottom: 1px solid var(--border-1);
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  display: flex;
}

.tk-chat__subj {
  color: var(--text);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.6;
}

.tk-chat__subj:focus-visible {
  outline: none;
}

.tk-chat__meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 8px;
  display: flex;
}

.tk-chip {
  color: var(--tk-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.8;
  display: inline-flex;
}

.tk-chip.is-high {
  color: #f87171;
  background: #ef44441f;
  border-color: #ef444447;
}

body.light-theme .tk-chip.is-high {
  color: #b91c1c;
}

.tk-code {
  color: var(--tk-faint);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.8;
  display: inline-flex;
  position: relative;
}

.tk-code:before {
  content: "";
  position: absolute;
  inset: -11px 0;
}

.tk-code:hover {
  border-color: var(--border-2);
}

.tk-code:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.tk-code__ok {
  color: #4ade80;
  display: none;
}

.tk-code.is-copied .tk-code__ok {
  display: inline;
}

.tk-back {
  width: 44px;
  height: 44px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  cursor: pointer;
  border-radius: 13px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  display: none;
}

.tk-back:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

@container tickets (width <= 739.98px) {
  .tk-back {
    display: inline-flex;
  }

  .tk.is-chat .tk__list-col, .tk:not(.is-chat) .tk__chat-col {
    display: none;
  }
}

.tk-thread {
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px;
  list-style: none;
  display: flex;
}

@container tickets (width >= 740px) {
  .tk-thread {
    max-height: clamp(280px, 100vh - 400px, 620px);
    overflow-y: auto;
  }
}

.tk-msg {
  align-items: flex-start;
  gap: 9px;
  max-width: min(86%, 560px);
  display: flex;
}

.tk-msg.is-mine {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.tk-msg__av {
  width: 32px;
  height: 32px;
  color: var(--accent);
  background: #3282b81f;
  border: 1px solid #3282b838;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  display: flex;
}

.tk-msg.is-mine .tk-msg__av {
  color: var(--tk-muted);
  background: var(--surface-2);
  border-color: var(--border-1);
}

.tk-msg__bubble {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md) 4px var(--radius-md) var(--radius-md);
  min-width: 0;
  padding: 11px 13px;
}

.tk-msg.is-mine .tk-msg__bubble {
  border-radius: 4px var(--radius-md) var(--radius-md) var(--radius-md);
  background: #3282b81f;
  border-color: #3282b842;
}

.tk-msg__who {
  color: var(--accent-soft);
  margin-bottom: 5px;
  font-size: 10.5px;
  font-weight: 800;
}

body.light-theme .tk-msg__who {
  color: var(--accent-strong);
}

.tk-msg.is-mine .tk-msg__who {
  color: var(--tk-muted);
}

.tk-msg__body {
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12.5px;
  line-height: 1.95;
}

.tk-msg__time {
  color: var(--tk-faint);
  font-variant-numeric: tabular-nums;
  margin-top: 7px;
  font-size: 9.5px;
  display: block;
}

.tk-reply {
  border-top: 1px solid var(--border-1);
  padding: 14px 16px 16px;
}

.tk-reply textarea {
  width: 100%;
  min-height: 62px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  resize: vertical;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.9;
}

.tk-reply textarea::placeholder {
  color: var(--text);
  opacity: .38;
}

.tk-reply textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.tk-reply__bar {
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
  display: flex;
}

.tk-btn {
  min-height: 44px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) ease, opacity var(--dur-fast) ease;
  align-items: center;
  gap: 7px;
  padding: 0 17px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
}

.tk-btn:hover:not(:disabled) {
  background: var(--surface-1);
}

.tk-btn:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.tk-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.tk-btn.is-primary {
  color: #fff;
  background: linear-gradient(135deg, #0f4c75, #2a7bb0);
  border-color: #0000;
  margin-inline-start: auto;
}

.tk-btn.is-ghost {
  background: none;
}

.tk-closed {
  color: var(--tk-muted);
  border-top: 1px solid var(--border-1);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-size: 12px;
  display: flex;
}

.tk-closed > i {
  color: #4ade80;
}

body.light-theme .tk-closed > i {
  color: #166534;
}

.tk-closed .tk-btn {
  margin-inline-start: auto;
}

.tk-cats {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  display: grid;
}

.tk-cat {
  text-align: start;
  min-height: 46px;
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}

.tk-cat i {
  color: var(--accent);
  font-size: 13px;
}

.tk-cat:hover {
  background: var(--surface-2);
}

.tk-cat.is-active {
  border-color: var(--accent);
  background: #3282b81f;
}

.tk-cat:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.pc-field__box.is-area {
  align-items: flex-start;
  height: auto;
  padding: 10px 12px;
}

.pc-field__box.is-area textarea {
  resize: vertical;
  width: 100%;
  color: var(--text);
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.9;
}

body.light-theme .pc-field__box.is-area textarea {
  background-color: #0000 !important;
  border: none !important;
}

.tk-meta-row {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  display: flex;
}

.tk-count {
  color: var(--tk-faint, #ffffff8f);
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
  font-size: 10.5px;
}

body.light-theme .tk-count {
  color: #0f172aad;
}

@media (prefers-reduced-motion: reduce) {
  .tk-new:hover {
    transform: none;
  }
}

.ticket-cta {
  background: linear-gradient(135deg, #0f4c7547, #3282b81a);
}

.ticket-cta__tag {
  color: var(--accent-soft);
  border-radius: var(--radius-pill);
  background: #3282b829;
  border: 1px solid #3282b84d;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
}

.ticket-cta__btn {
  color: #fff;
  border-radius: var(--radius-pill);
  min-height: 48px;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  background: linear-gradient(135deg, #0f4c75, #2a7bb0);
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
}

.ticket-cta__btn:hover {
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}

.ticket-cta__btn:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.ticket-cta__btn.is-ghost {
  color: #fff;
  background: #ffffff0f;
  border: 1px solid #ffffff29;
}

.ticket-cta__btn.is-ghost:hover {
  box-shadow: none;
  background: #ffffff1a;
}

.ticket-cta__list {
  flex-direction: column;
  gap: 12px;
  list-style: none;
  display: flex;
}

.ticket-cta__list li {
  border-radius: var(--radius-md);
  background: #ffffff0a;
  border: 1px solid #ffffff14;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  display: flex;
}

.ticket-cta__list b {
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  display: block;
}

.ticket-cta__list span:not(.ticket-cta__ico) {
  color: #ffffff9e;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.8;
  display: block;
}

.ticket-cta__ico {
  width: 36px;
  height: 36px;
  color: var(--accent-soft);
  background: #3282b829;
  border: 1px solid #3282b842;
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .ticket-cta__btn:hover {
    transform: none;
  }
}

body.light-theme .ticket-cta {
  background: linear-gradient(135deg, #0f4c751a, #3282b80d);
  border-color: #0f4c7529 !important;
}

body.light-theme .ticket-cta__list li {
  background: #ffffffb8;
  border-color: #0f172a17;
}

body.light-theme .ticket-cta__list b {
  color: var(--text);
}

body.light-theme .ticket-cta__list span:not(.ticket-cta__ico) {
  color: var(--spec-muted);
}

body.light-theme .ticket-cta__btn.is-ghost {
  color: var(--accent-strong);
  background: #0f172a0a;
  border-color: #0f172a24;
}

body.light-theme .ticket-cta__btn.is-ghost:hover {
  background: #0f172a12;
}

.pc-menu__hint {
  color: var(--accent-soft);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: #3282b829;
  border: 1px solid #3282b847;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.7;
}

body.light-theme .pc-menu__hint {
  color: var(--accent-strong);
}

.pc-menu__hint.is-alert {
  color: #fca5a5;
  background: #ef444424;
  border-color: #ef44444d;
}

body.light-theme .pc-menu__hint.is-alert {
  color: #b91c1c;
}

@media (prefers-reduced-motion: reduce) {
  .gd-ring__fill, .gd-q summary:after {
    transition: none;
  }

  .gd-step__cta:hover {
    transform: none;
  }
}

.ad-shell {
  --ad-muted: #ffffff9e;
  --ad-faint: #ffffff8f;
  max-width: 1400px;
  margin-inline: auto;
  padding: 18px 16px 64px;
  container: adm / inline-size;
}

body.light-theme .ad-shell {
  --ad-muted: #0f172ab8;
  --ad-faint: #0f172aad;
}

.ad-muted {
  color: var(--ad-faint);
  font-size: 11px;
}

.ad-top {
  background: var(--glass-bg);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  display: flex;
}

.ad-top__brand {
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-inline-end: auto;
  display: flex;
}

.ad-top__logo {
  color: #fff;
  background: linear-gradient(150deg, #2b76a8, #0f4c75);
  border-radius: 13px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  font-size: 17px;
  display: flex;
}

.ad-top__title {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}

.ad-top__sub {
  color: var(--ad-muted);
  margin-top: 2px;
  font-size: 11px;
}

.ad-top__actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.ad-env {
  color: #fbbf24;
  border-radius: var(--radius-pill);
  background: #f59e0b1f;
  border: 1px solid #f59e0b42;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
}

body.light-theme .ad-env {
  color: #92400e;
}

.ad-btn {
  min-height: 44px;
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.ad-btn:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border-2);
}

.ad-btn:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.ad-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.ad-btn--icon {
  width: 44px;
  padding: 0;
}

.ad-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #2b76a8, #0f4c75);
  border-color: #0000;
}

.ad-btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #2b76a9, #1b6ca8);
}

.ad-btn--sm {
  min-height: 36px;
  padding: 0 11px;
  font-size: 11px;
}

.ad-btn.is-danger {
  color: #fca5a5;
  background: #ef44441a;
  border-color: #ef44444d;
}

body.light-theme .ad-btn.is-danger {
  color: #b91c1c;
}

.ad-btn.is-ok {
  color: #4ade80;
  background: #4ade801a;
  border-color: #4ade804d;
}

body.light-theme .ad-btn.is-ok {
  color: #166534;
}

.ad-tabs {
  scrollbar-width: thin;
  gap: 7px;
  margin: 16px 0 20px;
  padding-bottom: 4px;
  display: flex;
  overflow-x: auto;
}

.ad-tab {
  min-height: 44px;
  color: var(--ad-muted);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.ad-tab:hover {
  color: var(--text);
  background: var(--surface-2);
}

.ad-tab:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.ad-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, #2b76a8, #0f4c75);
  border-color: #0000;
}

.ad-tab__n {
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  padding: 1px 7px;
  font-size: 10px;
}

.ad-tab.is-active .ad-tab__n {
  background: #ffffff38;
}

.ad-tab__n.is-alert {
  color: #fff;
  background: #b91c1c;
}

.ad-h2 {
  color: var(--accent-soft);
  font-size: 19px;
  font-weight: 900;
}

.ad-lead {
  color: var(--ad-muted);
  max-width: 68ch;
  margin-top: 7px;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1.9;
}

.ad-lead--tight {
  margin-bottom: 12px;
}

.ad-sub {
  color: var(--text);
  margin: 20px 0 10px;
  font-size: 12.5px;
  font-weight: 800;
}

.ad-card {
  background: var(--glass-bg);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  min-width: 0;
  margin-bottom: 16px;
  padding: 18px;
}

.ad-card__head {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  display: flex;
}

.ad-card__title {
  color: var(--text);
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
}

.ad-card__title i {
  color: var(--accent);
}

body.light-theme .ad-card__title i {
  color: var(--accent-strong);
}

.ad-card__hint {
  color: var(--ad-faint);
  margin-inline-start: auto;
  font-size: 10.5px;
}

.ad-fs {
  border: 1px solid var(--border-1);
}

.ad-fs legend {
  padding-inline: 4px;
}

.ad-grid2 {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  display: grid;
}

@container adm (width >= 860px) {
  .ad-grid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ad-kpis {
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 11px;
  margin-bottom: 18px;
  display: grid;
}

.ad-kpi {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  flex-direction: column;
  gap: 5px;
  padding: 14px 15px;
  display: flex;
}

.ad-kpi__k {
  color: var(--ad-muted);
  font-size: 10.5px;
}

.ad-kpi__v {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 900;
}

.ad-kpi__s {
  color: var(--ad-faint);
  font-size: 10.5px;
}

.ad-kpi.is-ok {
  background: #4ade8014;
  border-color: #4ade8042;
}

.ad-kpi.is-warn {
  background: #f59e0b17;
  border-color: #f59e0b47;
}

.ad-todo {
  gap: 8px;
  display: grid;
}

.ad-todo__i {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  display: flex;
}

.ad-todo__ico {
  color: #fbbf24;
  background: #f59e0b21;
  border-radius: 9px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  font-size: 11.5px;
  display: flex;
}

body.light-theme .ad-todo__ico {
  color: #92400e;
}

.ad-todo__t {
  min-width: 0;
  color: var(--text);
  flex: 200px;
  font-size: 12px;
}

.ad-todo__none {
  color: #4ade80;
  border-radius: var(--radius-sm);
  background: #4ade8014;
  border: 1px solid #4ade803d;
  align-items: center;
  gap: 8px;
  padding: 14px;
  font-size: 12px;
  display: flex;
}

body.light-theme .ad-todo__none {
  color: #166534;
}

.ad-dl {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  font-size: 12px;
  display: grid;
}

.ad-dl dt {
  color: var(--ad-muted);
}

.ad-dl dd {
  color: var(--text);
  text-align: end;
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 700;
}

.ad-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.ad-note {
  color: var(--ad-faint);
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.8;
  display: flex;
}

.ad-note i {
  color: var(--accent);
  margin-top: 3px;
}

body.light-theme .ad-note i {
  color: var(--accent-strong);
}

.ad-note b {
  color: var(--text);
}

.ad-form {
  gap: 14px;
  display: grid;
}

.ad-form .ad-btn {
  justify-self: start;
}

.ad-inline-form {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 9px;
  display: flex;
}

.ad-inline-form .pc-field {
  flex: 150px;
}

.ad-switch-row {
  border-top: 1px solid var(--border-1);
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  display: flex;
}

.ad-switch-row:first-of-type {
  border-top: none;
  padding-top: 4px;
}

.ad-switch-row__t {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  display: block;
}

.ad-switch-row__d {
  color: var(--ad-faint);
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.7;
  display: block;
}

.ad-save {
  background: var(--glass-bg);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  display: flex;
}

.ad-save__msg {
  color: var(--ad-muted);
  flex: 220px;
  font-size: 11px;
}

.ad-table {
  white-space: nowrap;
}

.ad-table td {
  vertical-align: middle;
}

.ad-cardcell {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.ad-cardcell b {
  color: var(--text);
  font-size: 12px;
}

.ad-cardcell span {
  color: var(--ad-faint);
  font-size: 10.5px;
}

.ad-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ad-num.is-in {
  color: #4ade80;
}

.ad-num.is-out {
  color: #fca5a5;
}

body.light-theme .ad-num.is-in {
  color: #166534;
}

body.light-theme .ad-num.is-out {
  color: #b91c1c;
}

.ad-mono {
  font-family: var(--font-mono);
  color: var(--ad-muted);
  font-size: 11px;
}

.ad-acts {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.ad-lock {
  color: #fbbf24;
  align-items: center;
  gap: 4px;
  margin-inline-start: 6px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

body.light-theme .ad-lock {
  color: #92400e;
}

.ad-filter {
  flex-wrap: wrap;
  gap: 6px;
  margin-inline-start: auto;
  display: flex;
}

.ad-chip {
  min-height: 36px;
  color: var(--ad-muted);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
  padding: 0 12px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
}

.ad-chip:hover {
  color: var(--text);
  background: var(--surface-2);
}

.ad-chip:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.ad-chip.is-on {
  color: #fff;
  background: #2b76a8;
  border-color: #0000;
}

.ad-mini {
  gap: 6px;
  display: grid;
}

.ad-mini li {
  color: var(--text);
  background: var(--surface-1);
  font-variant-numeric: tabular-nums;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
}

.ad-tk {
  gap: 9px;
  display: grid;
}

.ad-tk__item {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ad-tk__item.is-open {
  border-color: var(--border-2);
}

.ad-tk__head {
  text-align: start;
  cursor: pointer;
  width: 100%;
  min-height: 52px;
  color: var(--text);
  background: none;
  border: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  font-family: inherit;
  display: flex;
}

.ad-tk__head:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.ad-tk__code {
  font-family: var(--font-mono);
  color: var(--ad-faint);
  font-size: 10.5px;
}

.ad-tk__subj {
  flex: 180px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
}

.ad-dot {
  background: #b91c1c;
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.ad-tk__chev {
  color: var(--ad-faint);
  transition: transform var(--dur-fast) var(--ease-standard);
  font-size: 10px;
}

.ad-tk__item.is-open .ad-tk__chev {
  transform: rotate(180deg);
}

.ad-tk__thread {
  gap: 9px;
  padding: 4px 13px 14px;
  display: grid;
}

.ad-msg {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 10px 12px;
}

.ad-msg.is-agent {
  background: #3282b81f;
  border: 1px solid #3282b838;
}

.ad-msg__who {
  color: var(--ad-muted);
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
}

.ad-msg__t {
  color: var(--ad-faint);
  margin-inline-start: auto;
  font-weight: 400;
}

.ad-msg__b {
  color: var(--text);
  overflow-wrap: anywhere;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.9;
}

.ad-tk__reply {
  gap: 9px;
  display: grid;
}

.ad-tk__reply textarea {
  width: 100%;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  resize: vertical;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.8;
}

.ad-tk__reply textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.ad-tk__reply-acts {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.ad-tk__closed {
  padding-top: 4px;
}

.ad-toast {
  z-index: 200;
  color: #fff;
  border-radius: var(--radius-pill);
  max-width: min(90vw, 420px);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
  background: linear-gradient(135deg, #2b76a8, #0f4c75);
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 700;
  position: fixed;
  inset-block-end: 22px;
  inset-inline-start: 50%;
  transform: translate(50%, 20px);
}

.ad-toast.is-on {
  opacity: 1;
  transform: translate(50%);
}

.ad-toast.is-err {
  background: linear-gradient(135deg, #b91c1c, #7f1d1d);
}

@media (prefers-reduced-motion: reduce) {
  .ad-toast, .ad-tk__chev {
    transition: none;
  }
}

.ad-fail {
  color: #fca5a5;
  border-radius: var(--radius-sm);
  background: #ef44441a;
  border: 1px solid #ef444447;
  align-items: flex-start;
  gap: 8px;
  padding: 13px 15px;
  font-size: 11.5px;
  line-height: 1.8;
  display: flex;
}

body.light-theme .ad-fail {
  color: #b91c1c;
}

.ad-search {
  flex: 260px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 460px;
  display: flex;
  position: relative;
}

.ad-search__ico {
  color: var(--ad-faint);
  pointer-events: none;
  font-size: 11px;
  position: absolute;
  inset-inline-start: 14px;
}

.ad-search input {
  min-width: 0;
  min-height: 44px;
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  flex: auto;
  padding-inline: 36px 14px;
  font-family: inherit;
  font-size: 12px;
}

.ad-search input::placeholder {
  color: var(--ad-faint);
}

.ad-search input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.ad-search__btn {
  color: #fff;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: linear-gradient(135deg, #2b76a8, #0f4c75);
  border: none;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 15px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
}

.ad-search__btn:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.ad-sub--first {
  margin-top: 0;
}

.ad-note--flush {
  margin-top: 0;
  margin-bottom: 12px;
}

.ad-result {
  color: var(--ad-muted);
  margin: 12px 0 6px;
  font-size: 11.5px;
  font-weight: 700;
}

.ad-cardcell .ad-selftag, .ad-selftag {
  color: #fff;
  border-radius: var(--radius-pill);
  vertical-align: middle;
  background: #2b76a8;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-block;
}

.ad-num.is-zero {
  color: var(--ad-muted);
  font-weight: 400;
}

.ad-link {
  color: var(--accent-soft);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 1px dashed;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
}

body.light-theme .ad-link {
  color: var(--accent-strong);
}

.ad-link:hover {
  color: var(--text);
}

.ad-link:focus-visible {
  box-shadow: var(--focus-ring);
  border-radius: 4px;
  outline: none;
}

.data-table tbody tr.is-open {
  background: #3282b81a;
}

.ad-detail {
  border-color: var(--border-2);
}

.ad-textarea {
  width: 100%;
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  resize: vertical;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.8;
}

.ad-textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.ad-bars {
  gap: 9px;
  display: grid;
}

.ad-bar {
  grid-template-columns: minmax(0, 1fr) minmax(70px, 130px) 34px;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  display: grid;
}

.ad-bar__k {
  color: var(--ad-muted);
}

.ad-bar__track {
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  height: 7px;
  overflow: hidden;
}

.ad-bar__track > span {
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #0f4c75, #3282b8);
  height: 100%;
  display: block;
}

.ad-bar__v {
  text-align: end;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ad-prizes {
  gap: 9px;
  display: grid;
}

@container adm (width >= 620px) {
  .ad-prizes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ad-prize {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  display: flex;
}

.ad-prize__k {
  color: var(--text);
  flex: none;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
}

.ad-prize__k i {
  color: var(--accent);
}

body.light-theme .ad-prize__k i {
  color: var(--accent-strong);
}

.ad-prize__box {
  flex: auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-inline-start: auto;
  display: flex;
}

.ad-prize__box input {
  font-variant-numeric: tabular-nums;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  text-align: right;
  padding: 0 11px;
  font-family: inherit;
  font-size: 12px;
}

.ad-prize__box input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.ad-prize__u {
  color: var(--ad-muted);
  flex-shrink: 0;
  font-size: 10.5px;
}

.ad-prize.is-fixed {
  opacity: .85;
}

.ad-prize__fixed {
  color: var(--ad-faint);
  margin-inline-start: auto;
  font-size: 11px;
}

.ad-log {
  gap: 7px;
  display: grid;
}

.ad-log__i {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  display: grid;
}

.ad-log__a {
  color: var(--text);
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 800;
}

.ad-log__t {
  color: var(--ad-muted);
  overflow-wrap: anywhere;
  font-size: 11px;
}

.ad-log__d {
  color: var(--ad-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

@container adm (width <= 560px) {
  .ad-log__i {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .ad-log__d {
    justify-self: start;
  }
}

.ad-dialog {
  background: none;
  border: none;
  max-width: min(92vw, 420px);
  padding: 0;
}

.ad-dialog::backdrop {
  backdrop-filter: blur(3px);
  background: #040a149e;
}

.ad-dialog__box {
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px;
}

.ad-dialog__title {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.ad-dialog__body {
  color: var(--ad-muted);
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.9;
}

.ad-dialog__acts {
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
  display: flex;
}

.ad-dialog__acts .is-danger {
  margin-inline-start: auto;
}

.data-table th:has(.ad-sort) {
  padding: 0 0 12px;
}

.ad-sort {
  width: 100%;
  min-height: 32px;
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
  background: none;
  border: none;
  border-radius: 7px;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-family: inherit;
  font-size: .7rem;
  font-weight: 700;
  display: inline-flex;
}

.ad-sort i {
  opacity: .55;
  font-size: 8.5px;
}

.ad-sort:hover {
  color: var(--text);
}

.ad-sort:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.ad-sort.is-on {
  color: var(--accent-soft);
}

body.light-theme .ad-sort.is-on {
  color: var(--accent-strong);
}

.ad-sort.is-on i {
  opacity: 1;
}

.empty-state .ad-btn {
  margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .ad-sort {
    transition: none;
  }
}

.ad-stack {
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.4;
  display: flex;
}

.ad-stack small {
  font-size: 10px;
  font-weight: 400;
}

.pcpr-host {
  z-index: 60;
  position: relative;
}

.pcpr {
  color: #fff;
  background: linear-gradient(100deg, #0f4c75, #2b76a8);
  padding: 10px 44px;
  font-size: 13px;
  line-height: 1.7;
  position: relative;
}

.pcpr__in {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
}

.pcpr__head {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: inline-flex;
}

.pcpr__t {
  font-weight: 800;
}

.pcpr__acts {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.pcpr.is-success {
  background: linear-gradient(100deg, #14532d, #1f7a45);
}

.pcpr.is-warn {
  background: linear-gradient(100deg, #713f12, #a16207);
}

.pcpr.is-danger {
  background: linear-gradient(100deg, #7f1d1d, #b91c1c);
}

.pcpr__ico {
  background: #ffffff29;
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: 11px;
  display: flex;
}

.pcpr__b {
  color: #fff;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 42ch;
  display: -webkit-box;
  overflow: hidden;
}

.pcpr__cd {
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
  background: #0000003d;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.pcpr__cta {
  color: #0b1b2b;
  border-radius: var(--radius-pill);
  min-height: 34px;
  transition: background var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
  background: #fff;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
}

.pcpr__cta-ico {
  opacity: .6;
  transition: transform var(--dur-fast) var(--ease-standard);
  font-size: 10px;
}

.pcpr__cta:hover {
  background: #ffffffdb;
}

.pcpr__cta:hover .pcpr__cta-ico {
  transform: translateX(-3px);
}

.pcpr__cta:active {
  transform: scale(.97);
}

.pcpr__cta:focus-visible, .pcpr__x:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #fff;
}

.pcpr__x {
  color: #fff;
  cursor: pointer;
  width: 32px;
  height: 32px;
  transition: background var(--dur-fast) var(--ease-standard);
  inset-inline-end: 10px;
  background: #ffffff24;
  border: none;
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  top: 10px;
}

.pcpr__x:hover {
  background: #ffffff42;
}

.pcpop {
  z-index: 300;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.pcpop__scrim {
  backdrop-filter: blur(4px);
  background: #040a14a8;
  position: absolute;
  inset: 0;
}

.pcpop__box {
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xl);
  width: min(94vw, 400px);
  box-shadow: var(--shadow-lg);
  animation: pcpop-in var(--dur-slow) var(--ease-out);
  padding: 30px 26px 24px;
  position: relative;
}

@keyframes pcpop-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.97);
  }
}

.pcpop__ico {
  color: #fff;
  background: linear-gradient(150deg, #2b76a8, #0f4c75);
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 16px;
  font-size: 24px;
  display: inline-flex;
}

.pcpop__box.is-success .pcpop__ico {
  background: linear-gradient(150deg, #1f7a45, #14532d);
}

.pcpop__box.is-warn .pcpop__ico {
  background: linear-gradient(150deg, #a16207, #713f12);
}

.pcpop__box.is-danger .pcpop__ico {
  background: linear-gradient(150deg, #b91c1c, #7f1d1d);
}

.pcpop__t {
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
}

.pcpop__b {
  color: var(--text);
  opacity: .78;
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 2;
}

.pcpop__cd {
  color: #92400e;
  border-radius: var(--radius-pill);
  background: #f59e0b29;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 6px 13px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
}

body:not(.light-theme) .pcpop__cd {
  color: #fbbf24;
}

.pcpop__acts {
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
  display: flex;
}

.pcpop__cta {
  color: #fff;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #2b76a8, #0f4c75);
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
}

.pcpop__later {
  min-height: 46px;
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  cursor: pointer;
  padding: 0 18px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
}

.pcpop__cta:focus-visible, .pcpop__later:focus-visible, .pcpop__x:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.pcpop__x {
  width: 34px;
  height: 34px;
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  cursor: pointer;
  top: 12px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  display: flex;
  position: absolute;
  inset-inline-end: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .pcpop__box {
    animation: none;
  }

  .pcpr__cta {
    transition: none;
  }
}

.adl-shell {
  place-items: center;
  min-height: 100dvh;
  padding: 24px 18px;
  display: grid;
}

.adl-card {
  background: var(--glass-bg);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px);
  width: min(100%, 400px);
  box-shadow: var(--shadow-lg);
  padding: 30px 26px;
}

.adl-head {
  text-align: center;
  margin-bottom: 24px;
}

.adl-logo {
  color: #fff;
  background: linear-gradient(150deg, #2b76a8, #0f4c75);
  border-radius: 18px;
  justify-content: center;
  align-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  font-size: 22px;
  display: inline-flex;
}

.adl-title {
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
}

.adl-sub {
  color: var(--text);
  opacity: .7;
  margin-top: 6px;
  font-size: 11.5px;
}

.adl-eye {
  width: 38px;
  height: 38px;
  color: var(--text);
  opacity: .7;
  cursor: pointer;
  background: none;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  display: flex;
}

.adl-eye:hover {
  opacity: 1;
}

.adl-eye:focus-visible {
  box-shadow: var(--focus-ring);
  border-radius: 8px;
  outline: none;
}

.adl-err {
  color: #b91c1c;
  border-radius: var(--radius-sm);
  background: #ef44441a;
  border: 1px solid #ef444447;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 10px 13px;
  font-size: 11.5px;
  display: flex;
}

body:not(.light-theme) .adl-err {
  color: #fca5a5;
}

.adl-submit {
  color: #fff;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: linear-gradient(135deg, #2b76a8, #0f4c75);
  border: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  margin-top: 18px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
}

.adl-submit:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.adl-submit:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.adl-demo {
  border-radius: var(--radius-sm);
  background: #f59e0b1a;
  border: 1px solid #f59e0b42;
  margin-top: 20px;
  padding: 13px 15px;
}

.adl-demo__t {
  color: #92400e;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
}

body:not(.light-theme) .adl-demo__t {
  color: #fbbf24;
}

.adl-demo__b {
  color: var(--text);
  opacity: .78;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.9;
}

.adl-back {
  color: var(--text);
  opacity: .72;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.adl-back:hover {
  opacity: 1;
}

.ad-who {
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.ad-two {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  display: grid;
}

@container adm (width >= 560px) {
  .ad-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ad-promo-acts {
  margin-top: 16px;
}

.ad-promolist {
  gap: 10px;
  display: grid;
}

.ad-promo {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--accent);
  padding: 13px 15px;
}

.ad-promo.is-success {
  border-inline-start-color: #22a05a;
}

.ad-promo.is-warn {
  border-inline-start-color: #d99a20;
}

.ad-promo.is-danger {
  border-inline-start-color: #dc2626;
}

.ad-promo__top {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.ad-promo__ico {
  width: 30px;
  height: 30px;
  color: var(--accent);
  background: #3282b81f;
  border-radius: 9px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 11.5px;
  display: flex;
}

body.light-theme .ad-promo__ico {
  color: var(--accent-strong);
}

.ad-promo__t {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 800;
  display: block;
}

.ad-promo__where {
  color: var(--ad-faint);
  margin-top: 2px;
  font-size: 10.5px;
  display: block;
}

.ad-promo__top .status-pill {
  margin-inline-start: auto;
}

.ad-promo__b {
  color: var(--ad-muted);
  margin-top: 9px;
  font-size: 11.5px;
  line-height: 1.9;
}

.ad-promo__meta {
  color: var(--ad-faint);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  gap: 14px;
  margin: 10px 0 11px;
  font-size: 10.5px;
  display: flex;
}

.ad-promo__meta i {
  margin-inline-end: 4px;
}

.ad-preview {
  background: var(--surface-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-sm);
  padding: 12px;
  overflow: hidden;
}

.ad-preview .pcpr {
  border-radius: 10px;
}

.ad-preview.is-popup .pcpr {
  text-align: center;
  flex-direction: column;
  padding: 20px 16px;
}

.ad-preview.is-popup .pcpr__txt {
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.pcpr__cta, .adl-eye {
  position: relative;
}

.pcpr__cta:after, .pcpr__x:after, .pcpop__x:after, .adl-eye:after {
  content: "";
  width: max(100%, 44px);
  height: max(100%, 44px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (width >= 640px) {
  .pcpr {
    padding: 9px 56px;
    font-size: 12.5px;
  }

  .pcpr__in {
    text-align: start;
    flex-direction: row;
    gap: 14px;
    max-width: 1100px;
  }

  .pcpr__ico {
    border-radius: 9px;
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .pcpr__b {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    max-width: 68ch;
  }

  .pcpr__cta {
    min-height: 34px;
    padding: 0 14px;
    font-size: 11.5px;
  }

  .pcpr__x {
    inset-inline-end: 8px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .ad-search input, .ad-prize__box input, .ad-textarea, .ad-tk__reply textarea, .cb-link__input {
    font-size: 16px;
  }
}

.font-mono, [class*="font-mono"] {
  font-variant-numeric: tabular-nums;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.eyebrow-accent {
  color: #5aa5d4;
}

body.light-theme .eyebrow-accent {
  color: #1b6ca8;
}

.err {
  text-align: center;
  justify-items: center;
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 7vw, 3.5rem) 0 clamp(2rem, 8vw, 4rem);
  display: grid;
}

.err__ico {
  width: 72px;
  height: 72px;
  color: var(--err, var(--accent-soft));
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--err, var(--accent)) 22%, transparent),
    color-mix(in srgb, var(--err, var(--accent)) 7%, transparent));
  border: 1px solid color-mix(in srgb, var(--err, var(--accent)) 26%, transparent);
  box-shadow: inset 0 1px 0
    color-mix(in srgb, var(--err, var(--accent)) 32%, transparent);
  border-radius: 22px;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.1rem;
  font-size: 28px;
  line-height: 1;
  display: inline-flex;
}

body.light-theme .err__ico {
  color: var(--err-light, var(--accent-strong));
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--err-light, var(--accent-strong)) 15%, transparent),
    color-mix(in srgb, var(--err-light, var(--accent-strong)) 5%, transparent));
  border-color: color-mix(in srgb, var(--err-light, var(--accent-strong)) 24%, transparent);
}

.err__code {
  letter-spacing: .02em;
  color: var(--err, var(--accent-soft));
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-size: clamp(3.2rem, 15vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
}

body.light-theme .err__code {
  color: var(--err-light, var(--accent-strong));
}

.err__title {
  color: var(--text);
  margin: .85rem 0 0;
  font-size: clamp(1.2rem, 4.6vw, 1.65rem);
  font-weight: 800;
  line-height: 1.7;
}

.err__lede {
  max-width: 32rem;
  color: var(--spec-muted);
  margin: .7rem 0 0;
  font-size: 13.5px;
  line-height: 2.1;
}

.err__acts {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 1.9rem;
  display: flex;
}

.err__more {
  border-top: 1px solid var(--border-1);
  width: 100%;
  margin-top: 2.4rem;
  padding-top: 1.5rem;
}

.err__more-label {
  color: var(--spec-faint);
  margin-bottom: .9rem;
  font-size: 12px;
  font-weight: 700;
  display: block;
}

.err__links {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.err__link {
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  min-height: 40px;
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
}

.err__link i {
  color: var(--accent-soft);
  font-size: 12px;
}

body.light-theme .err__link i {
  color: var(--accent-strong);
}

.err__link:hover {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.err__ref {
  color: var(--spec-faint);
  margin-top: 1.6rem;
  font-size: 11.5px;
  line-height: 1.9;
}

.err__ref code {
  font-family: var(--font-mono);
  color: var(--spec-muted);
  unicode-bidi: isolate;
  font-size: 11.5px;
}

.section-content:not(.hidden) {
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}

.payres {
  text-align: center;
  padding-top: 4px;
}

.rcpt {
  --rcpt-w: 236px;
  --rcpt-paper: #f4f1ea;
  --rcpt-ink: #2b2b28;
  --rcpt-ink-soft: #6f6b62;
  --rcpt-zig: 8px;
  width: var(--rcpt-w);
  margin: 0 auto;
}

.rcpt__machine {
  z-index: 2;
  background: linear-gradient(#3c485c, #2a3446);
  border: 1px solid #ffffff17;
  border-radius: 12px 12px 5px 5px;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  display: flex;
  position: relative;
  box-shadow: 0 6px 16px -8px #0009;
}

body.light-theme .rcpt__machine {
  background: linear-gradient(#57647c, #3f4a5e);
}

.rcpt__led {
  width: 7px;
  height: 7px;
  transition: background .2s var(--ease-standard),
    box-shadow .2s var(--ease-standard);
  background: #64748b;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 #0000;
}

.rcpt[data-state="checking"] .rcpt__led {
  background: #f59e0b;
  animation: .46s step-end infinite alternate rcptLed;
}

.rcpt[data-state="success"] .rcpt__led {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55eb3;
}

.rcpt[data-state="failed"] .rcpt__led {
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444b3;
}

.rcpt[data-state="pending"] .rcpt__led {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0ba6;
}

@keyframes rcptLed {
  from {
    opacity: 1;
  }

  to {
    opacity: .25;
  }
}

.rcpt__grille {
  background: repeating-linear-gradient(90deg, #ffffff1a 0 2px, #0000 2px 5px);
  border-radius: 3px;
  flex: 1;
  height: 6px;
}

.rcpt__slot {
  inset-inline: 10px;
  background: #10151f;
  border-radius: 3px;
  height: 6px;
  position: absolute;
  bottom: -3px;
  box-shadow: inset 0 2px 3px #000000d9;
}

.rcpt__out {
  margin-top: -2px;
  position: relative;
  overflow: hidden;
}

.rcpt__paper {
  padding: 16px 16px calc(14px + var(--rcpt-zig));
  text-align: start;
  color: var(--rcpt-ink);
  background: var(--rcpt-paper);
  font-family: var(--font-mono);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--rcpt-zig)) no-repeat,
    conic-gradient(from -45deg at 50% 0, #000 0 90deg, transparent 0) 0 100% /
      var(--rcpt-zig) var(--rcpt-zig) repeat-x;
  mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--rcpt-zig)) no-repeat,
    conic-gradient(from -45deg at 50% 0, #000 0 90deg, transparent 0) 0 100% /
      var(--rcpt-zig) var(--rcpt-zig) repeat-x;
  position: relative;
}

.rcpt__paper:before {
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #00000006 0 1px, #0000 1px 3px);
  position: absolute;
  inset: 0;
}

.rcpt[data-state="checking"] .rcpt__paper {
  animation: .5s steps(2, end) infinite alternate rcptNudge;
  transform: translateY(calc(18px - 100%));
}

@keyframes rcptNudge {
  from {
    transform: translateY(calc(18px - 100%));
  }

  to {
    transform: translateY(calc(21px - 100%));
  }
}

.rcpt[data-state="success"] .rcpt__paper, .rcpt[data-state="failed"] .rcpt__paper, .rcpt[data-state="pending"] .rcpt__paper {
  animation: .82s steps(13, end) both rcptFeed;
}

@keyframes rcptFeed {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

.rcpt[data-state="pending"] .rcpt__paper {
  animation: rcptFeed .82s steps(13) both,
    rcptBreathe 2.6s var(--ease-standard) .88s infinite;
}

@keyframes rcptBreathe {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2.5px);
  }
}

.rcpt__brand {
  letter-spacing: -.01em;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
}

.rcpt__brand span {
  letter-spacing: .18em;
  color: var(--rcpt-ink-soft);
  font-size: 8.5px;
  font-weight: 700;
}

.rcpt__kind {
  color: var(--rcpt-ink-soft);
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
}

.rcpt__rule {
  border-top: 1px dashed #2b2b2852;
  height: 0;
  margin: 11px 0;
}

.rcpt__rows {
  gap: 7px;
  margin: 0;
  display: grid;
}

.rcpt__rows > div {
  font-variant-numeric: tabular-nums;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 11.5px;
  line-height: 1.55;
  display: flex;
}

.rcpt__rows dt {
  color: var(--rcpt-ink-soft);
  flex: none;
  font-weight: 600;
}

.rcpt__rows dd {
  text-align: end;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
  font-weight: 800;
}

.rcpt__total {
  color: var(--rcpt-ink-soft);
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.rcpt__total b {
  color: var(--rcpt-ink);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 900;
}

.rcpt__stamp {
  letter-spacing: .01em;
  opacity: 0;
  border: 2px solid;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  transform: rotate(-8deg) scale(1.5);
}

.rcpt__stamp i {
  font-size: 10px;
}

.rcpt[data-state="success"] .rcpt__stamp, .rcpt[data-state="failed"] .rcpt__stamp, .rcpt[data-state="pending"] .rcpt__stamp {
  animation: .32s cubic-bezier(.2, 1.35, .5, 1) .79s both rcptStamp;
}

.rcpt[data-state="pending"] .rcpt__stamp {
  animation-delay: .75s;
}

.rcpt[data-state="success"] .rcpt__stamp {
  color: #15703a;
}

.rcpt[data-state="failed"] .rcpt__stamp {
  color: #b3261e;
}

.rcpt[data-state="pending"] .rcpt__stamp {
  color: #8a5406;
}

@keyframes rcptStamp {
  from {
    opacity: 0;
    transform: rotate(-8deg) scale(1.5);
  }

  to {
    opacity: 1;
    transform: rotate(-3.5deg) scale(1);
  }
}

.rcpt__barcode {
  background: repeating-linear-gradient(90deg,
    var(--rcpt-ink) 0 1px,
    transparent 1px 3px,
    var(--rcpt-ink) 3px 5px,
    transparent 5px 6px,
    var(--rcpt-ink) 6px 7px,
    transparent 7px 10px);
  opacity: .82;
  height: 26px;
  margin-top: 14px;
}

.rcpt__foot {
  letter-spacing: .14em;
  text-align: center;
  color: var(--rcpt-ink-soft);
  margin-top: 7px;
  font-size: 10px;
  font-weight: 700;
}

.payres__title {
  color: var(--text);
  margin-top: 18px;
  font-size: 16px;
  font-weight: 900;
}

.payres__msg {
  max-width: 320px;
  color: var(--spec-muted, #ffffffb8);
  margin: 7px auto 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.9;
}

.payres__actions {
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  display: flex;
}

.payres__ghost {
  min-height: 44px;
  color: var(--spec-faint, #fff9);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
  background: none;
  border: 0;
  padding: 10px;
  font-size: 12px;
  font-weight: 700;
}

.payres__ghost:hover {
  color: var(--text);
}

.txn-icon--wait {
  color: #f59e0b;
  background: #f59e0b24;
}

.status-pill.pending {
  color: #f59e0b;
  background: #f59e0b21;
  border-color: #f59e0b52;
}

body.light-theme .status-pill.pending {
  color: #a16207;
  background: #f59e0b29;
  border-color: #a1620757;
}

@media (prefers-reduced-motion: reduce) {
  .rcpt__paper, .rcpt[data-state="checking"] .rcpt__paper, .rcpt[data-state="pending"] .rcpt__paper {
    animation: none;
    transform: none;
  }

  .rcpt__stamp {
    opacity: 1;
    transform: rotate(-3.5deg);
    animation: none !important;
  }

  .rcpt__led {
    animation: none;
  }
}

.morph-btn {
  isolation: isolate;
  position: relative;
}

.morph-btn__face {
  transition: opacity .12s var(--ease-out),
    transform .18s cubic-bezier(.34, 1.56, .64, 1);
  justify-content: center;
  align-items: center;
  gap: 7px;
  display: inline-flex;
}

.morph-btn__face--done {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
  transform: scale(.7);
}

.morph-btn.is-copied .morph-btn__face--idle {
  opacity: 0;
  pointer-events: none;
  transform: scale(.7);
}

.morph-btn.is-copied .morph-btn__face--done {
  opacity: 1;
  transform: scale(1);
}

.pc-spinner {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
}

.pc-spinner--radial {
  animation: .9s linear infinite pcSpin;
}

.pc-spinner--radial i {
  transform-origin: 50% 167%;
  inset-inline-start: 50%;
  background: currentColor;
  border-radius: 2px;
  width: 2px;
  height: 30%;
  margin-inline-start: -1px;
  position: absolute;
  top: 0;
}

.pc-spinner--radial i:first-child {
  opacity: 1;
  transform: rotate(0);
}

.pc-spinner--radial i:nth-child(2) {
  opacity: .72;
  transform: rotate(90deg);
}

.pc-spinner--radial i:nth-child(3) {
  opacity: .45;
  transform: rotate(180deg);
}

.pc-spinner--radial i:nth-child(4) {
  opacity: .22;
  transform: rotate(270deg);
}

@keyframes pcSpin {
  to {
    transform: rotate(360deg);
  }
}

.pc-spinner--orbit i {
  width: 5px;
  height: 5px;
  animation: pcOrbitPulse 1.1s var(--ease-standard) infinite;
  background: currentColor;
  border-radius: 50%;
  margin-top: -2.5px;
  position: absolute;
  top: 50%;
}

.pc-spinner--orbit i:first-child {
  animation-delay: 0s;
  inset-inline-start: 0;
}

.pc-spinner--orbit i:nth-child(2) {
  animation-delay: .15s;
  inset-inline-start: calc(50% - 2.5px);
}

.pc-spinner--orbit i:nth-child(3) {
  animation-delay: .3s;
  inset-inline-end: 0;
}

@keyframes pcOrbitPulse {
  0%, 100% {
    opacity: .35;
    transform: scale(.6);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }
}

.pc-seg {
  grid-template-columns: repeat(var(--seg-n, 2), minmax(0, 1fr));
  position: relative;
}

.pc-seg__thumb {
  z-index: 0;
  width: calc((100% - (var(--seg-n, 2) - 1) * 10px) / var(--seg-n, 2));
  border: 1.5px solid var(--accent);
  transition: transform .22s var(--ease-out);
  pointer-events: none;
  background: #3282b81f;
  border-radius: 1.05rem;
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  transform: translateX(0);
  box-shadow: inset 0 0 0 1px #3282b859;
}

.pc-seg[data-active="1"] .pc-seg__thumb {
  transform: translateX(calc(-100% - 10px));
}

.pc-seg[data-active="2"] .pc-seg__thumb {
  transform: translateX(calc(-200% - 20px));
}

html[dir="ltr"] .pc-seg[data-active="1"] .pc-seg__thumb {
  transform: translateX(calc(100% + 10px));
}

html[dir="ltr"] .pc-seg[data-active="2"] .pc-seg__thumb {
  transform: translateX(calc(200% + 20px));
}

.pc-seg__opt {
  z-index: 1;
  position: relative;
}

.pc-seg__opt--compact {
  color: var(--text);
  justify-content: center;
  align-items: center;
  padding: 11px 10px;
  font-size: 12.5px;
  font-weight: 700;
}

.pc-seg__opt--compact.is-active:after {
  content: none;
}

.arc-meter__ticks {
  stroke: #fff3;
  stroke-width: 2.5px;
  stroke-dasharray: 1.65 4.2405;
}

body.light-theme .arc-meter__ticks {
  stroke: #0f172a33;
}

.timer-ring #timerCircle {
  transition: stroke-dashoffset 1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .morph-btn__face, .pc-seg__thumb, .timer-ring #timerCircle {
    transition-duration: .01ms;
  }

  .pc-spinner--radial {
    animation-duration: 1.6s;
  }

  .pc-spinner--orbit i {
    animation-duration: 1.8s;
  }
}

.pc-stepper {
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  display: flex;
  position: relative;
}

.pc-stepper__rail, .pc-stepper__fill {
  top: 15px;
  inset-inline: calc((100% - (var(--pc-steps, 3) - 1) * 6px) / (2 * var(--pc-steps, 3)));
  border-radius: 2px;
  height: 2px;
  position: absolute;
}

.pc-stepper__rail {
  background: var(--border-1);
}

.pc-stepper__fill {
  background: linear-gradient(to left, var(--accent), var(--accent-soft));
  transform-origin: 100%;
  transform: scaleX(var(--pc-stepper-progress, 0));
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

html[dir="ltr"] .pc-stepper__fill {
  transform-origin: 0;
  background: linear-gradient(to right, var(--accent), var(--accent-soft));
}

body.light-theme .pc-stepper__fill {
  background: linear-gradient(to left, var(--accent-strong), var(--accent));
}

html[dir="ltr"] body.light-theme .pc-stepper__fill {
  background: linear-gradient(to right, var(--accent-strong), var(--accent));
}

.pc-step {
  z-index: 1;
  text-align: center;
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
  position: relative;
}

.pc-step__dot {
  width: 32px;
  height: 32px;
  color: var(--spec-faint);
  background: var(--surface-bead);
  border: 1.5px solid var(--border-1);
  transition: background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    transform .28s cubic-bezier(.34, 1.56, .64, 1);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
}

.pc-step__dot i {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard),
    transform .28s cubic-bezier(.34, 1.56, .64, 1);
  font-size: 11px;
  transform: scale(.4);
}

.pc-step__num {
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.pc-step__label {
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.pc-step.is-current .pc-step__dot {
  color: #fff;
  background: var(--accent-fill, var(--accent));
  border-color: var(--accent-fill, var(--accent));
  transform: scale(1.12);
}

.pc-step.is-done .pc-step__dot {
  color: #fff;
  background: color-mix(in srgb, var(--accent) 55%, var(--surface-bead));
  border-color: color-mix(in srgb, var(--accent) 62%, var(--surface-bead));
}

.pc-step.is-done .pc-step__num {
  opacity: 0;
}

.pc-step.is-done .pc-step__dot i {
  opacity: 1;
  transform: scale(1);
}

.pc-step__dot {
  place-items: center;
  display: grid;
  position: relative;
}

.pc-step__num, .pc-step__dot i {
  grid-area: 1 / 1;
  position: static;
}

.pc-field__input--ph-rtl::placeholder {
  text-align: right;
}

.pc-back {
  border-radius: var(--radius-pill);
  min-height: 44px;
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
  background: none;
  border: 1px solid #0000;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 6px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

html[dir="ltr"] .pc-back {
  padding: 6px 6px 6px 14px;
}

.pc-back__ico {
  width: 30px;
  height: 30px;
  color: var(--accent-on-dark);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  transition: transform .2s var(--ease-out),
    background var(--dur-fast) var(--ease-standard);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  display: inline-flex;
}

body.light-theme .pc-back__ico {
  color: var(--accent-strong);
}

html[dir="ltr"] .pc-back__ico i {
  transform: scaleX(-1);
}

.pc-back__label {
  line-height: 1.2;
}

.pc-back:hover {
  background: var(--surface-1);
  border-color: var(--border-1);
}

.pc-back:hover .pc-back__ico {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}

.pc-back:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .pc-back:hover .pc-back__ico {
    transform: translateX(3px);
  }

  html[dir="ltr"] .pc-back:hover .pc-back__ico {
    transform: translateX(-3px);
  }
}

.pc-back:active .pc-back__ico {
  transition: transform .1s ease-out;
  transform: scale(.94);
}

.pc-back-home {
  justify-content: center;
  margin-top: 2rem;
  display: flex;
}

.pc-back-home[hidden] {
  display: none;
}

.pc-back--center {
  margin-inline: auto;
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .pc-back__ico {
    transition: background var(--dur-fast) var(--ease-standard);
  }

  .pc-back:hover .pc-back__ico, .pc-back:active .pc-back__ico {
    transform: none;
  }
}

.wheel-num {
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  flex: none;
  align-items: flex-start;
  width: max-content;
  height: 1.15em;
  line-height: 1.15em;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.wheel-num .wheel-num__col {
  flex: none;
  height: 1.15em;
  display: block;
  overflow: hidden;
}

.wheel-num .wheel-num__strip {
  transform: translateY(var(--wheel-y, 0));
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
  display: block;
}

.wheel-num .wheel-num__strip span {
  height: 1.15em;
  line-height: 1.15em;
  display: block;
}

.wheel-num .wheel-num__sep {
  flex: none;
  height: 1.15em;
  line-height: 1.15em;
  display: block;
}

.wheel-num__cols {
  flex: none;
  align-items: flex-start;
  display: inline-flex;
}

.wheel-num__sr {
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.wheel-num .wheel-num__col, .wheel-num .wheel-num__sep {
  -webkit-user-select: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .pc-stepper__fill, .pc-step__dot, .pc-step__dot i, .wheel-num__strip {
    transition-duration: .01ms;
  }
}

.receipt-print > * {
  animation: .32s cubic-bezier(.22, 1, .36, 1) backwards receiptFeed;
  animation-delay: calc(var(--i, 0) * 40ms);
}

@keyframes receiptFeed {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.pcv-scene.has-menu-open {
  z-index: 60;
}

.act-menu {
  display: inline-block;
  position: relative;
}

.act-menu__panel {
  z-index: 40;
  border-radius: var(--radius-md);
  background: var(--surface-pop);
  border: 1px solid var(--border-2);
  min-width: 194px;
  max-width: min(240px, 100vw - 24px);
  box-shadow: var(--shadow-lg, 0 20px 48px -12px #00000073);
  transform-origin: var(--act-origin, 100%) 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s var(--ease-out),
    transform .14s var(--ease-out), visibility 0s linear .14s;
  top: calc(100% + 6px);
  padding: 6px;
  position: absolute;
  inset-inline-end: var(--act-shift, 0px);
  transform: scale(.94) translateY(-6px);
}

html[dir="ltr"] .act-menu__panel {
  transform-origin: var(--act-origin, 0) 0;
}

.act-menu.is-open .act-menu__panel {
  opacity: 1;
  visibility: visible;
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out),
    visibility 0s;
  transform: none;
}

.act-menu__title {
  letter-spacing: .01em;
  color: var(--spec-faint, #ffffff8c);
  padding: 4px 10px 6px;
  font-size: 10.5px;
  font-weight: 800;
  display: block;
}

.act-menu__item {
  border-radius: var(--radius-sm);
  width: 100%;
  min-height: 44px;
  color: var(--text);
  text-align: start;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
  background: none;
  border: none;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
}

.act-menu__item i {
  text-align: center;
  width: 15px;
  color: var(--accent-soft);
  font-size: 12px;
}

body.light-theme .act-menu__item i {
  color: var(--accent-strong);
}

.act-menu__item:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.act-menu__item:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.act-menu__item.is-danger, .act-menu__item.is-danger i {
  color: #f87171;
}

body.light-theme .act-menu__item.is-danger, body.light-theme .act-menu__item.is-danger i {
  color: #b3261e;
}

.act-menu__item.is-danger:hover {
  background: #ef44441f;
}

@media (prefers-reduced-motion: reduce) {
  .receipt-print > * {
    animation: none;
  }

  .act-menu__panel {
    transition-duration: .01ms;
  }
}

.morph-btn:active {
  transition: transform .1s ease-out;
  transform: scale(.94);
}

.act-menu__item:active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.act-menu__btn:active {
  transition: transform .1s ease-out;
  transform: scale(.94);
}

@media (prefers-reduced-motion: reduce) {
  .morph-btn:active, .act-menu__btn:active {
    transform: none;
  }
}
/*# sourceMappingURL=cardi-main.e1d8d849.css.map */