:root {
  --purple: #c8ff3d !important;
  --lavender: rgba(200, 255, 61, .16) !important;
  --line: rgba(255, 255, 255, .12) !important;
  --ink: #f7f9f3 !important;
  --muted: #a8aea1 !important;
}

body {
  color: #f7f9f3 !important;
  background: #090b08 !important;
}

/* Полный фон задаётся в site-overrides.css (картинка + затемнение) */

html,
body { overflow-x: hidden; }

/* Keep the documentation page on the document scroll root so sticky navigation
   is not detached by an implicit body scroll container. */
html:has(.docs),
body:has(.docs) {
  overflow-x: clip !important;
}

::selection { color: #10130c; background: #c8ff3d !important; }

.brand-mark {
  background: #c8ff3d !important;
  box-shadow: 0 8px 22px rgba(200, 255, 61, .28) !important;
}

.brand-mark img { filter: none !important; }

.eyebrow > span { background: #c8ff3d !important; box-shadow: 0 0 14px rgba(200, 255, 61, .45) !important; }

.nav-links a,
.hero-copy > p,
.section-head > p,
.trust-row span,
.trust-row a,
.product-info em,
.footer p,
.footer a:not(.brand) { color: #a8aea1 !important; }

.nav-links a::after,
.ticker i,
.active-label i,
.waiting i { background: #c8ff3d !important; }

.nav-cta,
.button--ghost {
  color: #f7f9f3 !important;
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

.nav-cta:hover,
.button--ghost:hover { border-color: rgba(200, 255, 61, .55) !important; }

.button--primary,
.support-fab,
.modal-action {
  color: #11150c !important;
  background: linear-gradient(105deg, #dfff79, #aeea24) !important;
  box-shadow: 0 16px 42px rgba(174, 234, 36, .22) !important;
}

.hero h1 em,
.eyebrow,
.section-head > div > span,
.checkout-modal > small { color: #c8ff3d !important; }

.trust-row i {
  color: #c8ff3d !important;
  background: rgba(200, 255, 61, .12) !important;
}

.hero-visual {
  background:
    radial-gradient(circle at 52% 43%, rgba(173, 234, 36, .22), transparent 34%),
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .08), transparent 30%),
    linear-gradient(145deg, #151b11, #0b0e09 68%) !important;
  border-color: rgba(200, 255, 61, .16) !important;
  box-shadow: inset 0 0 80px rgba(200, 255, 61, .06), 0 32px 90px rgba(0, 0, 0, .5) !important;
}

.hero-visual::before,
.chain { border-color: rgba(200, 255, 61, .16) !important; }
.chain { box-shadow: 0 0 28px rgba(200, 255, 61, .05) !important; }

.orb--one { background: rgba(200, 255, 61, .12) !important; }
.orb--two { background: linear-gradient(145deg, #edffb6, #9ed916) !important; }

.token--main {
  background: linear-gradient(145deg, #e8ff9d, #a8e31d) !important;
  color: #10140b !important;
  box-shadow: 0 28px 85px rgba(166, 227, 29, .32) !important;
}

.token--main > span {
  display: block !important;
  width: 82%;
  height: 82%;
  border: 4px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  color: transparent !important;
  font-size: 0 !important;
  background: #26a17b url("/brands/usdt.png") center / cover no-repeat;
  box-shadow: 0 15px 38px rgba(15, 82, 62, .28), inset 0 0 0 1px rgba(255, 255, 255, .18);
  transform: rotate(10deg);
}

.token--main > i { display: none !important; }

.network-card {
  color: #f7f9f3 !important;
  background: rgba(17, 22, 14, .88) !important;
  border-color: rgba(200, 255, 61, .18) !important;
}

.active-label { color: #c8ff3d !important; }

.ticker {
  border-color: rgba(200, 255, 61, .14) !important;
  background: #0e120b !important;
}
.ticker span,
.ticker i {
  color: #a8aea1 !important;
  border-color: rgba(200, 255, 61, .20) !important;
}

.product-card {
  --accent: #c8ff3d !important;
  background: #11150f !important;
  border-color: rgba(255, 255, 255, .10) !important;
}

.product-card:hover,
.product-card--active {
  border-color: rgba(200, 255, 61, .65) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .34), 0 0 0 1px rgba(200, 255, 61, .08) !important;
}

.product-icon { background: rgba(200, 255, 61, .10) !important; }
.product-arrow { color: #c8ff3d !important; background: rgba(200, 255, 61, .09) !important; }

.calculator {
  background: linear-gradient(150deg, #151a12, #0c0f0a) !important;
  border: 1px solid rgba(200, 255, 61, .14) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .42) !important;
}

.calculator h3 span,
.contract-line code { color: #c8ff3d !important; }
.status { color: #c8ff3d !important; background: rgba(200, 255, 61, .10) !important; }
.amount-grid button:hover,
.amount-grid button.active { color: #11150c !important; border-color: #c8ff3d !important; background: #c8ff3d !important; }

.amount-custom {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
}

.amount-custom > span {
  color: #a8aea1;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
}

.amount-custom input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  color: #f7f9f3;
  font: 750 15px/1 var(--font-geist-mono, monospace);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 11px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.amount-custom input:hover { background: rgba(255, 255, 255, .075); }
.amount-custom input:focus {
  border-color: #c8ff3d;
  box-shadow: 0 0 0 4px rgba(200, 255, 61, .11);
}

.support-fab {
  color: #10130c !important;
  background: linear-gradient(105deg, #dfff79, #aeea24) !important;
  border-color: rgba(255, 255, 255, .24) !important;
  box-shadow: 0 18px 46px rgba(174, 234, 36, .24), 0 8px 22px rgba(0, 0, 0, .28) !important;
}

.support-fab::before {
  content: "?";
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 50%;
  font: 900 12px/1 var(--font-geist-sans, sans-serif);
  transform: translateY(-.25px);
}

.support-fab:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 52px rgba(174, 234, 36, .30), 0 10px 24px rgba(0, 0, 0, .30) !important;
}

@media (max-width: 620px) {
  .support-fab {
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    min-height: 44px !important;
    padding-inline: 14px !important;
  }
}

.checkout {
  color: #11150c !important;
  background: #c8ff3d !important;
}
.checkout:hover { background: #e2ff91 !important; }

.process-wrap { background: #0d100b !important; }
.steps article { background: #121610 !important; border-color: rgba(255, 255, 255, .08) !important; }
.step-symbol { color: #c8ff3d !important; background: rgba(200, 255, 61, .10) !important; border-color: rgba(200, 255, 61, .28) !important; }

.safety-card {
  background: linear-gradient(145deg, #121710, #182013) !important;
  border-color: rgba(200, 255, 61, .16) !important;
}
.safety-icon { color: #11150c !important; background: #c8ff3d !important; }

.checkout-modal {
  background: linear-gradient(150deg, #151a12, #0c0f0a) !important;
  border-color: rgba(200, 255, 61, .18) !important;
}
.checkout-modal input:focus { border-color: #c8ff3d !important; box-shadow: 0 0 0 4px rgba(200, 255, 61, .12) !important; }
.payment-network-grid button.active { border-color: #c8ff3d !important; background: rgba(200, 255, 61, .09) !important; }
.payment-box code { color: #dfff84 !important; }

.lang-switch button.active {
  color: #11150c !important;
  background: #c8ff3d !important;
}

/* Documentation uses the same graphite + lime design system as the store. */
.docs {
  min-height: 100vh;
  color: #f7f9f3 !important;
  background:
    radial-gradient(circle at 84% 3%, rgba(200, 255, 61, .09), transparent 25rem),
    #090b08 !important;
}

.docs .nav {
  background: rgba(9, 11, 8, .82) !important;
  border-color: rgba(255, 255, 255, .09) !important;
  backdrop-filter: blur(18px);
}

.docs-side,
.doc-card,
.doc-statuses > div,
.doc-faq details {
  color: #f7f9f3 !important;
  background: #11150f !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18) !important;
}

.docs-side {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 255, 61, .32) transparent;
}

.docs-side::-webkit-scrollbar { width: 5px; }
.docs-side::-webkit-scrollbar-thumb {
  background: rgba(200, 255, 61, .32);
  border-radius: 999px;
}

.doc-section {
  scroll-margin-top: 32px !important;
}

.docs-side > small,
.docs-side a,
.docs-head p,
.doc-section p,
.doc-card small,
.doc-card li,
.doc-statuses span,
.doc-faq p,
.doc-hint {
  color: #a8aea1 !important;
}

.docs-side ul a:hover,
.docs-side ul a:focus-visible,
.docs-side-links a,
.docs-eyebrow,
.doc-section code,
.doc-contract code {
  color: #c8ff3d !important;
}

.docs-side ul a:hover,
.docs-side ul a:focus-visible {
  background: rgba(200, 255, 61, .08) !important;
}

.doc-section {
  border-color: rgba(255, 255, 255, .10) !important;
}

.doc-note,
.doc-hint {
  color: #dfe7d8 !important;
  background: linear-gradient(135deg, rgba(200, 255, 61, .11), rgba(200, 255, 61, .035)) !important;
  border-color: rgba(200, 255, 61, .26) !important;
}

.doc-card-icon {
  color: #c8ff3d !important;
  background: rgba(200, 255, 61, .10) !important;
  border-color: rgba(200, 255, 61, .18) !important;
}

.doc-badge--ok {
  color: #c8ff3d !important;
  background: rgba(200, 255, 61, .10) !important;
}

.doc-badge--wait {
  color: #f4cf64 !important;
  background: rgba(244, 207, 100, .10) !important;
}

.doc-contract {
  color: #dfe7d8 !important;
  background: #0c100a !important;
  border-color: rgba(200, 255, 61, .16) !important;
}

.doc-section code {
  color: #c8ff3d !important;
  background: rgba(200, 255, 61, .10) !important;
  border-color: rgba(200, 255, 61, .20) !important;
}

.doc-table th,
.doc-table td {
  color: #dfe7d8 !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, .10) !important;
}

.doc-table th {
  color: #c8ff3d !important;
  background: rgba(200, 255, 61, .06) !important;
}

.doc-steps li::marker,
.doc-faq summary::marker {
  color: #c8ff3d !important;
}

.doc-faq summary {
  color: #f7f9f3 !important;
}

.docs .brand-mark img,
.footer .brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 620px) {
  .hero-visual { background: radial-gradient(circle at 50% 44%, rgba(177, 238, 38, .20), transparent 38%), #0e120b !important; }
}

@media (max-width: 900px) {
  .docs-layout {
    gap: 20px !important;
    padding-top: 0 !important;
  }

  .docs-side {
    z-index: 40;
    position: sticky !important;
    top: 0 !important;
    max-height: none;
    margin-inline: -16px;
    padding: 10px 16px !important;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    background: rgba(13, 17, 11, .94) !important;
    border-width: 0 0 1px !important;
    border-radius: 0 0 16px 16px !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .24) !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .docs-side::-webkit-scrollbar { display: none; }
  .docs-side > small,
  .docs-side-links { display: none !important; }

  .docs-side ul {
    display: flex !important;
    gap: 4px !important;
    width: max-content;
  }

  .docs-side a {
    padding: 9px 12px !important;
    white-space: nowrap;
  }

  .doc-section {
    scroll-margin-top: 72px !important;
  }
}