/* ═══ Эталонная тёмная тема: графитово-угольная палитра (грузится последней, перекрывает синеватые слои) ═══════════════
   фон #09090b · карточки #121316 · вложенное и поля #1a1c22 · модалки #22252d · рамки rgba(255,255,255,.08) */
html[data-theme="dark"], [data-theme="dark"] {
  --sp-void: #09090b; --sp-hull: #0d0e10; --sp-panel: #121316; --sp-panel2: #1a1c22; --sp-modal: #22252d;
  --sp-line: rgba(255, 255, 255, 0.08); --sp-line2: rgba(255, 255, 255, 0.12); --sp-btn-line: rgba(255, 255, 255, 0.12);
  --sp-star: #ececef; --sp-dust: #9a9ca6; --sp-faint: #62646e;
  --sp-ink: #1a1c22; --sp-ink-grad: linear-gradient(#1a1c22, #1a1c22);
  --sp-hero: linear-gradient(145deg, #15161a 0%, #1a1c22 55%, #20232b 100%);
  --sp-shadow: none; --sp-shadow-float: 0 18px 40px -22px rgba(0, 0, 0, 0.85);
}
html[data-theme="dark"] body { background: var(--sp-void); }
html[data-theme="dark"] .sp-sheet { background: var(--sp-modal); }
html[data-theme="dark"] .sp-sheet-body > .sp-seg { background: var(--sp-modal); }
html[data-theme="dark"] .sp-sheet-body > .sp-btn-row:last-child { background: var(--sp-modal); }
html[data-theme="dark"] .sp-sheet-body > :is(.sp-btn-row, .sp-btn.wide):last-child { box-shadow: 0 -14px 14px -2px var(--sp-modal); }
html[data-theme="dark"] .sp-sheet .nw-item, html[data-theme="dark"] .sp-sheet .sp-field { background: var(--sp-panel2); }
html[data-theme="dark"] .sp-sheet-x[class] { background: var(--sp-panel2); }
html[data-theme="dark"] .sp-field, html[data-theme="dark"] input.sp-field, html[data-theme="dark"] textarea.sp-field { background: var(--sp-panel2); border-color: var(--sp-line); color: var(--sp-star); }
html[data-theme="dark"] .sp-card, html[data-theme="dark"] .sp-catalog-card, html[data-theme="dark"] .qr-state { background: var(--sp-panel); border: 1px solid var(--sp-line); box-shadow: none; }
html[data-theme="dark"] .pn-client-panel { --sp-dust: #b8bbc5; --sp-faint: #969ba7; }
html[data-theme="dark"] .pn-client-panel .pn-act.hot small { color: #c4c7d0; }
html[data-theme="dark"] .pn-client-panel .pn-bal .sp-h2 { color: #c4c7d0; }
html[data-theme="dark"] .sp-card .sp-card, html[data-theme="dark"] .sp-card .sp-field { background: var(--sp-panel2); }
html[data-theme="dark"] .sp-top, html[data-theme="dark"] body.scrolled .sp-top { background: color-mix(in srgb, var(--sp-void) 92%, transparent); }
html[data-theme="dark"] .sp-backdrop { background: rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] :is(.hm-bal, .wl-hero, .dp-hero, .pn-hero, .pn-bal, .rf-hero, .sp-wave-card, .wf-dep-hero, .wf-res-hero, .sp-kpi.ink, .sp-ink) {
  background: var(--sp-hero); box-shadow: inset 0 0 0 1px var(--sp-line); }
html[data-theme="dark"] .sp-btn.primary { background: #ececef; color: #09090b; box-shadow: none; }
html[data-theme="dark"] .sp-btn.primary:disabled { background: var(--sp-panel2); color: var(--sp-faint); }
html[data-theme="dark"] :is(.wl-circ.primary, .sp-nav-item.on) { background: #2a2d36; color: #fff; box-shadow: none; }
html[data-theme="dark"] .sp-nav { background: #121316; border: 1px solid var(--sp-line); }
html[data-theme="dark"] .sp-chip.on { background: rgba(255, 255, 255, 0.1); color: var(--sp-star); box-shadow: inset 0 0 0 1px var(--sp-line2); }
html[data-theme="dark"] .sp-seg button[aria-pressed="true"] { background: var(--sp-modal); color: var(--sp-star); box-shadow: inset 0 0 0 1px var(--sp-line2); }
@media (min-width: 960px) {
  html[data-theme="dark"] .sp-app:not(.bare) .sp-nav { background: var(--sp-void); border-right: 1px solid var(--sp-line); }
  html[data-theme="dark"] .pn-frame .sp-pane-list { background: var(--sp-panel); border: 1px solid var(--sp-line); }
}
/* контрастные статусные бейджи */
html[data-theme="dark"] .sp-badge.ok, html[data-theme="dark"] .sp-pill.ok { background: rgba(74, 222, 128, 0.14); color: #6ee7a0; }
html[data-theme="dark"] .sp-badge.bad, html[data-theme="dark"] .sp-pill.bad { background: rgba(255, 90, 78, 0.16); color: #ff8a80; }
html[data-theme="dark"] .sp-badge.warn, html[data-theme="dark"] .sp-pill.warn { background: rgba(251, 191, 36, 0.14); color: #fcd34d; }

/* ═══ Мобильная гигиена: без горизонтального скролла и обрезанных адресов ═══ */
html, body { overflow-x: hidden; }
.sp-app, .sp-main, .sp-page { max-width: 100%; }
.sp-card code, .sp-kv-v, .sp-lead, .sp-h1, .sp-h2 { overflow-wrap: anywhere; }
.sp-btn { max-width: 100%; white-space: normal; }
@media (max-width: 430px) {
  .sp-sheet-body { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .sp-dock { bottom: calc(var(--sp-nav-h) + var(--sa-b) + 8px); }
}
/* на ПК сумма не дублируется крупным дисплеем рядом с обычным полем ввода */
@media (min-width: 960px) {
  .sp-pad-desktop-input .sp-field { font: 650 28px/1.1 var(--sp-display); min-height: 64px; padding-right: 76px; }
  .sp-pad-sheet .sp-pad-amt { font-size: 14px; opacity: .7; }
}

/* Grid-блоки без явных колонок растягивались по min-content детей (карточка баланса и форма входа выходили за экран на 320px). */
.hm-bal, .sp-boot, .boot { grid-template-columns: minmax(0, 1fr); }
.boot > *, .sp-boot > * { max-width: 100%; }
.login-form { max-width: 100%; }
.hm-bal .sp-btn-row > .sp-btn { min-width: 0; padding-inline: 10px; }
@media (max-width: 360px) { .hm-bal .sp-btn-row > .sp-btn svg { display: none; } }

/* Широкие мониторы: шапка выравнивается по тем же краям, что и рабочая область (max-width 1440px), а не прижата к краю окна. */
@media (min-width: 1720px) {
  .sp-app:not(.bare) .sp-top { padding-inline: calc((100vw - 216px - 1440px) / 2 + 32px); }
}