/* Levra поверх перекрашенного донора: бренд-цвета знака, баннер с сакурой, свои блоки. */
:root {
  --lv-lav: #c08bff;
  --lv-mint: #8bffd1;
  --lv-peri: #7fa8ff;
  --lv-ice: #e8fff6;
  --lv-ink: #5a3df0;
  --lv-ink-2: #7b5cff;
  --lv-mint-ink: #1fae7f;
  --lv-grad: linear-gradient(120deg, #c08bff 0%, #7fa8ff 55%, #8bffd1 100%);
  --lv-grad-text: linear-gradient(95deg, #8a5cff 0%, #5b6dff 55%, #23b886 100%);
  --lv-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --paper: #f6f4ff;
  --paper-2: #efecfb;
  --surface-2: #fbfaff;
  --surface-sunken: #f1eefc;
  --ink: #120e24;
  --ink-2: #4a4565;
  --ink-3: #6c6788;
  --line: #e6e2f3;
  --line-2: #d4cfe6;
}
[data-theme=dark] {
  --paper: #0b0918;
  --paper-2: #080614;
  --surface: #130f26;
  --surface-2: #181331;
  --surface-sunken: #0f0c20;
  --ink: #f1eefc;
  --ink-2: #b4add0;
  --ink-3: #8b84aa;
  --line: #231d3d;
  --line-2: #312a52;
  --lv-grad-text: linear-gradient(95deg, #c9a6ff 0%, #9fb4ff 55%, #8bffd1 100%);
}
body { background: var(--paper); }

/* знак в шапке и футере: плитка с градиентом, без донорской тени-кольца */
.lv-mark { border-radius: 10px !important; overflow: hidden; background: none !important; box-shadow: 0 6px 16px -8px #5a3df080 !important; }
.lv-mark img { width: 100% !important; height: 100% !important; display: block; }

/* первый экран: баннер с сакурой справа, слева белая дымка под текст */
.lv-hero { position: relative; overflow: hidden; isolation: isolate; }
.lv-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(/brand/banner.webp) right top / auto 112% no-repeat;
  opacity: .82;
  -webkit-mask-image: linear-gradient(100deg, transparent 36%, #0009 58%, #000 78%);
  mask-image: linear-gradient(100deg, transparent 36%, #0009 58%, #000 78%);
}
.lv-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--lv-grain); opacity: .06; mix-blend-mode: multiply;
}
[data-theme=dark] .lv-hero::before { opacity: .38; }
[data-theme=dark] .lv-hero::after { mix-blend-mode: screen; opacity: .05; }
.hero-v2-title span {
  background: var(--lv-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent !important;
  padding-bottom: .06em;
}
.stage-wordmark { background: var(--lv-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; opacity: .28; }

/* стороны позиции на карточке */
.stage-card-net { letter-spacing: .08em; }
.lv-flank-pos strong { color: var(--lv-ink) !important; }
[data-theme=dark] .lv-flank-pos strong { color: #c9a6ff !important; }

/* текстовые логотипы для SPY, QQQ и долей комиссии */
.lv-txtlogo {
  display: inline-flex !important; align-items: center; justify-content: center;
  font-family: var(--mono-stack, ui-monospace, monospace); font-weight: 700; letter-spacing: -.02em;
  color: var(--lv-ink); background: #fff; font-size: .62rem; line-height: 1;
}
.stock-logo-large.lv-txtlogo { font-size: 1.05rem; }
.stock-logo-regular.lv-txtlogo { font-size: .7rem; }
.lv-grad { background: var(--lv-grad) !important; color: #1b1436 !important; }

/* большой блок «куда идёт своп» */
.receipts-total { background: var(--lv-grain), linear-gradient(150deg, #9b6bff 0%, #6a5cff 48%, #4f7bff 100%) !important; }
.receipts-total strong { letter-spacing: -.04em; }

/* шаг 1: знак Levra как монета */
.lv-coin-art img { border-radius: 26px; box-shadow: 0 18px 30px -16px #5a3df099; transform: rotate(-6deg); width: 78% !important; height: 78% !important; margin: 11%; }

/* панель запуска */
.lv-launch .lv-out-stock { font-family: var(--display-stack); font-weight: 700; letter-spacing: -.03em; }
.lv-launch .asset-trigger { cursor: pointer; }
.lv-trig-logo .stock-logo { width: 24px; height: 24px; }
.lv-side-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lv-mint-ink); box-shadow: 0 0 0 3px #1fae7f26; }
.lv-launch[data-side=short] .lv-side-dot { background: #e5484d; box-shadow: 0 0 0 3px #e5484d26; }
.lv-launch[data-side=short] #lv-pos { color: #d93a40; }
.lv-launch #lv-pos { color: var(--lv-mint-ink); transition: color .2s; }
.lv-launch-note {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 2px 0;
  font-size: .78rem; color: var(--ink-3); font-family: var(--mono-stack, monospace);
}
.lv-launch-note b { color: var(--ink); font-weight: 600; text-align: right; }

/* бенто: свои картинки вместо донорских */
.lv-art { position: absolute; pointer-events: none; }
.lv-art-launch { left: 0; right: 0; bottom: 6%; height: 54%; }
.lv-orb { position: absolute; display: grid; place-items: center; }
.lv-orb .stock-logo { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 14px 30px -12px #0008; }
.lv-orb .stock-logo img { width: 58%; height: 58%; }
.lv-orb-0 { left: 10%; top: 30%; transform: rotate(-10deg); }
.lv-orb-1 { left: 26%; top: 6%; }
.lv-orb-2 { right: 24%; top: 4%; }
.lv-orb-3 { right: 9%; top: 34%; transform: rotate(9deg); }
.lv-orb-main { left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-6deg); }
.lv-orb-main img { width: 128px; height: 128px; border-radius: 30px; box-shadow: 0 26px 50px -18px #1b0f5c; }
.lv-chip {
  position: absolute; font: 700 .7rem/1 var(--mono-stack, monospace); letter-spacing: .08em; padding: 7px 10px; border-radius: 999px;
  background: #ffffff; color: #1b1436; box-shadow: 0 10px 24px -12px #0008;
}
.lv-chip-a { left: 16%; bottom: 8%; color: var(--lv-mint-ink); }
.lv-chip-b { right: 14%; bottom: 14%; color: #d93a40; }
.lv-chip-c { left: 50%; bottom: 10%; transform: translateX(-50%); color: var(--lv-ink); }
.bento-cell:hover .lv-orb-main img { transform: rotate(-2deg) scale(1.04); transition: transform .5s var(--ease-out); }

.lv-art-pos { right: 26px; bottom: 26px; width: min(360px, 52%); }
.lv-pos {
  display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2);
  font-family: var(--mono-stack, monospace);
}
.lv-pos-top { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.lv-pos-top i { font-style: normal; color: var(--lv-mint-ink); font-weight: 700; letter-spacing: .06em; }
.lv-pos-top em { margin-left: auto; font-style: normal; color: var(--ink-3); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; }
.lv-pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.lv-pos-grid small, .lv-pos-bar small { display: block; color: var(--ink-3); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; }
.lv-pos-grid b { font-size: .95rem; font-weight: 600; }
.lv-pos-grid b.up { color: var(--lv-mint-ink); }
.lv-pos-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.lv-pos-bar > span { height: 8px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.lv-pos-bar i { display: block; height: 100%; border-radius: inherit; background: var(--lv-grad); }

.lv-art-log { left: 24px; right: 84px; bottom: 24px; }
.lv-log { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono-stack, monospace); font-size: .74rem; }
.lv-log-row {
  display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
}
.lv-log-row b { font-weight: 700; color: var(--lv-ink); }
.lv-log-row:nth-child(n+2) b { color: var(--lv-mint-ink); }
.lv-log-row code { color: var(--ink-3); font-size: .7rem; }
[data-theme=dark] .lv-log-row b { color: #c9a6ff; }

.lv-art-token { left: 30px; bottom: 28px; right: 84px; height: 96px; }
.lv-art-token img { position: absolute; left: 0; bottom: 0; width: 88px; height: 88px; border-radius: 22px; transform: rotate(-6deg); box-shadow: 0 20px 40px -16px #000; }
.lv-art-token .lv-chip-c { left: 108px; bottom: 30px; transform: none; }

.bento-cell.is-ink { background: var(--lv-grain), radial-gradient(80% 70% at 100% 100%, #5b3df066, transparent 70%), #120e24 !important; }
.bento-cell.is-blue { background: var(--lv-grain), radial-gradient(90% 60% at 50% 105%, #8bffd166, transparent 70%), linear-gradient(165deg, #9b6bff 0%, #6a5cff 45%, #4b5df0 100%) !important; }

/* футер: огромный вордмарк в цветах знака */
.footer-wordmark {
  background-image: linear-gradient(180deg, color-mix(in srgb, #c08bff 34%, var(--paper)) 10%, color-mix(in srgb, #8bffd1 22%, var(--paper)) 96%) !important;
}

/* доки */
.docs-steps img.lv-step-coin { border-radius: 14px; transform: rotate(-6deg); }
.lv-addr-pending code { color: var(--ink-3) !important; font-style: italic; }
.docs-intro { position: relative; overflow: hidden; isolation: isolate; }
.docs-intro::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(/brand/banner.webp) right top / auto 140% no-repeat; opacity: .55;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 80%); mask-image: linear-gradient(100deg, transparent 35%, #000 80%);
}
.docs-intro h1 em { background: var(--lv-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }

/* уведомление «скоро» */
.lv-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 1000; transform: translate(-50%, 20px); opacity: 0;
  display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px;
  background: #120e24; color: #f1eefc; box-shadow: 0 20px 50px -20px #000c; font-size: .92rem;
  transition: opacity .25s, transform .35s var(--ease-out, ease); pointer-events: none;
}
.lv-toast img { width: 32px; height: 32px; border-radius: 9px; }
.lv-toast a { color: #8bffd1; font-weight: 600; pointer-events: auto; }
.lv-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
@media (max-width: 760px) { .lv-toast { bottom: 92px; width: calc(100% - 32px); } }

/* мобильная версия */
@media (max-width: 760px) {
  .lv-hero::before { background-size: auto 62%; background-position: right bottom; opacity: .7;
    -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 85%); mask-image: linear-gradient(180deg, transparent 40%, #000 85%); }
  .lv-art-pos { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 22px; }
  .lv-art-log { position: relative; left: auto; right: auto; bottom: auto; margin-top: 22px; }
  .lv-orb .stock-logo { width: 48px; height: 48px; }
  .lv-orb-main img { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) { .lv-toast { transition: none; } }

.lv-flank-pos strong{white-space:nowrap}

@media (max-width: 760px) {
  .lv-art-log { margin-bottom: 52px; }
  .lv-log-row { grid-template-columns: 74px 1fr; }
  .lv-log-row code { display: none; }
}
@media (max-width: 760px) { .lv-chip-b { right: auto; left: 52%; bottom: 8%; } .lv-chip-a { left: 8%; } }
