/*
 * Primary section cards («Финансы», «Доходы», «Расходы», «Аналитика») in the mobile-app hero language:
 * a saturated gradient, soft light and a fine ornament, white text. Base layer for both designs;
 * «Эфир» re-maps its own tokens on the same card (redesign-web/surfaces.css).
 * Switch: «Настройки → Персонализация → Цвет главных карточек» (body[data-card-accents]).
 */
body[data-card-accents="on"] .card[data-primary-card] {
    --hero-start: #0f6b50; --hero-mid: #0a4d3a; --hero-end: #052a20;
    --hero-glow-a: rgba(52, 211, 153, .5); --hero-glow-b: rgba(45, 212, 191, .3);
    --hero-accent: #a7f3d0; --hero-pos: #86efc4; --hero-neg: #ffb7aa;
    --hero-ink: #ffffff; --hero-muted: rgba(255, 255, 255, .76); --hero-subtle: rgba(255, 255, 255, .6);
    --hero-line: rgba(255, 255, 255, .16); --hero-tile: rgba(255, 255, 255, .1); --hero-tile-line: rgba(255, 255, 255, .15);
}
body[data-card-accents="on"] .card[data-primary-card="income"] {
    --hero-start: #1f6fe5; --hero-mid: #1446a8; --hero-end: #0b2560;
    --hero-glow-a: rgba(96, 205, 255, .5); --hero-glow-b: rgba(99, 102, 241, .42);
    --hero-accent: #bfe3ff; --hero-pos: #8af0c8; --hero-neg: #ffb7aa;
}
body[data-card-accents="on"] .card[data-primary-card="expense"] {
    --hero-start: #8c2c48; --hero-mid: #6a1f38; --hero-end: #3b0f20;
    --hero-glow-a: rgba(233, 164, 150, .42); --hero-glow-b: rgba(168, 85, 130, .34);
    --hero-accent: #f6d3cf; --hero-pos: #8af0c8; --hero-neg: #ffc2b6;
}
body[data-card-accents="on"] .card[data-primary-card="analytics"] {
    --hero-start: #3d4a66; --hero-mid: #26304a; --hero-end: #111827;
    --hero-glow-a: rgba(232, 200, 140, .34); --hero-glow-b: rgba(94, 234, 212, .2);
    --hero-accent: #f1e2c0; --hero-pos: #8af0c8; --hero-neg: #ffb7aa;
}

body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--hero-ink);
    border-color: transparent !important;
    background-color: var(--hero-mid) !important;
    background-image:
        radial-gradient(120% 95% at 108% -12%, var(--hero-glow-a), transparent 52%),
        radial-gradient(95% 80% at -18% 118%, var(--hero-glow-b), transparent 58%),
        linear-gradient(155deg, var(--hero-start) 0%, var(--hero-mid) 48%, var(--hero-end) 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 16px 30px -18px color-mix(in srgb, var(--hero-mid) 78%, transparent), 0 2px 6px -2px rgba(0, 0, 0, .18) !important;
}
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card]::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .07) 48%, transparent 60%),
        repeating-radial-gradient(circle at 115% -20%, rgba(255, 255, 255, .032) 0 1px, transparent 1px 22px);
    content: "";
    pointer-events: none;
}
body.yf-dashboard-auth.dark-theme[data-card-accents="on"] .card[data-primary-card] {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 30px -18px color-mix(in srgb, var(--hero-start) 62%, transparent) !important;
}

/* Text on the gradient in «Малахит». Legacy rules colour headings, notes and numbers separately, so list them;
   «Эфир» needs none of this: its tokens are re-mapped on the card. */
body.yf-dashboard-auth:not(.yf-redesign)[data-card-accents="on"] .card[data-primary-card] :is(.card-title, h3, h4, h5, h6, strong, b, .yf-total-money, .account-value, th, td, label) { color: var(--hero-ink) !important; }
body.yf-dashboard-auth:not(.yf-redesign)[data-card-accents="on"] .card[data-primary-card] :is(.card-subtitle, .text-muted, .card-text, small, p, .form-text) { color: var(--hero-muted) !important; }
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] .card-title .yf-card-title-icon,
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] .finance-analytics-heading-icon {
    color: #fff !important;
    background: rgba(255, 255, 255, .16) !important;
    box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .3);
}
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] :is(.yf-card-action, .yf-inline-info, .yf-card-auto-info, .yf-info-button) {
    border-radius: 50% !important;
    color: #fff !important;
    border: 0 !important;
    background: rgba(255, 255, 255, .16) !important;
    box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .3) !important;
}
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] :is(.yf-card-action, .yf-inline-info, .yf-card-auto-info, .yf-info-button):hover { background: rgba(255, 255, 255, .26) !important; }
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] i.ti { color: inherit; }

/* «Малахит»: legacy tiles, labels and icons keep their own colours, so map them onto the gradient. */
body.yf-dashboard-auth:not(.yf-redesign)[data-card-accents="on"] .card[data-primary-card] {
    --hero-skeleton: rgba(255, 255, 255, .22);
}
body.yf-dashboard-auth:not(.yf-redesign)[data-card-accents="on"] .card[data-primary-card] :is(.income-month-metric, .finance-analytics-kpi-column) {
    border: 1px solid var(--hero-tile-line) !important;
    background: var(--hero-tile) !important;
    box-shadow: none !important;
    color: var(--hero-ink) !important;
}
body.yf-dashboard-auth:not(.yf-redesign)[data-card-accents="on"] .card[data-primary-card] :is(.income-month-metric__label, .income-month-goal, .expense-budget-ring-caption, .finance-analytics-kpi__label, .finance-analytics-kpi__unit, .finance-analytics-kpi__note, .finance-analytics-kpi-column__title, .yf-analytics-compact-heading small) {
    color: var(--hero-muted) !important;
}
body.yf-dashboard-auth:not(.yf-redesign)[data-card-accents="on"] .card[data-primary-card] :is(.income-month-metric__value, .income-month-metric strong, .finance-analytics-kpi__value, .finance-analytics-kpi__value strong, .expense-budget-ring__center, .expense-budget-ring__center *, .yf-analytics-compact-heading strong, .yf-analytics-compact-value) {
    color: var(--hero-ink) !important;
}
body.yf-dashboard-auth:not(.yf-redesign)[data-card-accents="on"] .card[data-primary-card] :is(.income-month-metric__icon, .finance-analytics-kpi__icon, .finance-section-heading__icon) {
    color: #fff !important;
    background: rgba(255, 255, 255, .16) !important;
}
body.yf-dashboard-auth:not(.yf-redesign)[data-card-accents="on"] .card[data-primary-card] :is(.income-month-metric__subtext, .finance-analytics-kpi__note.is-danger, .text-danger) { color: var(--hero-neg) !important; }
body.yf-dashboard-auth:not(.yf-redesign)[data-card-accents="on"] .card[data-primary-card] :is(.finance-analytics-kpi__note.is-success, .text-success) { color: var(--hero-pos) !important; }
body.yf-dashboard-auth:not(.yf-redesign)[data-card-accents="on"] .card[data-primary-card] .yf-money-inline-skeleton { background: var(--hero-skeleton) !important; }

/* Ring hole in the colour of the card (the legacy hole is a white or dark disc). */
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] {
    --hero-hole: color-mix(in srgb, var(--hero-mid) 86%, #000);
}
body.yf-dashboard-auth:not(.yf-redesign)[data-card-accents="on"] .card[data-primary-card] .expense-budget-ring {
    background:
        radial-gradient(circle closest-side, var(--hero-hole) 73%, transparent 75%),
        conic-gradient(var(--hero-pos) var(--expense-budget-progress, 0%), rgba(255, 255, 255, .16) 0) !important;
    box-shadow: none !important;
}
body.yf-dashboard-auth:not(.yf-redesign)[data-card-accents="on"] .card[data-primary-card] .expense-budget-ring.is-overrun {
    background:
        radial-gradient(circle closest-side, var(--hero-hole) 73%, transparent 75%),
        conic-gradient(var(--hero-neg) var(--expense-budget-progress, 0%), rgba(255, 255, 255, .16) 0) !important;
}
body.yf-dashboard-auth:not(.yf-redesign)[data-card-accents="on"] .card[data-primary-card] .income-month-progress-ring {
    background:
        radial-gradient(circle closest-side, var(--hero-hole) 73%, transparent 75%),
        conic-gradient(var(--hero-pos) var(--income-progress, 0%), rgba(255, 255, 255, .16) 0) !important;
    box-shadow: none !important;
}
body.yf-dashboard-auth:not(.yf-redesign)[data-card-accents="on"] .card[data-primary-card] .finance-analytics-kpi-column {
    padding: 14px 16px !important;
    border-radius: 14px !important;
}

/* Numbers that scripts rewrite (plan lines, totals) keep the hero ink in both designs. */
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] :is(.yf-total-money__amount, .yf-total-money__amount span, strong.account-value, .account-value:not([style*="color"])) { color: var(--hero-ink) !important; }

/* «Расходы за месяц»: label · hint · value rows, one icon style. Variables follow the active look. */
.yf-exm {
    --exm-ink: #1f3a33; --exm-muted: #66797a; --exm-line: rgba(25, 92, 73, .12);
    --exm-chip: rgba(22, 129, 102, .1); --exm-accent: #168166;
}
.dark-theme .yf-exm { --exm-ink: #e3ece9; --exm-muted: #9aaba6; --exm-line: rgba(211, 225, 230, .1); --exm-chip: rgba(111, 211, 173, .12); --exm-accent: #6fd3ad; }
:root body.yf-redesign.yf-dashboard-auth .yf-exm { --exm-ink: var(--rd-ink); --exm-muted: var(--rd-muted); --exm-line: var(--rd-line-soft); --exm-chip: var(--rd-accent-soft); --exm-accent: var(--rd-accent); }
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] .yf-exm { --exm-ink: var(--hero-ink); --exm-muted: var(--hero-muted); --exm-line: rgba(255, 255, 255, .14); --exm-chip: rgba(255, 255, 255, .16); --exm-accent: #fff; }
.yf-exm .expense-month-card__metric-column { display: grid; align-content: start; gap: 0; }
.yf-exm-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 46px; padding: 7px 0; border-bottom: 1px solid var(--exm-line); color: var(--exm-ink); }
.yf-exm-row:last-child { border-bottom: 0; }
.yf-exm-icon { display: grid; width: 30px; height: 30px; aspect-ratio: 1; place-items: center; border-radius: 10px; background: var(--exm-chip); color: var(--exm-accent); font-size: 16px; }
.yf-exm-label { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--exm-muted); font-size: 13px; font-weight: 600; line-height: 1.3; }
.yf-exm-value { color: var(--exm-ink); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.yf-exm-value strong { font-weight: 700; }
.yf-exm .yf-inline-info { display: inline-grid; vertical-align: -3px; margin-left: 5px; }
body.yf-dashboard-auth .yf-exm :is(.yf-exm-label, .yf-exm-value, .yf-exm-value strong, .yf-exm-value span) { color: inherit; }
body.yf-dashboard-auth .yf-exm .yf-exm-label { color: var(--exm-muted) !important; }
body.yf-dashboard-auth .yf-exm .yf-exm-value, body.yf-dashboard-auth .yf-exm .yf-exm-value :is(strong, span:not(.yf-money-inline-skeleton)) { color: var(--exm-ink) !important; }


/* «Всего денег»: the faint dashed line tells that the amount can be hovered for the currency breakdown. */
body.yf-dashboard-auth[data-card-accents="on"] #card1 .yf-total-money__amount { padding-bottom: 2px; border-bottom: 1px dashed rgba(255, 255, 255, .4) !important; transition: border-color .2s ease; }
body.yf-dashboard-auth[data-card-accents="on"] #card1 .yf-total-money__amount:hover,
body.yf-dashboard-auth[data-card-accents="on"] #card1 .yf-total-money__amount:focus-visible { border-bottom-color: rgba(255, 255, 255, .85) !important; }
body.yf-dashboard-auth[data-card-accents="off"] #card1 .yf-total-money__amount { padding-bottom: 2px; border-bottom: 1px dashed color-mix(in srgb, currentColor 28%, transparent) !important; }

/* The currency breakdown popover is a light/dark surface of its own: it must not inherit the card's white ink. */
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] .yf-total-money__tooltip,
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] .yf-total-money__tooltip * { color: #263a34 !important; }
body.yf-dashboard-auth.dark-theme[data-card-accents="on"] .card[data-primary-card] .yf-total-money__tooltip,
body.yf-dashboard-auth.dark-theme[data-card-accents="on"] .card[data-primary-card] .yf-total-money__tooltip * { color: #e3ece9 !important; }
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] .yf-total-money__tooltip b { color: #0c7a5b !important; }
body.yf-dashboard-auth.dark-theme[data-card-accents="on"] .card[data-primary-card] .yf-total-money__tooltip b { color: #6fd3ad !important; }

/* «Расходы за месяц», round 2: quiet (i), a smaller ring that leaves room for the text */
body.yf-dashboard-auth .yf-exm .yf-inline-info,
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] .yf-exm .yf-inline-info {
    width: 16px; height: 16px; min-width: 16px; padding: 0; border: 0 !important; border-radius: 50% !important;
    background: transparent !important; box-shadow: none !important; color: var(--exm-muted) !important; opacity: .7;
    transition: opacity .18s ease;
}
body.yf-dashboard-auth .yf-exm .yf-inline-info:hover, body.yf-dashboard-auth .yf-exm .yf-inline-info:focus-visible { opacity: 1; color: var(--exm-ink) !important; }
body.yf-dashboard-auth .yf-exm .yf-inline-info i { font-size: 15px; }
.yf-exm-label { text-wrap: pretty; }
:root body.yf-redesign.yf-dashboard-auth .expense-budget-ring, body.yf-dashboard-auth .expense-budget-ring { width: 128px; height: 128px; }
.expense-budget-ring__center strong { font-size: 17px; line-height: 1.1; white-space: nowrap; }
.expense-budget-ring__center { max-width: 88px; }
body.yf-dashboard-auth .expense-budget-inline .yf-inline-info,
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] .expense-budget-inline .yf-inline-info {
    width: 16px; height: 16px; min-width: 16px; margin-left: 6px; padding: 0; vertical-align: -2px; border: 0 !important; border-radius: 50% !important;
    background: transparent !important; box-shadow: none !important; color: currentColor !important; opacity: .65; transition: opacity .18s ease;
}
body.yf-dashboard-auth .expense-budget-inline .yf-inline-info:hover { opacity: 1; }


/* Phone: the accordion groups of «Финансовая аналитика» (analyticsCompact.js) read light-on-colour in both designs */
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] :is(.yf-analytics-compact-toggle, .yf-analytics-compact-heading strong, .yf-analytics-compact-value, .yf-analytics-compact-toggle > .ti) { color: var(--hero-ink) !important; }
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] .yf-analytics-compact-heading small { color: var(--hero-muted) !important; opacity: 1; }
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] .yf-analytics-compact-toggle { border-bottom-color: var(--hero-line) !important; }
@media (max-width: 767.98px) {
    body.yf-dashboard-auth:not(.yf-redesign)[data-card-accents="on"] .card[data-primary-card] .finance-analytics-kpi-column { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
}

/* Signal colours of «Остаток бюджета», «Ожидаемый остаток», «Можно тратить в день»: green = fine, red = over.
   On the wine/blue/forest gradient plain red or green would melt into the card, so they sit in small pills. */
body.yf-dashboard-auth .yf-exm .yf-exm-value span.text-success { color: #0f8a5f !important; }
body.yf-dashboard-auth .yf-exm .yf-exm-value span.text-danger { color: #d03a47 !important; }
body.yf-dashboard-auth.dark-theme .yf-exm .yf-exm-value span.text-success { color: #6fd3ad !important; }
body.yf-dashboard-auth.dark-theme .yf-exm .yf-exm-value span.text-danger { color: #ff8a90 !important; }
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] .yf-exm .yf-exm-value :is(.text-success, .text-danger) {
    display: inline-block; padding: 1px 8px; border-radius: 8px; font-weight: 700; line-height: 1.45;
}
/* Quiet tint (not a solid badge): a dark translucent plate keeps the signal colour readable on any card colour. */
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] .yf-exm .yf-exm-value .text-success { color: #b9f5da !important; background: rgba(2, 40, 28, .3); }
body.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] .yf-exm .yf-exm-value .text-danger { color: #ffd0d4 !important; background: rgba(60, 0, 12, .34); }