/* ═══ «Apple × спокойный Web3» — последний слой темы (грузится после graphite.css и перекрывает все прежние) ═══════════════
   Нейтральный фон, почти плоские карточки с тонкой рамкой, один синий акцент. Зелёный — только «доступно/успех»,
   янтарный — только удержание/ожидание, красный — только ошибки. Тёмная «космическая» карточка с 3D-артом из баннеров
   бота (img/3d/*.jpg) — только у кошелька и профиля. Анимации — короткое открытие и смена статуса, остальное выключено.
   Базовые цвета темы лежат в --c-*: ими же сбрасываются локальные переопределения старых «синих» карточек. */
:root {
  --c-bg: #f2f2f7; --c-card: #ffffff; --c-fill: #f2f2f7; --c-line: rgba(60, 60, 67, 0.12); --c-line2: rgba(60, 60, 67, 0.2);
  --c-text: #1c1c1e; --c-dim: #6c6c72; --c-faint: #a1a1a8;
  --c-blue: #007aff; --c-blue-soft: rgba(0, 122, 255, 0.1); --c-blue-line: rgba(0, 122, 255, 0.32);
  --c-green: #1f8a4c; --c-green-soft: rgba(52, 199, 89, 0.12);
  --c-amber: #b26a00; --c-amber-soft: rgba(255, 159, 10, 0.13);
  --c-red: #d92d20; --c-red-soft: rgba(255, 59, 48, 0.1);
}
html[data-theme="dark"], [data-theme="dark"] {
  --c-bg: #000000; --c-card: #1c1c1e; --c-fill: #2c2c2e; --c-line: rgba(255, 255, 255, 0.09); --c-line2: rgba(255, 255, 255, 0.16);
  --c-text: #f5f5f7; --c-dim: #98989f; --c-faint: #636366;
  --c-blue: #0a84ff; --c-blue-soft: rgba(10, 132, 255, 0.16); --c-blue-line: rgba(10, 132, 255, 0.42);
  --c-green: #30d158; --c-green-soft: rgba(48, 209, 88, 0.14);
  --c-amber: #ffb340; --c-amber-soft: rgba(255, 179, 64, 0.14);
  --c-red: #ff6961; --c-red-soft: rgba(255, 105, 97, 0.14);
}
:root, html[data-theme="dark"], [data-theme="dark"] {
  --sp-void: var(--c-bg); --sp-hull: var(--c-card); --sp-panel: var(--c-card); --sp-panel2: var(--c-fill); --sp-modal: var(--c-card);
  --sp-line: var(--c-line); --sp-line2: var(--c-line2); --sp-btn-line: var(--c-line);
  --sp-star: var(--c-text); --sp-dust: var(--c-dim); --sp-faint: var(--c-faint);
  --sp-ion: var(--c-blue); --sp-ion-soft: var(--c-blue-soft); --sp-ion-line: var(--c-blue-line); --sp-on-ion: #fff; --sp-ion-ink: #fff;
  --sp-blue: var(--c-blue); --sp-blue-grad: linear-gradient(var(--c-blue), var(--c-blue)); --sp-blue-shadow: none;
  --sp-aurora: var(--c-green); --sp-aurora-soft: var(--c-green-soft); --sp-nova: var(--c-amber); --sp-nova-soft: var(--c-amber-soft);
  --sp-flare: var(--c-red); --sp-flare-soft: var(--c-red-soft);
  --sp-ink: var(--c-card); --sp-ink-grad: linear-gradient(var(--c-card), var(--c-card)); --sp-hero: var(--c-card);
  --sp-trade: var(--c-blue); --sp-nft: #5e8bff; --sp-escort: #8aa9ff; --sp-amazon: #b7c8f5;
  --sp-shadow: none; --sp-shadow-float: 0 12px 32px -20px rgba(0, 0, 0, 0.35); --sp-wave: none; --sp-glow: none;
  --sp-r-s: 12px; --sp-r-m: 14px; --sp-r-l: 18px; --sp-r-xl: 22px;
  --space-hero: #0b0e15;
}
html[data-theme] body { background: var(--c-bg); }
html[data-theme] .sp-top, html[data-theme] body.scrolled .sp-top { background: color-mix(in srgb, var(--c-bg) 90%, transparent); }

/* ── карточки: плоские, тонкая рамка, без теней и украшений ── */
html[data-theme] :is(.sp-card, .sp-stat, .sp-kvs, .wl-ops, .wl-wd, .st-list, .sp-dirs.list, .hm-qr, .hm-tile, .sp-svcw, .sp-tile, .sp-kpi, .sp-catalog-card, .qr-state, .wl-dep, .sp-row-btn, .dp-tile) {
  background: var(--c-card); box-shadow: inset 0 0 0 1px var(--c-line); }
html[data-theme] .sp-card .sp-card { background: var(--c-fill); box-shadow: none; }

/* старые «синие/графитовые» карточки, кроме кошелька и профиля, — обычные нейтральные карточки */
html[data-theme] :is(.hm-bal, .dp-hero, .pn-hero, .pn-bal, .rf-hero, .sp-wave-card, .wf-dep-hero, .wf-res-hero, .sp-kpi.ink, .sp-ink, .wl-sum, .dp-close, .dp-lot, .ts-guard, .pf-wallet) {
  background: var(--c-card); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-line);
  --sp-star: var(--c-text); --sp-dust: var(--c-dim); --sp-faint: var(--c-faint); --sp-on-ink: var(--c-text); --sp-ink-dim: var(--c-dim);
  --sp-panel: var(--c-fill); --sp-panel2: var(--c-fill); --sp-hull: var(--c-card); --sp-line: var(--c-line); --sp-line2: var(--c-line2); --sp-btn-line: var(--c-line);
  --sp-ion: var(--c-blue); --sp-ion-soft: var(--c-blue-soft); --sp-ion-line: var(--c-blue-line); --sp-on-ion: #fff; --sp-ink: var(--c-text);
  --sp-aurora: var(--c-green); --sp-aurora-soft: var(--c-green-soft); --sp-nova: var(--c-amber); --sp-nova-soft: var(--c-amber-soft);
  --sp-flare: var(--c-red); --sp-flare-soft: var(--c-red-soft); }
html[data-theme] :is(.hm-bal, .dp-hero, .pn-hero, .pn-bal, .rf-hero, .sp-wave-card, .wf-dep-hero, .wf-res-hero, .sp-kpi.ink, .sp-ink, .wl-sum, .dp-close, .dp-lot, .ts-guard, .pf-wallet, .wl-hero, .pf-hero)::before,
html[data-theme] :is(.hm-bal, .wl-hero, .dp-hero, .pf-hero)::after { content: none; display: none; }
html[data-theme] :is(.dp-hero, .rf-hero, .pn-hero, .pn-bal, .wl-sum, .dp-close, .dp-lot, .ts-guard) :is(.sp-h2, .dp-label, .dp-lot-day, .dp-lot-foot, .dp-lot-mode) { color: var(--c-dim); }
html[data-theme] :is(.wl-sum-n, .dp-lot-main b, .dp-lot-id) { color: var(--c-text); }
html[data-theme] .wl-sum-n.sp-pos, html[data-theme] .dp-lot-gain { color: var(--c-green); }
html[data-theme] :is(.dp-act, .dp-lot-btn, .ts-flow > div) { background: var(--c-fill); color: var(--c-text); box-shadow: none; }
html[data-theme] .dp-act.primary { background: var(--c-blue); color: #fff; }
html[data-theme] :is(.dp-lot-bar, .wl-res-bar) { background: var(--c-fill); }
html[data-theme] :is(.dp-lot-bar u, .wl-res-bar u, .ts-meter i) { background: var(--c-green); }
html[data-theme] .dp-lot-close { background: var(--c-red-soft); color: var(--c-red); box-shadow: none; }
html[data-theme] :is(.wl-sum, .dp-close) .sp-ava[class], html[data-theme] .dp-close .dp-ico[class] { background: var(--c-fill); color: var(--c-blue); box-shadow: none; }

/* ── кнопки: одна основная синяя, вторичные — нейтральная заливка ── */
html[data-theme] .sp-btn { border-radius: 14px; font-weight: 600; box-shadow: none; filter: none; }
html[data-theme] .sp-btn.primary, html[data-theme] .sp-btn.primary:hover:not(:disabled) { background: var(--c-blue); color: #fff; box-shadow: none; }
html[data-theme] .sp-btn.primary:disabled { background: var(--c-fill); color: var(--c-faint); }
html[data-theme] .sp-btn.ghost { background: var(--c-fill); color: var(--c-text); box-shadow: none; }
html[data-theme] .sp-btn.ghost .sp-ico { color: var(--c-blue); }
html[data-theme] .sp-btn.danger { background: var(--c-red-soft); color: var(--c-red); box-shadow: none; }
html[data-theme] .sp-iconbtn { background: var(--c-fill); color: var(--c-text); box-shadow: none; }
html[data-theme] .sp-top .sp-iconbtn[aria-label="Назад"] { background: var(--c-fill); color: var(--c-blue); box-shadow: none; }
html[data-theme] .sp-sheet-x[class] { background: var(--c-fill); color: var(--c-dim); box-shadow: none; }
html[data-theme] .sp-link, html[data-theme] .dp-link { background: none; box-shadow: none; padding: 4px 2px; color: var(--c-blue); font-weight: 550; }
html[data-theme] .sp-chip { background: var(--c-card); color: var(--c-dim); box-shadow: inset 0 0 0 1px var(--c-line); }
html[data-theme] .sp-chip.on, html[data-theme] .wl-filter .sp-chip.on { background: var(--c-text); color: var(--c-bg); box-shadow: none; }
html[data-theme] .sp-seg { background: var(--c-fill); box-shadow: none; }
html[data-theme] .sp-seg button[aria-pressed="true"] { background: var(--c-card); color: var(--c-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
html[data-theme] .sp-switch.on { background: var(--c-green); }
html[data-theme] :is(.pn-tab.on, .sp-send, .sp-bubble, .sp-dlg-m.out) { background: var(--c-blue); box-shadow: none; }
html[data-theme] .sp-field, html[data-theme] :is(.wf-search, .nw-amt, .wl-amt) { background: var(--c-fill); box-shadow: none; border-color: transparent; color: var(--c-text); }
html[data-theme] .sp-field:focus, html[data-theme] :is(.wf-search, .nw-amt, .wl-amt):focus-within { background: var(--c-card); box-shadow: inset 0 0 0 1.5px var(--c-blue); }
html[data-theme] .sp-sheet { background: var(--c-card); }
html[data-theme] .sp-sheet-body > .sp-btn-row:last-child { background: var(--c-card); }
html[data-theme] .sp-sheet-body > :is(.sp-btn-row, .sp-btn.wide):last-child { box-shadow: 0 -14px 14px -2px var(--c-card); }
html[data-theme] .sp-sheet :is(.sp-kvs, .wl-ops, .st-list) { background: var(--c-fill); box-shadow: none; }

/* значки в кружках — нейтральная заливка, синий знак */
html[data-theme] :is(.sp-ava, .sp-stat-ico, .wl-op .sp-ava, .wl-dep .dp-ico, .hm-tile-ico, .hm-qr-ico, .sp-svcw .sp-ava, .ts-ava)[class] { background: var(--c-fill); color: var(--c-blue); box-shadow: none; }
html[data-theme] .sp-stat-ico.pos { background: var(--c-green-soft); color: var(--c-green); }
html[data-theme] .sp-stat-ico.warn { background: var(--c-amber-soft); color: var(--c-amber); }
html[data-theme] .sp-stamp { box-shadow: none; }

/* ── нижнее меню: четыре пункта, активный — синий знак и подпись, без заливки градиентом ── */
html[data-theme] .sp-nav { background: color-mix(in srgb, var(--c-card) 92%, transparent); box-shadow: inset 0 0 0 1px var(--c-line), 0 10px 30px -18px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
html[data-theme] .sp-nav-item { color: var(--c-dim); background: none; box-shadow: none; }
html[data-theme] .sp-nav-item.on { color: var(--c-blue); background: var(--c-blue-soft); box-shadow: none; }

/* ── «космическая» карточка с 3D-артом: кошелёк и профиль (тот же мир, что баннеры бота) ── */
html[data-theme] :is(.wl-hero, .pf-hero) {
  position: relative; isolation: isolate; overflow: hidden; color: #f5f7ff; border-radius: 24px;
  background: var(--space-hero);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --sp-star: #f5f7ff; --sp-dust: rgba(222, 230, 255, 0.68); --sp-faint: rgba(222, 230, 255, 0.42); --sp-ink-dim: rgba(222, 230, 255, 0.68);
  --sp-panel: rgba(255, 255, 255, 0.08); --sp-panel2: rgba(255, 255, 255, 0.1); --sp-line: rgba(255, 255, 255, 0.12); --sp-btn-line: rgba(255, 255, 255, 0.16);
  --sp-ion: #8fb8ff; --sp-aurora: #6fe3a1; --sp-nova: #ffcf85; --sp-flare: #ff9d95; }

html[data-theme] .pf-hero { --space-art: url("/assets/ea4a990c07fe852ddea8/space/img/3d/profile.jpg"); --space-art-x: -56px; }
/* арт уходит под текст плавно: слева — сплошной тон карточки */
/* арт — отдельный слой у правого края, к левому краю растворяется маской: на любой ширине карточки нет видимой границы
   картинки; поверх — лёгкое затемнение слева, чтобы текст читался */
html[data-theme] :is(.wl-hero, .pf-hero)::after { content: ""; display: block; position: absolute; z-index: -2; pointer-events: none;
  top: -12%; bottom: -12%; right: var(--space-art-x, -24px); aspect-ratio: 1 / 1;
  background: var(--space-art, none) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 30%, #000 60%), linear-gradient(transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 30%, #000 60%), linear-gradient(transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect; }
html[data-theme] :is(.wl-hero, .pf-hero)::before { content: ""; display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; animation: none; opacity: 1;
  background: linear-gradient(90deg, var(--space-hero) 0%, rgba(11, 14, 21, 0.7) 40%, rgba(11, 14, 21, 0) 75%); -webkit-mask-image: none; mask-image: none; }
/* кошелёк — не 3D, а полупрозрачные логотипы Tether, BTC, ETH, BNB справа (img/crypto-deco.svg), как было до редизайна */
html[data-theme] .wl-hero::after { top: 0; bottom: 0; left: 0; right: 0; aspect-ratio: auto;
  background: url("/assets/ea4a990c07fe852ddea8/space/img/crypto-deco.svg") right -22px center / 230px 230px no-repeat;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.6) 30%, transparent 62%); -webkit-mask-composite: source-over;
  mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.6) 30%, transparent 62%); mask-composite: add; }
html[data-theme] .wl-hero::before { content: none; display: none; }
html[data-theme] :is(.wl-hero, .pf-hero) .sp-iconbtn { background: rgba(255, 255, 255, 0.12); color: #f5f7ff; }
html[data-theme] .wl-net { background: rgba(255, 255, 255, 0.1); box-shadow: none; color: #e8eeff; }
html[data-theme] .pf-hero .sp-stamp { background: rgba(255, 255, 255, 0.12); color: #f5f7ff; }
html[data-theme] .pf-hero-kpi > div { background: rgba(255, 255, 255, 0.08); box-shadow: none; }
html[data-theme] .pf-hero-art, html[data-theme] .wl-art { display: none; }

/* ── кошелёк: «Доступно» крупно, всего на балансе, четыре круглых действия, нейтральные строки статусов ── */
.wl-hero .wl-label { color: var(--sp-dust); font: 500 13px/1.2 var(--sp-body); }
.wl-total { color: var(--sp-dust); font: 500 14px/1.3 var(--sp-body); }
.wl-total b { color: #f5f7ff; font-weight: 600; }
html[data-theme] .wl-acts .wl-act, html[data-theme] .wl-acts { animation: none; opacity: 1; transform: none; }
html[data-theme] .wl-circ { background: var(--c-card); color: var(--c-blue); box-shadow: inset 0 0 0 1px var(--c-line); }
html[data-theme] .wl-circ.primary, html[data-theme] .wl-acts .wl-act:first-child .wl-circ { background: var(--c-blue); color: #fff; box-shadow: none; }
html[data-theme] .pf-svc-bar i { background: var(--c-blue); }
html[data-theme] .wl-act b { color: var(--c-text); font-weight: 500; }
.wl-status { display: grid; padding: 2px 14px; border-radius: 18px; background: var(--c-card); box-shadow: inset 0 0 0 1px var(--c-line); }
.wl-srow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 0; text-align: left; color: var(--c-text); background: none; border: 0; font: inherit; cursor: pointer; }
.wl-srow + .wl-srow { box-shadow: 0 -1px 0 var(--c-line); }
.wl-srow > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-faint); }
.wl-srow > i.hold { background: var(--c-amber); } .wl-srow > i.work { background: var(--c-blue); } .wl-srow > i.ok { background: var(--c-green); }
.wl-srow b { display: block; font: 550 15px/1.25 var(--sp-body); }
.wl-srow small { display: block; margin-top: 2px; color: var(--c-dim); font: 400 13px/1.3 var(--sp-body); }
.wl-srow-v { margin-left: auto; text-align: right; font: 600 15px/1.2 var(--sp-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-srow-v small { color: var(--c-dim); font-weight: 500; }
.wl-srow > .sp-ico:last-child { flex: none; color: var(--c-faint); }
.wl-srow:active { opacity: 0.7; }
/* таймлайн удержания */
.wl-tl { display: grid; gap: 0; margin: 4px 0; padding: 0; list-style: none; }
.wl-tl li { position: relative; display: grid; gap: 2px; padding: 0 0 18px 26px; }
.wl-tl li::before { content: ""; position: absolute; left: 5px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-fill); box-shadow: inset 0 0 0 2px var(--c-faint); }
.wl-tl li::after { content: ""; position: absolute; left: 9.5px; top: 18px; bottom: 2px; width: 1px; background: var(--c-line2); }
.wl-tl li:last-child::after { display: none; }
.wl-tl li.done::before { background: var(--c-green); box-shadow: none; }
.wl-tl li.now::before { background: var(--c-amber); box-shadow: 0 0 0 4px var(--c-amber-soft); }
.wl-tl b { font: 550 15px/1.3 var(--sp-body); } .wl-tl small { color: var(--c-dim); font-size: 13px; }

/* ── главная: карточка профиля — кнопка, плитки разделов, игры ── */
.pf-hero.tap { display: grid; width: 100%; text-align: left; border: 0; font: inherit; cursor: pointer; }
.pf-hero.tap:active { transform: scale(0.99); }
.pf-hero-more { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: rgba(222, 230, 255, 0.72); font: 500 13px/1.2 var(--sp-body); }
.hm-games { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 18px; text-align: left; border: 0; font: inherit; cursor: pointer;
  background: var(--c-card); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-line); }
.hm-games b { display: block; font: 600 16px/1.2 var(--sp-body); } .hm-games small { color: var(--c-dim); font-size: 13px; }
.hm-games > .sp-ico:last-child { margin-left: auto; color: var(--c-faint); }
.hm-wait { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 16px; border: 0; font: inherit; text-align: left; cursor: pointer;
  background: var(--c-amber-soft); color: var(--c-text); }
.hm-wait > i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-amber); flex: none; }
.hm-wait > .sp-ico:last-child { margin-left: auto; color: var(--c-dim); }

/* ── профиль: разделы статистики ── */
.pf-sec { display: grid; gap: 10px; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-cell { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--c-card); box-shadow: inset 0 0 0 1px var(--c-line); min-width: 0; }
.pf-cell small { color: var(--c-dim); font-size: 12.5px; }
.pf-cell b { font: 650 19px/1.15 var(--sp-body); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pf-cell b i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--c-dim); margin-left: 4px; }
.pf-rows { display: grid; padding: 2px 14px; border-radius: 18px; background: var(--c-card); box-shadow: inset 0 0 0 1px var(--c-line); }
.pf-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 0; border: 0; background: none; font: inherit; color: var(--c-text); text-align: left; }
button.pf-row { cursor: pointer; } button.pf-row:active { opacity: 0.7; }
.pf-row + .pf-row { box-shadow: 0 -1px 0 var(--c-line); }
.pf-row .sp-grow { min-width: 0; } .pf-row b { display: block; font: 550 15px/1.25 var(--sp-body); }
.pf-row small { display: block; color: var(--c-dim); font-size: 13px; margin-top: 2px; }
.pf-row-v { text-align: right; font: 600 15px/1.2 var(--sp-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-row-v small { font-weight: 500; }
.pf-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--c-blue-soft); color: var(--c-blue); font: 650 11.5px/1.4 var(--sp-body); vertical-align: 1px; }
.pf-more { justify-self: center; }

/* ── выключенные украшения и «вечные» анимации ── */
html[data-theme] :is(.wa-coin, .sp-breathe, .qr-orbit, .wl-res, .wl-dep, .wl-addr, .dp-tile, .dp-lot, .dp-hero, .pf-hero, .wl-hero) { animation: none; }

/* шторки: блоки с overflow:hidden внутри тела-сетки сжимались по высоте шторки вместо прокрутки (список сетей
   в «Пополнить» обрезался и не листался) — содержимое шторки не сжимается, тело прокручивается */
html[data-theme] .sp-sheet-body:not(:has(> .sp-ch)) > * { min-height: min-content; }