/* «Slate» — плоская минималистичная тема в духе Telegram Wallet / MetaMask. Подключается последней и только переопределяет:
   светлый ледяной фон #F8FAFC, глубокий сланцевый #1E293B для главных карточек вместо градиентов и волн, один спокойный
   акцент, тонкие линии вместо теней, без свечений и пульсаций, мягкие плавные анимации, крупнее скругления, мелкие подписи. */
:root {
  --sp-void: #f8fafc; --sp-hull: #ffffff; --sp-panel: #ffffff; --sp-panel2: #f1f5f9;
  --sp-line: rgba(15, 23, 42, 0.06); --sp-line2: rgba(15, 23, 42, 0.1);
  --sp-star: #1f2937; --sp-dust: #64748b; --sp-faint: #a3afc0;
  --sp-ink: #1e293b; --sp-ink2: rgba(255, 255, 255, 0.07); --sp-on-ink: #f8fafc; --sp-ink-dim: rgba(226, 232, 240, 0.66);
  --sp-ink-line: rgba(255, 255, 255, 0.09); --sp-ink-grad: linear-gradient(#1e293b, #1e293b);
  --sp-ion: #3b4d74; --sp-ion-soft: rgba(59, 77, 116, 0.08); --sp-ion-line: rgba(59, 77, 116, 0.24); --sp-on-ion: #ffffff; --sp-ion-ink: #f8fafc;
  --sp-aurora: #3f8466; --sp-aurora-soft: rgba(63, 132, 102, 0.09);
  --sp-nova: #a86a1c; --sp-nova-soft: rgba(168, 106, 28, 0.08);
  --sp-flare: #c2493f; --sp-flare-soft: rgba(194, 73, 63, 0.08);
  --sp-trade: #3b4d74; --sp-nft: #56688f; --sp-escort: #7686a8; --sp-amazon: #98a5bf; --sp-dust-dot: #cbd5e1;
  --sp-wave: none; --sp-glow: none;
  --sp-r-s: 14px; --sp-r-m: 18px; --sp-r-l: 22px; --sp-r-xl: 26px;
  --sp-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05); --sp-shadow-float: 0 10px 30px -18px rgba(15, 23, 42, 0.25); --sp-shadow-blue: none;
  --sp-ease: cubic-bezier(0.25, 0.8, 0.25, 1); --sp-t-fast: 180ms; --sp-t: 300ms;
}
html[data-theme="dark"], [data-theme="dark"] {
  --sp-void: #080808; --sp-hull: #101010; --sp-panel: #151515; --sp-panel2: #202020;
  --sp-line: rgba(148, 163, 184, 0.08); --sp-line2: rgba(148, 163, 184, 0.14);
  --sp-star: #e5e9f0; --sp-dust: #8b97ab; --sp-faint: #5b6679;
  --sp-ink: #1b2537; --sp-ink-grad: linear-gradient(#1b2537, #1b2537);
  --sp-ion: #8fa3cf; --sp-ion-soft: rgba(143, 163, 207, 0.12); --sp-ion-line: rgba(143, 163, 207, 0.3); --sp-on-ion: #0b1120;
  --sp-aurora: #6fb393; --sp-aurora-soft: rgba(111, 179, 147, 0.1);
  --sp-shadow: 0 0 0 1px rgba(148, 163, 184, 0.07); --sp-shadow-float: 0 12px 30px -18px rgba(0, 0, 0, 0.7);
}
body { background: var(--sp-void); }

/* главные карточки — один ровный сланцевый тон, без волн и свечений */
.sp-ink, .sp-card.sp-ink, .wl-hero, .hm-bal, .pn-hero, .pn-bal, .rf-hero, .sp-kpi.ink, .sp-wave-card {
  --sp-aurora: #9ed2b8; --sp-nova: #f1cf9d; --sp-flare: #f3b2aa; --sp-aurora-soft: rgba(158, 210, 184, 0.12);
  --sp-panel2: rgba(255, 255, 255, 0.07); --sp-ion: #f8fafc; --sp-ion-soft: rgba(255, 255, 255, 0.08); --sp-on-ion: #1e293b;
  background: var(--sp-ink); box-shadow: none;
}
:is(.sp-ink, .wl-hero, .hm-bal, .pn-hero, .pn-bal, .rf-hero, .sp-kpi.ink, .sp-wave-card)::before { display: none; animation: none; }

/* шапка: без бейджа с балансом и точек */
.sp-balchip { display: none !important; }
body.scrolled .sp-top { box-shadow: 0 1px 0 var(--sp-line); background: color-mix(in srgb, var(--sp-void) 88%, transparent); }

/* нижняя навигация — тонкая плоская панель, моно-иконки, активный пункт — маленькая «таблетка» */
.sp-nav { padding: 4px; border-radius: 24px; background: color-mix(in srgb, var(--sp-panel) 92%, transparent); box-shadow: 0 0 0 1px var(--sp-line2), 0 10px 30px -22px rgba(15, 23, 42, 0.4);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sp-nav-item { height: 42px; min-width: 44px; padding: 0 12px; border-radius: 20px; color: var(--sp-dust); transition: color var(--sp-t) var(--sp-ease), background var(--sp-t) var(--sp-ease), padding var(--sp-t) var(--sp-ease); }
.sp-nav-item:hover { color: var(--sp-star); }
.sp-nav-item.on { background: var(--sp-ink); color: #f8fafc; box-shadow: none; padding: 0 14px 0 12px; }
.sp-nav-item.on .sp-nav-ico { animation: none; }
.sp-nav-lbl { font: 550 12.5px/1 var(--sp-body); }
.sp-nav-badge { background: var(--sp-flare); box-shadow: 0 0 0 2px var(--sp-panel); }

/* базовые элементы: плоско, тонкие линии, мягкое нажатие */
.sp-card { box-shadow: 0 0 0 1px var(--sp-line); }
.sp-h2 { font: 550 11px/1.2 var(--sp-body); letter-spacing: 0.07em; color: var(--sp-dust); }
.sp-btn { min-height: 46px; border-radius: 16px; font-weight: 550; font-size: 14.5px; transition: transform var(--sp-t-fast) var(--sp-ease), background var(--sp-t) var(--sp-ease), opacity var(--sp-t); }
.sp-btn:active:not(:disabled) { transform: scale(0.98); filter: none; }
.sp-btn.primary { background: var(--sp-ink); color: #f8fafc; }
.sp-btn.primary:hover:not(:disabled) { filter: none; background: #273449; }
.sp-btn.ghost { background: var(--sp-panel2); }
.sp-chip { min-height: 34px; padding: 0 14px; font-size: 13px; background: var(--sp-panel2); transition: background var(--sp-t) var(--sp-ease), color var(--sp-t); }
.sp-chip.on { background: var(--sp-ink); color: #f8fafc; box-shadow: none; }
.sp-seg { padding: 3px; border-radius: 999px; background: var(--sp-panel2); }
.sp-seg button { min-height: 32px; border-radius: 999px; font-size: 13px; transition: background var(--sp-t) var(--sp-ease), color var(--sp-t); }
.sp-seg button[aria-pressed="true"] { background: var(--sp-panel); color: var(--sp-star); box-shadow: 0 0 0 1px var(--sp-line); }
.sp-switch.on { background: var(--sp-ink); }
.sp-ava { background: transparent; color: var(--sp-star); box-shadow: inset 0 0 0 1px var(--sp-line2); }
.sp-field { border-radius: 16px; }
.sp-field:focus { box-shadow: inset 0 0 0 1px var(--sp-ion-line); }
.sp-note { border-radius: 16px; font-size: 13.5px; }
.sp-sheet { border-radius: 30px 30px 0 0; }
.sp-sheet-x { color: var(--sp-dust); background: var(--sp-panel2); }
.sp-sheet-x:active { background: var(--sp-ink); color: #fff; }
.sp-backdrop { background: rgba(15, 23, 42, 0.32); }
.sp-stamp { font-weight: 550; }

/* ── кошелёк ── */
.wl { gap: 20px; }
.wl-hero { gap: 18px; padding: 22px 20px 20px; border-radius: 28px; }
.wl-net { padding: 6px 12px; font: 500 12px/1 var(--sp-body); background: rgba(255, 255, 255, 0.07); color: var(--sp-ink-dim); }
.wl-net i { display: none; }
.wl-label { font: 500 11px/1 var(--sp-body); letter-spacing: 0.08em; color: var(--sp-ink-dim); }
.wl-bal { font-weight: 600; letter-spacing: -0.04em; } .wl-bal small { font: 500 11px/1 var(--sp-body); padding: 4px 7px; border-radius: 7px; background: rgba(255, 255, 255, 0.07); letter-spacing: 0.06em; }
.wl-fiat { font-size: 13px; }
.wl-res, .wl-addr { min-height: 48px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.wl-res b { font: 500 13.5px/1.2 var(--sp-body); } .wl-res small { font-size: 12px; }
.wl-res-ico { width: 30px; height: 30px; border-radius: 10px; color: #e2e8f0; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.wl-res.off .wl-res-ico { color: var(--sp-ink-dim); }
.wl-res-bar { height: 2px; background: rgba(255, 255, 255, 0.06); } .wl-res-bar u { background: #9ed2b8; box-shadow: none; }
.wl-addr { font-size: 13.5px; } .wl-addr.add { color: #e2e8f0; }
.wl-acts { gap: 6px; }
.wl-act { gap: 8px; }
.wl-circ { width: 54px; height: 54px; border-radius: 19px; background: var(--sp-panel); color: var(--sp-star); box-shadow: inset 0 0 0 1px var(--sp-line2); transition: transform var(--sp-t-fast) var(--sp-ease), background var(--sp-t); }
.wl-circ.primary { background: var(--sp-ink); color: #f8fafc; box-shadow: none; }
.wl-act b { font: 500 12px/1 var(--sp-body); color: var(--sp-dust); }
.wl-dep { border-radius: 22px; background: var(--sp-panel); box-shadow: 0 0 0 1px var(--sp-line); }
.wl-dep b { font-weight: 550; font-size: 15px; } .wl-dep small { font-size: 12.5px; }
.wl-dep-chip { padding: 0; background: none; color: var(--sp-aurora); font: 550 13px/1 var(--sp-body); }
.wl-op { border-radius: 16px; } .wl-op-t { font-weight: 500; font-size: 14.5px; } .wl-op-s { font-size: 12px; }
.wl-op-v { font-weight: 550; font-size: 14.5px; }
.wl-wd { border-radius: 20px; box-shadow: 0 0 0 1px var(--sp-line); }
.wl-prog i { height: 3px; } .wl-prog span.on i { background: var(--sp-ink); }
.wl-steps i { height: 3px; } .wl-steps i.on { background: var(--sp-ink); }
.wl-amt { border-radius: 20px; } .wl-amt input { font-weight: 600; }
.wl-opt { border-radius: 18px; } .wl-opt.on { box-shadow: inset 0 0 0 1px var(--sp-ink); } .wl-opt.on i { background: radial-gradient(circle, var(--sp-ink) 44%, transparent 48%); box-shadow: inset 0 0 0 1.5px var(--sp-ink); }
.wl-opt-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--sp-star); box-shadow: inset 0 0 0 1px var(--sp-line2); }
.wl-qr-box { border-radius: 24px; box-shadow: inset 0 0 0 1px var(--sp-line); }

/* ── депозитный счёт ── */
.dp-hero { background: var(--sp-ink); box-shadow: none; color: #f8fafc; }
.dp-hero::before { display: none; }
.dp-rate { padding: 0; background: none; box-shadow: none; color: #9ed2b8; font: 500 12.5px/1 var(--sp-body); }
.dp-split { height: 4px; background: rgba(158, 210, 184, 0.5); } .dp-split i { background: #cbd5e1; box-shadow: 2px 0 0 #1e293b; }
.dp-legend u.a { background: #cbd5e1; } .dp-legend u.b { background: #9ed2b8; }
.dp-act { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-weight: 500; }
.dp-act.primary { background: #f8fafc; color: #1e293b; }
.dp-tile, .dp-lot { box-shadow: 0 0 0 1px var(--sp-line); border-radius: 20px; }
.dp-ico, .dp-ico.tone-pos, .dp-ico.tone-info, .dp-ico.tone-warn { background: transparent; color: var(--sp-star); box-shadow: inset 0 0 0 1px var(--sp-line2); }
.dp-ico.tone-pos { color: var(--sp-aurora); }
.dp-lot-bar u { background: var(--sp-aurora); }
.dp-faq svg { color: var(--sp-dust); }

/* ── успех: мягкая галочка без колец, искр и свечения ── */
.wf-burst { height: 120px; }
.wf-ring, .wf-spark { display: none; }
.wf-check { filter: none; animation: nw-pop 520ms var(--sp-ease) both; }
.wf-check .wf-disc { fill: var(--sp-aurora); }
.wf-tick { stroke-width: 4.2; }
.wf-title { font-weight: 600; font-size: 18px; } .wf-amt { font-weight: 600; color: var(--sp-aurora); } .wf-sub { font-size: 13.5px; }
@keyframes nw-pop { 0% { transform: scale(0.82); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.wf-live i { animation: none; box-shadow: none; }
.wf-live { background: var(--sp-panel2); color: var(--sp-dust); font-weight: 500; }
.wf-facts svg { color: var(--sp-dust); }
.wf-person { box-shadow: 0 0 0 1px var(--sp-line); border-radius: 20px; }
.wf-ava { background: var(--sp-panel2) !important; color: var(--sp-star); font-weight: 600; }
.wf-dep-hero, .wf-res-hero { background: var(--sp-ink); }
.wf-res-ring::before { background: var(--sp-ink); } .wf-res-ring { background: conic-gradient(#9ed2b8 calc(var(--p) * 1%), rgba(255, 255, 255, 0.1) 0); color: #f8fafc; }

/* ── сети: выбор, логотипы, обмен ── */
.nw-logo { display: block; border-radius: 50%; }
.nw-token { position: relative; flex: none; display: inline-block; }
.nw-token > img { display: block; border-radius: 50%; }
.nw-token .nw-logo { position: absolute; right: -3px; bottom: -3px; box-shadow: 0 0 0 2px var(--sp-panel); }
.nw-list { display: grid; gap: 6px; }
.nw-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 20px; background: var(--sp-panel); box-shadow: inset 0 0 0 1px var(--sp-line); text-align: left;
  transition: box-shadow var(--sp-t) var(--sp-ease), background var(--sp-t), transform var(--sp-t-fast) var(--sp-ease); animation: sp-rise 320ms var(--sp-ease) both; }
.nw-item:nth-child(2) { animation-delay: 30ms; } .nw-item:nth-child(3) { animation-delay: 60ms; } .nw-item:nth-child(4) { animation-delay: 90ms; } .nw-item:nth-child(5) { animation-delay: 120ms; }
.nw-item:active { transform: scale(0.99); background: var(--sp-panel2); } .nw-item.on { box-shadow: inset 0 0 0 1px var(--sp-ink); }
.nw-item b { display: block; font-weight: 550; font-size: 14.5px; } .nw-item small { display: block; margin-top: 2px; font-size: 12px; color: var(--sp-dust); }
.nw-fee { display: grid; justify-items: end; gap: 2px; } .nw-fee b { font-weight: 550; font-size: 13px; } .nw-fee small { font-size: 11.5px; color: var(--sp-faint); }
.nw-pick { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 16px; background: var(--sp-panel2); font: 550 14px/1 var(--sp-body); color: var(--sp-star); text-align: left; }
.nw-pick:disabled { opacity: 1; }
.nw-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -22px; padding: 2px 22px 4px; }
.nw-chips::-webkit-scrollbar { display: none; }
.nw-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px 0 9px; border-radius: 999px; background: var(--sp-panel2); color: var(--sp-dust); font: 500 13px/1 var(--sp-body);
  transition: background var(--sp-t) var(--sp-ease), color var(--sp-t); }
.nw-chip.on { background: var(--sp-ink); color: #f8fafc; }
.nw-step { display: grid; gap: 12px; animation: sp-fade 280ms var(--sp-ease) both; }
.nw-amt { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 18px; background: var(--sp-panel2); }
.nw-amt input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 600 30px/1.1 var(--sp-display); letter-spacing: -0.03em; color: var(--sp-star); } .nw-amt input::placeholder { color: var(--sp-faint); }
.nw-amt span { font: 500 12px/1 var(--sp-body); letter-spacing: 0.06em; color: var(--sp-dust); }
.nw-hint { font-size: 12.5px; line-height: 1.45; color: var(--sp-dust); }
.nw-field { display: grid; gap: 6px; } .nw-field .sp-label { margin: 0; }
.nw-field.warn .sp-label { color: var(--sp-nova); }
.nw-copy { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 16px; background: var(--sp-panel2); color: var(--sp-star); text-align: left; transition: background var(--sp-t); }
.nw-copy code, .nw-copy b { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; font-weight: 500; } .nw-copy svg { flex: none; color: var(--sp-dust); }
.nw-copy:active { background: var(--sp-line2); }
.nw-status { display: inline-flex; align-items: center; justify-self: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: var(--sp-panel2); color: var(--sp-dust); font: 500 12.5px/1 var(--sp-body); }
.nw-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.nw-status.ok { color: var(--sp-aurora); background: var(--sp-aurora-soft); } .nw-status.bad { color: var(--sp-flare); background: var(--sp-flare-soft); }
.nw-adm { display: grid; gap: 4px; padding: 14px 16px; border-radius: 22px; background: var(--sp-panel); box-shadow: 0 0 0 1px var(--sp-line); }
.nw-adm-h { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; } .nw-adm-h b { display: block; font-weight: 550; } .nw-adm-h small { display: block; font-size: 12px; color: var(--sp-dust); }
.nw-adm-fees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.nw-adm-fee { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--sp-panel2); text-align: left; } .nw-adm-fee small { font-size: 11px; color: var(--sp-dust); } .nw-adm-fee b { font-weight: 550; font-size: 13.5px; }
.nw-edit { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, 0.32); animation: sp-fade 200ms ease-out; }
.nw-edit-box { display: grid; gap: 12px; width: min(360px, 100%); padding: 18px; border-radius: 24px; background: var(--sp-panel); animation: nw-pop 260ms var(--sp-ease) both; }

/* мягкие появления: меньше сдвиг, дольше и плавнее */
@keyframes sp-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nw-item, .nw-step, .nw-edit, .nw-edit-box, .wf-check { animation: none; } }
.wl-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }

/* ═══ «Мягче»: ниже контраст, меньше рамок, карточки на всю ширину, плавные SVG-анимации ═══════════════════════════════
   Разделение — фоном и едва заметной тенью, а не линиями. Тексты на полтона мягче. Действует в светлой, тёмной и игровой темах. */
:root {
  --sp-panel2: #f1f4f8; --sp-star: #273244; --sp-dust: #6b7789; --sp-faint: #a9b2c0;
  --sp-ink: #253145; --sp-ink-grad: linear-gradient(#253145, #253145); --sp-ink-dim: rgba(226, 232, 240, 0.62);
  --sp-line: rgba(15, 23, 42, 0.05); --sp-line2: rgba(15, 23, 42, 0.08);
  --sp-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 24px -18px rgba(15, 23, 42, 0.14);
  --sp-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --sp-t: 340ms;
}
html[data-theme="dark"], [data-theme="dark"] {
  --sp-void: #080808; --sp-hull: #101010; --sp-panel: #151515; --sp-panel2: #202020;
  --sp-star: #d7dde6; --sp-dust: #8792a3; --sp-faint: #586273;
  --sp-ink: #1f2837; --sp-ink-grad: linear-gradient(#1f2837, #1f2837);
  --sp-line: rgba(148, 163, 184, 0.06); --sp-line2: rgba(148, 163, 184, 0.1);
  --sp-ion: #9aabcf; --sp-aurora: #74b597;
  --sp-shadow: 0 1px 0 rgba(255, 255, 255, 0.015) inset; --sp-shadow-float: 0 14px 34px -20px rgba(0, 0, 0, 0.75);
}
html[data-theme="dark"] :is(.sp-ink, .wl-hero, .hm-bal, .pn-hero, .pn-bal, .rf-hero, .sp-kpi.ink, .sp-wave-card, .dp-hero) { background: var(--sp-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035); }

/* типографика — спокойнее: меньше жирности, мягкие подписи без капса */
.sp-h1 { font-weight: 600; letter-spacing: -0.03em; }
.sp-lead { color: var(--sp-dust); font-size: 14.5px; }
.sp-h2 { font: 500 11.5px/1.2 var(--sp-body); letter-spacing: 0.06em; color: var(--sp-dust); }
.sp-label { margin-bottom: 8px; font: 500 13px/1.2 var(--sp-body); letter-spacing: 0; text-transform: none; color: var(--sp-dust); }
.wl-label, .dp-label { text-transform: none; letter-spacing: 0; font: 500 13px/1 var(--sp-body); }

/* рамки → тени и фон */
:is(.sp-card, .wl-dep, .wl-wd, .dp-lot, .wf-person, .nw-adm, .sp-tile, .sp-kpi, .pn-act, .sp-dir, .sp-q) { box-shadow: var(--sp-shadow); }
.nw-item { background: var(--sp-panel2); box-shadow: none; } .nw-item.on { background: var(--sp-panel); box-shadow: inset 0 0 0 1.5px var(--sp-ink); }
.sp-sheet .nw-item.on { background: var(--sp-panel); }
.wl-res, .wl-addr { box-shadow: none; background: rgba(255, 255, 255, 0.06); }
.wl-res-ico, .dp-ico, .wl-opt-ico { box-shadow: none; background: var(--sp-panel2); }
.wl-res-ico { background: rgba(255, 255, 255, 0.08); }
.sp-ava { box-shadow: none; background: var(--sp-panel2); }
.dp-act { box-shadow: none; }

/* кнопки внутри тёмных карточек: главная — светлая, вторая — полупрозрачная */
:is(.sp-ink, .hm-bal, .wl-hero, .pn-hero, .pn-bal, .rf-hero, .dp-hero) .sp-btn.primary { background: #f3f6fa; color: #1e293b; }
:is(.sp-ink, .hm-bal, .wl-hero, .pn-hero, .pn-bal, .rf-hero, .dp-hero) .sp-btn.ghost { background: rgba(255, 255, 255, 0.08); color: #eef2f7; }
.hm-bal { gap: 18px; padding: 22px 20px 20px; border-radius: 28px; }
.hm-bal .sp-h2 { color: var(--sp-ink-dim); text-transform: none; letter-spacing: 0; font-size: 13px; }
.hm-bal-n { font-weight: 600; } .hm-bal-n small { color: var(--sp-ink-dim); font-weight: 500; }

/* быстрые действия — круглые кнопки без карточек, как в кошельке */
.sp-quick { gap: 4px; }
.sp-quick-i { gap: 8px; padding: 2px 0; background: none; box-shadow: none; font: 500 12.5px/1 var(--sp-body); color: var(--sp-dust); }
.sp-quick-i .sp-ico { box-sizing: content-box; padding: 15px; border-radius: 19px; background: var(--sp-panel); color: var(--sp-star); box-shadow: var(--sp-shadow); transition: transform var(--sp-t-fast) var(--sp-ease), background var(--sp-t); }
.sp-quick-i:active { transform: none; background: none; } .sp-quick-i:active .sp-ico { transform: scale(0.94); background: var(--sp-panel2); }
.wl-circ { box-shadow: var(--sp-shadow); }

/* карточка показателей на всю ширину (ui/kit.js → StatCard) */
.sp-stat { display: grid; padding: 4px 0; border-radius: 24px; background: var(--sp-panel); box-shadow: var(--sp-shadow); animation: sp-rise 420ms var(--sp-ease-out) both; }
.sp-stat.flush { padding: 0; background: none; box-shadow: none; }
.sp-stat-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px 2px; min-height: 40px; }
.sp-stat-h .sp-link { font-size: 13.5px; padding: 0; }
.sp-stat-r { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 18px; text-align: left; color: var(--sp-star); border-radius: 0; transition: background var(--sp-t) var(--sp-ease); }
.sp-stat-r + .sp-stat-r::before { content: ""; position: absolute; top: 0; left: 70px; right: 18px; height: 1px; background: var(--sp-line); }
.sp-stat-r:first-of-type { border-top-left-radius: 20px; border-top-right-radius: 20px; } .sp-stat-r:last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.sp-stat-r.tap:active { background: var(--sp-panel2); }
.sp-stat-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: var(--sp-panel2); color: var(--sp-dust); }
.sp-stat-ico.pos { color: var(--sp-aurora); background: var(--sp-aurora-soft); } .sp-stat-ico.warn { color: var(--sp-nova); background: var(--sp-nova-soft); }
.sp-stat-l { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sp-stat-l b { font: 500 15px/1.25 var(--sp-body); color: var(--sp-star); }
.sp-stat-l small { font-size: 12.5px; line-height: 1.35; color: var(--sp-dust); }
.sp-stat-v { flex: none; max-width: 52%; text-align: right; font: 600 17px/1.1 var(--sp-display); letter-spacing: -0.02em; color: var(--sp-star); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sp-stat-v small { margin-left: 4px; font: 500 11px/1 var(--sp-body); letter-spacing: 0.04em; color: var(--sp-dust); }
.sp-stat-v.pos { color: var(--sp-aurora); } .sp-stat-v.warn { color: var(--sp-nova); }
.sp-stat-go { flex: none; margin-left: -6px; color: var(--sp-faint); display: grid; }
.sp-stat-r.hot .sp-stat-v { color: var(--sp-nova); }

/* поля — крупнее и чётче: заметная граница фокуса вместо рамки */
.sp-field { min-height: 52px; padding: 0 16px; border-radius: 16px; font-size: 16px; background: var(--sp-panel2); }
.sp-field:focus { background: var(--sp-panel); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sp-ion) 55%, transparent), 0 0 0 5px color-mix(in srgb, var(--sp-ion) 10%, transparent); }
.sp-sheet .sp-field:focus { background: var(--sp-hull); }
textarea.sp-field { padding: 14px 16px; }
.nw-amt, .wl-amt { transition: box-shadow var(--sp-t) var(--sp-ease); }
.nw-amt:focus-within, .wl-amt:focus-within { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sp-ion) 45%, transparent); }

/* шторки на весь экран: воздух по краям, мягкий заголовок, кнопки действий прилипают к низу */
.sp-backdrop { background: rgba(15, 23, 42, 0.26); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
html[data-theme="dark"] .sp-backdrop { background: rgba(2, 6, 12, 0.5); }
.sp-sheet { border-radius: 28px 28px 0 0; box-shadow: 0 -12px 40px -24px rgba(15, 23, 42, 0.25); animation: sp-slide 420ms var(--sp-ease-out) both; }
.sp-sheet::before { width: 34px; height: 4px; margin-left: -17px; background: var(--sp-line2); }
.sp-sheet-head { padding: 22px 16px 6px 22px; }
.sp-sheet-head h2 { font: 600 18px/1.25 var(--sp-display); letter-spacing: -0.02em; }
.sp-sheet-x { width: 34px; height: 34px; background: var(--sp-panel2); color: var(--sp-dust); }
.sp-sheet-x:active { transform: scale(0.92); background: var(--sp-line2); color: var(--sp-star); }
.sp-sheet-body { padding: 8px 20px calc(20px + var(--sa-b, 0px)); gap: 16px; }
.sp-sheet-body > :is(.sp-btn-row, .sp-btn.wide):last-child { position: sticky; bottom: 0; z-index: 2; margin-top: 4px; box-shadow: 0 -14px 14px -2px var(--sp-panel); }
.sp-sheet-body > .sp-btn-row:last-child { background: var(--sp-panel); }
.sp-sheet-root.closing .sp-sheet { animation: sp-slide 260ms cubic-bezier(0.4, 0, 1, 1) reverse forwards; }
@media (min-width: 720px) { .sp-sheet { border-radius: 28px; animation-name: sp-pop-in; } }
@keyframes sp-pop-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

/* сегменты и чипы — тише */
.sp-seg { background: var(--sp-panel2); }
.sp-seg button[aria-pressed="true"] { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); color: var(--sp-star); font-weight: 550; }
html[data-theme="dark"] .sp-seg button[aria-pressed="true"] { background: var(--sp-panel); }

/* успех: мягкий круг, линия обводки и галочка рисуются по очереди */
.wf-burst { height: 116px; }
.wf-check { filter: none; animation: none; overflow: visible; }
.wf-check .wf-disc { fill: var(--sp-aurora-soft); transform-origin: 32px 32px; animation: wf-soft-in 560ms var(--sp-ease-out) both; }
.wf-orbit { fill: none; stroke: var(--sp-aurora); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; animation: wf-line 760ms 120ms var(--sp-ease-out) forwards; }
.wf-check .wf-tick { stroke: var(--sp-aurora); stroke-width: 3.2; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; animation: wf-line 540ms 600ms var(--sp-ease-out) forwards; }
.wf-title { animation-duration: 520ms; animation-timing-function: var(--sp-ease-out); }
.wf-amt { color: var(--sp-aurora); font-weight: 600; animation-duration: 520ms; animation-timing-function: var(--sp-ease-out); }
.wf-sub { animation-duration: 520ms; animation-timing-function: var(--sp-ease-out); }
@keyframes wf-soft-in { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes wf-line { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sp-stat, .sp-sheet, .wf-check .wf-disc { animation: none; } .wf-orbit, .wf-check .wf-tick { animation: none; stroke-dashoffset: 0; opacity: 1; } }

/* панель ТС: касса и роли */
.ts-guard { display: grid; gap: 12px; padding: 18px; border-radius: 24px; background: var(--sp-panel); box-shadow: var(--sp-shadow); }
.ts-guard-h { display: flex; align-items: center; gap: 10px; font: 600 16px/1.2 var(--sp-body); }
.ts-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sp-aurora); box-shadow: 0 0 0 4px var(--sp-aurora-soft); }
.ts-guard.paused .ts-dot { background: var(--sp-nova); box-shadow: 0 0 0 4px var(--sp-nova-soft); }
.ts-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ts-flow > div { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--sp-panel2); }
.ts-flow small { font-size: 12px; color: var(--sp-dust); } .ts-flow b { font: 600 15px/1.1 var(--sp-display); }
.ts-meter { display: block; height: 4px; border-radius: 2px; background: var(--sp-line2); overflow: hidden; }
.ts-meter i { display: block; height: 100%; background: var(--sp-ink); transform-origin: left; transition: transform 700ms var(--sp-ease-out); } .ts-meter i.hot { background: var(--sp-nova); }
.ts-people { padding: 4px 0; }
.ts-person { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; }
.ts-person + .ts-person::before { content: ""; position: absolute; top: 0; left: 68px; right: 18px; height: 1px; background: var(--sp-line); }
.ts-person b { display: block; font-weight: 500; font-size: 15px; } .ts-person small { display: block; margin-top: 2px; font-size: 12.5px; }
.ts-ava { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sp-panel2); font: 600 14px/1 var(--sp-display); color: var(--sp-dust); }
.ts-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ts-role { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--sp-panel2); font: 500 12px/1.2 var(--sp-body); color: var(--sp-dust); }
.ts-role.ts { background: var(--sp-ink); color: #f1f5f9; } .ts-role.admin { background: var(--sp-ion-soft); color: var(--sp-ion); } .ts-role.fin { background: var(--sp-aurora-soft); color: var(--sp-aurora); }
.ts-role button { display: grid; place-items: center; width: 18px; height: 18px; margin-right: -5px; border-radius: 50%; color: inherit; opacity: 0.7; } .ts-role button:active { opacity: 1; background: rgba(127, 127, 127, 0.18); }

/* направления — одна карточка-список вместо отдельных плиток */
.sp-dirs.list { gap: 0; padding: 4px 0; border-radius: 24px; background: var(--sp-panel); box-shadow: var(--sp-shadow); }
@media (min-width: 960px) { .sp-dirs.list { grid-template-columns: minmax(0, 1fr); } }
.sp-dirs.list .sp-svcw { border-radius: 0; background: none; box-shadow: none; padding: 12px 16px 12px 18px; overflow: visible; }
.sp-dirs.list .sp-svcw::before { display: none; }
.sp-dirs.list .sp-svcw + .sp-svcw::after { content: ""; position: absolute; top: 0; left: 70px; right: 18px; height: 1px; background: var(--sp-line); }
.sp-dirs.list .sp-svcw:first-child { border-radius: 20px 20px 0 0; } .sp-dirs.list .sp-svcw:last-child { border-radius: 0 0 20px 20px; }
.sp-dirs.list .sp-svcw:active { transform: none; background: var(--sp-panel2); }
.sp-svcw .sp-ava { width: 38px !important; height: 38px !important; border-radius: 13px; background: var(--sp-panel2); color: var(--sp-dust); }
.sp-svcw .sp-ava svg { width: 20px; height: 20px; }
.sp-svcw .sp-grow b { font-weight: 500; font-size: 15px; } .sp-svcw .sp-grow small { font-size: 12.5px; }
.sp-svcw-v b { font-weight: 600; font-size: 17px; } .sp-svcw-v small { font-size: 11.5px; }

/* иконки в кружках — заливка без обводки (перебиваем и тоновые варианты) */
:is(.dp-ico, .wl-res-ico, .wl-opt-ico, .sp-ava)[class] { box-shadow: none; }
:is(.dp-ico, .wl-opt-ico, .sp-ava)[class] { background: var(--sp-panel2); }
.dp-ico.tone-pos[class] { background: var(--sp-aurora-soft); }
.wl-res-ico[class] { background: rgba(255, 255, 255, 0.08); }
/* лента кошелька: маленькие чипы фильтра, строки без рамок */
.wl-filter { margin-bottom: 2px; } .wl-filter .sp-chip { min-height: 30px; padding: 0 12px; font-size: 12.5px; background: none; }
.wl-filter .sp-chip.on { background: var(--sp-panel); color: var(--sp-star); box-shadow: var(--sp-shadow); }
html[data-theme="dark"] .wl-filter .sp-chip.on { background: var(--sp-panel2); }
.sp-hist-day { font: 500 11.5px/1 var(--sp-body); color: var(--sp-faint); }
.wl-dep { padding: 16px 18px; border-radius: 24px; }
.sp-sheet-x[class] { box-shadow: none; }
.sp-card.ts-people { padding: 4px 0; }
html[data-theme="dark"] :is(.wl-circ.primary, .sp-nav-item.on) { background: #2c3849; }
html[data-theme="dark"] .sp-btn.primary { background: #2c3849; color: #eef2f7; }

/* ═══ Телефон: экраны-чаты (ИИ, диалог с ТП, ЛТП) и клавиатура ═══════════════════════════════════════════════════════
   html.chatmode ставит сам экран чата (core/viewport.js → chatMode). Приложение прикрепляется к видимой области
   (--vv-top / --vv-h обновляются каждый кадр анимации клавиатуры): шапка сверху, лента прокручивается внутри,
   поле ввода стоит ровно над клавиатурой. Страница целиком не прокручивается — нечему прыгать и уезжать под клавиатуру. */
@media (max-width: 959px) {
  html.chatmode, html.chatmode body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  html.chatmode body { min-height: 0; position: fixed; inset: 0; }
  html.chatmode .sp-app { position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100dvh); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  html.chatmode .sp-top { position: relative; flex: none; }
  html.chatmode .sp-main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    padding: 6px 16px calc(var(--sp-nav-h) + var(--sa-b) + 18px); transition: padding-bottom 220ms var(--sp-ease-out); }
  html.chatmode.kb .sp-main { padding-bottom: 8px; }
  html.chatmode .sp-main > *, html.chatmode .pn-frame, html.chatmode .sp-split, html.chatmode .sp-pane-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  html.chatmode .pn-frame > *:last-child { flex: 1; min-height: 0; }
  html.chatmode .sp-split.has-detail .sp-pane-list { display: none; }
  /* диалоги: высота — от контейнера, а не от формулы окна */
  html.chatmode .sp-dlg, html.chatmode.kb .sp-dlg { flex: 1; height: auto; min-height: 0; gap: 10px; animation: none; }
  html.chatmode .sp-dlg-feed { -webkit-overflow-scrolling: touch; }
  /* ИИ: лента прокручивается внутри, поле ввода — внизу колонки, без липкого позиционирования */
  html.chatmode .sp-ai { flex: 1; min-height: 0; display: flex; }
  html.chatmode .sp-ai-chat { flex: 1; min-height: 0; }
  html.chatmode .sp-ai-head { flex: none; padding-bottom: 6px; }
  html.chatmode .sp-pin { flex: none; }
  html.chatmode .sp-ai-feed { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 2px 12px; margin: 0 -2px; }
  html.chatmode .sp-dock, html.chatmode.kb .sp-dock { position: relative; bottom: auto; flex: none; padding: 8px 0 0; }
  html.chatmode .sp-dock::before { display: none; }
  html.chatmode .sp-ai-down { bottom: calc(100% + 8px); }
  /* пока печатаем — освобождаем место для текста: заготовки и подсказки прячутся, поле ниже */
  html.chatmode.kb .sp-advice .sp-chips, html.chatmode.kb .sp-advice-head small { display: none; }
  html.chatmode.kb .sp-advice textarea { min-height: 72px; max-height: 120px; }
  html.chatmode.kb .sp-dlg-head { display: none; }
  html.chatmode .sp-kbhide { display: none; }
}
/* кнопка «скрыть клавиатуру» не перекрывает поля: прижата к правому краю над самой клавиатурой */
html.kb .sp-kbhide { bottom: auto; top: calc(var(--vv-top, 0px) + var(--vv-h, 100dvh) - 56px); }
/* шторки на телефоне тоже следуют за клавиатурой без задержки */
@media (max-width: 959px) {
  .sp-sheet-root { top: var(--vv-top, 0px); height: var(--vv-h, var(--app-h, 100dvh)); }
  .sp-sheet { max-height: calc(var(--vv-h, var(--app-h, 100dvh)) - var(--sa-t) - 12px); }
  .sp-sheet.full { height: calc(var(--vv-h, var(--app-h, 100dvh)) - var(--sa-t) - 12px); }
  html.kb .sp-sheet { border-radius: 24px 24px 0 0; }
}
@media (max-width: 959px) {
  html.chatmode.kb .sp-ai-head { display: none; }
  html.chatmode.kb .sp-top { padding-top: calc(var(--sa-t) + 4px); padding-bottom: 4px; }
}