/* Главная */

/* QR на главной */
.hm-qr { display: grid; gap: 12px; padding: 16px; border-radius: var(--sp-r-l); background: var(--sp-panel); box-shadow: var(--sp-shadow); }
.hm-qr-t { display: flex; align-items: center; gap: 12px; }
.hm-qr-t b { display: block; font-weight: 600; font-size: 16px; } .hm-qr-t small { display: block; font-size: 13px; color: var(--sp-dust); }
.hm-qr-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--sp-ion); background: var(--sp-ion-soft); }
.hm-qr-o { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--sp-line); }
.hm-qr-open { flex: 1; min-width: 0; text-align: left; }
.hm-qr-open b { display: block; font-size: 16px; } .hm-qr-open small { display: block; font-size: 13px; color: var(--sp-dust); }

/* Главная: профиль, действия баланса и плитки разделов */
.hm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .hm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hm-tile { display: grid; align-content: start; gap: 4px; min-height: 112px; padding: 14px; border-radius: var(--sp-r-l); background: var(--sp-panel); box-shadow: var(--sp-shadow); text-align: left; min-width: 0; transition: transform 120ms ease; }
.hm-tile:active { transform: scale(0.98); }
.hm-tile-ico { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 6px; border-radius: 14px; color: var(--sp-ion); background: var(--sp-ion-soft); }
.hm-tile b { font-size: 15px; font-weight: 650; } .hm-tile small { font-size: 12.5px; line-height: 1.35; color: var(--sp-dust); }

/* Профиль: доля сервисов полосками */
.pf-svc { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--sp-line); }
.pf-svc:first-of-type { border-top: 0; padding-top: 2px; }
.pf-svc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pf-svc-h b { font-weight: 600; } .pf-svc-h span { font-weight: 650; } .pf-svc-h small { font-size: 12px; color: var(--sp-dust); font-weight: 500; }
.pf-svc-bar { height: 6px; border-radius: 6px; background: var(--sp-panel2); overflow: hidden; }
.pf-svc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b82f6, #6366f1); }
.pf-svc small { font-size: 12px; }

/* Профиль: одна акцентная поверхность, метрики рядом через gap */
.pf-hero { display: grid; gap: 18px; padding: 20px; border-radius: var(--sp-r-xl); background: var(--sp-glow), var(--sp-ink-grad); box-shadow: var(--sp-shadow-blue); color: var(--sp-on-ink); min-width: 0; position: relative; isolation: isolate; overflow: hidden; }
.pf-hero::before { content: ""; position: absolute; z-index: -1; inset: auto -10% -58% 18%; height: 130%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.2), transparent 62%); }
.pf-hero-art { position: absolute; z-index: -1; top: -6px; right: -12px; width: min(58%, 300px); color: rgba(255,255,255,.27); pointer-events: none; }
.pf-hero-top { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pf-hero-ava { width: 68px; height: 68px; font-size: 24px; }
.pf-hero-name { margin: 0; font: 650 24px/1.15 var(--sp-display); letter-spacing: -0.03em; }
.pf-hero-sub { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 13px; color: var(--sp-ink-dim); }
.pf-hero-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.pf-hero-kpi > div { display: grid; gap: 3px; padding: 11px 13px; border-radius: 14px; background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.11); min-width: 0; }
.pf-hero-kpi dt { font-size: 12px; color: var(--sp-ink-dim); }
.pf-hero-kpi dd { margin: 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.hm-wal { display: grid; gap: 14px; padding: 18px 20px; border-radius: var(--sp-r-l); background: var(--sp-panel); box-shadow: var(--sp-shadow); }
.hm-wal-sum { display: grid; gap: 4px; text-align: left; }
.hm-wal-sum small { font-size: 13px; color: var(--sp-dust); }
.hm-wal-sum b { font: 650 32px/1 var(--sp-display); letter-spacing: -0.04em; }
.hm-wal-sum i { margin-left: 8px; font: 600 12px/1 var(--sp-body); letter-spacing: 0.08em; font-style: normal; color: var(--sp-dust); }
.hm-wal-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hm-lead { margin: 0; }
@media (prefers-reduced-motion: reduce) { .hm-wal-sum, .hm-wal-acts .sp-btn { transition: none; } }