/* Главная, тёмная тема: верхняя карточка «Чистые активы» + знак «Главная» в нижнем меню.
   Источник: persofin-home-card-handoff-v1. Применяется только в тёмной теме,
   светлая тема остаётся прежней. Логика и данные карточки не меняются. */

/* ---------- Нижняя навигация: фирменный знак вместо домика ---------- */
.tab-home-mark {
  display: block;
  width: 24px;
  height: 28px;
  background-color: currentColor;
  -webkit-mask: url('/assets/persofin-nav-home-mark.png') center / contain no-repeat;
  mask: url('/assets/persofin-nav-home-mark.png') center / contain no-repeat;
}
.tabbar.dense .tab-home-mark { width: 22px; height: 26px; }

/* ---------- Карточка «Чистые активы» (только тёмная тема) ---------- */
/* В светлой теме бюст не выводится совсем (иначе img рисуется в натуральную величину) */
.pf-net-card__bust { display: none; }
html[data-theme-eff="dark"] {
  --pf-page-bg: #080d10;
  --pf-card-start: #0b1718;
  --pf-card-mid: #004534;
  --pf-card-end: #071713;
  --pf-accent: #20d7a7;
  --pf-expense: #ff706a;
  --pf-text: #f3f7f6;
  --pf-muted: #a6b5c4;
  --pf-card-radius: 28px;
}

html[data-theme-eff="dark"] .view { overflow-x: clip; }

html[data-theme-eff="dark"] .card.hero.pf-net-card {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  min-height: 170px;
  overflow: visible;
  border: 0;
  border-radius: var(--pf-card-radius);
  padding: 0;
  background:
    radial-gradient(75% 120% at 63% 50%, rgba(0, 105, 75, 0.34), transparent 68%),
    linear-gradient(108deg, var(--pf-card-start) 0%, var(--pf-card-mid) 61%, var(--pf-card-end) 100%);
  color: var(--pf-text);
  box-shadow: none;
}

/* Контур отдельным слоем: справа затухает, правой линии под бюстом нет */
html[data-theme-eff="dark"] .card.hero.pf-net-card::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  box-sizing: border-box;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(32, 215, 167, 1) 0%,
    rgba(32, 215, 167, 0.95) 58%,
    rgba(32, 215, 167, 0.32) 70%,
    rgba(32, 215, 167, 0) 82%,
    rgba(32, 215, 167, 0) 100%
  );
  content: "";
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

html[data-theme-eff="dark"] .pf-net-card__content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  padding: 20px 18px 18px;
}

html[data-theme-eff="dark"] .pf-net-card .row { align-items: flex-start; min-height: 0; }

html[data-theme-eff="dark"] .pf-net-card__label,
html[data-theme-eff="dark"] .pf-net-card__label.muted {
  color: #dce5e8;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}

html[data-theme-eff="dark"] .pf-net-card .hero-gear { display: none; }

html[data-theme-eff="dark"] .pf-net-card__total,
html[data-theme-eff="dark"] .pf-net-card .big-num {
  margin-top: 8px;
  font-size: clamp(30px, 8.4vw, 42px);
  font-weight: 750;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

html[data-theme-eff="dark"] .pf-net-card .pf-value--negative,
html[data-theme-eff="dark"] .pf-net-card .big-num.neg {
  background: none;
  color: var(--pf-expense);
  padding: 0;
  margin-left: 0;
}

html[data-theme-eff="dark"] .pf-net-card__divider {
  width: min(72%, 480px);
  height: 1px;
  margin-top: 17px;
  background: rgba(205, 231, 229, 0.28);
}

html[data-theme-eff="dark"] .pf-net-card .hero-row,
html[data-theme-eff="dark"] .pf-net-card__metrics {
  display: grid;
  width: min(84%, 480px);
  margin-top: 11px;
  padding-top: 0;
  border-top: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 0;
}

html[data-theme-eff="dark"] .pf-net-card .hero-row.one { grid-template-columns: 1fr; }

html[data-theme-eff="dark"] .pf-net-card .hero-cell,
html[data-theme-eff="dark"] .pf-net-card__metric {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 0;
  background: none;
  border-radius: 0;
}

html[data-theme-eff="dark"] .pf-net-card .hero-cell + .hero-cell,
html[data-theme-eff="dark"] .pf-net-card__metric + .pf-net-card__metric {
  padding-left: 12px;
  border-left: 1px solid rgba(205, 231, 229, 0.3);
}

html[data-theme-eff="dark"] .pf-net-card .hero-label,
html[data-theme-eff="dark"] .pf-net-card .hero-label.muted,
html[data-theme-eff="dark"] .pf-net-card__metric span {
  overflow: hidden;
  color: #dce5e8;
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme-eff="dark"] .pf-net-card .hero-num,
html[data-theme-eff="dark"] .pf-net-card__metric strong {
  overflow: hidden;
  color: var(--pf-text);
  font-size: clamp(16px, 4.9vw, 28px);
  font-weight: 730;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme-eff="dark"] .pf-net-card .hero-liab,
html[data-theme-eff="dark"] .pf-net-card .hero-liab .hero-label {
  background: none;
  color: #dce5e8;
}

html[data-theme-eff="dark"] .pf-net-card .hero-liab .hero-num,
html[data-theme-eff="dark"] .pf-net-card__metric strong.pf-value--negative {
  color: var(--pf-expense);
}

html[data-theme-eff="dark"] .pf-net-card__bust {
  position: absolute;
  z-index: 1;
  top: -46px;
  right: -16px;
  display: block;
  width: clamp(146px, 39vw, 190px);
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 374px) {
  html[data-theme-eff="dark"] .card.hero.pf-net-card { min-height: 168px; }
  html[data-theme-eff="dark"] .pf-net-card__content { padding-left: 16px; padding-right: 16px; }
  html[data-theme-eff="dark"] .pf-net-card__divider,
  html[data-theme-eff="dark"] .pf-net-card .hero-row { width: 86%; }
  html[data-theme-eff="dark"] .pf-net-card__bust { top: -40px; right: -20px; width: 142px; }
}

@media (min-width: 600px) {
  html[data-theme-eff="dark"] .card.hero.pf-net-card { min-height: 196px; }
  html[data-theme-eff="dark"] .pf-net-card__content { padding: 24px 26px 22px; }
  html[data-theme-eff="dark"] .pf-net-card__label { font-size: 18px; }
  html[data-theme-eff="dark"] .pf-net-card__divider,
  html[data-theme-eff="dark"] .pf-net-card .hero-row { width: 66%; }
  html[data-theme-eff="dark"] .pf-net-card__bust { top: -58px; right: -24px; width: 210px; }
}

@media (min-width: 1024px) {
  html[data-theme-eff="dark"] .pf-net-card__bust { right: -30px; width: 225px; }
}