/* Dashboard states shared by BOTH interface designs (base = «Малахит»):
 * instant modal hand-off, refresh indicators, calendar skeletons, premium card visibility.
 * Behaviour: js/financeDashboard/dashboardStates.js. «Эфир» refinements: css/redesign-web/motion.css.
 * See docs/WEB_INTERFACE_DESIGNS.md. */

/* ── Instant hand-off between stacked flows (calendar day ↔ category editor) ── */
:root body.yf-modal-swap.yf-modal-swap.yf-modal-swap :is(.modal, .modal .modal-dialog, .modal-backdrop) { transition: none !important; }
:root body.yf-modal-swap.yf-modal-swap.yf-modal-swap .modal.show .modal-content { animation: yf-modal-swap-in .16s ease-out both; }
@keyframes yf-modal-swap-in {
    from { opacity: .35; transform: scale(.985); }
    to { opacity: 1; transform: none; }
}

/* ── Cards whose data is being (re)loaded ── */
.card.yf-is-refreshing { position: relative; }
.card.yf-is-refreshing > .card-body { opacity: .62; filter: saturate(.7); transition: opacity .18s ease .06s, filter .18s ease .06s; }
.card.yf-is-refreshing::before {
    content: "";
    position: absolute;
    z-index: 6;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .3) 50%, transparent 80%);
    background-size: 300% 100%;
    animation: yf-card-refresh 1.7s ease-in-out .08s infinite both;
}
.dark-theme .card.yf-is-refreshing::before { background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .05) 50%, transparent 80%); }
/* Primary hero cards: no sweep at all (a light band across a coloured card looked like a glitch); they only dim a little. */
body[data-card-accents="on"] .card[data-primary-card].yf-is-refreshing::before { animation: none; z-index: -1; background-size: auto; }
body[data-card-accents="on"] .card[data-primary-card].yf-is-refreshing > .card-body { opacity: .86; filter: none; }
.card > .card-body { transition: opacity .22s ease, filter .22s ease; }
@keyframes yf-card-refresh {
    from { background-position: 130% 0; }
    to { background-position: -130% 0; }
}

/* ── Calendar grid skeleton (first render / empty grid while loading) ── */
.yf-calendar-skeleton {
    align-content: start;
    gap: 12px;
    min-height: 392px;
    padding: 14px;
    border: 1px solid rgba(28, 83, 66, .1);
    border-radius: 12px;
    background: #fff;
}
.dark-theme .yf-calendar-skeleton { border-color: rgba(211, 225, 230, .09); background: #1c2327; }
.yf-calendar-skeleton > i,
.yf-calendar-skeleton__cells > i {
    display: block;
    border-radius: 8px;
    background: linear-gradient(100deg, var(--yf-skeleton-base) 20%, var(--yf-skeleton-highlight) 40%, var(--yf-skeleton-base) 60%);
    background-size: 220% 100%;
    animation: yf-shared-skeleton 1.35s ease-in-out infinite;
}
.yf-calendar-skeleton__head { width: 46%; height: 22px; justify-self: center; }
.yf-calendar-skeleton__week { height: 12px; opacity: .6; }
.yf-calendar-skeleton__cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.yf-calendar-skeleton__cells > i { height: 44px; }
.yf-calendar-skeleton__total { width: 52%; height: 16px; justify-self: center; }
@media (max-width: 767.98px) {
    .yf-calendar-skeleton:not(.is-selected) { display: none; }
}

/* ── Premium analytics visibility for users without a subscription ── */
/* Hugs its content (icon + switch) instead of stretching across the page */
.yf-premium-visibility {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    padding: 7px 8px 7px 14px;
    border: 1px solid rgba(28, 83, 66, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
    color: #3d544d;
    font-size: 13px;
}
.dark-theme .yf-premium-visibility { border-color: rgba(211, 225, 230, .1); background: rgba(28, 35, 39, .72); color: #b8c6c2; }
.yf-premium-visibility__icon { display: inline-grid; flex: none; width: 26px; height: 26px; place-items: center; border-radius: 8px; background: rgba(214, 169, 93, .16); color: #b07d25; font-size: 15px; }
.yf-premium-visibility__switch { position: relative; display: inline-flex; flex: none; align-items: center; gap: 10px; margin: 0; cursor: pointer; font-weight: 600; }
.yf-premium-visibility__switch input { position: absolute; opacity: 0; pointer-events: none; }
/* Slim switch: 34×20 track, soft knob with a check when on (both designs; Эфир recolours via tokens) */
.yf-premium-visibility__track {
    position: relative;
    display: inline-block;
    flex: 0 0 34px;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: rgba(120, 130, 128, .28) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
    transition: background-color .22s ease, box-shadow .22s ease;
}
.yf-premium-visibility__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff center / 10px 10px no-repeat;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 2px 6px -2px rgba(0, 0, 0, .18);
    transition: transform .26s cubic-bezier(.34, 1.25, .64, 1), background-image .2s ease;
}
.yf-premium-visibility__switch:hover .yf-premium-visibility__track { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.yf-premium-visibility__switch input:checked + .yf-premium-visibility__track { background: #1f9b73 !important; }
.yf-premium-visibility__switch input:checked + .yf-premium-visibility__track::after {
    transform: translateX(14px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9b73' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.yf-premium-visibility__switch input:focus-visible + .yf-premium-visibility__track { outline: 2px solid #1f9b73; outline-offset: 2px; }
@media (max-width: 767.98px) {
    .yf-premium-visibility { padding: 7px 14px 7px 10px; }
    .yf-premium-visibility__switch { flex: 1 1 auto; justify-content: space-between; gap: 14px; }
    .yf-premium-visibility__extra { display: none; }
}

/* Collapsing premium columns: width and height shrink while neighbours take the space */
.yf-premium-slot { transition: width .52s cubic-bezier(.22, 1, .36, 1), max-height .52s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, margin .52s cubic-bezier(.22, 1, .36, 1), padding .52s cubic-bezier(.22, 1, .36, 1); }
.yf-premium-slot.is-collapsing { overflow: hidden; opacity: 0; pointer-events: none; }
.yf-premium-slot.is-collapsing > .card { transform: scale(.97); transition: transform .52s cubic-bezier(.22, 1, .36, 1); }
.yf-premium-slot.is-hidden { display: none !important; }
.yf-premium-fill { flex: 1 1 0% !important; width: auto !important; max-width: 100% !important; }
.yf-premium-row { transition: max-height .52s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, margin .52s cubic-bezier(.22, 1, .36, 1); }
/* Packed section (dashboardStates.js): visible cards of the section flow into one 2-column grid with the
   same 20px gutters as the rows, so a card whose neighbour is hidden pairs up with the next visible one. */
@media (min-width: 992px) {
    .yf-premium-packed:not([style*="none"]) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
    .yf-premium-packed > .row { display: contents; }
    .yf-premium-packed > .row > * { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
    .yf-premium-packed > .row > .yf-premium-span { grid-column: 1 / -1; }
    .yf-premium-packed > .row > * > .card { height: 100%; }
}
@media (max-width: 991.98px) {
    .yf-premium-packed:not([style*="none"]) { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .yf-premium-packed > .row { display: contents; }
    .yf-premium-packed > .row > * { width: auto !important; margin: 0 !important; padding: 0 !important; }
}
.yf-premium-row.is-collapsing { overflow: hidden; opacity: 0; margin-top: 0 !important; margin-bottom: 0 !important; }
.yf-premium-row.is-hidden { display: none !important; }

/* Reappearing cards: a Telegram-style spoiler that shimmers away */
.yf-spoiler-dust {
    position: absolute;
    z-index: 7;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background:
        radial-gradient(circle, rgba(120, 140, 135, .85) 0 .8px, transparent 1.3px) 0 0 / 7px 9px,
        radial-gradient(circle, rgba(120, 140, 135, .6) 0 .7px, transparent 1.2px) 3px 4px / 11px 13px,
        radial-gradient(circle, rgba(120, 140, 135, .45) 0 .6px, transparent 1.1px) 5px 2px / 5px 7px;
    animation: yf-spoiler-drift .9s linear both, yf-spoiler-clear .95s cubic-bezier(.5, 0, .3, 1) .15s both;
}
.dark-theme .yf-spoiler-dust {
    background:
        radial-gradient(circle, rgba(235, 245, 241, .75) 0 .8px, transparent 1.3px) 0 0 / 7px 9px,
        radial-gradient(circle, rgba(235, 245, 241, .5) 0 .7px, transparent 1.2px) 3px 4px / 11px 13px,
        radial-gradient(circle, rgba(235, 245, 241, .35) 0 .6px, transparent 1.1px) 5px 2px / 5px 7px;
}
@keyframes yf-spoiler-drift {
    from { background-position: 0 0, 3px 4px, 5px 2px; }
    to { background-position: 14px -18px, -19px 22px, 13px 16px; }
}
@keyframes yf-spoiler-clear {
    0% { opacity: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
    100% { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
}
.yf-premium-slot.is-revealing > .card { animation: yf-premium-rise .5s cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes yf-premium-rise {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: none; }
}

/* ── Inline (i) help next to field labels («Комментарий», crypto code…) ── */
label > span:has(> .yf-inline-info) { display: flex !important; flex-wrap: wrap; align-items: center; gap: 5px; }
.yf-inline-info { width: 16px; height: 16px; flex: none; line-height: 1; cursor: pointer; }
.yf-inline-info > i { display: block; font-size: 15px; line-height: 1; }

/* ── Drag-to-scroll finance tables (mouse) ── */
@media (pointer: fine) {
    .yf-table-stage .table-responsive { cursor: grab; }
    .yf-table-stage .table-responsive :is(td, th) { cursor: inherit; }
    .yf-table-stage .table-responsive :is(button, [role="button"], .cursor-pointer, a) { cursor: pointer; }
}
.yf-table-stage .table-responsive.is-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto !important; }
.yf-table-stage .table-responsive.is-dragging * { cursor: grabbing !important; }

/* ── Tag dots (both designs): the same crisp circle as the «Теги» cards, never an oval ── */
.yf-tag-swatch { flex: 0 0 12px !important; align-self: center; width: 12px !important; height: 12px !important; min-width: 12px; aspect-ratio: 1; }

/* «Статьи финансов» without accounts: one centred empty state (server render and assetsManagement.js) */
.yf-finance-articles-empty {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 22px 16px;
    color: #6c7f79;
    font-size: 12.5px;
    line-height: 1.45;
    text-align: center;
}
.yf-finance-articles-empty strong { color: #13302a; font-size: 14px; font-weight: 700; }
.yf-finance-articles-empty__icon {
    display: inline-grid;
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
    place-items: center;
    border-radius: 12px;
    background: rgba(22, 129, 102, .1);
    color: #168166;
    font-size: 20px;
}
.dark-theme .yf-finance-articles-empty { color: #93a5a0; }
.dark-theme .yf-finance-articles-empty strong { color: #eef6f3; }
.dark-theme .yf-finance-articles-empty__icon { background: rgba(111, 211, 173, .12); color: #6fd3ad; }
:root body.yf-redesign.yf-dashboard-auth .yf-finance-articles-empty { color: var(--rd-muted); }
:root body.yf-redesign.yf-dashboard-auth .yf-finance-articles-empty strong { color: var(--rd-ink); }
:root body.yf-redesign.yf-dashboard-auth .yf-finance-articles-empty__icon { background: var(--rd-accent-soft); color: var(--rd-accent); }

/* "Скрывать премиум-карточки" from the first frame: the server renders body.yf-premium-hidden, so locked
   cards never flash in before dashboardStates.js takes over (it adds the class after animations, removes it
   before showing). Mirrors the JS end state: hidden slots/rows, widows filled, Assets packed 50/50. */
/* Slot/row markers come from dashboardStates.js (runs before the first paint). They replace :has() rules
   that made every DOM change re-match the whole page (~15 ms per change: chart tooltips, tables, animations). */
body.yf-premium-hidden .yf-dashboard-shell .row > .yf-slot-locked { display: none !important; }
body.yf-premium-hidden .yf-dashboard-shell .row.yf-row-all-locked { display: none !important; }
body.yf-premium-hidden .yf-dashboard-shell .row.yf-row-has-locked > [class*="col"]:not(.yf-slot-locked) { flex: 1 1 0%; width: auto; max-width: 100%; }
@media (min-width: 992px) {
    body.yf-premium-hidden #actives-show:not([style*="none"]) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
    body.yf-premium-hidden #actives-show > .row { display: contents; }
    body.yf-premium-hidden #actives-show > .row > * { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
    body.yf-premium-hidden #actives-show > .row > .col-lg-12 { grid-column: 1 / -1; }
    body.yf-premium-hidden #actives-show > .row > * > .card { height: 100%; }
}
@media (max-width: 991.98px) {
    body.yf-premium-hidden #actives-show:not([style*="none"]) { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 20px; }
    body.yf-premium-hidden #actives-show > .row { display: contents; }
    body.yf-premium-hidden #actives-show > .row > * { width: auto !important; margin: 0 !important; padding: 0 !important; }
}

/* Tag chips (expense and income alike): long names end with an ellipsis, the full name shows in a tooltip */
.yf-dashboard-shell :is(.expense-tag-name, .income-tag-name) { display: inline-block; min-width: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* Tag reorder (tagReorder.js): 4-dot grip left of the chip, jiggle while arranging, lifted ghost, edge nudge */
#tagsContainer .tag, #incomeTagsContainer .tag { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.yf-tag-grip {
    display: inline-grid;
    grid-template-columns: repeat(2, 3px);
    gap: 2px;
    width: 0;
    margin-right: 0;
    overflow: hidden;
    opacity: 0;
    color: currentColor;
    vertical-align: middle;
    cursor: grab;
    transition: width .18s ease, margin .18s ease, opacity .18s ease;
}
.yf-tag-grip i { display: block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
@media (hover: hover) {
    .tag:hover .yf-tag-grip { width: 8px; margin-right: 6px; opacity: 1; }
}
.yf-tags-reordering .yf-tag-grip { width: 8px; margin-right: 6px; opacity: 1; }
.yf-tags-reordering .tag:not(.is-drag-origin) { animation: yf-tag-jiggle .3s ease-in-out infinite alternate; will-change: transform; }
.yf-tags-reordering .tag:nth-child(2n):not(.is-drag-origin) { animation-delay: -.13s; }
@keyframes yf-tag-jiggle { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }
/* The empty slot where the chip will land: a dashed «подставка» of the same size */
.tag.is-drag-origin {
    opacity: 1 !important;
    border-radius: 12px;
    background: rgba(22, 129, 102, .07) !important;
    box-shadow: inset 0 0 0 1.5px rgba(22, 129, 102, .5) !important;
    outline: 1.5px dashed rgba(22, 129, 102, .55);
    outline-offset: -1.5px;
    animation: none !important;
}
.tag.is-drag-origin > * { visibility: hidden; }
.dark-theme .tag.is-drag-origin { background: rgba(120, 220, 180, .08) !important; box-shadow: inset 0 0 0 1.5px rgba(120, 220, 180, .4) !important; outline-color: rgba(120, 220, 180, .45); }
.yf-tag-drag-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    margin: 0 !important;
    pointer-events: none;
    border-radius: 12px;
    background: var(--rd-surface, #fff);
    box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .38), 0 0 0 1px rgba(22, 129, 102, .18);
    transform-origin: center;
    will-change: transform;
}
.dark-theme .yf-tag-drag-ghost { background: var(--rd-surface, #1c2327); }
.yf-tag-drag-ghost .yf-tag-grip { width: 8px; margin-right: 6px; opacity: 1; }
body.yf-tag-dragging, body.yf-tag-dragging * { cursor: grabbing !important; -webkit-user-select: none !important; user-select: none !important; }
/* Held at an edge: that edge of the card lights up in deep blue, then the page turns */
.yf-tag-edge-host { position: relative; }
.yf-tag-edge-host::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .22s ease, background .22s ease;
}
.yf-tag-edge-host.yf-tag-edge-next::after { opacity: 1; background: linear-gradient(to left, rgba(30, 58, 138, .30), rgba(30, 58, 138, .10) 44px, rgba(30, 58, 138, 0) 110px); box-shadow: inset -2px 0 0 rgba(30, 58, 138, .55); }
.yf-tag-edge-host.yf-tag-edge-prev::after { opacity: 1; background: linear-gradient(to right, rgba(30, 58, 138, .30), rgba(30, 58, 138, .10) 44px, rgba(30, 58, 138, 0) 110px); box-shadow: inset 2px 0 0 rgba(30, 58, 138, .55); }
.dark-theme .yf-tag-edge-host.yf-tag-edge-next::after { background: linear-gradient(to left, rgba(96, 140, 255, .32), rgba(96, 140, 255, .10) 44px, rgba(96, 140, 255, 0) 110px); box-shadow: inset -2px 0 0 rgba(120, 160, 255, .6); }
.dark-theme .yf-tag-edge-host.yf-tag-edge-prev::after { background: linear-gradient(to right, rgba(96, 140, 255, .32), rgba(96, 140, 255, .10) 44px, rgba(96, 140, 255, 0) 110px); box-shadow: inset 2px 0 0 rgba(120, 160, 255, .6); }
/* Chips move by FLIP only: no page transforms or smooth scrolling under the pointer while arranging */
.yf-tags-reordering :is(.expense-tags-page, .income-tags-page) { transform: none !important; transition: none !important; }
body.yf-reduced-motion .yf-tags-reordering .tag:not(.is-drag-origin) { animation: none; }
@media (prefers-reduced-motion: reduce) { .yf-tags-reordering .tag:not(.is-drag-origin) { animation: none; } }

/* ── Month plans (monthPlans.js): one cell per month, Premium reconciliation, locked breakdown ── */
.yf-month-plan-stage + .yf-table-stage { margin-top: 14px; }
.yf-plan-residual-label, .yf-plan-residual-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 4px 10px; background: rgba(199, 65, 77, .10); color: #b43c48; font-weight: 600; white-space: nowrap; }
.yf-plan-residual-badge.is-balanced { background: transparent; color: #6c7f79; }
.yf-plan-residual-row .yf-plan-residual-badge { font-size: 11px; line-height: 1.4; }
.yf-month-plan-residual-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.yf-month-plan-residual-actions .yf-inline-action { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 10px; background: var(--bs-tertiary-bg); }
.dark-theme :is(.yf-plan-residual-label, .yf-plan-residual-badge) { background: rgba(255, 138, 142, .12); color: #ff8a8e; }
.dark-theme .yf-plan-residual-badge.is-balanced { background: transparent; color: #93a5a0; }
.yf-month-plan-readonly { display: grid; gap: 16px; }
#monthPlanModal [hidden] { display: none !important; }
.yf-month-plan-readonly__amount { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.yf-month-plan-readonly__comment { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow: auto; }
.yf-month-plan-hint.yf-month-plan-explanation { margin: 16px 0 0; }
.yf-month-plan-table { min-width: 720px; }
.dark-theme:not(.yf-redesign) .yf-finance-form-dialog textarea::placeholder { color: #a9a9a9; opacity: 1; }
.yf-month-plan-cell { min-width: 76px; transition: background-color .18s ease; }
.yf-month-plan-cell:hover, .yf-month-plan-cell:focus-visible { background: rgba(22, 129, 102, .06); }
.yf-month-plan-cell .ti-circle-plus { opacity: .45; font-size: 16px; }
.yf-month-plan-cell.is-current { box-shadow: inset 0 -2px 0 #1f9b73; }
.yf-month-plan-amount { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.yf-month-plan-comment { font-size: 13px; opacity: .55; }
.yf-month-plan-chip { display: flex; align-items: center; justify-content: center; gap: 3px; width: max-content; margin: 4px auto 0; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.yf-month-plan-chip.is-open { background: rgba(199, 154, 58, .14); color: #9a6c14; }
.yf-month-plan-chip.is-over { background: rgba(229, 72, 77, .12); color: #c3353b; }
.yf-month-plan-chip.is-done { background: rgba(22, 129, 102, .1); color: #168166; }
.dark-theme .yf-month-plan-chip.is-open { color: #e9c37a; }
.dark-theme .yf-month-plan-chip.is-over { color: #ff8a8e; }
.dark-theme .yf-month-plan-chip.is-done { color: #6fd3ad; }
.yf-month-plan-note { margin: 8px 2px 0; color: #6c7f79; font-size: 12px; line-height: 1.45; }
.dark-theme .yf-month-plan-note { color: #93a5a0; }
.yf-month-plan-cell.is-pulse { animation: yf-month-plan-pulse 1.4s ease-out 1; }
@keyframes yf-month-plan-pulse { 0% { box-shadow: inset 0 0 0 2px rgba(31, 155, 115, .8); } 100% { box-shadow: inset 0 0 0 2px rgba(31, 155, 115, 0); } }
/* Free plan: the breakdown is visible as structure only */
.yf-table-stage.is-plan-locked { position: relative; min-height: 220px; }
.yf-table-stage.is-plan-locked > .table-responsive { filter: blur(2.5px) saturate(.6); opacity: .5; pointer-events: none; user-select: none; }
.yf-table-stage.is-plan-locked .yf-table-empty { display: none !important; }
.yf-plan-lock { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 20px; text-align: center; }
.yf-plan-lock strong { font-size: 15px; }
.yf-plan-lock > span:not(.yf-plan-lock__icon) { max-width: 360px; color: #6c7f79; font-size: 12.5px; line-height: 1.45; }
.yf-plan-lock__icon { display: inline-grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: rgba(199, 154, 58, .16); color: #b07d25; font-size: 19px; }
.yf-plan-lock .btn { margin-top: 6px; }
/* With one or two plan rows the table is shorter than the lock (and a later :has() rule zeroes min-height),
   so the lock and the table share one grid cell: the stage is always as tall as the taller of the two. */
.yf-table-stage.is-plan-locked { display: grid; }
.yf-table-stage.is-plan-locked > :is(.table-responsive, .yf-plan-lock) { grid-area: 1 / 1; }
.yf-table-stage.is-plan-locked > .yf-plan-lock { position: relative; inset: auto; min-height: 220px; }
/* Month plan modal: reconciliation with the breakdown (Premium) */
.yf-month-plan-hint { margin: 0 0 14px; color: #6c7f79; font-size: 12.5px; line-height: 1.45; }
.dark-theme .yf-month-plan-hint { color: #93a5a0; }
.yf-month-plan-reconcile { display: grid; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(22, 129, 102, .06); }
.yf-month-plan-reconcile__rows { display: grid; gap: 6px; font-size: 13px; }
.yf-month-plan-reconcile__rows > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.yf-month-plan-reconcile__rows .is-over { color: #c3353b; }
.yf-month-plan-reconcile__rows .is-open { color: #9a6c14; }
.yf-month-plan-reconcile__rows .is-done { color: #168166; }
.yf-month-plan-reconcile__actions { display: grid; gap: 6px; }
.yf-month-plan-reconcile__actions small { color: #6c7f79; font-size: 11.5px; }
.yf-month-plan-status:empty { display: none; }
.yf-month-plan-status { margin: 10px 0 0; font-size: 12.5px; }
.yf-month-plan-status.is-error { color: #c8414d; }
:root body.yf-redesign.yf-dashboard-auth .yf-month-plan-cell:hover { background: var(--rd-fill-soft); }
:root body.yf-redesign.yf-dashboard-auth .yf-month-plan-cell.is-current { box-shadow: inset 0 -2px 0 var(--rd-accent); }
:root body.yf-redesign.yf-dashboard-auth .yf-month-plan-reconcile { background: var(--rd-fill-soft); }
:root body.yf-redesign.yf-dashboard-auth :is(.yf-month-plan-note, .yf-month-plan-hint, .yf-plan-lock > span:not(.yf-plan-lock__icon)) { color: var(--rd-muted); }
:root body.yf-redesign.yf-dashboard-auth .yf-plan-lock__icon { background: var(--rd-gold-soft); color: var(--rd-gold); }
.yf-plan-view-toolbar .yf-income-view-switch { white-space: nowrap; }
.yf-plan-view-toolbar .yf-income-view-switch span { white-space: nowrap; }

/* «Статьи финансов»: accounts open «Деньги и криптовалюта» with the account expanded */
#card4 .yf-finance-article--bank { cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease; }
#card4 .yf-finance-article--bank:hover { background-color: rgba(22, 130, 101, .06); }
#card4 .yf-finance-article--bank:focus-visible { outline: 2px solid #168265; outline-offset: 2px; }
.dark-theme #card4 .yf-finance-article--bank:hover { background-color: rgba(144, 220, 191, .07); }
:root body.yf-redesign.yf-dashboard-auth #card4 .yf-finance-article--bank:hover { background-color: var(--rd-fill-soft); }
/* Green frame around the account opened from «Статьи финансов»: an outline, so «Эфир» card shadows (!important) do not hide it */
#asset-bank-list .yf-asset-row.is-spotlit { outline: 2px solid transparent; outline-offset: 0; animation: yf-bank-spotlight 2.4s ease-out; }
@keyframes yf-bank-spotlight {
    0% { outline-color: rgba(47, 191, 140, 0); outline-offset: 4px; }
    12%, 55% { outline-color: rgba(47, 191, 140, .75); outline-offset: 0; }
    100% { outline-color: rgba(47, 191, 140, 0); outline-offset: 0; }
}
body.yf-reduced-motion #asset-bank-list .yf-asset-row.is-spotlit { animation: none; outline-color: rgba(47, 191, 140, .6); }

/* «Статьи финансов» + «Активы»: the pair takes the height of «Активы» as it is with a subscription. A locked
   «Активы» keeps that height instead of shrinking the articles; a long article list scrolls inside. */
@media (min-width: 992px) {
    body:not(.yf-premium-hidden):not(.yf-offline) .yf-assets-paired-row #card4 { contain: size; align-self: stretch; }
    body:not(.yf-premium-hidden):not(.yf-offline) .yf-assets-paired-row #card5.yf-card--subscription-locked { min-height: 372px; }
    body:not(.yf-premium-hidden):not(.yf-offline) .yf-assets-paired-row #card5:not(.yf-card--subscription-locked) { min-height: 300px; }
}

/* Asset rows in «Деньги и криптовалюта»: the chevron turns with the smooth expand / collapse (assetsManagement.js) */
.yf-asset-row > summary > .ti-chevron-down { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.yf-asset-row[open]:not(.is-closing) > summary > .ti-chevron-down { transform: rotate(180deg); }
:root body.yf-redesign.yf-dashboard-auth .yf-asset-row.is-closing > summary > .ti-chevron-down { transform: none; }
body.yf-reduced-motion .yf-asset-row > summary > .ti-chevron-down { transition: none; }

/* Wider grab area for the reorder grip: the left edge of a chip shows the grab cursor (tagReorder.js grabs within 30px) */
@media (hover: hover) {
    #tagsContainer .tag :is(.expense-tag-select), #incomeTagsContainer .tag :is(.income-tag-select) { position: relative; }
    #tagsContainer .tag .expense-tag-select::before, #incomeTagsContainer .tag .income-tag-select::before {
        content: ""; position: absolute; top: -4px; bottom: -4px; left: -6px; width: 30px; cursor: grab; z-index: 1;
    }
    .yf-tag-grip i { width: 3.5px; height: 3.5px; }
}

/* «Малахит» only: the amount field (calculator + number + currency) no longer squeezes «Комментарий» in
   income / expense day editors and plan editors. «Эфир» keeps its own grid (redesign-web/fields.css). */
@media (min-width: 901px) {
    body.yf-dashboard-auth:not(.yf-redesign) :is(.expense-item, .income-item) .yf-entry-editor__fields {
        grid-template-columns: minmax(185px, .95fr) minmax(200px, 1.35fr) minmax(112px, .5fr);
    }
}
body.yf-dashboard-auth:not(.yf-redesign) .yf-expense-plan-row { grid-template-columns: minmax(185px, 1fr) minmax(180px, 1.2fr) 34px; }
body.yf-dashboard-auth:not(.yf-redesign) .yf-month-plan-editor__item { grid-template-columns: minmax(170px, .9fr) minmax(190px, 1.2fr) 36px; }
body.yf-dashboard-auth:not(.yf-redesign) .yf-amount-input > .form-control { min-width: 0; }
@media (max-width: 575.98px) {
    body.yf-dashboard-auth:not(.yf-redesign) .yf-expense-plan-row { grid-template-columns: minmax(0, 1fr) 34px; }
}
body.yf-dashboard-auth:not(.yf-redesign) .yf-amount-input input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
body.yf-dashboard-auth:not(.yf-redesign) .yf-amount-input input[type="number"]::-webkit-inner-spin-button,
body.yf-dashboard-auth:not(.yf-redesign) .yf-amount-input input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

/* «Без деталей»: calmer sums in the plan tables (both designs) */
.yf-plan-residual-row .yf-plan-residual-badge { padding: 2px 8px; font-size: 11px !important; font-weight: 650; line-height: 1.45; }
.yf-plan-residual-row .yf-plan-residual-label { padding: 3px 9px; font-size: 11.5px; }
.yf-plan-residual-row td:last-child :is(.table-tag-sum, span) { font-size: 12px; }

/* «Без деталей» dialog: amount and comment side by side, the note as a quiet callout */
.yf-month-plan-diff-editor { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: rgba(22, 129, 102, .05); box-shadow: inset 0 0 0 1px rgba(22, 129, 102, .12); }
.yf-month-plan-diff-editor__grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.yf-month-plan-diff-editor__amount { max-width: 320px; }
.yf-month-plan-diff-editor__amount > label { margin: 0; }
.yf-month-plan-counter { display: block; margin-top: 4px; color: #7b8b86; font-size: 11.5px; font-weight: 550; text-align: right; font-variant-numeric: tabular-nums; }
.yf-month-plan-counter.is-near { color: #c07a0c; }
.yf-month-plan-counter.is-full { color: #c7414d; font-weight: 700; }
:root body.yf-redesign.yf-dashboard-auth .yf-month-plan-counter:not(.is-near):not(.is-full) { color: var(--rd-subtle); }
.yf-month-plan-diff-editor__field { display: grid; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 650; color: #52615c; }
.yf-month-plan-diff-editor__field .form-control { min-height: 42px; }
.yf-month-plan-diff-editor__field textarea.form-control { min-height: 42px; resize: vertical; }
.yf-month-plan-diff-editor__note { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: #5f716b; font-size: 12.5px; line-height: 1.45; }
.yf-month-plan-diff-editor__note .ti { flex: 0 0 auto; margin-top: 1px; font-size: 15px; color: #168265; }
.dark-theme .yf-month-plan-diff-editor { background: rgba(120, 220, 180, .05); box-shadow: inset 0 0 0 1px rgba(120, 220, 180, .12); }
.dark-theme :is(.yf-month-plan-diff-editor__field, .yf-month-plan-diff-editor__note) { color: #9eb0aa; }
.dark-theme .yf-month-plan-diff-editor__note .ti { color: #6fd3ad; }
:root body.yf-redesign.yf-dashboard-auth .yf-month-plan-diff-editor { background: var(--rd-surface-grouped); box-shadow: inset 0 0 0 1px var(--rd-line-soft); border-radius: var(--rd-radius-md); }
:root body.yf-redesign.yf-dashboard-auth :is(.yf-month-plan-diff-editor__field, .yf-month-plan-diff-editor__note) { color: var(--rd-muted); }
:root body.yf-redesign.yf-dashboard-auth .yf-month-plan-diff-editor__field > span:first-child { color: var(--rd-ink-2); }
:root body.yf-redesign.yf-dashboard-auth .yf-month-plan-diff-editor__note .ti { color: var(--rd-accent); }
@media (max-width: 575.98px) { .yf-month-plan-diff-editor__amount { max-width: none; } }

/* Short dashboard pages (e.g. premium cards hidden): content keeps its own height and the footer takes the
   rest of the viewport with its own background, instead of a large empty band above the footer. */
body.yf-dashboard-auth .content { min-height: 0 !important; flex-grow: 0 !important; }
body.yf-dashboard-auth > footer, body.yf-dashboard-auth .yf-public-footer { flex: 1 0 auto; }

/* «Всего денег»: compact rows (code · amount close together, conversion on the right); on touch screens the
   list is fixed inside the viewport (assetsManagement.js → placeTouchTooltip). */
.yf-total-money__tooltip .yf-total-money__composition-row,
.yf-total-money__tooltip .yf-total-money__composition-total { grid-template-columns: minmax(38px, max-content) max-content 1fr !important; gap: 6px 10px !important; }
.yf-total-money__tooltip .yf-total-money__composition-row > span { justify-self: start !important; }
.yf-total-money__tooltip .yf-total-money__composition-row small { justify-self: end; }
.yf-total-money__tooltip .yf-total-money__composition-total > span { grid-column: 2 / 4; justify-self: end; }
@media (hover: none), (pointer: coarse) {
    .yf-total-money__tooltip { min-width: 0 !important; max-width: calc(100vw - 24px); }
    .yf-total-money__amount.is-open .yf-total-money__tooltip.is-viewport { position: fixed !important; transform: none !important; z-index: 1070; bottom: auto; }
}

/* Crypto logos are drawn as they are: no round frame, clip or tinted plate around their own PNG shapes. */
.yf-finance-article__coin,
:root body.yf-redesign.yf-dashboard-auth .yf-finance-article__coin { border-radius: 0 !important; box-shadow: none !important; object-fit: contain !important; background: transparent !important; }
.yf-asset-row__icon--coin,
:root body.yf-redesign.yf-dashboard-auth .yf-asset-row__icon--coin { overflow: visible !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.yf-asset-row__icon--coin img,
:root body.yf-redesign.yf-dashboard-auth .yf-asset-row__icon--coin img { width: 30px !important; height: 30px !important; border-radius: 0 !important; object-fit: contain !important; }

/* Phones: the profile notification dot sits at the top-right corner of the name, clear of the ▾ chevron. */
@media (max-width: 767.98px) {
    .yf-authorized-nav .yf-nav-account-label { margin-right: 10px; }
    .yf-authorized-nav #profile-notify {
        left: auto !important; right: -9px; top: -2px !important;
        margin: 0 !important; transform: none !important;
        width: 8px; height: 8px; padding: 0 !important;
    }
}

/* Phones: the bug-report button is a true circle with its icon centred (the «Эфир» pill padding 0 16px 0 6px
   used to leak into it and shift the icon). */
@media (max-width: 575.98px) {
    .yf-error-report__trigger,
    :root body.yf-redesign.yf-dashboard-auth .yf-error-report__trigger {
        box-sizing: border-box; width: 48px !important; height: 48px !important; min-height: 48px; padding: 0 !important;
        display: inline-grid !important; place-items: center; gap: 0 !important; border-radius: 50% !important;
    }
    .yf-error-report__trigger i { width: 36px; height: 36px; margin: 0; }
}

/* Phones: an operation row reads in three lines — amount, comment (both full width), then date + delete. */
@media (max-width: 767.98px) {
    .yf-entry-editor,
    :root body.yf-redesign.yf-dashboard-auth .yf-entry-editor {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: end;
        gap: 10px !important;
    }
    .yf-entry-editor > .yf-entry-editor__fields,
    :root body.yf-redesign.yf-dashboard-auth .yf-entry-editor > .yf-entry-editor__fields { display: contents !important; }
    .yf-entry-editor .yf-entry-editor__amount,
    .yf-entry-editor .yf-entry-editor__comment { grid-column: 1 / -1 !important; }
    .yf-entry-editor .yf-entry-editor__date { grid-column: 1 !important; }
    .yf-entry-editor > .yf-entry-editor__actions { grid-column: 2 !important; align-self: end; justify-content: flex-end; }
    .yf-entry-editor > :not(.yf-entry-editor__actions):not(.yf-entry-editor__fields) { grid-column: 1 / -1 !important; }
}

/* Plan cards (Premium breakdown): with the view switch hidden the heading kept its empty grid rows and their gaps,
   so «Добавить план» floated ~40px above the table. Collapse to title + action | (i) and a single, even gap. */
[data-month-plan-card] .yf-table-card-heading--with-view.is-single-view {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
[data-month-plan-card] .yf-table-card-heading--with-view.is-single-view > div:first-child { flex: 1 1 auto; min-width: 0; }
[data-month-plan-card] .yf-table-card-heading--with-view.is-single-view ~ .yf-table-stage { margin-top: 12px; }
[data-month-plan-card] .yf-table-card-heading--with-view.is-single-view ~ .yf-table-stage .table.mt-3 { margin-top: 0 !important; }

/* Phones: period selector docked at the top while scrolling (js: dashboardStates.js), account bar slides away */
@media (max-width: 767.98px) {
    .yf-authorized-nav { transition: transform .28s cubic-bezier(.25, .8, .25, 1); }
    body.yf-period-docked .yf-authorized-nav { transform: translateY(calc(-100% - 2px)); box-shadow: none; }
    .yf-dashboard-period.is-docked {
        position: fixed !important; top: max(8px, env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 1025;
        width: auto !important; margin: 0 !important;
        box-shadow: 0 14px 34px -16px rgba(12, 40, 32, .38), 0 0 0 1px rgba(23, 105, 79, .08);
        animation: yf-period-dock .24s cubic-bezier(.25, .8, .25, 1);
    }
    body.yf-offline-visible .yf-dashboard-period.is-docked { top: calc(max(8px, env(safe-area-inset-top)) + 60px); }
    body.dark-theme .yf-dashboard-period.is-docked { box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); }
    body.modal-open .yf-dashboard-period.is-docked { visibility: hidden; }
}
@keyframes yf-period-dock { from { opacity: .4; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .yf-dashboard-period.is-docked { animation: none; } .yf-authorized-nav { transition: none; } }

/* Crypto logos, 29.09: compact next to the account icons; square logos get soft corners (round ones are unaffected) */
.yf-finance-article__coin,
:root body.yf-redesign.yf-dashboard-auth .yf-finance-article__coin { flex: 0 0 20px; width: 20px !important; height: 20px !important; border-radius: 6px !important; }
:root body.yf-redesign.yf-dashboard-auth #card4 .yf-finance-article__coin { margin: 0 4px 0 4px; }
.yf-asset-row__icon--coin img,
:root body.yf-redesign.yf-dashboard-auth .yf-asset-row__icon--coin img { width: 24px !important; height: 24px !important; border-radius: 7px !important; }
#modal-crypto-logo { width: 32px !important; height: 32px !important; border-radius: 9px !important; object-fit: contain; }


/* ── Folded first column of the tables (js: tagColumn.js), both designs ───────────────────────── */
.yf-tagcol-head { white-space: nowrap; }
.yf-tagcol-head .yf-tagcol-label { display: inline-block; max-width: 170px; overflow: hidden; vertical-align: middle; text-overflow: clip; transition: max-width .3s cubic-bezier(.25, .8, .25, 1), opacity .2s ease; }
.yf-tagcol-toggle { display: inline-grid; width: 24px; height: 24px; margin-left: 4px; place-items: center; border: 0; border-radius: 7px; background: transparent; color: inherit; font-size: 15px; vertical-align: middle; opacity: .55; cursor: pointer; transition: opacity .2s ease, background-color .2s ease, margin .3s ease; }
.yf-tagcol-toggle:hover, .yf-tagcol-toggle:focus-visible { opacity: 1; background: rgba(22, 129, 102, .12); }
.yf-tagcol-toggle .ti-arrow-bar-to-right,
body.yf-tagcol-collapsed .yf-tagcol-toggle .ti-arrow-bar-to-left { display: none; }
body.yf-tagcol-collapsed .yf-tagcol-toggle .ti-arrow-bar-to-right { display: inline; }
body.yf-tagcol-collapsed .yf-tagcol-head .yf-tagcol-label { max-width: 0; opacity: 0; }
body.yf-tagcol-collapsed .yf-tagcol-toggle { margin-left: 0; opacity: .8; }

:is(#expenses-table, #incomes-table, #income-plans-table, #expense-planning-table, .yf-month-plan-table) tr > .yf-tagcol-cell:first-child,
:is(#expenses-table, #incomes-table, #income-plans-table, #expense-planning-table, .yf-month-plan-table) tr > .yf-tagcol-head:first-child {
    transition: min-width .3s cubic-bezier(.25, .8, .25, 1), max-width .3s cubic-bezier(.25, .8, .25, 1), width .3s cubic-bezier(.25, .8, .25, 1);
}
body.yf-tagcol-collapsed :is(#expenses-table, #incomes-table, #income-plans-table, #expense-planning-table, .yf-month-plan-table) tr > :first-child {
    min-width: 42px !important; width: 42px !important; max-width: 42px !important;
    padding-right: 0 !important; padding-left: 0 !important; text-align: center !important;
}

.yf-tagcol-cell .table-tag-color { position: relative; transition: max-width .3s cubic-bezier(.25, .8, .25, 1), min-width .3s ease, padding .3s ease; }
.yf-tagcol-cell .table-tag-color > * { transition: opacity .16s ease; }
.yf-tagcol-cell .table-tag-color[data-initial]::after {
    content: attr(data-initial); position: absolute; inset: 0; display: grid; place-items: center;
    font-weight: 750; font-size: 12.5px; line-height: 1; opacity: 0; pointer-events: none; transition: opacity .18s ease .1s;
}
body.yf-tagcol-collapsed .yf-tagcol-cell .table-tag-color {
    display: inline-flex !important; width: 28px; min-width: 28px; max-width: 28px !important; height: 28px; min-height: 28px;
    padding: 0 !important; overflow: hidden; justify-content: center; align-items: center; border-radius: 999px !important;
    vertical-align: middle; cursor: pointer;
}
body.yf-tagcol-collapsed .yf-tagcol-cell .table-tag-color[data-initial] > * { opacity: 0; }
body.yf-tagcol-collapsed .yf-tagcol-cell .table-tag-color[data-initial]::after { opacity: 1; }

.yf-tagcol-icon { display: none; font-size: 15px; line-height: 1; }
body.yf-tagcol-collapsed .yf-tagcol-cell .yf-tagcol-text { display: none; }
body.yf-tagcol-collapsed .yf-tagcol-cell .yf-tagcol-icon { display: inline-block; }
body.yf-tagcol-collapsed .yf-tagcol-cell .table-tag-sum { display: inline-grid !important; min-width: 28px !important; width: 28px; height: 28px; padding: 0 !important; place-items: center; border-radius: 999px !important; }
@media (prefers-reduced-motion: reduce) {
    .yf-tagcol-head .yf-tagcol-label, .yf-tagcol-cell .table-tag-color, .yf-tagcol-cell .table-tag-color > *,
    :is(#expenses-table, #incomes-table, #income-plans-table, #expense-planning-table, .yf-month-plan-table) tr > :first-child { transition: none !important; }
}
/* Daily tables: the «Σ / Итого» badge becomes the sum icon while folded (Эфир draws «Итого» with ::after) */
body.yf-tagcol-collapsed .yf-tagcol-cell .yf-table-total-label { width: 28px; min-width: 28px !important; height: 28px; padding: 0 !important; border-radius: 999px !important; font-size: 0 !important; }
body.yf-tagcol-collapsed .yf-tagcol-cell .yf-table-total-label::after,
:root body.yf-redesign.yf-dashboard-auth.yf-tagcol-collapsed .main-table .yf-tagcol-cell .yf-table-total-label::after { content: "\eb73"; font-family: "tabler-icons" !important; font-size: 15px; font-weight: 400; }
/* The header and tag pills of the first column toggle the fold too */
.yf-tagcol-head, .yf-tagcol-cell .table-tag-color { cursor: pointer; }
.yf-tagcol-head:hover .yf-tagcol-toggle { opacity: 1; background: rgba(22, 129, 102, .12); }
/* A tag pill folds the column on click, so hovering it lights the fold button exactly like hovering the button. */
.main-table:has(.yf-tagcol-cell .table-tag-color:hover) .yf-tagcol-toggle,
.main-table:has(.yf-tagcol-cell .table-tag-color:focus-visible) .yf-tagcol-toggle { opacity: 1; background: rgba(22, 129, 102, .12); }
.yf-tagcol-cell .table-tag-color { cursor: pointer; }

/* ── «Видимость» of the plan tables (js: planVisibility.js), both designs ───────────────────────── */
tr.yf-plan-row-hidden { display: none !important; }
.yf-plan-visibility-open { background: transparent !important; box-shadow: inset 0 0 0 1px rgba(22, 129, 102, .22) !important; }
.yf-plan-visibility-dialog { max-width: min(560px, calc(100vw - 24px)); }
.yf-plan-visibility__hint { margin: 0 0 12px; color: #6f7f79; font-size: 12.5px; line-height: 1.5; }
.yf-plan-visibility__table { display: grid; border: 1px solid rgba(22, 60, 48, .1); border-radius: 12px; overflow: hidden; }
.yf-plan-visibility__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) repeat(3, minmax(56px, 76px)); align-items: center; min-height: 48px; border-top: 1px solid rgba(22, 60, 48, .08); transition: opacity .2s ease, background-color .2s ease; }
.yf-plan-visibility__row:first-child { border-top: 0; }
.yf-plan-visibility__row.is-head { min-height: 34px; background: rgba(22, 60, 48, .04); color: #7a8883; font-size: 11.5px; font-weight: 700; }
.yf-plan-visibility__row.is-head > span:nth-child(2) { padding-left: 4px; }
.yf-plan-visibility__row.is-off { background: rgba(22, 60, 48, .025); }
.yf-plan-visibility__row.is-off > :not(.yf-plan-visibility__eye) { opacity: .38; filter: saturate(.4); }
.yf-plan-visibility__eye { display: grid; width: 32px; height: 32px; margin: 0 auto; place-items: center; padding: 0; border: 0; border-radius: 9px; color: #168166; background: rgba(22, 129, 102, .1); font-size: 17px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.yf-plan-visibility__row.is-off .yf-plan-visibility__eye { color: #8a9893; background: rgba(22, 60, 48, .06); }
.yf-plan-visibility__eye:hover { background: rgba(22, 129, 102, .18); }
.yf-plan-visibility__tag { min-width: 0; padding: 6px 8px 6px 4px; }
.yf-plan-visibility__tag .table-tag-color { display: inline-block; max-width: 100%; overflow: hidden; padding: 3px 10px; border-radius: 999px; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-size: 12.5px; font-weight: 650; }
.yf-plan-visibility__cell { overflow: hidden; padding: 0 6px; border-left: 1px solid rgba(22, 60, 48, .06); color: #6f7f79; font-size: 11.5px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.yf-plan-visibility__cell .ti { opacity: .45; }
.yf-plan-visibility__empty { margin: 14px; color: #7a8883; font-size: 13px; text-align: center; }
@media (max-width: 575.98px) {
    .yf-plan-visibility__row { grid-template-columns: 42px minmax(0, 1fr) repeat(2, minmax(52px, 64px)); }
    .yf-plan-visibility__row > .yf-plan-visibility__cell:nth-child(5) { display: none; }
}
body.dark-theme .yf-plan-visibility__table { border-color: rgba(255, 255, 255, .09); }
body.dark-theme .yf-plan-visibility__row { border-top-color: rgba(255, 255, 255, .06); }
body.dark-theme .yf-plan-visibility__row.is-head { background: rgba(255, 255, 255, .04); color: #9aa8a3; }
body.dark-theme .yf-plan-visibility__cell { border-left-color: rgba(255, 255, 255, .06); color: #9aa8a3; }
body.dark-theme .yf-plan-visibility__eye { color: #6fd3ad; background: rgba(111, 211, 173, .12); }
body.dark-theme .yf-plan-visibility__hint { color: #9aa8a3; }
:root body.yf-redesign.yf-dashboard-auth .yf-plan-visibility__table { border-color: var(--rd-line); }
:root body.yf-redesign.yf-dashboard-auth .yf-plan-visibility__eye { color: var(--rd-accent); background: var(--rd-accent-soft); }
:root body.yf-redesign.yf-dashboard-auth .yf-plan-visibility__hint, :root body.yf-redesign.yf-dashboard-auth .yf-plan-visibility__cell { color: var(--rd-muted); }

/* Public demo: readable actions on the light «Эфир» bar and in the demo notice (text blended into the green) */
:root body.yf-dashboard-auth .yf-demo-banner .yf-demo-banner__primary,
:root body.yf-dashboard-auth .yf-demo-banner .yf-demo-banner__primary:hover { color: #fff !important; }
:root body.yf-redesign.yf-dashboard-auth:not(.dark-theme) .yf-public-demo-nav__label { color: var(--rd-muted) !important; }
:root body.yf-redesign.yf-dashboard-auth:not(.dark-theme) .yf-public-demo-nav__label i { color: var(--rd-accent) !important; }
:root body.yf-redesign.yf-dashboard-auth:not(.dark-theme) .yf-public-demo-nav .yf-public-demo-nav__cta { border-color: transparent !important; background: var(--rd-accent) !important; color: #fff !important; }
:root body.yf-redesign.yf-dashboard-auth:not(.dark-theme) .yf-public-demo-nav .yf-public-demo-nav__cta:hover { background: var(--rd-accent-hover, #0e5c46) !important; }

/* «Tap a cell» footnote under every dashboard table (both designs). It has no height of its own: the text
   sits in the card's existing bottom padding, so the gap between the table and the card edge stays the same. */
.yf-table-footnote {
    height: 14px;
    margin: 5px 0 -19px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #6b7c75;
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
    white-space: nowrap;
}
.dark-theme .yf-table-footnote { color: #97aaa2; }
:root body.yf-redesign.yf-dashboard-auth .yf-table-footnote { color: var(--rd-subtle) !important; }
/* Only while a table is what the card shows (not the calendar, an empty state or the subscription lock). */
.card-body:has(> .yf-table-stage:not([hidden]) :is(.yf-income-calendar:not([hidden]), .yf-table-empty:not([hidden]), .yf-plan-lock:not([hidden]))) > .yf-table-footnote,
.card-body:not(:has(> .yf-table-stage:not([hidden]))) > .yf-table-footnote,
body.yf-demo-mode .yf-table-footnote { display: none; }
/* Phones: still one line, the type shrinks with the screen (≈9px on a 320px phone). */
@media (max-width: 575.98px) {
    .yf-table-footnote { margin: 4px 0 -18px; font-size: clamp(8.5px, 2.85vw, 11px); letter-spacing: -.01em; }
}

/* Adaptive tag matrix (tagFit.js): on wide screens the tag area takes the card height that is left after the heading,
   and shows as many rows as fit. */
@media (min-width: 992px) {
    .card:has(> .card-body > .yf-tags-fit) > .card-body { display: flex; flex-direction: column; min-height: 0; }
    .yf-tags-fit { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; }
    .yf-tags-fit > :is(.expense-tags-shell--wide, .income-tags-shell--wide) { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; }
    .yf-tags-fit :is(.expense-tags-carousel, .income-tags-carousel) { flex: 1 1 0; align-items: flex-start; min-height: 0; }
    .yf-tags-fit :is(.expense-tags-page, .income-tags-page) { grid-template-rows: none !important; grid-auto-rows: min-content; align-content: start; }
    .yf-tags-fit :is(.expense-tags-controls, .income-tags-controls) { flex: none; }
    .yf-tags-fit :is(.expense-tags-controls, .income-tags-controls)[hidden] { display: none !important; }
}