/* Zynlume UI polish fixes & cross-platform visual consistency. */

/* 0. STRICT ABSOLUTE BAN ON TEXT UNDERLINES ACROSS ALL BROWSERS */
a, a *, a:link, a:link *, a:visited, a:visited *, a:hover, a:hover *, a:active, a:active *, a:focus, a:focus *,
button, button *, .btn, .btn *, .btn-quiet, .btn-quiet *, .btn-ghost, .btn-ghost *, .btn-primary, .btn-primary *,
.mono-actions a, .mono-actions a *, .mono-actions .btn, .mono-actions .btn *,
.hero-actions a, .hero-actions a *, .hero-product-btn, .hero-product-btn *,
.nav-links a, .nav-links a *, .brand, .brand *, .brand b, .brand b *,
.dl-btn, .dl-btn *, .to-top, .to-top *, .final-cta a, .final-cta a *, .mono-cta a, .mono-cta a * {
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
  border-bottom: none !important;
}

/* 1. Empty channel list placeholder treatment - Dark Obsidian Glass & Animated Glide Icon */
.phint,
.cab-empty,
#dash .phint,
#dash .cab-empty {
  padding: 14px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  background: rgba(14, 14, 18, 0.82) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  line-height: 1.4 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#coreHint,
#dash #coreHint,
#coreHint:empty,
.cab-empty:empty,
#dash .cab-empty:empty,
#dash .phint:empty {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  height: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.phint:hover,
.cab-empty:hover,
#dash .phint:hover,
#dash .cab-empty:hover {
  background: rgba(22, 22, 28, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 #ffffff !important;
}

.phint .cab-ico,
.cab-empty .cab-ico,
#dash .phint .cab-ico,
#dash .cab-empty .cab-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.phint svg,
.cab-empty svg,
#dash .phint svg,
#dash .cab-empty svg {
  width: 15px !important;
  height: 15px !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  animation: zmIconGlide 2.8s ease-in-out infinite !important;
}

/* 2. Pricing card badges & popular pill */
.price-badge,
.plan-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}

/* 3. Gift code and referral box copy styling */
.gift-code,
.ref-code-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  user-select: all !important;
}

/* 4. Modal and checkout overlay smooth scroll and backdrop */
.modal-box {
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 5. Safe touch target size for mobile buttons */
@media (max-width: 600px) {
  .btn,
  .per-tab,
  .nav-actions button,
  .channel-del-btn {
    min-height: 40px !important;
  }
}

/* 6. Universal Zero-Underline Guarantee across ALL platform elements and states */
*, *::before, *::after,
html, body, a, button, input, select, textarea,
h1, h2, h3, h4, h5, h6, p, span, b, strong, em, i,
div, section, article, nav, header, footer,
.btn, .btn *, .nav-links a, .nav-links a:hover,
.footer-grid, .footer-grid *, .footer-grid a, .footer-grid a:hover,
.auth-toggle, .auth-toggle:hover,
.per-tab, .per-tab:hover, .per-tab.active,
.dash-rail nav button, .dash-rail nav button:hover,
.support-card, .support-card *,
.process-card, .process-card *,
.feature, .feature *,
.plan, .plan *,
.final-cta, .final-cta *,
.to-top, .to-top:hover,
.lang-trigger, .lang-trigger:hover,
.faq-list details, .faq-list summary, .faq-list p, .faq-list * {
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 0 !important;
  border-bottom-style: none !important;
}

/* 7. Footer horizontal 5-column layout & clean typography */
#site footer nav > b::before,
footer nav > b::before,
.footer-grid nav b::before {
  display: none !important;
  content: none !important;
}

footer, #site footer, #siteFooter {
  background: #050811 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 64px 0 48px !important;
  width: 100% !important;
}

.footer-grid, #site .footer-grid, .wrap.footer-grid {
  display: grid !important;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr !important;
  gap: 40px 24px !important;
  width: 100% !important;
  max-width: var(--wrap, 1200px) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  align-items: start !important;
}

.footer-brand-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.footer-brand-col .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.footer-brand-col .to-top {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.2s, transform 0.2s !important;
}

.footer-brand-col .to-top:hover {
  color: #38bdf8 !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.footer-brand-col p {
  font-size: 13px !important;
  color: #64748b !important;
  margin: 0 !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.footer-grid nav,
.footer-nav-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.footer-grid nav b,
.footer-nav-col b {
  font-size: 11.5px !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.footer-grid nav a,
.footer-nav-col a,
.footer-grid a {
  font-size: 13.5px !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  line-height: 1.5 !important;
  border-bottom: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.footer-grid nav a:hover,
.footer-nav-col a:hover,
.footer-grid a:hover {
  color: #38bdf8 !important;
  transform: translateX(2px) !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

@media (max-width: 960px) {
  .footer-grid, #site .footer-grid, .wrap.footer-grid {
    grid-template-columns: 1.5fr repeat(2, 1fr) !important;
    gap: 36px 20px !important;
  }
}

@media (max-width: 640px) {
  .footer-grid, #site .footer-grid, .wrap.footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 16px !important;
  }
  .footer-brand-col {
    grid-column: 1 / -1 !important;
    margin-bottom: 8px !important;
  }
}

@media (max-width: 650px) {
  .footer-nav-columns {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px 16px !important;
  }
  .footer-brand-col {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* 8. Adaptive globe icon for language switcher */
.lang-trigger .zm-ico-globe,
.lang-trigger .cab-ico,
.lang-trigger .zm-ico-globe svg,
.lang-trigger .cab-ico svg,
#site .lang-trigger .zm-ico-globe,
#site .lang-trigger .zm-ico-globe svg,
#site .lang-trigger .cab-ico,
#site .lang-trigger .cab-ico svg,
#dash .lang-trigger .zm-ico-globe,
#dash .lang-trigger .zm-ico-globe svg,
#dash .lang-trigger .cab-ico,
#dash .lang-trigger .cab-ico svg,
.language-menu .zm-ico-globe,
.language-menu .zm-ico-globe svg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* 9. Buttery-smooth luxury micro-animations for pricing buy buttons */
.plan .btn,
#plans .btn,
.plans .btn,
.btn-ghost,
.btn-grad {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 46px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.plan .btn-ghost,
#plans .btn-ghost,
.btn-ghost {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

.plan .btn-ghost:hover,
#plans .btn-ghost:hover,
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: translateY(-2.5px) scale(1.015) !important;
  box-shadow: 0 10px 28px rgba(56, 189, 248, 0.32), 0 0 18px rgba(56, 189, 248, 0.22) !important;
}

.plan .btn-ghost:active,
#plans .btn-ghost:active,
.btn-ghost:active {
  transform: translateY(0px) scale(0.985) !important;
  transition-duration: 0.12s !important;
}

.plan .btn-grad,
#plans .btn-grad,
.btn-grad {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 50%, #6366f1 100%) !important;
  background-size: 200% auto !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 22px rgba(56, 189, 248, 0.4), 0 0 12px rgba(99, 102, 241, 0.3) !important;
}

.plan .btn-grad:hover,
#plans .btn-grad:hover,
.btn-grad:hover {
  background-position: right center !important;
  border-color: #ffffff !important;
  transform: translateY(-3px) scale(1.025) !important;
  box-shadow: 0 12px 36px rgba(56, 189, 248, 0.6), 0 0 25px rgba(99, 102, 241, 0.5) !important;
}

.plan .btn-grad:active,
#plans .btn-grad:active,
.btn-grad:active {
  transform: translateY(0px) scale(0.985) !important;
  transition-duration: 0.12s !important;
}

.plan .btn::after,
#plans .btn::after {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -80% !important;
  width: 50% !important;
  height: 200% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent) !important;
  transform: rotate(25deg) !important;
  transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

.plan .btn:hover::after,
#plans .btn:hover::after {
  left: 150% !important;
}

/* 10. Nav-links pseudoelements removal */
.nav-links a::after,
.nav-links a:hover::after,
.nav-links a[aria-current="true"]::after,
#site .topnav .nav-links a::after,
#site .topnav .nav-row .nav-links a::after,
#site .topnav .nav-links a:hover::after,
#site .topnav .nav-row .nav-links a:hover::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* 11. Studio generation estimate pill styling */
.studio-footer > div,
.studio-estimate {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  letter-spacing: -0.01em !important;
}
.studio-estimate .estimate-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #38bdf8 !important;
  flex-shrink: 0 !important;
}
.studio-estimate .estimate-icon svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
}

/* 12. Support card zero-underline and crisp typography */
.support-card,
#site .support-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  border-radius: 14px !important;
  background: var(--surface, #111111) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.14)) !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.support-card:hover,
#site .support-card:hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: var(--surface-2, #181818) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}
.support-card *,
#site .support-card * {
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  text-decoration-color: transparent !important;
}
.support-card b,
#site .support-card b {
  font-size: 15px !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  display: block !important;
  text-decoration: none !important;
}
.support-card small,
#site .support-card small {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.3 !important;
  display: block !important;
  margin-top: 3px !important;
  text-decoration: none !important;
}
.support-card .support-icon,
#site .support-card .support-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.support-card .support-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* 13. Balanced 50/50 dashboard layout */
#dash .dash-layout {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
  padding: 28px 32px 80px !important;
  box-sizing: border-box !important;
  align-items: start !important;
}

#dash .dash-main,
#dash .dash-side {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 0% !important;
}

#dash .panel {
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1080px) {
  #dash .dash-layout {
    grid-template-columns: 1fr !important;
    padding: 20px 16px 50px !important;
    gap: 20px !important;
  }
}

/* 14. Monochrome white active preset pills in studio & dash */
#dash .preset-pill.active,
.preset-pill.active,
.preset-pills .preset-pill.active {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.4) !important;
}

#dash .preset-pill.active *,
.preset-pill.active * {
  color: #000000 !important;
  stroke: #000000 !important;
}

/* 14b. Mini Plan Cards & Full Title Visibility */
#dash .mini-plan,
.mini-plan {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

#dash .mini-plan .mp-ic,
.mini-plan .mp-ic {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

#dash .mini-plan .mp-info,
.mini-plan .mp-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#dash .mini-plan .mp-info b,
.mini-plan .mp-info b {
  font-size: 14px !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
  line-height: 1.25 !important;
}

#dash .mini-plan .mp-info div,
.mini-plan .mp-info div {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 2px !important;
  line-height: 1.25 !important;
}

#dash .mini-plan .mp-price,
.mini-plan .mp-price {
  flex-shrink: 0 !important;
  text-align: right !important;
  margin-right: 6px !important;
}

#dash .mini-plan .btn,
.mini-plan .btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* 15. Solid white gift claim activation button */
#dash #liveClaimGift,
#liveClaimGift,
[data-action="claimGiftLive"],
#dash [data-action="claimGiftLive"],
#dash .claim-box button,
#dash .claim-box .btn {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 24px !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#dash #liveClaimGift:hover,
#liveClaimGift:hover,
[data-action="claimGiftLive"]:hover,
#dash [data-action="claimGiftLive"]:hover,
#dash .claim-box button:hover,
#dash .claim-box .btn:hover {
  background: #f1f5f9 !important;
  border-color: #ffffff !important;
  color: #000000 !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.25) !important;
}

/* 16. Solid white "Выбрать файлы" / "Обрати файли" upload button */
.studio-upload .btn,
.studio-upload [data-action="pickFiles"],
#dash .studio-upload .btn,
#dash .studio-upload [data-action="pickFiles"],
#site .studio-upload .btn,
#site .studio-upload [data-action="pickFiles"] {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  min-height: 42px !important;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.studio-upload .btn:hover,
.studio-upload [data-action="pickFiles"]:hover,
#dash .studio-upload .btn:hover,
#dash .studio-upload [data-action="pickFiles"]:hover,
#site .studio-upload .btn:hover,
#site .studio-upload [data-action="pickFiles"]:hover {
  background: #f1f5f9 !important;
  border-color: #ffffff !important;
  color: #000000 !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 22px rgba(255, 255, 255, 0.25) !important;
}

/* 17. Mono trust badges layout integrity */
#site .mono-trust,
.mono-trust {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 14px !important;
  margin-top: 24px !important;
  width: 100% !important;
}

#site .mono-trust .trust-item,
.mono-trust .trust-item {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  width: auto !important;
  height: auto !important;
  min-height: 36px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#site .mono-trust .trust-icon,
.mono-trust .trust-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

#site .mono-trust .trust-icon svg,
.mono-trust .trust-icon svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  transform: none !important;
}

/* ================================================================
   18. Comprehensive Mobile Layout, Responsiveness & 60fps Performance
   Fixes mobile overflow, header compression, hero vertical stack,
   and prevents desktop layout forced rendering on phone screens.
   ================================================================ */

@media (max-width: 900px) {
  /* Prevent horizontal stretch on mobile */
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .wrap {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- Top Navigation Header Mobile Rules --- */
  #site .topnav, .topnav {
    position: fixed !important;
    top: 8px !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    transform: none !important;
    -webkit-transform: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 1000 !important;
  }

  #site .topnav .nav-row, .topnav .nav-row {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
  }

  /* Hide desktop links completely on mobile to prevent stretching header */
  #site .topnav .nav-links {
    display: none !important;
  }

  /* Show mobile menu button */
  #site .menu-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Desktop auth button hide on mobile in topnav (menu drawer handles it) */
  #site .desktop-auth {
    display: none !important;
  }

  /* --- Hero Mobile Section Rules --- */
  #site .hero {
    padding: 96px 0 48px !important;
    min-height: auto !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  #site .mono-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    text-align: center !important;
    padding: 0 !important;
  }

  #site .mono-copy {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  #site .mono-copy h1 {
    font-size: clamp(32px, 8.5vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    margin: 12px 0 16px !important;
    text-align: center !important;
    max-width: 100% !important;
    word-break: break-word !important;
  }

  #site .mono-copy p {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0 0 24px !important;
    text-align: center !important;
    max-width: 95% !important;
  }

  #site .mono-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  #site .mono-actions .btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 14px !important;
    justify-content: center !important;
  }

  #site .mono-trust {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 10px !important;
    margin: 20px auto 0 !important;
    width: 100% !important;
  }

  #site .mono-trust .trust-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 12px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    height: auto !important;
    min-height: 36px !important;
  }

  #site .mono-trust .trust-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #site .mono-trust .trust-icon svg {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    display: block !important;
    stroke: currentColor !important;
    fill: none !important;
  }

  #site .hero-showcase {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  /* --- Generation Studio Mobile Rules --- */
  #site .studio-frame {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: auto !important;
  }

  #site .studio-nav {
    flex-direction: row !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    overflow-x: auto !important;
    padding: 8px !important;
    width: 100% !important;
  }

  #site .studio-options {
    grid-template-columns: 1fr !important;
  }

  /* --- Feature Grids & Matrix Tables --- */
  #site .feature-grid,
  #site .process-grid,
  #site .plans {
    grid-template-columns: 1fr !important;
  }

  #site .compare-matrix-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  /* --- Dashboard Cabinet Mobile Layout --- */
  #dash .dash-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #dash .dash-rail {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    z-index: 1 !important;
    background: transparent !important;
  }

  #dash .dash-rail nav,
  #dash .rail-status {
    display: none !important;
  }

  #dash .dash-layout {
    grid-template-columns: 1fr !important;
    padding: 14px 12px 60px !important;
    gap: 14px !important;
    width: 100% !important;
  }

  /* --- Performance: Disable expensive stroke animations on mobile (icons always animate) --- */
  [data-dash]:not(.zm-anim-icon):not(.cab-ico):not([class*="zm-ico-"]) {
    stroke-dasharray: none !important;
  }
}

/* 19. FAQ section layout & bottom support card positioning */
#faq .faq-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr) !important;
  gap: 60px !important;
  align-items: start !important;
}

#faq .faq-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
}

#faq .support-card,
.support-card {
  margin-top: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 900px) {
  #faq .faq-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    width: 100% !important;
  }
  #faq .section-intro {
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  #faq .faq-main {
    width: 100% !important;
  }
  #faq .support-card {
    margin-top: 16px !important;
    width: 100% !important;
  }
}

/* 20. Danger / Delete Account Button with Red Outline and Red Trash Icon */
.btn-danger,
.btn-danger-ghost,
#dash .btn-danger,
#dash [data-action="deleteAccount"],
#profileOverlay [data-action="deleteAccount"] {
  border: 1px solid rgba(239, 68, 68, 0.75) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-danger:hover,
.btn-danger-ghost:hover,
#dash .btn-danger:hover,
#dash [data-action="deleteAccount"]:hover,
#profileOverlay [data-action="deleteAccount"]:hover {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.22) !important;
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.28) !important;
  color: #ffffff !important;
}

/* Red trash icon inside delete / danger buttons */
.btn-danger .btn-ico,
.btn-danger .cab-ico,
.btn-danger-ghost .btn-ico,
.btn-danger-ghost .cab-ico,
#dash .btn-danger .btn-ico,
#dash .btn-danger .cab-ico,
#dash [data-action="deleteAccount"] .btn-ico,
#dash [data-action="deleteAccount"] .cab-ico,
#dash [data-action="deleteAccount"] svg,
#dash [data-action="delChannel"] svg,
#profileOverlay [data-action="deleteAccount"] .btn-ico,
#profileOverlay [data-action="deleteAccount"] svg {
  color: #ef4444 !important;
  stroke: #ef4444 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-danger .btn-ico svg,
.btn-danger .cab-ico svg,
.btn-danger-ghost .btn-ico svg,
.btn-danger-ghost .cab-ico svg,
#dash [data-action="deleteAccount"] svg {
  color: #ef4444 !important;
  stroke: #ef4444 !important;
  width: 18px !important;
  height: 18px !important;
}

.btn-danger:hover .btn-ico,
.btn-danger:hover .cab-ico,
.btn-danger:hover svg,
#dash [data-action="deleteAccount"]:hover svg,
    min-width: 15px !important;
    min-height: 15px !important;
    display: block !important;
    stroke: currentColor !important;
    fill: none !important;
  }

  #site .hero-showcase {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  /* --- Generation Studio Mobile Rules --- */
  #site .studio-frame {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: auto !important;
  }

  #site .studio-nav {
    flex-direction: row !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    overflow-x: auto !important;
    padding: 8px !important;
    width: 100% !important;
  }

  #site .studio-options {
    grid-template-columns: 1fr !important;
  }

  /* --- Feature Grids & Matrix Tables --- */
  #site .feature-grid,
  #site .process-grid,
  #site .plans {
    grid-template-columns: 1fr !important;
  }

  #site .compare-matrix-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  /* --- Dashboard Cabinet Mobile Layout --- */
  #dash .dash-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #dash .dash-rail {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    z-index: 1 !important;
    background: transparent !important;
  }

  #dash .dash-rail nav,
  #dash .rail-status {
    display: none !important;
  }

  #dash .dash-layout {
    grid-template-columns: 1fr !important;
    padding: 14px 12px 60px !important;
    gap: 14px !important;
    width: 100% !important;
  }

  /* --- Performance: Disable expensive stroke animations on mobile (icons always animate) --- */
  [data-dash]:not(.zm-anim-icon):not(.cab-ico):not([class*="zm-ico-"]) {
    stroke-dasharray: none !important;
  }
}

/* 19. FAQ section layout & bottom support card positioning */
#faq .faq-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr) !important;
  gap: 60px !important;
  align-items: start !important;
}

#faq .faq-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
}

#faq .support-card,
.support-card {
  margin-top: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 900px) {
  #faq .faq-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    width: 100% !important;
  }
  #faq .section-intro {
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  #faq .faq-main {
    width: 100% !important;
  }
  #faq .support-card {
    margin-top: 16px !important;
    width: 100% !important;
  }
}

/* 20. Danger Zone - Dark Obsidian Glass & Crimson Accents */
#dash .panel.danger-zone,
.panel.danger-zone,
.danger-zone {
  background: rgba(16, 12, 14, 0.85) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1px solid rgba(239, 68, 68, 0.24) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.4), 0 0 24px rgba(239, 68, 68, 0.07) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  opacity: 1 !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#dash .panel.danger-zone:hover,
.panel.danger-zone:hover {
  background: rgba(22, 14, 16, 0.94) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 30px rgba(239, 68, 68, 0.15) !important;
  transform: translateY(-2px) translateZ(0) !important;
}

#dash .panel.danger-zone .kicker,
.danger-zone .kicker {
  color: #ef4444 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  margin-bottom: 6px !important;
}

#dash .panel.danger-zone h3,
.danger-zone h3 {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 750 !important;
  letter-spacing: -0.3px !important;
  margin: 0 0 6px 0 !important;
}

#dash .panel.danger-zone p,
.danger-zone p {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  margin: 0 0 16px 0 !important;
}

.btn-danger,
.btn-danger-ghost,
#dash .btn-danger,
#dash [data-action="deleteAccount"],
#profileOverlay [data-action="deleteAccount"] {
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  color: #ef4444 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  width: 100% !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-danger:hover,
.btn-danger-ghost:hover,
#dash .btn-danger:hover,
#dash [data-action="deleteAccount"]:hover,
#profileOverlay [data-action="deleteAccount"]:hover {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.22) !important;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.32), inset 0 1px 0 #ffffff !important;
  color: #ffffff !important;
  transform: translateY(-1.5px) translateZ(0) !important;
}

/* Red trash icon inside delete / danger buttons */
.btn-danger .btn-ico,
.btn-danger .cab-ico,
.btn-danger-ghost .btn-ico,
.btn-danger-ghost .cab-ico,
#dash .btn-danger .btn-ico,
#dash .btn-danger .cab-ico,
#dash [data-action="deleteAccount"] .btn-ico,
#dash [data-action="deleteAccount"] .cab-ico,
#dash [data-action="deleteAccount"] svg,
#dash [data-action="delChannel"] svg,
#profileOverlay [data-action="deleteAccount"] .btn-ico,
#profileOverlay [data-action="deleteAccount"] svg {
  color: #ef4444 !important;
  stroke: #ef4444 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-danger .btn-ico svg,
.btn-danger .cab-ico svg,
.btn-danger-ghost .btn-ico svg,
.btn-danger-ghost .cab-ico svg,
#dash [data-action="deleteAccount"] svg,
.zm-ico-trash {
  color: #ef4444 !important;
  stroke: #ef4444 !important;
  width: 16px !important;
  height: 16px !important;
  animation: zmIconTrash 2.4s ease-in-out infinite !important;
}

.btn-danger:hover svg,
#dash [data-action="deleteAccount"]:hover svg,
#profileOverlay [data-action="deleteAccount"]:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

@keyframes zmIconTrash {
  0%, 100% {
    transform: scale(1) rotate(0deg) translateZ(0);
  }
  25% {
    transform: scale(1.12) rotate(-5deg) translateZ(0);
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.65));
  }
  75% {
    transform: scale(1.12) rotate(5deg) translateZ(0);
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.65));
  }
}

/* ========================================================
   21. WHITE FLOATING TOPBAR PANEL + BLACK MONOCHROME BRAND
   ======================================================== */

#site .topnav,
.topnav {
  position: fixed !important;
  top: 14px !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: min(1140px, calc(100% - 32px)) !important;
  max-width: 1140px !important;
  transform: none !important;
  -webkit-transform: none !important;
  z-index: 100 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#site .topnav .nav-row,
#site .topnav .nav-row,
.topnav .nav-row,
#site .topnav.scrolled .nav-row,
.topnav.scrolled .nav-row,
.topnav.scrolled .wrap.nav-row {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  color: #000000 !important;
}

/* ABSOLUTE SITE VS CABINET ISOLATION */
html:not(.cab-open) #dash,
body:not(.cab-open) #dash {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  opacity: 0 !important;
  z-index: -9999 !important;
  width: 0 !important;
  height: 0 !important;
  left: -9999px !important;
  top: -9999px !important;
}

html.cab-open #dash,
body.cab-open #dash {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  min-height: 100vh !important;
  opacity: 1 !important;
  z-index: 80 !important;
  width: 100% !important;
  left: 0 !important;
  top: 0 !important;
}

html.cab-open #site,
html.cab-open #site *,
html.cab-open .topnav,
html.cab-open .topnav *,
html.cab-open .language-menu:not(#dash .language-menu),
html.cab-open .lang-dropdown:not(#dash .lang-dropdown),
html.cab-open .mono-cta,
html.cab-open .mobile-conversion-bar,
body.cab-open #site,
body.cab-open #site *,
body.cab-open .topnav,
body.cab-open .topnav * {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
}

/* ==========================================================================
   OBSIDIAN FROSTED GLASS SIDEBAR RAIL & TOPBAR PANEL (#dash .dash-rail)
   ========================================================================== */
#dash .dash-rail,
.dash-rail {
  background: rgba(10, 11, 15, 0.85) !important;
  -webkit-backdrop-filter: blur(32px) saturate(190%) !important;
  backdrop-filter: blur(32px) saturate(190%) !important;
  border: 1px solid var(--cab-border, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

#dash .dash-rail nav button,
.dash-rail nav button {
  color: rgba(255, 255, 255, 0.65) !important;
  font-weight: 600 !important;
}

#dash .dash-rail nav button svg,
.dash-rail nav button svg {
  stroke: rgba(255, 255, 255, 0.65) !important;
}

#dash .dash-rail nav button:hover,
.dash-rail nav button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

#dash .dash-rail nav button.active,
.dash-rail nav button.active {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

#dash .dash-rail nav button.active svg,
.dash-rail nav button.active svg {
  stroke: #ffffff !important;
}

#dash .dash-rail .rail-status,
.dash-rail .rail-status {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

#dash .dash-rail .rail-status b,
.dash-rail .rail-status b {
  color: #ffffff !important;
}

#dash .dash-rail .rail-status small,
.dash-rail .rail-status small {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ==========================================================================
   LUXURY FROSTED GLASS CABIN HEADER (#dash .dash-top) - NO BLUE TINT
   ========================================================================== */
#dash .dash-top,
.dash-top {
  background: rgba(10, 10, 12, 0.72) !important;
  -webkit-backdrop-filter: blur(36px) saturate(190%) !important;
  backdrop-filter: blur(36px) saturate(190%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
}

#dash .dash-top h1 {
  color: #ffffff !important;
  font-weight: 850 !important;
  letter-spacing: -0.3px !important;
}

#dash .dash-top small {
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 700 !important;
}

#dash .dash-top .btn-quiet,
#dash .dash-top .lang-trigger,
#dash .dash-actions .btn {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
  border-radius: 10px !important;
  font-weight: 650 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#dash .dash-top .btn-quiet:hover,
#dash .dash-top .lang-trigger:hover,
#dash .dash-actions .btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
  transform: translateY(-1.5px) translateZ(0) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 #ffffff !important;
}

#dash .dash-top .btn-quiet svg,
#dash .dash-top .lang-trigger svg,
#dash .dash-actions .btn svg {
  stroke: #ffffff !important;
}

/* ==========================================================================
   PURE WHITE PANEL BRAND & USER CARD AESTHETICS
   ========================================================================== */
#site .topnav .brand,
.topnav .brand,
#dash .brand,
#dash .dash-rail .brand,
.dash-rail .brand {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 850 !important;
  font-size: 16px !important;
  letter-spacing: -0.3px !important;
  word-spacing: 0px !important;
  text-decoration: none !important;
  border-bottom: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
}

#site .topnav .brand b,
.topnav .brand b,
#site .topnav .brand b span,
.topnav .brand b span,
#dash .brand b,
#dash .brand b span,
#dash .brand span,
#dash .dash-rail .brand b,
#dash .dash-rail .brand b span,
#dash .dash-rail .brand span,
.dash-rail .brand b,
.dash-rail .brand b span,
.dash-rail .brand span {
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: -0.3px !important;
  word-spacing: 0px !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  font-family: inherit !important;
  text-decoration: none !important;
  border-bottom: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline !important;
}

/* Hide Logo Icon strictly in dash-rail to leave clean bold typography */
#dash .dash-rail .brand-symbol,
#dash .dash-rail .zyn-mark,
#dash .dash-rail .brand .brand-symbol,
#dash .dash-rail .brand .zyn-mark,
.dash-rail .brand-symbol,
.dash-rail .zyn-mark,
.dash-rail .brand .brand-symbol,
.dash-rail .brand .zyn-mark {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#site .topnav .brand-symbol,
.topnav .brand-symbol,
#dash .brand-symbol,
#dash .zyn-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  filter: none !important;
}

#site .topnav .brand-symbol svg,
.topnav .brand-symbol svg,
#dash .brand-symbol svg,
#dash .zyn-mark svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#site .topnav .brand-symbol svg *,
.topnav .brand-symbol svg *,
#dash .brand-symbol svg *,
#dash .zyn-mark svg * {
  stroke: #000000 !important;
  color: #000000 !important;
}

#site .topnav .brand-symbol svg .zm-s,
.topnav .brand-symbol svg .zm-s,
#dash .brand-symbol svg .zm-s,
#dash .zyn-mark svg .zm-s {
  stroke: #ffffff !important;
}

/* User Card Pill on White Rail - Crisp High Contrast Typography */
#dash .dash-user,
.dash-user,
#dash .dash-topbar .dash-user,
.dash-topbar .dash-user {
  background: #f4f4f5 !important;
  border: 1px solid #e4e4e7 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  border-radius: 9999px !important;
  padding: 4px 6px 4px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 0 0 auto !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#dash .dash-user:hover,
.dash-user:hover {
  background: #e4e4e7 !important;
  border-color: #d4d4d8 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1px) translateZ(0) !important;
}

#dash .dash-user b,
.dash-user b {
  color: #09090b !important;
  -webkit-text-fill-color: #09090b !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  display: block !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.1px !important;
}

#dash .dash-user small,
.dash-user small {
  color: #71717a !important;
  -webkit-text-fill-color: #71717a !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  display: block !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#dash .dash-user .gav,
.dash-user .gav,
#dash #dashAv,
#dash .gav {
  background: #000000 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 800 !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  align-self: center !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

#dash .dash-rail,
.dash-rail {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

#dash .dash-rail .brand,
.dash-rail .brand,
#dash .dash-rail > .brand,
.dash-rail > .brand {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: none !important;
  gap: 0 !important;
  line-height: 38px !important;
}

#dash .dash-rail .brand b,
.dash-rail .brand b,
#dash .dash-rail > .brand b,
.dash-rail > .brand b {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 38px !important;
  line-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: -0.2px !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}



#siteFooter .brand b,
.footer-brand-col .brand b {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: -0.3px !important;
  word-spacing: 0px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

#siteFooter .brand-symbol svg circle,
#siteFooter .brand-symbol svg path,
.footer-brand-col .brand-symbol svg circle,
.footer-brand-col .brand-symbol svg path {
  stroke: #ffffff !important;
}

#siteFooter .brand-symbol svg path[fill],
.footer-brand-col .brand-symbol svg path[fill] {
  fill: #ffffff !important;
}

/* Nav links on White Floating Panel */
#site .topnav .nav-links a,
.topnav .nav-links a {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  opacity: 0.78 !important;
  font-weight: 650 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  transition: opacity 0.15s ease !important;
}

#site .topnav .nav-links a:hover,
.topnav .nav-links a:hover,
#site .topnav .nav-links a[aria-current="true"],
.topnav .nav-links a[aria-current="true"] {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
  font-weight: 750 !important;
}

/* Landing Topnav Language Switcher Trigger Pill (White Pill / Black Text) */
#site .topnav .lang-trigger,
#site .lang-trigger,
.topnav .lang-trigger {
  background: #f1f2f5 !important;
  color: #000000 !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}

#site .topnav .lang-trigger *,
#site .lang-trigger * {
  color: #000000 !important;
  stroke: #000000 !important;
}

#site .topnav .lang-trigger .cab-ico svg,
#site .topnav .lang-trigger .zm-ico-globe svg,
#site .lang-trigger svg {
  color: #000000 !important;
  stroke: #000000 !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#site .topnav .lang-trigger .lang-current,
#site .lang-trigger .lang-current {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#site .topnav .lang-trigger .chevron svg,
#site .lang-trigger .chevron svg {
  color: #000000 !important;
  stroke: #000000 !important;
}

/* Personal Cabinet / Dashboard Language Switcher (Pure White Letters & White Globe) */
#dash .lang-trigger,
#dash .dash-actions .lang-trigger,
#dash .dash-actions .icon-btn.lang-trigger,
.dash-actions .lang-trigger {
  background: #f4f4f5 !important;
  color: #09090b !important;
  -webkit-text-fill-color: #09090b !important;
  border: 1px solid #e4e4e7 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  border-radius: 9999px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#dash .lang-trigger:hover,
#dash .dash-actions .lang-trigger:hover,
.dash-actions .lang-trigger:hover {
  background: #e4e4e7 !important;
  border-color: #d4d4d8 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  transform: translateY(-1px) translateZ(0) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

#dash .lang-trigger *,
#dash .dash-actions .lang-trigger *,
.dash-actions .lang-trigger * {
  color: #09090b !important;
  -webkit-text-fill-color: #09090b !important;
  stroke: #09090b !important;
}

#dash .lang-trigger .lang-current,
#dash .dash-actions .lang-trigger .lang-current,
.dash-actions .lang-trigger .lang-current {
  color: #09090b !important;
  -webkit-text-fill-color: #09090b !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#dash .lang-trigger .cab-ico,
#dash .lang-trigger .zm-ico-globe,
#dash .dash-actions .lang-trigger .cab-ico,
#dash .dash-actions .lang-trigger .zm-ico-globe,
.dash-actions .lang-trigger .cab-ico,
.dash-actions .lang-trigger .zm-ico-globe {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  color: #09090b !important;
}

#dash .lang-trigger .cab-ico svg,
#dash .lang-trigger .zm-ico-globe svg,
#dash .dash-actions .lang-trigger .cab-ico svg,
#dash .dash-actions .lang-trigger .zm-ico-globe svg,
#dash .lang-trigger .chevron svg,
#dash .dash-actions .lang-trigger .chevron svg,
#dash .lang-trigger svg,
#dash .dash-actions .lang-trigger svg,
.dash-actions .lang-trigger svg {
  color: #09090b !important;
  stroke: #09090b !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#dash .lang-trigger .cab-ico svg *,
#dash .lang-trigger .zm-ico-globe svg *,
#dash .dash-actions .lang-trigger .cab-ico svg *,
#dash .dash-actions .lang-trigger .zm-ico-globe svg *,
#dash .lang-trigger svg *,
#dash .dash-actions .lang-trigger svg *,
.dash-actions .lang-trigger svg * {
  stroke: #09090b !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* User Account Pill in top bar - Clean Solid Black Pill */
#userNavPill,
.user-nav-btn,
#site #userNavPill,
#site .user-nav-btn,
.topnav #userNavPill,
.topnav .user-nav-btn,
body.is-logged-in #site #userNavPill,
html.is-logged-in #site #userNavPill,
body.is-logged-in #site .user-nav-btn,
html.is-logged-in #site .user-nav-btn {
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16) !important;
  border-radius: 9999px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 14px 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#userNavPill:hover,
.user-nav-btn:hover,
#site #userNavPill:hover,
#site .user-nav-btn:hover {
  background: #222222 !important;
  border-color: #222222 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

#userNavPill .user-nav-label,
.user-nav-btn .user-nav-label,
#site .user-nav-label {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 750 !important;
  font-size: 12.5px !important;
  letter-spacing: -0.2px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

#userNavPill .user-nav-ico,
.user-nav-btn .user-nav-ico,
#site .user-nav-ico {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#userNavPill .user-nav-ico svg,
.user-nav-btn .user-nav-ico svg,
#site .user-nav-ico svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
  fill: none !important;
  width: 15px !important;
  height: 15px !important;
  stroke-width: 2.2 !important;
  display: block !important;
}

/* Globe icon clean transparent background in UA pill */
.lang-trigger .cab-ico,
.lang-trigger .zm-ico-globe,
#site .lang-trigger .cab-ico,
#site .lang-trigger .zm-ico-globe {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 15px !important;
  height: 15px !important;
}

/* Menu Burger Button (Light Box with Crisp Black Lines - MOBILE ONLY) */
#site .topnav .nav-row .menu-button,
#site .topnav .menu-button,
#site .menu-button,
.topnav .menu-button,
.menu-button,
.btn-menu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: #f1f2f5 !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  cursor: pointer !important;
}

.menu-button i,
#site .menu-button i,
#site .topnav .menu-button i,
.topnav .menu-button i {
  background: #000000 !important;
  height: 2.5px !important;
  width: 18px !important;
  border-radius: 2px !important;
  position: absolute !important;
  left: 10px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.menu-button i:first-child,
#site .menu-button i:first-child,
#site .topnav .menu-button i:first-child,
.topnav .menu-button i:first-child {
  top: 13px !important;
}

.menu-button i:last-child,
#site .menu-button i:last-child,
#site .topnav .menu-button i:last-child,
.topnav .menu-button i:last-child {
  top: 22px !important;
}

.menu-button.open i:first-child,
#site .menu-button.open i:first-child {
  transform: translateY(4.5px) rotate(45deg) !important;
}

.menu-button.open i:last-child,
#site .menu-button.open i:last-child {
  transform: translateY(-4.5px) rotate(-45deg) !important;
}

/* Desktop vs Mobile Header Visibility Rules */
@media (min-width: 901px) {
  #site .topnav .nav-row .menu-button,
  #site .topnav .menu-button,
  #site .menu-button,
  .topnav .menu-button,
  .menu-button,
  .btn-menu,
  #site .mobile-menu,
  .mobile-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 900px) {
  #site .topnav, .topnav {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    transform: none !important;
    -webkit-transform: none !important;
    box-sizing: border-box !important;
    position: fixed !important;
    top: 8px !important;
    z-index: 1000 !important;
  }

  #site .topnav .nav-row, .topnav .nav-row {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px 0 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #ffffff !important;
    border-radius: 9999px !important;
    height: 52px !important;
    min-height: 52px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28) !important;
  }

  #site .topnav .brand, .topnav .brand {
    gap: 7px !important;
    flex-shrink: 0 !important;
  }

  #site .topnav .brand b, .topnav .brand b {
    font-size: 14px !important;
    letter-spacing: -0.2px !important;
  }

  #site .topnav .brand-symbol, .topnav .brand-symbol {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }

  #site .topnav .brand-symbol svg, .topnav .brand-symbol svg {
    width: 24px !important;
    height: 24px !important;
  }

  #site .desktop-auth,
  .desktop-auth,
  #site .nav-links,
  .nav-links {
    display: none !important;
    visibility: hidden !important;
  }

  #site .topnav .nav-row .nav-actions, .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    flex-shrink: 0 !important;
  }

  #site .lang-trigger, .topnav .lang-trigger, .lang-trigger {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  #userNavPill,
  .user-nav-btn,
  #site #userNavPill,
  #site .user-nav-btn {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  #userNavPill .user-nav-label,
  .user-nav-btn .user-nav-label {
    display: none !important;
  }

  #userNavPill .user-nav-ico,
  .user-nav-btn .user-nav-ico {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  #userNavPill .user-nav-ico svg,
  .user-nav-btn .user-nav-ico svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    margin: 0 auto !important;
  }

  #site .topnav .nav-row .menu-button,
  #site .topnav .menu-button,
  #site .menu-button,
  .topnav .menu-button,
  .menu-button,
  .btn-menu {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  #site .topnav .nav-row .menu-button i,
  .menu-button i {
    width: 16px !important;
    left: 8px !important;
    height: 2.2px !important;
  }

  #site .topnav .nav-row .menu-button i:first-child,
  .menu-button i:first-child {
    top: 12px !important;
  }

  #site .topnav .nav-row .menu-button i:last-child,
  .menu-button i:last-child {
    top: 20px !important;
  }
}

@media (max-width: 480px) {
  #site .topnav, .topnav {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    transform: none !important;
    -webkit-transform: none !important;
    top: 6px !important;
  }

  #site .topnav .nav-row, .topnav .nav-row {
    padding: 0 8px 0 10px !important;
    height: 48px !important;
    min-height: 48px !important;
  }

  #userNavPill .user-nav-label,
  .user-nav-btn .user-nav-label {
    display: none !important;
  }

  #userNavPill,
  .user-nav-btn,
  #site #userNavPill,
  #site .user-nav-btn {
    padding: 0 !important;
    margin: 0 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-sizing: border-box !important;
  }

  #userNavPill .user-nav-ico,
  .user-nav-btn .user-nav-ico {
    background: transparent !important;
    border: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #userNavPill .user-nav-ico svg,
  .user-nav-btn .user-nav-ico svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    margin: 0 auto !important;
    stroke: #ffffff !important;
    fill: none !important;
  }

  #site .lang-trigger, .topnav .lang-trigger, .lang-trigger {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 6px !important;
    gap: 3px !important;
  }

  #site .topnav .nav-row .menu-button,
  #site .topnav .menu-button,
  #site .menu-button,
  .topnav .menu-button,
  .menu-button,
  .btn-menu {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
  }

  #site .topnav .nav-row .menu-button i,
  .menu-button i {
    width: 14px !important;
    left: 8px !important;
  }

  #site .topnav .nav-row .menu-button i:first-child,
  .menu-button i:first-child {
    top: 10px !important;
  }

  #site .topnav .nav-row .menu-button i:last-child,
  .menu-button i:last-child {
    top: 18px !important;
  }

  #site .topnav .nav-row .nav-actions {
    gap: 4px !important;
  }
}

/* ========================================================
   22. HIGH-PERFORMANCE LOW-SPEC MOBILE ENGINE (60 FPS)
   ======================================================== */
/* 1. Off-screen rendering containment */
#site section:not(.hero),
#site footer {
  content-visibility: auto !important;
  contain-intrinsic-size: 1px 500px !important;
}

/* 2. Mobile GPU & Render optimization */
@media (max-width: 900px) {
  .topnav,
  .topnav .nav-row,
  .brand-symbol,
  .modal-box,
  .plan,
  .feature,
  .panel,
  .support-card,
  .auth-modal,
  .profile-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  #site .topnav .nav-row,
  .topnav .nav-row {
    background: #ffffff !important;
  }

  .panel,
  .plan,
  .feature,
  .support-card {
    background: #0c0c0c !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  }

  .mono-orbit::before,
  .mono-orbit::after,
  .orbit-stage::before,
  .orbit-stage::after,
  .zm-arc {
    animation: none !important;
  }

  * {
    -webkit-tap-highlight-color: transparent !important;
  }

  html, body {
    touch-action: pan-y !important;
    scroll-behavior: smooth !important;
  }
}

/* 3. Respect user reduced motion — transitions only, icon animations ALWAYS run */
@media (prefers-reduced-motion: reduce) {
  *:not(.zm-anim-icon):not(.cab-ico):not([class*="zm-ico-"]):not(.zm-anim-icon *):not(.cab-ico *),
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================================
   23. FULL-WIDTH BUTTON STRETCHING — NO EMPTY GAPS
   ======================================================== */

/* Hero CTA buttons: first 2 buttons 50%/50% side-by-side, 3rd button 100% full width */
#site .mono-actions,
.mono-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 28px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#site .mono-actions .btn,
#site .mono-actions a.btn,
.mono-actions .btn,
.mono-actions a.btn {
  flex: 1 1 calc(50% - 6px) !important;
  min-width: 150px !important;
  min-height: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Third button (Посмотреть продукт) spans full width */
#site .mono-actions .btn-ghost,
#site .mono-actions .hero-product-btn,
#site .mono-actions a[href="#studio"],
.mono-actions .btn-ghost,
.mono-actions .hero-product-btn,
.mono-actions a[href="#studio"] {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
}

/* Final CTA section button: full width */
#site .final-cta .btn,
.final-cta .btn {
  width: 100% !important;
  max-width: 520px !important;
  min-height: 54px !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Gate modal download buttons: stretch evenly */
.gate-downloads,
#site .gate-downloads {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.gate-downloads .btn,
#site .gate-downloads .btn {
  flex: 1 1 50% !important;
  min-height: 46px !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Mobile auth block buttons */
.mobile-auth-block,
#site .mobile-auth-block {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mobile-auth-block .btn,
#site .mobile-auth-block .btn {
  flex: 1 1 50% !important;
  min-height: 46px !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Sticky bottom CTA bar buttons */
.mono-cta,
#site .mono-cta,
[data-mono-cta] {
  display: flex !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

.mono-cta .btn,
#site .mono-cta .btn,
[data-mono-cta] .btn {
  flex: 1 1 50% !important;
  min-height: 44px !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Pricing plan buttons */
#site .plan .btn,
.plan .btn {
  width: 100% !important;
  min-height: 48px !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Download section buttons */
#site #download .btn,
#site .download-section .btn,
#download .btn {
  flex: 1 1 50% !important;
  min-height: 48px !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Mobile screen optimization (< 600px) */
@media (max-width: 600px) {
  #site .mono-actions,
  .mono-actions {
    flex-direction: column !important;
  }

  #site .mono-actions .btn,
  #site .mono-actions a.btn,
  .mono-actions .btn,
  .mono-actions a.btn {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-height: 50px !important;
  }

  .gate-downloads,
  #site .gate-downloads {
    flex-direction: column !important;
  }

  .gate-downloads .btn,
  #site .gate-downloads .btn {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .mobile-auth-block,
  #site .mobile-auth-block {
    flex-direction: column !important;
  }

  .mobile-auth-block .btn,
  #site .mobile-auth-block .btn {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
}

/* Zero Underline Enforcer */
#site a,
#site a *,
#site a:hover,
#site a:hover *,
#site a:focus,
#site a:focus *,
#site a:active,
#site a:active *,
#site a:visited,
#site a:visited *,
a, a *, a:hover, a:hover *, a:focus, a:focus *, a:active, a:active *, a:visited, a:visited *,
.support-card,
.support-card *,
.support-card b,
.support-card small,
#site .support-card,
#site .support-card *,
#site .support-card b,
#site .support-card small,
#siteFooter,
#siteFooter *,
#site #siteFooter a,
#site #siteFooter a *,
.footer-grid a,
.footer-grid a *,
.footer-nav-col a,
.footer-nav-col a *,
.footer-brand-col a,
.footer-brand-col a *,
.to-top,
.to-top *,
#site .mono-actions a,
#site .mono-actions a *,
.mono-actions a,
.mono-actions a *,
#site .btn,
#site .btn *,
.btn,
.btn * {
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Systems Live Status Badge in Generation Studio */
.studio-intro-side {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  text-align: right !important;
}

.systems-live-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  border-radius: 9999px !important;
  padding: 6px 14px 6px 11px !important;
  margin-bottom: 12px !important;
  cursor: default !important;
  user-select: none !important;
  transition: all 0.2s ease !important;
}

.systems-live-badge:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* Studio Nav Bar and Right-Aligned Live Status Badge */
#site .studio-nav,
.studio-nav {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#site .studio-nav-foot,
.studio-nav-foot,
.studio-nav .studio-nav-foot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: 8px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 6px 14px 6px 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  cursor: default !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#site .studio-nav-foot span,
.studio-nav-foot span,
.studio-nav-foot [data-ui="all_systems"] {
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#site .studio-nav-foot i,
.studio-nav-foot i {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 8px #ffffff !important;
  animation: zm-live-green-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
  flex-shrink: 0 !important;
}

@media (max-width: 820px) {
  #site .studio-nav,
  .studio-nav {
    flex-direction: row !important;
    align-items: center !important;
    overflow-x: auto !important;
    padding: 8px 12px !important;
  }

  #site .studio-nav-foot,
  .studio-nav-foot,
  .studio-nav .studio-nav-foot {
    display: inline-flex !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
  }
}

/* ==========================================================================
   GLOBAL 100% SYNCHRONIZED MASTER ICON ANIMATION TIMELINE — 60FPS OPTIMIZED
   Forces every icon on mobile & desktop to animate on the exact same loop.
   Zero out-of-sync delays, simultaneous stroke drawing and erasing.
   GPU-accelerated without heavy drop-shadow filter CPU bottlenecks.
   ========================================================================== */

@keyframes ico-wipe {
  0% {
    stroke-dashoffset: 130;
    opacity: 0.15;
  }
  30%, 65% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -130;
    opacity: 0.15;
  }
}

@keyframes ico-bob {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -3px, 0);
  }
}

/* Master Selector Covering All SVG Animated Strokes Across the DOM */
#site .zm-anim-icon svg path,
#site .zm-anim-icon svg line,
#site .zm-anim-icon svg polyline,
#site .zm-anim-icon svg polygon,
#site .zm-anim-icon svg rect,
#site .mono-icon svg path,
#site .mono-icon svg line,
#site .mono-icon svg polyline,
#site .mono-icon svg polygon,
#site .mono-icon svg rect,
#site .mono-icon svg > *,
#site .feature-icon svg > *,
#site .feat-card .ico svg > *,
#site .process-card svg > *,
#site .step-icon svg > *,
#site .plan-icon svg > *,
#site .cab-ico svg > *,
#site .support-icon svg > *,
#site .upload-icon svg > *,
#site .cta-icon svg > *,
#site .trust-icon svg > *,
#site .mp-ic svg > *,
#site .ch-ic svg > *,
#site .dl-ic svg > *,
#site .studio-nav button svg > *,
#site .dash-rail nav button svg > * {
  stroke-dasharray: 130 !important;
  animation: ico-wipe 4.2s cubic-bezier(0.6, 0, 0.4, 1) infinite !important;
  animation-delay: 0s !important;
  animation-duration: 4.2s !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  filter: none !important;
}

/* Master Container Floating Synchronization */
#site .zm-anim-icon,
#site .mono-icon,
#site .feature-icon,
#site .feat-card .ico,
#site .process-card .mono-icon,
#site .step-icon,
#site .plan-icon,
#site .cab-ico,
#site .support-icon,
#site .upload-icon,
#site .trust-icon,
#site .mp-ic,
#site .ch-ic,
#site .dl-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  animation: ico-bob 4.2s ease-in-out infinite !important;
  animation-delay: 0s !important;
  animation-duration: 4.2s !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
}

/* ==========================================================================
   EXTREME 60FPS MOBILE PERFORMANCE ENGINE
   1. content-visibility skips rendering/animations on off-screen sections.
   2. Hardware GPU isolation prevents redraw spikes.
   3. Eliminates multi-layer Gaussian blur on low-end mobile devices.
   ========================================================================== */

#features,
#process,
#plans,
#faq,
#support,
#siteFooter,
.product-section,
.compare-section {
  content-visibility: auto !important;
  contain-intrinsic-size: 1px 700px !important;
}

/* Pause animations when tab/screen is inactive */
.page-hidden *,
.page-hidden *::before,
.page-hidden *::after {
  animation-play-state: paused !important;
}

@media (max-width: 768px) {
  /* Lightweight solid/opaque backgrounds instead of heavy backdrop-filter */
  #site .hero-typewriter,
  #site .hero-proof,
  #site .orbit-badge,
  #site .orbit-console,
  #site .command-card,
  #site .metrics,
  #site .platform-strip,
  #site .studio-frame {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(9, 13, 23, 0.96) !important;
  }

  /* Disable heavy multi-ring 3D mesh rotations on mobile */
  #site .orbit-media,
  #site .orbit-ring,
  #site .orbit-stage::before {
    animation: none !important;
    filter: none !important;
  }
}

/* ==========================================================================
   ULTRA-LUXURY DESIGN & INTERFACE POLISH SUITE
   - Fluid typography with crisp subpixel antialiasing
   - Tactile button press feedback & micro-elevations
   - Ambient squircle glass card reflections
   - Pulsing emerald telemetry badges
   - Premium dashboard KPI stats & progress shimmer
   ========================================================================== */

/* 1. Global Font Smoothing & Crisp Contrast */
body,
#site,
#dash {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* 2. Tactile Button Feedback */
#site .btn,
#dash .btn,
.btn-grad,
.btn-ghost,
.btn-quiet,
.lang-trigger,
.icon-btn {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s, background-color 0.2s, border-color 0.2s !important;
  will-change: transform !important;
}

#site .btn:active,
#dash .btn:active,
.btn-grad:active,
.btn-ghost:active,
.btn-quiet:active,
.icon-btn:active {
  transform: scale(0.975) !important;
}

/* 3. Luxury Card Hover Elevations & Ambient Borders */
#site .feature,
#site .feat-card,
#site .process-card,
#site .plan,
#dash .panel,
#dash .lic-card,
#dash .ch-item,
#dash .mini-plan {
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.26s, box-shadow 0.26s !important;
  will-change: transform, border-color, box-shadow !important;
}

#site .feature:hover,
#site .feat-card:hover,
#site .process-card:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 255, 255, 0.03) !important;
  transform: translateY(-2px) !important;
}

#site .plan:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 20px 48px -14px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 255, 255, 0.04) !important;
  transform: translateY(-3px) !important;
}

/* 4. Pulsing Monochrome Telemetry Indicator */
.online-dot,
.status-indicator-live,
.pulse-emerald {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7) !important;
  animation: pulse-emerald-glow 2.2s infinite cubic-bezier(0.66, 0, 0, 1) !important;
}

@keyframes pulse-emerald-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* 5. Dashboard / Cabinet Progress Shimmer */
#dash progress {
  border-radius: 9999px !important;
  overflow: hidden !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

#dash progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 9999px !important;
}

#dash progress::-webkit-progress-value {
  background: linear-gradient(90deg, #ffffff 0%, #a3a3a0 100%) !important;
  border-radius: 9999px !important;
}

#dash progress::-moz-progress-bar {
  background: linear-gradient(90deg, #ffffff 0%, #a3a3a0 100%) !important;
  border-radius: 9999px !important;
}

/* 6. Smooth Scroll Behavior & Touch Optimization */
html {
  scroll-behavior: smooth !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ==========================================================================
   HEADER AUTH BUTTON ICONS & 100% SYNCHRONIZED VECTOR ANIMATION
   ========================================================================== */
#site .desktop-auth,
.desktop-auth,
#site .mobile-auth-block .btn,
.mobile-auth-block .btn,
#site .mono-cta .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  line-height: 1 !important;
}

#site .desktop-auth .mono-icon,
.desktop-auth .mono-icon,
#site .mobile-auth-block .btn .mono-icon,
.mobile-auth-block .btn .mono-icon,
#site .mono-cta .btn .mono-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

#site .desktop-auth .mono-icon svg,
.desktop-auth .mono-icon svg,
#site .mobile-auth-block .btn .mono-icon svg,
.mobile-auth-block .btn .mono-icon svg,
#site .mono-cta .btn .mono-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  stroke-width: 2.2 !important;
}

/* Light button (Войти): clean black vector stroke */
#site .btn-quiet .mono-icon svg,
.btn-quiet .mono-icon svg,
#site .btn-quiet .mono-icon svg > *,
.btn-quiet .mono-icon svg > * {
  stroke: #000000 !important;
  color: #000000 !important;
}

/* Dark button (Создать кабинет): clean white vector stroke */
#site .btn-primary .mono-icon svg,
.btn-primary .mono-icon svg,
#site .btn-primary .mono-icon svg > *,
.btn-primary .mono-icon svg > *,
#site .btn-grad .mono-icon svg,
.btn-grad .mono-icon svg,
#site .btn-grad .mono-icon svg > *,
.btn-grad .mono-icon svg > * {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* ==========================================================================
   HERO CTA BUTTON ICONS & 100% SYNCHRONIZED VECTOR ANIMATION
   ========================================================================== */
#site .mono-actions .btn,
.mono-actions .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#site .mono-actions .btn .mono-icon,
.mono-actions .btn .mono-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

#site .mono-actions .btn .mono-icon svg,
.mono-actions .btn .mono-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  stroke-width: 2.2 !important;
}

/* Light buttons in hero (Начать бесплатно & Посмотреть продукт): clean black vector stroke */
#site .mono-actions .btn-primary .mono-icon svg,
.mono-actions .btn-primary .mono-icon svg,
#site .mono-actions .btn-primary .mono-icon svg > *,
.mono-actions .btn-primary .mono-icon svg > *,
#site .mono-actions .btn-ghost .mono-icon svg,
.mono-actions .btn-ghost .mono-icon svg,
#site .mono-actions .btn-ghost .mono-icon svg > *,
.mono-actions .btn-ghost .mono-icon svg > *,
#site .mono-actions .hero-product-btn .mono-icon svg,
.mono-actions .hero-product-btn .mono-icon svg,
#site .mono-actions .hero-product-btn .mono-icon svg > *,
.mono-actions .hero-product-btn .mono-icon svg > * {
  stroke: #000000 !important;
  color: #000000 !important;
}

/* Dark button in hero (Скачать .exe / .apk): clean white vector stroke */
#site .mono-actions .btn-quiet .mono-icon svg,
.mono-actions .btn-quiet .mono-icon svg,
#site .mono-actions .btn-quiet .mono-icon svg > *,
.mono-actions .btn-quiet .mono-icon svg > * {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* ==========================================================================
   PRICING & ROI CTA BUTTON ICONS & 100% SYNCHRONIZED VECTOR ANIMATION
   ========================================================================== */
#site .plans .btn,
.plans .btn,
#site .roi-calc-cta .btn,
.roi-calc-cta .btn,
#site .final-cta .btn,
.final-cta .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#site .plans .btn .mono-icon,
.plans .btn .mono-icon,
#site .roi-calc-cta .btn .mono-icon,
.roi-calc-cta .btn .mono-icon,
#site .final-cta .btn .mono-icon,
.final-cta .btn .mono-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

#site .plans .btn .mono-icon svg,
.plans .btn .mono-icon svg,
#site .roi-calc-cta .btn .mono-icon svg,
.roi-calc-cta .btn .mono-icon svg,
#site .final-cta .btn .mono-icon svg,
.final-cta .btn .mono-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  stroke-width: 2.2 !important;
}

#site .plans .btn-ghost .mono-icon svg,
.plans .btn-ghost .mono-icon svg,
#site .plans .btn-ghost .mono-icon svg > *,
.plans .btn-ghost .mono-icon svg > *,
#site .roi-calc-cta .btn-primary .mono-icon svg,
.roi-calc-cta .btn-primary .mono-icon svg,
#site .roi-calc-cta .btn-primary .mono-icon svg > *,
.roi-calc-cta .btn-primary .mono-icon svg > *,
#site .final-cta .btn-primary .mono-icon svg,
.final-cta .btn-primary .mono-icon svg,
#site .final-cta .btn-primary .mono-icon svg > *,
.final-cta .btn-primary .mono-icon svg > * {
  stroke: #000000 !important;
  color: #000000 !important;
}

#site .plans .btn-grad .mono-icon svg,
.plans .btn-grad .mono-icon svg,
#site .plans .btn-grad .mono-icon svg > *,
.plans .btn-grad .mono-icon svg > * {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* ==========================================================================
   GLOBAL LUXURY OBSIDIAN FROSTED GLASS & SPECULAR EDGE HIGHLIGHT (NO BLUE)
   ========================================================================== */
#dash .panel,
.cab-card,
.owner-console,
#ownerConsole,
#dash .dash-side,
#dash .dash-content,
#dash .studio-card,
#dash .video-item,
#dash .lic-item,
#dash .job-row,
#dash .dash-box,
#site .plan-card,
#site .plan,
#site .pricing-card,
#site .comp-card,
#site .compare-card,
#site .comp-table-wrap,
#site .faq-item,
#site .step-card,
#site .hero-product-card,
#site .interactive-hero-card,
#site .roi-calc-box,
#site .testimonial-card,
#site .feature-card,
#site .tech-card,
#site .format-card {
  background: rgba(12, 12, 15, 0.72) !important;
  -webkit-backdrop-filter: blur(36px) saturate(190%) !important;
  backdrop-filter: blur(36px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
  border-radius: 16px !important;
}

#site .plan-card:hover,
#site .pricing-card:hover,
#site .feature-card:hover,
#site .step-card:hover,
#dash .panel:hover {
  background: rgba(18, 18, 22, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 30px rgba(16, 185, 129, 0.12) !important;
  transform: translateY(-2px) translateZ(0) !important;
}

/* Glass Form Rows, License Cards & Download Buttons */
.gift-form,
.gift-row,
.ref-box,
#dash .ch-item,
#dash .lic-card,
.lic-card {
  background: rgba(14, 14, 18, 0.78) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
  border-radius: 14px !important;
}

/* Download Cards Dark Obsidian Glass */
#dash .dl-row,
.dl-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

#dash .dl-btn,
.dl-btn,
button.dl-btn,
a.dl-btn {
  background: rgba(14, 14, 18, 0.88) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
  border-radius: 14px !important;
  padding: 16px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
}

#dash .dl-btn:hover,
.dl-btn:hover {
  background: rgba(22, 22, 28, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 #ffffff, 0 0 20px rgba(16, 185, 129, 0.22) !important;
  transform: translateY(-2.5px) translateZ(0) !important;
}

#dash .dl-btn .dl-ic,
.dl-btn .dl-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  margin-bottom: 8px !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

#dash .dl-btn .dl-ic svg,
.dl-btn .dl-ic svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #ffffff !important;
  display: block !important;
  overflow: visible !important;
}

#dash .dl-btn .dl-ic svg path,
#dash .dl-btn .dl-ic svg rect,
#dash .dl-btn .dl-ic svg line,
#dash .dl-btn .dl-ic svg polyline,
.dl-btn .dl-ic svg path,
.dl-btn .dl-ic svg rect,
.dl-btn .dl-ic svg line,
.dl-btn .dl-ic svg polyline {
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 1.8px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-dasharray: 60 15 !important;
  animation: zmStrokeDraw 2.4s linear infinite !important;
  animation-play-state: running !important;
  will-change: stroke-dashoffset !important;
}

#dash .dl-btn .dl-title,
#dash .dl-btn b,
.dl-btn b {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  margin-top: 4px !important;
  letter-spacing: -0.2px !important;
  display: block !important;
}

#dash .dl-btn .dl-sub,
#dash .dl-btn span.dl-sub,
.dl-btn .dl-sub {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  margin-top: 3px !important;
  display: block !important;
}

/* Luxury Glass on Buttons */
.btn-quiet,
.btn-ghost,
.btn-secondary,
.lang-trigger,
.icon-btn,
#dash .btn-quiet,
.gift-row .btn,
.ref-box .btn,
#site .btn-ghost,
#site .btn-quiet,
#site .lang-trigger {
  background: rgba(255, 255, 255, 0.07) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
  border-radius: 10px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-quiet:hover,
.btn-ghost:hover,
.lang-trigger:hover,
.icon-btn:hover,
#dash .btn-quiet:hover,
.gift-row .btn:hover,
.ref-box .btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45), inset 0 1px 0 #ffffff !important;
  transform: translateY(-1.5px) translateZ(0) !important;
}

/* Neutral Dark Glass Inputs & Custom Inset Dropdown Chevron Arrow */
#dash select,
select,
.modal select,
.ch-form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: rgba(14, 14, 18, 0.82) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 14px 14px !important;
  padding: 10px 42px 10px 14px !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: #f8fafc !important;
  cursor: pointer !important;
}

#dash input,
#dash textarea {
  background-color: rgba(14, 14, 18, 0.75) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: #f8fafc !important;
  padding: 10px 14px !important;
}

#dash select:focus,
#dash input:focus,
#dash textarea:focus,
select:focus,
input:focus,
textarea:focus {
  background-color: rgba(20, 20, 26, 0.92) !important;
  border-color: rgba(16, 185, 129, 0.6) !important;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Core Studio Run Button */
#coreRun,
#dash #coreRun,
button#coreRun {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  min-height: 46px !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.35) !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#coreRun:hover,
#dash #coreRun:hover {
  background: #ffffff !important;
  box-shadow: 0 8px 28px rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-1.5px) translateZ(0) !important;
}

#coreRun svg,
#dash #coreRun svg {
  stroke: #000000 !important;
  color: #000000 !important;
  width: 15px !important;
  height: 15px !important;
  display: inline-block !important;
  animation: zmIconPulse 2.2s ease-in-out infinite !important;
}

/* ==========================================================================
   UNIVERSAL MICRO-ANIMATION & SYNCHRONIZED VECTOR ICON SYSTEM
   ========================================================================== */
svg.zm-anim-icon,
.cab-ico svg,
.mono-icon svg,
.btn-ico svg,
.brand-symbol svg,
.mp-ic svg,
.ch-ic svg,
.dl-ic svg,
.search-ic svg,
.dash-actions svg,
.preset-pill svg,
.style-pill svg,
.gift-row svg,
.danger-zone svg,
.status-pill svg,
.lang-trigger svg,
.btn-sm svg,
.btn svg,
#dash svg,
#site .feature-icon svg,
#site .step-num svg,
#site .plan-card svg,
#site .hero-showcase svg {
  stroke-width: 2px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
  shape-rendering: geometricPrecision !important;
  transform-origin: center center !important;
  transform: translateZ(0);
  will-change: transform;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
}

/* Clean hover dynamic stroke boost */
button:hover .cab-ico svg,
button:hover .mono-icon svg,
button:hover .btn-ico svg,
button:hover .zm-anim-icon,
.btn:hover .cab-ico svg,
.btn:hover .mono-icon svg,
.btn:hover .btn-ico svg,
.btn:hover .zm-anim-icon,
.plan-card:hover .zm-anim-icon,
.feature-card:hover .zm-anim-icon {
  transform: none !important;
  filter: none !important;
}

@keyframes zmIconCrown {
  0%, 100% {
    transform: scale(1) rotate(0deg) translateZ(0);
  }
  30% {
    transform: scale(1.22) rotate(-10deg) translateZ(0);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
  }
  70% {
    transform: scale(1.22) rotate(10deg) translateZ(0);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
  }
}

/* 6. Synchronized Diamond Radiance (2.4s) */
.zm-ico-diamond,
.zm-anim-diamond,
.cab-ico[data-cab-icon="partner"] svg,
.mp-ic .zm-ico-diamond {
  animation: zmIconDiamond 2.4s ease-in-out infinite !important;
}

@keyframes zmIconDiamond {
  0%, 100% {
    transform: scale(1) translateZ(0);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.15));
  }
  50% {
    transform: scale(1.24) translateZ(0);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
  }
}

/* 7. Synchronized Rocket Boost (2.4s) */
.zm-ico-rocket,
.zm-anim-rocket,
.cab-ico[data-cab-icon="start"] svg,
.mp-ic .zm-ico-rocket {
  animation: zmIconRocket 2.4s ease-in-out infinite !important;
}

@keyframes zmIconRocket {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1) translateZ(0);
  }
  50% {
    transform: translate(3px, -4px) rotate(8deg) scale(1.2) translateZ(0);
    filter: drop-shadow(-2px 3px 6px rgba(255, 255, 255, 0.3));
  }
}

/* 8. Synchronized Star Twinkle (2.4s) */
.zm-ico-star,
.zm-anim-star,
.cab-ico[data-cab-icon="pro"] svg,
.mp-ic .zm-ico-star {
  animation: zmIconStar 2.4s ease-in-out infinite !important;
}

@keyframes zmIconStar {
  0%, 100% {
    transform: scale(1) rotate(0deg) translateZ(0);
  }
  50% {
    transform: scale(1.24) rotate(32deg) translateZ(0);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
  }
}

/* 9. Dynamic Shopping Cart Animation (2.4s Synchronized Cycle) */
.zm-ico-cart,
.zm-anim-cart,
.btn-sm .cab-ico svg,
[data-action="buy"] .cab-ico svg,
[data-action="buy"] svg,
.mini-plan [data-action="buy"] svg {
  animation: zmIconCart 2.4s ease-in-out infinite !important;
  transform-origin: center bottom !important;
  display: inline-block !important;
  stroke: #000000 !important;
  color: #000000 !important;
}

@keyframes zmIconCart {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1) translateZ(0);
  }
  20% {
    transform: translate(-2px, -3px) rotate(-8deg) scale(1.15) translateZ(0);
  }
  45% {
    transform: translate(3px, 0px) rotate(7deg) scale(1.18) translateZ(0);
  }
  70% {
    transform: translate(0px, -3px) rotate(-3deg) scale(1.12) translateZ(0);
  }
}

/* ==========================================================================
   MINI-PLAN ICONS & BADGES: EXACT LANDING PAGE VECTOR DRAWING & STYLING
   ========================================================================== */
.mini-plan .mp-ic,
#dash .mini-plan .mp-ic,
#dash .mp-ic {
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mini-plan:hover .mp-ic,
#dash .mini-plan:hover .mp-ic {
  border-color: rgba(255, 255, 255, 0.42) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 #ffffff !important;
}

.mini-plan .mp-ic svg,
#dash .mini-plan .mp-ic svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
  stroke-width: 2px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Quick Prompt Topic Chips & Subtitle Style Pills Animations & Obsidian Glass */
.preset-selector-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 12px 0 16px 0 !important;
  width: 100% !important;
}

.preset-pills,
.quick-prompt-chips,
.hero-style-pills {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 10px !important;
  margin: 6px 0 12px 0 !important;
  width: 100% !important;
}

.preset-pill,
.style-pill,
.quick-prompt-chips button {
  background: rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  height: 32px !important;
  min-height: 32px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: #ffffff !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.preset-pill:hover,
.style-pill:hover,
.quick-prompt-chips button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px) translateZ(0) !important;
}

.preset-pill.active,
.style-pill.active {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.4) !important;
  font-weight: 700 !important;
}

.preset-pill .btn-ico,
.style-pill .btn-ico,
.quick-prompt-chips .btn-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.preset-pill svg,
.style-pill svg,
.quick-prompt-chips svg,
.preset-pills svg {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  display: block !important;
  overflow: visible !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.8px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.preset-pill svg path,
.preset-pill svg polygon,
.preset-pill svg circle,
.preset-pill svg line,
.preset-pill svg polyline,
.style-pill svg path,
.style-pill svg polygon,
.style-pill svg circle,
.quick-prompt-chips svg path,
.quick-prompt-chips svg polygon,
.quick-prompt-chips svg circle,
.quick-prompt-chips svg polyline,
.preset-pills svg path,
.preset-pills svg polygon,
.preset-pills svg circle {
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.8px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-dasharray: 50 12 !important;
  animation: zmStrokeDraw 2.4s linear infinite !important;
  animation-play-state: running !important;
  will-change: stroke-dashoffset !important;
}

.preset-pill.active svg path,
.preset-pill.active svg polygon,
.preset-pill.active svg circle,
.preset-pill.active svg polyline,
.style-pill.active svg path,
.style-pill.active svg polygon {
  stroke: #000000 !important;
}

.preset-pill:not(.active) svg path,
.preset-pill:not(.active) svg polygon,
.preset-pill:not(.active) svg circle,
.preset-pill:not(.active) svg polyline {
  stroke: #ffffff !important;
}

.zm-ico-yt {
  animation: zmIconFloat 3s ease-in-out infinite !important;
}
.zm-ico-tt {
  animation: zmIconPulse 2.2s ease-in-out infinite !important;
}
.zm-ico-ig {
  animation: zmIconTwinkle 3.4s ease-in-out infinite !important;
}
.zm-ico-tg {
  animation: zmIconGlide 3.2s ease-in-out infinite !important;
}

/* 10. Checkmark Pop */
.comp-check,
.ck,
.cab-ico[data-cab-icon="check"] svg {
  animation: zmCheckPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes zmCheckPop {
  0% {
    transform: scale(0.6) translateZ(0);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
}

/* ==========================================================================
   11. UNIVERSAL AMBIENT ICON ANIMATION (EVERY SINGLE SVG ON SITE & CABINET)
   ========================================================================== */
svg,
#site svg,
#dash svg,
.modal svg,
.overlay svg,
.mono-icon svg,
.cab-ico svg,
.btn-ico svg,
.ch-ic svg,
.mp-ic svg,
.dl-ic svg,
.brand-symbol svg,
.preset-pill svg,
.style-pill svg,
.quick-prompt-chips svg,
.dash-actions svg,
.stat-card svg,
.job-item svg,
.status-pill svg,
.lang-trigger svg,
.btn svg,
button svg {
  transform: translateZ(0) !important;
  will-change: transform !important;
  animation-play-state: running !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

svg:not(.zm-anim-icon):not([class*="zm-ico-"]):not([class*="zm-anim-"]),
#site .feature svg:not(.zm-anim-icon),
#site .step svg:not(.zm-anim-icon),
#site .plan-card svg:not(.zm-anim-icon),
#site .pricing-card svg:not(.zm-anim-icon),
#site .roi-calc-box svg:not(.zm-anim-icon),
#site .faq-item svg:not(.zm-anim-icon),
#site .hero-copy svg:not(.zm-anim-icon),
#dash .panel svg:not(.zm-anim-icon),
#dash .ch-item svg:not(.zm-anim-icon),
#dash .dash-actions svg:not(.zm-anim-icon),
#dash .owner-console svg:not(.zm-anim-icon),
#dash .gift-form svg:not(.zm-anim-icon) {
  animation: zmAmbientIconBreath 2.4s ease-in-out infinite alternate !important;
}

@keyframes zmAmbientIconBreath {
  0% {
    transform: translateY(0) scale(1) translateZ(0);
    opacity: 0.92;
  }
  100% {
    transform: translateY(-2.5px) scale(1.08) translateZ(0);
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4));
  }
}

/* All label icons across cabinet and owner console */
#dash label .cab-ico,
#dash label .zm-anim-icon,
#dash label svg,
.owner-console label .cab-ico,
.owner-console label svg,
.gift-form label .cab-ico,
.gift-form label svg,
.panel label .cab-ico,
.panel label svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  transform-origin: center center !important;
  animation-play-state: running !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   GIFT ROWS & ADMIN LICENSE ACTIONS - DARK GLASS & CONTINUOUS ANIMATION
   ========================================================================== */
.gift-row {
  background: rgba(14, 14, 18, 0.85) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gift-row:hover {
  background: rgba(20, 20, 26, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-1.5px) translateZ(0) !important;
}

.gift-row .btn-quiet {
  background: rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  color: #f1f5f9 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gift-row .btn-quiet:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 #ffffff !important;
  transform: translateY(-1px) translateZ(0) !important;
  color: #ffffff !important;
}

.gift-row .btn-quiet[data-revoke] {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

.gift-row .btn-quiet[data-revoke]:hover {
  color: #ffffff !important;
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35), inset 0 1px 0 #ffffff !important;
}

.gift-row [data-copy] svg {
  animation: zmIconTwinkle 2.8s ease-in-out infinite !important;
}

.gift-row [data-bind-mail] svg {
  animation: zmIconTwinkle 2.6s ease-in-out infinite !important;
}

.gift-row [data-reset-dev] svg {
  animation: zmIconPulse 2.2s ease-in-out infinite !important;
}

.gift-row [data-revoke] svg {
  animation: zmIconPulse 2s ease-in-out infinite !important;
}

.gift-row span svg {
  animation: zmIconPulse 2.4s ease-in-out infinite !important;
}

/* ==========================================================================
   DASHBOARD TOP ACTIONS - CRISP CONTRAST PILLS ON WHITE TOPBAR
   ========================================================================== */
#dash .dash-actions .btn-quiet,
#dash .dash-actions .lang-trigger,
#dash .dash-actions [data-action="logout"],
#dash .dash-actions [data-action="showSite"],
.dash-actions .btn-quiet,
.dash-actions .lang-trigger {
  background: #f4f4f5 !important;
  border: 1px solid #e4e4e7 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  border-radius: 9999px !important;
  color: #09090b !important;
  -webkit-text-fill-color: #09090b !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  padding: 7px 14px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#dash .dash-actions .btn-quiet:hover,
#dash .dash-actions .lang-trigger:hover,
#dash .dash-actions [data-action="logout"]:hover,
#dash .dash-actions [data-action="showSite"]:hover,
.dash-actions .btn-quiet:hover,
.dash-actions .lang-trigger:hover {
  background: #e4e4e7 !important;
  border-color: #d4d4d8 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1.5px) translateZ(0) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

#dash .dash-actions svg,
.dash-actions svg,
#dash .dash-actions svg *,
.dash-actions svg * {
  display: inline-block !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
  color: #09090b !important;
  stroke: #09090b !important;
}

#dash .dash-actions [data-action="showSite"] svg {
  animation: zmIconGlide 2.4s ease-in-out infinite !important;
}

#dash .dash-actions .lang-trigger .zm-ico-pulse,
#dash .dash-actions .lang-trigger .cab-ico svg {
  animation: zmIconPulse 2.4s ease-in-out infinite !important;
}

#dash .dash-actions [data-action="logout"] svg {
  animation: zmIconGlide 2.4s ease-in-out infinite !important;
}

/* ==========================================================================
   UNIVERSAL WHITE CONTOUR FOR ALL BUTTONS (EXCEPT RED TRASH/DELETE)
   ========================================================================== */
button,
.btn,
.btn-primary,
.btn-secondary,
.btn-quiet,
.btn-ghost,
.btn-outline,
.btn-grad,
.btn-sm,
.button,
.copy,
.dl-btn,
.icon-btn,
.menu-button,
.preset-pill,
.style-pill,
.per-tab,
.quick-prompt-chips button,
.dash-actions button,
.modal button:not([data-action="deleteAccount"]):not([data-action="delChannel"]):not(.btn-danger):not(.btn-danger-ghost),
#dash button:not([data-action="deleteAccount"]):not([data-action="delChannel"]):not(.btn-danger):not(.btn-danger-ghost),
#site button {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  transition: border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease !important;
}

button:hover:not([data-action="deleteAccount"]):not([data-action="delChannel"]):not(.btn-danger):not(.btn-danger-ghost),
.btn:hover:not([data-action="deleteAccount"]):not([data-action="delChannel"]):not(.btn-danger):not(.btn-danger-ghost),
.btn-primary:hover,
.btn-secondary:hover,
.btn-quiet:hover:not([data-action="deleteAccount"]):not([data-action="delChannel"]):not(.btn-danger):not(.btn-danger-ghost),
.btn-ghost:hover,
.btn-outline:hover,
.btn-grad:hover,
.btn-sm:hover,
.button:hover,
.copy:hover,
.dl-btn:hover,
.icon-btn:hover,
.menu-button:hover,
.preset-pill:hover,
.style-pill:hover,
.per-tab:hover,
.quick-prompt-chips button:hover,
.dash-actions button:hover,
#dash button:hover:not([data-action="deleteAccount"]):not([data-action="delChannel"]):not(.btn-danger):not(.btn-danger-ghost),
#site button:hover {
  border-color: #ffffff !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.25), inset 0 1px 0 #ffffff !important;
}

/* Red Contour ONLY for Danger / Delete Account / Delete Channel & Trash Icons */
.btn-danger,
.btn-danger-ghost,
[data-action="deleteAccount"],
[data-action="delChannel"],
#dash .btn-danger,
#dash [data-action="deleteAccount"],
#dash [data-action="delChannel"],
#profileOverlay [data-action="deleteAccount"] {
  border: 1px solid rgba(239, 68, 68, 0.55) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  color: #ef4444 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.btn-danger:hover,
.btn-danger-ghost:hover,
[data-action="deleteAccount"]:hover,
[data-action="delChannel"]:hover,
#dash .btn-danger:hover,
#dash [data-action="deleteAccount"]:hover,
#dash [data-action="delChannel"]:hover,
#profileOverlay [data-action="deleteAccount"]:hover {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.25) !important;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35), inset 0 1px 0 #ffffff !important;
  color: #ffffff !important;
}

.btn-danger svg,
.btn-danger-ghost svg,
[data-action="deleteAccount"] svg,
[data-action="delChannel"] svg,
.zm-ico-trash {
  color: #ef4444 !important;
  stroke: #ef4444 !important;
  animation: zmIconTrash 2.4s ease-in-out infinite !important;
}

/* ==========================================================================
   UNIVERSAL MICRO-ANIMATION ENFORCER (ALWAYS ACTIVE & VISIBLE ON ALL PLATFORMS)
   ========================================================================== */
@media (prefers-reduced-motion: reduce), (prefers-reduced-motion: no-preference) {
  svg,
  .zm-anim-icon,
  .zm-anim-icon svg,
  .cab-ico svg,
  .mono-icon svg,
  .btn-ico svg,
  .brand-symbol svg,
  .mp-ic svg,
  .ch-ic svg,
  .dl-ic svg,
  .search-ic svg,
  .dash-actions svg,
  .preset-pill svg,
  .style-pill svg,
  .gift-row svg,
  .danger-zone svg,
  .status-pill svg,
  .lang-trigger svg,
  .btn-sm svg,
  .btn svg,
  #dash svg,
  #site svg {
    animation-play-state: running !important;
    animation-iteration-count: infinite !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   SOLID WHITE FLOATING TOPBAR IN CABINET WITH CRISP ZYNLUME BRAND & ACTIONS
   ========================================================================== */
#dash .dash-topbar,
.dash-topbar {
  background: #ffffff !important;
  color: #09090b !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

#dash .dash-topbar .brand,
.dash-topbar .brand {
  color: #000000 !important;
}

#dash .dash-topbar .brand b,
.dash-topbar .brand b {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  display: inline-block !important;
}

#dash .dash-topbar .brand svg,
#dash .dash-topbar .brand svg *,
.dash-topbar .brand svg,
.dash-topbar .brand svg * {
  stroke: #000000 !important;
  color: #000000 !important;
}

#dash .dash-topbar .brand svg circle.zm-dot {
  fill: #000000 !important;
}

#dash .dash-topbar .brand .cab-ico:not(.brand-symbol),
#dash .dash-topbar .brand > span[data-cab-label],
.dash-topbar .brand .cab-ico:not(.brand-symbol),
.dash-topbar .brand > span[data-cab-label] {
  display: none !important;
}

#dash .dash-topbar .dash-actions,
.dash-topbar .dash-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  margin-left: auto !important;
  margin-right: 80px !important;
  flex: initial !important;
}

#dash .dash-topbar .dash-actions .btn-quiet,
#dash .dash-topbar .dash-actions [data-action="showSite"],
#dash .dash-topbar .dash-actions [data-action="logout"],
.dash-topbar .dash-actions .btn-quiet,
.dash-topbar .dash-actions [data-action="showSite"],
.dash-topbar .dash-actions [data-action="logout"] {
  background: #f4f4f5 !important;
  border: 1px solid #e4e4e7 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  border-radius: 9999px !important;
  color: #09090b !important;
  -webkit-text-fill-color: #09090b !important;
  padding: 8px 20px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  min-height: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

#dash .dash-topbar .language-menu,
.dash-topbar .language-menu {
  display: inline-flex !important;
  position: relative !important;
}

#dash .dash-topbar .dash-actions .lang-trigger,
.dash-topbar .dash-actions .lang-trigger {
  background: #f4f4f5 !important;
  border: 1px solid #e4e4e7 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  border-radius: 9999px !important;
  color: #09090b !important;
  -webkit-text-fill-color: #09090b !important;
  padding: 8px 18px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  min-height: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

#dash .dash-topbar .dash-actions .btn-quiet *,
#dash .dash-topbar .dash-actions .lang-trigger *,
#dash .dash-topbar .dash-actions [data-action="showSite"] *,
#dash .dash-topbar .dash-actions [data-action="logout"] *,
.dash-topbar .dash-actions .btn-quiet *,
.dash-topbar .dash-actions .lang-trigger *,
.dash-topbar .dash-actions [data-action="showSite"] *,
.dash-topbar .dash-actions [data-action="logout"] * {
  color: #09090b !important;
  -webkit-text-fill-color: #09090b !important;
  stroke: #09090b !important;
}

#dash .dash-topbar .dash-actions .btn-quiet:hover,
#dash .dash-topbar .dash-actions .lang-trigger:hover,
#dash .dash-topbar .dash-actions [data-action="showSite"]:hover,
#dash .dash-topbar .dash-actions [data-action="logout"]:hover,
.dash-topbar .dash-actions .btn-quiet:hover,
.dash-topbar .dash-actions .lang-trigger:hover,
.dash-topbar .dash-actions [data-action="showSite"]:hover,
.dash-topbar .dash-actions [data-action="logout"]:hover {
  background: #e4e4e7 !important;
  border-color: #d4d4d8 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

#dash .dash-topbar .dash-actions svg,
#dash .dash-topbar .dash-actions svg *,
.dash-topbar .dash-actions svg,
.dash-topbar .dash-actions svg * {
  stroke: #09090b !important;
  color: #09090b !important;
}

#dash .dash-topbar .dash-user,
.dash-topbar .dash-user {
  background: #f4f4f5 !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 9999px !important;
}

#dash .dash-topbar .dash-user b,
.dash-topbar .dash-user b {
  color: #09090b !important;
  -webkit-text-fill-color: #09090b !important;
}

#dash .dash-topbar .dash-user small,
.dash-topbar .dash-user small {
  color: #71717a !important;
  -webkit-text-fill-color: #71717a !important;
}

#dash .dash-topbar .gav,
#dash .dash-topbar #dashAv,
.dash-topbar .gav,
.dash-topbar #dashAv {
  background: #000000 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 50% !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* Hide download buttons and sections inside Android APK WebView */
html[data-platform="android"] .download-section,
html[data-platform="android"] #download,
html[data-platform="android"] .gate-downloads,
html[data-platform="android"] [data-action="download"],
html[data-platform="android"] .dl-pc,
html[data-platform="android"] .dl-phone,
html[data-platform="android"] a[href="#download"] {
    display: none !important;
}