/* Токены, от которых зависят перенесённые правила. Значения тёмной темы —
   она основная и в приложении, и здесь. */
:root {
    --lp-glass: 14 21 37;
    --lp-glass-a: 0.34;
    --lp-edge: 255 255 255;
    --lp-edge-a: 0.13;
    --lp-tile: rgba(255, 255, 255, 0.07);
    --lp-glow-1: rgba(59, 130, 246, 0.27);
    --lp-glow-2: rgba(139, 92, 246, 0.30);
    --lp-glow-3: rgba(34, 211, 238, 0.18);
    --lp-glow-4: rgba(59, 130, 246, 0.10);
    --foreground: 210 40% 98%;
    --link: 217 91% 66%;
    --primary: 217 91% 53%;
    --primary-foreground: 0 0% 100%;
    --muted-foreground: 215 20% 65%;
}

/* ПЕРЕНЕСЕНО ИЗ ПРИЛОЖЕНИЯ ДОСЛОВНО.
   Источники: frontend-new/src/index.css и src/styles/glass.css.
   Ничего не переписано — значения, проценты и кривые те же, иначе карта
   перестала бы быть той самой картой. При правках в приложении этот файл
   надо переснимать, а не подгонять руками. */

/* ---- Лицевая сторона карты (CardFace) ---- */
/* Удар раз в 7s, длится около полутора секунд. Остальные пять с половиной —
   обычная карта с градиентом. Все анимации ниже считают от одной длительности
   и от одних и тех же процентов, потому что удар обязан читаться как ОДНО
   событие: ствол прочерчивается (0.7–3.5%), рассыпается деревом (3–9%), карта
   вспыхивает (3.7%), свет уходит к кромкам, к 13% не остаётся ничего. */

/* Ствол прочерчивается сверху вниз примерно за 200 мс, а не появляется
   целиком: разряд идёт по воздуху, и это видно. Делает stroke-dashoffset при
   pathLength="100" — длина нормирована, поэтому одни и те же проценты годятся
   и для длинного ствола, и для коротких нитей на краю дерева. */
@keyframes lp-bolt-main {
    0%, 0.7% { stroke-dashoffset: 100; opacity: 0; }
    1% { opacity: 1; }
    3.5% { stroke-dashoffset: 0; opacity: 1; }
    4.6% { opacity: 0.3; }
    5.6% { opacity: 1; }
    7% { opacity: 0.25; }
    8.4% { opacity: 0.8; }
    10.5% { opacity: 0.15; }
    13%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes lp-bolt-core {
    0%, 0.8% { stroke-dashoffset: 100; opacity: 0; }
    1.1% { opacity: 1; }
    3.4% { stroke-dashoffset: 0; opacity: 1; }
    4.2% { opacity: 0.15; }
    5% { opacity: 1; }
    6.3% { opacity: 0.1; }
    7.5% { opacity: 0.9; }
    9.5% { opacity: 0.08; }
    12%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Ветви идут ПОСЛЕ ствола и рассыпаются вглубь: каждое поколение стартует
   позже предыдущего, короче его и живёт меньше. Ветка не может вспыхнуть
   раньше, чем разряд дошёл до её основания. */
@keyframes lp-bolt-g1 {
    0%, 3% { stroke-dashoffset: 100; opacity: 0; }
    3.3% { opacity: 0.95; }
    5.4% { stroke-dashoffset: 0; opacity: 0.95; }
    6.6% { opacity: 0.25; }
    7.6% { opacity: 0.8; }
    11.5%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes lp-bolt-g2 {
    0%, 4.6% { stroke-dashoffset: 100; opacity: 0; }
    4.9% { opacity: 0.85; }
    6.8% { stroke-dashoffset: 0; opacity: 0.85; }
    8% { opacity: 0.18; }
    8.8% { opacity: 0.6; }
    11%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes lp-bolt-g3 {
    0%, 6.2% { stroke-dashoffset: 100; opacity: 0; }
    6.5% { opacity: 0.7; }
    8.2% { stroke-dashoffset: 0; opacity: 0.7; }
    10%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

.lp-bolt-main,
.lp-bolt-core,
.lp-bolt-g1,
.lp-bolt-g2,
.lp-bolt-g3 {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    opacity: 0;
    animation-duration: 7s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.lp-bolt-main { animation-name: lp-bolt-main; }
.lp-bolt-core { animation-name: lp-bolt-core; }
.lp-bolt-g1 { animation-name: lp-bolt-g1; }
.lp-bolt-g2 { animation-name: lp-bolt-g2; }
.lp-bolt-g3 { animation-name: lp-bolt-g3; }

/* Вспышка освещает карту целиком, вместе с номером и логотипом. Без неё удар
   выглядит нарисованным поверх карты, а не случившимся с ней. */
@keyframes lp-card-flash {
    0%, 2.8% { opacity: 0; }
    3.7% { opacity: 0.62; }
    5% { opacity: 0.08; }
    6.2% { opacity: 0.42; }
    8% { opacity: 0.05; }
    11%, 100% { opacity: 0; }
}

.lp-card-flash {
    opacity: 0;
    animation: lp-card-flash 7s ease-out infinite;
}

/* Половины карты по обе стороны ствола. Ничего не режут и наружу не видны —
   только не дают левой волне уехать вправо, а правой влево. */
.lp-side-left { clip-path: polygon(0% 0%, 65.57% 0%, 61.79% 7%, 64.94% 14%, 58.01% 23%, 61.16% 31%, 52.96% 41%, 56.12% 49%, 46.66% 60%, 49.81% 69%, 39.09% 80%, 41.61% 88%, 32.79% 100%, 0% 100%); }
.lp-side-right { clip-path: polygon(65.57% 0%, 100% 0%, 100% 100%, 32.79% 100%, 41.61% 88%, 39.09% 80%, 49.81% 69%, 46.66% 60%, 56.12% 49%, 52.96% 41%, 61.16% 31%, 58.01% 23%, 64.94% 14%, 61.79% 7%, 65.57% 0%); }

/* Волна света, выброшенная разрядом. Полоса наклонена вдоль ствола, а уходит
   перпендикулярно ему: слева влево-вверх, справа вправо-вниз. Обе стартуют в
   момент вспышки. Гаснут к 22%: после удара не должно оставаться ничего. */
.lp-card-wave {
    background-repeat: no-repeat;
    background-size: 260% 260%;
    opacity: 0;
    animation-duration: 7s;
    animation-timing-function: cubic-bezier(0.1, 0.66, 0.3, 1);
    animation-iteration-count: infinite;
}

.lp-card-wave--left {
    background-image: linear-gradient(298deg, transparent 41%, rgba(224, 242, 254, 0.5) 50%, transparent 59%);
    animation-name: lp-card-wave-left;
}

.lp-card-wave--right {
    background-image: linear-gradient(118deg, transparent 41%, rgba(224, 242, 254, 0.5) 50%, transparent 59%);
    animation-name: lp-card-wave-right;
}

/* Вторая волна идёт следом и слабее: одиночный проход выглядит бликом,
   пара — расходящимся фронтом. */
.lp-card-wave--echo {
    animation-delay: 0.28s;
    filter: opacity(0.4);
}

@keyframes lp-card-wave-left {
    0%, 3.2% { background-position: 0% 0%; opacity: 0; }
    4.6% { opacity: 0.9; }
    14% { opacity: 0.25; }
    22%, 100% { background-position: 100% 100%; opacity: 0; }
}

@keyframes lp-card-wave-right {
    0%, 3.2% { background-position: 100% 100%; opacity: 0; }
    4.6% { opacity: 0.9; }
    14% { opacity: 0.25; }
    22%, 100% { background-position: 0% 0%; opacity: 0; }
}

/* Карта не замирает между ударами: аврора плывёт, а поверх идёт
   голографический перелив. Именно постоянное движение отличает «живой»
   пластик от картинки, и оно должно быть медленным — иначе спорит с разрядом
   и утомляет за те шесть секунд, пока разряда нет.

   Длительности намеренно некратные (7/9/11 с): при кратных фазы сошлись бы и
   стало бы видно повтор. */
@keyframes lp-aurora-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(13%, 9%, 0) scale(1.22); }
}

@keyframes lp-aurora-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
    50% { transform: translate3d(-16%, -8%, 0) scale(0.86); }
}

@keyframes lp-aurora-c {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(12%, -13%, 0) scale(1.28); }
}

.lp-aurora-a,
.lp-aurora-b,
.lp-aurora-c {
    will-change: transform;
}

.lp-aurora-a { animation: lp-aurora-a 7s ease-in-out infinite; }
.lp-aurora-b { animation: lp-aurora-b 9s ease-in-out infinite; }
.lp-aurora-c { animation: lp-aurora-c 11s ease-in-out infinite; }

/* Перелив. alternate вместо повтора по кругу — чтобы не было скачка на стыке
   цикла: свет доходит до края и идёт обратно, как на настоящей плёнке. */
@keyframes lp-holo {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.lp-holo {
    background-size: 300% 100%;
    background-position: 0% 50%;
    mix-blend-mode: overlay;
    background-image: linear-gradient(
        112deg,
        rgba(255, 255, 255, 0) 10%,
        rgba(56, 189, 248, 0.34) 24%,
        rgba(167, 139, 250, 0.30) 36%,
        rgba(255, 255, 255, 0.40) 46%,
        rgba(34, 211, 238, 0.28) 58%,
        rgba(244, 114, 182, 0.24) 70%,
        rgba(255, 255, 255, 0) 86%
    );
    animation: lp-holo 4.5s ease-in-out infinite alternate;
}

.lp-holo--back {
    background-image: linear-gradient(
        68deg,
        rgba(255, 255, 255, 0) 14%,
        rgba(125, 211, 252, 0.22) 32%,
        rgba(196, 181, 253, 0.20) 50%,
        rgba(94, 234, 212, 0.18) 68%,
        rgba(255, 255, 255, 0) 88%
    );
    animation-duration: 7s;
    animation-direction: alternate-reverse;
    opacity: 0.7;
}

/* Зерно: без него градиент выглядит пластмассовым */
.lp-card-grain {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}



/* ── поле света ── */
.lp-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.lp-ambient i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(52px);
}

.lp-ambient i:nth-child(1) { left: -26%;  top: 0;      width: 100%; height: 30%; background: radial-gradient(circle, var(--lp-glow-1), transparent 72%); }
.lp-ambient i:nth-child(2) { right: -30%; top: 6%;     width: 92%;  height: 28%; background: radial-gradient(circle, var(--lp-glow-2), transparent 72%); }
.lp-ambient i:nth-child(3) { left: 10%;   top: 22%;    width: 86%;  height: 24%; background: radial-gradient(circle, var(--lp-glow-3), transparent 74%); }
.lp-ambient i:nth-child(4) { right: -20%; top: 52%;    width: 80%;  height: 24%; background: radial-gradient(circle, var(--lp-glow-4), transparent 74%); }
.lp-ambient i:nth-child(5) { left: -14%;  bottom: -8%; width: 88%;  height: 26%; background: radial-gradient(circle, var(--lp-glow-4), transparent 74%); }

/* Содержимое обязано лежать ВЫШЕ поля света, иначе оно окажется под ним.
   z-index здесь НЕ ставим намеренно: он создал бы контекст наложения, и
   всё, что внутри просит z-[80] или z-[100] (замок кода-пароля, лист
   сканера, диалоги без портала), оказалось бы заперто под нижней навигацией
   с её z-70. Позиционированный элемент без z-index и так рисуется поверх
   поля света — просто потому, что идёт следом за ним в дереве. */
.lp-layer {
    position: relative;
}


/* ── экран кошелька ── */
.balance-amount-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
    /* Reserve space for the eye button without shifting the centered amount */
    padding-inline: 32px;
}
.balance-amount {
    font-size: clamp(32px, 12vw, 52px);
    font-weight: 700;
    color: hsl(var(--foreground));
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: -0.032em;
}
.balance-amount-number {
    font-feature-settings: "tnum" 1, "zero" 0, "liga" 0;
}
.dark .balance-amount {
    /* На сцене число светится вместе с фоном — иначе оно выглядит наклеенным. */
    text-shadow: 0 2px 26px rgba(147, 197, 253, 0.22);
}
.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.action-btn-icon {
    position: relative;
    width: clamp(48px, 14vw, 62px);
    height: clamp(48px, 14vw, 62px);
    border-radius: 20px;
    background: var(--lp-tile);
    border: 1px solid rgb(var(--lp-edge) / var(--lp-edge-a));
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--link));
    transition: transform 0.16s ease, opacity 0.16s ease;
}
.action-btn-icon::before {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    pointer-events: none;
}
.action-btn--primary .action-btn-icon {
    background: hsl(var(--primary));
    border-color: transparent;
    color: hsl(var(--primary-foreground));
    box-shadow: 0 12px 26px -12px hsl(var(--primary) / 0.9);
}
.action-btn-icon:active {
    transform: scale(0.95);
    opacity: 0.9;
}
.crypto-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: rgb(var(--lp-glass) / var(--lp-glass-a));
    border: 1px solid rgb(var(--lp-edge) / var(--lp-edge-a));
    border-radius: 16px;
    margin-bottom: 6px;
    box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.8);
    transition: transform 0.16s ease, opacity 0.16s ease;
}
.crypto-item::before {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    pointer-events: none;
}
.crypto-item:active {
    transform: scale(0.985);
    opacity: 0.9;
}
.crypto-share {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, hsl(var(--primary) / 0.15), hsl(var(--link) / 0.85));
    pointer-events: none;
}
.crypto-item.is-empty .crypto-icon {
    opacity: 0.55;
}
.crypto-item.is-empty .crypto-name {
    color: hsl(var(--muted-foreground));
}
.crypto-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
    background: var(--lp-tile);
    border: 1px solid rgb(var(--lp-edge) / var(--lp-edge-a));
}
.crypto-info {
    flex: 1;
}
.crypto-name {
    font-weight: 600;
    font-size: 16px;
    color: hsl(var(--foreground));
    margin-bottom: 2px;
}
.crypto-price-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.crypto-price {
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}
.crypto-change {
    font-size: 13px;
    font-weight: 500;
}

/* ── обвязка вёрстки ──────────────────────────────────────────────────────
   В приложении раскладка карты набрана утилитами Tailwind. Тащить сюда весь
   Tailwind ради одного блока нельзя — он несёт с собой preflight и переписал
   бы стили витрины. Поэтому утилиты развёрнуты в обычные правила, но значения
   взяты из CardFace.jsx дословно: те же градиенты, размеры и проценты. */

.lpc { position: relative; width: min(430px, 100%); aspect-ratio: 1.586 / 1;
       border-radius: 22px; overflow: hidden; user-select: none;
       box-shadow: 0 22px 45px -18px rgba(37, 99, 235, .75), 0 6px 18px -8px rgba(0, 0, 0, .6); }
.lpc > * { position: absolute; inset: 0; }

.lpc-base { background: linear-gradient(135deg, #0a1120 0%, #12203c 44%, #070c18 100%); }
.lpc-a1 { left: -25%; top: -33.333%; height: 130%; width: 85%; right: auto; bottom: auto; border-radius: 9999px;
          background: radial-gradient(circle, rgba(59,130,246,.8) 0%, rgba(59,130,246,0) 65%); filter: blur(2px); }
.lpc-a2 { right: -25%; top: 25%; left: auto; bottom: auto; height: 120%; width: 70%; border-radius: 9999px;
          background: radial-gradient(circle, rgba(139,92,246,.6) 0%, rgba(139,92,246,0) 65%); }
.lpc-a3 { bottom: -33.333%; left: 25%; top: auto; right: auto; height: 90%; width: 70%; border-radius: 9999px;
          background: radial-gradient(circle, rgba(34,211,238,.4) 0%, rgba(34,211,238,0) 70%); }
.lpc-gloss { background: linear-gradient(128deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 46%); }
.lpc-spot { left: -15%; top: -35%; right: auto; bottom: auto; height: 95%; width: 75%; border-radius: 9999px;
            background: radial-gradient(ellipse, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%); }
.lpc-grain { opacity: .13; mix-blend-mode: overlay; }

.lpc-body { display: flex; flex-direction: column; justify-content: space-between; padding: 20px; }
.lpc-row { display: flex; align-items: flex-start; justify-content: space-between; }
.lpc-brand { display: flex; align-items: center; gap: 6px; }
.lpc-brand svg { width: 16px; height: 16px; color: #fff; filter: drop-shadow(0 0 8px rgba(96,165,250,.9)); }
.lpc-brand span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: rgba(255,255,255,.9); }
.lpc-nfc { width: 20px; height: 20px; color: rgba(255,255,255,.55); }

.lpc-mid > * + * { margin-top: 12px; }
.lpc-chip { position: relative; height: 28px; width: 36px; overflow: hidden; border-radius: 5px;
            background: linear-gradient(to bottom right, #fdf1c4, #c9a441, #7a5c17);
            box-shadow: inset 0 1px 1px rgba(255,255,255,.75), 0 1px 2px rgba(0,0,0,.35); }
.lpc-chip i { position: absolute; background: rgba(0,0,0,.25); }
.lpc-chip i:nth-child(1) { left: 4px; right: 4px; top: 50%; height: 1px; transform: translateY(-50%); }
.lpc-chip i:nth-child(2) { top: 4px; bottom: 4px; left: 50%; width: 1px; transform: translateX(-50%); }
.lpc-chip i:nth-child(3) { left: 6px; right: 6px; top: 30%; height: 1px; background: rgba(0,0,0,.15); }
.lpc-chip i:nth-child(4) { left: 6px; right: 6px; top: 70%; height: 1px; background: rgba(0,0,0,.15); }
.lpc-chip u { position: absolute; inset: 0; background: linear-gradient(to top right, transparent, rgba(255,255,255,.35), transparent); }

.lpc-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 19px; font-weight: 500;
           font-variant-numeric: tabular-nums; letter-spacing: .14em; color: #fff;
           filter: drop-shadow(0 1px 10px rgba(255,255,255,.3)); }

.lpc-bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.lpc-cap { font-size: 8px; text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.4); }
.lpc-val { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.8); }
.lpc-exp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.85); }
.lpc-visa { font-size: 18px; font-weight: 900; font-style: italic; letter-spacing: -.05em; color: #fff;
            filter: drop-shadow(0 1px 6px rgba(255,255,255,.35)); }

.lpc-bolts { width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; }
.lpc-ring { border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); pointer-events: none; }
.lpc-hair-top { inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); }
.lpc-hair-bot { inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(125,211,252,.25), transparent); }

/* ── экран кошелька ── */
.lps { position: relative; padding: 16px 14px 18px; display: grid; gap: 14px; border-radius: 30px;
       background: #0a1225; overflow: hidden; aspect-ratio: .485; align-content: start; }
.lps > *:not(.lp-ambient) { position: relative; z-index: 1; }
.lps-top { display: flex; align-items: center; gap: 10px; }
.lps-ava { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 700;
           background: linear-gradient(140deg, #3b82f6, #8b5cf6); }
.lps-who { display: grid; line-height: 1.2; }
.lps-who b { font-size: 13.5px; }
.lps-who span { font-size: 11px; color: rgba(238, 243, 255, .55); }
.lps-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lps-list { display: grid; gap: 8px; }
.lps .balance-card { padding: 18px; border-radius: 22px; }
.lps .balance-amount { font-size: 27px; }
.lps .crypto-icon { width: 30px; height: 30px; }