/* =========================================================================
   TwoComms Finance — fin.twocomms.shop
   Тёмная дизайн-система, согласованная с management.css (те же токены/акцент).
   ========================================================================= */

:root {
    --fin-bg-900: #0b0e14;
    --fin-bg-850: #0f131c;
    --fin-bg-800: #131824;
    --fin-panel: rgba(23, 28, 40, 0.82);
    --fin-panel-strong: rgba(17, 22, 33, 0.92);
    --fin-border: rgba(255, 255, 255, 0.08);
    --fin-border-strong: rgba(255, 255, 255, 0.14);
    --fin-text: #e8edf7;
    --fin-text-2: #9aa4b8;
    --fin-muted: #6c7382;
    --fin-accent: #f3a43d;
    --fin-accent-strong: #ff7e29;
    --fin-pos: #34d399;
    --fin-neg: #fb7185;
    --fin-info: #6f95ff;
    --fin-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    --fin-header-h: 72px;
    --fin-sidebar-w: 288px;
    --fin-radius-lg: 18px;
    --fin-radius-md: 12px;
    --fin-radius-sm: 9px;
    --fin-font: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    overflow-x: clip;
    max-width: 100vw;
}

.fin-body {
    --fin-left-drawer-progress: 0px;
    --fin-right-drawer-progress: 0px;
    --fin-left-drawer-ratio: 0;
    --fin-right-drawer-ratio: 0;
    margin: 0;
    min-height: 100vh;
    color: var(--fin-text);
    font-family: var(--fin-font);
    background:
        radial-gradient(circle at 10% 8%, rgba(255, 126, 41, 0.08) 0, transparent 26%),
        radial-gradient(circle at 82% 0%, rgba(120, 90, 255, 0.08) 0, transparent 30%),
        linear-gradient(140deg, #0b0e14 0%, #0f121b 50%, #0b0e14 100%);
    background-attachment: fixed;
    overflow-x: clip;
    max-width: 100vw;
    position: relative;
}

a { color: inherit; }

/* ===================== Верхня шапка ===================== */
.fin-header {
    position: sticky;
    top: 0;
    z-index: 60;
    height: var(--fin-header-h);
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 22px;
    background: linear-gradient(90deg, rgba(20, 24, 34, 0.94), rgba(15, 17, 25, 0.94));
    border-bottom: 1px solid var(--fin-border);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.fin-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.fin-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #222836, #11151f);
    border: 1px solid var(--fin-border);
    box-shadow: 0 0 18px rgba(255, 126, 41, 0.32);
}
.fin-brand-mark img { width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255, 126, 41, 0.35)); }

.fin-company {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--fin-radius-sm);
    padding: 6px 10px;
    cursor: pointer;
    position: relative;
    color: var(--fin-text);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.fin-company:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--fin-border); }
.fin-company__name { font-weight: 700; font-size: 15px; line-height: 1.1; }
.fin-company__hint { font-size: 11px; color: var(--fin-text-2); }
.fin-company__chev { width: 14px; height: 14px; fill: var(--fin-text-2); position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

/* Tabs */
.fin-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.fin-tabs::-webkit-scrollbar { display: none; }
.fin-tab {
    color: var(--fin-text-2);
    text-decoration: none;
    padding: 9px 12px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    border-radius: var(--fin-radius-sm);
    border: 1px solid transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.fin-tab:hover { color: var(--fin-text); background: rgba(255, 255, 255, 0.04); }
.fin-tab.active {
    color: var(--fin-accent);
    background: rgba(255, 126, 41, 0.10);
    border-color: rgba(255, 126, 41, 0.32);
}

.fin-header__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.fin-quick-actions { display: flex; align-items: center; gap: 8px; }
.fin-quick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--fin-border-strong);
    background: rgba(255, 255, 255, 0.03);
    color: var(--fin-text);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 13px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.fin-quick:hover { transform: translateY(-1px); }
.fin-quick__plus, .fin-quick__minus, .fin-quick__swap { font-weight: 800; font-size: 15px; line-height: 1; }
.fin-quick--income:hover { border-color: rgba(52, 211, 153, 0.5); box-shadow: 0 6px 18px rgba(52, 211, 153, 0.18); }
.fin-quick--income .fin-quick__plus { color: var(--fin-pos); }
.fin-quick--expense:hover { border-color: rgba(251, 113, 133, 0.5); box-shadow: 0 6px 18px rgba(251, 113, 133, 0.18); }
.fin-quick--expense .fin-quick__minus { color: var(--fin-neg); }
.fin-quick--transfer:hover { border-color: rgba(111, 149, 255, 0.5); box-shadow: 0 6px 18px rgba(111, 149, 255, 0.18); }
.fin-quick--transfer .fin-quick__swap { color: var(--fin-info); }

.fin-icon-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--fin-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--fin-text-2);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.fin-icon-btn:hover { color: var(--fin-text); border-color: var(--fin-border-strong); }
.fin-icon-btn svg { width: 18px; height: 18px; fill: currentColor; }

.fin-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 38px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--fin-border);
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
}
.fin-burger span { display: block; height: 2px; width: 18px; margin: 0 auto; background: var(--fin-text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }

/* ===================== Робоча область ===================== */
.fin-workspace {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - var(--fin-header-h));
    overflow-x: clip;
    max-width: 100vw;
}

.fin-sidebar {
    position: sticky;
    top: var(--fin-header-h);
    flex: 0 0 var(--fin-sidebar-w);
    width: var(--fin-sidebar-w);
    height: calc(100vh - var(--fin-header-h));
    height: calc(100svh - var(--fin-header-h));
    height: calc(100dvh - var(--fin-header-h));
    border-right: 1px solid var(--fin-border);
    background: var(--fin-panel-strong);
    backdrop-filter: blur(10px);
    overflow: hidden;
}
.fin-sidebar__scroll {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 16px 14px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}
.fin-sidebar__backdrop {
    display: none;
    position: fixed;
    inset: var(--fin-header-h) 0 0 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 45;
}

/* Мобільна навігація в sidebar */
.fin-mobile-nav {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 16px 0;
    margin: 0 -14px 16px;
    border-bottom: 1px solid var(--fin-border);
}

.fin-mobile-nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--fin-text-2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.fin-mobile-nav__item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--fin-text);
}

.fin-mobile-nav__item.active {
    background: rgba(255, 126, 41, 0.12);
    color: var(--fin-accent);
    border-left: 3px solid var(--fin-accent);
    padding-left: 17px;
}

.fin-mobile-nav__item svg {
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .fin-mobile-nav {
        display: flex;
    }
}


.fin-balance-card {
    background: linear-gradient(135deg, rgba(255, 126, 41, 0.14), rgba(255, 126, 41, 0.04));
    border: 1px solid rgba(255, 126, 41, 0.22);
    border-radius: var(--fin-radius-md);
    padding: 14px 15px;
}
.fin-balance-card--forecast {
    background: linear-gradient(135deg, rgba(111, 149, 255, 0.12), rgba(111, 149, 255, 0.03));
    border-color: rgba(111, 149, 255, 0.22);
}
.fin-balance-card--frozen {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(167, 139, 250, 0.03));
    border-color: rgba(167, 139, 250, 0.24);
}
.fin-balance-card__hint { font-size: 10px; color: var(--fin-muted); margin-top: 3px; }
.fin-balance-card__label { font-size: 11px; color: var(--fin-text-2); text-transform: uppercase; letter-spacing: 0.05em; }
.fin-balance-card__value { font-size: 22px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }

.fin-accounts, .fin-planned {
    background: var(--fin-panel);
    border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-md);
    padding: 12px 13px;
}
.fin-accounts__head, .fin-planned__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--fin-text-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.fin-accounts__manage { text-decoration: none; color: var(--fin-text-2); font-size: 14px; }
.fin-accounts__manage:hover { color: var(--fin-accent); }
.fin-accounts__list { display: flex; flex-direction: column; gap: 4px; }
.fin-account {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 9px 8px 14px;
    border-radius: var(--fin-radius-sm);
    text-decoration: none;
    color: var(--fin-text);
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
}
.fin-account:hover { background: rgba(255, 255, 255, 0.05); }
.fin-account__stripe {
    position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 0; border-radius: 3px; background: var(--fin-pos);
    transition: height 0.15s ease;
}
.fin-account.is-selected { background: rgba(52, 211, 153, 0.08); }
.fin-account.is-selected .fin-account__stripe { height: 64%; }
.fin-account.is-selected .fin-account__name { color: var(--fin-pos); font-weight: 600; }
.fin-account__name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-account__balance { font-size: 13px; font-weight: 700; color: var(--fin-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-accounts__empty { font-size: 12px; color: var(--fin-muted); padding: 6px 2px; }
.fin-accounts__head-tools { display: inline-flex; align-items: center; gap: 8px; }
.fin-accounts__reset { background: rgba(52,211,153,0.14); border: none; color: var(--fin-pos); font-size: 11px; border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.fin-accounts__hint { font-size: 11px; color: var(--fin-pos); margin: 2px 0 6px; }

.fin-planned { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: border-color 0.15s ease; }
.fin-planned:hover { border-color: rgba(243,164,61,0.4); }
.fin-planned__cta { font-size: 11px; color: var(--fin-accent); margin-top: 8px; text-align: right; }
.fin-planned__period {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 2px 8px;
    color: var(--fin-text-2);
}
.fin-planned__row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.fin-planned__row strong { font-variant-numeric: tabular-nums; }
.fin-planned__next { font-size: 11px; color: var(--fin-muted); margin: -2px 0 4px; text-align: right; }
.is-pos { color: var(--fin-pos); }
.is-neg { color: var(--fin-neg); }

.fin-add-integration {
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--fin-accent);
    font-weight: 600;
    font-size: 13px;
    padding: 11px;
    border: 1px dashed rgba(255, 126, 41, 0.4);
    border-radius: var(--fin-radius-md);
    transition: background 0.15s ease;
}
.fin-add-integration:hover { background: rgba(255, 126, 41, 0.08); }

/* ===================== Контент ===================== */
.fin-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}
.fin-content {
    padding: 22px 26px 60px;
    max-width: 1400px;
    overflow-x: hidden;
}

.fin-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.fin-page-title { font-size: 24px; font-weight: 800; margin: 0; }
.fin-page-subtitle { color: var(--fin-text-2); font-size: 14px; margin: 6px 0 0; }

.fin-empty-state {
    text-align: center;
    padding: 60px 20px;
    border: 1px dashed var(--fin-border-strong);
    border-radius: var(--fin-radius-lg);
    background: var(--fin-panel);
}
.fin-empty-state__icon {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 126, 41, 0.1);
}
.fin-empty-state__icon svg { width: 30px; height: 30px; fill: none; stroke: var(--fin-accent); stroke-width: 2; }
.fin-empty-state h2 { margin: 0 0 8px; font-size: 18px; }
.fin-empty-state p { margin: 0 auto; max-width: 420px; color: var(--fin-text-2); font-size: 14px; }

/* ===================== Кнопки ===================== */
.fin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 18px;
    border-radius: var(--fin-radius-sm);
    border: 1px solid var(--fin-border-strong);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.fin-btn:hover { transform: translateY(-1px); }
.fin-btn--primary { background: linear-gradient(135deg, var(--fin-accent-strong), var(--fin-accent)); border-color: transparent; color: #1a1205; }
.fin-btn--ghost { background: rgba(255, 255, 255, 0.04); color: var(--fin-text); }
.fin-btn--block { width: 100%; }

/* ===================== Авторизація / forbidden ===================== */
.fin-body--auth { display: grid; place-items: center; }
.fin-auth-screen { width: 100%; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.fin-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--fin-panel-strong);
    border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-lg);
    box-shadow: var(--fin-shadow);
    padding: 30px 28px;
}
.fin-auth-card--center { text-align: center; }
.fin-auth-header { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.fin-auth-logo { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255, 126, 41, 0.4)); }
.fin-auth-header h1 { margin: 2px 0; font-size: 26px; font-weight: 800; }
.fin-eyebrow { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--fin-accent); }
.fin-auth-sub { margin: 0; color: var(--fin-text-2); font-size: 13px; }
.fin-auth-form { display: flex; flex-direction: column; gap: 14px; }
.fin-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fin-text-2); }
.fin-field input {
    width: 100%;
    background: var(--fin-bg-800);
    border: 1px solid var(--fin-border-strong);
    border-radius: var(--fin-radius-sm);
    padding: 11px 13px;
    color: var(--fin-text);
    font-size: 14px;
    font-family: inherit;
}
.fin-field input:focus { outline: none; border-color: var(--fin-accent); box-shadow: 0 0 0 3px rgba(255, 126, 41, 0.15); }
.fin-auth-error { background: rgba(251, 113, 133, 0.12); border: 1px solid rgba(251, 113, 133, 0.3); border-radius: var(--fin-radius-sm); padding: 10px 12px; font-size: 13px; color: #ffd7dd; }
.fin-auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--fin-muted); font-size: 12px; }
.fin-auth-divider::before, .fin-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--fin-border); }
.fin-auth-oauth { gap: 10px; }
.fin-auth-oauth-icon { width: 18px; height: 18px; }
.fin-auth-footnote { margin: 16px 0 0; text-align: center; font-size: 12px; color: var(--fin-muted); }
.fin-forbidden-title { font-size: 26px; margin: 0 0 12px; }
.fin-forbidden-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }

.fin-version { position: fixed; right: 12px; bottom: 10px; font-size: 11px; color: var(--fin-muted); z-index: 30; }

/* ===================== Адаптив ===================== */
@media (max-width: 1100px) {
    .fin-tabs { justify-content: flex-start; }
    /* Вузький десктоп + мобільний: лишаємо лише іконки дій без текстових
       підписів, щоб усе вмістилося в один ряд шапки. */
    .fin-quick .fin-quick__label { display: none; }
}

@media (max-width: 900px) {
    /* Header: один ряд — бургер | лого | дії (дохід/витрата/переказ) | шестерня.
       Кнопки дій вбудовані між бургером і шестернею, а не окремим рядком знизу.
       Sticky — щоб шапка лишалась угорі при скролі (зручний доступ до дій). */
    .fin-header {
        height: auto;
        min-height: var(--fin-header-h);
        flex-wrap: nowrap;
        position: sticky;
        top: 0;
        z-index: 60;
        padding: 10px 12px;
        gap: 8px;
    }

    /* Бургер ЗЛІВА - перший елемент */
    .fin-burger {
        display: flex !important;
        order: 0;
        margin: 0;
        flex-shrink: 0;
    }

    /* Лого — компактне, одразу після бургера. Назву компанії ховаємо, щоб
       звільнити місце під кнопки дій у тому ж ряду. */
    .fin-header__left {
        order: 1;
        flex: 0 0 auto;
        min-width: 0;
        gap: 6px;
    }

    .fin-brand-mark {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
    }

    .fin-company {
        display: none;
    }

    /* header__actions розкривається — діти стають прямими flex-елементами хедера */
    .fin-header__actions {
        display: contents;
    }

    /* Шестерня — крайня справа */
    .fin-icon-btn--settings {
        order: 3;
        flex-shrink: 0;
        margin-left: 0;
    }

    /* Tabs - ПОВНІСТЮ ховаємо на мобільних */
    .fin-tabs {
        display: none !important;
    }

    /* Кнопки доходів/витрат/переказів — між лого і шестернею, займають
       вільний простір ряду рівномірно. */
    .fin-quick-actions {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        gap: 6px;
        justify-content: stretch;
        margin-left: auto;
    }

    .fin-quick {
        flex: 1 1 0;
        justify-content: center;
        padding: 9px 6px;
        font-size: 12.5px;
        gap: 4px;
        min-width: 0;
        white-space: nowrap;
    }

    .fin-quick__plus,
    .fin-quick__minus,
    .fin-quick__swap {
        font-size: 14px;
    }

    .fin-icon-btn {
        flex-shrink: 0;
    }

    /* Sidebar з правильним z-index */
    .fin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh;
        height: 100dvh;
        width: var(--fin-sidebar-w);
        max-width: 86vw;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 100 !important;
        box-shadow: 20px 0 60px rgba(0, 0, 0, 0.7);
        border-right: 1px solid var(--fin-border-strong);
    }

    .fin-body.fin-sidebar-open .fin-sidebar {
        transform: translateX(0);
    }

    .fin-sidebar__backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 99 !important;
    }

    .fin-body.fin-sidebar-open .fin-sidebar__backdrop {
        display: block;
        opacity: 1;
    }

    .fin-body.fin-sidebar-peeking .fin-sidebar {
        transform: translateX(calc(-100% + var(--fin-left-drawer-progress, 0px)));
    }

    .fin-body.fin-sidebar-peeking .fin-sidebar__backdrop {
        display: block;
        opacity: calc(var(--fin-left-drawer-ratio, 0) * 0.6);
        pointer-events: none;
    }

    .fin-sidebar__scroll {
        padding-top: 20px;
    }

    .fin-content {
        padding: 18px 16px 60px;
    }
}

@media (max-width: 480px) {
    /* Дуже компактний header — ховаємо назву компанії, лишаємо лого */
    .fin-company__name {
        display: none;
    }

    .fin-quick {
        padding: 10px 6px;
        font-size: 12px;
    }

    .fin-page-title {
        font-size: 20px;
    }

    .fin-sidebar {
        max-width: 92vw;
    }
}

/* ===================== Блок 3: Платежі ===================== */
.fin-input, .fin-select, .fin-textarea {
    background: var(--fin-bg-800);
    border: 1px solid var(--fin-border-strong);
    border-radius: var(--fin-radius-sm);
    padding: 9px 11px;
    color: var(--fin-text);
    font-size: 14px;
    font-family: inherit;
}
.fin-input:focus, .fin-select:focus, .fin-textarea:focus {
    outline: none; border-color: var(--fin-accent);
    box-shadow: 0 0 0 3px rgba(255, 126, 41, 0.14);
}
.fin-input--sm { width: 92px; }
.fin-textarea { resize: vertical; min-height: 40px; }
.fin-btn--sm { padding: 8px 12px; font-size: 13px; }
.fin-btn--danger { background: rgba(251, 113, 133, 0.14); border-color: rgba(251, 113, 133, 0.4); color: #ffd7dd; }
.fin-btn--danger:hover { background: rgba(251, 113, 133, 0.22); }

/* Панель-перемикач фільтрів: усе сховано за однією кнопкою */
.fin-filterbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.fin-filterbar__toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    font-size: 13.5px; font-weight: 600; color: var(--fin-text-2);
    background: var(--fin-panel-strong);
    border: 1px solid var(--fin-border);
    border-radius: 10px; cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.fin-filterbar__toggle:hover { border-color: rgba(243,164,61,0.45); color: var(--fin-text); }
.fin-filterbar__toggle.is-open { border-color: rgba(243,164,61,0.5); color: var(--fin-text); background: rgba(243,164,61,0.06); }
.fin-filterbar__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    font-size: 11px; font-weight: 700; color: #1a1205;
    background: var(--fin-accent); border-radius: 999px;
}
.fin-filterbar__chev { transition: transform 0.2s ease; opacity: 0.7; }
.fin-filterbar__toggle.is-open .fin-filterbar__chev { transform: rotate(180deg); }

/* Фільтри */
.fin-filters {
    margin-bottom: 14px;
    max-width: 100%;
    overflow-x: hidden;
    background: var(--fin-panel);
    border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-md);
    padding: 14px;
}
.fin-filters[hidden] { display: none; }
.fin-filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    max-width: 100%;
}
.fin-period .fin-select { min-width: 160px; max-width: 100%; }
.fin-search {
    position: relative;
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}
.fin-search svg { position: absolute; left: 10px; width: 16px; height: 16px; fill: var(--fin-muted); }
.fin-search .fin-input { width: 100%; padding-left: 32px; }
.fin-custom-range { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 100%; }
.fin-amount-range { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 100%; }
.fin-amount-range__label { font-size: 13px; color: var(--fin-text-2); }
.fin-export-group { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }

/* Мобільні фільтри */
@media (max-width: 640px) {
    .fin-filters__row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .fin-period,
    .fin-search,
    .fin-custom-range,
    .fin-amount-range {
        width: 100%;
        flex: 1 1 auto;
    }

    .fin-period .fin-select {
        width: 100%;
        min-width: 0;
    }

    .fin-search {
        order: -1; /* Пошук першим */
    }

    .fin-custom-range,
    .fin-amount-range {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .fin-custom-range .fin-input,
    .fin-amount-range .fin-input {
        width: 100%;
    }

    .fin-amount-range__label {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .fin-export-group {
        width: 100%;
        margin-left: 0;
        justify-content: stretch;
    }

    .fin-export-group .fin-btn {
        flex: 1;
    }
}


/* Bulk bar */
.fin-bulkbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: rgba(255, 126, 41, 0.08);
    border: 1px solid rgba(255, 126, 41, 0.25);
    border-radius: var(--fin-radius-md);
    max-width: 100%;
}
.fin-bulkbar__head { display: flex; align-items: center; gap: 8px; }
.fin-bulkbar__head-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.fin-bulkbar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fin-bulkbar__count { font-size: 13px; color: var(--fin-text-2); margin-right: 4px; white-space: nowrap; }
.fin-bulkbar__toggle {
    display: none;
    width: 28px; height: 28px; flex: 0 0 auto;
    border-radius: 8px; border: 1px solid var(--fin-border);
    background: transparent; color: var(--fin-muted); cursor: pointer;
    align-items: center; justify-content: center;
}
.fin-bulkbar__toggle svg { transition: transform 0.2s ease; }
.fin-bulkbar.is-collapsed .fin-bulkbar__toggle svg { transform: rotate(-90deg); }
.fin-bulkbar__clear {
    display: none;
    width: 28px; height: 28px; flex: 0 0 auto;
    border-radius: 8px; border: 1px solid var(--fin-border);
    background: transparent; color: var(--fin-muted); cursor: pointer;
    font-size: 14px; line-height: 1;
}
.fin-bulkbar__clear:hover,
.fin-bulkbar__toggle:hover { color: var(--fin-text); border-color: var(--fin-border-strong, rgba(255,255,255,0.25)); }

/* Таблиця */
.fin-table-wrap {
    background: var(--fin-panel);
    border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-lg);
    overflow: hidden;
}
.fin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fin-table thead th {
    position: sticky; top: 0; z-index: 1;
    text-align: left; padding: 12px 14px;
    font-size: 12px; font-weight: 600; color: var(--fin-text-2);
    text-transform: uppercase; letter-spacing: 0.04em;
    background: var(--fin-panel-strong);
    border-bottom: 1px solid var(--fin-border);
    white-space: nowrap;
}
.fin-col-check { width: 38px; text-align: center; }
.fin-col-amount { text-align: right; white-space: nowrap; }
.fin-table tbody tr { border-bottom: 1px solid var(--fin-border); cursor: pointer; transition: background 0.12s ease; }
.fin-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.fin-table td { padding: 11px 14px; vertical-align: middle; }
.fin-cell-date { white-space: nowrap; }
.fin-date { display: block; font-weight: 600; }
.fin-time { display: block; font-size: 12px; color: var(--fin-muted); }
.fin-amount--pos { color: var(--fin-pos); font-weight: 700; }
.fin-amount--neg { color: var(--fin-neg); font-weight: 700; }
.fin-amount--transfer { color: var(--fin-info); font-weight: 700; }
.fin-acc-name { display: block; }
.fin-acc-balance { display: block; font-size: 12px; color: var(--fin-muted); }
.fin-specify { color: var(--fin-accent); font-size: 13px; }
.fin-muted-cell { color: var(--fin-muted); }

/* Планова дата операції (в журналі — у слоті прибраної колонки «Проект», лише для планових) */
.fin-cell-plandate { white-space: nowrap; }
.fin-plandate {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    font-size: 12px; font-variant-numeric: tabular-nums;
    color: var(--fin-accent);
    background: rgba(243, 164, 61, 0.10);
    border: 1px solid rgba(243, 164, 61, 0.22);
    border-radius: 999px;
}
.fin-plandate svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
.fin-plandate__time { color: var(--fin-muted); font-size: 11px; margin-left: 4px; }
.fin-plandate__lbl { display: none; }
.fin-cell-comment { max-width: 280px; }
.fin-tag-chip {
    display: inline-block; margin-left: 6px; padding: 1px 8px;
    font-size: 11px; border-radius: 999px;
    background: rgba(111, 149, 255, 0.14); color: #b9cbff;
}
.fin-badge { display: inline-block; padding: 1px 7px; font-size: 10px; border-radius: 999px; margin-left: 6px; }
.fin-badge--planned { background: rgba(243, 164, 61, 0.16); color: var(--fin-accent); }
.fin-badge--repeat { background: rgba(129,140,248,0.16); color: #a5b4fc; }
.fin-badge--series { background: rgba(56,189,248,0.16); color: #38bdf8; }
.fin-row--transfer { opacity: 0.96; }
.fin-table-meta { margin-top: 10px; font-size: 12px; color: var(--fin-muted); }

/* Пагінація + перемикач кількості на сторінці */
.fin-pagination {
    margin-top: 14px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
}
.fin-pagination__info { font-size: 12.5px; color: var(--fin-muted); }
.fin-pagination__info b { color: var(--fin-text-2); font-variant-numeric: tabular-nums; }
.fin-pagination__right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fin-pager { display: inline-flex; align-items: center; gap: 4px; }
.fin-pager__btn {
    min-width: 32px; height: 32px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-variant-numeric: tabular-nums;
    color: var(--fin-text-2);
    background: var(--fin-panel-strong);
    border: 1px solid var(--fin-border);
    border-radius: 8px; cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.fin-pager__btn:hover:not(:disabled):not(.is-current) { border-color: rgba(243,164,61,0.45); color: var(--fin-text); }
.fin-pager__btn.is-current {
    background: var(--fin-accent); border-color: var(--fin-accent);
    color: #1a1205; font-weight: 700; cursor: default;
}
.fin-pager__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fin-pager__gap { color: var(--fin-muted); padding: 0 2px; }
.fin-perpage { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fin-muted); }
.fin-perpage .fin-select--sm { min-width: 72px; }
@media (max-width: 640px) {
    .fin-pagination { flex-direction: column; align-items: stretch; }
    .fin-pagination__right { justify-content: space-between; }
}

/* Група планових */
.fin-planned-group { border-top: 2px dashed var(--fin-border-strong); }
.fin-planned-group__head {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 12px 14px; background: rgba(243, 164, 61, 0.06);
    border: none; color: var(--fin-text); cursor: pointer; font-weight: 600;
}
.fin-planned-group__chev { width: 16px; height: 16px; fill: var(--fin-accent); transition: transform 0.2s ease; }
.fin-planned-group__head[aria-expanded="false"] .fin-planned-group__chev { transform: rotate(-90deg); }
.fin-planned-group__count {
    margin-left: auto; padding: 2px 10px; border-radius: 999px;
    background: rgba(243, 164, 61, 0.16); color: var(--fin-accent); font-size: 13px;
}
.fin-table--planned tbody tr { background: rgba(243, 164, 61, 0.03); }
.fin-empty-cta { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* ===================== Модалки ===================== */
.fin-modal-overlay {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(4, 6, 10, 0.66); backdrop-filter: blur(3px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px; overflow-y: auto;
}
.fin-modal-overlay[hidden] { display: none; }
.fin-modal-card {
    width: 100%; max-width: 520px;
    background: var(--fin-panel-strong);
    border: 1px solid var(--fin-border-strong);
    border-radius: var(--fin-radius-lg);
    box-shadow: var(--fin-shadow);
}
.fin-modal-card--txn { max-width: 560px; }
.fin-modal-card--sm { max-width: 400px; }
.fin-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--fin-border);
}
.fin-modal-head h3 { margin: 0; font-size: 17px; }
.fin-modal-close {
    background: transparent; border: none; color: var(--fin-text-2);
    font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.fin-modal-close:hover { color: var(--fin-text); }
.fin-modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.fin-modal-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.fin-form-alert {
    background: rgba(251, 113, 133, 0.12); border: 1px solid rgba(251, 113, 133, 0.3);
    border-radius: var(--fin-radius-sm); padding: 9px 12px; font-size: 13px; color: #ffd7dd;
}
body.fin-modal-open { overflow: hidden; }

/* Вкладки типу операції */
.fin-txn-tabs { display: flex; gap: 6px; }
.fin-txn-tab {
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--fin-border-strong); background: rgba(255,255,255,0.03);
    color: var(--fin-text-2); font-weight: 600; font-size: 13px;
}
.fin-txn-tab.active { color: var(--fin-text); border-color: var(--fin-accent); background: rgba(255,126,41,0.12); }

.fin-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fin-text-2); }
.fin-field > span { font-weight: 500; }
.fin-field-row { display: flex; gap: 12px; }
.fin-field-row > .fin-field { flex: 1; }
.fin-field--cur { max-width: 110px; }
.fin-combo { display: flex; gap: 6px; }
.fin-combo .fin-select { flex: 1; }
.fin-combo-add {
    width: 38px; border-radius: var(--fin-radius-sm); cursor: pointer;
    border: 1px solid var(--fin-border-strong); background: rgba(255,255,255,0.04);
    color: var(--fin-accent); font-size: 18px; font-weight: 700;
}
.fin-toggle-link {
    background: none; border: none; color: var(--fin-accent); cursor: pointer;
    text-align: left; padding: 2px 0; font-size: 13px; font-weight: 500;
}
.fin-toggle-link:hover { text-decoration: underline; }

/* Факт / План перемикач */
.fin-status-toggle { display: flex; align-items: center; gap: 0; }
.fin-status-opt {
    flex: 0 0 auto; padding: 7px 18px; cursor: pointer; font-size: 13px; font-weight: 600;
    background: var(--fin-bg-800); color: var(--fin-text-2);
    border: 1px solid var(--fin-border-strong); border-right: none;
}
.fin-status-opt:first-child { border-radius: var(--fin-radius-sm) 0 0 var(--fin-radius-sm); }
.fin-status-opt:last-of-type { border-radius: 0 var(--fin-radius-sm) var(--fin-radius-sm) 0; border-right: 1px solid var(--fin-border-strong); }
.fin-status-opt.is-active { background: rgba(255,126,41,0.16); border-color: var(--fin-accent); color: var(--fin-accent); }
.fin-status-hint { margin-left: 10px; font-size: 11px; color: var(--fin-accent); }

/* Згортувані секції з шевроном */
.fin-disclosure {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: none; cursor: pointer; text-align: left;
    padding: 7px 0; font-size: 13px; font-weight: 500; color: var(--fin-accent);
}
.fin-disclosure:hover { color: var(--fin-accent-strong); }
.fin-disclosure__chev { display: inline-block; transition: transform 0.15s ease; font-size: 11px; }
.fin-disclosure[aria-expanded="true"] .fin-disclosure__chev { transform: rotate(90deg); }
.fin-disclosure__body { margin: 2px 0 6px; }

/* Атрибут hidden має ховати елемент навіть якщо клас задає display:flex/grid.
   Інакше згортувані секції модалки не ховаються. */
.fin-modal-body [hidden],
.fin-field-group[hidden],
.fin-disclosure__body[hidden],
.fin-field[hidden] { display: none !important; }

.fin-attach-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.fin-attach-item { font-size: 12px; color: var(--fin-info); text-decoration: none; }
.fin-attach-item:hover { text-decoration: underline; }

.fin-recurring, .fin-extra { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.fin-tags-field { display: flex; flex-wrap: wrap; gap: 6px; }
.fin-tag-toggle {
    padding: 4px 11px; border-radius: 999px; cursor: pointer; font-size: 12px;
    border: 1px solid var(--fin-border-strong); background: rgba(255,255,255,0.03); color: var(--fin-text-2);
}
.fin-tag-toggle.is-on { background: rgba(111,149,255,0.16); border-color: rgba(111,149,255,0.4); color: #cdd9ff; }
.fin-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid var(--fin-border); }
.fin-checklist { display: flex; flex-direction: column; gap: 5px; max-height: 160px; overflow-y: auto; padding: 8px; background: var(--fin-bg-800); border-radius: var(--fin-radius-sm); }
.fin-checklist label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fin-text); }
.fin-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.fin-chips label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fin-text); }

@media (max-width: 640px) {
    .fin-field-row { flex-direction: column; gap: 12px; }
    .fin-field--cur { max-width: none; }
    /* Table card-layout консолідовано в блоці @media 900px нижче */
}

/* ===================== Блок 4: Рахунки + інтеграції ===================== */
.fin-page-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fin-hint {
    display: flex; align-items: flex-start; gap: 8px;
    background: rgba(111, 149, 255, 0.08); border: 1px solid rgba(111, 149, 255, 0.2);
    border-radius: var(--fin-radius-md); padding: 10px 14px; margin-bottom: 16px;
    font-size: 13px; color: var(--fin-text-2);
}
.fin-hint svg { fill: var(--fin-info); flex: 0 0 auto; margin-top: 1px; }
.fin-field-help { font-size: 11px; color: var(--fin-muted); }

.fin-accounts-manage { display: flex; flex-direction: column; gap: 8px; }
.fin-acc-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--fin-panel); border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-md); padding: 12px 14px;
}
.fin-acc-card.is-archived { opacity: 0.55; }
.fin-acc-card.is-dragging { opacity: 0.4; border-color: var(--fin-accent); }
.fin-acc-drag { cursor: grab; color: var(--fin-muted); font-size: 18px; }
.fin-acc-card__main { flex: 1; min-width: 0; }
.fin-acc-card__name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-acc-card__integration { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: rgba(52,211,153,0.14); color: var(--fin-pos); }
.fin-acc-card__meta { font-size: 12px; color: var(--fin-muted); }
.fin-acc-card__balance { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-acc-card__actions { display: flex; gap: 4px; }
.fin-icon-btn--sm { width: 32px; height: 32px; font-size: 14px; }

.fin-method-cards { display: flex; flex-direction: column; gap: 12px; }
.fin-method-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 16px; cursor: pointer; text-align: left;
    background: var(--fin-bg-800); border: 1px solid var(--fin-border-strong);
    border-radius: var(--fin-radius-md); color: var(--fin-text);
}
.fin-method-card:hover { border-color: var(--fin-accent); background: rgba(255,126,41,0.06); }
.fin-method-card__icon { font-size: 22px; }
.fin-method-card__title { font-weight: 600; }
.fin-method-card__desc { font-size: 12px; color: var(--fin-text-2); }
.fin-method-pane { display: flex; flex-direction: column; gap: 12px; }

.fin-integ-filters { display: flex; gap: 10px; }
.fin-integ-filters .fin-input { flex: 1; }
.fin-integ-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 320px; overflow-y: auto; padding: 4px; }
.fin-integ-item {
    padding: 12px; cursor: pointer; text-align: left;
    background: var(--fin-bg-800); border: 1px solid var(--fin-border-strong);
    border-radius: var(--fin-radius-sm); color: var(--fin-text); font-size: 13px;
}
.fin-integ-item:hover { border-color: var(--fin-accent); }

.fin-qr-body { align-items: center; text-align: center; }
.fin-qr-status { font-size: 14px; color: var(--fin-text-2); }
.fin-qr-box { background: #fff; padding: 12px; border-radius: var(--fin-radius-md); display: inline-block; }
.fin-qr-spinner { font-size: 13px; color: var(--fin-accent); }
.fin-qr-success { font-size: 16px; font-weight: 700; color: var(--fin-pos); margin-bottom: 8px; }
.fin-qr-link { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 10px; }

.fin-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fin-text); }
.fin-import-preview { background: var(--fin-bg-800); border-radius: var(--fin-radius-md); padding: 10px; }
.fin-import-preview__head { font-size: 12px; color: var(--fin-text-2); margin-bottom: 8px; }
.fin-import-preview__list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.fin-import-row { display: grid; grid-template-columns: 130px 100px 1fr; gap: 8px; font-size: 12px; padding: 4px 6px; border-radius: 6px; }
.fin-import-row:hover { background: rgba(255,255,255,0.03); }
.fin-import-row.is-invalid { opacity: 0.45; }
.fin-import-row__amt { text-align: right; font-weight: 600; }

@media (max-width: 640px) {
    .fin-integ-list { grid-template-columns: 1fr; }
    .fin-import-row { grid-template-columns: 1fr; gap: 2px; }
    .fin-import-row__amt { text-align: left; }
}

/* ===================== Блок 5: Календар ===================== */
.fin-cal-toolbar { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 16px; }
.fin-cal-title { font-size: 18px; font-weight: 700; min-width: 200px; text-align: center; }
.fin-calendar {
    background: var(--fin-panel); border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-lg); padding: 12px; overflow: hidden;
}
.fin-cal-weekdays, .fin-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fin-cal-weekday { text-align: center; font-size: 12px; color: var(--fin-text-2); text-transform: uppercase; padding: 6px 0; }
.fin-cal-grid { margin-top: 4px; }
.fin-cal-cell {
    display: flex; flex-direction: column; gap: 2px; min-height: 86px;
    padding: 6px 8px; text-align: left; cursor: pointer;
    background: var(--fin-bg-800); border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-sm); color: var(--fin-text);
    transition: border-color 0.12s ease, background 0.12s ease;
}
.fin-cal-cell:hover { border-color: var(--fin-accent); }
.fin-cal-cell--blank { background: transparent; border: none; cursor: default; min-height: 0; }
.fin-cal-cell.is-today { border-color: var(--fin-accent); box-shadow: inset 0 0 0 1px var(--fin-accent); }
.fin-cal-cell.is-future { background: rgba(255,255,255,0.015); }
.fin-cal-cell.is-future .fin-cal-end { color: var(--fin-text-2); font-style: italic; }
.fin-cal-cell.is-negative .fin-cal-end { color: var(--fin-neg); }
.fin-cal-cell.is-selected { border-color: var(--fin-accent); background: rgba(255,126,41,0.08); }
.fin-cal-day { font-weight: 700; font-size: 13px; }
.fin-cal-in { font-size: 11px; color: var(--fin-pos); }
.fin-cal-out { font-size: 11px; color: var(--fin-neg); }
.fin-cal-end { margin-top: auto; font-size: 12px; font-weight: 600; }

.fin-day-panel {
    margin-top: 18px; background: var(--fin-panel-strong);
    border: 1px solid var(--fin-border-strong); border-radius: var(--fin-radius-lg); padding: 16px;
}
.fin-day-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fin-day-panel__head h3 { margin: 0; font-size: 16px; }
.fin-day-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-day-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.fin-day-stat {
    background: var(--fin-bg-800); border-radius: var(--fin-radius-md); padding: 10px 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.fin-day-stat span { font-size: 11px; color: var(--fin-text-2); }
.fin-day-stat strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.fin-day-empty { padding: 20px; text-align: center; color: var(--fin-muted); font-size: 13px; }

@media (max-width: 760px) {
    .fin-cal-cell { min-height: 64px; padding: 4px 5px; }
    .fin-cal-in, .fin-cal-out { font-size: 10px; }
    .fin-cal-end { font-size: 10px; }
    .fin-day-summary { grid-template-columns: 1fr 1fr; }
}

/* ===================== Блок 6: Аналітика ===================== */
.fin-report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.fin-report-card {
    display: block; text-decoration: none; padding: 18px;
    background: var(--fin-panel); border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-lg); color: var(--fin-text);
    transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.fin-report-card:hover { transform: translateY(-2px); border-color: var(--fin-accent); box-shadow: var(--fin-shadow); }
.fin-report-card__title { font-weight: 700; font-size: 16px; }
.fin-report-card__desc { font-size: 13px; color: var(--fin-text-2); margin-top: 4px; }
.fin-report-card--ai { background: linear-gradient(135deg, rgba(255,126,41,0.14), rgba(111,149,255,0.08)); border-color: rgba(255,126,41,0.3); }

.fin-report-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.fin-back-link { color: var(--fin-text-2); text-decoration: none; font-size: 13px; }
.fin-back-link:hover { color: var(--fin-accent); }
.fin-report-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.fin-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.fin-kpi {
    background: var(--fin-panel); border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-md); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 6px;
}
.fin-kpi span { font-size: 12px; color: var(--fin-text-2); }
.fin-kpi strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.fin-kpi--pos strong { color: var(--fin-pos); }
.fin-kpi--neg strong { color: var(--fin-neg); }

.fin-chart-block {
    background: var(--fin-panel); border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-lg); padding: 16px; margin-bottom: 16px;
}
.fin-chart-title { margin: 0 0 12px; font-size: 14px; color: var(--fin-text-2); }
.fin-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Висновки */
.fin-insight-card {
    background: linear-gradient(135deg, rgba(255,126,41,0.10), rgba(111,149,255,0.05));
    border: 1px solid rgba(255,126,41,0.22); border-radius: var(--fin-radius-lg);
    padding: 14px 18px; margin-bottom: 16px;
}
.fin-insight-card__title { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.fin-insight-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.fin-insight-list li { font-size: 13px; color: var(--fin-text); line-height: 1.45; }

/* Графік + легенда-розбивка */
.fin-chart-with-legend { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: center; }
.fin-chart-canvas { position: relative; height: 160px; }
.fin-breakdown { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.fin-breakdown__row { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: center; font-size: 12.5px; }
.fin-breakdown__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-breakdown__pct { color: var(--fin-text-2); font-variant-numeric: tabular-nums; }
.fin-breakdown__amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #94a3b8; }
.fin-breakdown__row:nth-child(1) .fin-dot { background: #ff7e29; }
.fin-breakdown__row:nth-child(2) .fin-dot { background: #6f95ff; }
.fin-breakdown__row:nth-child(3) .fin-dot { background: #34d399; }
.fin-breakdown__row:nth-child(4) .fin-dot { background: #fb7185; }
.fin-breakdown__row:nth-child(5) .fin-dot { background: #f3a43d; }
.fin-breakdown__row:nth-child(6) .fin-dot { background: #a78bfa; }
.fin-breakdown__row:nth-child(7) .fin-dot { background: #22d3ee; }
.fin-breakdown__row:nth-child(8) .fin-dot { background: #facc15; }
.fin-breakdown__row:nth-child(9) .fin-dot { background: #fb923c; }
.fin-breakdown__row:nth-child(10) .fin-dot { background: #94a3b8; }
#fin-chart-series { max-height: 280px; }

.fin-statement-bar { margin-bottom: 14px; max-width: 320px; }
.fin-row--overdue td { background: rgba(251,113,133,0.05); }
.fin-badge--overdue { background: rgba(251,113,133,0.18); color: var(--fin-neg); }

.fin-balance-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fin-balance-col { background: var(--fin-panel); border: 1px solid var(--fin-border); border-radius: var(--fin-radius-lg); padding: 16px; }
.fin-balance-col__title { margin: 0 0 12px; font-size: 15px; }
.fin-balance-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--fin-border); font-size: 14px; }
.fin-balance-total { display: flex; justify-content: space-between; padding-top: 12px; font-weight: 700; }
.fin-balance-check { margin-top: 14px; padding: 12px; border-radius: var(--fin-radius-md); text-align: center; font-weight: 600; }
.fin-balance-check.is-ok { background: rgba(52,211,153,0.12); color: var(--fin-pos); }
.fin-balance-check.is-warn { background: rgba(251,113,133,0.12); color: var(--fin-neg); }

.fin-progress { display: inline-block; width: 90px; height: 8px; background: var(--fin-bg-800); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.fin-progress__bar { height: 100%; background: var(--fin-accent); }
.fin-progress__label { font-size: 12px; margin-left: 8px; color: var(--fin-text-2); }

.fin-metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.fin-metric-card { background: var(--fin-panel); border: 1px solid var(--fin-border); border-radius: var(--fin-radius-md); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.fin-metric-card span { font-size: 12px; color: var(--fin-text-2); }
.fin-metric-card strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.fin-metric-card--custom { border-color: rgba(255,126,41,0.3); }

/* Мобільна адаптація аналітики */
@media (max-width: 900px) {
    .fin-report-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .fin-kpi-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .fin-kpi {
        padding: 12px 14px;
    }

    .fin-kpi strong {
        font-size: 18px;
    }

    .fin-chart-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .fin-chart-block {
        padding: 14px;
    }

    /* Графіки на мобільних */
    .fin-chart-with-legend {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .fin-chart-canvas {
        height: 220px;
        max-width: 100%;
        margin: 0 auto;
    }

    #fin-chart-series {
        max-height: 240px;
    }

    .fin-breakdown {
        max-height: none;
        padding: 12px;
        background: var(--fin-bg-800);
        border-radius: var(--fin-radius-md);
    }

    .fin-breakdown__row {
        padding: 8px 0;
        border-bottom: 1px solid var(--fin-border);
    }

    .fin-breakdown__row:last-child {
        border-bottom: none;
    }

    .fin-balance-sheet {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .fin-metrics-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .fin-report-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .fin-report-filters .fin-select,
    .fin-report-filters .fin-btn {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .fin-kpi-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .fin-kpi {
        padding: 10px 12px;
    }

    .fin-kpi span {
        font-size: 11px;
    }

    .fin-kpi strong {
        font-size: 16px;
    }

    .fin-chart-canvas {
        height: 200px;
    }

    .fin-chart-block {
        padding: 12px;
    }

    .fin-chart-title {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .fin-breakdown__row {
        font-size: 11px;
        grid-template-columns: 10px 1fr auto;
        gap: 6px;
    }

    .fin-breakdown__pct {
        display: none; /* Ховаємо відсотки на дуже малих екранах */
    }

    .fin-breakdown__amt {
        font-size: 12px;
    }

    .fin-insight-card {
        padding: 12px 14px;
    }

    .fin-insight-card__title {
        font-size: 13px;
    }

    .fin-insight-list li {
        font-size: 12px;
    }

    .fin-balance-col {
        padding: 12px;
    }

    .fin-balance-row {
        font-size: 13px;
        padding: 6px 0;
    }
}

@media (max-width: 760px) {
    .fin-cal-cell { min-height: 64px; padding: 4px 5px; }
    .fin-cal-in, .fin-cal-out { font-size: 10px; }
    .fin-cal-end { font-size: 10px; }
    .fin-day-summary { grid-template-columns: 1fr 1fr; }
}

/* ===================== Блок 7: Рахунки-фактури ===================== */
.fin-subtabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--fin-border); }
.fin-subtab { padding: 10px 16px; text-decoration: none; color: var(--fin-text-2); font-weight: 600; border-bottom: 2px solid transparent; }
.fin-subtab:hover { color: var(--fin-text); }
.fin-subtab.active { color: var(--fin-accent); border-color: var(--fin-accent); }

.fin-status { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.fin-status--draft { background: rgba(148,163,184,0.18); color: #cbd5e1; }
.fin-status--issued, .fin-status--sent { background: rgba(111,149,255,0.16); color: #b9cbff; }
.fin-status--partially_paid { background: rgba(243,164,61,0.16); color: var(--fin-accent); }
.fin-status--paid { background: rgba(52,211,153,0.16); color: var(--fin-pos); }
.fin-status--overdue { background: rgba(251,113,133,0.18); color: var(--fin-neg); }
.fin-status--cancelled { background: rgba(148,163,184,0.12); color: var(--fin-muted); }
.fin-invoice-actions { display: flex; gap: 4px; }

.fin-invoice-form { display: flex; flex-direction: column; gap: 16px; }
.fin-invoice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.fin-card { background: var(--fin-panel); border: 1px solid var(--fin-border); border-radius: var(--fin-radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.fin-card__title { margin: 0; font-size: 14px; color: var(--fin-text-2); text-transform: uppercase; letter-spacing: 0.04em; }
.fin-items-table { width: 100%; border-collapse: collapse; }
.fin-items-table th { text-align: left; font-size: 12px; color: var(--fin-text-2); padding: 6px 8px; }
.fin-items-table td { padding: 4px 8px; }
.fin-items-table .inv-item-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-items-table .fin-input { width: 100%; }
.fin-invoice-totals { display: flex; justify-content: flex-end; }
.fin-card--totals { width: 360px; max-width: 100%; }
.fin-totals-rows { display: flex; flex-direction: column; gap: 6px; }
.fin-total-row { display: flex; justify-content: space-between; font-size: 14px; }
.fin-total-row--grand { font-size: 18px; font-weight: 700; border-top: 1px solid var(--fin-border); padding-top: 8px; margin-top: 4px; }

@media (max-width: 640px) {
    .fin-invoice-grid { grid-template-columns: 1fr; }
    .fin-card--totals { width: 100%; }
}

/* ===================== Блок 8: Автоправила ===================== */
.fin-rules-list { display: flex; flex-direction: column; gap: 10px; }
.fin-rule-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--fin-panel); border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-md); padding: 14px 16px;
}
.fin-rule-card.is-off { opacity: 0.6; }
.fin-rule-card__main { flex: 1; min-width: 0; }
.fin-rule-card__name { font-weight: 600; }
.fin-rule-card__meta { font-size: 12px; color: var(--fin-text-2); margin-top: 2px; }
.fin-rule-card__prio { font-size: 12px; color: var(--fin-muted); white-space: nowrap; }
.fin-rule-card__actions { display: flex; align-items: center; gap: 6px; }

.fin-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; }
.fin-switch input { opacity: 0; width: 0; height: 0; }
.fin-switch__ui { position: absolute; inset: 0; background: var(--fin-bg-800); border: 1px solid var(--fin-border-strong); border-radius: 999px; transition: background 0.15s ease; }
.fin-switch__ui::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: var(--fin-muted); border-radius: 50%; transition: transform 0.15s ease, background 0.15s ease; }
.fin-switch input:checked + .fin-switch__ui { background: rgba(255,126,41,0.3); border-color: var(--fin-accent); }
.fin-switch input:checked + .fin-switch__ui::before { transform: translateX(18px); background: var(--fin-accent); }

.fin-rule-section { background: var(--fin-bg-800); border-radius: var(--fin-radius-md); padding: 12px; }
.fin-rule-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13px; color: var(--fin-text-2); }
.fin-rule-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.fin-rule-row .fin-select, .fin-rule-row .fin-input { flex: 1; min-width: 110px; }
.fin-rule-row .act-ow { flex: 0 0 auto; font-size: 12px; }

@media (max-width: 640px) {
    .fin-rule-card { flex-wrap: wrap; }
    .fin-rule-row { flex-direction: column; align-items: stretch; }
}

/* ===================== Блок 9: AI радник ===================== */
.fin-ai-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; min-height: calc(100vh - var(--fin-header-h) - 80px); }
.fin-ai-sidebar { display: flex; flex-direction: column; gap: 14px; }
.fin-ai-priv { font-size: 12px; color: var(--fin-text-2); background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.2); border-radius: var(--fin-radius-md); padding: 10px 12px; }
.fin-ai-menu { background: var(--fin-panel); border: 1px solid var(--fin-border); border-radius: var(--fin-radius-lg); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.fin-ai-menu__group { font-size: 11px; color: var(--fin-muted); text-transform: uppercase; padding: 10px 8px 4px; }
.fin-ai-menu__item { display: block; text-align: left; padding: 9px 10px; border-radius: var(--fin-radius-sm); border: none; background: transparent; color: var(--fin-text); cursor: pointer; font-size: 14px; text-decoration: none; }
.fin-ai-menu__item:hover { background: rgba(255,255,255,0.04); }
.fin-ai-menu__item.is-active { background: rgba(255,126,41,0.12); color: var(--fin-accent); }
.fin-ai-autoconfirm { font-size: 12px; }

.fin-ai-main { display: flex; flex-direction: column; background: var(--fin-panel); border: 1px solid var(--fin-border); border-radius: var(--fin-radius-lg); overflow: hidden; }
.fin-ai-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.fin-ai-welcome { text-align: center; margin: auto 0; }
.fin-ai-welcome h2 { font-size: 20px; margin: 0 0 8px; }
.fin-ai-welcome p { color: var(--fin-text-2); }
.fin-ai-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; max-width: 460px; margin-left: auto; margin-right: auto; }
.fin-ai-card { display: flex; align-items: center; gap: 8px; padding: 12px; cursor: pointer; text-align: left; background: var(--fin-bg-800); border: 1px solid var(--fin-border-strong); border-radius: var(--fin-radius-md); color: var(--fin-text); font-size: 13px; }
.fin-ai-card:hover { border-color: var(--fin-accent); }
.fin-ai-card span { font-size: 18px; }
.fin-ai-msg { max-width: 78%; padding: 10px 14px; border-radius: 14px; font-size: 14px; white-space: pre-wrap; line-height: 1.45; }
.fin-ai-msg--user { align-self: flex-end; background: linear-gradient(135deg, var(--fin-accent-strong), var(--fin-accent)); color: #1a1205; }
.fin-ai-msg--bot { align-self: flex-start; background: var(--fin-bg-800); border: 1px solid var(--fin-border); }
.fin-ai-issues { display: flex; flex-direction: column; gap: 6px; max-width: 78%; }
.fin-ai-issue { padding: 8px 12px; border-radius: var(--fin-radius-sm); font-size: 13px; }
.fin-ai-issue--ok { background: rgba(52,211,153,0.12); color: var(--fin-pos); }
.fin-ai-issue--info { background: rgba(111,149,255,0.12); color: #b9cbff; }
.fin-ai-issue--warning { background: rgba(243,164,61,0.12); color: var(--fin-accent); }
.fin-ai-issue--danger { background: rgba(251,113,133,0.14); color: var(--fin-neg); }
.fin-ai-input { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--fin-border); }
.fin-ai-input .fin-input { flex: 1; }

@media (max-width: 760px) {
    .fin-ai-layout { grid-template-columns: 1fr; }
    .fin-ai-cards { grid-template-columns: 1fr; }
    .fin-ai-msg, .fin-ai-issues { max-width: 92%; }
}

/* ===================== Блок 10: Користувачі + ефективність ===================== */
.fin-users-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.fin-users-note { font-size: 12px; color: var(--fin-muted); padding: 12px 14px; }
.fin-role-badge { padding: 2px 10px; border-radius: 999px; font-size: 12px; background: rgba(111,149,255,0.14); color: #b9cbff; }
.fin-role-badge--owner { background: rgba(255,126,41,0.16); color: var(--fin-accent); }

.fin-eff-panel { background: var(--fin-panel); border: 1px solid var(--fin-border); border-radius: var(--fin-radius-lg); padding: 18px; }
.fin-eff-title { margin: 0 0 14px; font-size: 15px; }
.fin-eff-gauge { display: flex; justify-content: center; margin-bottom: 8px; }
.fin-eff-circle {
    width: 120px; height: 120px; border-radius: 50%;
    display: grid; place-items: center; font-size: 22px; font-weight: 800;
    background: conic-gradient(var(--fin-accent) calc(var(--pct) * 1%), var(--fin-bg-800) 0);
}
.fin-eff-circle span { width: 92px; height: 92px; border-radius: 50%; background: var(--fin-panel); display: grid; place-items: center; }
.fin-eff-sub { font-size: 12px; color: var(--fin-text-2); text-align: center; margin: 0 0 14px; }
.fin-eff-list { display: flex; flex-direction: column; gap: 6px; }
.fin-eff-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--fin-radius-sm); background: var(--fin-bg-800); font-size: 13px; }
.fin-eff-item.is-done { opacity: 0.7; }
.fin-eff-check { width: 20px; text-align: center; color: var(--fin-muted); }
.fin-eff-item.is-done .fin-eff-check { color: var(--fin-pos); }
.fin-eff-label { flex: 1; }
.fin-eff-cta { font-size: 12px; color: var(--fin-accent); text-decoration: none; }
.fin-eff-cta:hover { text-decoration: underline; }

@media (max-width: 880px) {
    .fin-users-layout { grid-template-columns: 1fr; }
}

/* --- Monobank інтеграція --- */
.fin-badge--biz { background: rgba(34,197,94,0.18); color: #22c55e; }
.fin-hint--sm { font-size: 12px; padding: 8px 10px; margin-bottom: 12px; }
.fin-mono-acc-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; max-height: 320px; overflow-y: auto; }
.fin-mono-acc { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--fin-border); border-radius: 10px; cursor: pointer; }
.fin-mono-acc:hover { border-color: var(--fin-border-strong); }
.fin-mono-acc input { margin-top: 3px; }
.fin-mono-acc__main { display: flex; flex-direction: column; gap: 2px; }
.fin-mono-acc__main small { color: var(--fin-muted); font-size: 12px; }
.fin-mono-conn { border: 1px solid var(--fin-border); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.fin-mono-conn__head { display: flex; align-items: center; gap: 8px; }
.fin-mono-conn__meta { color: var(--fin-muted); font-size: 12px; margin: 6px 0 10px; }
.fin-mono-acc-rows { display: flex; flex-direction: column; gap: 6px; }
.fin-mono-acc-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: var(--fin-bg-800); border-radius: 8px; }
.fin-mono-acc-row__name { flex: 1; }
.fin-mono-acc-row__name small { color: var(--fin-muted); }
.fin-chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fin-muted); cursor: pointer; white-space: nowrap; }
.fin-client { color: var(--fin-muted); font-size: 13px; margin-bottom: 10px; }
.fin-badge--cashback { background: rgba(56,189,248,0.16); color: #38bdf8; }
.fin-mcc-auto { color: var(--fin-muted); font-style: italic; }
.fin-select--sm { padding: 4px 8px; font-size: 13px; }
.fin-scope-filter { display: inline-flex; align-items: center; }

/* ===================== Панель налаштувань ===================== */
.fin-settings-panel {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    justify-content: flex-end;
}
.fin-settings-panel[hidden] { display: none; }

.fin-settings-panel__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 10, 0.7);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.fin-settings-panel.is-open .fin-settings-panel__backdrop { opacity: 1; }

.fin-settings-panel__content {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: var(--fin-panel-strong);
    border-left: 1px solid var(--fin-border-strong);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fin-settings-panel.is-open .fin-settings-panel__content { transform: translateX(0); }

.fin-body.fin-settings-peeking .fin-settings-panel__content {
    transform: translateX(calc(100% - var(--fin-right-drawer-progress, 0px)));
}

.fin-body.fin-settings-peeking .fin-settings-panel__backdrop {
    opacity: calc(var(--fin-right-drawer-ratio, 0) * 0.7);
    pointer-events: none;
}

.fin-settings-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--fin-border);
}
.fin-settings-panel__header h3 { margin: 0; font-size: 20px; font-weight: 700; }

.fin-settings-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.fin-settings-panel__body > .fin-settings-section {
    flex: 0 0 auto;
}

.fin-settings-section {
    background: var(--fin-panel);
    border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-lg);
    padding: 18px 20px;
}
.fin-settings-section__title {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fin-text-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.fin-settings-section__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fin-settings-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 8px;
}

.fin-settings-nav__item {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 12px;
    color: var(--fin-text-2);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-sm);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fin-settings-nav__item:hover,
.fin-settings-nav__item.is-active {
    color: var(--fin-accent);
    background: rgba(255, 126, 41, 0.10);
    border-color: rgba(255, 126, 41, 0.30);
}

.fin-settings-section--push {
    padding: 0;
}
/* [hidden] має надійно ховати контент навіть якщо елемент має display:flex/grid. */
.fin-settings-panel [hidden] { display: none !important; }

.fin-settings-disclosure {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    color: var(--fin-text);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.fin-settings-disclosure strong,
.fin-settings-disclosure small {
    display: block;
}

.fin-settings-disclosure strong {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fin-settings-disclosure small {
    margin-top: 3px;
    color: var(--fin-text-2);
    font-size: 12px;
    line-height: 1.35;
}

.fin-settings-disclosure__chev {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: currentColor;
    color: var(--fin-text-2);
    transition: transform 0.18s ease, color 0.18s ease;
}

.fin-settings-disclosure[aria-expanded="true"] .fin-settings-disclosure__chev {
    color: var(--fin-accent);
    transform: rotate(90deg);
}

.fin-settings-section--push > .fin-settings-section__content {
    padding: 0 20px 18px;
}

.fin-setting-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fin-setting-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.fin-setting-label--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fin-setting-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--fin-bg-800);
    border-radius: var(--fin-radius-md);
}

.fin-settings-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.fin-settings-hint {
    font-size: 12px;
    color: var(--fin-text-2);
    margin: 8px 0 0;
    line-height: 1.5;
}

body.fin-sidebar-open,
body.fin-settings-open { overflow: hidden; }

/* ===================== Toast повідомлення ===================== */
.fin-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    padding: 14px 20px;
    background: var(--fin-panel-strong);
    border: 1px solid var(--fin-border-strong);
    border-radius: var(--fin-radius-md);
    box-shadow: var(--fin-shadow);
    font-size: 14px;
    font-weight: 500;
    max-width: 360px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.fin-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.fin-toast--success {
    border-color: rgba(52, 211, 153, 0.4);
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.14), rgba(52, 211, 153, 0.06));
    color: var(--fin-pos);
}
.fin-toast--error {
    border-color: rgba(251, 113, 133, 0.4);
    background: linear-gradient(135deg, rgba(251, 113, 133, 0.14), rgba(251, 113, 133, 0.06));
    color: var(--fin-neg);
}
.fin-toast--info {
    border-color: rgba(111, 149, 255, 0.4);
    background: linear-gradient(135deg, rgba(111, 149, 255, 0.14), rgba(111, 149, 255, 0.06));
    color: var(--fin-info);
}

/* ===================== Покращена мобільна адаптація ===================== */

/* Оптимізація шрифтів для LCP */
@font-face {
    font-family: 'Inter';
    font-display: swap;
}

/* Покращення анімацій для 60fps */
.fin-sidebar,
.fin-settings-panel__content,
.fin-modal-overlay,
.fin-tabs,
.fin-burger span {
    will-change: transform;
}

/* Плавніші переходи */
.fin-sidebar,
.fin-settings-panel__content {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fin-body.fin-drawer-dragging .fin-sidebar,
.fin-body.fin-drawer-dragging .fin-settings-panel__content {
    transition: none;
}

.fin-body.fin-drawer-dragging {
    user-select: none;
}

.fin-modal-overlay {
    transition: opacity 0.25s ease, backdrop-filter 0.25s ease;
}

/* Покращення для touch devices */
@media (hover: none) and (pointer: coarse) {
    .fin-quick,
    .fin-btn,
    .fin-icon-btn,
    .fin-account,
    .fin-tab {
        min-height: 44px;
        min-width: 44px;
    }

    .fin-table tbody tr {
        cursor: default;
    }
}

/* iPhone 17 Pro Max та подібні великі смартфони (430px width) */
@media (max-width: 900px) {
    /* Sidebar на весь екран по висоті */
    .fin-sidebar {
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
        touch-action: pan-y;
    }

    .fin-sidebar__scroll {
        padding-top: 20px;
    }

    /* Дозволяємо горизонтальні жести (відкриття/закриття шухляд).
       Вертикальний скрол сторінки лишається природним. JS сам викликає
       preventDefault лише коли жест реально активувався. */
    .fin-body {
        overscroll-behavior-x: contain;
        touch-action: pan-y pinch-zoom;
    }

    .fin-settings-panel__content {
        width: min(420px, 92vw);
        max-width: calc(100vw - env(safe-area-inset-left, 0px));
        height: 100vh;
        height: 100dvh;
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
        touch-action: pan-y;
    }

    /* Header з safe area */
    .fin-header {
        padding-top: max(12px, env(safe-area-inset-top, 0));
        padding-left: max(14px, env(safe-area-inset-left, 0));
        padding-right: max(14px, env(safe-area-inset-right, 0));
    }

    /* Content з safe area */
    .fin-content {
        padding-left: max(16px, env(safe-area-inset-left, 0));
        padding-right: max(16px, env(safe-area-inset-right, 0));
        padding-bottom: max(60px, env(safe-area-inset-bottom, 0));
    }

    /* Модалки на весь екран */
    .fin-modal-overlay {
        padding: 0;
        align-items: stretch;
    }

    .fin-modal-card {
        max-width: 100%;
        border-radius: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .fin-modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Журнал платежів: компактний список (рядки мають клас .fin-row) */
    .fin-table-wrap {
        border-radius: 0;
        overflow-x: visible;
        background: transparent;
        border: none;
    }

    .fin-table:has(.fin-row),
    .fin-table:has(.fin-row) tbody {
        display: block;
        width: 100%;
    }

    .fin-table:has(.fin-row) {
        background: transparent;
        border: none;
    }

    .fin-table:has(.fin-row) thead {
        display: none;
    }

    .fin-table:has(.fin-row) tbody {
        display: block;
    }

    /* Компактний рядок-транзакція: сітка 2 колонки (контент / сума) */
    .fin-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "date amount"
            "title title"
            "account category"
            "plandate plandate";
        column-gap: 12px;
        row-gap: 3px;
        align-items: baseline;
        padding: 12px 2px;
        margin: 0;
        border: none;
        border-bottom: 1px solid var(--fin-border);
        border-radius: 0;
        background: transparent;
        position: relative;
    }

    .fin-row:active {
        background: rgba(255, 255, 255, 0.03);
    }

    /* Checkbox прихований за замовчуванням, з'являється при bulk-режимі */
    .fin-row .fin-col-check {
        position: absolute !important;
        left: -100px;
        top: 14px;
        width: auto;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0;
        transition: left 0.2s ease, opacity 0.2s ease;
        z-index: 2;
        display: block !important;
    }

    .fin-row .fin-col-check::before {
        display: none !important;
    }

    .fin-body.fin-bulk-mode .fin-row {
        padding-left: 34px;
    }

    .fin-body.fin-bulk-mode .fin-row .fin-col-check {
        left: 4px;
        opacity: 1;
    }

    /* Дата — сірим, верхній лівий */
    .fin-row .fin-cell-date {
        grid-area: date;
        padding: 0 !important;
        background: none;
        border: none;
        display: flex !important;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        white-space: nowrap;
    }

    .fin-row .fin-cell-date::before {
        display: none !important;
    }

    .fin-date {
        font-size: 13px;
        font-weight: 500;
        color: var(--fin-text-2);
        display: inline;
    }

    .fin-time {
        font-size: 11px;
        color: var(--fin-muted);
        display: inline;
    }

    /* Сума — жирним, верхній правий */
    .fin-row .fin-col-amount {
        grid-area: amount;
        padding: 0 !important;
        text-align: right;
        font-size: 15px !important;
        font-weight: 700 !important;
        display: block !important;
        width: auto !important;
        white-space: nowrap;
        align-self: baseline;
    }

    .fin-row .fin-col-amount::before {
        display: none !important;
    }

    /* Контрагент — головний рядок (назва транзакції), білим */
    .fin-row td[data-label="Контрагент"] {
        grid-area: title;
        padding: 0 !important;
        display: block;
        font-size: 15px;
        font-weight: 600;
        color: var(--fin-text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fin-row td[data-label="Контрагент"]::before {
        display: none !important;
    }

    /* Рахунок — підрядок, сірим */
    .fin-row .fin-cell-account {
        grid-area: account;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        flex-wrap: wrap;
    }

    .fin-row .fin-cell-account::before {
        display: none !important;
    }

    .fin-acc-name {
        font-size: 13px;
        font-weight: 400;
        color: var(--fin-text-2);
        display: inline;
    }

    .fin-acc-balance {
        font-size: 12px;
        color: var(--fin-muted);
        display: inline;
        margin: 0;
    }

    /* Приховуємо менш важливі колонки в компактному списку */
    .fin-row td[data-label="Проект"],
    .fin-row .fin-cell-comment {
        display: none !important;
    }

    /* Планова дата виплати — показуємо окремим рядком для планових операцій,
       щоб у списку на телефоні було видно КОЛИ запланований платіж. */
    .fin-row .fin-cell-plandate {
        grid-area: plandate;
        display: block !important;
        padding: 2px 0 0 !important;
        border: none !important;
    }
    .fin-row .fin-cell-plandate::before { display: none !important; }
    .fin-row .fin-plandate { font-size: 11.5px; padding: 2px 8px; }
    .fin-row .fin-plandate__lbl { display: inline; color: var(--fin-muted); font-weight: 600; }

    /* Категорія — компактний підпис праворуч у meta-рядку. */
    .fin-row td[data-label="Категорія"] {
        grid-area: category;
        padding: 0 !important;
        display: block;
        text-align: right;
        font-size: 12px;
        color: var(--fin-text-2);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 52vw;
        justify-self: end;
    }
    .fin-row td[data-label="Категорія"]::before { display: none !important; }
    .fin-row td[data-label="Категорія"] .fin-specify { color: var(--fin-muted); font-size: 12px; }

    /* "Вказати" — компактний інлайн-лінк замість кнопки */
    .fin-row td[data-label="Контрагент"] .fin-specify {
        display: inline;
        padding: 0;
        background: none;
        border: none;
        color: var(--fin-text-2);
        font-size: 15px;
        font-weight: 500;
        margin: 0;
    }

    /* Badges — інлайн біля дати */
    .fin-row .fin-badge {
        margin-left: 6px;
        font-size: 9px;
        vertical-align: middle;
    }

    .fin-tag-chip {
        display: none !important;
    }

    /* Графіки responsive */
    .fin-chart-canvas {
        height: 240px;
        max-width: 100%;
    }

    .fin-chart-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .fin-chart-with-legend {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Календар компактніший */
    .fin-cal-cell {
        min-height: 80px;
        padding: 8px 6px;
    }

    .fin-cal-day {
        font-size: 13px;
    }

    .fin-cal-in,
    .fin-cal-out {
        font-size: 11px;
    }

    .fin-cal-end {
        font-size: 12px;
    }

    /* KPI cards */
    .fin-kpi-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Balance sheet */
    .fin-balance-sheet {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* AI layout */
    .fin-ai-layout {
        grid-template-columns: 1fr;
    }

    .fin-ai-cards {
        grid-template-columns: 1fr;
    }

    .fin-ai-msg,
    .fin-ai-issues {
        max-width: 92%;
    }

    /* Users layout */
    .fin-users-layout {
        grid-template-columns: 1fr;
    }

    /* Invoice grid */
    .fin-invoice-grid {
        grid-template-columns: 1fr;
    }

    .fin-card--totals {
        width: 100%;
    }

    /* Report cards */
    .fin-report-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    /* Компактніший header */
    .fin-header {
        padding-top: max(10px, env(safe-area-inset-top, 0));
        padding-bottom: 10px;
        gap: 8px;
    }

    .fin-brand-mark {
        width: 34px;
        height: 34px;
    }

    .fin-company {
        padding: 4px 6px;
    }

    .fin-company__name {
        font-size: 12px;
    }

    .fin-quick {
        font-size: 11px;
        padding: 7px 10px;
        gap: 4px;
    }

    .fin-quick__plus,
    .fin-quick__minus,
    .fin-quick__swap {
        font-size: 13px;
    }

    /* Панель налаштувань на весь екран */
    .fin-settings-panel__content {
        width: min(420px, 92vw);
        max-width: calc(100vw - env(safe-area-inset-left, 0px));
        border-left: 1px solid var(--fin-border-strong);
    }

    .fin-settings-panel__body {
        padding: 16px;
    }

    /* Toast внизу по центру */
    .fin-toast {
        left: 16px;
        right: 16px;
        bottom: max(16px, env(safe-area-inset-bottom, 16px));
        max-width: none;
    }

    .fin-page-title {
        font-size: 18px;
    }

    .fin-content {
        padding-top: 14px;
    }

    .fin-sidebar {
        max-width: 90vw;
    }

    /* Інтеграції */
    .fin-integ-list {
        grid-template-columns: 1fr;
    }

    .fin-import-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .fin-import-row__amt {
        text-align: left;
    }

    /* Day summary */
    .fin-day-summary {
        grid-template-columns: 1fr 1fr;
    }

    /* Metrics grid */
    .fin-metrics-grid {
        grid-template-columns: 1fr;
    }

    /* Field rows */
    .fin-field-row {
        flex-direction: column;
        gap: 12px;
    }

    .fin-field--cur {
        max-width: none;
    }
}

@media (max-width: 375px) {
    /* Дуже малі екрани (iPhone SE, etc) */
    .fin-header {
        padding-left: max(10px, env(safe-area-inset-left, 0));
        padding-right: max(10px, env(safe-area-inset-right, 0));
        gap: 6px;
    }

    .fin-burger {
        margin-right: 6px;
    }

    .fin-brand-mark {
        width: 32px;
        height: 32px;
    }

    .fin-quick .fin-quick__label {
        display: none;
    }

    .fin-quick {
        padding: 8px;
        min-width: 40px;
        justify-content: center;
    }

    .fin-page-title {
        font-size: 16px;
    }

    .fin-content {
        padding: 12px;
        padding-bottom: max(60px, env(safe-area-inset-bottom, 60px));
    }

    .fin-sidebar {
        max-width: 95vw;
    }

    .fin-settings-panel__content {
        width: min(420px, 94vw);
    }
}

/* Landscape орієнтація на мобільних */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .fin-header {
        position: relative;
        height: auto;
        min-height: 56px;
    }

    .fin-sidebar {
        top: 0;
        height: 100vh;
    }

    .fin-modal-card {
        max-height: 100vh;
        overflow-y: auto;
    }

    .fin-sidebar__scroll {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .fin-mobile-nav {
        padding: 8px 0;
        margin-bottom: 12px;
    }

    .fin-mobile-nav__item {
        padding: 8px 20px;
    }
}

/* Покращення для великих екранів */
@media (min-width: 1440px) {
    .fin-content {
        max-width: 1600px;
        margin: 0 auto;
    }

    .fin-sidebar {
        width: 320px;
        flex: 0 0 320px;
    }
}

/* Темна тема для iOS/Android */
@media (prefers-color-scheme: dark) {
    .fin-body {
        color-scheme: dark;
    }
}

/* Зменшення руху для accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Покращення контрасту для accessibility */
@media (prefers-contrast: high) {
    .fin-body {
        --fin-border: rgba(255, 255, 255, 0.2);
        --fin-border-strong: rgba(255, 255, 255, 0.3);
    }
}

/* Desktop shell layout guard: keep the account sidebar in its own column.
   Some responsive overrides below 1100px and landscape-height rules can make
   the main content visually claim the sidebar's first row. */
@media (min-width: 901px) {
    .fin-workspace {
        display: grid;
        grid-template-columns: var(--fin-sidebar-w) minmax(0, 1fr);
        align-items: start;
    }

    .fin-sidebar {
        grid-column: 1;
        grid-row: 1;
        width: var(--fin-sidebar-w);
        max-width: none;
        position: sticky;
        top: var(--fin-header-h);
        height: calc(100vh - var(--fin-header-h));
        height: calc(100svh - var(--fin-header-h));
        height: calc(100dvh - var(--fin-header-h));
        align-self: start;
        transform: none;
        overflow: hidden;
    }

    .fin-sidebar__scroll {
        height: 100%;
        max-height: 100%;
        padding-top: 16px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .fin-main {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-width: 0;
    }

    .fin-content {
        width: 100%;
    }

    .fin-sidebar__backdrop {
        display: none !important;
    }
}

@media (min-width: 1440px) {
    .fin-workspace {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .fin-sidebar {
        width: 320px;
    }
}

/* ===================== Іконки-картки рахунків ===================== */
/* Прямокутна «картка» сталого розміру — щоб рахунки легко розрізнялись. */
.fin-acc-icon {
    flex: 0 0 auto;
    width: 34px; height: 21px;
    border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; line-height: 1; font-size: 13px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.fin-acc-icon--emoji { font-size: 14px; background: rgba(255, 255, 255, 0.05); }
.fin-acc-icon--bank {
    font-weight: 800; font-size: 9px; letter-spacing: 0.2px;
    text-transform: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.fin-acc-icon--image { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); background: #0b0e14; }
.fin-acc-icon--image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* У боковому меню — трохи компактніша картка. */
.fin-acc-icon--sidebar { width: 28px; height: 18px; border-radius: 4px; font-size: 11px; }
.fin-acc-icon--sidebar.fin-acc-icon--emoji { font-size: 12px; }
.fin-acc-icon--sidebar.fin-acc-icon--bank { font-size: 8px; }
.fin-account { gap: 8px; }

/* ----------- Модалка редагування рахунку: передогляд ----------- */
.fin-acc-preview {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: var(--fin-radius-md);
    background: var(--fin-bg-800); border: 1px solid var(--fin-border);
}
.fin-acc-preview__name { font-weight: 600; font-size: 15px; color: var(--fin-text); }

/* ----------- Пікер іконки ----------- */
.fin-icon-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.fin-icon-tab {
    padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600;
    border: 1px solid var(--fin-border-strong); background: rgba(255, 255, 255, 0.03);
    color: var(--fin-text-2);
}
.fin-icon-tab.is-active { color: var(--fin-accent); border-color: var(--fin-accent); background: rgba(255, 126, 41, 0.12); }
.fin-icon-pane { margin-top: 10px; }
.fin-icon-pane[hidden] { display: none !important; }
.fin-icon-grid {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px;
}
.fin-icon-grid--bank { grid-template-columns: repeat(4, 1fr); }
.fin-icon-opt {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px; cursor: pointer; border-radius: var(--fin-radius-sm);
    border: 1px solid transparent; background: rgba(255, 255, 255, 0.02);
}
.fin-icon-opt:hover { background: rgba(255, 255, 255, 0.06); }
.fin-icon-opt.is-active { border-color: var(--fin-accent); background: rgba(255, 126, 41, 0.10); }
.fin-icon-opt small { font-size: 10px; color: var(--fin-muted); text-align: center; line-height: 1.1; }
.fin-bank-opt { padding: 8px 6px; }

/* ----------- Колір назви: свотчі + свій колір ----------- */
.fin-color-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.fin-color-swatch {
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
    border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    background: var(--fin-bg-800);
}
.fin-color-swatch.is-active { border-color: var(--fin-text); }
.fin-color-swatch__default {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    font-size: 13px; font-weight: 700; color: var(--fin-text-2);
}
.fin-color-row { display: flex; align-items: center; gap: 8px; }
.fin-color-pick {
    flex: 0 0 auto; width: 40px; height: 38px; border-radius: var(--fin-radius-sm);
    overflow: hidden; border: 1px solid var(--fin-border-strong); cursor: pointer; padding: 0;
    display: inline-flex;
}
.fin-color-input { width: 150%; height: 150%; margin: -25%; border: none; background: none; cursor: pointer; padding: 0; }
.fin-color-hex { flex: 1; min-width: 0; }
.fin-color-row .fin-btn { flex: 0 0 auto; }

@media (max-width: 640px) {
    .fin-icon-grid { grid-template-columns: repeat(6, 1fr); }
    .fin-icon-grid--bank { grid-template-columns: repeat(3, 1fr); }
}

/* ===================== Контрагенти ===================== */
.fin-cp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.fin-cp-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--fin-panel);
    border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-md, 14px);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.fin-cp-card:hover {
    border-color: rgba(255, 126, 41, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.fin-cp-card__top { display: flex; align-items: center; gap: 12px; }
.fin-cp-ava {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    border: 1px solid transparent;
    letter-spacing: 0.5px;
}
.fin-cp-ava--lg { width: 56px; height: 56px; font-size: 19px; border-radius: 16px; }
.fin-cp-card__id { flex: 1 1 auto; min-width: 0; }
.fin-cp-card__name {
    font-weight: 700;
    font-size: 15px;
    color: var(--fin-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fin-cp-card__meta { font-size: 12px; color: var(--fin-muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fin-cp-dot { opacity: 0.5; }
.fin-cp-type {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(111, 149, 255, 0.16);
    color: #b9caff;
}
.fin-cp-type--client { background: rgba(52, 211, 153, 0.16); color: #b8f3dc; }
.fin-cp-type--supplier { background: rgba(251, 191, 36, 0.16); color: #ffe6a8; }
.fin-cp-type--employee { background: rgba(167, 139, 250, 0.16); color: #ddd1ff; }
.fin-cp-type--government { background: rgba(248, 113, 113, 0.16); color: #ffd0d0; }
.fin-cp-type--reseller_partner { background: rgba(56, 189, 248, 0.16); color: #bae6fd; }
.fin-cp-type--collaboration { background: rgba(244, 114, 182, 0.16); color: #fbcfe8; }
.fin-cp-type--landlord_business { background: rgba(45, 212, 191, 0.16); color: #99f6e4; }
.fin-cp-type--landlord_personal { background: rgba(125, 211, 252, 0.16); color: #bae6fd; }
.fin-cp-type--contractor { background: rgba(192, 132, 252, 0.16); color: #e9d5ff; }
.fin-cp-type--marketplace { background: rgba(251, 146, 60, 0.16); color: #fed7aa; }
.fin-cp-type--logistics { background: rgba(148, 163, 184, 0.18); color: #e2e8f0; }
.fin-cp-type--investor { background: rgba(250, 204, 21, 0.16); color: #fef08a; }
.fin-cp-type--bank { background: rgba(96, 165, 250, 0.16); color: #bfdbfe; }
.fin-cp-card__edit {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--fin-border);
    background: transparent;
    color: var(--fin-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.fin-cp-card__edit:hover { color: var(--fin-text); border-color: var(--fin-border-strong, rgba(255,255,255,0.2)); }
.fin-cp-card__del {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--fin-border);
    background: transparent;
    color: var(--fin-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.fin-cp-card__del:hover { color: var(--fin-neg); border-color: rgba(251,113,133,0.4); }
.fin-cp-card__sums {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--fin-border);
    border-bottom: 1px solid var(--fin-border);
}
.fin-cp-sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fin-cp-sum__label { font-size: 11px; color: var(--fin-muted); }
.fin-cp-sum__val { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fin-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-cp-sum__val.is-pos { color: var(--fin-pos); }
.fin-cp-sum__val.is-neg { color: var(--fin-neg); }
.fin-cp-card__foot { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--fin-muted); flex-wrap: wrap; }
.fin-cp-card__last { margin-left: auto; }

/* Деталь контрагента */
.fin-cp-head__id { display: flex; align-items: center; gap: 14px; }
.fin-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid var(--fin-border); color: var(--fin-text);
    text-decoration: none; font-size: 18px; flex: 0 0 auto;
}
.fin-back:hover { border-color: rgba(255,126,41,0.4); }
.fin-cp-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.fin-cp-metric {
    display: flex; flex-direction: column; gap: 3px;
    padding: 12px 14px;
    background: var(--fin-panel);
    border: 1px solid var(--fin-border);
    border-radius: 12px;
}
.fin-cp-metric span { font-size: 12px; color: var(--fin-muted); }
.fin-cp-metric strong { font-size: 16px; color: var(--fin-text); font-variant-numeric: tabular-nums; }
.fin-cp-metric strong.is-pos { color: var(--fin-pos); }
.fin-cp-metric strong.is-neg { color: var(--fin-neg); }

.fin-cp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.fin-cp-col-side { display: flex; flex-direction: column; gap: 14px; }
.fin-cp-panel {
    background: var(--fin-panel);
    border: 1px solid var(--fin-border);
    border-radius: 14px;
    padding: 16px;
}
.fin-cp-panel__title { font-size: 13px; font-weight: 700; color: var(--fin-text); margin: 0 0 12px; }
.fin-cp-reqs { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.fin-cp-reqs dt { color: var(--fin-muted); }
.fin-cp-reqs dd { margin: 0; color: var(--fin-text); word-break: break-word; }
.fin-cp-reqs a { color: var(--fin-info); text-decoration: none; }
.fin-cp-acc-list, .fin-cp-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fin-cp-acc-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.fin-cp-acc-name { color: var(--fin-text); display: flex; align-items: center; gap: 6px; }
.fin-cp-acc-bal { color: var(--fin-muted); font-variant-numeric: tabular-nums; }
.fin-cp-cat-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.fin-cp-cat-icon { flex: 0 0 auto; }
.fin-cp-cat-name { flex: 1 1 auto; color: var(--fin-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-cp-cat-sum { color: var(--fin-muted); font-variant-numeric: tabular-nums; }
.fin-cp-audit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fin-cp-audit li { display: flex; gap: 10px; align-items: flex-start; }
.fin-cp-audit__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--fin-info); }
.fin-cp-audit__dot--create { background: var(--fin-pos); }
.fin-cp-audit__dot--update { background: var(--fin-info); }
.fin-cp-audit__dot--delete { background: var(--fin-neg); }
.fin-cp-audit__sum { font-size: 13px; color: var(--fin-text); }
.fin-cp-audit__meta { font-size: 11px; color: var(--fin-muted); margin-top: 2px; }
.fin-section-count { font-size: 12px; color: var(--fin-muted); font-weight: 500; }
.fin-link-btn { background: none; border: none; color: var(--fin-info); cursor: pointer; padding: 0; font: inherit; }
.fin-muted-cell { color: var(--fin-muted); font-size: 13px; padding: 8px 0; }
.fin-badge--ok { background: rgba(52,211,153,0.16); color: #b8f3dc; }

@media (max-width: 980px) {
    .fin-cp-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .fin-cp-grid { grid-template-columns: 1fr; }
    .fin-cp-card__sums { grid-template-columns: repeat(3, 1fr); }
    /* Таблиця операцій контрагента — карткова розкладка на телефоні. */
    .fin-table--cp thead { display: none; }
    .fin-table--cp tr.fin-cp-tx { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--fin-border); }
    .fin-table--cp tr.fin-cp-tx td { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border: none; }
    .fin-table--cp tr.fin-cp-tx td::before { content: attr(data-label); color: var(--fin-muted); font-size: 11px; }
}

/* Прогноз балансу — карткова розкладка таблиці на телефоні (без накладань). */
@media (max-width: 640px) {
    .fin-table--forecast thead { display: none; }
    .fin-table--forecast tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 10px;
        padding: 12px 0;
        border-bottom: 1px solid var(--fin-border);
    }
    .fin-table--forecast td {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 2px 0;
        border: none !important;
        text-align: left !important;
    }
    .fin-table--forecast td[data-label="Місяць"] { grid-column: 1 / -1; }
    .fin-table--forecast td::before {
        content: attr(data-label);
        font-size: 10.5px;
        color: var(--fin-muted);
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .fin-table--forecast td[data-label="Місяць"]::before { display: none; }
}

/* ===================== Фінансове здоров'я (новий) ===================== */
.fin-hs-hero {
    display: flex;
    align-items: center;
    gap: 28px;
    background: var(--fin-panel);
    border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-lg, 18px);
    padding: 24px 28px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}
.fin-hs-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.10;
    pointer-events: none;
}
.fin-hs-hero--excellent::before { background: radial-gradient(circle at 0% 0%, #10b981, transparent 60%); }
.fin-hs-hero--good::before { background: radial-gradient(circle at 0% 0%, #3b82f6, transparent 60%); }
.fin-hs-hero--fair::before { background: radial-gradient(circle at 0% 0%, #f59e0b, transparent 60%); }
.fin-hs-hero--warn::before { background: radial-gradient(circle at 0% 0%, #fb923c, transparent 60%); }
.fin-hs-hero--poor::before { background: radial-gradient(circle at 0% 0%, #ef4444, transparent 60%); }

.fin-hs-gauge { position: relative; width: 130px; height: 130px; flex: 0 0 auto; }
.fin-hs-gauge__svg { width: 130px; height: 130px; transform: rotate(-90deg); }
.fin-hs-gauge__bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 9; }
.fin-hs-gauge__bar { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(0.4,0,0.2,1); }
.fin-hs-hero--excellent .fin-hs-gauge__bar { stroke: #10b981; }
.fin-hs-hero--good .fin-hs-gauge__bar { stroke: #3b82f6; }
.fin-hs-hero--fair .fin-hs-gauge__bar { stroke: #f59e0b; }
.fin-hs-hero--warn .fin-hs-gauge__bar { stroke: #fb923c; }
.fin-hs-hero--poor .fin-hs-gauge__bar { stroke: #ef4444; }
.fin-hs-gauge__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.fin-hs-gauge__num { font-size: 38px; font-weight: 800; color: var(--fin-text); line-height: 1; }
.fin-hs-gauge__max { font-size: 13px; color: var(--fin-muted); }

.fin-hs-hero__info { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
.fin-hs-hero__label { font-size: 24px; font-weight: 800; color: var(--fin-text); margin-bottom: 6px; }
.fin-hs-hero__conf { font-size: 13px; color: var(--fin-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-hs-hero__conf strong { color: var(--fin-text); }
.fin-hs-confbar { display: inline-block; width: 120px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.fin-hs-confbar span { display: block; height: 100%; background: var(--fin-accent, #ff7e29); border-radius: 999px; }
.fin-hs-subscores { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.fin-hs-sub {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 14px; border-radius: 12px; min-width: 84px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--fin-border);
}
.fin-hs-sub__label { font-size: 11px; color: var(--fin-muted); }
.fin-hs-sub__val { font-size: 20px; font-weight: 800; color: var(--fin-text); }
.fin-hs-sub__val small { color: var(--fin-accent); font-size: 14px; }
.fin-hs-sub--biz { border-left: 3px solid #3b82f6; }
.fin-hs-sub--pers { border-left: 3px solid #a78bfa; }
.fin-hs-sub--bound { border-left: 3px solid #34d399; }
.fin-hs-why-btn {
    margin-top: 14px; background: none; border: none; cursor: pointer;
    color: var(--fin-accent, #ff7e29); font-weight: 600; font-size: 13px; padding: 0;
}
.fin-hs-why-btn:hover { text-decoration: underline; }

.fin-hs-lost {
    background: var(--fin-panel); border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-md, 14px); padding: 16px 18px; margin-bottom: 18px;
}
.fin-hs-lost__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fin-hs-lost__item { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.fin-hs-lost__pts { flex: 0 0 auto; font-weight: 800; color: var(--fin-neg); min-width: 36px; }
.fin-hs-lost__reason { flex: 1 1 auto; color: var(--fin-text); }
.fin-hs-lost__scope { flex: 0 0 auto; font-size: 11px; padding: 1px 8px; border-radius: 999px; text-transform: capitalize; }
.fin-hs-scope--business { background: rgba(59,130,246,0.16); color: #b9cbff; }
.fin-hs-scope--personal { background: rgba(167,139,250,0.16); color: #ddd1ff; }
.fin-hs-scope--boundary { background: rgba(52,211,153,0.16); color: #b8f3dc; }
.fin-hs-scope--data { background: rgba(148,163,184,0.16); color: #cbd5e1; }
.fin-hs-caps { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fin-border); }
.fin-hs-caps h4 { font-size: 12px; color: var(--fin-muted); margin: 0 0 8px; text-transform: uppercase; }
.fin-hs-cap { font-size: 13px; color: #ffd0d0; margin-bottom: 4px; }

.fin-hs-alerts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.fin-hs-alert {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 16px; border-radius: 10px; border: 1px solid var(--fin-border);
}
.fin-hs-alert--critical { border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.10); }
.fin-hs-alert--high { border-color: rgba(251,113,133,0.45); background: rgba(251,113,133,0.08); }
.fin-hs-alert--medium { border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); }
.fin-hs-alert__title { font-weight: 700; font-size: 14px; color: var(--fin-text); }
.fin-hs-alert__msg { font-size: 13px; color: var(--fin-text-2); }

.fin-hs-recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fin-hs-rec {
    background: var(--fin-panel); border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-md, 14px); padding: 16px;
    border-left: 3px solid var(--fin-border-strong, rgba(255,255,255,0.2));
    display: flex; flex-direction: column;
}
.fin-hs-rec--critical { border-left-color: #ef4444; }
.fin-hs-rec--high { border-left-color: #fb7185; }
.fin-hs-rec--medium { border-left-color: #f59e0b; }
.fin-hs-rec--low { border-left-color: #6f95ff; }
.fin-hs-rec--info { border-left-color: #94a3b8; }
.fin-hs-rec__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.fin-hs-rec__sev { font-size: 10px; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; font-weight: 700; letter-spacing: 0.3px; }
.fin-hs-sev--critical { background: rgba(239,68,68,0.18); color: #ffd0d0; }
.fin-hs-sev--high { background: rgba(251,113,133,0.18); color: #ffd7dd; }
.fin-hs-sev--medium { background: rgba(245,158,11,0.18); color: #ffe6a8; }
.fin-hs-sev--low { background: rgba(111,149,255,0.18); color: #b9cbff; }
.fin-hs-sev--info { background: rgba(148,163,184,0.18); color: #cbd5e1; }
.fin-hs-rec__title { font-weight: 700; font-size: 14.5px; color: var(--fin-text); flex: 1 1 auto; }
.fin-hs-rec__impact { font-size: 11px; color: var(--fin-pos); font-weight: 700; white-space: nowrap; }
.fin-hs-rec__problem { font-size: 13px; color: var(--fin-text); margin-bottom: 6px; }
.fin-hs-rec__why { font-size: 12.5px; color: var(--fin-text-2); margin-bottom: 8px; }
.fin-hs-rec__why b { color: var(--fin-muted); }
.fin-hs-rec__actions { margin: 0 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.fin-hs-rec__actions li { font-size: 13px; color: var(--fin-text); line-height: 1.4; }
.fin-hs-rec__cash { font-size: 12.5px; color: var(--fin-pos); font-weight: 600; }

/* Розкриття «Докладніше» у картках рекомендацій */
.fin-hs-rec__more {
    align-self: flex-start; margin-top: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--fin-border);
    color: var(--fin-text-2); cursor: pointer;
    font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.fin-hs-rec__more:hover { background: rgba(255,255,255,0.08); color: var(--fin-text); }
.fin-hs-rec__more-ico { font-size: 10px; transition: transform 0.2s ease; }
.fin-hs-rec__more.is-open .fin-hs-rec__more-ico { transform: rotate(180deg); }
.fin-hs-rec__details {
    margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--fin-border);
    animation: finHsReveal 0.25s ease;
}
@keyframes finHsReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fin-hs-rec__expl { font-size: 13px; line-height: 1.55; color: var(--fin-text-2); margin: 0 0 12px; }
.fin-hs-rec__bp { margin-bottom: 12px; }
.fin-hs-rec__bp-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--fin-muted); margin-bottom: 6px; }
.fin-hs-rec__bp ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fin-hs-rec__bp li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.45; color: var(--fin-text); }
.fin-hs-rec__bp li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--fin-pos); font-weight: 800; }
.fin-hs-rec__bench { font-size: 12.5px; line-height: 1.45; color: var(--fin-text-2); background: rgba(111,149,255,0.10); border: 1px solid rgba(111,149,255,0.25); border-radius: 10px; padding: 8px 12px; }
.fin-hs-rec__bench b { color: #b9cbff; }

.fin-section-sub { font-size: 13px; color: var(--fin-muted); margin: -4px 0 14px; line-height: 1.5; }

/* Сітка карток-метрик здоров'я: 5 → 4 → 3 → 2 → 1 рівними колонками */
.fin-kpi-row.fin-hs-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .fin-kpi-row.fin-hs-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px) { .fin-kpi-row.fin-hs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .fin-kpi-row.fin-hs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .fin-kpi-row.fin-hs-cards { grid-template-columns: 1fr; } }

/* Розбір оцінки по слоях */
.fin-hs-layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fin-hs-layer {
    background: var(--fin-panel); border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-md, 14px); padding: 16px 18px;
    border-top: 3px solid var(--fin-border-strong, rgba(255,255,255,0.2));
}
.fin-hs-layer--biz { border-top-color: #3b82f6; }
.fin-hs-layer--pers { border-top-color: #a78bfa; }
.fin-hs-layer--bound { border-top-color: #34d399; }
.fin-hs-layer__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.fin-hs-layer__title { font-size: 15px; font-weight: 700; color: var(--fin-text); }
.fin-hs-layer__score { font-size: 26px; font-weight: 800; color: var(--fin-text); line-height: 1; }
.fin-hs-layer__score small { color: var(--fin-accent); font-size: 15px; }
.fin-hs-layer__desc { font-size: 12px; color: var(--fin-muted); line-height: 1.45; margin: 0 0 14px; }
.fin-hs-layer__rows { display: flex; flex-direction: column; gap: 9px; }
.fin-hs-layer__row { display: grid; grid-template-columns: 1fr 70px 30px; gap: 8px; align-items: center; }
.fin-hs-layer__row-label { font-size: 12.5px; color: var(--fin-text-2); }
.fin-hs-layer__row-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.fin-hs-layer__row-bar span { display: block; height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.fin-hs-layer__row-bar .is-good { background: linear-gradient(90deg, #34d399, #10b981); }
.fin-hs-layer__row-bar .is-mid { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.fin-hs-layer__row-bar .is-bad { background: linear-gradient(90deg, #fb7185, #ef4444); }
.fin-hs-layer__row-score { font-size: 12.5px; font-weight: 700; color: var(--fin-text); text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 980px) { .fin-hs-layers { grid-template-columns: 1fr; } }

.fin-hs-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fin-hs-aging { display: flex; flex-direction: column; gap: 10px; }
.fin-hs-aging__row { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.fin-hs-aging__label { color: var(--fin-text-2); }
.fin-hs-aging__bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.fin-hs-aging__bar span { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); border-radius: 999px; }
.fin-hs-aging__val { font-variant-numeric: tabular-nums; color: var(--fin-text); white-space: nowrap; }

/* Заморожений капітал — картки розбивки складу */
.fin-breakdown-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fin-breakdown-card {
    background: rgba(255,255,255,0.04); border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius-md, 14px); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.fin-breakdown-card__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--fin-muted); }
.fin-breakdown-card__value { font-size: 19px; font-weight: 800; color: var(--fin-text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.fin-breakdown-card__qty { font-size: 12px; color: var(--fin-text-2); }
@media (max-width: 520px) { .fin-breakdown-cards { grid-template-columns: 1fr 1fr; } }

@media (max-width: 860px) {
    .fin-hs-recs { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .fin-hs-hero { flex-direction: column; align-items: flex-start; gap: 18px; text-align: left; }
    .fin-hs-two-col { grid-template-columns: 1fr; }
    .fin-hs-gauge { align-self: center; }
}

/* Дебіторка/кредиторка — карткова розкладка на телефоні (без вилазання). */
@media (max-width: 760px) {
    .fin-table--debt { display: block; }
    .fin-table--debt thead { display: none; }
    .fin-table--debt tbody { display: block; }
    .fin-table--debt tr.fin-debt-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px 10px;
        padding: 12px;
        margin-bottom: 10px;
        background: var(--fin-panel);
        border: 1px solid var(--fin-border);
        border-radius: 12px;
    }
    .fin-table--debt tr.fin-debt-row.fin-row--overdue {
        border-color: rgba(251,113,133,0.4);
        background: rgba(251,113,133,0.06);
    }
    .fin-table--debt tr.fin-debt-row td {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 2px 0;
        border: none;
        font-size: 13px;
    }
    .fin-table--debt tr.fin-debt-row td::before {
        content: attr(data-label);
        color: var(--fin-muted);
        font-size: 11px;
        flex: 0 0 auto;
    }
    /* Контрагент — заголовок картки на всю ширину. */
    .fin-table--debt tr.fin-debt-row td[data-label="Контрагент"] {
        grid-column: 1 / -1;
        font-weight: 700;
        font-size: 14px;
        color: var(--fin-text);
    }
    .fin-table--debt tr.fin-debt-row td[data-label="Контрагент"]::before { display: none; }
    .fin-table--debt tr.fin-debt-row td[data-label="Сума"] {
        grid-column: 1 / -1;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    /* Ховаємо порожні/менш важливі поля у компактному режимі. */
    .fin-table--debt tr.fin-debt-row td[data-label="Проект"],
    .fin-table--debt tr.fin-debt-row td[data-label="Коментар"] { display: none; }
    .fin-debt-row__act {
        grid-column: 1 / -1;
        justify-content: flex-end !important;
    }
    .fin-debt-row__act::before { display: none !important; }
}

/* Панель масових дій на телефоні — закріплена знизу окремою карткою.
   З'являється лише при виділенні. Заголовок (лічильник + закрити) зверху,
   дії — сіткою у 2 колонки, що переноситься (без обрізання й вилазання). */
@media (max-width: 760px) {
    .fin-bulkbar {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        margin: 0;
        z-index: 95;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
        background: var(--fin-panel-strong, #11161f);
        border: 1px solid rgba(255, 126, 41, 0.45);
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
    }
    .fin-bulkbar__head {
        justify-content: space-between;
        width: 100%;
    }
    .fin-bulkbar__count {
        font-weight: 700;
        color: var(--fin-text);
        font-size: 14px;
    }
    .fin-bulkbar__toggle,
    .fin-bulkbar__clear {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Згорнутий стан: показуємо лише заголовок (лічильник + кнопки), дії — ховаємо. */
    .fin-bulkbar.is-collapsed .fin-bulkbar__actions {
        display: none;
    }
    .fin-bulkbar.is-collapsed {
        gap: 0;
        padding: 8px 12px;
    }
    .fin-bulkbar__actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 100%;
        flex-wrap: initial;
    }
    .fin-bulkbar__actions .fin-btn {
        width: 100%;
        min-height: 42px;
        justify-content: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* «Видалити» — на всю ширину окремим рядком (акцент небезпечної дії). */
    .fin-bulkbar__actions .fin-btn--danger {
        grid-column: 1 / -1;
    }
    /* Щоб закріплена панель не перекривала останні рядки журналу. */
    .fin-body.fin-bulk-mode .fin-content {
        padding-bottom: 230px;
    }
    /* Згорнута панель коротка — менше відступу знизу. */
    .fin-body.fin-bulk-mode:has(.fin-bulkbar.is-collapsed) .fin-content {
        padding-bottom: 70px;
    }
}

/* AR aging — кольори ризику за віком боргу. */
.fin-hs-aging__bar.fin-aging--ok span { background: #34d399; }
.fin-hs-aging__bar.fin-aging--low span { background: #6f95ff; }
.fin-hs-aging__bar.fin-aging--mid span { background: #f59e0b; }
.fin-hs-aging__bar.fin-aging--high span { background: #fb923c; }
.fin-hs-aging__bar.fin-aging--crit span { background: #ef4444; }


/* === Модалка push-звітів (deep-link) === */
.fin-report-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.fin-report-modal[hidden] { display: none; }
.fin-report-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 9, 16, 0.62);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .26s ease;
}
.fin-report-modal.is-open .fin-report-modal__backdrop { opacity: 1; }
.fin-report-modal__dialog {
    position: relative;
    width: min(640px, 100%);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(26, 32, 46, 0.98), rgba(15, 19, 29, 0.98));
    border: 1px solid var(--fin-border-strong);
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    box-shadow: var(--fin-shadow);
    transform: translateY(24px);
    opacity: 0;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .28s ease;
}
.fin-report-modal.is-open .fin-report-modal__dialog { transform: translateY(0); opacity: 1; }
@media (min-width: 720px) {
    .fin-report-modal { align-items: center; }
    .fin-report-modal__dialog { border-radius: 22px; border-bottom: 1px solid var(--fin-border-strong); }
}

.fin-report-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--fin-border);
    position: relative;
}
.fin-report-modal__head::after {
    content: '';
    position: absolute;
    left: 22px; right: 22px; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--fin-accent-strong), transparent);
}
.fin-report-modal__eyebrow {
    display: inline-block;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fin-accent);
    font-weight: 700;
}
.fin-report-modal__title {
    margin: 4px 0 2px;
    font-size: 20px;
    font-weight: 800;
    color: var(--fin-text);
    line-height: 1.2;
}
.fin-report-modal__date { font-size: 13px; color: var(--fin-muted); }
.fin-report-modal__close {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--fin-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--fin-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}
.fin-report-modal__close:hover { background: rgba(255, 255, 255, 0.1); }

.fin-report-modal__body {
    padding: 18px 22px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.fin-report-modal__loading,
.fin-report-empty {
    padding: 40px 10px;
    text-align: center;
    color: var(--fin-muted);
}
.fin-report-modal__foot {
    display: flex;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--fin-border);
}
.fin-report-modal__foot .fin-btn { flex: 1; }

/* Статистичні картки */
.fin-rstat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.fin-rstat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fin-rstat {
    padding: 12px 14px;
    border-radius: var(--fin-radius-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--fin-border);
}
.fin-rstat__label { display: block; font-size: 12px; color: var(--fin-muted); margin-bottom: 4px; }
.fin-rstat__value { font-size: 18px; font-weight: 800; color: var(--fin-text); }
.fin-rstat--pos .fin-rstat__value { color: var(--fin-pos); }
.fin-rstat--neg .fin-rstat__value { color: var(--fin-neg); }

.fin-rmeta {
    display: flex;
    gap: 14px;
    margin: -6px 0 16px;
    font-size: 12px;
    color: var(--fin-muted);
}

.fin-rsection { margin-top: 18px; }
.fin-rsection__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--fin-text);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fin-rlist, .fin-rdebt-table { display: flex; flex-direction: column; gap: 6px; }
.fin-rline, .fin-rdebt-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--fin-radius-sm);
    background: rgba(255, 255, 255, 0.03);
    font-size: 13px;
    color: var(--fin-text);
}
.fin-rline .is-pos, .fin-rdebt-line.is-pos strong { color: var(--fin-pos); }
.fin-rline .is-neg, .fin-rdebt-line.is-neg strong { color: var(--fin-neg); }

/* Борги */
.fin-rdebt-block {
    padding: 12px 14px;
    border-radius: var(--fin-radius-md);
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--fin-border-strong);
    margin-bottom: 8px;
}
.fin-rdebt-block--pos { border-left-color: var(--fin-pos); }
.fin-rdebt-block--neg { border-left-color: var(--fin-neg); }
.fin-rdebt-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--fin-text);
}
.fin-rdebt-sub { font-size: 12px; color: var(--fin-muted); margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fin-rdebt-nearest { font-size: 12px; color: var(--fin-muted); margin-top: 6px; }
.fin-rdebt-nearest em { color: var(--fin-accent); font-style: normal; }
.fin-rbadge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
    color: var(--fin-muted);
}
.fin-rbadge--alert { background: rgba(251, 113, 133, 0.16); color: var(--fin-neg); }

.fin-rdebt-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--fin-radius-sm);
    background: rgba(255, 255, 255, 0.03);
    font-size: 13px;
}
.fin-rdebt-row.is-overdue { background: rgba(251, 113, 133, 0.1); }
.fin-rdebt-row__name { color: var(--fin-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-rdebt-row__meta em { color: var(--fin-neg); font-style: normal; font-size: 11px; }
.fin-rdebt-table--pos .fin-rdebt-row__amt { color: var(--fin-pos); }
.fin-rdebt-table--neg .fin-rdebt-row__amt { color: var(--fin-neg); }

/* Тижневий графік */
.fin-rchart {
    margin: 4px 0 8px;
    padding: 14px;
    border-radius: var(--fin-radius-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--fin-border);
}
.fin-rchart__legend { display: flex; gap: 14px; font-size: 11px; color: var(--fin-muted); margin-bottom: 10px; }
.fin-rchart__legend span { display: flex; align-items: center; gap: 5px; }
.fin-rchart__legend span::before { content: ''; width: 9px; height: 9px; border-radius: 3px; }
.fin-rchart__legend .is-inc::before { background: var(--fin-pos); }
.fin-rchart__legend .is-exp::before { background: var(--fin-neg); }
.fin-rchart__plot {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 130px;
}
.fin-rchart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.fin-rchart__bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.fin-rchart__bar { width: 44%; min-height: 2px; border-radius: 4px 4px 0 0; transition: height .4s ease; }
.fin-rchart__bar--inc { background: linear-gradient(180deg, var(--fin-pos), rgba(52, 211, 153, 0.4)); }
.fin-rchart__bar--exp { background: linear-gradient(180deg, var(--fin-neg), rgba(251, 113, 133, 0.4)); }
.fin-rchart__label { font-size: 11px; color: var(--fin-muted); }

/* Здоровʼя — gauge */
.fin-rhealth {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: var(--fin-radius-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--fin-border);
    margin-top: 16px;
}
.fin-rhealth__gauge {
    flex: 0 0 auto;
    width: 64px; height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, rgba(15, 19, 29, 1) 70%, transparent 71%),
        conic-gradient(var(--fin-pos) calc(var(--score, 0) * 1%), rgba(255, 255, 255, 0.08) 0);
    font-weight: 800;
    color: var(--fin-text);
}
.fin-rhealth__gauge span { font-size: 18px; }
.fin-rhealth__gauge--alert { background:
        radial-gradient(closest-side, rgba(15, 19, 29, 1) 70%, transparent 71%),
        conic-gradient(var(--fin-neg) calc(var(--score, 0) * 1%), rgba(255, 255, 255, 0.08) 0); }
.fin-rhealth__text { display: flex; flex-direction: column; }
.fin-rhealth__text strong { color: var(--fin-text); font-size: 15px; }
.fin-rhealth__text span { color: var(--fin-muted); font-size: 13px; }

/* Метрики */
.fin-rmetric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fin-rmetric {
    padding: 10px 12px;
    border-radius: var(--fin-radius-sm);
    background: rgba(255, 255, 255, 0.03);
}
.fin-rmetric__label { display: block; font-size: 11px; color: var(--fin-muted); }
.fin-rmetric__value { font-size: 16px; font-weight: 700; color: var(--fin-text); }
.fin-rmetric__hint { display: block; font-size: 10px; color: var(--fin-muted); margin-top: 2px; }

/* Категорії з прогрес-баром */
.fin-rcat { margin-bottom: 10px; }
.fin-rcat__top { display: flex; justify-content: space-between; font-size: 13px; color: var(--fin-text); }
.fin-rcat__bar { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); margin: 5px 0 2px; overflow: hidden; }
.fin-rcat__bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--fin-accent-strong), var(--fin-accent)); }
.fin-rcat small { font-size: 11px; color: var(--fin-muted); }

/* Ризики */
.fin-ralert {
    padding: 10px 12px;
    border-radius: var(--fin-radius-sm);
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--fin-neg);
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.fin-ralert strong { font-size: 13px; color: var(--fin-text); }
.fin-ralert span { font-size: 12px; color: var(--fin-muted); }
.fin-ralert--critical { border-left-color: var(--fin-neg); }
.fin-ralert--high { border-left-color: var(--fin-accent-strong); }

/* Поради */
.fin-rtips__list { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.fin-rtips__list li {
    position: relative;
    padding: 10px 12px 10px 34px;
    border-radius: var(--fin-radius-sm);
    background: rgba(243, 164, 61, 0.08);
    border: 1px solid rgba(243, 164, 61, 0.18);
    font-size: 12.5px;
    color: var(--fin-text);
    line-height: 1.45;
}
.fin-rtips__list li::before {
    content: '→';
    position: absolute;
    left: 13px; top: 10px;
    color: var(--fin-accent);
    font-weight: 700;
}
.fin-report-text { font-size: 13.5px; color: var(--fin-text); line-height: 1.5; }

body.fin-report-open { overflow: hidden; }


/* === Погашення зобов'язань: єдина модалка === */
.fin-settle .fin-settle-head {
    display: flex; flex-direction: column; gap: 4px;
}
.fin-settle-summary {
    margin: 0; font-size: 14px; font-weight: 600; color: var(--fin-text);
}
.fin-settle-cp {
    font-size: 12px; color: var(--fin-text-2);
}

/* Сегментований перемикач режиму */
.fin-seg {
    display: flex; gap: 6px; background: var(--fin-bg-800);
    border: 1px solid var(--fin-border-strong); border-radius: 999px; padding: 4px;
}
.fin-seg__btn {
    flex: 1; padding: 9px 12px; border: none; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--fin-text-2); font-weight: 600; font-size: 13px;
    transition: background .15s, color .15s;
}
.fin-seg__btn.is-active { background: rgba(255,126,41,0.16); color: var(--fin-text); }
.fin-seg__btn:disabled { opacity: .4; cursor: not-allowed; }

.fin-settle-pane { display: flex; flex-direction: column; gap: 10px; }

/* Список кандидатів-платежів (полоски) */
.fin-cand-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.fin-cand {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "amt card" "meta meta";
    gap: 2px 10px; text-align: left; width: 100%; cursor: pointer;
    padding: 10px 12px; border-radius: var(--fin-radius-sm);
    border: 1px solid var(--fin-border-strong); background: rgba(255,255,255,0.03);
    color: var(--fin-text); transition: border-color .15s, background .15s;
}
.fin-cand:hover { border-color: var(--fin-accent); }
.fin-cand.is-selected { border-color: var(--fin-accent); background: rgba(255,126,41,0.12); }
.fin-cand__amt { grid-area: amt; font-weight: 700; font-size: 14px; }
.fin-cand__meta { grid-area: meta; font-size: 12px; color: var(--fin-text-2); }
.fin-cand__card {
    grid-area: card; justify-self: end; font-size: 11px; color: var(--fin-text-2);
    background: rgba(255,255,255,0.05); border-radius: 999px; padding: 2px 8px;
}
.fin-cand-empty { font-size: 13px; color: var(--fin-text-2); padding: 8px 4px; }

/* Повністю / частково */
.fin-settle-period {
    display: flex; flex-direction: column; gap: 8px;
    background: var(--fin-bg-800); border-radius: var(--fin-radius-sm); padding: 12px;
}
.fin-field-label { font-size: 13px; font-weight: 600; color: var(--fin-text); }
.fin-radio { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--fin-text); cursor: pointer; }
.fin-radio input { margin-top: 3px; }
.fin-radio small { display: block; color: var(--fin-text-2); font-size: 11px; }

/* Картки контрагента (полоски як платежі на головній) */
.fin-cp-cards { display: flex; flex-direction: column; gap: 8px; }
.fin-cp-card {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: var(--fin-radius-sm); border: 1px solid var(--fin-border-strong);
    background: rgba(255,255,255,0.03);
}
.fin-cp-card__bank { font-weight: 700; font-size: 13px; color: var(--fin-text); }
.fin-cp-card__tail { font-family: monospace; color: var(--fin-text-2); }
.fin-cp-card__badge {
    margin-left: auto; font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: rgba(255,126,41,0.16); color: var(--fin-accent);
}
.fin-cp-card.is-incomplete { border-style: dashed; opacity: .85; }

/* Обернений промпт «у рахунок кредиторки?» */
.fin-revprompt {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 1200; width: min(440px, 94vw);
    background: var(--fin-panel-strong); border: 1px solid var(--fin-border-strong);
    border-radius: var(--fin-radius-md); box-shadow: var(--fin-shadow); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.fin-revprompt[hidden] { display: none; }
.fin-revprompt__title { font-size: 14px; font-weight: 600; color: var(--fin-text); }
.fin-revprompt__sub { font-size: 12px; color: var(--fin-text-2); }
.fin-revprompt__actions { display: flex; gap: 8px; }
.fin-revprompt__actions .fin-btn { flex: 1; }

@media (max-width: 540px) {
    .fin-seg__btn { padding: 11px 8px; }
    .fin-cand-list { max-height: 50vh; }
    .fin-revprompt { left: 8px; right: 8px; transform: none; width: auto; }
}


/* Картки/обовʼязки у профілі контрагента */
.fin-cp-card__label { font-size: 11px; color: var(--fin-text-2); }
.fin-cp-card__del {
    margin-left: 6px; background: transparent; border: none; color: var(--fin-text-2);
    font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.fin-cp-card__del:hover { color: #fb7185; }
.fin-cp-obligs { display: flex; flex-direction: column; gap: 10px; }


/* Степпер «за N місяців» у модалці погашення */
.fin-settle-periods { display: flex; flex-direction: column; gap: 6px; }
.fin-stepper { display: inline-flex; align-items: center; gap: 0; align-self: flex-start;
    border: 1px solid var(--fin-border-strong); border-radius: 10px; overflow: hidden; }
.fin-stepper__btn { width: 40px; height: 38px; border: none; cursor: pointer;
    background: rgba(255,255,255,.04); color: var(--fin-text); font-size: 20px; line-height: 1; }
.fin-stepper__btn:hover { background: rgba(255,255,255,.1); }
.fin-stepper__val { padding: 0 16px; font-size: 14px; min-width: 64px; text-align: center; }
.fin-stepper__val b { font-size: 16px; }


/* Бейдж «погашення зобов'язання» у журналі (кредиторка/дебіторка) */
.fin-settle-pill {
    display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
    margin-left: 6px; padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    border: 1px solid transparent;
}
.fin-settle-pill--expense { color: #fca5a5; background: rgba(248,113,133,.13); border-color: rgba(248,113,133,.32); }
.fin-settle-pill--income { color: #6ee7b7; background: rgba(52,211,153,.13); border-color: rgba(52,211,153,.32); }
.fin-settle-pill--transfer { color: #93c5fd; background: rgba(111,149,255,.13); border-color: rgba(111,149,255,.32); }

/* На телефоні бейдж погашення — окремим рядком під назвою (ячейка коментаря
   прихована, тож показуємо його в ячейці контрагента/заголовка). */
@media (max-width: 900px) {
  .fin-row td[data-label="Контрагент"] { white-space: normal; }
  .fin-row td[data-label="Контрагент"] .fin-settle-pill {
    display: inline-flex; margin: 4px 0 0; font-size: 10.5px;
  }
}