@font-face {
    font-family: Vazir;
    src: url("/fonts/Vazir.ttf") format("truetype");
    font-display: swap;
}

:root {
    --green: #0b6f8d;
    --green-dark: #142f57;
    --green-soft: #eaf5f9;
    --gold: #b98728;
    --ink: #17221f;
    --muted: #71807b;
    --surface: #ffffff;
    --page: #ffffff;
    --card-font-scale: 1;
    --small-card-font-scale: 1;
    --large-card-font-scale: 1;
    --app-font-scale: 1;
    font-family: Vazir, Tahoma, sans-serif;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: #ffffff;
    color: var(--ink);
}
@supports (zoom: 1) {
    body { zoom: var(--app-font-scale); }
}
.hidden { display: none !important; }
@keyframes page-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.view-transition { animation: page-enter .28s ease both; }
@keyframes page-slide-left {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes page-slide-right {
    from { opacity: 0; transform: translateX(-28px); }
    to { opacity: 1; transform: translateX(0); }
}
.view-transition[data-transition-direction="forward"] { animation-name: page-slide-left; }
.view-transition[data-transition-direction="back"] { animation-name: page-slide-right; }
@media (prefers-reduced-motion: reduce) {
    .view-transition { animation: none; }
}
.auth-screen {
    width: min(100% - 28px, 460px);
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 10px 0;
}
.startup-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: #fff;
}
.startup-media {
    width: 100%;
    display: grid;
    gap: 14px;
    justify-items: center;
}
.startup-media video {
    display: block;
    width: 100%;
    max-width: 760px;
    height: auto;
    object-fit: contain;
    background: #fff;
}
.startup-media video + video { max-height: 32vh; }
.startup-media img { display: block; width: 100%; max-width: 760px; height: auto; object-fit: contain; }
.flat-auth-view {
    width: min(100%, 620px);
    margin: 0 auto;
    padding: 26px 9px;
    text-align: center;
}
.otp-step > .outlined-field:first-of-type,
.otp-step > .terms-hint { display: none; }
.otp-step #auth-change-number,
.otp-step #auth-resend { display: block; }
#otp-auth-view:not(.otp-step) #otp-wrapper { display: none !important; }
.flat-auth-view h1 {margin: 10px 0 6px;font-size: 16px;}
.flat-auth-view > p { color: var(--muted); line-height: 1.9; font-size: 12px;}
.auth-step-icon { display: block; width: 120px; height: 120px; object-fit: contain; margin: 0 auto 14px; }
.outlined-field {
    position: relative;
    display: block;
    margin: 16px 0 8px;
    border: 1.5px solid var(--green);
    border-radius: 9px;
    padding: 10px 12px 4px;
    background: #fff;
}
    .outlined-field > span {
        position: absolute;
        right: 14px;
        top: -10px;
        padding: 0 7px;
        color: var(--green-dark);
        background: #fff;
        font-size: 12px;
    }
    .outlined-field input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        padding: 2px 0;
        font: inherit;
        font-size: 13px;
    }

#mobile-number,
#otp-code {
    direction: ltr;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-feature-settings: "ss01" 0, "pnum" 0;
    font-variant-numeric: normal;
}

#mobile-number {
    font-family: Vazir, Tahoma, sans-serif;
}

#otp-wrapper {
    margin-top: 16px;
}

#otp-wrapper .auth-otp-field {
    margin: 0;
}

#otp-code {
    text-align: center;
    letter-spacing: 6px;
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}


#otp-auth-view {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 20px);
    min-height: calc(100dvh - 20px);
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}
#otp-auth-view > .terms-hint { margin: auto 0 0; padding-top: 24px; }
.terms-hint { font-size: 12px; }
.terms-hint a { color: var(--green-dark); text-decoration: none; }
.text-button { display: block; margin: 13px auto 0; border: 0; background: transparent; color: var(--green-dark); cursor: pointer;font-size:12px; }
.auth-hero, .auth-card { display: none !important; }
.legacy-auth-fields { margin-top: 16px; }
#password-wrapper { margin-top: 12px; text-align: right; }
.login-password-label { display: block; margin-bottom: 8px; color: var(--green-dark); font-size: 12px; }
.login-password-pin { display: flex; justify-content: center; gap: 9px; }
.login-password-digit { width: 48px; height: 48px; box-sizing: border-box; border: 1.5px solid var(--green); border-radius: 10px; outline: 0; color: var(--ink); background: #fff; text-align: center; font: 700 20px Arial, sans-serif; }
.login-password-digit:focus { box-shadow: 0 0 0 3px #dff2eb; }
.login-password-hint { margin: 9px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.auth-hero { text-align: center; }
.auth-hero-art { position: relative; width: 174px; height: 134px; margin: 0 auto 5px; }
.auth-phone-shape { position: absolute; left: 51px; top: 8px; width: 66px; height: 112px; border: 7px solid #12415a; border-radius: 22px; transform: rotate(-12deg); }
.auth-phone-shape::before { content: ""; position: absolute; left: 20px; top: 9px; width: 22px; height: 5px; border-radius: 4px; background: #12415a; }
.auth-message-bubble { position: absolute; right: -2px; top: 40px; padding: 14px 13px 13px; border-radius: 14px 14px 14px 2px; color: #17435a; background: #b3d500; font-size: 14px; font-weight: bold; box-shadow: 0 9px 0 rgba(0,0,0,.07); }
.auth-brand { text-align: center; color: var(--green-dark); }
.brand-mark {
    display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 12px;
    border-radius: 24px; color: #fff; background: linear-gradient(135deg, var(--green), var(--green-dark));
    font-size: 42px; box-shadow: 0 12px 25px rgba(0, 107, 85, .2);
}
.brand-mark { display: none; }
.brand-logo {
    display: block; width: 92px; height: 92px; object-fit: contain; margin: 0 auto 12px;
    border-radius: 24px; background: #fff; box-shadow: 0 12px 25px rgba(0, 107, 85, .2);
}
.auth-brand p { margin: 0; font-size: 24px; font-weight: bold; }
.auth-brand span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.auth-brand .brand-logo { width: 66px; height: 66px; border-radius: 18px; box-shadow: none; }
.auth-card { animation: auth-card-enter .45s ease both; }
@keyframes auth-card-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.auth-card {
    padding: 24px 22px 20px; border: 1px solid #edf3f0; border-radius: 26px; background: #fff;
    box-shadow: 0 14px 32px rgba(26, 75, 61, .1);
}
.auth-card h1 { margin: 0 0 8px; font-size: 22px; }
.auth-card > p { margin: 0 0 22px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.auth-card label { display: block; margin: 14px 0 7px; font-size: 13px; font-weight: bold; }
.auth-card input {
    width: 100%; padding: 13px 14px; border: 1px solid #d9e8e2; border-radius: 14px;
    outline: none; color: var(--ink); background: #fbfefd;
}
.auth-card input:focus { border-color: var(--green); box-shadow: 0 0 0 3px #dff2eb; }
.auth-mode-switch { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 16px; }
.auth-mode-button { padding: 9px 6px; border: 1px solid #d9e8e2; border-radius: 11px; color: var(--muted); background: #fff; cursor: pointer; font-size: 11px; }
.auth-mode-button.active { display: none; }
.auth-secondary-hint { margin: 12px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.primary-button {
    width: 100%;
    margin-top: 1px;
    padding: 11px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--green);
    cursor: pointer;
    font-weight: bold;
    scroll-margin-block: 18px;
}

    .primary-button:disabled {
        cursor: wait;
        opacity: .6;
    }

.form-message {
    min-height: 0;
    margin: 4px 0 0 !important;
    color: #b85d00 !important;
}

button { font: inherit; }

.app-shell {
    width: min(100%, 440px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 28px 18px 106px;
    box-sizing: border-box;
    overflow-x: clip;
/*    background-image: url("/app/assets/icons/page-backgrand.png");
*/    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

    .app-shell,
    .app-shell .app-header,
    .app-shell main,
    #funds-view {
        background-color: transparent;
    }

.app-header, .section-heading, .event-card, .progress-card {
    display: flex;
    align-items: center;
}

/* =========================================================
   App Header & Controls (کد کامل هدر در styles1.css)
   ========================================================= */

.app-header {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    position: sticky;
    top: 0;
    z-index: 100;
    width: calc(100% + 36px);
    margin: -28px -18px 16px -18px;
    padding: 14px 20px 12px;
    border-radius: 0 0 28px 28px;
    background: radial-gradient(112% 120% at -10% -28%, rgba(107, 160, 255, .46) 0 19%, transparent 57%), radial-gradient(78% 92% at 108% 118%, rgba(54, 202, 202, .22) 0 8%, transparent 67%), linear-gradient(135deg, #193f8a 0%, #102e6d 55%, #081d50 100%) !important;
    box-shadow: 0 10px 24px rgba(8, 29, 80, .28);
    overflow: visible;
    isolation: isolate;
    box-sizing: border-box;
}

.app-header::before { position: absolute; z-index: 0; inset: 0; content: ""; border-radius: inherit; background: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 1px, transparent 1px 13px); opacity: .42; pointer-events: none; }
.app-header > * { position: relative; z-index: 1; }

    .app-header > div {
        display: flex;
        align-items: center;
    }

    .app-header .header-actions-left {
        /* مدیریت صندوق: دکمه تنظیمات همیشه در انتهای چپ هدر بماند. */
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 120;
        display: flex;
        align-items: center;
        min-width: 40px;
    }

    .app-header .fund-management-header-menu {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        color: #fff;
        background: transparent;
        cursor: pointer;
    }

    .app-header .fund-management-header-menu:hover { background: rgba(255, 255, 255, .16); }

    .app-header .fund-management-header-menu span {
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: currentColor;
    }

    .app-header .fund-management-header-menu.hidden { display: none !important; }

    .app-header .page-title-row {
        position: static;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .app-header .page-title-icon {
        display: none !important;
    }

    .app-header h1 {
        position: absolute;
        top: 32px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        color: #ffffff;
        font-size: 17px;
        font-weight: 700;
        white-space: nowrap;
        pointer-events: none;
    }

    .app-shell:not(.trial-badge-visible) .app-header h1 {
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .app-header .header-trial-badge {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 2px 8px 1px;
        border: 0;
        border-radius: 0 0 4px 4px;
        color: #193f8a;
        background: #ffe3a0;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.35;
        white-space: nowrap;
        cursor: pointer;
        animation: header-trial-badge-pulse 1.8s ease-in-out infinite;
        transition: top .66s cubic-bezier(.22, .8, .3, 1), width .66s cubic-bezier(.22, .8, .3, 1), min-height .66s ease, padding .66s ease, border-radius .66s ease, box-shadow .66s ease, background .3s ease, color .3s ease;
    }

    .app-header .header-trial-badge b { display: block; height: 9px; margin-top: -2px; font-size: 14px; font-weight: 700; line-height: .8; transition: transform .3s ease; }
    .app-header .header-trial-badge[aria-expanded="true"] b { transform: rotate(180deg); }
    .app-header .header-trial-badge[aria-expanded="true"] {
        z-index: 160;
        top: 55px;
        width: min(calc(100vw - 56px), 360px);
        min-height: 34px;
        padding: 7px 12px;
        border-radius: 7px;
        justify-content: center;
        color: #fff;
        background: #ee8b24;
        box-shadow: 0 8px 18px rgba(176, 89, 12, .24);
        animation: none;
    }
    .app-header .header-trial-badge[aria-expanded="true"] b { display: none; }
    .trial-badge-expanded-label { display: none; }
    .app-header .header-trial-badge[aria-expanded="true"] .trial-badge-default-label { display: none; }
    .app-header .header-trial-badge[aria-expanded="true"] .trial-badge-expanded-label { display: block; }
    .app-header .header-trial-badge:focus-visible { outline: 3px solid rgba(255, 227, 160, .75); outline-offset: 3px; }

    .app-header .header-trial-badge.hidden { display: none; }

    .trial-info-card {
        position: absolute;
        z-index: 150;
        top: 73px;
        left: 50%;
        width: min(calc(100vw - 36px), 385px);
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        border: 1px solid rgba(25, 63, 138, .16);
        border-radius: 0 0 18px 18px;
        color: #172523;
        background: #fff;
        box-shadow: 0 16px 30px rgba(25, 63, 138, .18);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -12px) scale(.98);
        transform-origin: top center;
        transition: grid-template-rows .66s cubic-bezier(.22, .8, .3, 1), opacity .36s ease, transform .66s cubic-bezier(.22, .8, .3, 1);
    }

    .trial-info-card:not(.hidden) { display: grid; }
    .trial-info-card.expanded { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
    .trial-info-card-content { min-height: 0; overflow: hidden; padding: 0 16px; transition: padding .66s cubic-bezier(.22, .8, .3, 1); }
    .trial-info-card.expanded .trial-info-card-content { padding: 31px 16px 16px; }
    .trial-info-list { display: grid; margin: 0; padding: 0; list-style: none; color: #35485d; font-size: 11px; line-height: 1.9; }
    .trial-info-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: stretch; gap: 9px; padding: 10px 0; text-align: justify; text-align-last: right; }
    .trial-info-list li:not(:last-child) { border-bottom: 1px solid #e8edf2; }
    .trial-info-list li > b { position: relative; display: grid; place-items: center; align-self: stretch; min-height: 100%; color: inherit; }
    .trial-info-list li > b::after { position: absolute; top: 0; bottom: 0; inset-inline-start: auto; inset-inline-end: 0; width: 1px; content: ""; background: #d9e0e7; }
    .trial-info-list li > b > span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #fff; background: #ee8b24; font-size: 11px; line-height: 1; box-shadow: 0 2px 5px rgba(176, 89, 12, .2); }
    .trial-info-list li > span { min-width: 0; white-space: nowrap; }
    .trial-info-subscription-button { width: 100%; min-height: 38px; margin-top: 14px; border: 0; border-radius: 10px; color: #fff; background: #193f8a; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .28s ease .22s, transform .38s cubic-bezier(.22, .8, .3, 1) .22s, background .2s ease; }
    .trial-info-card.expanded .trial-info-subscription-button { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .trial-info-subscription-button:hover { background: #102f6d; }
    .trial-info-subscription-button:focus-visible { outline: 3px solid rgba(25, 63, 138, .28); outline-offset: 2px; }
    .trial-info-close { display: grid; place-items: center; width: 34px; height: 24px; margin: 12px auto -4px; padding: 0; border: 0; border-radius: 10px; outline: none; color: #193f8a; background: transparent; cursor: pointer; font: inherit; font-size: 21px; line-height: 1; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .28s ease .27s, transform .38s cubic-bezier(.22, .8, .3, 1) .27s, background .2s ease; -webkit-tap-highlight-color: transparent; }
    .trial-info-card.expanded .trial-info-close { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .trial-info-close:hover { background: rgba(25, 63, 138, .08); }
    .trial-info-close:focus-visible { outline: none; }

    @keyframes header-trial-badge-pulse {
        0%, 100% { opacity: 1; box-shadow: 0 0 0 rgba(255, 227, 160, 0); }
        50% { opacity: .68; box-shadow: 0 0 9px rgba(255, 227, 160, .72); }
    }

    @media (prefers-reduced-motion: reduce) {
        .app-header .header-trial-badge { animation: none; }
        .trial-info-card, .trial-info-card-content, .app-header .header-trial-badge, .app-header .header-trial-badge b, .trial-info-close, .trial-info-subscription-button { transition: none; }
    }

    .app-header .menu-button {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        cursor: pointer;
    }

    .app-header .notification-bell-button {
        position: relative;
        display: inline-grid;
        place-items: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        color: #fff;
        background: transparent;
        font: inherit;
        font-size: 22px;
        cursor: pointer;
    }
    .app-header .notification-bell-button:hover { background: rgba(255,255,255,.16); }
    .notification-bell-count { position: absolute; top: -3px; left: -4px; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid #193f8a; border-radius: 999px; color: #fff; background: #ed7e23; font-size: 10px; line-height: 15px; }
    .notification-bell-count.hidden { display: none; }

.notification-bell-modal { position: fixed; z-index: 180; top: 70px; right: max(14px, calc((100vw - 520px) / 2 + 14px)); width: min(calc(100vw - 28px), 385px); max-height: min(68vh, 570px); overflow: auto; padding: 14px; border: 1px solid rgba(255,255,255,.45); border-radius: 19px; color: #fff; background: repeating-linear-gradient(135deg, rgba(255,255,255,.09) 0 1px, transparent 1px 12px), linear-gradient(135deg, #f39a2e, #de6f1e 60%, #bf4f17); box-shadow: 0 18px 38px rgba(110, 56, 13, .28); transform-origin: right center; animation: notification-bell-enter .66s cubic-bezier(.22, .8, .3, 1) both; }
.notification-bell-modal.hidden { display: none; }
.notification-bell-modal.is-closing { pointer-events: none; animation: notification-bell-exit .46s cubic-bezier(.4, 0, .78, .2) forwards; }
.notification-bell-modal-head { display: flex; justify-content: flex-start; min-height: 20px; }
.notification-bell-close { display: grid; place-items: center; width: 26px; height: 26px; margin-right: auto; padding: 0; border: 0; color: #fff; background: transparent; font: inherit; font-size: 25px; line-height: 1; cursor: pointer; }
.notification-bell-list { display: grid; gap: 7px; margin-top: 3px; }
.notification-bell-item { display: grid; gap: 3px; padding: 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; color: #6b330d; background: rgba(255,250,241,.89); }
.notification-bell-item.unread { border-right: 4px solid #173d85; background: #fff; }
.notification-bell-item strong { color: #173d85; font-size: 12px; }
.notification-bell-item span { font-size: 11px; line-height: 1.7; }
.notification-bell-item small { color: #8d603d; font-size: 10px; }
.notification-bell-all-messages { width: 100%; min-height: 38px; margin-top: 11px; border-color: rgba(255,255,255,.72); color: #fff; background: rgba(122,53,8,.22); }
.message-card-unread { border-right: 4px solid #ed7e23; }
.transaction-card[data-payment-submission-id] { position: relative; cursor: pointer; padding-left: 48px; }
.transaction-card[data-payment-submission-id]::after { content: '‹'; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #173d85; background: #eef4ff; font-size: 22px; }
.transaction-card[data-payment-submission-id] .transaction-card-grid-bottom .transaction-cell:not(.transaction-amount-cell):not(.transaction-status-cell),
.transaction-card[data-payment-submission-id] .loan-transaction-details { display: none; }
.transaction-card[data-payment-submission-id] .transaction-recorded-by-manager,
.transaction-card[data-payment-submission-id] .transaction-review-button,
.transaction-card[data-payment-submission-id] .transaction-receipt-button,
.transaction-card[data-payment-submission-id] .transaction-rejection-reason { display: none !important; }
.transaction-card[data-payment-submission-id] .transaction-card-grid { grid-template-columns: 1fr 1fr; }
.transaction-card[data-payment-submission-id] .transaction-card-grid-top .transaction-member-cell { align-items: flex-start; text-align: right; }
.transaction-card[data-payment-submission-id] .transaction-card-grid-top .transaction-date-cell { align-items: flex-end; text-align: left; }
.transaction-card[data-payment-submission-id] .transaction-card-grid-top .transaction-date-cell > span,
.transaction-card[data-payment-submission-id] .transaction-card-grid-bottom .transaction-amount-cell > span:first-child { display: none; }
.transaction-card[data-payment-submission-id] .transaction-card-grid-bottom .transaction-status-cell { align-items: flex-start; text-align: right; }
.transaction-card[data-payment-submission-id] .transaction-card-grid-bottom .transaction-amount-cell { align-items: flex-end; text-align: left; }
.transaction-card[data-payment-submission-id] .transaction-amount-display { justify-content: flex-end; }
.transaction-card[data-payment-submission-id] .transaction-amount-incoming { color: #159947; }
.transaction-card[data-payment-submission-id] .transaction-amount-outgoing { color: #c63b3b; }
.transaction-details-list { display: grid; gap: 8px; margin-top: 12px; }
.transaction-details-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 10px; background: #f5f8fc; }
.transaction-details-row span { color: #71809a; }
.transaction-details-row strong { color: #173d85; text-align: left; }
.transaction-details-actions { display: flex; gap: 8px; margin-top: 14px; }
.transaction-details-actions button { flex: 1; }
.transaction-winners-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.transaction-winners-controls button { min-width: 36px; min-height: 34px; border: 1px solid #d6e2f2; border-radius: 10px; color: #173d85; background: #fff; cursor: pointer; }
.transaction-winners-controls button:nth-child(2) { flex: 1; color: #fff; background: #173d85; }
.transaction-winners-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.transaction-winners-list .transaction-winner-row { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 12px; border: 1px solid #dce7f5; border-radius: 14px; background: linear-gradient(145deg, #fff, #f4f8ff); box-shadow: 0 8px 18px rgba(23,61,133,.08); }
.transaction-winners-list .transaction-winner-row time { grid-column: 2; font-size: 10px; color: #71809a; }
.transaction-winners-all-modal-card { max-width: 560px; }
.transaction-winners-all-list { display: grid; gap: 9px; max-height: 55vh; overflow: auto; margin: 12px 0 16px; padding: 2px; }
.transaction-winner-all-item { display: grid; grid-template-columns: 28px 38px 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #dce7f5; border-radius: 14px; background: linear-gradient(135deg, #fff, #f6f9ff); box-shadow: 0 7px 16px rgba(23,61,133,.07); }
.transaction-winner-all-index { color: #173d85; font-weight: 800; text-align: center; }
.transaction-winner-all-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff4cf; }
.transaction-winner-all-icon img { width: 22px; height: 22px; object-fit: contain; }
.transaction-winner-all-item div { display: grid; gap: 3px; }
.transaction-winner-all-item strong { color: #173d85; }
.transaction-winner-all-item small, .transaction-winner-all-item time { color: #71809a; font-size: 10px; }
@media (max-width: 520px) { .transaction-winners-list { grid-template-columns: 1fr; } }
@keyframes notification-bell-enter { from { opacity: 0; clip-path: inset(0 0 0 88%); transform: translateX(18px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); } }
@keyframes notification-bell-exit { from { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); } to { opacity: 0; clip-path: inset(0 0 0 88%); transform: translateX(18px); } }

        .app-header .menu-button img {
            width: 22px;
            height: 22px;
            object-fit: contain;
            filter: brightness(0) invert(1);
        }

    .app-header .header-back-btn {
        position: relative;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        border: none;
        background:none;
        color: #ffffff;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.15s ease;
        flex-shrink: 0;
        padding: 0;
        margin: 0;
        -webkit-tap-highlight-color: transparent;
    }

        .app-header .header-back-btn:hover {
            background: rgba(255, 255, 255, 0.26);
        }

        .app-header .header-back-btn:active {
            transform: scale(0.96);
        }

        .app-header .header-back-btn svg,
        .app-header .header-back-btn img {
            width: 22px;
            height: 22px;
            object-fit: contain;
            display: block;
            pointer-events: none;
        }


        .app-header .header-back-btn.hidden {
            display: none !important;
        }

        .app-header .header-back-btn svg {
            width: 22px;
            height: 22px;
            stroke: #ffffff;
            fill: none;
        }

    /* دکمه مثبت (ایجاد صندوق) داخل هدر */
    .app-header .fund-create-header-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        margin: 0;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #ffffff;
        cursor: pointer;
        z-index: 5;
        transition: opacity 0.2s ease, transform 0.1s ease;
    }

        .app-header .fund-create-header-btn:hover {
            opacity: 0.85;
        }

        .app-header .fund-create-header-btn:active {
            transform: scale(0.92);
        }

        .app-header .fund-create-header-btn svg {
            width: 24px;
            height: 24px;
            display: block;
            stroke: #ffffff;
            fill: none;
            pointer-events: none;
        }




.app-header-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
}


.app-header #page-eyebrow { display: none; }
#dashboard-message { display: none; }
.members-title-row .eyebrow, .funds-page-head .eyebrow, .reports-view .members-title-row .eyebrow,
.create-fund-view .members-title-row .eyebrow { display: none; }
.page-title-row { display: flex; align-items: center; gap: 9px; }
.page-title-icon { width: 30px; height: 30px; max-width: 30px; max-height: 30px; flex: 0 0 30px; object-fit: contain; }
.menu-button {
    position: absolute;
    top: 12px;
    right: 4px;
    z-index: 1;
    width: 40px;
    height: 40px;
    padding: 6px;
    border-radius: 11px;
    color: var(--role-accent, var(--green));
    background: var(--role-soft, var(--green-soft));
}
.menu-button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.eyebrow { margin: 0; color: var(--muted); font-size: 12px; }
.avatar {
    display: grid; place-items: center; width: 42px; height: 42px;
    border-radius: 50%; background: var(--green); color: #fff; font-size: 20px;
}
.danger-button { width: 100%; margin-top: 10px; padding: 11px; border: 1px solid #f0cfc6; border-radius: 13px; color: #9a3d28; background: #fff5f1; cursor: pointer; font: inherit; }
.compact-button { width: auto !important; margin: 0 !important; white-space: nowrap; }
.bank-field-row { display: flex; align-items: center; gap: 8px; }
.bank-field-row .form-input { flex: 1; }
.bank-mode-switch { display: flex; width: min(100%, 300px); margin: 14px auto 18px; padding: 4px; border-radius: 999px; background: #f3f6f5; }
.bank-mode-button { flex: 1; border: 0; border-radius: 999px; padding: 10px 14px; color: var(--muted); background: transparent; cursor: pointer; }
.bank-mode-button.active { color: #fff; background: var(--green); font-weight: bold; }
.gender-mode-switch { display: flex; width: min(100%, 300px); margin: 8px auto 10px; padding: 4px; border: 1px solid #d5e5e2; border-radius: 999px; background: #f3f6f5; box-shadow: inset 0 1px 2px rgba(0,0,0,.04); }
.gender-mode-button { flex: 1; border: 0; border-radius: 999px; padding: 10px 14px; color: #31566b; background: transparent; cursor: pointer; font: inherit; font-weight: 700; }
.gender-mode-button.active { color: #fff; background: linear-gradient(135deg, var(--green), #0f8d85); }
.gender-mode-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.bank-detection { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 12px; color: var(--green-dark); background: var(--green-soft); font-size: 11px; }
.bank-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #fff; font-size: 14px; }
.bank-management-hero { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; color: var(--green-dark); background: var(--green-soft); }
.bank-management-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; background: var(--green); font-size: 21px; }
.bank-management-hero strong, .bank-management-hero small { display: block; }
.bank-management-hero strong { font-size: 14px; }
.bank-management-hero small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.bank-management-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.bank-management-actions .primary-button, .bank-management-actions .outline-button { margin: 0; min-height: 42px; }
.bank-management-tips { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px; border-radius: 13px; color: var(--muted); background: #fafcfb; font-size: 10px; line-height: 1.8; }
.bank-management-tips span { color: var(--green); font-size: 16px; line-height: 1; }
.bank-management-tips p { margin: 0; }
.bank-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 8px;
    padding: 18px;
    border-radius: 16px;
    background: #eaf5f9;
}
.bank-page-root { margin: 0; padding: 0; border-radius: 0; background: transparent; min-height: calc(100dvh - 120px); display: flex; flex-direction: column; }
.bank-page-root::before { opacity: .16; background-size: min(85vw, 360px); }
#user-profile-panel:has(.profile-tab-panel[data-profile-group="bank"]:not(.hidden)),
#more-feature-panel:has(.bank-accounts-root) {
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
#user-profile-panel:has(.profile-tab-panel[data-profile-group="bank"]:not(.hidden)) .profile-tab-panel[data-profile-group="bank"],
#more-feature-panel:has(.bank-accounts-root) #more-feature-content { padding: 0; }
.draw-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 12px 0; }
.draw-mode-options label, .draw-participant-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #dbe5e8; border-radius: 10px; background: #fff; font-size: 12px; }
.draw-mode-options label { width: 100%; min-width: 0; justify-content: center; white-space: nowrap; }
.draw-mode-options input, .draw-participant-item input { accent-color: var(--green); }
.draw-participant-list { display: grid; gap: 7px; max-height: 340px; overflow-y: auto; margin: 14px 0; }
.draw-wheel-stage { position: relative; display: grid; place-items: center; min-height: 286px; margin: 8px auto 16px; overflow: hidden; }
.draw-wheel { position: relative; width: min(72vw, 270px); aspect-ratio: 1; border: 7px solid #fff; border-radius: 50%; background: conic-gradient(#1f9b9b 0 50%, #254a93 50% 100%); box-shadow: 0 0 0 2px #dce7e5, 0 14px 30px rgba(18, 62, 89, .17); transition: transform 2.9s cubic-bezier(.13,.76,.15,1); }
.draw-wheel::after { position: absolute; inset: 46.25%; content: ""; border: 2px solid #fff; border-radius: 50%; background: #193f8a; box-shadow: 0 2px 7px rgba(0,0,0,.15); }
.draw-wheel-label { position: absolute; top: 50%; left: 50%; z-index: 1; width: 68px; color: #fff; font-size: 9px; font-weight: 700; line-height: 1.25; text-align: center; word-break: break-word; transform-origin: center; }
.draw-wheel-pointer { position: absolute; z-index: 3; top: 0; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-right: 14px solid transparent; border-left: 14px solid transparent; border-top: 30px solid #f59b32; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
.draw-wheel-status { min-height: 20px; margin: 10px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.draw-wheel.is-spinning { filter: saturate(1.1) brightness(1.03); }
.draw-wheel.live-draw-spinning { filter: saturate(1.08) brightness(1.03); }
.live-draw-confetti { position: absolute; z-index: 5; inset: 0; overflow: hidden; pointer-events: none; }
.live-draw-confetti i { position: absolute; top: 42%; left: var(--confetti-left); width: 8px; height: 13px; background: var(--confetti-color); border-radius: 2px; animation: live-draw-confetti 2.3s cubic-bezier(.12,.68,.25,1) var(--confetti-delay) forwards; }
@keyframes live-draw-confetti { from { opacity: 1; transform: translate(-50%, 0) rotate(0deg); } to { opacity: 0; transform: translate(calc(-50% + var(--confetti-left)), 170px) rotate(540deg); } }
.draw-selection-summary { margin: 14px 0; padding: 12px; border: 1px solid #e2eceb; border-radius: 12px; background: #f9fcfb; }
.draw-selection-summary h3 { margin: 0 0 8px; font-size: 13px; }
.draw-selected-chip { display: inline-block; margin: 3px; padding: 5px 8px; border-radius: 8px; color: #124f5b; background: #e7f5f2; font-size: 11px; }
.draw-winner-modal-card { max-width: 390px; text-align: center; }
.draw-winner-name { display: block; margin: 20px 0 8px; color: var(--green-dark); font-size: 25px; }
.draw-winner-name > span { display: block; margin: 6px 0; }
.live-draw-modal { z-index: 1800; place-items: center; }
.live-draw-modal-card { width: min(100%, 430px); max-height: min(86dvh, 660px); overflow: hidden; text-align: center; border-color: #cde4df; background: radial-gradient(circle at 50% 4%, #f1fbf8 0, #fff 46%); }
.live-draw-modal-card > .eyebrow { margin: 0; color: var(--green-dark); }
.live-draw-modal-card h3 { margin: 5px 0 0; color: var(--ink); font-size: 17px; }
.live-draw-wheel-stage { min-height: 320px; margin: 10px auto 2px; }
.live-draw-wheel-stage .draw-wheel { width: min(74vw, 288px); }
.live-draw-winner { margin: 2px auto 8px; animation: live-draw-winner-in .35s ease-out both; }
.live-draw-winner span, .live-draw-winner strong { display: block; }
.live-draw-winner span { color: var(--muted); font-size: 11px; }
.live-draw-winner strong { margin-top: 5px; color: var(--green-dark); font-size: 25px; }
@keyframes live-draw-winner-in { from { opacity: 0; transform: translateY(9px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Synchronized horizontal slot-machine lottery presentation. */
.draw-live-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 12px 0 4px;
    padding: 10px 12px;
    border: 1px solid rgba(6, 182, 212, .32);
    border-radius: 12px;
    color: #0f4c5c;
    background: linear-gradient(135deg, rgba(236, 254, 255, .95), rgba(240, 249, 255, .86));
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.draw-live-toggle input { accent-color: #06b6d4; }
.draw-live-toggle small { color: #54717b; font-size: 10px; font-weight: 600; }
.draw-wheel-stage {
    display: grid;
    place-items: center;
    min-height: 250px;
    margin: 12px auto 16px;
    overflow: hidden;
}
.draw-wheel {
    position: relative;
    width: min(100%, 620px);
    height: 190px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 22px;
    background: #0f172a;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .28), inset 0 0 0 1px rgba(255,255,255,.04);
    direction: ltr;
    contain: layout paint;
}
.draw-wheel::before,
.draw-wheel::after {
    position: absolute;
    z-index: 2;
    inset-block: 0;
    width: clamp(18px, 10%, 48px);
    content: "";
    pointer-events: none;
}
.draw-wheel::before {
    left: 0;
    background: linear-gradient(90deg, rgba(15,23,42,.72), rgba(15,23,42,.22) 42%, transparent);
}
.draw-wheel::after {
    right: 0;
    background: linear-gradient(270deg, rgba(15,23,42,.72), rgba(15,23,42,.22) 42%, transparent);
}
.draw-slot-track {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    width: max-content;
    padding: 15px 0;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
.draw-slot-card {
    display: flex;
    flex: 0 0 140px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    width: 140px;
    height: 142px;
    padding: 12px 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 16px;
    color: #e2e8f0;
    background: linear-gradient(145deg, rgba(30,41,59,.96), rgba(15,23,42,.9));
    box-shadow: 0 4px 12px rgba(2, 6, 23, .14);
    direction: rtl;
    text-align: center;
}
.draw-slot-card strong {
    width: 100%;
    overflow: hidden;
    color: #f8fafc;
    font-size: 13px;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.draw-slot-avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(34,211,238,.45);
    border-radius: 50%;
    color: #cffafe;
    background: linear-gradient(135deg, #155e75, #0e7490);
    box-shadow: 0 0 18px rgba(6,182,212,.24);
    font-size: 16px;
    font-weight: 900;
}
.draw-slot-avatar { display: none !important; }
.draw-slot-shares {
    padding: 3px 8px;
    border-radius: 999px;
    color: #bae6fd;
    background: rgba(14,116,144,.35);
    font-size: 10px;
    white-space: nowrap;
}
.draw-wheel.has-winner .draw-slot-card.is-winner {
    border-color: #22d3ee;
    box-shadow: 0 0 0 2px rgba(34,211,238,.22), 0 0 28px rgba(6,182,212,.5);
    animation: slot-winner-pulse 1.25s ease-in-out infinite alternate;
}
.draw-wheel-pointer {
    position: absolute;
    z-index: 4;
    top: calc(50% - 116px);
    left: 50%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    border-top: 18px solid #06b6d4;
    filter: drop-shadow(0 0 7px rgba(6,182,212,.9));
    pointer-events: none;
}
.draw-wheel-pointer::after {
    position: absolute;
    top: 184px;
    left: -12px;
    width: 0;
    height: 0;
    content: "";
    border-right: 12px solid transparent;
    border-bottom: 18px solid #06b6d4;
    border-left: 12px solid transparent;
    filter: drop-shadow(0 0 7px rgba(6,182,212,.9));
}
.draw-wheel-status { position: relative; z-index: 5; }
.live-draw-wheel-stage { min-height: 250px; }
.live-draw-modal-card { width: min(100%, 820px); max-width: 820px; background: #111827; }
.live-draw-modal-card h3 { color: #e2e8f0; }
.live-draw-modal-card > .eyebrow { color: #67e8f9; }
@keyframes slot-winner-pulse { from { transform: scale(1); } to { transform: scale(1.04); } }
@media (max-width: 560px) {
    .draw-wheel { height: 174px; border-radius: 18px; }
    .draw-slot-card { flex-basis: 118px; width: 118px; height: 148px; }
    .draw-wheel-pointer { top: calc(50% - 95px); }
    .draw-wheel-pointer::after { top: 168px; }
    .draw-live-toggle { width: 100%; box-sizing: border-box; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .draw-wheel.has-winner .draw-slot-card.is-winner { animation: none; }
}

/* The lottery cards form a horizontal 3D ring, not a flat marquee. */
.draw-wheel {
    perspective: 900px;
    overflow: hidden;
}
.draw-wheel::before,
.draw-wheel::after {
    border: 0 !important;
    border-radius: 0 !important;
}
.draw-slot-track {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    will-change: transform;
}
.draw-slot-card {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -71px 0 0 -70px;
    transform: rotateY(var(--slot-angle)) translateZ(var(--slot-radius));
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: opacity .2s ease, filter .2s ease;
}
.draw-slot-card:not(.is-winner) { filter: none; }
.draw-slot-card.is-winner {
    height: 158px;
    margin-top: -79px;
}
.draw-slot-card.is-front {
    z-index: 3;
    height: 154px;
    margin-top: -77px;
    border-color: rgba(34,211,238,.38);
}
.draw-slot-card.is-winner.is-front {
    height: 158px;
    margin-top: -79px;
}
.draw-wheel.is-spinning .draw-slot-card { opacity: .92; }
.draw-wheel.has-winner .draw-slot-card.is-winner { opacity: 1; filter: none; }
/* After the spin, hide rear cards so none can appear as a dark vertical band
   across the centred winner card. */
.draw-wheel.has-winner:not(.is-spinning) .draw-slot-card:not(.is-front) {
    visibility: hidden;
    opacity: 0;
}
.draw-wheel.has-winner:not(.is-spinning) .draw-slot-card.is-front {
    z-index: 20;
    opacity: 1;
}
/* Ready state: present three clear cards before the 3D ring starts moving.
   The complete ring is restored automatically by .is-spinning. */
.draw-wheel:not(.is-spinning):not(.has-winner) .draw-slot-card {
    visibility: hidden;
    margin: 0;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
}
.draw-wheel:not(.is-spinning):not(.has-winner) .draw-slot-card:nth-child(-n + 3) {
    visibility: visible;
}
.draw-wheel:not(.is-spinning):not(.has-winner) .draw-slot-card:nth-child(1) {
    z-index: 3;
    height: 164px;
    margin-top: -82px;
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
}
.draw-wheel:not(.is-spinning):not(.has-winner) .draw-slot-card:nth-child(2) {
    z-index: 2;
    opacity: .72;
    transform: translate3d(calc(-50% - 152px), -50%, 0) scale(.9);
}
.draw-wheel:not(.is-spinning):not(.has-winner) .draw-slot-card:nth-child(3) {
    z-index: 2;
    opacity: .72;
    transform: translate3d(calc(-50% + 152px), -50%, 0) scale(.9);
}
@media (max-width: 560px) {
    .draw-slot-card {
        height: 132px;
        margin: -66px 0 0 -59px;
    }
    .draw-slot-card.is-winner { height: 146px; margin-top: -73px; }
    .draw-slot-card.is-front { height: 142px; margin-top: -71px; }
    .draw-slot-card.is-winner.is-front { height: 146px; margin-top: -73px; }
}

/* Final web sizing and indicator alignment. */
.draw-wheel-stage { min-height: 280px; }
.draw-wheel { width: min(100%, 620px); height: 210px; }
.draw-slot-card {
    height: 146px;
    margin-top: -73px;
    box-shadow: none !important;
    background: #1e293b;
}
.draw-slot-card.is-front {
    height: 164px;
    margin-top: -82px;
    box-shadow: 0 0 0 1px rgba(34,211,238,.34) !important;
}
.draw-slot-card.is-winner.is-front {
    height: 168px;
    margin-top: -84px;
    box-shadow: 0 0 0 2px rgba(34,211,238,.42), 0 0 20px rgba(6,182,212,.34) !important;
}
.draw-wheel-pointer { top: calc(50% - 124px); }
.draw-wheel-pointer::after { top: 190px; }
.draw-wheel-status { margin-top: 24px; }
.draw-wheel::before,
.draw-wheel::after {
    display: none !important;
}
@media (max-width: 560px) {
    .draw-wheel-stage { min-height: 250px; }
    .draw-wheel { height: 190px; }
    .draw-slot-card { height: 132px; margin-top: -66px; }
    .draw-slot-card.is-front { height: 146px; margin-top: -73px; }
    .draw-slot-card.is-winner.is-front { height: 150px; margin-top: -75px; }
    .draw-wheel-pointer { top: calc(50% - 111px); }
    .draw-wheel-pointer::after { top: 171px; }
    .draw-wheel-status { margin-top: 18px; }
}
.bank-page::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: "";
    background: url("/app/assets/icons/managemant_loan_icon.png") center 58% / min(66vw, 260px) no-repeat;
    opacity: .07;
    pointer-events: none;
}
.bank-page > * { position: relative; z-index: 1; }
.bank-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.bank-page-head h3 { margin: 0; color: var(--ink); font-size: 18px; }
.bank-page-head small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.bank-page-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: #fff;
    background: var(--green);
    font-size: 18px;
}
.bank-page .bank-mode-switch {
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
    background: #f8fbfa;
    border-radius: 999px;
}
.bank-page .bank-mode-button {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 13px;
}
.bank-entry-panel { padding: 0; }
.bank-entry-panel .form-label { margin-top: 0; font-size: 14px; }
.bank-page .bank-field-row { gap: 8px; }
.bank-page .bank-field-row .form-input {
    min-height: 60px;
    padding: 14px 16px;
    border: 0;
    border-radius: 20px;
    background: #fff;
    font-size: 18px;
    letter-spacing: .5px;
}
.bank-page .bank-field-row .outline-button {
    min-width: 68px;
    min-height: 56px;
    border: 2px solid var(--green);
    border-radius: 20px;
    color: var(--green-dark);
    background: #fff;
    font-size: 13px;
}
.bank-page .bank-detection {
    margin-top: 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.72);
}
.bank-page #save-bank-info {
    width: 100%;
    margin-top: 22px;
    min-height: 46px;
    border-radius: 12px;
    font-size: 13px;
}
.bank-page #card-copy-status { min-height: 20px; margin-bottom: 0; }
.outlined-bank-field { position: relative; display: block; margin: 10px 0 7px; padding: 9px 12px 6px; border: 1.5px solid var(--green); border-radius: 9px; background: #fff; }
.outlined-bank-field > span { position: absolute; top: -10px; right: 12px; padding: 0 6px; color: var(--green-dark); background: #fff; font-size: 12px; }
.outlined-bank-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 14px Arial, sans-serif; letter-spacing: 1.2px; text-align: center; }
.bank-selector-field { margin-top: 8px; }
.bank-selector-field select { width: 100%; min-height: 28px; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: 12px; }
.visually-hidden-select { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.bank-selector-trigger { display: flex; width: 100%; min-height: 28px; align-items: center; justify-content: space-between; padding: 0; border: 0; color: var(--ink); background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.bank-selector-options { position: relative; z-index: 20; width: 100%; max-height: 220px; overflow-y: auto; margin-top: 7px; padding: 5px; border: 1px solid #d9e8e2; border-radius: 10px; background: #fff; box-shadow: 0 10px 22px rgba(20,47,87,.15); }
.bank-selector-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 7px; color: var(--ink); background: transparent; text-align: right; font: inherit; font-size: 11px; cursor: pointer; }
.bank-selector-option:hover, .bank-selector-option.selected { background: var(--green-soft); }
.bank-selector-option .bank-logo-library, .bank-selector-option .bank-logo-fallback, .bank-selector-option .bank-logo-custom { width: 34px; height: 34px; flex-basis: 34px; border-radius: 8px; font-size: 12px; }
.bank-selector-option .bank-logo-library { background-size: 170px 238px; }
.profile-selected-bank-logo { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px auto 2px; color: var(--green-dark); font-size: 11px; }
.profile-selected-bank-logo .bank-logo-library, .profile-selected-bank-logo .bank-logo-custom { transform: scale(1.35); margin: 0 5px; }
.bank-scan-button { display: inline-flex; width: 100%; min-height: 38px; margin-top: 7px; align-items: center; justify-content: center; gap: 7px; border: 1px dashed var(--green); border-radius: 9px; color: var(--green-dark); background: #fff; font: inherit; font-size: 11px; cursor: pointer; }
.bank-scan-button img { width: 19px; height: 19px; object-fit: contain; }
.bank-accounts-root .saved-bank-card-head .bank-logo-library,
.bank-accounts-root .saved-bank-card-head .bank-logo-fallback,
.bank-accounts-root .saved-bank-card-head .bank-logo-custom {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}
.bank-accounts-root .saved-bank-card-head .bank-logo-library { background-size: 210px 294px; }
.bank-accounts-root .bank-selector-option .bank-logo-library,
.bank-accounts-root .bank-selector-option .bank-logo-fallback,
.bank-accounts-root .bank-selector-option .bank-logo-custom {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
}
.bank-accounts-root .bank-selector-option .bank-logo-library { background-size: 200px 280px; }
.iban-digit-counter { display: block; color: var(--muted); font-size: 11px; text-align: left; direction: ltr; }
.bank-accounts-root { position: relative; min-height: max(500px, calc(100dvh - 100px)); overflow: visible; padding: 6px 0 82px; }
.bank-accounts-root::before { position: absolute; z-index: 0; inset: 0; content: ""; background: url("/app/assets/icons/add-card-icon.png") center 50% / min(70vw, 300px) no-repeat; opacity: .08; pointer-events: none; }
.bank-accounts-root > * { position: relative; z-index: 1; }
.bank-accounts-note {margin: 0 !important;padding: 0 0 12px !important;color: var(--muted); font-size: 12px; line-height: 1.8;text-align: center;}
.bank-accounts-list {margin-top: 8px !important; display: grid; gap: 12px;}
.bank-accounts-empty { display: grid; min-height: 230px; place-items: center; align-content: center; gap: 9px; color: var(--muted); font-size: 12px; text-align: center; }
.bank-accounts-empty img { width: 94px; height: 94px; object-fit: contain; opacity: .55; }
.bank-accounts-empty p { margin: 0; }
.bank-add-button { position: absolute; right: 0; bottom: 10px; left: 0; display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; padding: 10px 14px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--green), var(--green-dark)); font: inherit; font-size: 12px; cursor: pointer; }
.bank-add-button:disabled { cursor: not-allowed; opacity: .55; filter: grayscale(.3); }
.saved-bank-card { position: relative; min-height: 190px; overflow: visible; padding: 18px; border-radius: 14px; color: #fff; background: linear-gradient(140deg, var(--bank-primary, #102c52) 0%, var(--bank-secondary, #0b6f8d) 72%, #081b35 100%); box-shadow: 0 12px 24px rgba(20,47,87,.18); direction: rtl; }
.saved-bank-card::after { position: absolute; inset: auto -28px -48px auto; width: 160px; height: 160px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; content: ""; }
.saved-bank-card-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding-left: 26px; }
.bank-preview-card .saved-bank-card-head .bank-logo-library, .bank-preview-card .saved-bank-card-head .bank-logo-fallback, .bank-preview-card .saved-bank-card-head .bank-logo-custom { transform: scale(1.65); margin: 0 10px; }
.saved-bank-card-head strong { font-size: 13px; }
.bank-logo-fallback { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--green-dark); background: #fff; font-size: 13px; font-weight: bold; }
.bank-logo-library { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background-color: #fff; background-image: url("/app/vendor/iranianbanklogos/dist/ibls128.png"); background-repeat: no-repeat; background-size: 160px 224px; box-shadow: 0 1px 5px rgba(8, 28, 54, .16); }
.bank-logo-library.ibl-bsi { background-position: 0 0; }
.bank-logo-library.ibl-mellat { background-position: 25% 0; }
.bank-logo-library.ibl-tejarat { background-position: 50% 0; }
.bank-logo-library.ibl-bmi { background-position: 75% 0; }
.bank-logo-library.ibl-sepah { background-position: 100% 0; }
.bank-logo-library.ibl-bki { background-position: 0 16.6667%; }
.bank-logo-library.ibl-parsian { background-position: 25% 16.6667%; }
.bank-logo-library.ibl-maskan { background-position: 50% 16.6667%; }
.bank-logo-library.ibl-rb { background-position: 75% 16.6667%; }
.bank-logo-library.ibl-en { background-position: 100% 16.6667%; }
.bank-logo-library.ibl-ansar { background-position: 0 33.3333%; }
.bank-logo-library.ibl-bpi { background-position: 25% 33.3333%; }
.bank-logo-library.ibl-sb { background-position: 50% 33.3333%; }
.bank-logo-library.ibl-sina { background-position: 75% 33.3333%; }
.bank-logo-library.ibl-post { background-position: 100% 33.3333%; }
.bank-logo-library.ibl-ghbi { background-position: 0 50%; }
.bank-logo-library.ibl-tt { background-position: 25% 50%; }
.bank-logo-library.ibl-shahr { background-position: 50% 50%; }
.bank-logo-library.ibl-ba { background-position: 75% 50%; }
.bank-logo-library.ibl-sarmayeh { background-position: 100% 50%; }
.bank-logo-library.ibl-day { background-position: 0 66.6667%; }
.bank-logo-library.ibl-hi { background-position: 25% 66.6667%; }
.bank-logo-library.ibl-iz { background-position: 50% 66.6667%; }
.bank-logo-library.ibl-kar { background-position: 75% 66.6667%; }
.bank-logo-library.ibl-tourism { background-position: 100% 66.6667%; }
.bank-logo-library.ibl-bim { background-position: 0 83.3333%; }
.bank-logo-library.ibl-edbi { background-position: 25% 83.3333%; }
.bank-logo-library.ibl-me { background-position: 50% 83.3333%; }
.bank-logo-library.ibl-ivbb { background-position: 75% 83.3333%; }
.bank-logo-library.ibl-resalat { background-position: 100% 83.3333%; }
.bank-logo-library.ibl-miran { background-position: 0 100%; }
.bank-logo-library.ibl-melal { background-position: 25% 100%; }
.bank-logo-library.ibl-rb2 { background-position: 50% 100%; }
.bank-logo-custom { display: block; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 1px 5px rgba(8, 28, 54, .16); }
.bank-card-menu-toggle { position: absolute; top: -5px; left: -5px; width: 30px; height: 30px; border: 0; color: #fff; background: transparent; cursor: pointer; font-size: 18px; }
.bank-default-star { position: absolute; z-index: 2; top: 14px; right: 14px; border: 0; color: rgba(255,255,255,.45); background: transparent; cursor: pointer; font-size: 21px; }
.bank-default-star.active {color: var(--bank-accent, #f7c64a); text-shadow: 0 0 8px var(--bank-accent-glow, rgba(247, 198, 74, 0.62));}
.saved-bank-card-number { position: relative; z-index: 1; margin-top: 40px; font: 22px/1 Arial, sans-serif; letter-spacing: 2px; text-align: center; }
.saved-bank-card-iban { position: relative; z-index: 1; margin-top: 17px; font: 10px/1.4 Arial, sans-serif; letter-spacing: .5px; text-align: center; opacity: .9; }
.saved-bank-card > small { position: absolute; z-index: 1; bottom: 16px; left: 18px; font-size: 11px; }
.bank-card-menu { position: absolute; z-index: 5; top: 43px; left: 12px; width: 180px; padding: 6px; border-radius: 10px; color: var(--ink); background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.bank-card-menu button { display: block; width: 100%; padding: 9px; border: 0; border-radius: 7px; color: inherit; background: transparent; text-align: right; font: inherit; font-size: 11px; cursor: pointer; }
.bank-card-menu button.danger { color: #c33232; }
.bank-share-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 10px; border: 1px solid #e2eceb; border-radius: 10px; background: #fff; }
.bank-share-row strong { overflow: visible; color: var(--ink); font: 13px Arial, sans-serif; direction: ltr; text-align: left; white-space: normal; word-break: break-all; }
.bank-share-row span { display: none; }
.bank-share-action { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 8px; color: var(--green-dark); background: var(--green-soft); cursor: pointer; font-size: 16px; }
.bank-share-action img { display: block; width: 17px; height: 17px; object-fit: contain; mix-blend-mode: multiply; }
.bank-management-actions-flat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}
.bank-management-actions-flat .primary-button,
.bank-management-actions-flat .outline-button { margin: 0; min-height: 44px; }
.bank-management-tips-flat {
    margin: 12px 2px 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.8;
}
.card-scanner-card { max-width: 420px; }
.scanner-viewport { position: relative; display: grid; place-items: center; min-height: 220px; margin: 14px 0 10px; overflow: hidden; border-radius: 20px; background: #18343e; }
.scanner-viewport video { display: block; width: 100%; min-height: 220px; object-fit: cover; }
.scanner-frame { position: absolute; width: 78%; height: 92px; border: 2px solid #b3d500; border-radius: 14px; box-shadow: 0 0 0 999px rgba(0,0,0,.18); }
.scanner-viewport p { position: absolute; bottom: 8px; margin: 0; padding: 4px 8px; border-radius: 8px; color: #fff; background: rgba(0,0,0,.48); font-size: 10px; }
.bank-camera-fallback { display: flex; align-items: center; justify-content: center; min-height: 38px; margin: 8px 0; border: 1px dashed var(--green); border-radius: 9px; color: var(--green-dark); background: #fff; font-size: 11px; cursor: pointer; }
.profile-image-settings { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px; border: 1px solid #d8ebe3; border-radius: 16px; background: rgba(255,255,255,.58); }
.profile-image-settings > div:last-child { min-width: 0; flex: 1; }
.profile-image-preview { display: grid; place-items: center; width: 72px; height: 72px; min-width: 72px; min-height: 72px; flex: 0 0 72px; overflow: hidden; border-radius: 18px; color: var(--muted); background: #e8f3ef; font-size: 11px; }
.profile-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.file-picker-button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin-top: 3px; padding: 8px 12px; border-radius: 11px; color: var(--green-dark); background: var(--green-soft); cursor: pointer; font-size: 11px; font-weight: bold; }
.visually-hidden-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.profile-crop-card { max-width: 360px; }
.profile-crop-stage { display: grid; place-items: center; width: 260px; height: 260px; margin: 16px auto 8px; overflow: hidden; border-radius: 24px; background: #e8f3ef; }
.profile-crop-stage canvas { width: 260px; height: 260px; display: block; }
.profile-crop-card.receipt-crop-card { max-width: 430px; max-height: calc(100dvh - 16px); overflow: hidden; padding: 12px 16px 14px; }
.profile-crop-card.receipt-crop-card .selection-modal-header { margin-bottom: 0; }
.profile-crop-stage.receipt-crop-stage { width: min(250px, calc(100vw - 70px)); height: auto; margin: 6px auto 1px; aspect-ratio: 10 / 13; border-radius: 14px; }
.profile-crop-stage.receipt-crop-stage canvas { width: 100%; height: 100%; display: block; }
.profile-crop-card.receipt-crop-card .crop-zoom-control { gap: 0; margin: 0 2px 6px; }
.profile-crop-card.receipt-crop-card .crop-zoom-label { display: none; }
.profile-crop-card.receipt-crop-card .management-modal-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 0; }
.profile-crop-card.receipt-crop-card .management-modal-actions button { min-height: 38px; margin: 0; padding: 8px; font-size: 12px; }
.profile-crop-stage canvas { cursor: grab; touch-action: none; }
.profile-crop-stage canvas:active { cursor: grabbing; }
.crop-zoom-control { display: grid; gap: 6px; margin: 8px 2px 14px; color: var(--muted); font-size: 11px; }
.crop-zoom-control input { width: 100%; accent-color: var(--green); }
.icon-button, .link-button {border: 0; background: transparent; color: var(--green); cursor: pointer;}
.icon-button { font-size: 25px; }
.settings-drawer {position: fixed; inset: 0; z-index: 1200; visibility: hidden; pointer-events: none;}
.settings-drawer:not(.hidden) {visibility: visible;}
.settings-drawer.is-open {pointer-events: auto;}
.settings-backdrop {position: absolute; inset: 0; background: rgba(23, 34, 31, 0.28); opacity: 0; transition: opacity .36s ease;}
.settings-panel {position: absolute; top: 0; bottom: 0; right: 0; left: auto; width: min(88vw, 360px); max-width: 360px; padding: 26px 20px; overflow-y: auto; background: var(--surface); border-radius: 24px 0 0 24px; box-shadow: -16px 0 36px rgba(23, 34, 31, .16); box-sizing: border-box; transform: translateX(104%); transition: transform .42s cubic-bezier(.22, .8, .3, 1); will-change: transform;}
.settings-drawer.is-open .settings-backdrop {opacity: 1;}
.settings-drawer.is-open .settings-panel {transform: translateX(0);}

@media (prefers-reduced-motion: reduce) {
    .settings-backdrop, .settings-panel {transition: none;}
}
.settings-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.settings-panel-head h2 { margin: 4px 0 0; font-size: 20px; }
.drawer-active-fund-name { margin: 6px 0 0; color: var(--green-dark); font-size: 12px; font-weight: 700; }
.drawer-close { min-width: 74px; height: 36px; padding: 0 10px; border: 0; border-radius: 12px; color: var(--green-dark); background: #eef6f2; cursor: pointer; font: inherit; font-size: 11px; line-height: 1; }
.settings-hint { margin: 14px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.current-role-card { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px; border: 1px solid #edf3f0; border-radius: 16px; background: var(--role-soft, var(--green-soft)); }
.role-indicator { width: 11px; height: 11px; border-radius: 50%; background: var(--role-accent, var(--green)); }
.current-role-card small, .current-role-card strong { display: block; }
.current-role-card small { color: var(--muted); font-size: 11px; }
.current-role-card strong { margin-top: 4px; color: var(--role-dark, var(--green-dark)); font-size: 12px; }
.profile-settings { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e7efeb; }
.profile-settings .form-input { margin-top: 12px; padding: 10px 11px; font-size: 12px; }
.profile-settings .primary-button { margin-top: 9px; padding: 10px; font-size: 12px; }
.password-settings { margin-top: 18px; }
.password-settings .form-input + .form-input { margin-top: 7px; }
.role-permissions-settings { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e7efeb; }
.role-permissions-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 11px; border: 0; border-radius: 12px; color: var(--green-dark); background: var(--green-soft); cursor: pointer; font: inherit; font-size: 12px; font-weight: bold; }
.role-permissions-toggle b { font-size: 15px; line-height: 1; }
.role-permissions-content { margin-top: 10px; }
.settings-section-title h3, .settings-section-title small { display: block; }
.settings-section-title h3 { margin: 0; color: var(--green-dark); font-size: 15px; }
.settings-section-title small { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.permission-role-radios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.permission-role-radios label { display: block; cursor: pointer; }
.permission-role-radios input { position: absolute; opacity: 0; }
.permission-role-radios span { display: block; padding: 9px 4px; border: 1px solid #d9e8e2; border-radius: 10px; color: var(--muted); background: #fff; text-align: center; font-size: 11px; }
.permission-role-radios input:checked + span { border-color: var(--green); color: var(--green-dark); background: var(--green-soft); font-weight: bold; }
.permission-options { display: grid; gap: 7px; margin-top: 12px; }
.permission-option { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 10px; background: #f7fbf9; color: var(--ink); font-size: 11px; cursor: pointer; }
.permission-option input { accent-color: var(--green); }
.selection-options { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.selection-option { flex: 0 0 auto; min-width: 74px; scroll-snap-align: center; }
.drawer-logout {width: 100%; margin-top: 28px; padding: 12px; border: 1px solid #f0d8d1; border-radius: 13px; color: #9a3d28; background: #fff7f4; cursor: pointer; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s ease;}
.drawer-logout:hover {background: #fdeee9; border-color: #e8c2b7;}
.drawer-logout-icon {width: 24px; height: 24px; object-fit: contain; pointer-events: none;}
.balance-card {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap;
    min-height: 160px; padding: 24px; border-radius: 28px;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    color: #fff; box-shadow: 0 16px 28px rgba(0, 107, 85, .2);
}
.home-status-heading, .home-events-heading, .progress-card, .event-list, .quick-grid { display: none !important; }
.balance-card { display: none !important; }
.fund-overview-card { display: none !important; }
#cycle-management-panel { display: block; }
.report-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.report-detail-item { padding: 14px; border: 1px solid #dcece6; border-radius: 16px; background: #fbfefd; min-height: 84px; }
.report-detail-item span, .report-detail-item small { display: block; color: var(--muted); font-size: 11px; }
.report-detail-item strong { display: block; margin-top: 8px; color: var(--green-dark); font-size: 15px; }
.report-detail-item small { margin-top: 5px; }
.report-range-label { color: var(--muted); font-size: 11px; }
.report-card:has(#report-cycle-bars) { display: none !important; }
.icon-pack-preview { display: none; }
.fund-overview-card:has(+ .settings-drawer) { }
.report-filter-card { margin: 14px 0; padding: 16px; border: 1px solid #e4eee9; border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgba(26,75,61,.05); }
.report-filter-actions { display: flex; align-items: center; gap: 7px; }
/* ایجاد ترنزیشن نرم برای چرخش دکمه‌های فیلتر */
#report-filter-toggle,
.messages-date-filter-toggle {transition: transform 0.25s ease-in-out;}
#report-filter-toggle.expanded,
.messages-date-filter-toggle.expanded {transform: rotate(180deg);}
.filter-icon-button {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.filter-icon-button img {
    width: 70% !important;
    height: 70% !important;
    object-fit: contain !important;
    display: block !important;
}
.filter-icon-button img { width: 21px; height: 21px; object-fit: contain; }

/* جلوگیری از نمایش هایلایت آبی پیش فرض هنگام لمس کنترل های رابط کاربری */
.subscription-note-button,
.fund-create-header-btn,
#settings-button,
#menu-toggle-btn,
.drawer-close,
.filter-icon-button,
.messages-date-filter-actions button,
#report-download-button,
.management-tab,
.management-call-button {
    -webkit-tap-highlight-color: transparent;
}

#menu-toggle-btn { outline: none; }
#menu-toggle-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.report-filter-fields { margin-top: 12px; }
.report-summary-grid { display: none !important; }
.report-filter-card .section-heading { justify-content: space-between; gap: 8px; }
.report-filter-card .section-heading h2 { margin: 0; font-size: 14px; }
.report-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.report-filter-grid .form-label:last-child { grid-column: 1 / -1; }
.report-date-filter-grid .form-label:last-child { grid-column: auto; }
.report-selection-filter-grid { grid-template-columns: 1fr; }
.report-selection-filter-grid .form-label:last-child { grid-column: auto; }
.report-filter-card .primary-button { margin-top: 12px; padding: 11px; }
.report-filter-card .outline-button { width: auto; margin: 0; padding: 8px 10px; }
.filter-slider-icon { display: grid; gap: 4px; width: 22px; }
.filter-slider-icon i { position: relative; display: block; height: 2px; border-radius: 2px; background: currentColor; }
.filter-slider-icon i::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; transform: translateY(-50%); border: 2px solid currentColor; border-radius: 50%; background: #fff; }
.filter-slider-icon i:nth-child(1)::after { left: 3px; }
.filter-slider-icon i:nth-child(2)::after { left: 10px; }
.filter-slider-icon i:nth-child(3)::after { left: 16px; }
.filter-icon-button.expanded .filter-slider-icon { transform: rotate(180deg); }
.funds-view { padding-bottom: 12px; }
.fund-rail-header { display: none; }

/* Free-version access drawer at the top of the funds page. */
#funds-view .trial-info-panel {
    position: relative;
    z-index: 5;
    width: min(100%, 720px);
    margin: 0 auto 14px;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(8, 33, 82, .18);
}
#funds-view .trial-info-panel.hidden { display: none !important; }
#funds-view .funds-trial-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    padding: 11px 18px;
    border: 0;
    color: #fff;
    background: linear-gradient(110deg, #082750, #143f7c 58%, #176e88);
    cursor: pointer;
    font: inherit;
    text-align: right;
}
#funds-view .funds-trial-toggle-copy { display: grid; gap: 2px; min-width: 0; }
#funds-view .funds-trial-toggle strong { font-size: 14px; font-weight: 850; }
#funds-view .funds-trial-toggle small { color: rgba(235, 245, 255, .78); font-size: 10px; }
#funds-view .funds-trial-toggle b {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    color: #fff;
    font-size: 21px;
    font-weight: 500;
    line-height: 1;
    transition: transform .42s cubic-bezier(.22, .8, .3, 1), background .2s ease;
}
#funds-view .funds-trial-toggle[aria-expanded="true"] b { transform: rotate(180deg); background: rgba(255, 255, 255, .12); }
#funds-view .funds-trial-toggle:focus-visible { outline: 3px solid rgba(50, 160, 210, .48); outline-offset: -3px; }
#funds-view .trial-info-card {
    position: static;
    z-index: auto;
    left: auto;
    width: 100%;
    display: grid !important;
    grid-template-rows: 0fr;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: #eef7ff;
    background: linear-gradient(135deg, #0d315f, #114778);
    box-shadow: none;
    opacity: 1;
    pointer-events: none;
    transform: none;
    transform-origin: top center;
    transition: grid-template-rows .56s cubic-bezier(.22, .8, .3, 1);
}
#funds-view .trial-info-card.expanded { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; transform: none; }
#funds-view .trial-info-card-content {
    min-height: 0;
    overflow: hidden;
    padding: 0 18px;
    transition: padding .56s cubic-bezier(.22, .8, .3, 1);
}
#funds-view .trial-info-card.expanded .trial-info-card-content { padding: 2px 18px 16px; }
#funds-view .trial-info-list { color: #e9f4ff; font-size: 11px; line-height: 1.9; }
#funds-view .trial-info-list li { grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 9px 0; }
#funds-view .trial-info-list li:not(:last-child) { border-bottom-color: rgba(224, 242, 255, .17); }
#funds-view .trial-info-list li > b::after { background: rgba(224, 242, 255, .22); }
#funds-view .trial-info-list li > b > span { color: #113b70; background: #ffd477; box-shadow: 0 2px 7px rgba(0, 0, 0, .2); }
#funds-view .trial-info-list li > span { white-space: normal; }
#funds-view .trial-info-subscription-button {
    margin-top: 13px;
    color: #0d376b;
    background: #fff;
}
#funds-view .trial-info-subscription-button:hover { background: #dff3ff; }
#funds-view .trial-info-close { color: #d9efff; }
#funds-view .trial-info-close:hover { background: rgba(255, 255, 255, .1); }

@media (max-width: 560px) {
    #funds-view .trial-info-panel { margin-bottom: 10px; border-radius: 15px; }
    #funds-view .funds-trial-toggle { min-height: 54px; padding: 10px 14px; }
    #funds-view .funds-trial-toggle strong { font-size: 13px; }
    #funds-view .trial-info-card-content { padding-right: 14px; padding-left: 14px; }
    #funds-view .trial-info-card.expanded .trial-info-card-content { padding-right: 14px; padding-left: 14px; }
}



.funds-page-title-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.funds-page-head h2 { display: none; margin: 4px 0 0; font-size: 25px; }

.funds-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.funds-page-title-wrap {
    flex: 1;
}

.fund-create-header-btn {
    position: relative;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

    .fund-create-header-btn img {
        display: block;
        width: 28px;
        height: 28px;
        object-fit: contain;
        pointer-events: none;
    }


    .fund-create-header-btn:hover {
        opacity: 0.8;
    }

    .fund-create-header-btn:active {
        transform: scale(0.92);
    }

    .fund-create-header-btn:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 3px;
    }


.funds-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
}
.fund-management-view { margin-top: 14px; padding-bottom: 14px; }
.desktop-management-column-title { display: none; }
.fund-completed-notice {
    display: block;
    margin: 16px 0 8px;
    padding: 13px 16px;
    border: 1px solid #f0ad4e;
    border-radius: 14px;
    color: #794900;
    background: #fff4d8;
    box-shadow: 0 6px 18px rgba(191, 122, 0, .14);
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
    animation: fund-completed-notice-pulse 2.6s ease-in-out infinite;
}
@keyframes fund-completed-notice-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 6px 18px rgba(191, 122, 0, .14); }
    50% { opacity: .78; box-shadow: 0 8px 24px rgba(191, 122, 0, .28); }
}
@media (prefers-reduced-motion: reduce) {
    .fund-completed-notice { animation: none; }
}
.management-page-head { display: none; }
.management-info-card { padding: 13px 15px; border: 1px solid #d9ebe3; border-radius: 20px; background: #fff; box-shadow: 0 10px 24px rgba(26,75,61,.07); }
.management-info-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #edf3f0; }
.management-info-head h2 { margin: 0; color: var(--green-dark); font-size: 19px; }
.management-info-line-enter-pending { opacity: 0; transform: translateY(-12px); }
.management-info-line-enter { animation: management-info-line-enter .34s ease-out var(--management-info-enter-delay, 0ms) backwards; }
@keyframes management-info-line-enter {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .management-info-line-enter-pending,
    .management-info-line-enter { animation: none; opacity: 1; transform: none; }
}
.management-info-head-actions { display: flex; align-items: center; gap: 6px; }
.compact-icon-button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 9px; color: var(--green-dark); background: var(--green-soft); cursor: pointer; font-size: 15px; }
.management-info-list { display: grid; gap: 0; margin-top: 8px; }
.management-info-list.collapsed div:nth-child(n+5) { display: none; }
.management-info-list div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f5f2; }
.management-info-list div:last-child { border-bottom: 0; }
.management-info-list span { color: var(--muted); font-size: 11px; }
.management-info-list strong { color: var(--ink); font-size: 12px; text-align: left; }
.management-overview-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.management-counters { display: flex; align-items: center; gap: 8px; }
.management-ring { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 82px; height: 82px; padding: 11px 8px; box-sizing: border-box; text-align: center; }
.management-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.management-ring circle { fill: none; stroke-width: 3; }
.management-ring .ring-track { stroke: #e2e8e5; }
.management-ring .ring-progress { stroke-linecap: round; transition: stroke-dashoffset .45s ease; }
.cycle-days-ring .ring-progress { stroke: #f29a38; }
.cycle-obligations-ring .ring-progress { stroke: #23a9bb; }
.management-ring span, .management-ring small { position: relative; z-index: 1; display: block; width: 100%; max-width: 100%; margin: 0; overflow: hidden; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.management-ring span { color: var(--ink); font-size: 10px; font-weight: bold; }
.management-ring small { color: var(--muted); font-size: 7px; }
@media (max-width: 480px) { .management-overview-layout { gap: 8px; } .management-counters { flex-direction: column; } .management-ring { width: 70px; height: 70px; padding: 9px 7px; } .management-ring span { font-size: 9px; } .management-ring small { font-size: 6.5px; } .management-info-list div { padding: 6px 0; } }
.management-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 12px; }
.management-tab { padding: 11px 6px; border: 1px solid #d9e8e2; border-radius: 13px; color: var(--muted); background: #fff; cursor: pointer; font: inherit; font-size: 12px; }
.management-tab.active { border-color: var(--green); color: var(--green-dark); background: var(--green-soft); font-weight: bold; }
.management-tab-panel {
    padding: 8px 4px;
    border: 1px solid #e8f0ed;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(26,75,61,.06);
    width: 100%;
    box-sizing: border-box;
}

.management-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.management-panel-head h3 { margin: 0; font-size: 14px; }
.management-panel-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.member-exit-request-button {
    min-height: 34px;
    padding-inline: 10px;
    border-color: #d9953b;
    color: #8a5711;
    background: #fffaf1;
    font-size: 11px;
    white-space: nowrap;
}
.management-members-list {
    display: grid;
    gap: 8px;
    max-height: 330px;
    overflow-y: auto;
    padding: 0 !important;
    width: 100%;
    box-sizing: border-box;
}
#management-members-panel {
    min-height: 360px;
    width: 100%;
    box-sizing: border-box;
}
.management-member-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid #eef4f1; }
.management-member-row:last-child { border-bottom: 0; padding-bottom: 0; }
.management-member-row strong, .management-member-row small { display: block; }
.management-member-row strong { font-size: calc(12px * var(--large-card-font-scale)); }
.management-member-row small { margin-top: 3px; color: var(--muted); font-size: calc(10px * var(--small-card-font-scale)); }
.management-member-row > div:first-child { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.management-member-row > div:first-child small { grid-column: 2; }
.management-member-avatar { width: 30px; height: 30px; grid-row: span 2; border-radius: 50%; object-fit: cover; background: var(--green-soft); }
.management-member-avatar-fallback { display: grid; place-items: center; color: var(--green-dark); font-size: 12px; }
.management-member-status { color: var(--green); font-size: 12px;margin-top:13px;margin-right:10px;}
.management-member-actions { display: flex; align-items: center; gap: 8px; }
.management-call-button { display: inline-flex; align-items: center; justify-content: center; width: 32px;height: 32px; flex: 0 0 32px; background: transparent;text-decoration: none;transition: transform 0.15s ease;}.management-call-button:active { transform: scale(0.92); }
.management-call-button img {display: block; width: 32px;height: 32px; object-fit: contain;}
.management-member-row {
    direction: rtl;
    min-height: 62px;
    padding: 7px 10px;
    border: 1px solid #e8f0ed;
    border-radius: 16px;
    background: #fff;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    box-sizing: border-box;
}


.management-member-badge {
    order: 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    text-align: center;
    gap: 3px;
    padding-left: 10px;
    border-left: 1px solid #d9e5e1;
}

    .management-member-badge strong {
        width: 100% !important;
        box-sizing: border-box;
        padding: 4px 5px;
        border-radius: 8px;
        color: #fff !important;
        background: #087b08 !important;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.25;
        white-space: nowrap;
        text-align: center;
        display: block;
    }

    .management-member-badge.role-member strong, .member-card-role.role-member strong {
        background: #087b08 !important;
    }

    .management-member-badge.role-admin strong, .member-card-role.role-admin strong {
        background: #ff6600 !important;
    }

    .management-member-badge.role-observer strong, .member-card-role.role-observer strong {
        background: #087b08 !important;
    }

    .management-member-badge.role-owner strong, .member-card-role.role-owner strong {
        background: #000099 !important;
    }

    .management-member-badge small {
        margin: 0 !important;
        color: #71807c !important;
        background: transparent !important;
        font-size: 11px !important;
        line-height: 1.2;
        white-space: nowrap;
        text-align: center;
        display: block;
    }

.management-member-main {
    order: 2;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    text-align: right;
    gap: 2px;
}

    .management-member-main strong {
        color: var(--ink);
        font-size: calc(14px * var(--large-card-font-scale));
        line-height: 1.3;
    }

        .management-member-main strong em {
            color: var(--green-dark);
            font-size: .82em;
            font-style: normal;
            font-weight: 500;
        }

    .management-member-main small {
        margin: 0;
        color: var(--muted);
        font-size: calc(11px * var(--small-card-font-scale));
        line-height: 1.2;
    }

.management-member-actions {
    order: 3;
    flex: 0 0 auto;
    margin: 0;
    display: flex;
    align-items: center;
}
.management-empty { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.management-transaction-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
.management-transaction-summary-item { padding: 9px 6px; border-radius: 12px; color: var(--muted); background: var(--green-soft); text-align: center; font-size: 10px; }
.management-transaction-summary-item strong { display: block; margin-top: 4px; color: var(--green-dark); font-size: 12px; }
.management-transactions-list { display: grid; gap: 6px; margin-bottom: 12px; }
.management-transaction-row {
    display: flex;
    justify-content: flex-start; /* بهجای space-between */
    gap: 12px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.management-transaction-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.management-transaction-row strong { color: var(--ink); }
.management-transaction-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.management-all-transactions-button { display: block; margin: 10px auto 0; font-size: 11px; }
.management-cycle-card { margin-top: 12px; padding: 14px; border: 1px solid #d8ebe3; border-radius: 20px; background: var(--green-soft); }
.management-cycle-card.hidden { display: none; }
.management-cycle-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.management-cycle-label, .management-cycle-head strong { display: block; }
.management-cycle-label { color: var(--muted); font-size: 10px; }
.management-cycle-head strong { margin-top: 4px; color: var(--green-dark); font-size: 15px; }
.management-cycle-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 12px 0; }
.management-cycle-progress div { padding: 8px 5px; border-radius: 12px; background: #fff; text-align: center; }
.management-cycle-progress span, .management-cycle-progress strong { display: block; }
.management-cycle-progress span { color: var(--muted); font-size: 10px; }
.management-cycle-progress strong { margin-top: 4px; color: var(--ink); font-size: 12px; }
.management-cycle-card .primary-button { margin-top: 0; }
.management-draw-readiness { margin: 10px 2px 0; color: var(--green-dark); font-size: 11px; line-height: 1.8; }
.management-draw-readiness.hidden { display: none; }
.management-cost-disbursement-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 12px; border: 1px solid #e7c887; border-radius: 16px; background: #fff8e9; }
.management-cost-disbursement-card.hidden { display: none; }
.management-cost-disbursement-card span, .management-cost-disbursement-card strong, .management-cost-disbursement-card small { display: block; }
.management-cost-disbursement-card span { color: #806322; font-size: 10px; }
.management-cost-disbursement-card strong { margin-top: 3px; color: #704c05; font-size: 14px; }
.management-cost-disbursement-card small { margin-top: 4px; color: #826d3b; font-size: 10px; line-height: 1.7; }
.management-cost-disbursement-card .primary-button { flex: 0 0 auto; width: auto; min-height: 38px; margin: 0; padding: 8px 12px; font-size: 11px; }
.fund-cost-disbursement-modal-card .payment-review-actions > * { flex: 1; margin-top: 0; }
@media (max-width: 420px) { .management-cost-disbursement-card { align-items: stretch; flex-direction: column; } .management-cost-disbursement-card .primary-button { width: 100%; } }
.management-page-head .icon-button { color: var(--green-dark); }
.management-menu { position: absolute; z-index: 110; top: calc(100% + 8px); left: 0; right: auto; min-width: 170px; padding: 7px; border: 1px solid #dbece5; border-radius: 7px; background: #fff; box-shadow: 0 12px 28px rgba(26,75,61,.16); direction: rtl; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-7px) scale(.98); transform-origin: top left; transition: opacity .18s ease, transform .22s cubic-bezier(.22, .8, .3, 1), visibility .22s step-end; }
.management-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity .18s ease, transform .22s cubic-bezier(.22, .8, .3, 1), visibility 0s; }
.management-menu button { display: block; width: 100%; padding: 10px; border: 0; border-radius: 10px; color: var(--ink); background: transparent; cursor: pointer; text-align: right; font: inherit; font-size: 11px; }
.management-menu button:hover { color: var(--green-dark); background: var(--green-soft); }

@media (prefers-reduced-motion: reduce) {
    .management-menu, .management-menu.is-open { transition: none; }
}
.fund-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.fund-settings-grid .form-label { margin-top: 0; }
.fund-charter-preview-button { width: 100%; margin: 10px 0 4px; }
.create-fund-view .fund-charter-choice {
    position: relative;
    margin: 15px 0 5px;
    padding: 12px;
    border: 1px solid rgba(32, 93, 125, .20);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(239, 248, 250, .97), rgba(255, 255, 255, .96)),
        repeating-linear-gradient(135deg, transparent 0 10px, rgba(37, 105, 138, .035) 10px 11px);
    box-shadow: 0 8px 20px rgba(29, 80, 100, .08);
}
.create-fund-view .fund-charter-choice-head {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.create-fund-view .fund-charter-choice-head > div { min-width: 0; flex: 1; }
.create-fund-view .fund-charter-choice-title {
    display: block;
    color: #173f58;
    font-size: 13px;
    font-weight: 850;
}
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.create-fund-view .fund-charter-choice-head p {
    margin: 2px 0 0;
    color: #68808c;
    font-size: 9px;
    line-height: 1.55;
}
.create-fund-view .fund-charter-choice-icon {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(145deg, #1b5277, #247e91);
    box-shadow: 0 4px 9px rgba(29, 93, 120, .24);
    font-size: 16px;
}
.create-fund-view .fund-charter-preview-button {
    width: auto;
    min-height: 29px;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid rgba(35, 104, 137, .24);
    border-radius: 8px;
    color: #1d5b7a;
    background: rgba(255,255,255,.76);
    font-size: 10px;
    font-weight: 750;
}
.create-fund-view .fund-charter-choice-options {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}
.create-fund-view .fund-charter-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid rgba(41, 105, 133, .12);
    border-radius: 9px;
    color: #344e5b;
    background: rgba(255, 255, 255, .72);
    cursor: pointer;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.create-fund-view .fund-charter-radio-option:has(input:checked) {
    border-color: rgba(29, 112, 135, .52);
    color: #164f68;
    background: rgba(218, 242, 243, .86);
}
.create-fund-view .fund-charter-radio-option:active { transform: scale(.99); }
.create-fund-view .fund-charter-radio-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.first-loan-owner-choice { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; padding: 13px; border: 1px solid rgba(32, 93, 125, .22); border-radius: 13px; color: #173f58; background: linear-gradient(135deg, rgba(239, 248, 250, .97), rgba(255, 255, 255, .96)); box-shadow: 0 8px 20px rgba(29, 80, 100, .07); cursor: pointer; }
.first-loan-owner-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.first-loan-owner-check { display: grid; flex: 0 0 22px; place-items: center; width: 22px; height: 22px; margin-top: 2px; border: 2px solid #9eb8c0; border-radius: 7px; color: transparent; background: #fff; font-size: 14px; font-weight: 900; transition: .18s ease; }
.first-loan-owner-choice input:checked + .first-loan-owner-check { border-color: #177d89; color: #fff; background: #177d89; }
.first-loan-owner-choice input:focus-visible + .first-loan-owner-check { outline: 3px solid rgba(23, 125, 137, .24); }
.first-loan-owner-choice strong, .first-loan-owner-choice small { display: block; }
.first-loan-owner-choice strong { font-size: 12px; }
.first-loan-owner-choice small { margin-top: 3px; color: #68808c; font-size: 10px; line-height: 1.7; }
.create-fund-view .fund-charter-radio-indicator {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border: 2px solid #a9c2ca;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
}
.create-fund-view .fund-charter-radio-option:has(input:checked) .fund-charter-radio-indicator {
    border: 4px solid #1d7c8d;
}
.create-fund-view .fund-cost-choice {
    position: relative;
    margin: 10px 0 0;
    padding: 12px;
    border: 1px solid rgba(32, 93, 125, .20);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(239, 248, 250, .97), rgba(255, 255, 255, .96)),
        repeating-linear-gradient(135deg, transparent 0 10px, rgba(37, 105, 138, .035) 10px 11px);
    box-shadow: 0 8px 20px rgba(29, 80, 100, .08);
}
.create-fund-view .fund-cost-choice legend { padding: 0 6px; color: #173f58; font-size: 13px; font-weight: 850; }
.fund-cost-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid rgba(41, 105, 133, .12);
    border-radius: 9px;
    color: #344e5b;
    background: rgba(255, 255, 255, .72);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.fund-cost-option + .fund-cost-option { margin-top: 6px; }
.fund-cost-option:has(input:checked) {
    border-color: rgba(29, 112, 135, .52);
    color: #164f68;
    background: rgba(218, 242, 243, .86);
}
.fund-cost-option:active { transform: scale(.99); }
.fund-cost-option input { position: absolute; opacity: 0; pointer-events: none; }
.fund-cost-radio-indicator {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    min-width: 15px !important;
    border: 2px solid #a9c2ca;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
}
.fund-cost-option:has(input:checked) .fund-cost-radio-indicator { border: 4px solid #1d7c8d; }
.fund-cost-option > span:not(.fund-cost-radio-indicator) { min-width: 0; }
.fund-cost-option > span:not(.fund-cost-radio-indicator) strong,
.fund-cost-option > span:not(.fund-cost-radio-indicator) small { display: block; }
.fund-cost-option strong { color: #173f58; font-size: 12px; }
.fund-cost-option small { margin-top: 2px; color: #68808c; font-size: 10px; line-height: 1.7; }
.fund-cost-amount { padding: 4px 5px 1px; }
.fund-cost-amount .form-label { margin: 4px 0 6px; font-size: 11px; }
.fund-cost-description {
    margin: 7px 5px 1px;
    padding: 7px 8px;
    border-right: 3px solid #1d7c8d;
    border-radius: 6px;
    color: #4f6d7a;
    background: rgba(222, 242, 245, .72);
    font-size: 10px;
    line-height: 1.85;
    text-align: justify;
}
.management-modal-actions { display: grid; gap: 8px; margin-top: 16px; }
.funds-empty-state {width: min(100%, 420px);margin: 80px auto 0 auto !important; padding: 30px 20px; border: none;
    border-radius: 26px;
    background: rgba(255,255,255,.72);
    text-align: center;
}

.funds-empty-icon {
    display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 12px;
    border-radius: 22px; color: var(--green); background: var(--green-soft); font-size: 42px; line-height: 1;
}
.funds-empty-state h3 { margin: 0; font-size: 19px; }
.funds-empty-state p { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 2; }
.funds-empty-state .primary-button { margin-top: 18px; }
.fund-type-selection-view { padding-bottom: 12px; }
.fund-type-selection-card.future-fund-type { display: none !important; }
.fund-type-selection-options { display: grid; gap: 13px; margin-top: 18px; }
.fund-type-selection-card {
    position: relative; display: grid; grid-template-columns: auto 54px 1fr; align-items: center; gap: 12px;
    padding: 18px 16px; border: 1px solid #d9e8e2; border-radius: 24px; background: #fff;
    box-shadow: 0 9px 20px rgba(26, 75, 61, .05); cursor: pointer;
}
.fund-type-selection-card input { position: absolute; opacity: 0; pointer-events: none; }
.fund-type-selection-card:has(input:checked) {
    border-color: var(--green); background: var(--green-soft);
    box-shadow: 0 10px 22px rgba(0, 107, 85, .12);
}
.fund-type-selection-check {
    display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #c9dcd5;
    border-radius: 50%; color: transparent; background: #fff; font-size: 13px; font-weight: bold;
}
.fund-type-selection-card:has(input:checked) .fund-type-selection-check {
    border-color: var(--green); color: #fff; background: var(--green);
}
.fund-type-selection-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    color: var(--green);
    background: #eaf6f0;
    font-size: 27px;
}

.fund-type-selection-content strong, .fund-type-selection-content small {
    display: block;
}

.fund-type-selection-content strong {
    color: var(--ink);
    font-size: 15px;
}

.fund-type-selection-content small {
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.9;
}

.selected-fund-type-hint {
    margin: 10px 0 14px;
    padding: 10px 12px;
    border-radius: 13px;
    color: var(--green-dark);
    background: var(--green-soft);
    font-size: 12px;
}

.create-fund-view .fund-type-options {
    display: none;
}

.fund-card {
    --fund-card-final-opacity: 1;
    background-color: transparent !important;
    background-image: url("/assets/icons/card-backgrand.png") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: none !important;
    border-radius: 14px 14px 0 0 !important;
    -webkit-border-radius: 14px 14px 0 0 !important;
    padding: 12px 16px 14px 16px;
    margin-bottom: 12px;
    box-shadow: 4px 1px 8px rgba(0, 0, 0, 0.12), -2px 0 5px rgba(0, 0, 0, 0.06) !important;
    line-height: 1.35;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: visible;
    position: relative;
}

.fund-card.fund-card-enter {
    animation: fund-card-enter 1s cubic-bezier(.22, .8, .3, 1) var(--fund-card-enter-delay, 0ms) backwards;
}

.fund-card.fund-card-enter-pending {
    opacity: var(--fund-card-final-opacity);
    transform: translateX(-115%);
}

@keyframes fund-card-enter {
    from { transform: translateX(-115%); }
    to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .fund-card.fund-card-enter,
    .fund-card.fund-card-enter-pending {
        animation: none;
        opacity: var(--fund-card-final-opacity);
        transform: none;
    }
}

.fund-card-readonly {
    cursor: not-allowed;
    filter: grayscale(0.45);
    opacity: .62;
    --fund-card-final-opacity: .62;
}

.fund-card-readonly::after {
    content: "صندوق پایان‌یافته";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    min-width: 132px;
    padding: 9px 14px;
    border: 1px solid #b9e4f2;
    border-radius: 12px;
    color: #175c79;
    background: #e5f6fc;
    box-shadow: 0 5px 14px rgba(39, 132, 165, .12);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

    .fund-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 10px;
        background: rgba(255, 255, 255, 0.01);
        border-radius: 14px 14px 0 0;
        box-shadow: 10px 4px 14px rgba(0, 0, 0, 0.20), 4px 2px 8px rgba(0, 0, 0, 0.10), -2px 1px 5px rgba(0, 0, 0, 0.04);
        z-index: -1;
        pointer-events: none;
    }






.fund-card-details {
    width: 100%;
}

.fund-card-head, .fund-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fund-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 3px double rgb(4, 1, 88, 0.81);
}



.fund-card-title {
    min-width: 0;
}

    .fund-card-title h3 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 700;
    }

    .fund-card-title small {
        display: block;
        margin-top: 2px;
        font-size: 0.8rem;
        color: #666;
    }

.fund-card-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-bottom: 4px;
    padding-top: -2px;
    border-bottom: 3px double #1a237e;
    direction: rtl;
}

.fund-card-title {
    text-align: right;
    justify-self: start;
}

.fund-card-center-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
}

.fund-loan-badge-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
}

    .fund-card-status i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fe5206;
        display: inline-block;
    }

.fund-card-status.active i {
        background: #19a36f;
    }

.fund-card-status.closed i {
        background: #9b4b3b;
    }

.fund-card-status.completed i { background: #315b95; }
.fund-card-status.completed .fund-card-status-value { color: #315b95 !important; }

.fund-card-completed-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
}

.fund-card-draw-button { background: linear-gradient(90deg, #0d7f99, #193f8a); }
.fund-card-draw-hint { margin: 5px 2px 0; }

.fund-card-new-period-button {
    width: 100%;
    min-height: 38px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(90deg, #0d7f99, #193f8a);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.fund-card-completed-actions .fund-card-new-period-button {
    flex: 1 1 0;
    width: auto;
}

.fund-card-permanent-close-button {
    flex: 1 1 0;
    min-height: 38px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(90deg, #b43d43, #7e1f31);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.fund-card-draft-actions .fund-card-permanent-close-button {
    width: auto;
}

.fund-delete-history-link {
    display: inline;
    padding: 0;
    border: 0;
    color: #0b6f92;
    background: transparent;
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.fund-card-debtor-settlement { min-height: auto; }
.fund-card-debtor-settlement .fund-card-head { margin-bottom: 0; }
.fund-card-debtor-settlement-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    margin: 11px 0 0;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(90deg, #bd6e20, #9a3d28);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}
.fund-card-subscription-button { background: linear-gradient(90deg, #168b5b, #0b6d4d); }
.fund-card-member-payment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed rgba(214, 69, 69, .28);
}
.fund-card-member-payment .member-obligation-badge {
    min-width: 0;
    min-height: 29px;
    padding: 5px 8px;
    font-size: 10px;
}
.fund-card-member-payment button {
    min-width: 80px;
    min-height: 32px;
    padding: 5px 12px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(90deg, #168b5b, #0b6d4d);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
}
.fund-card-member-payment button:disabled {
    cursor: not-allowed;
    opacity: .56;
    filter: grayscale(.3);
}

.fund-card-draft-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin-top: 11px;
}

.fund-card-draft-actions button {
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.fund-card-add-members-button {
    width: 100%;
    background: #168b5b;
}
.fund-card-payment-button {
    background: #0b6f92;
}
.fund-card-add-members-button:disabled {
    cursor: not-allowed;
    opacity: .52;
    filter: grayscale(.35);
}
.fund-card-payment-button:disabled {
    cursor: not-allowed;
    opacity: .56;
    filter: grayscale(.3);
}

.fund-card-draft-actions.has-activation button {
    flex: 1 1 0;
    width: auto;
}

.fund-card-activate-button {
    background: #193f8a;
}
.fund-card-review-exit-request-button {
    background: #a76714;
}

.payment-field-error {
    min-height: 17px;
    margin: -3px 2px 6px;
    color: #c73c32;
    font-size: 10px;
    line-height: 1.7;
}

.form-input.field-validation-error {
    border-color: #d84b41 !important;
    box-shadow: 0 0 0 2px rgba(216, 75, 65, .1);
}

.form-input.field-validation-success {
    border-color: #1d9a69 !important;
    box-shadow: 0 0 0 2px rgba(29, 154, 105, .1);
}

.payment-bank-input-wrap { position: relative; }
.payment-bank-input-wrap .form-input { padding-right: 40px; direction: ltr; text-align: left; }
.payment-bank-validation-icon {
    position: absolute;
    top: 50%;
    right: 11px;
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    transform: translateY(-50%);
    border-radius: 50%;
    color: #fff;
    font: 700 16px/1 Arial, sans-serif;
    pointer-events: none;
}
.payment-bank-validation-icon.is-valid { background: #16835a; }
.payment-bank-validation-icon.is-invalid { background: #c73c32; }

.payment-recipient-bank-options { display: grid; gap: 6px; margin: -1px 0 9px; }
.payment-recipient-bank-options-title { color: var(--muted); font-size: 10px; }
.payment-recipient-bank-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 35px; padding: 6px 9px; border: 1px solid #cfe4de; border-radius: 8px; color: #0d5368; background: #f8fcfb; font: inherit; font-size: 10px; cursor: pointer; }
.payment-recipient-bank-option:active { border-color: #167d96; background: #eaf6f4; }
.payment-recipient-bank-option b { color: var(--ink); font-size: 11px; font-weight: 600; }

.fund-card-status-label {
    color: #00345b;
}

.fund-card-status-value {
    font-weight: 700;
}

.fund-card-status.active .fund-card-status-value {
    color: #198754 !important;
}

.fund-card-status.draft .fund-card-status-value {
    color: #fe5206 !important;
}

.fund-card-status.pending .fund-card-status-value {
    color: #fe5206 !important;
}


.fund-card-badge {
    flex: 0 0 150px; width: 150px; min-width: 150px; max-width: 150px; box-sizing: border-box;
    padding: 7px 8px; border-radius: 12px; color: var(--role-dark, var(--green-dark));
    background: var(--role-soft, var(--green-soft)); font-size: 10px; font-weight: bold;
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fund-card[data-fund-type="Lottery"] .fund-card-badge { color: #176b59; background: #e3f4ec; }
.fund-card-title small { display: block; margin-top: 4px; }




.fund-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 8px; }
.fund-card-stat {padding: 6px 8px; border-radius: 12px; text-align: right; line-height: 1.3; background: #f7fbf9; }
.fund-card-stat span, .fund-card-stat small { display: block; color: var(--muted); font-size: 10px; }
.fund-card-stat strong {display: block; margin: 2px 0 0; font-size: 12px; color: #17221f; font-weight: 700;}
.fund-card-footer { margin-top: 8px; padding-top: 8px; border-top: 1px solid #edf3f0; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #65746f; line-height: 1.3;}
.balance-card span, .balance-card small { display: block; opacity: .86; }
.balance-card strong { display: block; margin: 10px 0 0; font-size: 30px; letter-spacing: 1px; }
.balance-mark { color: #a9dfcc; font-size: 60px; opacity: .75; }
.balance-mark { display: none; }
.balance-logo { width: 68px; height: 68px; object-fit: contain; border-radius: 18px; background: #fff; opacity: .92; }
.fund-overview-card { margin-top: 16px; padding: 18px; border: 1px solid #d9ebe3; border-radius: 26px;  background: rgba(255,255,255,.96); box-shadow: 0 12px 26px rgba(26, 75, 61, .08);}
.fund-overview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fund-overview-head h2 { margin: 4px 0 0; font-size: 14px; }
.overview-badge { padding: 7px 10px; border-radius: 12px; color: var(--role-dark, var(--green-dark)); background: var(--role-soft, var(--green-soft)); font-size: 11px; font-weight: bold;}
.fund-overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 16px; }
.overview-stat { padding: 12px; border: 1px solid #edf3f0; border-radius: 17px; background: #fbfefd;}
.overview-stat span, .overview-stat small { display: block; color: var(--muted); font-size: 10px; }
.overview-stat strong { display: block; margin: 6px 0 2px; color: var(--role-dark, var(--green-dark)); font-size: 15px; }
.overview-meta {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; margin-top: 10px; border-top: 1px solid #edf3f0; color: var(--muted); font-size: 11px;}
.overview-meta strong { color: var(--ink); font-size: 11px; }
.dashboard-message { margin: 12px 4px 0; color: var(--muted); font-size: 12px; text-align: center; }
.subscription-view { position: relative; isolation: isolate; padding: 12px 0 24px; }
.subscription-view::before { position: absolute; z-index: -1; inset: 0 -12px auto; height: 220px; content: ""; background: radial-gradient(circle at 86% 10%, rgba(52, 154, 175, .16), transparent 39%), linear-gradient(150deg, #f8fcfc 0%, #edf7fa 64%, rgba(255,255,255,0) 100%); pointer-events: none; }
.fund-period-subscription { display: grid; gap: 14px; padding: 0 4px; }
.fund-subscription-funds { display: grid; gap: 9px; }
.fund-subscription-fund { position: relative; width: 100%; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; padding: 14px; border: 1px solid #cfe1e8; border-radius: 16px; color: #193b64; background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(242,249,251,.92)), repeating-linear-gradient(135deg, rgba(23,92,126,.035) 0 1px, transparent 1px 9px); box-shadow: 0 8px 19px rgba(17,58,104,.08); text-align: right; cursor: pointer; font: inherit; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.fund-subscription-fund::before { position: absolute; right: 0; top: 12px; bottom: 12px; width: 3px; content: ""; border-radius: 99px; background: #7fbfc9; transition: top .28s ease, bottom .28s ease, background .28s ease; }
.fund-subscription-fund:hover, .fund-subscription-fund:focus-visible { transform: translateY(-2px); }
.fund-subscription-fund.selected { border-color: #157b91; background: linear-gradient(135deg, #f6feff, #dff3f7), repeating-linear-gradient(135deg, rgba(6,104,133,.075) 0 1px, transparent 1px 8px); box-shadow: 0 13px 25px rgba(13,112,143,.16); }
.fund-subscription-fund.selected::before { top: 8px; bottom: 8px; background: #0e8c9e; }
.fund-subscription-fund strong { display: block; font-size: 13px; }
.fund-subscription-fund small { display: block; margin-top: 4px; color: #63808c; font-size: 10px; line-height: 1.7; }
.fund-subscription-fund b { display: grid; min-width: 68px; min-height: 28px; place-items: center; padding: 2px 7px; border-radius: 9px; color: #126c55; background: #e5f6ed; font-size: 10px; }
.fund-subscription-fund b[data-tone="trial"] { color: #8b5e09; background: #fff3d9; }
.fund-subscription-fund b[data-tone="expired"] { color: #9a3d43; background: #fff0f0; }
.fund-subscription-fund-main { min-width: 0; }
.fund-subscription-fund.is-period-ended { cursor: not-allowed; opacity: .68; filter: grayscale(.22); background: linear-gradient(135deg, #f2f4f6, #e9edf1); box-shadow: none; }
.fund-subscription-fund.is-period-ended:hover,
.fund-subscription-fund.is-period-ended:focus-visible { transform: none; }
.fund-subscription-fund.is-period-ended::before { background: #8d98a3; }
.fund-subscription-fund strong em { margin-inline-start: 5px; color: #65727d; font-size: 10px; font-style: normal; font-weight: 700; }
.fund-subscription-financial-actions { display: grid; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed #cbdfe5; }
.fund-subscription-financial-actions > em { color: #53758b; font-size: 9px; font-style: normal; font-weight: 800; }
.fund-subscription-financial-actions > span { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 7px 8px; border-radius: 9px; background: rgba(255,255,255,.72); }
.fund-subscription-financial-actions > span b { display: block; min-width: 0; min-height: 0; padding: 0; border-radius: 0; color: #245476; background: transparent; text-align: right; font-size: 10px; }
.fund-subscription-financial-actions > span small { grid-column: 1; margin: 0; color: #6b838f; font-size: 9px; line-height: 1.6; }
.fund-subscription-financial-actions > span strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #147363; font-size: 10px; white-space: nowrap; }
.fund-subscription-financial-empty { display: block; margin-top: 9px; color: #81939d !important; font-size: 9px !important; }
.fund-subscription-config { display: grid; gap: 13px; padding: 15px; border: 1px solid #bad8e2; border-radius: 17px; background: linear-gradient(145deg, #fbfeff, #eaf7fa), repeating-linear-gradient(135deg, rgba(19,96,132,.045) 0 1px, transparent 1px 9px); box-shadow: 0 12px 26px rgba(15,64,111,.10); }
.fund-subscription-config-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; padding-bottom: 10px; border-bottom: 1px solid #d6e7ed; }
.fund-subscription-config-head span, .fund-subscription-config-head small { color: #637e89; font-size: 10px; }
.fund-subscription-config-head strong { display: block; margin-top: 3px; color: #173d72; font-size: 14px; }
.fund-subscription-cycle-note { text-align: left; line-height: 1.7; }
.fund-subscription-capacity-field, .fund-subscription-discount { display: grid; gap: 6px; color: #275875; font-size: 11px; font-weight: 700; }
.fund-subscription-capacity-field input { width: 100%; box-sizing: border-box; min-height: 41px; border: 1px solid #bfd8e2; border-radius: 11px; padding: 8px 11px; color: #153c6d; background: #fff; font: inherit; }
.fund-subscription-services, #fund-subscription-quote { display: none; }
.fund-subscription-services { gap: 8px; margin: 0; padding: 11px; border: 1px solid #d0e3e9; border-radius: 12px; }
.fund-subscription-services legend { padding: 0 5px; color: #245779; font-size: 11px; font-weight: 800; }
.fund-subscription-services label { display: flex; align-items: center; gap: 8px; color: #395c6b; font-size: 11px; cursor: pointer; }
.fund-subscription-services input { accent-color: #117e92; }
.fund-subscription-services input:disabled + span { color: #768b93; }
.fund-subscription-services small { color: #748991; font-size: 9px; line-height: 1.75; }
.fund-subscription-quote { display: grid; gap: 7px; padding: 12px; border: 1px solid #c7e2d8; border-radius: 12px; background: #fff; color: #345766; font-size: 11px; }
.fund-subscription-quote > div { display: flex; justify-content: space-between; gap: 9px; }
.fund-subscription-quote > div:last-child { padding-top: 8px; border-top: 1px dashed #cfe0e5; color: #153d72; font-size: 12px; font-weight: 800; }
.fund-subscription-purchase { background: linear-gradient(135deg, #8b1f3a, #5e1029) !important; }
.home-subscription-card { margin-top: 12px; }
.subscription-page-head { padding: 2px 4px 12px; }
.subscription-page-head h2 { margin: 4px 0; color: var(--green-dark); font-size: 20px; }
.subscription-page-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.subscription-status-card { margin: 0 4px 16px; padding: 18px; border: 1px solid #cfe5dd; border-radius: 20px; background: linear-gradient(135deg, #effaf6, #fff); box-shadow: 0 10px 24px rgba(11, 111, 141, .08); }
.subscription-status-card[data-tone="active"] { border-color: #a9d9ca; background: linear-gradient(135deg, #e6f8f0, #fff); }
.subscription-status-card[data-plan] { position: relative; isolation: isolate; overflow: hidden; border-color: var(--subscription-plan-accent); background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.98) 0 28%, transparent 60%), radial-gradient(90% 100% at 100% 100%, var(--subscription-plan-glow) 0 3%, transparent 65%), linear-gradient(135deg, #fff 0%, var(--subscription-plan-soft) 46%, #fff 100%); box-shadow: 0 14px 30px var(--subscription-plan-shadow); }
.subscription-status-plan-icon { position: absolute; z-index: 1; top: 14px; left: 14px; width: 48px; height: 48px; object-fit: contain; }
.subscription-status-card[data-plan] .subscription-status-plan-icon { animation: subscription-status-plan-icon-spin 3.8s ease-in-out infinite; transform-style: preserve-3d; }
.subscription-status-card[data-plan] > .subscription-status-plan-icon + strong { min-height: 48px; padding-left: 62px; font-size: 15px; letter-spacing: -.15px; white-space: nowrap; }
@keyframes subscription-status-plan-icon-spin { from { transform: perspective(460px) rotateY(0deg); } to { transform: perspective(460px) rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .subscription-status-card[data-plan] .subscription-status-plan-icon { animation: none; } }
.subscription-status-card[data-plan]::before { position: absolute; z-index: -1; right: -24%; bottom: -72%; width: 142%; height: 130%; content: ""; border-radius: 52% 48% 0 0 / 38% 42% 0 0; background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.82) 0 23%, rgba(255,255,255,.36) 42%, transparent 67%); transform: rotate(-13deg); filter: blur(1px); }
.subscription-status-card[data-plan]::after { position: absolute; z-index: -1; top: -55%; left: -28%; width: 90%; height: 118%; content: ""; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.88) 0 14%, rgba(255,255,255,.14) 61%, transparent 72%); }
.subscription-status-card[data-plan="plan-1m"] { --subscription-plan-accent: #b9693c; --subscription-plan-soft: #f7d6c5; --subscription-plan-glow: rgba(185, 105, 60, .45); --subscription-plan-shadow: rgba(185, 105, 60, .19); }
.subscription-status-card[data-plan="plan-3m"] { --subscription-plan-accent: #839099; --subscription-plan-soft: #dce4e8; --subscription-plan-glow: rgba(131, 144, 153, .42); --subscription-plan-shadow: rgba(107, 123, 133, .18); }
.subscription-status-card[data-plan="plan-12m"] { --subscription-plan-accent: #c68b12; --subscription-plan-soft: #f7df98; --subscription-plan-glow: rgba(198, 139, 18, .48); --subscription-plan-shadow: rgba(198, 139, 18, .21); }
.subscription-status-card.subscription-status-card-prompt { margin-bottom: 12px; padding: 12px 16px; border-radius: 15px; background: #f8fbfa; box-shadow: 0 5px 14px rgba(11, 111, 141, .06); }
.subscription-status-card.subscription-status-card-prompt > p { margin: 0; text-align: center; font-size: 12px; }
.subscription-status-card[data-tone="trial"] { border-color: #b7d9ec; background: linear-gradient(135deg, #eaf5f9, #fff); }
.subscription-status-card[data-tone="grace"], .subscription-status-card[data-tone="expired"] { border-color: #efc990; background: linear-gradient(135deg, #fff7e9, #fff); }
.subscription-status-kicker { display: inline-block; margin-bottom: 8px; padding: 4px 9px; border-radius: 999px; color: var(--green-dark); background: rgba(11, 111, 141, .1); font-size: 11px; font-weight: bold; }
.subscription-status-card[data-tone="grace"] .subscription-status-kicker, .subscription-status-card[data-tone="expired"] .subscription-status-kicker { color: #9a5700; background: #ffebc8; }
.subscription-status-card > strong { display: block; margin-bottom: 5px; font-size: 17px; color: var(--ink); }
.subscription-status-card > p { margin: 0 0 15px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.subscription-status-meta { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; margin-top: 8px; border-top: 1px solid rgba(11, 111, 141, .12); color: var(--muted); font-size: 11px; }
.subscription-status-meta b { color: var(--ink); }
.subscription-section-heading { margin: 0 4px 10px; }
.subscription-section-heading h3 { margin: 0; font-size: 15px; }
.subscription-section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.subscription-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.subscription-discount-entry { margin: 0 4px 12px; padding: 10px; border: 1px solid #dceae6; border-radius: 13px; background: #f9fcfb; }
.subscription-discount-entry > label { display: block; margin-bottom: 6px; color: var(--green-dark); font-size: 11px; font-weight: 700; }
.subscription-discount-entry > div { display: flex; gap: 7px; }
.subscription-discount-entry .form-input { min-width: 0; flex: 1; text-transform: uppercase; }
.subscription-discount-entry .outline-button { flex: 0 0 auto; padding: 7px 10px; }
.subscription-discount-entry .subscription-discount-apply { border-color: #7d2038; color: #fff; background: #7d2038; }
.subscription-discount-entry .subscription-discount-apply:hover { border-color: #65172c; background: #65172c; }
.subscription-discount-entry small { display: block; min-height: 15px; margin-top: 5px; color: var(--muted); font-size: 10px; }
.subscription-discount-entry small.is-valid { color: #16856c; }
.subscription-discount-entry small.is-invalid { color: #bd5a54; }
.subscription-plan-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; gap: 8px; padding: 14px; border: 1px solid #dceae6; border-radius: 16px; background: #fff; box-shadow: 0 7px 16px rgba(11, 111, 141, .10); text-align: center; transition: box-shadow .3s ease, opacity .3s ease; will-change: transform; }
.subscription-plan-card.plan-1m { --subscription-plan-accent: #b9693c; }
.subscription-plan-card.plan-3m { --subscription-plan-accent: #839099; }
.subscription-plan-card.plan-12m { --subscription-plan-accent: #c68b12; }
.subscription-plan-card[role="button"] { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.subscription-plan-card[role="button"]:focus,
.subscription-plan-card[role="button"]:focus-visible { outline: none; }
.subscription-plan-card[role="button"]:not([aria-disabled="true"]):hover { border-color: var(--green); box-shadow: 0 8px 18px rgba(11, 111, 141, .12); }
.subscription-plan-card.current { border-color: var(--subscription-plan-accent, var(--green)); box-shadow: inset 0 0 0 1px var(--subscription-plan-accent, var(--green)), 0 9px 20px rgba(11, 111, 141, .14); }
.subscription-plan-card.locked { opacity: .68; background: #f6f9f8; }
.subscription-plan-card[aria-disabled="true"] { cursor: not-allowed; }
.subscription-plan-card.loading { pointer-events: none; opacity: .55; }
.subscription-plan-badge { display: grid; justify-items: center; gap: 6px; }
.subscription-plan-icon { display: block; width: 42px; height: 42px; object-fit: contain; }
.subscription-plan-duration { color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.subscription-plan-card small { color: var(--muted); font-size: 10px; }
.subscription-plan-price { display: grid; justify-items: center; gap: 2px; min-height: 34px; color: var(--ink); font-size: 10px; }
.subscription-plan-price strong { display: grid; gap: 1px; color: var(--green-dark); font-size: 12px; line-height: 1.15; }
.subscription-plan-currency { font-size: 10px; font-weight: 700; }
.subscription-plan-price del { color: #9a5b65; font-size: 10px; }
.subscription-plan-access { position: fixed; z-index: 145; left: 0; bottom: 0; display: grid; grid-template-columns: 36px 0fr; width: 36px; height: 200px; max-width: calc(100vw - 14px); overflow: hidden; border-radius: 0 18px 18px 0; color: #fff; background: linear-gradient(135deg, #142f57 0%, #193f8a 58%, #0b6f8d 100%); box-shadow: 0 12px 25px rgba(20, 47, 87, .28); transition: width .66s cubic-bezier(.22, .8, .3, 1), grid-template-columns .66s cubic-bezier(.22, .8, .3, 1), box-shadow .3s ease; }
.subscription-plan-access.align-active-plan { position: absolute; left: -18px; bottom: auto; height: var(--subscription-plan-access-height, 152px); }
.subscription-plan-access.expanded { grid-template-columns: 48px minmax(0, 1fr); width: min(calc(100vw - 16px), 334px); box-shadow: 0 16px 32px rgba(20, 47, 87, .35); }
.subscription-plan-access-toggle { position: relative; display: grid; place-items: center; min-height: 152px; padding: 12px 8px; border: 0; color: inherit; background: rgba(8, 34, 74, .22); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; text-align: center; -webkit-tap-highlight-color: transparent; }
.subscription-plan-access.align-active-plan .subscription-plan-access-toggle { min-height: 0; height: 100%; }
.subscription-plan-access-toggle span { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 1px; }
.subscription-plan-access-toggle b { position: absolute; bottom: 10px; font-size: 27px; font-weight: 400; line-height: .7; transform: rotate(180deg); transition: transform .45s ease; }
.subscription-plan-access.expanded .subscription-plan-access-toggle b { transform: rotate(0deg); }
.subscription-plan-access-toggle:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: -4px; }
.subscription-plan-access-content { min-width: 0; overflow: hidden; color: #172523; background: #fff; opacity: 0; transform: translateX(-18px); transition: opacity .3s ease .13s, transform .66s cubic-bezier(.22, .8, .3, 1); }
.subscription-plan-access.align-active-plan .subscription-plan-access-content { overflow: hidden; }
.subscription-plan-access.expanded .subscription-plan-access-content { opacity: 1; transform: translateX(0); }
.subscription-plan-access-content > div { width: 100%; padding: 10px 12px 12px; box-sizing: border-box; }
.subscription-plan-access-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.subscription-plan-access-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid #e5ebf3; color: #35485d; font-size: 10px; }
.subscription-plan-access-list b { color: #193f8a; font-size: 11px; }
.subscription-plan-access-renewal { margin-top: 9px; padding-top: 8px; border-top: 1px solid #dce6f0; }
.subscription-plan-access-renewal strong { display: block; color: #193f8a; font-size: 10px; }
.subscription-plan-access-renewal p { margin: 4px 0 0; color: #526477; font-size: 9px; line-height: 1.75; text-align: justify; }
.subscription-plan-access.align-active-plan .subscription-plan-access-content > div { padding: 9px 13px 10px; }
.subscription-plan-access.align-active-plan .subscription-plan-access-list { gap: 3px; }
.subscription-plan-access.align-active-plan .subscription-plan-access-list li { min-height: 22px; gap: 8px; padding-bottom: 4px; font-size: clamp(11px, 2.9vw, 13px); line-height: 1.42; }
.subscription-plan-access.align-active-plan .subscription-plan-access-list b { font-size: clamp(12px, 3.05vw, 13.5px); }
.subscription-plan-access.align-active-plan .subscription-plan-access-renewal { margin-top: 6px; padding-top: 6px; }
.subscription-plan-access.align-active-plan .subscription-plan-access-renewal strong { font-size: clamp(11px, 2.9vw, 12.5px); }
.subscription-plan-access.align-active-plan .subscription-plan-access-renewal p { margin-top: 3px; font-size: clamp(10.5px, 2.65vw, 11.75px); line-height: 1.55; }
.subscription-plan-access { grid-template-columns: 36px 0fr; width: 36px; height: 218px; border-radius: 0 20px 20px 0; background: linear-gradient(135deg, #102a52, #193f8a 55%, #087c94), repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 1px, transparent 1px 9px); }
.subscription-plan-access.expanded { grid-template-columns: 48px minmax(0, 1fr); width: min(calc(100vw - 14px), 318px); }
.subscription-plan-access-toggle { min-height: 218px; font-size: 11px; }
.subscription-cost-transparency-title { display: block; margin-bottom: 8px; color: #173d72; font-size: 12px; }
.subscription-cost-transparency-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.subscription-cost-transparency-list li { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-height: 25px; border-bottom: 1px solid #e2ebf1; color: #536779; font-size: 10px; }
.subscription-cost-transparency-list b { color: #173d72; font-size: 10px; white-space: nowrap; }
.subscription-cost-transparency-note { margin-top: 8px; padding-top: 7px; border-top: 1px solid #dce7ef; }
.subscription-cost-transparency-note p { margin: 0; color: #526477; font-size: 9px; line-height: 1.65; text-align: justify; }
.subscription-plans.has-active-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.subscription-plans.has-active-plan .subscription-plan-card.current { order: -1; grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); min-height: 200px; }
.subscription-plans.has-active-plan .subscription-plan-card:not(.current) { width: 100%; margin-left: 0; }
.subscription-readonly-help { margin: 16px 4px 0; padding: 14px; border-radius: 15px; color: #66450b; background: #fff7e9; font-size: 12px; line-height: 1.9; }
.subscription-readonly-help strong { display: block; color: #8a5700; }
.subscription-readonly-help p { margin: 4px 0 0; }
.entitlement-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 4px 0; padding: 10px 12px; border: 1px solid #b7d9ec; border-radius: 12px; background: #eef8fc; color: #17435a; font-size: 11px; line-height: 1.8; }
.entitlement-banner[data-tone="grace"], .entitlement-banner[data-tone="expired"] { border-color: #efc990; background: #fff7e9; color: #805000; }
.entitlement-banner button { flex: 0 0 auto; margin: 0; padding: 7px 9px; font-size: 11px; }
.app-shell.role-owner { --green:#0b6f8d; --green-dark:#142f57; --green-soft:#eaf5f9; --role-accent:#0b6f8d; --role-dark:#142f57; --role-soft:#eaf5f9; }
.app-shell.role-member { --green:#0b6f8d; --green-dark:#142f57; --green-soft:#eaf5f9; --role-accent:#0b6f8d; --role-dark:#142f57; --role-soft:#eaf5f9; }
.app-shell.role-admin { --green:#0b6f8d; --green-dark:#142f57; --green-soft:#eaf5f9; --role-accent:#0b6f8d; --role-dark:#142f57; --role-soft:#eaf5f9; }
.app-shell.role-observer { --green:#0b6f8d; --green-dark:#142f57; --green-soft:#eaf5f9; --role-accent:#0b6f8d; --role-dark:#142f57; --role-soft:#eaf5f9; }
.app-shell.role-member .balance-card { background: linear-gradient(135deg, #006b55, #004e40); box-shadow: 0 16px 28px rgba(0,78,64,.2); }
.app-shell.role-admin  .balance-card { background: linear-gradient(135deg, #006b55, #004e40); box-shadow: 0 16px 28px rgba(0,78,64,.2); }
.app-shell.role-member .primary-button, .app-shell.role-member .member-action-button { background: var(--role-accent); }
.app-shell.role-admin .primary-button, .app-shell.role-admin .member-action-button { background: var(--role-accent); }
.app-shell.role-member .quick-icon, .app-shell.role-member .event-icon { color: var(--role-accent); background: var(--role-soft); }
.app-shell.role-admin .quick-icon, .app-shell.role-admin .event-icon { color: var(--role-accent); background: var(--role-soft); }
.members-view { padding-bottom: 10px; }
.members-title-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 18px; }
.members-title-row h2 { display: none; margin: 2px 0 0; font-size: 24px; }
.page-tools { display: flex; align-items: center; gap: 9px; }
.help-button { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--green); border-radius: 50%; color: var(--green); background: var(--green-soft); cursor: pointer; font-size: 15px; font-weight: bold; }
.filter-button { border: 0; color: var(--green); background: var(--green-soft); border-radius: 12px; padding: 10px 13px; cursor: pointer; font-size: 20px; }
.filter-button img { width: 18px; height: 18px; display: block; object-fit: contain; }
.search-box { display: flex; align-items: center; gap: 8px; padding: 3px 13px; border-radius: 16px; border: 1px solid #d8ebe3; background: #fff; color: var(--muted); }
.search-box .search-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: var(--green); background: var(--green-soft); font-size: 22px; line-height: 1; }
.search-box input { width: 100%; border: 0; outline: 0; padding: 12px 4px; background: transparent; color: var(--ink); font: inherit; }
.member-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 16px 0 20px;
    padding: 13px;
    border: 1px solid #dcebe5;
    border-radius: 15px;
    background: linear-gradient(135deg, #ffffff 0%, #f5fbf8 100%);
    box-shadow: 0 8px 22px rgba(26, 75, 61, .06);
}
.member-summary-info { display: flex; align-items: center; gap: 9px; min-width: 0; }
.member-summary-icon { display: block; width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; opacity: 1; }
.member-summary-info > div { min-width: 0; }
.member-summary-info small, .member-summary-info strong { display: block; }
.member-summary-info small { color: var(--muted); font-size: 9px; }
.member-summary strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.member-summary-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.member-summary-actions .outline-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 7px 9px; white-space: nowrap; font-size: 11px; }
.member-summary-actions .add-member-trigger { color: #fff; border-color: var(--green); background: var(--green); }
.member-summary-actions .add-member-trigger:disabled { color: #7c9189; border-color: #dbe8e3; background: #edf3f0; }
@media (max-width: 430px) {
    .member-summary { grid-template-columns: 1fr; gap: 10px; }
    .member-summary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .member-summary-actions .outline-button { width: 100%; padding-inline: 5px; font-size: 10px; }
}
.outline-button { border: 1px solid var(--green); border-radius: 10px; padding: 8px 12px; color: var(--green); background: #fff; cursor: pointer; font-size: 12px; }
.outline-button[data-add-member] {display: inline-flex; align-items: center; justify-content: center; gap: 8px;}
.outline-button[data-add-member] .btn-icon {width: 18px;height: 18px;object-fit: contain; display: block;}
.member-add-panel { margin: 0 0 16px; padding: 16px; border: 1px solid #d8ebe3; border-radius: 20px; background: var(--green-soft); }
.member-add-panel h3 { margin: 0; color: var(--green-dark); font-size: 14px; }
.member-add-panel p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.member-add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.floating-field { position: relative; display: block; }
.floating-field .form-input, .floating-field .form-select { padding: 18px 31px 7px 10px; font-size: 11px; }
.floating-field > span { position: absolute; top: 5px; right: 10px; color: var(--muted); font-size: 9px; pointer-events: none; }
.floating-field .form-input:focus {border-color: var(--green); outline: 2px solid var(--green-focus-ring, rgba(16, 185, 129, 0.16));}
.floating-field .form-select { appearance: auto; }
.member-edit-panel { display: grid; gap: 7px; margin-top: 8px; padding: 10px; border-radius: 14px; background: var(--green-soft); }
.member-edit-panel .form-input { padding: 9px; font-size: 11px; }
.contact-picker-button { position: absolute; left: 5px; top: 6px; width: 27px; height: 27px; border: 0; border-radius: 9px; color: var(--green-dark); background: var(--green-soft); cursor: pointer; font-size: 14px; }
.member-add-panel .primary-button { margin-top: 10px; }
.member-add-result { min-height: 24px; color: var(--green-dark) !important; font-weight: bold; word-break: break-word; }
.members-list { display: grid; gap: 10px; }
.member-card { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px; border: 1px solid #edf3f0; border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgba(26, 75, 61, .06); }
.member-avatar { display: grid; place-items: center; width: 46px; height: 46px; min-width: 46px; min-height: 46px; flex: 0 0 46px; overflow: hidden; border-radius: 50%; background: var(--green-soft); color: var(--green); font-weight: bold; }
.member-avatar img { display: block; width: 46px; height: 46px; min-width: 46px; min-height: 46px; border-radius: 50%; object-fit: cover; }
.transactions-view { padding-bottom: 12px; }
.transaction-fund-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; justify-items: center; gap: 8px; margin: 0 0 12px; padding: 2px 4px 10px; border-bottom: 1px solid #e4ecee; }
.transaction-fund-picker.single-fund .transaction-fund-option { grid-column: 2 / span 2; width: min(100%, 150px); }
.transaction-fund-option { display: flex; width: 100%; max-width: 150px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 76px; padding: 5px 2px; border: 1px solid transparent; border-radius: 12px; color: var(--ink); background: transparent; cursor: pointer; transition: .18s ease; }
.transaction-fund-option img { width: 50px; height: 50px; object-fit: contain; opacity: 1; transition: opacity .18s ease; }
.transaction-fund-picker.has-selection .transaction-fund-option img { opacity: .5; }
.transaction-fund-option span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 700; }
.transaction-fund-option.selected { border-color: transparent; color: var(--green-dark); background: transparent; box-shadow: none; }
.transaction-fund-picker.has-selection .transaction-fund-option.selected img { opacity: 1; }
.transaction-fund-empty { margin-top: 28px; }
.transaction-empty-funds { grid-column: 1 / -1; margin: 0; color: var(--muted); text-align: center; font-size: 12px; }
.transactions-view .transaction-fund-picker { margin-top: -8px; }
.messages-view .transaction-fund-picker { margin-top: -10px; padding-top: 0; }
.transaction-filter-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .8fr) auto; gap: 8px; margin: 14px 0 10px; padding: 12px; border: 1px solid #0311b6b2; border-radius: 18px; background: #fff; }
.transaction-filter-card .form-input { padding: 10px; font-size: 11px; }
.transaction-filter-card .form-select { padding: 10px 42px 10px 10px; font-size: 11px; line-height: 1.4; }
.transaction-check-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 2px; font-size: 11px; }
.transaction-check-filter label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.transaction-check-filter input[type="checkbox"] { accent-color: var(--green); }
.transaction-status-filter { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex-wrap: nowrap; gap: 6px; }
.transaction-status-filter label { justify-content: center; min-width: 0; min-height: 38px; padding: 6px 4px; font-size: 10px; line-height: 1.35; text-align: center; white-space: normal; }
@media (max-width: 520px) { .transaction-status-filter label { font-size: 9px; } }
.transaction-member-filter-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; margin: 0; white-space: nowrap; }
.transaction-member-filter-button img { width: 18px; height: 18px; object-fit: contain; }
.transaction-member-filter-button:disabled { opacity: .62; cursor: not-allowed; }
.transaction-member-filter-modal-card { max-width: 420px; }
.transaction-member-filter-options { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; margin: 8px 0 14px; }
.transaction-member-filter-options label { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #e1ebed; border-radius: 10px; background: #fbfdfd; font-size: 12px; cursor: pointer; }
.transaction-member-filter-options input { accent-color: var(--green); }
.transaction-member-filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.transaction-member-filter-actions button { margin: 0; min-height: 42px; }
.transaction-edit-payment-button { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-inline-start: 6px; border: 0; background: transparent; cursor: pointer; }
.transaction-edit-payment-button img { width: 28px; height: 28px; object-fit: contain; }
.transaction-edit-payment-button.is-disabled { cursor: not-allowed; opacity: .45; filter: grayscale(1); }
.transaction-filter-card .form-input { grid-column: 1 / -1; }
.transaction-filter-card .form-input,
.transaction-filter-card .form-select,
.transaction-filter-card .transaction-member-filter-button { border-radius: 12px; }
.transaction-filter-card .outline-button { width: auto; margin: 0; padding: 8px 10px; }
.transaction-actions { display: flex; justify-content: flex-end; }
.transaction-actions .primary-button { width: auto; margin: 0; padding: 10px 14px; font-size: 11px; }
.transaction-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
#transactions-summary { display: none !important; }
.transaction-summary-item { padding: 11px 8px; border-radius: 14px; background: var(--green-soft); text-align: center; }
.transaction-summary-item span, .transaction-summary-item strong { display: block; }
.transaction-summary-item span { color: var(--muted); font-size: 10px; }
.transaction-summary-item strong { margin-top: 5px; color: var(--green-dark); font-size: 15px; }
.transaction-winners-card { margin: 12px 0; padding: 12px; border: 1px solid #ecd9a1; border-radius: 16px; background: linear-gradient(145deg, #fffdf5, #fff8df); box-shadow: 0 7px 18px rgba(143, 101, 14, .08); }
.transaction-winners-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid #f0e3bd; }
.transaction-winners-heading p { margin: 0 0 3px; color: #9b7118; font-size: 10px; font-weight: 700; }
.transaction-winners-heading h3 { margin: 0; color: #68490c; font-size: 14px; }
.transaction-winners-count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; color: #75540d; background: #fff0bd; font-size: 12px; font-weight: 800; }
.transaction-winners-list { display: grid; gap: 7px; margin-top: 10px; }
.transaction-winner-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.72); }
.transaction-winner-trophy { display: grid; place-items: center; box-sizing: border-box; width: 30px; height: 30px; padding: 0; overflow: hidden; border-radius: 9px; color: #946706; background: #ffedab; font-size: 16px; line-height: 1; }
.transaction-winner-trophy img { display: block; width: 100%; height: 100%; object-fit: cover; }
.transaction-winner-row div { min-width: 0; }
.transaction-winner-row strong, .transaction-winner-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transaction-winner-row strong { color: #4f3a0c; font-size: 12px; }
.transaction-winner-row div span, .transaction-winner-row time { margin-top: 3px; color: #867552; font-size: 9px; }
.transaction-winner-row time { direction: ltr; white-space: nowrap; }
.transaction-winners-empty { margin: 10px 0 0; padding: 9px; border-radius: 10px; color: #867552; background: rgba(255,255,255,.64); font-size: 10px; text-align: center; }
.transactions-list { display: grid; gap: 9px; }
.transaction-card { padding: 13px; border: 0.7px solid #2277e073; border-radius: 16px; background: #fff; box-shadow: 0 7px 18px rgba(26,75,61,.05); }
.transaction-card-head, .transaction-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.transaction-card-head strong { color: var(--green-dark); font-size: 12px; }
.transaction-card-head span, .transaction-card-row { color: var(--muted); font-size: 10px; }
.transaction-card-row { margin-top: 8px; }
.transaction-status { padding: 4px 7px; border-radius: 9px; background: var(--green-soft); color: var(--green); font-size: 10px; }
@media (max-width: 390px) {
    .transaction-filter-card { grid-template-columns: 1fr 1fr; }
    .transaction-filter-card .outline-button { grid-column: 1 / -1; }
    .transaction-filter-card .transaction-member-filter-button { grid-column: auto; }
}

/* �������� 혁�э�? ����? ������ � �Ә�ǁ */
.auth-logo-video {
    display: block;
    width: min(100%, 320px);
    height: 150px;
    margin: 0 auto 8px;
    object-fit: contain;
    border-radius: 18px;
    background: transparent;
}
.auth-brand-logo { width: 54px !important; height: 54px !important; margin: 0 auto !important; }
.auth-hero-art { display: none !important; }
.app-header { padding-left: 52px; }
.page-title-icon { position: absolute; left: 13px; top: 15px; width: 34px; height: 34px; }
.app-header .page-title-row { min-height: 38px; }
.app-shell.subpage-active .bottom-nav { display: none !important; }
.app-shell.subpage-active.fund-management-page-active .bottom-nav { display: grid !important; }
.app-shell.subpage-active .app-header .menu-button { display: none !important; }
.app-shell.subscription-page-active .bottom-nav { display: none !important; }
.app-shell.subscription-page-active .app-header .header-actions-right { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); z-index: 120; }
.app-shell.subscription-page-active .app-header .header-actions-left { display: none; }
.subpage-back, #fund-management-back {
    width: 36px; height: 36px; padding: 0; overflow: hidden;
    font-size: 0 !important; background: url("/app/assets/icons/back-icon.PNG") center/20px 20px no-repeat;
}
.funds-empty-icon { display: none !important; }
.fund-card-badge, #overview-fund-type { display: none !important; }
.fund-card {border-radius: 14px 14px 0 0 !important; padding: 10px 14px 12px 14px !important; line-height: 1.3;}
.fund-card-title h3 { font-size: 14px; }
.management-info-card {border: 0; border-radius: 14px; padding: 4px 0; background: transparent; box-shadow: none;}
.management-info-head { padding: 12px 14px; border-radius: 12px 12px 0 0; background: #fff; }
.management-info-list { margin: 0; padding: 0 14px; border-radius: 0 0 12px 12px; background: #fff; }
.management-info-list div { padding: 7px 0; }
.management-info-list div:first-child { display: none; }
.management-info-card { position: relative; isolation: isolate; overflow: hidden; }
.management-info-card::before {
    position: absolute;
    z-index: 3;
    inset: 0;
    content: "";
    background: url("/app/assets/icons/managemant_loan_icon.png") center center / min(62vw, 270px) no-repeat;
    opacity: .16;
    pointer-events: none;
}
.management-info-card > * { position: relative; z-index: 2; }
.management-info-head { padding: 9px 12px; background: rgba(255,255,255,.93); }
.management-info-head h2 { font-size: 15px; }
.management-overview-layout { grid-template-columns: minmax(74px, 1fr) auto minmax(74px, 1fr); gap: 8px; align-items: center; }
.management-info-label-column, .management-info-value-column { display: grid; grid-template-rows: repeat(7, minmax(28px, auto)); align-items: center; padding: 3px 12px; background: rgba(255,255,255,.88); }
.management-info-label-column span, .management-info-value-column strong { display: flex; align-items: center; min-width: 0; padding: 5px 0; border-bottom: 1px solid #edf2ef; white-space: nowrap; }
.management-info-label-column span:last-child, .management-info-value-column strong:last-child { border-bottom: 0; }
.management-info-label-column span { justify-content: flex-start; color: var(--muted); font-size: 10px; }
.management-info-value-column strong { justify-content: flex-end; color: var(--ink); font-size: 11px; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.management-counters { z-index: 4 !important; flex-direction: column; gap: 4px; padding: 2px; border-radius: 52px; background: #fff; }
.management-ring { display: block; width: 96px; height: 96px; padding: 0; }
.management-ring-content { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; grid-template-rows: 23px 1px 30px; width: 74px; height: 54px; transform: translate(-50%, -50%); }
.management-ring-content span, .management-ring-content small { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; overflow: hidden; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }
.management-ring-content span { color: var(--ink); font-size: 11px; font-weight: bold; }
.management-ring-content small { padding-top: 4px; color: var(--muted); font-size: 8px; }
.management-ring-divider { display: block; width: 56px; height: 1px; margin: 0 auto; background: #d9e3df; }
@media (max-width: 480px) {
    .management-overview-layout { grid-template-columns: minmax(62px, 1fr) auto minmax(62px, 1fr); gap: 6px; }
    .management-info-label-column, .management-info-value-column { grid-template-rows: repeat(7, minmax(27px, auto)); padding: 3px 8px; }
    .management-info-label-column span { font-size: 9px; }
    .management-info-value-column strong { font-size: 10px; }
    .management-counters { gap: 4px; }
    .management-ring { width: 86px; height: 86px; }
    .management-ring-content { grid-template-rows: 20px 1px 27px; width: 66px; height: 48px; }
    .management-ring-content span { font-size: 10px; }
    .management-ring-content small { padding-top: 3px; font-size: 7px; }
    .management-ring-divider { width: 48px; }
}
.management-tabs { margin: 12px 0 8px; gap: 6px; }
.management-tab { padding: 8px 4px; border-radius: 10px; font-size: 11px; }
.management-tabs { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-bottom: 1px solid #dfeae6; touch-action: pan-x; }
.management-tabs::-webkit-scrollbar { display: none; }
.management-tab { flex: 0 0 33.333%; min-width: 33.333%; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; scroll-snap-align: center; }
.management-tab.active { border-bottom-color: var(--green); background: transparent; }
.management-counters.management-counters-row { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; margin: 8px 0 12px; padding: 0; background: transparent; }
.management-counters-row .management-ring { width: 92px; height: 92px; }
.management-counters-row .cycle-loans-ring .ring-progress { stroke: #4b6fd8; }
.management-counters-row .management-ring-content { width: 72px; }
.create-fund-hero { display: none !important; }
.create-fund-view .lottery-create-fields { background: transparent; border: 0; padding: 0; }
.create-fund-view #fund-rule-hint, .create-fund-view .members-title-row { display: none !important; }
.create-fund-view .form-input, .create-fund-view .selection-button, .create-fund-view .form-select { border-radius: 8px; }
.fund-type-selection-view.hidden { display: none !important; }
.management-cycle-card { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.management-cycle-card #management-draw-controls { margin-top: 8px; }
@media (max-width: 480px) { .management-counters.management-counters-row { gap: 3px; } .management-counters-row .management-ring { width: 86px; height: 86px; } }
.management-tab-panel {
    padding: 4px 0 !important;
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
}
.management-tab-panels {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.management-tab-panels > .management-tab-panel.management-panel-leave-to-left,
.management-tab-panels > .management-tab-panel.management-panel-leave-to-right {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.management-tab-panels > .management-tab-panel.management-panel-enter-from-left,
.management-tab-panels > .management-tab-panel.management-panel-enter-from-right {
    position: relative;
    z-index: 2;
}
.management-panel-enter-from-left { animation: management-panel-enter-from-left .34s cubic-bezier(.22, .8, .32, 1) both; }
.management-panel-enter-from-right { animation: management-panel-enter-from-right .34s cubic-bezier(.22, .8, .32, 1) both; }
.management-panel-leave-to-left { animation: management-panel-leave-to-left .34s cubic-bezier(.22, .8, .32, 1) both; }
.management-panel-leave-to-right { animation: management-panel-leave-to-right .34s cubic-bezier(.22, .8, .32, 1) both; }
@keyframes management-panel-enter-from-left {
    from { opacity: 0; transform: translateX(-34px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes management-panel-enter-from-right {
    from { opacity: 0; transform: translateX(34px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes management-panel-leave-to-left {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-34px); }
}
@keyframes management-panel-leave-to-right {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(34px); }
}
@media (prefers-reduced-motion: reduce) {
    .management-panel-enter-from-left,
    .management-panel-enter-from-right,
    .management-panel-leave-to-left,
    .management-panel-leave-to-right { animation-duration: .01ms; }
}
#management-members-panel {
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}
.management-members-list {
    max-height: 235px;
    gap: 6px;
    padding: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

.management-member-row {
    min-height: 54px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
}

#management-winners-list .management-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#management-winners-list .management-member-row > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
}

#management-winners-list .management-member-status {
    margin-right: auto; /* در RTL تاریخ را به چپ هل می‌دهد */
    text-align: left;
    white-space: nowrap;
}


.management-member-badge {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    padding-left: 8px !important;
    border-left: 1px solid #d9e5e1 !important;
}

    .management-member-badge strong {
        width: 100% !important;
        padding: 3px 4px !important;
        border-radius: 7px !important;
        font-size: 11px !important;
    }

    .management-member-badge small {
        font-size: 10px !important;
    }

.management-member-main {
    padding-right: 0 !important;
    border-right: none !important;
}

    .management-member-main strong {
        font-size: 12px !important;
    }

    .management-member-main small {
        font-size: 10px !important;
    }

.management-call-button, .management-call-button img {
    width: 29px !important;
    height: 29px !important;
}

.member-card { border-radius: 12px; }
.member-card-collapsible { min-height: 60px; padding: 8px 10px; border-radius: 12px; }
.member-card-collapsible .member-info strong { font-size: 12px !important; }
.member-card-collapsible .member-info small { margin-top: 3px; font-size: 10px !important; }
.member-card-role { width: 52px !important; min-width: 52px !important; max-width: 52px !important; }
.member-card-role strong { width: 52px !important; padding: 3px 4px; border-radius: 7px; font-size: 11px !important; }
.member-card-role small { margin-top: 3px; font-size: 9px; }
.member-card-collapsible > .member-edit-toggle { min-height: 30px; padding: 5px 9px; border-radius: 8px; font-size: 10px; }
.role-permissions-settings.modal-open {position: fixed; inset: 0; z-index: 70; display: block !important;margin: 0; padding: 18px; border: 0; background: rgba(12,45,37,.34);}
.role-permissions-settings.modal-open::after {
    content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(3px);
}
.role-permissions-settings.modal-open > * {
    position: relative; max-width: 420px; margin-left: auto; margin-right: auto;
}
.role-permissions-settings.modal-open .role-permissions-modal-head,
.role-permissions-settings.modal-open .role-permissions-content {
    padding: 14px; background: #fff;
}
.role-permissions-modal-head { display: none; align-items: center; justify-content: space-between; }
.role-permissions-modal-head h3 { margin: 0; font-size: 15px; }
.role-permissions-settings.modal-open .role-permissions-modal-head { display: flex; border-radius: 16px 16px 0 0; }
.role-permissions-settings.modal-open .role-permissions-content { margin-top: 0; border-radius: 0 0 16px 16px; }
.role-permissions-settings.modal-open > #role-permissions-toggle { display: none; }
.role-permissions-settings { z-index: 1450; margin: 0; padding: 10px; border: 0; }
.role-permissions-settings .role-permissions-modal-card {
    width: min(100%, 420px);
    max-height: calc(100dvh - 20px);
    overflow: visible;
    padding: 9px 11px 11px;
    border-radius: 16px;
}
.role-permissions-compact-head { display: flex; justify-content: flex-start; height: 25px; }
.role-permissions-compact-head .icon-button { width: 25px; height: 25px; min-height: 25px; padding: 0; font-size: 18px; }
.role-permissions-settings .role-permissions-content { margin-top: 0; }
.role-permissions-intro { display: block; margin: 0 0 6px; color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.role-permissions-settings .permission-role-radios { gap: 4px; margin-top: 0; }
.role-permissions-settings .permission-role-radios span { padding: 6px 3px; border-radius: 8px; font-size: 10px; }
.role-permissions-settings .permission-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-top: 7px;
    max-height: none;
    overflow: visible;
    padding: 0;
}
.role-permissions-settings .permission-option { min-height: 30px; gap: 5px; padding: 5px 6px; border-radius: 7px; font-size: 9.5px; line-height: 1.35; }
.role-permissions-settings #save-role-permissions { min-height: 34px; margin-top: 7px; padding: 7px 10px; font-size: 11px; }
.role-permissions-settings .dashboard-message { min-height: 0; margin: 4px 0 0; font-size: 9.5px; line-height: 1.35; }
.field-error { display: none; align-items: center; gap: 5px; grid-column: 1 / -1; margin: -4px 2px 0; color: #d64545; font-size: 10px; }
.field-error.visible { display: flex; }
.field-error img { width: 17px; height: 17px; object-fit: contain; }
.account-field-error { grid-column: auto; margin: -5px 2px 2px; }
.outlined-field.field-validation-error { border-color: #d64545; box-shadow: 0 0 0 3px rgba(214, 69, 69, .10); }
.create-fund-hero {
    display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; padding: 14px;
    border-radius: 12px; background: var(--green-soft);
}
.create-fund-hero img { width: 46px; height: 46px; object-fit: contain; }
.create-fund-hero h2 { margin: 0; color: var(--green-dark); font-size: 18px; }
.create-fund-hero p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.8; }
.create-fund-view .members-title-row, .create-fund-view .selected-fund-type-hint { display: none !important; }
.create-fund-view .lottery-create-fields {
    padding: 0; border: 0; border-radius: 0; background: transparent;
}
.create-fund-view .form-label { margin-top: 11px; font-size: 12px; }
.lottery-config-grid { gap: 7px; }
.lottery-config-grid .selection-button { min-height: 43px; }
.transaction-filter-card, .report-filter-card { border-radius: 12px; }
.transactions-view .status-dot, .reports-view .status-dot { display: none !important; }
.transactions-view .members-title-row, .reports-view .members-title-row { align-items: center; }
.transactions-view .page-tools, .reports-view .page-tools { margin-right: auto; }
.settings-panel {border-radius: 0; padding: 4px 16px 18px; overflow-y: auto;}
.drawer-menu-item { min-height: 42px !important; padding: 8px 10px !important; border: 0 !important; border-radius: 10px !important; }
.drawer-display-settings { display: none !important; }
.drawer-menu-list { gap: 5px !important; }
.settings-panel .current-role-card { margin-top: 10px; padding: 9px 10px; border-radius: 10px; }
.drawer-user-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 4px; padding: 7px 10px; border-radius: 9px; background: #f5f8fb; }
.drawer-user-summary strong { color: var(--green-dark); font-size: 12px; }
.drawer-user-summary small { color: var(--muted); font-size: 11px; direction: ltr; }
.current-role-card { margin-top: 8px; padding: 8px 10px; border-radius: 10px; }
.settings-panel .profile-settings, .settings-panel .password-settings { margin-top: 10px; padding-top: 10px; }
.settings-panel .form-input { padding: 9px 10px; }
.report-summary-grid + .section-heading h2 { font-size: 13px; }
.report-card, .report-detail-item { border-radius: 12px; }
.member-info { flex: 1; min-width: 0; }
.member-info strong, .member-info small { display: block; }
.member-info strong { overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: right; font-size: calc(13px * var(--large-card-font-scale)); }
.member-card-collapsible { position: relative; min-height: 72px; padding: 11px 14px; border-radius: 20px; direction: rtl; }
.member-card-collapsible .member-info { order: 2; padding-right: 4px; }
.member-card-collapsible .member-info strong { font-size: calc(15px * var(--large-card-font-scale)); }
.member-card-collapsible .member-info strong em { color: var(--green-dark); font-size: .78em; font-style: normal; font-weight: 500; }
.member-card-collapsible .member-info small { margin-top: 7px; font-size: calc(13px * var(--small-card-font-scale)); }
.member-card-role { order: 1; display: flex; flex-direction: column; align-items: center; width: 64px; min-width: 64px; max-width: 64px; text-align: center; }
.member-card-role strong { width: 64px; box-sizing: border-box; padding: 4px 5px; border-radius: 8px; color: #fff; background: #087b08; font-size: 14px; font-weight: 500; line-height: 1.25; white-space: nowrap; }
.member-card-role small { margin-top: 4px; color: #71807c; background: transparent; font-size: 11px; }
.member-card-collapsible > .member-edit-toggle { order: 3; margin-inline-start: 0; border-radius: 10px; padding: 8px 13px; font-size: 13px; min-height: 38px; }
.member-card-collapsible > .member-controls, .member-card-collapsible > .member-edit-panel, .member-card-collapsible > .member-actions { order: 4; flex-basis: 100%; }
.management-member-main, .member-card .member-info { border-right: 1px solid #d9e5e1; padding-right: 16px; }
.member-cancel-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; border: 0; border-radius: 14px; color: #fff; background: #ff5252; cursor: pointer; font: inherit; font-size: 12px; }
.member-delete-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.member-delete-icon img { display: block; width: 30px; height: 30px; object-fit: contain; }
.member-edit-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; }
.member-edit-fields [data-member-first-name] { grid-column: 1; grid-row: 1; }
.member-edit-fields [data-member-last-name] { grid-column: 2; grid-row: 1; }
.member-edit-fields [data-member-mobile] { grid-column: 1; grid-row: 2; }
.member-edit-fields [data-member-action="profile"] { grid-column: 2; grid-row: 2; }
.member-edit-fields [data-member-action="cancel-edit"] { grid-column: 2; grid-row: 3; justify-self: end; min-width: 120px; }
.member-edit-fields .member-action-button { min-height: 38px; }
@media (max-width: 700px) {
    .management-member-badge, .member-card-role { width: 60px; min-width: 60px; max-width: 60px; }
    .management-member-badge strong, .member-card-role strong { width: 60px; font-size: 13px; }
    .member-card-collapsible > .member-edit-toggle { padding: 7px 11px; font-size: 12px; min-height: 34px; }
    .member-cancel-button, .member-edit-fields .member-action-button { min-height: 34px; }
    .management-member-main, .member-card .member-info { padding-right: 10px; }
}
.fund-settings-view { padding-bottom: 16px; }
.fund-history-view { padding: 10px 14px 24px; }
.history-page-head { margin: 2px 2px 14px; }
.history-page-head h2 { margin: 0; color: var(--green-dark); font-size: 18px; }
.history-page-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.fund-history-list { display: grid; gap: 10px; }
.fund-history-card { overflow: hidden; border: 1px solid #dce9e4; border-radius: 13px; background: #fff; }
.fund-history-card-head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 0; color: var(--ink); background: #f7fbf9; text-align: right; cursor: pointer; font: inherit; }
.fund-history-card-head span { display: grid; gap: 3px; }
.fund-history-card-head strong { font-size: 13px; color: var(--green-dark); }
.fund-history-card-head small { color: var(--muted); font-size: 10px; }
.fund-history-card-head b { font-size: 17px; color: var(--green-dark); }
.fund-history-card-details { padding: 10px 12px 12px; }
.fund-history-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-bottom: 8px; }
.fund-history-stats span { display: grid; gap: 3px; padding: 6px 3px; border-radius: 7px; color: var(--muted); background: #f4f8f6; font-size: 9px; text-align: center; }
.fund-history-stats b { color: var(--ink); font-size: 12px; }
.fund-history-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #edf3f0; color: var(--muted); font-size: 10px; }
.fund-history-summary-row b { color: var(--ink); font-size: 11px; text-align: left; }
.fund-history-detail-section { margin-top: 11px; }
.fund-history-detail-section h3 { margin: 0 0 5px; color: var(--green-dark); font-size: 12px; }
.fund-history-export-actions { display: flex; justify-content: flex-end; gap: 7px; margin-bottom: 9px; }
.fund-history-export-button { display: inline-grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 4px; border: 1px solid #167d96; border-radius: 8px; color: #0d5368; background: #fff; cursor: pointer; }
.fund-history-export-button img { width: 20px; height: 20px; object-fit: contain; }
.fund-history-export-button:hover { background: #e8f7fb; }
.fund-history-export-button.is-subscription-locked,
.report-export-button.is-subscription-locked { border-color: #d8dee7; background: #f4f6f8; cursor: not-allowed; filter: grayscale(1); opacity: .5; }
.fund-history-export-button.is-subscription-locked:hover,
.report-export-button.is-subscription-locked:hover { border-color: #d8dee7; background: #f4f6f8; }
.fund-history-members > div, .fund-history-winners > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #e6efeb; font-size: 11px; }
.fund-history-members > div:last-child, .fund-history-winners > div:last-child { border-bottom: 0; }
.fund-history-members small, .fund-history-winners small, .fund-history-detail-section p { margin: 0; color: var(--muted); font-size: 10px; text-align: left; }
.fund-history-winners > div { justify-content: flex-start; }
.fund-history-winners b { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 23px; border-radius: 50%; color: #0d5368; background: #eaf6f4; font-size: 11px; }
.fund-history-winners span { flex: 1 1 auto; }
.fund-history-transaction-table { overflow: hidden; border: 1px solid #dce9e4; border-radius: 8px; background: #fff; }
.fund-history-transaction-row { display: grid; grid-template-columns: minmax(78px, 1.1fr) minmax(65px, .82fr) minmax(88px, 1fr) minmax(70px, .78fr); align-items: stretch; border-bottom: 1px solid #dce9e4; font-size: 10px; }
.fund-history-transaction-entry:last-child .fund-history-transaction-row { border-bottom: 0; }
.fund-history-transaction-row > span, .fund-history-transaction-row > b { display: flex; align-items: center; min-width: 0; padding: 7px 5px; border-left: 1px solid #e6efeb; overflow-wrap: anywhere; }
.fund-history-transaction-row > :last-child { border-left: 0; }
.fund-history-recipient-account-row { display: block; border-bottom: 1px solid #dce9e4; background: #f8fcfb; }
.fund-history-recipient-account-row > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 8px; color: var(--muted); font-size: 9px; direction: rtl; }
.fund-history-recipient-account-row b { color: var(--muted); font-weight: 500; }
.fund-history-recipient-account-row strong { color: var(--ink); font-size: 10px; font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.fund-history-transaction-head { color: #fff; background: #167d96; font-size: 9px; font-weight: 700; }
.fund-history-transaction-head > span { justify-content: center; border-color: rgba(255,255,255,.24); text-align: center; }
.fund-history-transaction-name { color: var(--ink); font-weight: 700; }
.fund-history-transaction-amount { justify-content: flex-start; color: #126d54; text-align: left; }
.fund-history-transaction-meta { display: grid !important; gap: 3px; align-content: center; }
.fund-history-transaction-meta b { color: var(--ink); font-size: 10px; font-weight: 500; }
.fund-history-transaction-meta small { color: var(--muted); font-size: 9px; direction: ltr; text-align: right; }
.fund-history-transaction-status { justify-content: center; color: #0d5368; text-align: center; }
.fund-history-print-recipient-account-row td { padding: 7px 8px; color: #536864; background: #f8fcfb; font-size: 10px; }
.fund-history-print-recipient-account-row strong { margin-inline-start: 8px; color: #172523; }
.fund-history-empty { margin: 0; padding: 8px; border: 1px solid #e6efeb; border-radius: 8px; color: var(--muted); background: #fafcfb; font-size: 10px; }
@media (max-width: 390px) {
    .fund-history-transaction-row { grid-template-columns: minmax(62px, 1fr) minmax(55px, .78fr) minmax(78px, 1fr) minmax(58px, .72fr); font-size: 9px; }
    .fund-history-transaction-row > span, .fund-history-transaction-row > b { padding: 7px 4px; }
    .fund-history-transaction-head { font-size: 8px; }
}
.settings-page-head { display: flex; justify-content: flex-start; margin: 2px 2px 12px; }
.fund-settings-view > #fund-settings-page-slot > .management-tab-panel { margin-top: 0; }
.fund-settings-view > #fund-revert-button { display: block; width: 100%; margin-top: 10px; }
.member-active-edit-hint { margin: 0; line-height: 1.8; }
.member-info small { margin-top: 5px; color: var(--muted); font-size: calc(11px * var(--small-card-font-scale)); }
.member-status { color: var(--green); font-size: 11px; }
.management-obligation-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 10px; }
.management-obligation-unpaid { color: #d3483f; }
.management-obligation-paid { color: var(--green); }
.member-obligation-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.member-obligation-unpaid { color: #d3483f; font-size: 10px; }
.member-obligation-paid { color: var(--green); font-size: 10px; }
.member-payment-button { padding: 3px 9px; border: 0; border-radius: 8px; color: #fff; background: var(--green); cursor: pointer; font: inherit; font-size: 10px; }
.member-payment-button:disabled { opacity: .5; cursor: not-allowed; }
.bottom-nav button:disabled { opacity: .38; cursor: not-allowed; pointer-events: none; }
.member-actions { display: flex; align-items: center; flex: 1 1 auto; gap: 6px; width: auto; margin-top: 8px; }
.member-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 8px; }
.member-controls .role-picker { flex: 1 1 190px; min-width: 170px; }
.member-controls .member-actions { flex: 0 1 auto; margin-top: 0; }
.member-card > .member-actions { flex: 0 1 auto; width: auto; margin-top: 0; }
.member-card > .role-picker { flex: 1 1 180px; min-width: 170px; }
.member-call-button { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; color: #fff; background: #18a86d; text-decoration: none; font-size: 15px;}
.member-edit-toggle:hover {background-color: rgba(255, 255, 255, 0.08);}
.member-edit-toggle:active {transform: scale(0.95);}
.member-edit-toggle .member-edit-icon {width: 35px;height: 35px;object-fit: contain;display: block;pointer-events: none;}
.member-edit-toggle {display: inline-flex !important; align-items: center !important;justify-content: center !important; padding: 6px !important; border-radius: 8px !important; min-height: auto !important; background: transparent; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.12); transition: background-color 0.2s ease, transform 0.15s ease;}
.member-action-button { padding: 6px 9px; border: 0; border-radius: 10px; color: #fff; background: var(--green); cursor: pointer; font-size: 11px; }
.member-action-button.member-edit-toggle {display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; padding: 6px;}
.member-edit-icon {width: 22px; height: 22px; object-fit: contain; pointer-events: none; }
.member-status-actions .member-action-button { min-height: 32px; }
.member-action-button.reject { color: #9a3d28; background: #fff0eb; }
.fund-card-status-stack { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.fund-card-status-stack .fund-card-status { justify-self: auto; }
.fund-card-subscription-badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 7px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.fund-card-subscription-badge.free { color: #7a5800; background: #fff3bd; }
.fund-card-subscription-badge.active { color: #08683f; background: #dff7e9; }

/* Compact two-row member cards: identity/obligation on top, contact/actions below. */
.management-member-row {
    position: relative;
    display: block !important;
    min-height: 74px;
    padding: 8px 10px 8px 78px !important;
    border-radius: 10px !important;
}
.management-member-main {
    display: block !important;
    min-width: 0;
    padding: 0 0 30px !important;
    border-right: 0 !important;
}
.management-member-main > strong {
    display: block;
    max-width: calc(100% - 92px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.management-member-main > small {
    display: block;
    margin-top: 9px !important;
    padding-right: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.management-member-badge {
    position: absolute;
    top: 8px;
    left: 8px;
}
.management-obligation-row {
    position: static;
    display: block !important;
    margin: 0 !important;
}
    .management-obligation-row .member-obligation-badge {
        position: absolute !important;
        top: 7px;
        left: 100px;
        z-index: 2;
    }

.member-obligation-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 21px;
    min-width:88px;
    padding: 2px 6px;
    border-radius: 5px;
    color: #fff !important;
    background: #d64545;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.management-obligation-row .member-obligation-badge {
    position: absolute !important;
    top: 7px !important;
    left: 90px !important;
}

.management-member-row.pending-payment-review,
.member-card.pending-payment-review {
    border: 1px solid #e8a13b !important;
    background: #fffaf2 !important;
}
.management-member-row[data-pending-payment-id] {
    cursor: pointer;
}
.management-members-list .management-member-row.exited-member-card {
    padding-left: 10px !important;
}
.transaction-card-focus {
    outline: 3px solid rgba(232, 161, 59, .62);
    outline-offset: 2px;
    animation: transaction-card-focus-pulse .7s ease-in-out 4;
}
@keyframes transaction-card-focus-pulse {
    50% { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(232, 132, 31, .38); }
}
@media (prefers-reduced-motion: reduce) {
    .transaction-card-focus { animation: none; }
}
.management-obligation-row .member-payment-button {
    position: absolute;
    right: 78px;
    bottom: 7px;
    width: auto;
    height: 29px;
    min-height: 29px;
    padding: 3px 10px;
    border-radius: 5px;
}
.management-member-actions {
    position: absolute;
    left: 8px;
    bottom: 5px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.management-member-actions .member-payment-button {
    position: static;
}
.management-call-button,
.management-call-button img {
    width: 29px !important;
    height: 29px !important;
}

/* Final member-card layout: role column on the right, two content rows on the left. */
.management-member-row {
    display: flex !important;
    flex-direction: row;
    direction: rtl;
    align-items: stretch;
    gap: 0;
    min-height: 76px;
    padding: 7px 8px !important;
    border-radius: 10px !important;
}
.management-member-badge {
    position: static;
    order: 1;
    flex: 0 0 68px;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    justify-content: flex-start;
    padding: 10px 7px 0;
    border-left: 1px solid #d9e5e1;
    border-right: 0;
    align-items: center;
}
.management-member-badge strong {
    width: 58px !important;
    padding: 4px 3px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
}
.management-member-badge small {
    margin-top: 5px;
    font-size: 9px !important;
}
.management-member-main {
    order: 2;
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px 10px 0 !important;
    border: 0 !important;
}
.member-card-top-row,
.member-card-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
.member-card-top-row strong {
    min-width: 0;
    max-width: calc(100% - 112px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.member-card-bottom-row small {
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.member-obligation-badge {
    position: static;
    flex: 0 0 auto;
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 5px;
}
.member-obligation-payment-stack {
    display: grid;
    grid-template-columns: minmax(88px, auto);
    gap: 4px;
    flex: 0 0 auto;
}
.member-obligation-summary {
    display: grid;
    justify-items: stretch;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 112px;
}
.member-obligation-summary .member-obligation-badge {
    width: 100%;
}
.member-obligation-costs {
    display: grid;
    gap: 4px;
}
.member-obligation-cost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 2px 6px;
    border-radius: 5px;
    color: #fff;
    background: #d64545;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}
.member-exit-settlement-credit {
    display: block;
    color: #8c5a0f;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}
.management-member-badge {
    justify-content: center;
    align-items: center;
    padding-top: 6px;
}
.management-member-row.charter-pending-member .member-card-top-row strong {
    max-width: none;
    white-space: normal;
}
.management-member-row.charter-pending-member .member-card-top-row {
    align-items: flex-start;
}
.management-call-button.disabled {
    cursor: not-allowed;
    opacity: 1;
    filter: none;
    pointer-events: none;
}
.member-obligation-payment-stack .member-obligation-badge,
.member-obligation-payment-stack .member-payment-button {
    width: 100%;
    min-width: 88px;
    margin: 0;
}
.member-obligation-payment-stack .member-payment-button {
    justify-content: center;
    padding-inline: 6px;
}
.management-member-actions {
    position: static;
    order: initial;
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    margin: 0;
}
.management-member-actions .member-payment-button,
.member-payment-button {
    position: static;
    width: auto;
    height: 29px;
    min-height: 29px;
    padding: 3px 10px;
    border-radius: 6px;
}
.member-role-select { flex: 1; min-width: 0; padding: 6px; border: 1px solid #cfe4dc; border-radius: 10px; color: var(--ink); background: #fff; font: inherit; font-size: 11px; }
.role-management-hint { margin: -8px 4px 12px; padding: 9px 11px; border-radius: 12px; color: var(--green-dark); background: var(--green-soft); font-size: 11px; line-height: 1.8; }
  .role-picker { display: flex; flex: 1 1 180px; min-width: 170px; flex-wrap: wrap; align-items: stretch; padding: 5px 7px; border: 1px solid #d8ebe3; border-radius: 12px; background: var(--green-soft); }
  .role-picker-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 5px 7px; border: 0; border-radius: 9px; color: var(--green-dark); background: transparent; cursor: pointer; font: inherit; font-size: 10px; }
  .role-picker-toggle-arrow { font-size: 15px; line-height: 1; }
  .role-picker-details { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; }
  .role-picker-details.hidden { display: none; }
.role-step-button { align-self: center; width: 26px; height: 28px; border: 0; border-radius: 8px; color: var(--green); background: #fff; cursor: pointer; font-size: 14px; }
.role-step-button:disabled { cursor: not-allowed; opacity: .35; }
.role-picker-content { flex: 1; min-width: 0; padding: 0 4px; }
.role-picker-content strong, .role-picker-content small { display: block; }
.role-picker-content strong { color: var(--green-dark); font-size: 11px; }
.role-picker-content small { margin-top: 1px; color: var(--muted); font-size: 9px; }
.role-picker-content ul { display: flex; flex-wrap: wrap; gap: 1px 7px; margin: 3px 0 0; padding: 0; color: var(--ink); font-size: 9px; line-height: 1.35; }
.role-picker-content li { list-style: none; }
.role-modal-options { display: grid; gap: 8px; margin: 16px 0; }
.role-modal-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; color: var(--ink); background: #f6faf8; cursor: pointer; text-align: right; }
.role-modal-option.active { color: var(--role-dark, var(--green-dark)); background: var(--role-soft, var(--green-soft)); box-shadow: inset 0 0 0 2px var(--role-accent, var(--green)); }
.member-edit-modal-card { width: min(100%, 430px); }
.member-edit-modal-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.member-edit-modal-fields #member-modal-role { min-height: 44px; }
.member-edit-modal-fields #member-modal-share { min-height: 44px; }
.member-edit-modal-fields .member-modal-gender {
    min-height: 44px;
    margin: 0;
    padding: 7px 10px;
    gap: 12px;
    justify-content: center;
    border: 1px solid #dce8e5;
    border-radius: 10px;
    background: #f9fdfc;
}
.member-edit-modal-fields .member-modal-gender .radio-label { font-size: 13px; white-space: nowrap; }
.member-edit-modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.member-edit-modal-actions button { width: 100%; min-height: 40px; margin: 0; }
.role-save-button { flex: 0 0 auto; width: auto; min-height: 28px; margin-top: 0; align-self: center; padding: 5px 8px; }
.payment-view { padding-bottom: 12px; }
.transaction-loan-details { display: grid; gap: 5px; margin-top: 0; padding: 8px 9px 2px; border-top: 1px solid #4e84f27f; color: var(--muted); font-size: 10px; }
.transaction-loan-details > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.transaction-loan-details b { min-width: 0; color: var(--ink); font-size: 11px; font-weight: 600; text-align: left; word-break: break-all; }
.create-fund-view { padding-bottom: 12px; }
.create-fund-fields-grid,
.create-fund-option-grid {
    display: grid;
    gap: 12px;
}
.create-fund-fields-grid > *,
.create-fund-option-grid > * {
    min-width: 0;
    box-sizing: border-box;
}
.create-fund-fields-grid .form-input,
.create-fund-fields-grid .selection-button {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.create-fund-option-grid .fund-cost-choice,
.create-fund-option-grid .fund-charter-choice,
.create-fund-option-grid .first-loan-owner-choice {
    min-inline-size: 0;
    width: 100%;
}
.create-fund-option-grid .fund-cost-option > span:not(.fund-cost-radio-indicator),
.create-fund-option-grid .first-loan-owner-choice > span:last-child {
    min-width: 0;
}
.create-fund-option-grid .fund-cost-option small,
.create-fund-option-grid .first-loan-owner-choice small {
    overflow-wrap: anywhere;
}
.fund-type-options { display: grid; gap: 10px; margin-top: 16px; }
.fund-type-option { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #d9e8e2; border-radius: 16px; background: #fff; cursor: pointer; }
.fund-type-option:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.fund-type-option input { margin-top: 4px; accent-color: var(--green); }
.fund-type-option strong, .fund-type-option small { display: block; }
.fund-type-option small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.form-label { display: block; margin: 16px 2px 7px; font-size: 13px; font-weight: bold; }
.form-select, .form-input { width: 100%; padding: 13px; border: 1px solid #d9e8e2; border-radius: 10px; background: #fff; color: var(--ink); font: inherit;font-size:12px; }
.form-select { appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%), linear-gradient(135deg, var(--green) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; box-shadow: 0 5px 14px rgba(26,75,61,.04); }
.form-select:focus { border-color: var(--green); box-shadow: 0 0 0 3px #dff2eb; }
.lottery-create-fields { margin-top: 6px; padding: 14px; border: 1px solid #d8ebe3; border-radius: 20px; background: var(--green-soft); }
.lottery-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.lottery-config-grid .form-label { margin-top: 12px; }
.lottery-config-grid > div { min-width: 0; }
.lottery-config-grid .form-input { box-sizing: border-box; }
.create-fund-confirm-actions { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; margin-top: 12px; }
.create-fund-confirm-actions button { width: 100%; margin: 0; min-height: 42px; }
.selection-button { display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer; text-align: right; font-size: 11px; }
.fund-settings-grid .selection-button, .fund-settings-grid #fund-settings-schedule-day { min-height: 45px; }
.selection-button-arrow { color: var(--green); font-size: 15px; line-height: 1; }
.field-hint { margin: 9px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.9; }
.selection-modal { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: end center; padding: 14px; }
/* انتخاب سهم و نقش از داخل مودال ویرایش عضو باز می‌شوند و باید روی آن قرار بگیرند. */
.selection-modal#member-share-count-modal, .selection-modal#member-role-modal { z-index: 1350; }
.member-modal-delete { width: 100%; margin-top: 10px; min-height: 40px; border: 0; border-radius: 14px; color: #c62828; background: #fff0f0; cursor: pointer; }
.selection-modal-backdrop { position: absolute; inset: 0; background: rgba(12, 45, 37, .34); backdrop-filter: blur(3px); }
.selection-modal-card { position: relative; width: min(100%, 450px); max-height: min(78vh, 600px); overflow: auto; padding: 18px; border: 1px solid #dbece5; border-radius: 26px; background: #fff; box-shadow: 0 20px 50px rgba(26, 75, 61, .2); }
.selection-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.selection-modal-header h3 { margin: 4px 0 0; font-size: 15px; }
.icon-button { width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--green-dark); background: var(--green-soft); cursor: pointer; font-size: 21px; }
.selection-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0 8px; }
.selection-tab { padding: 10px; border: 1px solid #d9e8e2; border-radius: 13px; color: var(--muted); background: #fff; cursor: pointer; font: inherit; font-size: 12px; }
.selection-tab.active { border-color: var(--green); color: var(--green-dark); background: var(--green-soft); font-weight: bold; }
.selection-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 16px; }
.selection-options-compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.selection-option { min-height: 42px; padding: 8px 5px; border: 1px solid #d9e8e2; border-radius: 12px; color: var(--ink); background: #fff; cursor: pointer; font: inherit; font-size: 11px; }
.selection-option.active { border-color: var(--green); color: var(--green-dark); background: var(--green-soft); font-weight: bold; }
.wheel-picker { position: relative; height: 156px; margin: 16px 0 20px; overflow: hidden; border-top: 1px solid #edf1ef; border-bottom: 1px solid #edf1ef; background: #fff; }
.wheel-picker::before, .wheel-picker::after { content: ""; position: absolute; left: 12%; right: 12%; z-index: 2; height: 1px; background: #d5ddd9; pointer-events: none; }
.wheel-picker::before { top: 52px; }
.wheel-picker::after { top: 103px; }
.wheel-options { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 52px 12px; overscroll-behavior: contain; }
.wheel-options::-webkit-scrollbar { display: none; }
.wheel-option { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 51px; scroll-snap-align: center; border: 0; color: #a4aaa7; background: transparent; cursor: pointer; font: inherit; font-size: 11px; transition: color .15s ease, transform .15s ease, font-weight .15s ease; }
.wheel-option.active { color: var(--ink); font-weight: bold; transform: scale(1.03); }
.wheel-option-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; color: var(--green-dark); background: var(--green-soft); font-size: 13px; }
@media (max-width: 390px) { .lottery-config-grid { grid-template-columns: 1fr; } .selection-options-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 390px) { .create-fund-view .lottery-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
    #dashboard.app-shell #create-fund-view:not(.hidden) .create-fund-fields-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: end;
    }

    #dashboard.app-shell #create-fund-view:not(.hidden) #lottery-create-fields:not(.hidden),
    #dashboard.app-shell #create-fund-view:not(.hidden) #lottery-create-fields:not(.hidden) .lottery-config-grid {
        display: contents;
    }

    #dashboard.app-shell #create-fund-view:not(.hidden) .create-fund-option-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        margin-top: 20px;
    }

    #dashboard.app-shell #create-fund-view:not(.hidden) .create-fund-option-grid .fund-cost-choice,
    #dashboard.app-shell #create-fund-view:not(.hidden) .create-fund-option-grid .fund-charter-choice,
    #dashboard.app-shell #create-fund-view:not(.hidden) .create-fund-option-grid .first-loan-owner-choice {
        height: 100%;
        margin: 0;
    }

    #dashboard.app-shell #create-fund-view:not(.hidden) .fund-charter-radio-option {
        min-width: 0;
        white-space: normal;
    }
}
.file-input { padding: 10px; cursor: pointer; }
.file-input::file-selector-button { margin-left: 10px; padding: 7px 10px; border: 0; border-radius: 9px; color: var(--green-dark); background: var(--green-soft); font: inherit; cursor: pointer; }
.payment-review-panel { margin: 0 0 18px; padding: 16px; border: 1px solid #d8ebe3; border-radius: 20px; background: var(--green-soft); }
.payment-review-panel .section-heading { margin: 0 0 10px; }
.payment-review-panel .section-heading h2 { font-size: 14px; }
.payment-review-list { display: grid; gap: 10px; }
.payment-review-card { padding: 14px; border: 1px solid #e2eee9; border-radius: 16px; background: #fff; }
.payment-review-head, .payment-review-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.payment-review-head { margin-bottom: 10px; color: var(--green-dark); }
.payment-review-head span { padding: 4px 8px; border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: 11px; }
.payment-review-row { padding: 5px 0; color: var(--muted); font-size: 11px; }
.payment-review-row b { color: var(--ink); font-weight: normal; }
.payment-review-attachments { margin-top: 8px; color: var(--muted); font-size: 11px; }
.payment-receipt-section { margin: 12px 0; padding: 10px; border: 1px solid #d8ebe3; border-radius: 12px; background: #f8fcfa; }
.payment-receipt-section-title { margin: 0; color: var(--ink); font-size: 12px; font-weight: 800; }
.attachment-button, .transaction-receipt-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin: 4px 4px 0 0; padding: 6px 9px; border: 1px solid #cfe4dc; border-radius: 9px; color: var(--green-dark); background: #fff; cursor: pointer; font: inherit; font-size: 11px; }
.attachment-button::before, .transaction-receipt-button::before { content: "◉"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; background: var(--green); font-size: 9px; }
.transaction-receipt-button { width: 100%; margin: 8px 0 0; border-color: #b9d8e8; color: #126381; background: #f3fbff; }
.payment-attachment-viewer-card { width: min(94vw, 760px); max-width: 760px; max-height: 92vh; }
.payment-attachment-viewer-content { display: grid; place-items: center; min-height: 220px; max-height: 67vh; overflow: auto; border-radius: 12px; background: #f4f7f6; }
.payment-attachment-viewer-content img { display: block; max-width: 100%; max-height: 64vh; object-fit: contain; transform-origin: center; transition: transform .15s ease; }
.payment-attachment-viewer-content iframe { width: 100%; height: 64vh; border: 0; background: #fff; }
.payment-attachment-viewer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.payment-attachment-viewer-actions .outline-button { width: 38px; min-height: 38px; padding: 0; font-size: 20px; line-height: 1; }
.payment-attachment-viewer-actions .primary-button { width: auto; min-height: 38px; margin: 0; padding: 8px 14px; text-decoration: none; }
.payment-review-actions { display: flex; gap: 7px; margin-top: 10px; }
.transaction-review-button { width: 100%; margin-top: 10px; }
.transaction-rejection-reason { margin-top: 0; padding: 0 10px 8px; border: 1px solid #f28c28; border-radius: 10px; color: #111; background: #fff; font-size: 11px; line-height: 1.7; text-align: right; }
.transaction-rejection-reason span { display: block; margin: 0; color: #111; line-height: 1.7; }
.transaction-rejection-reason b { display: block; margin-top: 3px; font-weight: normal; }
.transaction-right-col strong {
    font-size: 12px;
}
.transaction-status-badge {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 4px 10px; /* بهجای padding زیاد قبلی */
    height: auto;
    min-height: 24px; /* ارتفاع حداقلی کم */
    font-size: 12px;
}
.transaction-status-final { color: #147a4d; background: #e5f6ec; }
.transaction-status-rejected { color: #b42318; background: #fde8e7; }
.transaction-status-reversed { color: #2459a6; background: #e8f0ff; }
.transaction-status-pending { color: #a15c00; background: #fff1d6; }
.transaction-status-neutral { color: var(--muted); background: #eef2f1; }
.transaction-card-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; direction: rtl; }
.transaction-card-grid + .transaction-card-grid { border-top: 1px solid #4e84f27f; }
.transaction-cell { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 9px; color: var(--muted); font-size: 10px; text-align: center; }
.transaction-cell + .transaction-cell::before { content: ""; position: absolute; inset-block: 23%; inset-inline-start: 0; border-inline-start: 1px solid #4e84f27f; }
.transaction-member-cell { flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; }
.transaction-member-cell > strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 11px; }
.transaction-member-cell .transaction-recorded-by-manager { margin: 0; max-width: 100%; padding: 2px 5px; font-size: 8px; line-height: 1.2; }
.transaction-member-cell .transaction-recorded-by-manager img { width: 14px; height: 14px; }
.transaction-amount-cell { flex-direction: column; }
.transaction-amount-cell strong { color: var(--green-dark); font-size: 11px; }
.transaction-amount-display { display: inline-flex; align-items: center; justify-content: center; gap: 5px; direction: rtl; font-size: 11px; font-weight: 800; white-space: nowrap; }
.transaction-amount-arrow { display: inline-grid; place-items: center; width: 18px; height: 18px; line-height: 1; }
.transaction-amount-arrow img { display: block; width: 100%; height: 100%; object-fit: contain; }
.transaction-amount-incoming { color: #16834f; }
.transaction-amount-outgoing { color: #cf3030; }
.transaction-status-loan { color: #a32a2a; background: #fee8e8; }
.transaction-card-grid-bottom .transaction-cell { justify-content: center; }
.transaction-card-grid-bottom .transaction-cell b { color: var(--ink); font-weight: 600; }
.transaction-date-cell strong { color: var(--ink); font-weight: 600; }
.transaction-status-cell .transaction-status-badge { flex: 1 1 auto; min-width: 0; width: 100%; }
.transaction-card-grid-top .transaction-cell { min-height: 48px; }
.transaction-status-cell .transaction-status-badge { min-height: 32px; }
.transaction-status-icon { display: inline-grid; place-items: center; width: 15px; height: 15px; font-size: 13px; line-height: 1; }
.transaction-status-icon img { display: block; width: 15px; height: 15px; object-fit: contain; }
.transaction-edit-cell { flex-direction: row; justify-content: flex-end !important; }
.transaction-edit-cell > span { color: var(--muted); }
.transaction-edit-cell .transaction-edit-payment-button { margin: 0; }
.transaction-edit-cell .transaction-prior-membership { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 4px 7px; border-radius: 6px; color: #725b36; background: #f3e7cd; font-size: 9px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.payment-review-modal-details { display: grid; gap: 8px; margin: 12px 0; }
.payment-review-modal-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #edf3f0; font-size: 12px; }
.payment-review-modal-row span { color: var(--muted); }
.payment-review-modal-row strong { color: var(--ink); }
#payment-review-modal .payment-review-actions { align-items: stretch; }
#payment-review-modal .payment-review-actions > * { flex: 1; margin-top: 0; }
.payment-reverse-modal-card { max-width: 430px; }
.payment-reverse-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; direction: rtl; }
.payment-reverse-actions > * { width: 100%; min-height: 44px; margin: 0; }
.transactions-list { gap: 6px; }
.transaction-card { padding: 9px 11px; border-radius: 11px; box-shadow: 0 4px 12px rgba(26,75,61,.04); }
.transaction-card-pending-pulse {
    border: 1.5px solid rgba(234, 133, 25, .92);
    animation: pending-transaction-pulse 1.7s ease-in-out infinite;
}
@keyframes pending-transaction-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(26,75,61,.06); background: #fffaf0; }
    50% { box-shadow: 0 7px 24px rgba(235,133,25,.44), 0 0 0 3px rgba(246,177,77,.18); background: #fff0d9; }
}
@media (prefers-reduced-motion: reduce) {
    .transaction-card-pending-pulse { animation: none; }
}
.transaction-card-row { margin-top: 5px; font-size: 9px; }
.transaction-card-head strong { font-size: 11px; }
.transaction-card-head span { font-size: 9px; }
.transaction-recorded-by-manager { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 3px 3px; border-radius: 5px; color: #244e9b; background: #9555f14c; font-size: 9px; font-weight: 700; }
.transaction-recorded-by-manager img { width: 18px; height: 18px; object-fit: contain; }
.management-transaction-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}
.transaction-right-col {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    text-align: right;
}
.transaction-right-col .transaction-amount-display { align-self: flex-start; }
.transaction-left-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* باکسها چپچین شوند */
    gap: 2px;
    margin-left: 0;
    margin-right : 8px;
    margin-right:unset; /* کل ستون به دیواره چپ بچسبد */
}
.transaction-status-badge,
.transaction-recorded-by-manager {
    width: 92px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #00085c5b; /* حاشیه نازک ۱ پیکسلی */
    box-sizing: border-box;
}
.transaction-status-badge,
.transaction-recorded-by-manager {
    font-size: 9px; /* هر دو یک اندازه */
    line-height: 1.6; /* اختیاری برای همترازی ارتفاع خط */
}
.transaction-status-badge,
.transaction-recorded-by-manager {
    height: 28px; /* ارتفاع یکسان هر دو باکس */
    min-height: 28px;
    max-height: 28px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 0 2px;
    box-sizing: border-box;
    border-radius: 6px; /* گردی گوشه یکسان */
}
.management-transaction-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto; /* معادل margin-left:auto در RTL، چسبیده به چپ */
    flex-shrink: 0; /* بج‌ها فشرده نشوند */
    white-space: nowrap;
}
.management-transaction-info {
    min-width: 0;               /* متن راست بتواند ellipsis بگیرد */
}
.management-transaction-row small { font-size: 9px; line-height: 1.6; }
.management-overview-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 8px !important; width: 100%; }
.management-info-label-column, .management-info-value-column { width: 100%; box-sizing: border-box; }
.management-info-label-column span { justify-content: flex-start; }
.management-info-value-column strong { justify-content: flex-end; }
.more-view { padding-bottom: 12px;}
.more-view.feature-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: var(--surface);
    box-shadow: none;
}
body:has(.more-view.feature-overlay) { overflow: hidden; }
.more-view.feature-overlay > .members-title-row,
.more-view.feature-overlay > .more-profile-card,
.more-view.feature-overlay > .more-menu-list {display: none;}

/* A sidebar feature is its own workspace.  In particular, never let the
   first-fund onboarding card be reintroduced by a background refresh. */
.more-subpanel { margin-top: 16px; padding: 16px; border: 1px solid #d8ebe3; border-radius: 20px; background: var(--green-soft); }
.more-subpanel .section-heading { margin-top: 0; }
.more-subpanel .form-label { margin-top: 12px; }
.more-subpanel .primary-button { margin-top: 14px; }
.profile-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 4px; padding: 4px; border-radius: 14px; background: #e8f3ef; }
.profile-tab { padding: 9px 5px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: 10px; }
.profile-tab.active { color: var(--green-dark); background: #fff; box-shadow: 0 4px 12px rgba(26,75,61,.08); font-weight: bold; }
.profile-tab-panel.hidden { display: none; }
.profile-copy-status { min-height: 20px; margin: 10px 0 0; color: var(--green-dark); font-size: 12px; font-weight: bold; }
.delete-warning-box { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; padding: 13px; border: 1px solid #f2d6ce; border-radius: 16px; color: #754337; background: #fff6f2; font-size: 12px; line-height: 1.9; }
.delete-warning-box p { margin: 0; }
.delete-warning-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #b75d45; font-weight: bold; }
.modal-danger { width: auto; margin: 0; padding-inline: 18px; }
.subpage-back { display: inline-flex; align-items: center; width: auto; margin: 0 0 8px; padding: 5px 8px; border-radius: 10px; color: var(--green-dark); background: var(--green-soft); font-size: 11px; }
.profile-password-block { margin-top: 22px; padding-top: 16px; border-top: 1px solid #cfe4dc; }
.profile-password-block h3, .profile-password-block small { display: block; }
.profile-password-block h3 { margin: 0; color: var(--green-dark); font-size: 15px; }
.profile-password-icon { display: block; width: 58px; height: 58px; margin: 0 auto 10px; object-fit: contain; }
.profile-password-block small { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.profile-password-block .form-input { margin-top: 9px; }
.profile-password-block .password-input-row { position: relative; margin-top: 9px; }
.profile-password-block .password-input-row .form-input { margin-top: 0; direction: ltr; text-align: center; font-size: 24px; }
.profile-password-block .password-input-row .form-input::placeholder { font-size: 14px; }
.password-login-switch,
.password-login-switch input,
.password-login-switch-track { outline: none; -webkit-tap-highlight-color: transparent; }
.password-login-switch { position: relative; display: inline-flex; width: 54px; height: 30px; margin-top: 14px; cursor: pointer; user-select: none; }
.password-login-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; appearance: none; -webkit-appearance: none; }
.password-login-switch-track { display: block; width: 100%; height: 100%; border-radius: 999px; background: #c8d5d0; transition: background .2s ease; }
.password-login-switch-thumb { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(23, 77, 63, .22); transition: transform .2s ease; }
.password-login-switch input:checked + .password-login-switch-track { background: var(--green); }
.password-login-switch input:checked + .password-login-switch-track .password-login-switch-thumb { transform: translateX(24px); }
.password-login-switch input:focus + .password-login-switch-track,
.password-login-switch input:focus-visible + .password-login-switch-track,
.password-login-switch input:active + .password-login-switch-track { outline: none !important; box-shadow: none !important; }
.profile-password-block .field-hint { margin: 6px 0 0; }
.profile-password-block.password-login-disabled { opacity: .72; }
.profile-password-block .form-input:disabled { color: #8a9893; background: #f1f5f3; cursor: not-allowed; }

/* Password management page */
.profile-password-block { display: grid; gap: 11px; margin-top: 0; padding-top: 0; border-top: 0; }
.password-hero { display: flex; align-items: center; gap: 12px; padding: 15px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #132d54, #215497 62%, #087a89); box-shadow: 0 13px 26px rgba(20, 47, 87, .18); }
.password-hero-icon { display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; border-radius: 11px; background: rgba(255, 255, 255, .14); }
.password-hero-icon img { width: 36px; height: 36px; object-fit: contain; }
.password-hero span:not(.password-hero-icon) { display: block; color: #bcebf3; font-size: 10px; font-weight: 700; }
.password-hero h3 { margin: 3px 0; color: #fff; font-size: 16px; }
.password-hero p { margin: 0; color: #e4f5f8; font-size: 10px; line-height: 1.75; text-align: justify; text-align-last: right; }
.password-mode-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px; border: 1px solid #dcebe6; border-radius: 12px; background: #fff; box-shadow: 0 7px 16px rgba(20, 65, 74, .06); }
.password-mode-card > div { min-width: 0; }
.password-mode-card strong, .password-mode-card small { display: block; }
.password-mode-card strong { color: #164e58; font-size: 12px; }
.password-mode-card small { margin-top: 3px; color: #74837e; font-size: 10px; line-height: 1.65; }
.password-mode-card .password-login-switch { flex: 0 0 auto; margin: 0; }
.password-mode-hint { margin: -3px 3px 0; color: #687a75; font-size: 10px; line-height: 1.8; text-align: justify; text-align-last: right; }
.password-setup-card { display: grid; gap: 10px; padding: 13px; border: 1px solid #e1ece8; border-radius: 12px; background: #fff; box-shadow: 0 7px 16px rgba(20, 65, 74, .06); }
.password-field-label { display: grid; gap: 6px; color: #245c63; font-size: 11px; font-weight: 700; }
.profile-password-block .password-input-row { margin-top: 0; }
.profile-password-block .password-input-row .form-input { min-height: 46px; border: 1px solid #d7e8e2; border-radius: 10px; color: #174d54; background: #f9fcfb; letter-spacing: 8px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.profile-password-block .password-input-row .form-input:focus { border-color: #219585; background: #fff; box-shadow: 0 0 0 3px rgba(33, 149, 133, .12); }
.profile-password-block .password-input-row .form-input::placeholder { letter-spacing: 0; }
.profile-password-block .form-input:disabled { border-color: #e2ebe7; background: #f3f7f5; }
.password-save-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 2px !important; border-radius: 10px; }
.password-save-button b { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: var(--green-dark); background: rgba(255, 255, 255, .82); font-size: 12px; }
.password-save-button:disabled { color: #98a7a2; background: #dfe8e4; box-shadow: none; }
.password-save-button:disabled b { color: #92a19b; background: #f4f8f6; }
.profile-password-block.password-login-disabled { opacity: 1; }
.profile-password-block.password-login-disabled .password-setup-card { opacity: .7; }
.biometric-mode-card { margin-top: -3px; }
.password-visibility-toggle { position: absolute; top: 50%; left: 10px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; transform: translateY(-50%); color: #27736c; background: transparent; font: inherit; font-size: 18px; cursor: pointer; }
.password-visibility-toggle:focus-visible { outline: 2px solid rgba(33, 149, 133, .35); }
.profile-password-block .password-input-row .form-input { padding-left: 44px; }

.fund-settings-creation-choices { display: grid; gap: 6px; margin: 14px 0; padding: 13px; border: 1px solid #dbece6; border-radius: 13px; background: #f7fbf9; color: #275b55; }
.fund-settings-creation-choices h3 { margin: 0 0 2px; color: var(--green-dark); font-size: 12px; }
.fund-settings-creation-choices p { margin: 0; font-size: 11px; line-height: 1.75; }
#fund-settings-draft-options label { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.7; cursor: pointer; }
#fund-settings-draft-options input[type="checkbox"] { accent-color: var(--green); }
#fund-settings-fee-amount-row { display: grid; gap: 5px; padding: 5px 0 1px; }
#create-fund-confirm-list { gap: 0; padding: 4px 13px; background: linear-gradient(145deg, #f8fcfa, #eff8f4); }
#create-fund-confirm-list p { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed #d4e8df; }
#create-fund-confirm-list p:last-child { border-bottom: 0; }
#create-fund-confirm-list strong { color: #1a6258; font-size: 11px; white-space: nowrap; }
#create-fund-confirm-list span { color: #173f3b; font-size: 12px; font-weight: 700; text-align: left; }
.fund-card-selected-focus { animation: fund-selected-focus 1.2s ease; }
@keyframes fund-selected-focus { 0%, 100% { box-shadow: 0 8px 22px rgba(26, 75, 61, .06); } 45% { box-shadow: 0 0 0 4px rgba(28, 150, 132, .20), 0 12px 28px rgba(26, 75, 61, .17); } }

/* First-login onboarding tour */
.onboarding-tour { position: fixed; inset: 0; z-index: 3000; }
.onboarding-tour.onboarding-tour-drawer-step { z-index: 3002; }
.onboarding-tour.hidden { display: none; }
.onboarding-tour-backdrop { position: absolute; inset: 0; background: rgba(5, 21, 41, .64); }
.onboarding-tour.onboarding-tour-drawer-step .onboarding-tour-backdrop { background: rgba(5, 21, 41, .16); }
.settings-drawer.onboarding-tour-drawer-open { z-index: 3001; }
.onboarding-tour-spotlight { position: fixed; z-index: 1; border: 2px solid #d9fff6; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(5, 21, 41, .18), 0 0 0 5px rgba(36, 169, 156, .34); pointer-events: none; transition: top .24s ease, left .24s ease, width .24s ease, height .24s ease; }
.onboarding-tour-card { position: fixed; z-index: 2; width: min(330px, calc(100vw - 32px)); margin: 0; padding: 16px 16px 14px; border: 1px solid rgba(179, 241, 229, .46); border-radius: 16px; color: #f8fffd; background: linear-gradient(145deg, #103a4d 0%, #0d6970 100%); box-shadow: 0 14px 36px rgba(2, 21, 43, .38); direction: rtl; transition: top .26s ease, left .26s ease; }
.onboarding-tour-card::before { position: absolute; width: 0; height: 0; content: ""; border-style: solid; }
.onboarding-tour-card[data-placement="right"]::before { top: calc(var(--tour-arrow-offset, 28px) - 9px); left: -10px; border-width: 9px 10px 9px 0; border-color: transparent #0f4f61 transparent transparent; }
.onboarding-tour-card[data-placement="left"]::before { top: calc(var(--tour-arrow-offset, 28px) - 9px); right: -10px; border-width: 9px 0 9px 10px; border-color: transparent transparent transparent #0e5d69; }
.onboarding-tour-card[data-placement="bottom"]::before { top: -10px; left: calc(var(--tour-arrow-offset, 28px) - 9px); border-width: 0 9px 10px; border-color: transparent transparent #103a4d; }
.onboarding-tour-card[data-placement="top"]::before { bottom: -10px; left: calc(var(--tour-arrow-offset, 28px) - 9px); border-width: 10px 9px 0; border-color: #0d6970 transparent transparent; }
.onboarding-tour-card[data-placement="center"]::before { display: none; }
.onboarding-tour-skip { position: absolute; top: 9px; left: 9px; padding: 5px 7px; border: 0; border-radius: 8px; color: rgba(244, 255, 252, .8); background: transparent; cursor: pointer; font: inherit; font-size: 11px; }
.onboarding-tour-progress { display: flex; gap: 5px; margin: 0 0 12px; padding-left: 54px; box-sizing: border-box; direction: ltr; }
.onboarding-tour-progress span { display: block; width: 20px; height: 3px; border-radius: 99px; background: rgba(238, 255, 251, .28); transition: background .2s ease, transform .2s ease; }
.onboarding-tour-progress span.active { background: #b5f2d5; transform: scaleY(1.15); }
.onboarding-tour-step { display: inline-flex; margin: 0 0 7px; padding: 4px 8px; border-radius: 99px; color: #d7fff3; background: rgba(214, 255, 241, .13); font-size: 10px; font-weight: 700; }
.onboarding-tour-card h2 { margin: 0; padding-left: 42px; color: #fff; font-size: 16px; line-height: 1.5; }
.onboarding-tour-card > p:not(.onboarding-tour-step) { margin: 8px 0 16px; color: #ddf4f2; font-size: 12px; line-height: 1.9; }
.onboarding-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.onboarding-tour-actions button { min-height: 38px; padding: 8px 15px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.onboarding-tour-back { color: #e6fffa; background: rgba(230, 255, 250, .14); }
.onboarding-tour-back.hidden { visibility: hidden; }
.onboarding-tour-next { min-width: 105px; margin-right: auto; color: #0b3d43; background: #b9f4d8; box-shadow: 0 6px 14px rgba(1, 39, 48, .24); }
body.onboarding-tour-active { overflow: hidden; }

/* User profile page refinements */
.profile-info-page { display: grid; gap: 8px; }
.profile-info-hero { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #17375f, #225999 62%, #0a788b); box-shadow: 0 10px 20px rgba(20, 47, 87, .15); }
.profile-info-hero-icon { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: rgba(255, 255, 255, .14); }
.profile-info-hero-icon img { width: 32px; height: 32px; object-fit: contain; }
.profile-info-hero span:not(.profile-info-hero-icon) { display: block; color: #bcebf3; font-size: 10px; font-weight: 700; }
.profile-info-hero h3 { margin: 2px 0; color: #fff; font-size: 14px; }
.profile-info-hero p { margin: 0; color: #e4f5f8; font-size: 9px; line-height: 1.55; text-align: justify; text-align-last: right; }
.profile-form-card { display: grid; gap: 8px; padding: 10px; border: 1px solid #e1ece8; border-radius: 12px; background: #fff; box-shadow: 0 7px 16px rgba(20, 65, 74, .06); }
.profile-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-fields-grid .form-label { display: grid; gap: 4px; margin: 0; color: #245c63; font-size: 10px; font-weight: 700; }
.profile-fields-grid .profile-mobile-field,
.profile-fields-grid .profile-referrer-field { grid-column: 1 / -1; }
.more-view.feature-overlay .profile-info-page .form-input { min-height: 36px; margin: 0; padding: 7px 9px; border: 1px solid #d7e8e2 !important; border-radius: 9px; color: #174d54; background: #f9fcfb; font-size: 11px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.more-view.feature-overlay .profile-info-page .form-input:focus { border: 1px solid #219585 !important; background: #fff; box-shadow: 0 0 0 3px rgba(33, 149, 133, .12); }
.more-view.feature-overlay .profile-info-page #profile-mobile-number { direction: rtl !important; text-align: center !important; color: #5d716a; background: #f1f6f4; font-family: Tahoma, "Vazirmatn", Arial, sans-serif !important; }
.profile-gender-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid #e0ece8; border-radius: 10px; background: #f9fcfb; }
.profile-gender-card > div:first-child { min-width: 0; }
.profile-gender-card strong, .profile-gender-card small { display: block; }
.profile-gender-card strong { color: #245c63; font-size: 11px; }
.profile-gender-card small { margin-top: 2px; color: #76857f; font-size: 9px; }
.profile-gender-card .gender-mode-switch { width: 136px; flex: 0 0 136px; margin: 0; padding: 3px; }
.profile-gender-card .gender-mode-button { padding: 6px 8px; font-size: 10px; }
.profile-info-page .profile-image-settings { margin-top: 0; padding: 8px; border: 1px solid #e0ece8; border-radius: 10px; background: #f9fcfb; }
.profile-info-page .profile-image-preview { width: 52px; height: 52px; min-width: 52px; min-height: 52px; border-radius: 11px; color: #4d746f; background: #dff1ea; }
.profile-info-page .profile-image-settings strong,
.profile-info-page .profile-image-settings small { display: block; }
.profile-info-page .profile-image-settings strong { color: #245c63; font-size: 11px; }
.profile-info-page .profile-image-settings small { margin-top: 2px; color: #76857f; font-size: 9px; line-height: 1.5; }
.profile-info-page .file-picker-button { min-height: 28px; margin-top: 5px; padding: 5px 9px; border-radius: 8px; }
.gender-mode-button { outline: none; -webkit-tap-highlight-color: transparent; }
.gender-mode-button:focus { outline: none; }
.gender-mode-button:focus-visible { box-shadow: inset 0 0 0 2px rgba(15, 141, 133, .55); }
.profile-info-page #save-profile { align-items: center; justify-content: center; gap: 8px; min-height: 40px; margin-top: 0; border-radius: 10px; }
.profile-save-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; }
.profile-save-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* زیرصفحه‌های بازشده از سایدبار، دکمهٔ بازگشت ساده دارند؛ زمینهٔ آبی فقط به مسیرهای مستقل تعلق دارد. */
.more-view .sidebar-subpage-back { width: 30px; height: 30px; min-height: 30px; padding: 0 !important; border-radius: 0; color: #173d85; background: transparent !important; }
.more-view .sidebar-subpage-back:hover { background: rgba(23, 61, 133, .08) !important; }
.more-view .sidebar-subpage-back img { width: 19px; height: 19px; }

/* سربرگ منوی کشویی */
.settings-panel .settings-panel-head {
    position: relative;
    display: flex;
    justify-content: flex-start;
    min-height: 62px;
    margin-bottom: 0;
}
.drawer-brand-logo { width: 124px; height: 62px; object-fit: contain; object-position: top right; }
.settings-panel .drawer-close {
    position: absolute;
    top: 12px;
    left: 0;
    display: grid;
    place-items: center;
    min-width: 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 0;
    background: transparent;
}
.settings-panel .drawer-close img { width: 23px; height: 23px; object-fit: contain; }
.settings-panel .drawer-user-summary {
    display: grid;
    gap: 12px;
    margin: 0 0 16px;
    padding: 15px;
    border: 1px solid #d8e9e2;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #167d96, #0d5368);
    box-shadow: 0 10px 22px rgba(13, 83, 104, .16);
}
.settings-panel .drawer-user-summary > div:first-of-type { min-width: 0; }
.settings-panel .drawer-user-summary strong,
.settings-panel .drawer-user-summary small { display: block; }
.settings-panel .drawer-user-summary strong { color: #fff; font-size: 15px; }
.settings-panel .drawer-user-summary > div:first-of-type > small { margin-top: 4px; color: rgba(255,255,255,.82); font-size: 12px; direction: ltr; text-align: left; unicode-bidi: plaintext; }
.drawer-inline-mobile { display: inline-block; margin-inline: 4px; color: rgba(255,255,255,.82); font-size: .78em; font-weight: 600; direction: ltr; unicode-bidi: embed; white-space: nowrap; }
.drawer-user-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.drawer-user-details > span { display: grid; gap: 4px; min-width: 0; padding: 8px 9px; border-radius: 10px; background: rgba(255,255,255,.13); }
.drawer-user-details small { color: rgba(255,255,255,.7); font-size: 10px; }
.drawer-user-details b { overflow: hidden; color: #fff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.more-profile-card { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, var(--green), var(--green-dark)); box-shadow: 0 12px 24px rgba(0, 107, 85, .16); }
.more-profile-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 22px; font-weight: bold; }
.more-profile-card strong, .more-profile-card small { display: block; }
.more-profile-card small { margin-top: 5px; color: rgba(255,255,255,.78); font-size: 11px; }
.more-menu-list { display: grid; gap: 10px; margin-top: 16px; }
.more-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 1px solid #edf3f0; border-radius: 20px; color: var(--ink); background: #fff; box-shadow: 0 8px 22px rgba(26, 75, 61, .06); cursor: pointer; text-align: right; }
.more-menu-item > span:nth-child(2) { flex: 1; }
.more-menu-item strong, .more-menu-item small { display: block; }
.more-menu-item small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.more-menu-item > b { color: var(--green); font-size: 20px; }
.more-menu-item .quick-icon { border-radius: 14px; }
.drawer-menu-item { display: flex; align-items: center; gap: 10px; }
.drawer-menu-item > span:nth-child(2) { flex: 1; }
.drawer-menu-item > b {color: var(--green); font-size: 20px; display: inline-flex; align-items: center; justify-content: center; transform: rotate(180deg);}
.drawer-display-settings { padding: 12px 14px; border: 1px solid #dcece6; border-radius: 14px; background: var(--green-soft); }
.drawer-display-settings strong, .drawer-display-settings label { display: block; font-size: 11px; }
.drawer-display-settings label { margin-top: 8px; color: var(--muted); }
.drawer-display-settings input { width: 100%; accent-color: var(--green); }
.feature-content { display: grid; gap: 12px; color: var(--muted); font-size: 12px; line-height: 2; }
.feature-content h3 { margin: 0; color: var(--green-dark); font-size: 15px; }
.feature-content p { margin: 0; }
.feature-list { display: grid; gap: 8px; margin: 0; padding: 0 18px 0 0; color: var(--ink); }
.feature-list li::marker { color: var(--green); }
.guide-intro { padding: 0 2px; }
.guide-accordion { display: grid; gap: 9px; }
.guide-accordion-item { overflow: hidden; border: 1px solid #dcebe6; border-radius: 14px; background: #fff; }
.guide-accordion-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 13px; border: 0; color: var(--green-dark); background: #f5faf8; cursor: pointer; font: inherit; text-align: right; }
.guide-accordion-toggle > span { min-width: 0; }
.guide-accordion-toggle strong, .guide-accordion-toggle small { display: block; }
.guide-accordion-toggle strong { font-size: 13px; }
.guide-accordion-toggle small { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.guide-accordion-toggle > b { flex: 0 0 auto; color: var(--green); font-size: 19px; line-height: 1; transition: transform .2s ease; }
.guide-accordion-toggle[aria-expanded="true"] { background: #eaf7f2; }
.guide-accordion-toggle[aria-expanded="true"] > b { transform: rotate(180deg); }
.guide-accordion-panel { padding: 3px 13px 12px; border-top: 1px solid #e7f0ec; }
.guide-feature-list { display: grid; gap: 8px; margin: 8px 0 0; padding: 0 18px 0 0; color: var(--ink); }
.guide-feature-list li { padding-right: 2px; line-height: 1.9; }
.guide-feature-list li::marker { color: var(--green); }
#more-feature-panel:has(.guide-page) { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#more-feature-panel:has(.guide-page) #more-feature-content { padding: 0; }
#more-feature-panel:has(.guide-page) .section-heading { margin: 0 0 14px; padding: 0 2px; }
.guide-page { display: grid; gap: 14px; padding-bottom: 14px; color: var(--ink); }
.guide-hero { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #142f57, #193f8a 64%, #0b6f8d); box-shadow: 0 14px 28px rgba(20, 47, 87, .2); }
.guide-hero-icon { display: grid; flex: 0 0 50px; place-items: center; width: 50px; height: 50px; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, .15); }
.guide-hero-icon img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
.guide-hero span:not(.guide-hero-icon) { display: block; color: #bde9f4; font-size: 10px; font-weight: 700; }
.guide-hero h3 { margin: 3px 0; color: #fff; font-size: 16px; }
.guide-hero p { margin: 0; color: #e4f4f8; font-size: 10px; line-height: 1.75; text-align: justify; text-align-last: right; }
.guide-page .guide-accordion { gap: 10px; }
.guide-page .guide-accordion-item { border: 0; border-radius: 12px; background: transparent; box-shadow: none; overflow: visible; }
.guide-page .guide-accordion-toggle { display: grid; grid-template-columns: 46px minmax(0, 1fr) 25px; align-items: center; gap: 11px; min-height: 70px; padding: 10px 12px; border: 1px solid #e1ece8; border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 0 7px 16px rgba(20, 65, 74, .07); text-align: right; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease; }
.guide-page .guide-accordion-toggle:hover { transform: translateY(-1px); border-color: #afd6cb; box-shadow: 0 10px 20px rgba(20, 65, 74, .1); }
.guide-page .guide-accordion-toggle[aria-expanded="true"] { border-color: var(--guide-accent, var(--green)); background: var(--guide-soft, #f2fbf8); box-shadow: 0 10px 22px rgba(20, 65, 74, .11); }
.guide-topic-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: transparent; }
.guide-topic-icon img { width: 29px; height: 29px; object-fit: contain; }
.guide-topic-copy { min-width: 0; }
.guide-page .guide-accordion-toggle strong { color: var(--guide-dark, var(--green-dark)); font-size: 13px; }
.guide-page .guide-accordion-toggle small { margin-top: 3px; color: #71807b; font-size: 10px; line-height: 1.6; }
.guide-page .guide-accordion-toggle > b { position: relative; display: grid; justify-self: end; place-items: center; width: 25px; height: 25px; border: 1px solid color-mix(in srgb, var(--guide-accent, var(--green)) 45%, transparent); border-radius: 7px; color: var(--guide-accent, var(--green)); background: transparent; font-size: 0; line-height: 1; transition: transform .26s ease, color .22s ease, background .22s ease, border-color .22s ease; }
.guide-page .guide-accordion-toggle > b::before { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; content: ""; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.guide-page .guide-accordion-toggle[aria-expanded="true"] > b { color: #fff; border-color: var(--guide-accent, var(--green)); background: var(--guide-accent, var(--green)); }
.guide-page .guide-accordion-panel { margin: -4px 8px 0; padding: 10px 13px 13px; border: 1px solid #e5efec; border-top: 0; border-radius: 0 0 12px 12px; background: #fff; }
.guide-page .guide-feature-list { gap: 9px; margin: 0; padding-right: 18px; }
.guide-page .guide-feature-list li { padding-right: 2px; color: #40514d; font-size: 11px; line-height: 1.9; text-align: justify; text-align-last: right; }
.guide-page .guide-feature-list li strong { color: var(--guide-dark, var(--green-dark)); }
.platform-terms-page { --guide-accent: #21589a; --guide-dark: #173d72; --guide-soft: #edf5ff; }
.platform-terms-document { display:grid; gap:11px; padding:15px; border:1px solid #dce8ed; border-radius:14px; color:#3d504b; background:#fff; box-shadow:0 8px 20px rgba(20,65,74,.07); }
.platform-terms-document h2 { margin:5px 0 0; color:#173d72; font-size:13px; line-height:1.9; }
.platform-terms-document .platform-terms-section-title { display:flex; align-items:center; min-height:40px; margin:7px 0 0; padding:9px 13px; border:1px solid #d7e6f2; border-right:4px solid #2c72b4; border-radius:12px; color:#173d72; background:linear-gradient(135deg,#f7fbff,#edf5ff); box-shadow:0 5px 14px rgba(24,69,114,.08); font-size:11px; font-weight:800; line-height:1.8; }
.platform-terms-document p { margin:0; font-size:10.5px; line-height:2.05; text-align:justify; text-align-last:right; }
.platform-terms-document li { margin-right:20px; color:#3d504b; font-size:10.5px; line-height:2; text-align:justify; text-align-last:right; }
.platform-terms-modal { position:fixed; z-index:3100; inset:0; display:grid; place-items:center; padding:16px; background:rgba(20,47,87,.58); backdrop-filter:blur(7px); }
.platform-terms-modal-card { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto auto; gap:11px; width:min(860px,100%); max-height:min(750px,calc(100dvh - 32px)); overflow:hidden; border:1px solid rgba(255,255,255,.58); border-radius:20px; background:#f7fbfc; box-shadow:0 26px 68px rgba(20,47,87,.32); }
.platform-terms-modal-head { display:flex; align-items:center; gap:11px; min-width:0; padding:16px 17px; color:#fff; background:linear-gradient(135deg,#142f57,#193f8a 64%,#0b6f8d); box-shadow:0 8px 18px rgba(20,47,87,.15); }.platform-terms-modal-head > span { display:grid; place-items:center; flex:0 0 43px; width:43px; height:43px; border-radius:11px; color:#fff; background:rgba(255,255,255,.15); font-size:15px; font-weight:900; }.platform-terms-modal-head h2 { flex:1; margin:0; color:#fff; font-size:16px; }.platform-terms-modal-head small { color:#bde9f4; font-size:10px; font-weight:700; white-space:nowrap; }
.platform-terms-modal-note,.platform-terms-modal-message { min-height:18px; margin:0 17px; color:#71807b; font-size:10px; line-height:1.85; }.platform-terms-modal-note { margin-top:2px; }.platform-terms-modal-message { color:#a65d20; }
.platform-terms-scroll { overflow:auto; min-height:220px; margin:0 10px; padding:13px 14px; border:1px solid #e1ece8; border-radius:14px; background:#fff; box-shadow:inset 0 1px 2px rgba(20,65,74,.03); overscroll-behavior:contain; }
.platform-terms-scroll .platform-terms-document { gap:10px; padding:0; border:0; border-radius:0; box-shadow:none; }
.platform-terms-scroll .platform-terms-document h2,.platform-terms-scroll .platform-terms-document h4 { color:#193f8a; }
.platform-terms-scroll .platform-terms-document p,.platform-terms-scroll .platform-terms-document li { color:#40514d; }
.platform-terms-scroll > .platform-terms-section-title { display:flex; align-items:center; min-height:42px; margin:9px 0 7px; padding:9px 12px; border:1px solid #cfe1f0; border-right:4px solid #2d76b8; border-radius:12px; color:#173d72; background:linear-gradient(135deg,#f8fcff,#e8f3ff); box-shadow:0 5px 13px rgba(29,78,125,.10); font-size:14px; font-weight:800; line-height:1.75; }
.platform-terms-scroll > p { margin:0 2px 8px; color:#40514d; font-size:13px; line-height:2.05; text-align:justify; text-align-last:right; }
.platform-terms-scroll > li { margin:0 18px 7px 0; padding-right:3px; color:#40514d; font-size:13px; line-height:2.05; text-align:justify; text-align-last:right; }
.platform-terms-modal-actions { display:flex; justify-content:flex-end; gap:9px; padding:0 17px 17px; }.platform-terms-modal-actions button { min-width:124px; min-height:41px; border-radius:12px; }.platform-terms-modal-actions .primary-button { border:0; background:linear-gradient(135deg,#173862,#21589a 64%,#0b788b); box-shadow:0 8px 17px rgba(20,72,123,.2); }.platform-terms-modal-actions .outline-button { border-color:#c9dce3; color:#173d72; background:#fff; }.platform-terms-modal-actions .primary-button:disabled { cursor:not-allowed; opacity:.58; box-shadow:none; }
.public-terms-shell { display:grid; gap:14px; width:min(860px,calc(100% - 30px)); margin:28px auto; }.public-terms-hero h1 { margin:3px 0; color:#fff; font-size:19px; }.public-terms-document { padding:20px; }.rules-page { min-height:100vh; background:linear-gradient(145deg,#eff7fb,#f7fcfa); }
@media (max-width:560px) { .platform-terms-modal-card { max-height:calc(100dvh - 18px); padding:13px; border-radius:15px; }.platform-terms-modal-head { flex-wrap:wrap; }.platform-terms-modal-head h2 { font-size:14px; }.platform-terms-scroll { margin:0 6px; padding:12px 11px; }.platform-terms-scroll > .platform-terms-section-title { margin-top:7px; padding:8px 10px; font-size:13px; }.platform-terms-scroll > p,.platform-terms-scroll > li { font-size:12px; line-height:2; }.platform-terms-modal-actions { flex-direction:column-reverse; }.platform-terms-modal-actions button { width:100%; }.public-terms-shell { width:min(100% - 20px,860px); margin:10px auto; }.public-terms-document { padding:14px; } }
.guide-topic-funds { --guide-accent: #1e8b72; --guide-dark: #176653; --guide-soft: #e8f7f1; }
.guide-topic-transactions { --guide-accent: #2877bb; --guide-dark: #1b5f99; --guide-soft: #eaf4ff; }
.guide-topic-subscription { --guide-accent: #b27916; --guide-dark: #80550b; --guide-soft: #fff7e4; }
.guide-topic-messages { --guide-accent: #7a57a5; --guide-dark: #583c7b; --guide-soft: #f3edfb; }
.guide-topic-reports { --guide-accent: #168399; --guide-dark: #126274; --guide-soft: #e8f7fa; }
#more-feature-panel:has(.faq-page) { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#more-feature-panel:has(.faq-page) #more-feature-content { padding: 0; }
#more-feature-panel:has(.faq-page) .section-heading { margin: 0 0 14px; padding: 0 2px; }
.faq-page { display: grid; gap: 12px; padding-bottom: 14px; color: var(--ink); }
.faq-hero { display: flex; align-items: center; gap: 12px; padding: 15px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #173862, #21589a 64%, #0b788b); box-shadow: 0 14px 28px rgba(20, 47, 87, .18); }
.faq-hero-icon { display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, .14); }
.faq-hero-icon img { width: 38px; height: 38px; border-radius: inherit; object-fit: contain; }
.faq-hero span:not(.faq-hero-icon) { display: block; color: #bde9f4; font-size: 10px; font-weight: 700; }
.faq-hero h3 { margin: 3px 0; color: #fff; font-size: 16px; }
.faq-hero p { margin: 0; color: #e4f4f8; font-size: 10px; line-height: 1.75; text-align: justify; text-align-last: right; }
.faq-list { display: grid; gap: 9px; }
.faq-item { padding: 12px 13px; border: 1px solid #e1ece8; border-radius: 12px; background: #fff; box-shadow: 0 7px 16px rgba(20, 65, 74, .07); }
.faq-item h3 { margin: 0 0 5px; color: #1b5f78; font-size: 12px; line-height: 1.7; }
.faq-item p { margin: 0; color: #52635e; font-size: 11px; line-height: 1.9; text-align: justify; text-align-last: right; }
.feature-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 15px; background: #fff; border: 1px solid #e2eee9; }
.feature-card-row strong { color: var(--ink); font-size: 12px; }
.feature-card-row small { color: var(--muted); font-size: 10px; }
.rating-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; direction: ltr; }
.rating-button { border: 1px solid #d8ebe3; border-radius: 12px; padding: 9px 4px; color: var(--green-dark); background: #fff; cursor: pointer; }
.rating-button:hover, .rating-button.selected { color: #fff; background: var(--green); border-color: var(--green); }
.more-menu-item.danger { border-color: #f0d8d1; }
.more-menu-item.danger .quick-icon { color: #9a3d28; background: #fff0eb; }
.more-menu-item.danger > b { color: #9a3d28; }
.cycle-management-panel { margin: 0 0 16px; padding: 16px; border: 1px solid #d8ebe3; border-radius: 20px; background: var(--green-soft); }
.cycle-management-panel .section-heading { margin: 0 0 8px; }
.cycle-management-panel .section-heading h2 { font-size: 14px; }
.cycle-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cycle-form-grid > div:last-child { grid-column: 1 / -1; }
.cycle-form-grid .form-label { margin-top: 10px; font-size: 11px; }
.cycle-form-grid .form-input, .cycle-form-grid .form-select { padding: 10px 34px 10px 10px; font-size: 12px; }
.cycle-management-panel .primary-button { margin-top: 14px; }
.cycle-management-list { display: grid; gap: 8px; margin-top: 12px; }
.cycle-management-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px; border: 1px solid #e2eee9; border-radius: 14px; background: #fff; }
.cycle-management-card strong, .cycle-management-card small { display: block; }
.cycle-management-card strong { color: var(--green-dark); font-size: 13px; }
.cycle-management-card small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.cycle-management-entry { display: block; width: 100%; margin: 12px 0; }
.jalali-datetime-input { cursor: pointer; }
.jalali-picker-backdrop { position: fixed; z-index: 3300; inset: 0; background: rgba(23, 34, 31, .25); }
.jalali-picker { position: fixed; z-index: 3301; top: 50%; left: 50%; width: min(calc(100% - 34px), 330px); padding: 16px; transform: translate(-50%, -50%); border: 1px solid #d9e8e2; border-radius: 22px; background: #fff; box-shadow: 0 20px 45px rgba(23, 34, 31, .22); }
.jalali-picker-head { display: flex; align-items: center; justify-content: space-between; color: var(--green-dark); }
.jalali-picker-head button { width: 34px; height: 34px; border: 0; border-radius: 10px; color: var(--green); background: var(--green-soft); cursor: pointer; font-size: 22px; }
.jalali-weekdays, .jalali-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 14px; text-align: center; }
.jalali-weekdays { color: var(--muted); font-size: 11px; }
.jalali-days button, .jalali-days span { min-height: 32px; }
.jalali-days button { border: 0; border-radius: 9px; color: var(--ink); background: #f7fbf9; cursor: pointer; font: inherit; font-size: 12px; }
.jalali-days button:hover, .jalali-days button.selected { color: #fff; background: var(--green); }
.jalali-time-label { display: block; margin: 14px 2px 6px; color: var(--muted); font-size: 11px; }
.jalali-picker .form-input { padding: 10px; direction: ltr; }
.jalali-picker .primary-button { margin-top: 12px; }
.help-modal { position: fixed; z-index: 40; inset: 0; }
.help-modal-backdrop { position: absolute; inset: 0; background: rgba(23, 34, 31, .32); }
.help-modal-card { position: absolute; top: 50%; left: 50%; width: min(calc(100% - 42px), 350px); padding: 24px 20px 20px; transform: translate(-50%, -50%); border: 1px solid #e2eee9; border-radius: 24px; background: #fff; box-shadow: 0 22px 48px rgba(23, 34, 31, .22); text-align: center; }
.help-modal-close { position: absolute; top: 10px; left: 12px; width: 32px; height: 32px; border: 0; border-radius: 10px; color: var(--muted); background: #eef6f2; cursor: pointer; font-size: 22px; line-height: 1; }
.help-modal-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; color: var(--green); background: var(--green-soft); font-size: 24px; font-weight: bold; }
.help-modal-card h2 { margin: 0; color: var(--green-dark); font-size: 14px; }
.help-modal-card p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 2; }
.loans-view { padding-bottom: 12px; }

@keyframes winner-disbursement-attention {
    0%, 100% { box-shadow: 0 0 0 0 rgba(227, 158, 59, 0); background-color: transparent; }
    50% { box-shadow: 0 0 0 5px rgba(227, 158, 59, .16); background-color: #fff9ec; }
}

.winner-disbursement-attention {
    border-color: #e3a13b !important;
    animation: winner-disbursement-attention 1.9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .winner-disbursement-attention { animation: none; background-color: #fff9ec; }
}
.loans-list { display: grid; gap: 14px; }
.loan-card { padding: 20px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, var(--green), var(--green-dark)); box-shadow: 0 14px 28px rgba(0, 107, 85, .2); }
.loan-card-head, .loan-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.loan-card-head { color: #d2efe5; font-size: 13px; }
.loan-card-amount { display: block; margin: 18px 0; font-size: 28px; }
.loan-card-row { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); color: #e8faf4; font-size: 12px; }
.loan-status { display: inline-block; padding: 5px 9px; border-radius: 14px; background: rgba(255,255,255,.16); color: #fff; font-size: 11px; }
.loan-actions { display: flex; gap: 8px; margin-top: 14px; }
.loan-action-button { flex: 1; padding: 9px 10px; border: 0; border-radius: 12px; color: var(--green-dark); background: #fff; cursor: pointer; font-size: 11px; font-weight: bold; }
.loan-action-button.secondary { color: #fff; border: 1px solid rgba(255,255,255,.45); background: transparent; }
.loan-empty { padding: 28px 12px; text-align: center; color: var(--muted); }
.reports-view { padding-bottom: 12px; }
.report-summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.report-stat-card, .report-card {
    padding: 16px; border: 1px solid #edf3f0; border-radius: 20px; background: #fff;
    box-shadow: 0 8px 22px rgba(26, 75, 61, .06);
}
.report-stat-card span, .report-stat-card small { display: block; color: var(--muted); font-size: 11px; }
.report-stat-card strong { display: block; margin-top: 7px; color: var(--green); font-size: 22px; }
.report-card { margin-top: 14px; }
.report-card .section-heading { margin: 0 0 14px; }
.cycle-bars { display: grid; gap: 12px; }
.cycle-bar-row { display: grid; grid-template-columns: 88px 1fr 28px; gap: 8px; align-items: center; font-size: 11px; }
.cycle-bar-track { height: 9px; overflow: hidden; border-radius: 10px; background: #e4f1ec; }
.cycle-bar-fill { height: 100%; border-radius: 10px; background: var(--green); }
.report-loan-list { display: grid; gap: 10px; }
.report-loan-item {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e5efea;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(26, 75, 61, .05);
    font-size: 12px;
}
.report-loan-transaction-top {
    display: grid;
    grid-template-columns: 1.35fr 1fr auto;
    gap: 10px;
    align-items: center;
    color: var(--muted);
}
.report-loan-transaction-top strong,
.report-loan-item.loan-debit-item strong { color: #cf3b31; }
.report-loan-transaction-top > span { white-space: nowrap; }
.report-loan-winner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-top: 10px;
    border-top: 1px solid #eef4f1;
    color: var(--muted);
    text-align: center;
}
.report-loan-winner img { width: 25px; height: 25px; object-fit: contain; }
.report-loan-winner b { color: var(--ink); font-size: 15px; font-weight: 700; }
.report-loan-transaction-meta {
    display: grid;
    grid-template-columns: minmax(72px, .7fr) minmax(0, 1.5fr);
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #eef4f1;
}
.report-loan-transaction-meta > span { display: grid; gap: 3px; min-width: 0; }
.report-loan-transaction-meta small { color: var(--muted); white-space: nowrap; }
.report-loan-transaction-meta b {
    color: var(--ink);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.report-loan-account { text-align: left; }
.report-loan-account b {
    overflow: visible;
    font-size: clamp(8px, 2.7vw, 11px);
    letter-spacing: -.03em;
    text-overflow: clip;
}
.report-loan-tracking { justify-items: center; text-align: center; }
@media (max-width: 420px) {
    .report-loan-item { gap: 10px; padding: 12px; }
    .report-loan-transaction-top {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
        gap: 5px;
        font-size: 10px;
    }
    .report-loan-transaction-top strong {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .report-loan-transaction-meta {
        grid-template-columns: minmax(68px, .7fr) minmax(0, 1.5fr);
        gap: 6px;
        padding-top: 8px;
    }
    .report-loan-transaction-meta > span { gap: 2px; }
    .report-loan-transaction-meta small,
    .report-loan-transaction-meta b { font-size: 9px; }
}
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0 28px; }
.quick-card, .event-card, .progress-card {
    border: 1px solid #edf3f0; background: var(--surface); border-radius: 22px;
    box-shadow: 0 8px 22px rgba(26, 75, 61, .06);
}
.quick-card {
    display: flex; align-items: center; gap: 12px; padding: 18px 14px;
    color: var(--ink); cursor: pointer; text-align: right;
}
.quick-card:hover { border-color: #a5d8c7; transform: translateY(-1px); }
.quick-icon, .event-icon {
    display: grid; place-items: center; flex: 0 0 42px; height: 42px;
    border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 21px;
}
.section-heading { justify-content: space-between; margin: 20px 2px 12px; }
.section-heading h2 { margin: 0; font-size: 14px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a274; }
.progress-card { gap: 18px; padding: 18px; }
.progress-card h3 { margin: 0 0 4px; }
.progress-card p, .event-card small { color: var(--muted); margin: 0; font-size: 12px; }
.progress-ring {
    --size: 86px; width: var(--size); height: var(--size); border-radius: 50%;
    display: grid; place-items: center; position: relative; color: var(--green); font-weight: bold;
    background: conic-gradient(var(--green) calc(var(--progress) * 1%), #d8eee6 0);
}
.progress-ring::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.progress-ring span { z-index: 1; }
.link-button { font-size: 12px; }
.event-list { display: grid; gap: 10px; }
.event-card { gap: 12px; padding: 14px; }
.event-card div:nth-child(2) { flex: 1; }
.event-card strong, .event-card small { display: block; }
.event-card b { font-size: 12px; }
.success-text { color: var(--green); }
.bottom-nav {
    position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
    width: min(calc(100% - 28px), 450px); display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 10px; border: 1px solid #e4eeea; border-radius: 24px; background: rgba(255,255,255,.94);
    box-shadow: 0 12px 30px rgba(23, 77, 63, .15); backdrop-filter: blur(12px);
}

/* تمام‌عرض، بدون گردی و چسبیده به لبه پایین نمایشگر */
.bottom-nav {
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    transform: none;
    border-radius: 0;
    margin: 0;
    padding-bottom: 4px;
}
.bottom-nav-shape { border-radius: 0; }
@media (max-width: 350px) {
    .bottom-nav { width: 100%; }
}
.bottom-nav button {
    border: 0; background: transparent; color: #193f8a; cursor: pointer; padding: 7px 4px; font-size: 11px;
}
.bottom-nav button span { display: block; font-size: 11px; line-height: 1.3; margin-top: 4px; }
.bottom-nav .nav-icon { display: block; width: 27px; height: 27px; margin: 0 auto; object-fit: contain; border-radius: 0px; opacity: .65; }
.bottom-nav button.active .nav-icon { opacity: 1; transform: scale(1.08); }
.bottom-nav button.active { color: #193f8a; font-weight: bold; background: var(--green-soft); border-radius: 10px; }
.app-toast { position: fixed; left: 50%; bottom: 92px; z-index: 1500; max-width: min(88vw, 360px); padding: 10px 16px; border: 1px solid #cfe5dc; border-radius: 14px; color: #fff; background: var(--green-dark, #006b59); box-shadow: 0 10px 28px rgba(23, 77, 63, .2); text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 18px) scale(.985); transition: opacity .52s cubic-bezier(.22, 1, .36, 1), transform .58s cubic-bezier(.22, 1, .36, 1); will-change: opacity, transform; font-size: 12px; }
.app-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.app-toast.top-notification {
    top: max(14px, env(safe-area-inset-top));
    bottom: auto;
    min-width: min(82vw, 310px);
    border-color: rgba(255, 255, 255, .42);
    border-radius: 0 0 16px 16px;
    background: linear-gradient(135deg, #173d85, #0b728f);
    box-shadow: 0 12px 30px rgba(12, 64, 111, .28);
    transform: translate(-50%, -24px) scale(.985);
}
.app-toast.top-notification.visible { transform: translate(-50%, 0); }
.app-modal { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 20px; background: rgba(23,34,31,.28); backdrop-filter: blur(3px); }
.app-modal.hidden { display: none; }
.app-modal-card { width: min(100%, 360px); padding: 22px 18px 16px; border: 1px solid #dcece6; border-radius: 24px; background: #fff; box-shadow: 0 22px 48px rgba(23,34,31,.2); text-align: center; }
.app-message-dismiss { position: absolute; top: 10px; left: 10px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; color: #4d6878; background: rgba(255,255,255,.72); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.app-message-dismiss.hidden { display: none; }
.app-modal-card h2 { margin: 0; color: var(--green-dark); font-size: 15px; }
.app-modal-card p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.app-message-actions { display: flex; gap: 10px; width: 100%; margin-top: 16px; }
.app-message-actions button { flex: 1 1 0; min-width: 0; min-height: 42px; margin-top: 0; }
.app-modal.app-modal-starting-suggestion { background: rgba(8, 31, 60, .42); backdrop-filter: blur(7px); }
.app-modal-starting-suggestion .app-modal-card { position: relative; overflow: hidden; padding: 24px 20px 18px; border-color: rgba(104, 183, 194, .48); border-radius: 22px; background: radial-gradient(circle at 12% 0%, rgba(76, 187, 198, .18), transparent 36%), linear-gradient(145deg, #fff, #f1fafb); box-shadow: 0 24px 60px rgba(5, 29, 58, .32); }
.app-modal-starting-suggestion .app-modal-card::before { position: absolute; top: 0; right: 0; left: 0; height: 5px; content: ""; background: linear-gradient(90deg, #087c94, #1a3f86 55%, #7d2038); }
.app-modal-starting-suggestion .app-modal-card h2 { color: #173d72; font-size: 16px; }
.app-modal-starting-suggestion .app-modal-card p { color: #496575; font-size: 12px; }
.app-modal-starting-suggestion .app-message-dismiss { border: 1px solid rgba(123, 159, 171, .38); box-shadow: 0 3px 10px rgba(24, 66, 94, .12); }
.app-modal-starting-suggestion .app-message-actions { gap: 8px; margin-top: 18px; }
.app-modal-starting-suggestion #app-message-cancel { flex: 0 0 78px; padding-right: 7px; padding-left: 7px; border-color: #c9d9df; color: #4d6878; background: rgba(255,255,255,.74); }
.app-modal-starting-suggestion #app-message-close { flex: 1 1 auto; padding-right: 12px; padding-left: 12px; border: 0; color: #fff; background: linear-gradient(135deg, #17407e, #087c94); box-shadow: 0 8px 17px rgba(19, 72, 123, .22); white-space: nowrap; }
.account-deletion-modal { position: fixed; z-index: 1450; inset: 0; display: grid; place-items: center; padding: 20px; direction: rtl; }
.account-deletion-modal.hidden { display: none; }
.account-deletion-backdrop { position: absolute; inset: 0; background: rgba(33, 20, 25, .56); backdrop-filter: blur(8px); animation: account-deletion-fade-in .22s ease-out; }
.account-deletion-card { position: relative; width: min(100%, 380px); overflow: hidden; padding: 29px 22px 20px; border: 1px solid rgba(255,255,255,.5); border-radius: 28px; background: radial-gradient(circle at 88% 2%, rgba(255, 189, 185, .65), transparent 34%), linear-gradient(145deg, #fff, #fff7f5); box-shadow: 0 28px 70px rgba(31, 15, 20, .42); text-align: center; animation: account-deletion-rise-in .28s cubic-bezier(.2,.8,.2,1); }
.account-deletion-card::before { position: absolute; inset: 0 0 auto; height: 5px; content: ""; background: linear-gradient(90deg, #a72e3a, #e05e55, #f8b07b); }
.account-deletion-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 10px; border: 7px solid #fff; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #b6313d, #e1655b); box-shadow: 0 10px 23px rgba(173, 45, 58, .25); font-family: Georgia, serif; font-size: 31px; font-weight: 800; line-height: 1; }
.account-deletion-eyebrow { margin: 0; color: #a34a49; font-size: 11px; font-weight: 750; letter-spacing: .02em; }
.account-deletion-card h2 { margin: 5px 0 0; color: #5a2028; font-size: 20px; }
.account-deletion-copy { margin: 10px auto 0; color: #6d5b5e; font-size: 12px; line-height: 2; }
.account-deletion-countdown { --account-deletion-progress: 0%; display: grid; place-content: center; width: 82px; height: 82px; margin: 18px auto 7px; border-radius: 50%; background: radial-gradient(circle, #fff 61%, transparent 62%), conic-gradient(#c4474c var(--account-deletion-progress), #f4d8d5 0); box-shadow: inset 0 0 0 1px rgba(182, 70, 75, .1); }
.account-deletion-countdown strong { color: #9d333b; font-size: 27px; line-height: 1; }
.account-deletion-countdown-label { display: block; min-height: 13px; margin: 0 auto 16px; color: #8d6d70; font-size: 10px; font-weight: 650; line-height: 1.35; }
.account-deletion-actions { display: flex; gap: 9px; }
.account-deletion-actions button { flex: 1 1 0; min-height: 44px; margin: 0; }
.account-deletion-confirm { border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #a82d39, #d95751); box-shadow: 0 9px 17px rgba(164, 45, 56, .2); font: inherit; font-weight: 700; cursor: pointer; transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease; }
.account-deletion-confirm:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(164, 45, 56, .28); }
.account-deletion-confirm:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
#fund-delete-modal.fund-delete-permanent { z-index: 1450; place-items: center; }
#fund-delete-modal.fund-delete-permanent .selection-modal-backdrop { background: rgba(33, 20, 25, .56); backdrop-filter: blur(8px); animation: account-deletion-fade-in .22s ease-out; }
#fund-delete-modal.fund-delete-permanent .selection-modal-card { width: min(100%, 380px); max-height: min(88vh, 620px); overflow: hidden; padding: 29px 22px 20px; border-color: rgba(255,255,255,.5); border-radius: 28px; background: radial-gradient(circle at 88% 2%, rgba(255, 189, 185, .65), transparent 34%), linear-gradient(145deg, #fff, #fff7f5); box-shadow: 0 28px 70px rgba(31, 15, 20, .42); text-align: center; animation: account-deletion-rise-in .28s cubic-bezier(.2,.8,.2,1); }
#fund-delete-modal.fund-delete-permanent .selection-modal-card::before { position: absolute; inset: 0 0 auto; height: 5px; content: ""; background: linear-gradient(90deg, #a72e3a, #e05e55, #f8b07b); }
#fund-delete-modal.fund-delete-permanent .selection-modal-header { display: block; text-align: center; }
#fund-delete-modal.fund-delete-permanent .selection-modal-header .icon-button { display: none; }
#fund-delete-modal.fund-delete-permanent .selection-modal-header .eyebrow { margin: 0; color: #a34a49; font-size: 11px; font-weight: 750; letter-spacing: .02em; }
#fund-delete-modal.fund-delete-permanent .selection-modal-header h3 { margin: 5px 0 0; color: #5a2028; font-size: 20px; }
#fund-delete-modal.fund-delete-permanent .delete-warning-box { display: block; margin: 10px auto 0; padding: 0; border: 0; border-radius: 0; color: #6d5b5e; background: transparent; font-size: 12px; line-height: 2; }
#fund-delete-modal.fund-delete-permanent .delete-warning-icon { display: none; }
#fund-delete-modal.fund-delete-permanent .delete-warning-box p { margin: 0; }
#fund-delete-modal.fund-delete-permanent .management-modal-actions { margin-top: 0; }
@keyframes account-deletion-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes account-deletion-rise-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.transaction-card.transaction-card-prior-membership { border-color: #c5b8a4; background: linear-gradient(145deg, #fffdf8, #f7f2e8); opacity: .88; }
.bank-logo-bluebank { color: #fff; background: linear-gradient(135deg, #1769ff, #27b6ff); font-weight: 800; }
.drawer-menu-list { display: grid; gap: 8px; margin: 18px 0; }
.drawer-menu-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; border: 1px solid #dcece6; border-radius: 14px; color: var(--ink); background: #fff; font: inherit; cursor: pointer; text-align: right; }
.drawer-menu-item .drawer-menu-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; color: var(--green-dark); background: var(--green-soft); font-size: 12px; }
.drawer-menu-item > span:nth-child(2) { flex: 1; color: var(--ink); font-size: 12px; }
.drawer-menu-item-danger { border-color: #f0d8d1 !important; color: #9a3d28 !important; background: #fff9f7 !important; }
.drawer-menu-item-danger .drawer-menu-icon { color: #9a3d28 !important; background: #fdeee9 !important; }
.drawer-menu-item-danger > span:nth-child(2), .drawer-menu-item-danger > b { color: #9a3d28 !important; }
.drawer-menu-item .drawer-menu-icon-delete-account img { display: block; width: 100%; height: 100%; object-fit: contain; }
.messages-view { padding-bottom: 12px; }
.messages-view .members-title-row > div:first-child { display: none; }
.messages-header-tools {display: flex; align-items: center;justify-content: space-between; width: 100%; direction: ltr;}
.messages-page-icon { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; }
.messages-page-icon img { display: block; width: 38px; height: 38px; object-fit: contain; }
.messages-filter-bar { display: flex; justify-content: flex-start; align-items: center; margin: 8px 0 4px; }
.messages-date-filter-toggle { color: var(--green-dark); }
.messages-date-filter-toggle.expanded { transform: rotate(180deg); }
.messages-date-filter-fields { margin: 8px 0 12px; padding: 11px; border: 1px solid #e4eee9; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px rgba(26,75,61,.05); }
.messages-date-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.messages-date-filter-actions {display: flex; align-items: stretch; gap: 8px; margin-top: 9px;}
.messages-date-filter-actions button {flex: 1;margin-top: 0 !important; min-height: 40px; height: 40px; padding: 0 12px; border-radius: 12px; box-sizing: border-box;display: inline-flex; align-items: center;justify-content: center;font-size: 13px;line-height: 1;}
.messages-list { display: grid; gap: 9px; margin-top: 14px; }
.messages-compose-card { display: grid; gap: 9px; margin: 10px 0 14px; padding: 12px; border: 1px solid #d9e9e5; border-radius: 16px; background: linear-gradient(145deg, #fff, #f4faf8); box-shadow: 0 7px 18px rgba(26,75,61,.05); }
.messages-compose-card.hidden { display: none; }
.messages-compose-card h3 { margin: 2px 0 0; color: var(--green-dark); font-size: 14px; }
.messages-compose-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.messages-compose-card-head .eyebrow { margin: 0; }
.messages-compose-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #176a74, #218b7d); box-shadow: 0 5px 12px rgba(23,106,116,.2); }
.messages-compose-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(118px, .72fr) auto; gap: 8px; align-items: stretch; }
.messages-compose-controls .form-select { min-width: 0; height: 42px; padding-top: 0; padding-bottom: 0; font-size: 11px; }
.messages-recipient-picker { display: grid; align-content: center; gap: 2px; min-width: 0; padding: 5px 10px; border: 1px solid #cfe3dc; border-radius: 12px; color: #245951; background: #fff; font: inherit; text-align: right; cursor: pointer; }
.messages-recipient-picker span { color: #63817a; font-size: 9px; }
.messages-recipient-picker strong { overflow: hidden; color: #1e5e55; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.messages-recipient-picker.has-selection { border-color: #79b9a9; background: #ecf8f3; }
.messages-compose-controls .primary-button { width: auto; min-width: 86px; min-height: 42px; margin: 0; padding: 0 12px; font-size: 11px; }
.text-button { padding: 0; border: 0; color: #176383; background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.messages-recipient-modal-card { width: min(100%, 480px); }
.messages-recipient-modal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 9px; color: #5b7771; font-size: 11px; }
.messages-recipient-modal-options { display: grid; gap: 7px; max-height: min(52vh, 420px); overflow: auto; padding: 3px; }
.messages-recipient-option { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid #dfece7; border-radius: 12px; color: #405551; background: #fff; cursor: pointer; }
.messages-recipient-option:has(input:checked) { border-color: #6db7a4; background: #edf9f4; }
.messages-recipient-option input { flex: 0 0 auto; accent-color: var(--green); }
.messages-recipient-option > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.messages-recipient-option strong { min-width: 0; overflow: hidden; color: #244e48; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.messages-recipient-option small { flex: 0 0 auto; color: #6c8580; font-size: 10px; direction: ltr; text-align: right; unicode-bidi: plaintext; }
.messages-recipient-modal-card .selection-modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.messages-recipient-modal-card .selection-modal-actions button { width: 100%; min-height: 40px; margin: 0; }
@media (max-width: 460px) { .messages-compose-controls { grid-template-columns: 1fr 1fr; } .messages-compose-controls .form-select { grid-column: 1 / -1; } .messages-compose-controls .primary-button { min-width: 0; } }
.message-card { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid #e6efeb; border-radius: 16px; background: #fff; box-shadow: 0 7px 18px rgba(26,75,61,.05); }
.message-card-icon {display: flex; align-items: center; justify-content: center; flex: 0 0 38px; align-self: stretch; height: auto; border-left: 1px solid #2467a78c; padding-left: 10px; background: transparent;}
.message-card-icon img {width: 28px; height: 28px; object-fit: contain;}
.message-card-content { min-width: 0; flex: 1; }
.message-card-content strong, .message-card-content small { display: block; }
.message-card-content strong { color: var(--green-dark); font-size: 12px; }
.message-card-content .message-card-sender { margin-top: 4px; color: #23745f; font-size: 9px; font-weight: 700; }
.message-card-content small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.7; text-align: right; direction: rtl; }
.message-card-date { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; text-align: left; direction: ltr; unicode-bidi: plaintext; }
.empty-state-card { padding: 34px 22px; text-align: center; border: 1px solid #e6f0ec; border-radius: 22px; background: #fff; box-shadow: 0 8px 24px rgba(26,75,61,.06); }
.empty-state-icon { width: 54px; height: 54px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 18px; color: var(--green); background: var(--green-soft); font-size: 24px; }
.empty-state-card h3 { margin: 0; }
.empty-state-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
@media (min-width: 700px) { body { padding: 22px 0; } .app-shell { min-height: auto; } }
@media print {
    body, body * { font-family: Vazir, Tahoma, sans-serif !important; }
    body { background: #fff; }
    .app-shell { width: 100%; padding: 0; }
    .app-header, .bottom-nav, .settings-drawer, .report-filter-card, .help-button, .page-tools, button { display: none !important; }
    .reports-view { display: block !important; }
    .report-card, .report-stat-card { box-shadow: none; break-inside: avoid; }
}

/* Navigation and selection refinements. */
.fund-card.selected {
    border-top: 15px solid #102e6d !important;
    box-shadow: 4px 1px 8px rgba(0, 0, 0, .12), -2px 0 5px rgba(0, 0, 0, .06) !important;
    animation: fund-card-selection-pulse 2.8s ease-in-out infinite;
}
.fund-card.selected::after { content: none; }
@keyframes fund-card-selection-pulse {
    0%, 100% {
        border-top-color: #102e6d;
        box-shadow: 4px 1px 8px rgba(0, 0, 0, .12), -2px 0 5px rgba(0, 0, 0, .06) !important;
    }
    50% {
        border-top-color: #1b478f;
        box-shadow: 0 0 0 3px rgba(36, 91, 180, .13), 0 8px 18px rgba(16, 46, 109, .18) !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .fund-card.selected { animation: none; }
}
.management-call-button.disabled { cursor: not-allowed; opacity: 1; filter: none; pointer-events: none; }
.management-call-button.disabled:active { transform: none; }
.back-icon-button, .auth-back-button { display: inline-grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0 !important; border: 0; border-radius: 10px; background: #102e6d !important; box-shadow: none; }
.back-icon-button img, .auth-back-button img { display: block; width: 20px; height: 20px; object-fit: contain; }
.auth-back-button { align-self: flex-start; margin-top: 4px; cursor: pointer; }
.password-mode-card small { display: none; }
/* ������� ������ ���� ����� */
.drawer-menu-item .drawer-menu-icon-profile,
.drawer-menu-item .drawer-menu-icon-cards,
.drawer-menu-item .drawer-menu-icon-password,
.drawer-menu-item .drawer-menu-icon-subscription,
.drawer-menu-item .drawer-menu-icon-guide,
.drawer-menu-item .drawer-menu-icon-terms,
.drawer-menu-item .drawer-menu-icon-faq,
.drawer-menu-item .drawer-menu-icon-rating,
.drawer-menu-item .drawer-menu-icon-share {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: -3px;
    border-radius: 0;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
    font-size: 0;
    color: transparent;
}

.drawer-menu-item .drawer-menu-icon-app-settings {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: -3px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(145deg, #173d85, #0d8198);
    font-family: Tahoma, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: -1px;
    flex-shrink: 0;
}

.app-display-settings-card { width: min(100%, 400px); }
.app-font-settings-intro { margin: 12px 0; text-align: justify; text-align-last: right; line-height: 1.9; }
.app-font-preview { display: grid; gap: 3px; margin: 12px 0; padding: 14px; border: 1px solid #dce9ee; border-radius: 15px; color: #173f69; background: linear-gradient(135deg, #f5fbfd, #edf4ff); }
.app-font-preview span { color: #5d7b8b; font-size: 11px; }
.app-font-preview strong { font-size: 17px; text-align: center; }
.app-font-preview small { color: #6d7d84; font-size: 12px; text-align: center; }
.app-font-scale-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 12px 0 16px; }
.app-font-scale-option { display: grid; gap: 2px; min-height: 58px; padding: 8px 4px; border: 1px solid #d7e5e8; border-radius: 12px; color: #4c626c; background: #fff; font: inherit; cursor: pointer; transition: .18s ease; }
.app-font-scale-option strong { font-size: 11px; }
.app-font-scale-option small { color: #8b9aa1; font-size: 10px; }
.app-font-scale-option.active { border-color: #176383; color: #fff; background: linear-gradient(135deg, #173d85, #0c7c97); box-shadow: 0 7px 14px rgba(20, 63, 105, .16); }
.app-font-scale-option.active small { color: rgba(255, 255, 255, .8); }
.app-font-scale-range { width: 100%; margin-top: 2px; accent-color: #176383; }
.app-font-scale-value { margin: 6px 0 12px; color: #176383; font-size: 12px; font-weight: 800; text-align: center; }
.app-font-scale-reset { width: 100%; min-height: 40px; font-size: 12px; }
.app-settings-view { padding: 10px 14px 24px; }
#settings-view #fund-notification-settings { display: none; }
.app-settings-page-head { margin: 2px 2px 14px; }
.app-settings-page-head h2 { margin: 0; color: var(--green-dark); font-size: 18px; }
.app-settings-page-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.app-settings-root-list { display: grid; gap: 10px; }
.app-settings-root-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px; border: 1px solid #dce9ee; border-radius: 14px; background: #f8fcfd; }
.app-settings-root-button { color: inherit; font: inherit; text-align: right; cursor: pointer; transition: .18s ease; }
.app-settings-root-button:hover, .app-settings-root-button:focus-visible { border-color: #75a8ba; background: #f1f9fb; outline: none; }
.app-settings-root-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; color: #176383; background: #e2f2f5; font-size: 16px; font-weight: 900; letter-spacing: -1px; }
.app-settings-message-icon { font-size: 17px; letter-spacing: 0; }
.app-settings-root-content { display: grid; flex: 1; gap: 4px; min-width: 0; }
.app-settings-root-content strong, .app-settings-root-content small { display: block; }
.app-settings-root-content strong { color: #173f69; font-size: 13px; }
.app-settings-root-content small { color: #6d7d84; font-size: 10px; line-height: 1.7; }
.app-settings-root-button > b { color: #4d7889; font-size: 24px; font-weight: 400; line-height: 1; }
.app-notification-settings { justify-content: space-between; }
.app-notification-settings strong, .app-notification-settings small { display: block; }
.app-notification-settings strong { color: #173f69; font-size: 12px; }
.app-notification-settings small { margin-top: 4px; color: #6d7d84; font-size: 10px; line-height: 1.7; }
.app-settings-switch { position: relative; flex: 0 0 auto; width: 42px; height: 24px; cursor: pointer; }
.app-settings-switch input { position: absolute; opacity: 0; }
.app-settings-switch span { position: absolute; inset: 0; border-radius: 999px; background: #b9c9d0; transition: .2s ease; }
.app-settings-switch span::after { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; content: ""; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.18); transition: .2s ease; }
.app-settings-switch input:checked + span { background: #16816c; }
.app-settings-switch input:checked + span::after { transform: translateX(-18px); }
.app-settings-switch input:disabled + span { opacity: .5; cursor: not-allowed; }
.app-notification-options { display: grid; gap: 8px; margin-top: -2px; padding: 10px; border: 1px solid #dce9ee; border-radius: 14px; background: #fff; }
.app-notification-options.is-disabled { opacity: .64; background: #f7fafb; }
.app-notification-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 9px 10px; border-radius: 10px; background: #f8fcfd; }
.app-notification-option > div { min-width: 0; }
.app-notification-option strong, .app-notification-option small { display: block; }
.app-notification-option strong { color: #173f69; font-size: 12px; }
.app-notification-option small { margin-top: 3px; color: #6d7d84; font-size: 10px; line-height: 1.6; }
.bale-user-connection { margin-top: 10px; }
.bale-primary-action, .bale-action-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border: 0; border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 10px; font-weight: 800; line-height: 1; cursor: pointer; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.bale-primary-action { flex: 0 0 auto; color: #fff; background: linear-gradient(135deg, #0b7c92, #174f9d); box-shadow: 0 7px 16px rgba(21, 93, 142, .24); }
.bale-primary-action::before { content: "✦"; font-size: 13px; }
.bale-primary-action:hover, .bale-action-button:hover { transform: translateY(-1px); filter: brightness(1.03); }
.bale-primary-action:active, .bale-action-button:active { transform: translateY(0) scale(.98); }
.bale-primary-action:disabled { cursor: wait; opacity: .58; box-shadow: none; }
.bale-user-pairing-instructions { padding: 10px 12px; border-radius: 10px; background: #eef8fb; color: #195368; font-size: 11px; line-height: 1.9; }
.bale-user-pairing-instructions code { display: inline-block; direction: ltr; margin: 5px 0; padding: 2px 7px; border-radius: 6px; background: #fff; color: #0d4f73; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.bale-user-pairing-instructions small { display: block; color: #60757d; }
.bale-user-pairing-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 4px; }
.bale-user-pairing-actions .bale-action-button { min-height: 34px; padding: 7px 10px; }
.bale-open-bot { color: #075f53; background: #dcf5ed; border: 1px solid #b9e8da; }
.bale-open-bot::before { content: "↗"; font-size: 15px; line-height: .7; }
.bale-copy-code { color: #174f9d; background: #e7f0ff; border: 1px solid #c8dcfb; }
.bale-copy-code::before { content: "⧉"; font-size: 15px; line-height: .7; }
.app-notification-required-note { margin: 10px 4px 0; color: #6d7d84; font-size: 10px; line-height: 1.8; }
@media (max-width: 480px) {
    .app-notification-options { padding: 8px; }
    .app-notification-option { min-height: 58px; padding: 9px; }
    .app-notification-option strong { font-size: 11px; }
}

.fund-charter-modal-card { width: min(100%, 520px); max-height: min(88vh, 760px); }
.dashboard-message#fund-charter-message {
    display: grid;
    gap: 3px;
    margin: 8px 0;
    color: #0d5369;
    text-align: center;
}
.dashboard-message#fund-charter-message strong { font-size: 13px; }
.dashboard-message#fund-charter-message span { font-size: 11px; }
.fund-charter-acceptance-modal-card {
    width: min(100%, 520px);
    max-height: min(76vh, 640px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.fund-charter-acceptance-modal-card .fund-charter-content {
    min-height: 0;
    max-height: min(42vh, 360px);
    flex: 1 1 auto;
}
.fund-charter-content {
    max-height: min(52vh, 470px);
    overflow-y: auto;
    overflow-x: hidden;
    margin: 12px 0;
    padding: 14px;
    border: 1px solid #dce8e5;
    border-radius: 14px;
    color: #3d5158;
    background: linear-gradient(145deg, #fbfefd, #f2f8f6);
    direction: rtl;
    text-align: justify;
    text-align-last: right;
    font-family: inherit;
    font-size: 12px;
    line-height: 2.05;
    scrollbar-color: #8cb9aa transparent;
}
.fund-charter-line { margin: 0; color: inherit; }
.fund-charter-line + .fund-charter-line { margin-top: 8px; }
.fund-charter-spacer { height: 8px; }
.fund-charter-title { margin-bottom: 1px !important; color: var(--green-dark); font-size: 13px; font-weight: 900; line-height: 1.9; text-align: center; }
.fund-charter-fund-name { margin-top: 0 !important; color: #0d5369; font-size: 18px; font-weight: 900; line-height: 1.6; text-align: center; }
.fund-charter-subtitle { margin-top: 0 !important; color: #6b7e85; font-size: 10.5px; font-weight: 700; line-height: 1.55; text-align: center; }
.fund-charter-heading { margin-top: 15px !important; padding: 7px 9px; border-right: 3px solid var(--green); border-radius: 7px; color: var(--green-dark); background: rgba(223, 242, 235, .72); font-weight: 800; text-align: right; }
.fund-charter-editor {
    display: block;
    width: 100%;
    min-height: min(52vh, 470px);
    margin: 12px 0;
    padding: 14px;
    border: 1px solid #9fcfc0;
    border-radius: 14px;
    color: var(--ink);
    background: #fff;
    direction: rtl;
    resize: vertical;
    font: inherit;
    font-size: 12px;
    line-height: 2;
    text-align: justify;
}
.fund-charter-editor:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(11, 111, 141, .12); }
.fund-charter-actions { flex-wrap: wrap; }
.fund-charter-actions .primary-button, .fund-charter-actions .outline-button { flex: 1 1 130px; }

.drawer-menu-item .drawer-menu-icon-subscription {
    background-image: url('/app/assets/icons/pelan-icon.png');
}

.drawer-menu-item .drawer-menu-icon-faq {
    background-image: url('/app/assets/icons/asked-icon.png');
}

.drawer-menu-item .drawer-menu-icon-terms {
    background-image: url('/app/assets/icons/rules.PNG');
}

/* �� ���: ��� ����� */
.app-shell.role-owner .drawer-menu-icon-profile {
    background-image: url('/app/assets/icons/user-info.PNG');
}

.app-shell.role-owner .drawer-menu-icon-cards {
    background-image: url('/app/assets/icons/card-management-icon.PNG');
}

.app-shell.role-owner .drawer-menu-icon-password {
    background-image: url('/app/assets/icons/password-icon.PNG');
}

.app-shell.role-owner .drawer-menu-icon-guide {
    background-image: url('/app/assets/icons/help-icon.PNG');
}

.app-shell.role-owner .drawer-menu-icon-rating {
    background-image: url('/app/assets/icons/scoring-icon.PNG');
}

.app-shell.role-owner .drawer-menu-icon-share {
    background-image: url('/app/assets/icons/share-icon.PNG');
}

/* �� ���: ��� ����� */
.app-shell.role-member .drawer-menu-icon-profile {
    background-image: url('/app/assets/icons/user-info.PNG');
}

.app-shell.role-member .drawer-menu-icon-cards {
    background-image: url('/app/assets/icons/card-management-icon.PNG');
}

.app-shell.role-member .drawer-menu-icon-password {
    background-image: url('/app/assets/icons/password-icon.PNG');
}

.app-shell.role-member .drawer-menu-icon-guide {
    background-image: url('/app/assets/icons/help-icon.PNG');
}

.app-shell.role-member .drawer-menu-icon-rating {
    background-image: url('/app/assets/icons/scoring-icon.PNG');
}

.app-shell.role-member .drawer-menu-icon-share {
    background-image: url('/app/assets/icons/share-icon.PNG');
}

/* �� ����: ���� ����� */
.app-shell.role-admin .drawer-menu-icon-profile {
    background-image: url('/app/assets/icons/user-info.PNG');
}

.app-shell.role-admin .drawer-menu-icon-cards {
    background-image: url('/app/assets/icons/card-management-icon.PNG');
}

.app-shell.role-admin .drawer-menu-icon-password {
    background-image: url('/app/assets/icons/password-icon.PNG');
}

.app-shell.role-admin .drawer-menu-icon-guide {
    background-image: url('/app/assets/icons/help-icon.PNG');
}

.app-shell.role-admin .drawer-menu-icon-rating {
    background-image: url('/app/assets/icons/scoring-icon.PNG');
}

.app-shell.role-admin .drawer-menu-icon-share {
    background-image: url('/app/assets/icons/share-icon.PNG');
}

/* �� ���� � ����� ������� �� ������� ��� */
.app-shell.role-observer .drawer-menu-icon-profile {
    background-image: url('/app/assets/icons/user-info.PNG');
}

.app-shell.role-observer .drawer-menu-icon-cards {
    background-image: url('/app/assets/icons/card-management-icon.PNG');
}

.app-shell.role-observer .drawer-menu-icon-password {
    background-image: url('/app/assets/icons/password-icon.PNG');
}

.app-shell.role-observer .drawer-menu-icon-guide {
    background-image: url('/app/assets/icons/help-icon.PNG');
}

.app-shell.role-observer .drawer-menu-icon-rating {
    background-image: url('/app/assets/icons/scoring-icon.PNG');
}

.app-shell.role-observer .drawer-menu-icon-share {
    background-image: url('/app/assets/icons/share-icon.PNG');
}

/* ==========================================================================
   ����� ���� ������ ���� ���ʝ�� �� ������� ���� �����

   --large-card-font-scale : ������ǡ ����ϡ ���۝�� � ������ ����
   --small-card-font-scale : �э�ȝ�ǡ ����ʝ�ǡ ������� � ������ ���
   ========================================================================== */

/* --------------------------------------------------------------------------
   ���� ������ � ������� ���� ����
   -------------------------------------------------------------------------- */

.balance-card span,
.balance-card small {
    font-size: calc(12px * var(--small-card-font-scale));
}

.balance-card strong {
    font-size: calc(30px * var(--large-card-font-scale));
}

.overview-stat span,
.overview-stat small {
    font-size: calc(10px * var(--small-card-font-scale));
}

.overview-stat strong {
    font-size: calc(15px * var(--large-card-font-scale));
}

.overview-meta span {
    font-size: calc(11px * var(--small-card-font-scale));
}

.overview-meta strong {
    font-size: calc(11px * var(--large-card-font-scale));
}

/* --------------------------------------------------------------------------
   ���ʝ��� �����
   -------------------------------------------------------------------------- */

.fund-card-title h3 {
    font-size: calc(13px * var(--large-card-font-scale));
}

.fund-card-title small {
    font-size: calc(11px * var(--small-card-font-scale));
}

.fund-card-badge,
.fund-card-status {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    white-space: nowrap;
}

.fund-card-stat span,
.fund-card-stat small {
    font-size: calc(10px * var(--small-card-font-scale));
}

.fund-card-stat strong {
    font-size: calc(13px * var(--large-card-font-scale));
}

.fund-card-footer {
    font-size: calc(11px * var(--small-card-font-scale));
}

/* --------------------------------------------------------------------------
   ���ʝ��� ���
   -------------------------------------------------------------------------- */

.loan-card-head span,
.loan-status,
.loan-card-row span {
    font-size: calc(11px * var(--small-card-font-scale));
}

.loan-card-head strong,
.loan-card-amount,
.loan-card-row b {
    font-size: calc(13px * var(--large-card-font-scale));
}

/* ���� ���� ��� ��� ���ʝ�� ����� ���� ����� */
.loan-card-amount {
    font-size: calc(16px * var(--large-card-font-scale));
}

/* --------------------------------------------------------------------------
   ���ʝ�� � �������� ��ǘ��
   -------------------------------------------------------------------------- */

.transaction-summary-item span,
.management-transaction-summary-item span,
.transaction-card-head span,
.transaction-card-row span {
    font-size: calc(10px * var(--small-card-font-scale));
}

.transaction-summary-item strong,
.management-transaction-summary-item strong,
.transaction-card-head strong,
.transaction-card-row b {
    font-size: calc(13px * var(--large-card-font-scale));
}

/* --------------------------------------------------------------------------
   ���ʝ��� ����� ������
   -------------------------------------------------------------------------- */

.payment-review-head span,
.payment-review-row span {
    font-size: calc(10px * var(--small-card-font-scale));
}

.payment-review-head strong,
.payment-review-row b {
    font-size: calc(13px * var(--large-card-font-scale));
}

/* --------------------------------------------------------------------------
   ���ʝ��� ����� ����
   -------------------------------------------------------------------------- */

.report-stat span,
.report-stat small,
.report-loan-item span {
    font-size: calc(10px * var(--small-card-font-scale));
}

.report-stat strong,
.report-loan-item strong {
    font-size: calc(13px * var(--large-card-font-scale));
}

/* --------------------------------------------------------------------------
   ���ʝ��� ������ ����
   -------------------------------------------------------------------------- */

.cycle-management-card small {
    font-size: calc(11px * var(--small-card-font-scale));
}

.cycle-management-card strong {
    font-size: calc(13px * var(--large-card-font-scale));
}

/* --------------------------------------------------------------------------
   ���ʝ��� ���� � ������
   -------------------------------------------------------------------------- */

.management-member-row small,
.member-info small,
.message-card-content p,
.message-card-content small {
    font-size: calc(10px * var(--small-card-font-scale));
    text-align: right;
    direction: rtl;
}

.management-member-row strong,
.member-info strong,
.message-card-content strong {
    font-size: calc(11px * var(--large-card-font-scale));
}

#settings-button {
    background: transparent;
    border-radius: 0;
}

.reports-view {
    gap: 8px !important;
}

.members-title-row {

    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.report-filter-card {
    margin-top: 0 !important;
}

#reports-message {
    margin: 0 !important;
    padding: 0 !important;
}

.profile-tab-panel[data-profile-group="info"] {
    padding: 0 !important;
}

    .profile-tab-panel[data-profile-group="info"] .form-label {
        display: block !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1.3 !important;
        font-size: 11px !important;
    }

    .profile-tab-panel[data-profile-group="info"] .form-input {
        width: 100% !important;
        min-height: 34px !important;
        height: 36px !important;
        padding: 5px 9px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        box-sizing: border-box !important;
        border-radius : 8px;
    }

    .profile-tab-panel[data-profile-group="info"] .profile-image-settings {
        margin-top: 0 !important;
        gap: 8px !important;
    }

    .profile-tab-panel[data-profile-group="info"] .profile-image-preview {
        width: 52px !important;
        height: 52px !important;
    }

    .profile-tab-panel[data-profile-group="info"] .file-picker-button {
        min-height: 28px !important;
        padding: 5px 9px !important;
        font-size: 11px !important;
    }

    .profile-tab-panel[data-profile-group="info"] #save-profile {
        position: static;
        display: flex;
        width: 100%;
        min-height: 40px;
        margin: 0;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
        box-sizing: border-box;
        border: 0;
        border-radius: 10px;
        color: #fff;
        background: linear-gradient(135deg, var(--green), var(--green-dark));
        font: inherit;
        font-size: 12px;
        cursor: pointer;
    }

    .profile-tab-panel[data-profile-group="info"] #profile-message {
        margin: 6px 0 0 !important;
    }

.more-view.feature-overlay .more-subpanel:has(.profile-tab-panel[data-profile-group="info"]) {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

    .more-view.feature-overlay .more-subpanel:has(.profile-tab-panel[data-profile-group="info"]) .profile-tab-panel[data-profile-group="info"] {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    /*////////////////////////////////*/
.more-view.feature-overlay .profile-tab-panel[data-profile-group="info"] .form-input {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

    .more-view.feature-overlay .profile-tab-panel[data-profile-group="info"] .form-input:focus {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

.more-view.feature-overlay .profile-tab-panel[data-profile-group="info"] .form-label {
    margin-top: 10px !important;
    margin-bottom: 2px !important;
}

    .more-view.feature-overlay .profile-tab-panel[data-profile-group="info"] .form-label + .form-input {
        border-bottom: 1px solid #dfe8e4 !important;
    }





.more-view.feature-overlay .profile-tab-panel[data-profile-group="info"] .form-input {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-right: 2px !important;
    padding-left: 8px !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #dfe8e4 !important;
}

    .more-view.feature-overlay .profile-tab-panel[data-profile-group="info"] .form-input:focus {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        border-bottom: 1px solid var(--green, #1f7a59) !important;
    }


.more-view.feature-overlay .profile-tab-panel[data-profile-group="info"] .form-input {
    text-align: center !important;
}

.more-view.feature-overlay .profile-tab-panel[data-profile-group="info"] .form-label {
    color: #0033ff !important;
}


.more-view.feature-overlay .profile-tab-panel[data-profile-group="info"] #profile-mobile-number {
    direction: rtl !important;
    text-align: center !important;
    unicode-bidi: plaintext !important;
    font-family: Tahoma, "Vazirmatn", Arial, sans-serif !important;
}

/* تنظیم ساختار و سایز فونت ردیف‌های اطلاعاتی کارت صندوق */
.fund-card-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 4px;
    border-bottom: 1px dashed rgba(0, 52, 91, 0.12);
}

    .fund-card-info-row:last-child {
        border-bottom: none;
        padding-bottom: 4px;
    }

.fund-card-info-label {
    font-size: 0.68rem;
    font-weight: 500;
    color: #4a5568;
    line-height: 1.5;
}

.fund-card-info-value {
    font-size: 0.70rem;
    font-weight: 700;
    color: #00345b;
    line-height: 1.5;
    direction: rtl;
    text-align: left;
}

/* کارت برنده: شمارهٔ چرخه | نام برنده | تاریخ */
#management-winners-list .winner-card {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    min-height: 48px !important;
    padding: 6px 9px !important;
    direction: rtl;
}

#management-winners-list .winner-card-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    object-fit: cover;
    border-radius: 9px;
    margin-left: 7px;
}

#management-winners-list .winner-cycle-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 0 0 30px;
    margin-left: 9px;
    padding-left: 9px;
    border-left: 1px solid #d5e3e8;
    color: #176b80;
    font-size: 13px;
    font-weight: 800;
}

#management-winners-list .winner-card-member {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
}

#management-winners-list .winner-card-member strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#management-winners-list .winner-card .winner-card-date {
    margin: 0 !important;
    color: #617583;
    font-size: 11px;
    white-space: nowrap;
}

/* Management member and winner cards need room for their final border and shadow. */
.management-members-list {
    padding: 2px 2px 14px !important;
}
.management-members-list .management-member-row {
    border: 1px solid #d6e5df;
    box-shadow: 0 3px 10px rgba(26, 75, 61, .10);
}
.management-members-list .management-member-row:last-child {
    border-bottom: 1px solid #d6e5df !important;
    margin-bottom: 2px;
}

/* کارتِ دارای رسیدِ در انتظار بررسی چند ردیف اطلاعات دارد. فضای پایینی و
   حاشیهٔ نهایی آن را مستقل نگه می‌داریم تا زیر دکمهٔ تماس/عملیات بریده نشود. */
#management-members-list .management-member-row.pending-payment-review {
    box-sizing: border-box;
    min-height: 106px;
    padding-bottom: 9px !important;
    overflow: visible;
}
#management-members-list .management-member-row.pending-payment-review:last-child {
    border-bottom-color: #e8a13b !important;
    margin-bottom: 4px;
}

/* Members who exited the fund remain visible for their final settlement, but
   are deliberately distinct from active members. */
.management-members-list .management-member-row.exited-member-card,
.members-list .member-card.exited-member-card {
    border-color: #e6c998;
    border-right: 4px solid #bd7d1b;
    background: linear-gradient(120deg, #fffdf8 0%, #fff5df 100%);
    box-shadow: 0 4px 12px rgba(157, 101, 16, .13);
}
.exited-member-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: 3px 7px;
    border-radius: 6px;
    color: #8a5711;
    background: #ffebc2;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.member-card-top-row .exited-member-status { margin-right: auto; }
.member-exit-settlement-button {
    color: #7f4a06;
    background: #f7ca76;
}

/* کارت عضو خارج‌شده، دو ردیفِ قرینه دارد: هویت در راست و وضعیت/عملیات در چپ. */
.management-members-list .management-member-row.exited-member-card .management-member-main {
    gap: 7px;
}
.management-members-list .management-member-row.exited-member-card .member-card-top-row,
.management-members-list .management-member-row.exited-member-card .member-card-bottom-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    direction: rtl;
}
.management-members-list .management-member-row.exited-member-card .member-card-top-row strong,
.management-members-list .management-member-row.exited-member-card .member-card-bottom-row small {
    grid-column: 1;
    justify-self: start;
    max-width: none;
    text-align: right;
}
.management-members-list .management-member-row.exited-member-card .exited-member-status,
.management-members-list .management-member-row.exited-member-card .management-member-actions {
    grid-column: 2;
    justify-self: end;
}
.management-members-list .management-member-row.exited-member-card .exited-member-status {
    margin-right: 0;
}
.management-members-list .management-member-row.exited-member-card .management-member-actions {
    justify-content: flex-end;
}
.members-list .member-card.charter-declined-member-card {
    border-color: #c8d1dd;
    border-right: 4px solid #718096;
    background: linear-gradient(120deg, #fafcff 0%, #eef2f6 100%);
    box-shadow: 0 4px 12px rgba(71, 85, 105, .10);
    opacity: .9;
}
.members-list .member-card.charter-declined-member-card .member-info strong em {
    color: #526273;
}
.charter-members-history {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #d6e0e8;
    border-radius: 10px;
    background: linear-gradient(145deg, #fafcff, #f1f5f8);
}
.charter-members-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #d8e1e8;
    color: #34516b;
}
.charter-members-history-head strong { font-size: 12px; }
.charter-members-history-head small { color: #697b8d; font-size: 10px; }
.charter-members-history-list {
    display: grid;
    gap: 0;
    margin: 7px 0 0;
    padding: 0 20px 0 0;
    color: #314b62;
}
.charter-members-history-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 5px 0;
}
.charter-members-history-list li + li { border-top: 1px dashed #d5e0e8; }
.charter-members-history-list li > div { display: grid; gap: 2px; min-width: 0; }
.charter-members-history-list li strong { font-size: 12px; }
.charter-members-history-list li span { color: #718096; font-size: 10px; }
.charter-members-history-list li > small { flex: 0 0 auto; color: #526b80; font-size: 10px; }
.member-status-history {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #ead7b5;
    border-radius: 10px;
    background: linear-gradient(145deg, #fffdfa, #fff6e7);
}
.member-status-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eadcc5;
    color: #76501c;
}
.member-status-history-head strong { font-size: 12px; }
.member-status-history-head small { color: #98713d; font-size: 10px; }
.member-status-history-list {
    display: grid;
    gap: 0;
    margin: 7px 0 0;
    padding: 0 20px 0 0;
    color: #5d482f;
}
.member-status-history-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 6px 0;
}
.member-status-history-list li + li { border-top: 1px dashed #e8d9c1; }
.member-status-history-details { display: grid; gap: 2px; min-width: 0; }
.member-status-history-details strong { font-size: 12px; }
.member-status-history-details span { color: #8b6630; font-size: 10px; }
.member-status-history-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}
.member-status-history-meta > small { color: #6a5337; font-size: 10px; }
.member-status-history-action {
    min-height: 28px;
    padding: 4px 8px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--green);
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    white-space: nowrap;
}
.member-status-history-action.settlement { color: #7f4a06; background: #f7ca76; }
.member-exit-settlement-button:hover {
    background: #efb653;
}
.management-member-actions.exited-member-actions {
    align-self: stretch;
}
.exited-member-action-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
.exited-member-action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: fit-content;
}
.exited-member-action-buttons .member-exit-settlement-button {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding-inline: 8px;
}

/* کارت‌های صفحهٔ مدیریت اعضا همان ساختار فشرده و دو ستونهٔ صفحهٔ مدیریت صندوق را دارند. */
.members-list .member-card.member-card-collapsible {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    direction: rtl;
    align-items: stretch;
    gap: 0;
    min-height: 76px;
    padding: 7px 8px !important;
    border: 1px solid #d6e5df;
    border-radius: 10px !important;
    box-shadow: 0 3px 10px rgba(26, 75, 61, .10);
}
.members-list .member-card-collapsible .member-card-role {
    order: 1;
    display: flex;
    flex: 0 0 52px;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 6px 0;
    border-right: 0;
    border-left: 1px solid #d9e5e1;
}
.members-list .member-card-collapsible .member-card-role strong { width: 100% !important; }
.members-list .member-card-collapsible .member-info {
    order: 2;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    justify-content: center;
    gap: 3px;
    padding: 2px 10px 0 !important;
    border-right: 0 !important;
}
.members-list .member-card-collapsible > .member-edit-toggle { order: 3; margin-top: 7px; }
.members-list .member-card-collapsible > .member-controls,
.members-list .member-card-collapsible > .member-edit-panel,
.members-list .member-card-collapsible > .member-actions { order: 4; flex: 0 0 100%; }
.members-list .member-card-collapsible > .member-exit-request-review-button {
    order: 5;
    flex: 0 0 100%;
    width: 100%;
    min-height: 31px;
    margin-top: 7px;
    border: 1px solid #e4b96f;
    color: #82510b;
    background: linear-gradient(135deg, #fff9ed, #ffefcc);
    box-shadow: none;
    font-size: 11px;
}
.member-exit-request-modal-card { max-width: 430px; }
.member-exit-request-description {
    min-height: 76px;
    margin: 10px 0;
    padding: 11px 12px;
    border: 1px solid #e5ece8;
    border-radius: 10px;
    color: #355449;
    background: #f8fcfa;
    font-size: 12px;
    line-height: 1.9;
    white-space: pre-wrap;
}
.member-exit-request-rejection-reason {
    margin: 7px 0 0;
    color: #9a3d28;
    font-size: 11px;
    line-height: 1.8;
}
.member-exit-request-history {
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid #e4ece8;
}
.member-exit-request-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.member-exit-request-history-head h4 {
    margin: 0;
    color: var(--green-dark);
    font-size: 12px;
}
.member-exit-request-history-head span {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    min-height: 22px;
    padding: 2px 6px;
    border-radius: 999px;
    color: #fff;
    background: var(--green);
    font-size: 10px;
    font-weight: 700;
}
.member-exit-request-history-list {
    display: grid;
    gap: 7px;
    max-height: 260px;
    overflow-y: auto;
    padding-left: 2px;
}
.member-exit-request-history-item {
    padding: 9px 10px;
    border: 1px solid #dfeae5;
    border-right: 3px solid #d9953b;
    border-radius: 9px;
    background: #fbfdfc;
}
.member-exit-request-history-item.approved { border-right-color: var(--green); }
.member-exit-request-history-item.rejected { border-right-color: #d64545; }
.member-exit-request-history-item.canceled { border-right-color: #718096; }
.member-exit-request-history-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.member-exit-request-history-item-head strong { color: var(--ink); font-size: 11px; }
.member-exit-request-history-item-head time { color: var(--muted); font-size: 9px; text-align: left; }
.member-exit-request-history-item p {
    margin: 7px 0;
    color: #355449;
    font-size: 10px;
    line-height: 1.8;
    white-space: pre-wrap;
}
.member-exit-request-history-item small {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
    color: var(--muted);
    font-size: 9px;
}
.member-exit-request-history-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
}
.member-exit-request-history-actions button {
    min-height: 27px;
    padding: 3px 8px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: var(--green);
    cursor: pointer;
    font: inherit;
    font-size: 10px;
}
.member-exit-request-history-actions button[data-my-exit-request-cancel] {
    color: #9a3d28;
    background: #fff0eb;
}
.member-exit-request-history-empty {
    margin: 0;
    padding: 9px;
    border: 1px dashed #d8e5df;
    border-radius: 8px;
    color: var(--muted);
    background: #fafcfb;
    font-size: 10px;
}
.member-exit-request-reject {
    border-color: #d6a0a0;
    color: #a14343;
    background: #fff8f8;
}

/* کارت عضو در مدیریت اعضا: اطلاعات در ردیف اول و عملیات در یک ردیف مستقل زیر آن. */
.members-list .member-card-collapsible .member-info { justify-content: flex-start; }
.members-list .member-card-collapsible .member-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    width: 100%;
    direction: rtl;
}
.members-list .member-card-collapsible .member-name-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;
    text-align: right;
}
.members-list .member-card-collapsible .member-name-row small {
    flex: 0 0 auto;
    margin: 0 !important;
    white-space: nowrap;
    direction: ltr;
    text-align: left;
}
.members-list .member-card-collapsible > .member-operations-row {
    order: 3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    margin-top: 7px;
    direction: ltr;
}
.members-list .member-operations-row .member-actions {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}
.members-list .member-operations-row .member-status-actions .member-action-button,
.members-list .member-operations-row .member-exit-actions .member-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    min-width: 76px;
    height: 30px;
    min-height: 30px;
    padding: 4px 6px;
}
.members-list .member-card-collapsible > .member-edit-toggle {
    order: initial;
    margin: 0;
}
.members-list .member-card-collapsible > .member-controls { order: 4; }

/* فشردگی کارت عضو و امتداد جداکنندهٔ ستون نقش تا پایین کارت. */
.members-list .member-card.member-card-collapsible {
    position: relative;
    min-height: 0;
    padding: 5px 8px !important;
}
.members-list .member-card.member-card-collapsible::after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 66px;
    width: 1px;
    background: #d9e5e1;
    pointer-events: none;
}
.members-list .member-card-collapsible .member-card-role {
    padding-top: 4px;
    border-left: 0;
}
.members-list .member-card-collapsible .member-info {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 3px !important;
}
.members-list .member-card-collapsible > .member-operations-row {
    margin-top: 3px;
}

/* اطلاعات عضو در دو خط و عملیات در انتهای ردیف نام قرار می‌گیرد. */
.members-list .member-card-collapsible .member-name-row {
    align-items: flex-start;
}
.members-list .member-card-collapsible .member-identity {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    gap: 3px;
}
.members-list .member-card-collapsible .member-identity strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;
    text-align: right;
}
.members-list .member-card-collapsible .member-identity small {
    margin: 0 !important;
    color: var(--muted);
    direction: ltr;
    text-align: right;
}
.members-list .member-card-collapsible .member-name-row > .member-operations-row {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: auto;
    margin: 0;
    direction: ltr;
}
.members-list .member-name-row > .member-operations-row .member-actions {
    gap: 4px;
}
.members-list .member-name-row > .member-operations-row .member-status-actions .member-action-button,
.members-list .member-name-row > .member-operations-row .member-exit-actions .member-action-button {
    width: auto;
    min-width: 0;
    height: 28px;
    min-height: 28px;
    padding: 3px 4px;
    border-radius: 7px;
    font-size: 9px;
}
.members-list .member-name-row > .member-operations-row .member-edit-toggle {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 4px !important;
}
.members-list .member-name-row > .member-operations-row .member-edit-icon {
    width: 28px;
    height: 28px;
}

#dashboard.app-shell.role-admin .members-list .member-edit-toggle {
    border: 1px solid #d7e3f1 !important;
    background: #fff !important;
}
.member-history-meta,
.member-history-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}
.charter-members-history-list time,
.member-status-history-list time {
    color: #718096;
    font-size: 9px;
}
.member-status-history-list time { color: #8b6630; }
.member-status-history-action.remove { color: #a14343; background: #fff0ef; }
.member-summary-actions .outline-button,
.member-summary-actions .add-member-trigger {
    min-height: 38px;
    border-radius: 12px;
}
.fund-card-membership-suspended {
    overflow: hidden;
    border-color: #d5dbe2;
    background: linear-gradient(135deg, #f8fafc, #edf1f5);
    cursor: not-allowed;
}
.fund-card-membership-suspended > :not(.fund-card-membership-suspended-label) {
    opacity: .42;
    filter: grayscale(.7);
}
.fund-card-membership-suspended-label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    color: #44576a;
    font-size: 14px;
    font-weight: 800;
    pointer-events: none;
}
.transaction-selected-member-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 8px 0 2px;
    padding: 8px 10px;
    border: 1px solid #d4e7df;
    border-radius: 10px;
    color: var(--green-dark);
    background: #f4fbf8;
    font-size: 10px;
}
.transaction-selected-member-filter b {
    padding: 3px 7px;
    border-radius: 999px;
    color: #fff;
    background: var(--green);
    font-size: 10px;
}

#funds-view {
    position: relative;
}

    #funds-view .funds-page-head {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 56px;
        margin-bottom: 12px;
    }

    #funds-view .funds-page-title-wrap {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }

    /* ==========================================================================
   Funds View & Header Integration (Fix)
   ========================================================================== */

    /* مخفی‌سازی کامل هدر تکراری و قدیمی داخل صفحه صندوق‌ها */
    .funds-page-head,
    #funds-view .funds-page-head {
        display: none !important;
    }

/* استایل دکمه پلاس داخل هدر اصلی سرمه‌ای */
/* دکمه مثبت (ایجاد صندوق) در هدر سرمه‌ای */
.app-header .fund-create-header-btn {
    position: relative;
    left: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff !important;
    z-index: 5;
    transition: transform 0.15s ease, opacity 0.15s ease;
}


    .app-header .fund-create-header-btn:hover {
        opacity: 0.85;
    }

    .app-header .fund-create-header-btn:active {
        transform: scale(0.92);
    }

.app-header .fund-create-header-btn svg {
        display: block;
        pointer-events: none;
    }

/* صفحه مدیریت صندوق: همه ردیف‌های مشخصات باید قابل مشاهده باشند. */
.management-info-list div:first-child { display: flex !important; }
.settings-panel .drawer-user-summary {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(116, 167, 255, .42);
    border-radius: 16px;
    color: #fff;
    background: radial-gradient(112% 120% at -10% -28%, rgba(107, 160, 255, .46) 0 19%, transparent 57%), radial-gradient(78% 92% at 108% 118%, rgba(54, 202, 202, .22) 0 8%, transparent 67%), linear-gradient(135deg, #193f8a 0%, #102e6d 55%, #081d50 100%);
    box-shadow: 0 12px 26px rgba(8, 29, 80, .26);
}
.settings-panel .drawer-user-summary::before { position: absolute; z-index: 0; inset: -42% -22%; content: ""; background: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 1px, transparent 1px 13px); opacity: .42; transform: rotate(-14deg); pointer-events: none; }
.settings-panel .drawer-user-summary::after { position: absolute; z-index: 0; top: -66px; left: -42px; width: 154px; height: 154px; content: ""; border: 1px solid rgba(207, 231, 255, .26); border-radius: 50%; box-shadow: 0 0 0 22px rgba(207, 231, 255, .05), 0 0 0 45px rgba(207, 231, 255, .035); pointer-events: none; }
.settings-panel .drawer-user-summary > * { position: relative; z-index: 1; }
.drawer-subscription-plan-icon { position: absolute !important; z-index: 2 !important; top: 11px; left: 11px; width: 42px; height: 42px; padding: 5px; border: 1px solid rgba(255,255,255,.24); border-radius: 13px; background: rgba(255,255,255,.13); box-shadow: 0 7px 16px rgba(3, 16, 52, .24); object-fit: contain; box-sizing: border-box; }
.settings-panel .drawer-user-summary.has-active-subscription > div:first-of-type { padding-left: 56px; }
.settings-panel .drawer-user-summary strong { color: #fff; font-size: 15px; }
.settings-panel .drawer-user-summary > div:first-of-type > small { margin-top: 4px; color: rgba(255,255,255,.82); font-size: 12px; direction: ltr; text-align: right; }
.settings-panel .drawer-user-details { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 8px; }
.settings-panel .drawer-user-details > span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: rgba(255,255,255,.13);
}
.settings-panel .drawer-user-details small { color: rgba(255,255,255,.76); font-size: 10px; }
.settings-panel .drawer-user-details b { overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.settings-panel .current-role-card {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 11px 12px;
    border: 1px solid #cfe6df;
    border-radius: 12px;
    background: #edf7f3;
}
.settings-panel .current-role-card small { color: #56736b; font-size: 10px; }
.settings-panel .current-role-card strong { margin-top: 3px; color: var(--green-dark); font-size: 12px; }

/* سایدبار در هیچ عرضی تمام‌صفحه نیست؛ لایهٔ پشت آن با لمس بسته می‌شود. */
@media (max-width: 460px) {
    .settings-panel { width: min(88vw, 360px); max-width: 360px; border-radius: 20px 0 0 20px; }
}
.settings-panel .drawer-menu-list { gap: 4px !important; margin: 8px 0 !important; }
.settings-panel .drawer-menu-item { min-height: 36px !important; padding: 5px 8px !important; gap: 8px; }
.settings-panel .drawer-menu-item .drawer-menu-icon { width: 22px; height: 22px; border-radius: 7px; }
.settings-panel .drawer-menu-item > span:nth-child(2) { font-size: 11px; }
.settings-panel .drawer-menu-item > b { font-size: 17px; }
.settings-panel .drawer-logout { margin-top: 10px; padding: 9px; border-radius: 11px; gap: 6px; font-size: 12px; }
.settings-panel .drawer-logout-icon { width: 20px; height: 20px; }
.bank-selector-field select { width: 100%; min-height: 30px; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: 13px; }
.bank-preview-modal-card { max-width: 430px; }
.bank-preview-card { margin: 8px auto 14px; }

/* بازطراحی مدیریت کارت‌های بانکی */
.bank-accounts-root { width: 100%; max-width: none; margin-inline: 0; }
.bank-accounts-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.bank-add-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.bank-add-button::before {display: none !important;}
.bank-add-button .bank-add-icon {width: 40px; height: 30px; object-fit: contain; vertical-align: middle; flex-shrink: 0;}
.saved-bank-card {
    min-height: 0;
    aspect-ratio: 16 / 9;
    box-sizing: border-box;
}
.saved-bank-card-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    gap: 4px;
    min-height: 38px;
    padding: 7px 4px 7px 36px;
    border-radius: 10px;
    color: #163b53;
    background: #fff;
}
.saved-bank-card-head .bank-logo-library,
.saved-bank-card-head .bank-logo-fallback,
.saved-bank-card-head .bank-logo-custom {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
    background-color: transparent;
    box-shadow: none;
}
.saved-bank-card-head .bank-logo-custom { object-fit: contain; }
.saved-bank-card-head .bank-logo-fallback { color: #163b53; }
.saved-bank-card-head strong,
.saved-bank-card-holder {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.saved-bank-card-head strong { flex: 0 1 auto; max-width: 45%; color: #163b53; font-size: 11px; }
.saved-bank-card-holder { flex: 1 1 0; max-width: none; color: #587083; font-size: 10px; text-align: left; }
.saved-bank-card > small { display: none; }
.bank-card-menu-toggle {
    top: 50%;
    left: 5px;
    border-radius: 50%;
    color: #163b53;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    font-size: 16px;
    transform: translateY(-50%);
}
.bank-card-menu-toggle:focus { outline: none; }
.bank-card-menu-toggle:focus-visible { box-shadow: inset 0 0 0 2px rgba(22, 59, 83, .45); }
.bank-default-star {
    top: auto;
    right: 12px;
    bottom: 10px;
    font-size: 18px;
}
.saved-bank-card-number { direction: ltr; unicode-bidi: plaintext; }
.saved-bank-card-iban { direction: ltr; unicode-bidi: plaintext; }
.saved-bank-card-number { margin-top: 30px; font-size: clamp(17px, 5vw, 22px); }
.saved-bank-card-iban { margin-top: 11px; }
.bank-preview-modal-card { max-width: 430px; }
.bank-preview-card { margin: 8px auto 14px; }
.bank-preview-card .saved-bank-card-head .bank-logo-library,
.bank-preview-card .saved-bank-card-head .bank-logo-fallback,
.bank-preview-card .saved-bank-card-head .bank-logo-custom { margin: 0; transform: none; }
.bank-page .bank-mode-switch { border: 1px solid #d5e5e2; box-shadow: inset 0 1px 2px rgba(0,0,0,.04); }
.bank-page .bank-mode-button {
    color: #31566b;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    font-weight: 700;
}
.bank-page .bank-mode-button:focus { outline: none; }
.bank-page .bank-mode-button:focus-visible { box-shadow: inset 0 0 0 2px rgba(15, 141, 133, .55); }
.bank-page .bank-mode-button.active:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .72); }
.bank-page .bank-mode-button.active { color: #fff; background: linear-gradient(135deg, var(--green), #0f8d85); }
.bank-page .outlined-bank-field:focus-within { border-color: #0f8d85; box-shadow: 0 0 0 3px rgba(15,141,133,.12); }
.bank-page .outlined-bank-field input::placeholder { color: #9aaab2; opacity: .75; }
.bank-page .bank-scan-button { transition: background .15s ease, transform .15s ease; }
.bank-page .bank-scan-button:hover { background: #f0faf7; }
.bank-page .bank-scan-button:active { transform: scale(.98); }
@media (max-width: 560px) {
  .bank-page { padding: 14px; }
  .bank-accounts-list { grid-template-columns: 1fr; }
  .saved-bank-card { min-height: 0; padding: 12px; }
  .saved-bank-card-head { gap: 3px; min-height: 36px; padding: 6px 4px 6px 34px; }
  .saved-bank-card-head strong { max-width: 42%; font-size: 10px; }
  .saved-bank-card-holder { font-size: 10px; }
  .saved-bank-card-number { font-size: 19px; letter-spacing: 1.5px; }
}
/* Move member call button slightly left */
.member-obligation-row .member-call-button {
    margin-left: -6px !important;
    transform: none !important;
}

/* Move red obligation badge */
.management-obligation-row .member-ob-badge {
    position: absolute !important;
    top: 7px !important;
    left: 70px !important;
    z-index: 5 !important;
}

.outlined-field--with-icon {
    position: relative;
}

    .outlined-field--with-icon .field-inline-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        height: 48%; /* خودکار نسبت به ارتفاع فیلد */
        width: auto; /* نسبت تصویر حفظ می‌شود */
        max-height: 20px; /* سقف اندازه */
        min-height: 14px; /* کف اندازه */
        object-fit: contain;
        z-index: 3;
        pointer-events: none;
    }


    /* خط عمودی */
    .outlined-field--with-icon::after {
        content: "";
        position: absolute;
        right: 40px; /* کمی بعد از آیکون */
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 24px;
        background-color: #0b6f8d; /* فعلاً پررنگ برای تست */
        z-index: 3;
        pointer-events: none;
        opacity: 1;
    }

    .outlined-field--with-icon input {
        padding-right: 56px; /* فاصله متن از آیکون+خط */
    }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #1f2937 !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* اگر هاله فوکوس هم زیادی روشنه، ملایم‌ترش کن */
.auth-card input:focus,
.outlined-field input:focus {
    box-shadow: 0 0 0 2px rgba(12, 148, 168, 0.10);
}

.auth-card input:focus,
.outlined-field input:focus {
    box-shadow: none;
    outline: none;
}

/* Modern authentication experience */
body:has(#auth-screen:not(.hidden)) { background: #eef5fb; }
#bale-user-connection { display: none !important; }
.auth-screen {
    position: relative;
    isolation: isolate;
    width: min(100%, 460px);
    min-height: 100dvh;
    overflow: hidden;
    padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
    background:
        radial-gradient(circle at 8% 4%, rgba(91, 195, 214, .42) 0, transparent 34%),
        radial-gradient(circle at 96% 20%, rgba(51, 95, 186, .28) 0, transparent 36%),
        linear-gradient(155deg, #e9f5fb 0%, #f8fbfe 48%, #eef5fa 100%);
}
.auth-screen::before,
.auth-screen::after { position: absolute; z-index: -1; content: ""; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.auth-screen::before { width: 230px; height: 230px; top: -128px; right: -108px; background: rgba(22, 72, 143, .16); }
.auth-screen::after { width: 180px; height: 180px; left: -110px; bottom: 24px; background: rgba(12, 132, 145, .12); }
.flat-auth-view {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0 auto;
    padding: 18px 17px 14px;
    border: 1px solid rgba(255, 255, 255, .84);
    border-radius: 24px;
    background: rgba(255, 255, 255, .87);
    box-shadow: 0 18px 45px rgba(16, 51, 103, .14), inset 0 1px 0 rgba(255, 255, 255, .88);
    text-align: center;
    backdrop-filter: blur(12px);
    animation: auth-modern-enter .48s cubic-bezier(.22, .74, .24, 1) both;
}
@keyframes auth-modern-enter { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.auth-app-brand {
    width: 100%;
    margin: 10px 0 16px;
}
.auth-app-brand img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
    object-fit: contain;
}
.auth-step-icon { display: none; }
.flat-auth-view h1 { margin: 7px 0 5px; color: #173d72; font-size: 18px; }
.flat-auth-view > p { max-width: 290px; margin: 0 auto; color: #607985; font-size: 11px; line-height: 1.85; }
.flat-auth-view .outlined-field { margin: 17px 0 8px; padding: 12px 13px 6px; border: 1px solid #c8dfe7; border-radius: 13px; background: #fbfeff; box-shadow: inset 0 1px 2px rgba(20, 68, 106, .03); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.flat-auth-view .outlined-field:focus-within { border-color: #147f9d; background: #fff; box-shadow: 0 0 0 3px rgba(20, 127, 157, .11); }
.flat-auth-view .outlined-field > span { right: 11px; top: -9px; padding: 0 6px; color: #24647e; background: #fbfeff; font-size: 10px; font-weight: 700; }
.flat-auth-view .outlined-field input { min-height: 24px; color: #173d54; font-size: 14px; }
.flat-auth-view #auth-submit,
.flat-auth-view #account-submit { min-height: 46px; margin-top: 13px; border-radius: 13px; background: linear-gradient(135deg, #0b7b91, #173f8a); box-shadow: 0 9px 17px rgba(21, 67, 140, .22); font-size: 13px; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.flat-auth-view #auth-submit:not(:disabled):active,
.flat-auth-view #account-submit:not(:disabled):active { transform: translateY(1px) scale(.99); box-shadow: 0 5px 10px rgba(21, 67, 140, .18); }
.flat-auth-view #auth-submit:disabled { color: rgba(255,255,255,.78); background: #9db7c2; box-shadow: none; opacity: 1; }
.flat-auth-view .form-message { min-height: 18px; margin: 7px 0 -2px !important; color: #a65d20 !important; font-size: 10px; line-height: 1.7; }
.flat-auth-view .terms-hint { color: #6e818b; font-size: 10px; line-height: 1.8; }
.flat-auth-view .terms-hint a { color: #1b6e89; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.flat-auth-view .text-button { margin-top: 10px; color: #185f82; font-size: 11px; font-weight: 700; }
.flat-auth-view .login-password-pin { gap: 10px; padding: 3px 0; }
.flat-auth-view .login-password-digit { width: 48px; height: 48px; border: 1px solid #bddae3; border-radius: 13px; color: #173d72; background: #fbfeff; box-shadow: inset 0 1px 2px rgba(20, 68, 106, .03); }
.flat-auth-view .login-password-digit:focus { border-color: #147f9d; box-shadow: 0 0 0 3px rgba(20, 127, 157, .11); }
.flat-auth-view #otp-code { color: #173d72; letter-spacing: 7px; }
.flat-auth-view .account-fields { display: grid; gap: 12px; margin-top: 15px; text-align: right; }
.flat-auth-view .account-fields .outlined-field { margin: 0; }
.flat-auth-view .account-fields .field-error { margin: -4px 2px 0; }
.flat-auth-view .account-fields .gender-mode-switch { width: 100%; margin: 0; border-color: #c8dfe7; background: #f5fafc; }
.flat-auth-view .account-fields .gender-mode-button { padding: 8px 10px; font-size: 11px; }
#otp-auth-view {
    min-height: 0;
    height: auto;
    padding-bottom: 14px;
}
#otp-auth-view > .terms-hint { margin: 14px 0 0; padding-top: 0; }
#user-account-view { justify-content: flex-start; }
.auth-screen:has(#user-account-view:not(.hidden)) .auth-app-brand { margin-bottom: 8px; }
.auth-account-change-number { align-self: center; margin: 4px 0 0; padding: 4px 8px; border: 0; color: #185f82; background: transparent; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.auth-account-change-number:hover { color: #0b7b91; text-decoration: underline; text-underline-offset: 3px; }
@media (max-height: 690px) {
    .flat-auth-view { min-height: 0; padding-top: 12px; }
    .auth-app-brand { margin-top: 6px; margin-bottom: 10px; }
    .flat-auth-view h1 { margin-top: 4px; }
    .flat-auth-view .outlined-field { margin-top: 12px; }
}

/* حذف کادر داخلی کم‌رنگ input */
.outlined-field input,
.outlined-field input:focus,
.outlined-field input:active,
.outlined-field input:visited {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

    /* حذف استایل autofill که گاهی کادر داخلی هم می‌سازد */
    .outlined-field input:-webkit-autofill,
    .outlined-field input:-webkit-autofill:hover,
    .outlined-field input:-webkit-autofill:focus,
    .outlined-field input:-webkit-autofill:active {
        -webkit-text-fill-color: #1f2937 !important;
        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
        box-shadow: 0 0 0 1000px transparent inset !important;
        border: none !important;
        outline: none !important;
        background: transparent !important;
        transition: background-color 5000s ease-in-out 0s;
    }

/* کارت خالی وسط‌چین */
.funds-empty-state {
    width: min(100%, 430px);
    margin: 80px auto 0 auto !important;
    padding: 30px 20px;
    border: none;
    border-radius: 26px;
    background: rgba(255,255,255,.72);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* دکمه دایره‌ای حرفه‌ای */
#funds-empty-create-button {
    width: 178px !important;
    height: 178px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.14), transparent 30%), linear-gradient(180deg, #193765 0%, #142f57 100%) !important;
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 8px auto 0 !important;
    padding: 26px 20px !important;
    text-align: center !important;
    font-size: 0 !important; /* متن اصلی را کنترل‌شده با line-height می‌چینیم */
    font-weight: 800 !important;
    box-shadow: 0 18px 40px rgba(20, 47, 87, 0.24), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -10px 18px rgba(0,0,0,0.08) !important;
    cursor: pointer !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease !important;
}

    /* لایه‌ی نور خیلی نرم */
    #funds-empty-create-button::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10), transparent 58%);
        pointer-events: none;
    }

    /* علامت + داخل هاله */
    #funds-empty-create-button::before {
        content: "+";
        width: 54px;
        height: 54px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 34px;
        line-height: 1;
        font-weight: 300;
        color: #ffffff;
        background: rgba(255,255,255,0.10);
        border: 1px solid rgba(255,255,255,0.14);
        box-shadow: 0 8px 18px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.10);
        margin-bottom: 2px;
        z-index: 1;
    }

/* متن دکمه: دو خطی و متقارن */
#funds-empty-create-button {
    line-height: 0 !important;
}

#funds-empty-create-button {
    white-space: normal !important;
}

    #funds-empty-create-button span {
        display: none;
    }

/* متن خود دکمه را دو خطی و کنترل‌شده نمایش بده */
#funds-empty-create-button {
    font-size: 15px !important;
    line-height: 1.85 !important;
    letter-spacing: 0 !important;
}

/* برای اینکه متن دقیقاً جمع‌وجور و متقارن شود */
#funds-empty-create-button {
    text-wrap: balance;
}

    /* حالت hover */
    #funds-empty-create-button:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 24px 52px rgba(20, 47, 87, 0.30), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -10px 18px rgba(0,0,0,0.08) !important;
        filter: saturate(1.03);
    }

    /* حالت active */
    #funds-empty-create-button:active {
        transform: translateY(0) scale(0.985);
    }

    /* فوکوس تمیز */
    #funds-empty-create-button:focus,
    #funds-empty-create-button:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 4px rgba(11, 111, 141, 0.15), 0 18px 40px rgba(20, 47, 87, 0.24), inset 0 1px 0 rgba(255,255,255,0.10) !important;
    }

#management-members-button {
    display: inline-flex !important;
    flex-direction: row-reverse !important; /* معکوس کردن جهت آیکون و متن */
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 2px 10px !important;
    border-radius:50px;
}

/* استایل اختصاصی دکمه نباید کلاس عمومی hidden را خنثی کند. */
#management-members-button.hidden {
    display: none !important;
}

#management-members-button:disabled {
    opacity: 0.46;
    cursor: not-allowed;
}

#management-members-button .btn-icon {
        width: 34px;
        height: 34px;
        object-fit: contain;
        display: block;
        margin: 0 !important;
    }

.add-member-trigger {
    display: inline-flex !important;
    flex-direction: row-reverse !important; /* معکوس کردن جهت آیکون و متن */
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 2px 10px !important;
    border-radius: 50px;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

.add-member-trigger:focus,
.add-member-trigger:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

    .add-member-trigger .btn-icon {
        width: 32px;
        height: 32px;
        object-fit: contain;
        display: block;
        margin: 0 !important;
    }

.contact-picker-button {
    position: absolute;
    left: 5px;
    top: 9px; /* مقدار قبلی ۶ بود، ۸ یا ۹ باعث می‌شود آیکون از بالا فاصله بگیرد */
    width: 27px;
    height: 27px;
    border: 0;
    border-radius: 9px;
    color: var(--green-dark);
    background:none;
    cursor: pointer;
    font-size: 14px;
    /* این بخش برای اطمینان از وسط بودن آیکون در دکمه */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .contact-picker-button:active {
        transform: scale(0.92);
    }

.contact-picker-icon {
    width: 25px; /* کمی کوچک‌تر برای اینکه در فضای ۲۷ پیکسلی قشنگ‌تر بنشیند */
    height: 25px;
    object-fit: contain;
    pointer-events: none;
}

#messages-date-filter-apply,
#messages-date-filter-clear {
    height: 40px; /* مقدار دلخواه */
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.gender-selection {
    display: flex;
    gap: 16px;
    margin-top: 2px;
    padding: 8px;
    background: #f9f9f9;
    border-radius: 10px;
}
.account-gender-selection, .profile-gender-selection {
    justify-content: center;
    margin: 0;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 14px;
}

/* ناوبری دارای فرورفتگی SVG: دایره و حفره با مختصات واقعی آیتم فعال حرکت می‌کنند. */
.bottom-nav {
    --nav-ink: #193f8a;
    --bottom-nav-surface: #ffffff;
    position: fixed;
    bottom: 0;
    left: 50%;
    width: min(calc(100% - 28px), 450px);
    height: 60px;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    padding: 8px 7px calc(4px + env(safe-area-inset-bottom));
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}
.bottom-nav-shape {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 4px rgba(0, 180, 255, .48));
}
.bottom-nav-shape rect { fill: var(--bottom-nav-surface) !important; }
.bottom-nav-shape path { stroke: #00b8ff !important; stroke-width: 2.2px; }
.bottom-nav-fab {
    position: absolute;
    z-index: 1;
    top: -16px;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bottom-nav-surface);
    border: 2px solid #00b8ff;
    box-shadow: none;
    transition: left .36s cubic-bezier(.175,.885,.32,1.18);
    pointer-events: none;
}
.bottom-nav-fab-icon {
    position: absolute;
    z-index: 5;
    top: -2px;
    width: 27px;
    height: 27px;
    object-fit: contain;
    filter: none;
    pointer-events: none;
}
.bottom-nav button {
    position: relative;
    z-index: 3;
    min-width: 0;
    height: 48px;
    border: 0;
    color: var(--nav-ink);
    background: transparent;
    cursor: pointer;
    padding: 4px 2px 1px;
    font: inherit;
    font-size: 10px;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav button span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1.3;
    margin-top: 4px;
}
.bottom-nav .nav-icon {
    display: block;
    width: 26px;
    height: 26px;
    margin: 0 auto;
    object-fit: contain;
    opacity: .72;
    transition: opacity .2s ease;
}
.bottom-nav button.active { color: var(--nav-ink); font-weight: 800; background: transparent; }
.bottom-nav button.active .nav-icon { opacity: 0; }
.bottom-nav button:focus-visible { outline: 3px solid rgba(20, 126, 155, .35); outline-offset: -2px; }
.bottom-nav button:disabled { opacity: .38; cursor: not-allowed; pointer-events: none; }
@media (max-width: 350px) {
    .bottom-nav { width: calc(100% - 16px); }
    .bottom-nav button span { font-size: 9px; }
    .bottom-nav-fab { width: 50px; height: 50px; top: -10px; }
    .bottom-nav-fab-icon { width: 24px; height: 24px; }
}

/* باید پس‌زمینه دایره انتخاب‌شده و سطح کارت دقیقاً یک رنگ داشته باشند. */
.bottom-nav {
    --bottom-nav-surface: #ffffff;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    transform: none;
    border-radius: 0;
    margin: 0;
    padding-bottom: 4px;
}
.bottom-nav-shape rect { fill: #ffffff !important; opacity: 1; }
.bottom-nav-fab { background-color: #ffffff !important; opacity: 1; }

/* گزارش‌های مالی صندوق */
.reports-view { display: grid; gap: 12px !important; padding-bottom: 28px; }
.report-filter-card--finance { margin: 0 !important; padding: 14px !important; border: 1px solid #dce7f5; background: linear-gradient(145deg, #f8fbff, #fff); box-shadow: 0 10px 24px rgba(16, 46, 109, .08); }
.report-filter-card--finance .section-heading { align-items: center; margin: 0 0 12px; }
.report-section-kicker { margin: 0 0 3px; color: #5573a4; font-size: 10px; font-weight: 800; }
.report-filter-card--finance .section-heading h2 { color: #102e6d; font-size: 15px; }
.report-filter-card--finance .report-filter-fields { display: grid; gap: 10px; margin: 0; }
.report-filter-card--finance .report-filter-grid { margin: 0; }
.report-filter-card--finance .report-selection-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-filter-card--finance .form-label { gap: 5px; color: #50627d; font-size: 10px; }
.report-filter-card--finance .form-input, .report-filter-card--finance .form-select { min-height: 38px; border-color: #d4e0f2; border-radius: 10px; background: #fff; font-size: 12px; }
.report-filter-card--finance .primary-button { margin-top: 0; min-height: 40px; border-radius: 10px; background: #173f8b; }
.report-filter-card--finance #report-download-button { min-height: 34px; border-color: #b9ccec; color: #173f8b; background: #fff; font-size: 11px; }
.report-financial-overview { margin-top: 0; border-color: #dce7f5; background: linear-gradient(145deg, #fff, #f8fbff); }
.report-financial-overview .section-heading, .report-transactions-card .section-heading, .report-members-card .section-heading, .report-loans-card .section-heading { align-items: center; }
.report-financial-overview h2, .report-transactions-card h2, .report-members-card h2, .report-loans-card h2 { color: #102e6d; font-size: 15px; }
.report-range-label { padding: 5px 8px; border-radius: 8px; color: #375584; background: #edf4ff; font-size: 10px; text-align: left; }
.report-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.report-financial-metric { position: relative; min-width: 0; padding: 12px; overflow: hidden; border: 1px solid #e0eaf7; border-radius: 14px; background: #fff; }
.report-financial-metric::before { position: absolute; top: 0; right: 0; width: 4px; height: 100%; content: ""; border-radius: 4px; background: #173f8b; }
.report-financial-metric span { display: block; overflow: hidden; color: #61718a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.report-financial-metric strong { display: block; margin-top: 7px; overflow: hidden; color: #102e6d; font-size: clamp(12px, 3.5vw, 15px); text-overflow: ellipsis; white-space: nowrap; }
.report-financial-metric--incoming::before { background: #16856c; }
.report-financial-metric--outgoing::before { background: #bd5a54; }
.report-financial-metric--balance::before { background: #3d79d2; }
.report-financial-metric--members::before, .report-financial-metric--shares::before { background: #d18b21; }
.report-financial-metric--fund-fee::before { background: #8d5cc6; }
.report-financial-metric--subscription::before { background: #0b8da8; }
.report-financial-metric--balance { grid-column: 1 / -1; }
.report-transactions-card, .report-members-card, .report-loans-card { border-color: #e0e8f2; }
.report-count-badge { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; color: #173f8b; background: #eaf1ff; font-size: 12px; font-weight: 800; }
.report-card-actions { display: inline-flex; align-items: center; gap: 5px; }
.report-card-toggle { display: flex; align-items: center; justify-content: space-between; min-width: 0; flex: 1 1 auto; gap: 8px; padding: 0; border: 0; color: inherit; background: transparent; text-align: right; cursor: pointer; }
.report-card-toggle > span { min-width: 0; }
.report-card-toggle b { display: inline-grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 8px; color: #375584; background: #edf4ff; font-size: 18px; line-height: 1; transition: transform .2s ease; }
.report-card-toggle[aria-expanded="true"] b { transform: rotate(180deg); }
.report-collapsible-content { padding-top: 4px; }
.report-export-button { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 4px; border: 1px solid #d4e0f2; border-radius: 8px; background: #fff; cursor: pointer; }
.report-export-button:hover { border-color: #173f8b; background: #edf4ff; }
.report-export-button img { width: 18px; height: 18px; object-fit: contain; }
.report-financial-list { display: grid; gap: 7px; }
.report-financial-transaction { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf1f6; }
.report-financial-transaction:last-child { border-bottom: 0; padding-bottom: 0; }
.report-transaction-main { display: flex; align-items: center; min-width: 0; gap: 8px; }
.report-transaction-direction { display: block; width: 28px; height: 28px; flex: 0 0 28px; line-height: 1; }
.report-transaction-direction img { display: block; width: 100%; height: 100%; object-fit: contain; }
.report-transaction-main div { min-width: 0; }
.report-transaction-main strong, .report-transaction-main span, .report-transaction-amount b, .report-transaction-amount span { display: block; }
.report-transaction-main strong { overflow: hidden; color: #20334f; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.report-transaction-main span { overflow: hidden; margin-top: 3px; color: #748198; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.report-transaction-amount { flex: 0 0 auto; text-align: left; }
.report-transaction-amount b { color: #16856c; font-size: 11px; white-space: nowrap; }
.report-financial-transaction.is-outgoing .report-transaction-amount b { color: #bd5a54; }
.report-transaction-amount span { margin-top: 3px; color: #7c879a; font-size: 9px; white-space: nowrap; }
.report-members-financial-list { display: grid; gap: 9px; }
.report-member-financial-card { overflow: hidden; border: 1px solid #e1e9f3; border-radius: 14px; background: #fff; }
.report-member-financial-card[open] { border-color: #b9ccec; box-shadow: 0 8px 18px rgba(16, 46, 109, .07); }
.report-member-financial-card summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; cursor: pointer; list-style: none; }
.report-member-financial-card summary::-webkit-details-marker { display: none; }
.report-member-heading { min-width: 0; }
.report-member-heading strong, .report-member-heading span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-member-heading strong { color: #1e3150; font-size: 13px; }
.report-member-heading span { margin-top: 4px; color: #75839a; font-size: 10px; direction: ltr; text-align: right; }
.report-member-summary-values { display: grid; justify-items: end; gap: 4px; flex: 0 0 auto; }
.report-member-summary-values span { color: #557096; font-size: 10px; }
.report-member-summary-values b { padding: 3px 7px; border-radius: 7px; color: #173f8b; background: #edf3ff; font-size: 9px; }
.report-member-financial-content { padding: 0 12px 12px; border-top: 1px solid #eaf0f6; }
.report-member-export-actions { display: flex; justify-content: flex-end; gap: 5px; margin-top: 10px; }
.report-member-profile-grid, .report-member-financial-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.report-member-profile-grid > span, .report-member-financial-totals > span { display: grid; gap: 4px; min-width: 0; padding: 8px; border-radius: 9px; background: #f7faff; }
.report-member-profile-grid small, .report-member-financial-totals small { color: #718098; font-size: 9px; }
.report-member-profile-grid b, .report-member-financial-totals b { overflow: hidden; color: #263a58; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.report-member-financial-totals > span:first-child { background: #effaf6; }
.report-member-financial-totals > span:last-child { background: #fff4f2; }
.report-member-financial-totals > span:first-child b { color: #16856c; }
.report-member-financial-totals > span:last-child b { color: #bd5a54; }
.report-member-financial-totals > .report-member-creditor-total { background: #effaf6; }
.report-member-financial-totals > .report-member-creditor-total b { color: #16856c; }
.report-member-financial-totals > .report-member-debtor-total { background: #fff4f2; }
.report-member-financial-totals > .report-member-debtor-total b { color: #bd5a54; }
.cash-balance-creditors-modal-card { max-width: 620px; }
.cash-balance-summary {
    margin: 6px 0 16px;
    padding: 18px 20px;
    color: #eaf8f1;
    background: linear-gradient(135deg, #126b57, #1d9277);
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(18, 107, 87, .2);
}
.cash-balance-summary span, .cash-balance-summary small { display: block; }
.cash-balance-summary span { font-size: .86rem; opacity: .86; }
.cash-balance-summary strong { display: block; margin: 6px 0; font-size: 1.45rem; color: #fff; }
.cash-balance-summary small { font-size: .78rem; opacity: .82; }
.cash-balance-creditors-list { display: grid; gap: 10px; max-height: 340px; overflow: auto; padding: 2px; }
.cash-balance-creditor {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #f8fcfa;
    border: 1px solid #dceee6;
    border-radius: 14px;
}
.cash-balance-creditor-info { min-width: 0; flex: 1; }
.cash-balance-creditor-name { display: block; color: #1b3c32; font-weight: 800; }
.cash-balance-creditor-credit { display: block; margin-top: 4px; color: #47766a; font-size: .83rem; }
.cash-balance-creditor .primary-button { flex: 0 0 auto; width: auto; min-width: 112px; margin: 0; padding: 10px 16px; white-space: nowrap; }
.cash-balance-creditors-empty { margin: 8px 0; padding: 18px; color: #6b7d77; text-align: center; background: #f8faf9; border-radius: 14px; }
@media (max-width: 520px) {
    .cash-balance-creditor { align-items: stretch; flex-direction: column; }
    .cash-balance-creditor .primary-button { width: 100%; }
}
.report-member-ledger { margin-top: 12px; }
.report-member-ledger h4 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; color: #304563; font-size: 11px; }
.report-member-ledger h4 span { padding: 2px 6px; border-radius: 6px; color: #61718a; background: #f0f4f9; font-size: 9px; }
.report-member-timeline { display: grid; gap: 4px; }
.report-member-timeline-row { display: grid; grid-template-columns: 1fr auto auto; gap: 7px; align-items: center; padding: 7px 0; border-bottom: 1px dashed #e5ebf2; }
.report-member-timeline-row:last-child { border-bottom: 0; }
.report-member-timeline-row > span, .report-member-timeline-row small { color: #718098; font-size: 9px; }
.report-member-timeline-row b { color: #16856c; font-size: 10px; white-space: nowrap; }
.report-member-timeline-row.is-loan b { color: #bd5a54; }
.report-member-timeline-row small { text-align: left; white-space: nowrap; }
.report-member-empty, .report-empty-state { margin: 0; padding: 12px; border-radius: 10px; color: #6f7e94; background: #f6f8fb; font-size: 11px; text-align: center; }
.report-print-branding { display: none; }
@media (max-width: 390px) {
    .report-filter-card--finance .report-selection-filter-grid { grid-template-columns: 1fr; }
    .report-financial-metric { padding: 10px; }
    .report-financial-metric strong { font-size: 11px; }
    .report-transaction-main span { max-width: 125px; }
    .report-member-timeline-row { grid-template-columns: 1fr auto; }
    .report-member-timeline-row small { grid-column: 1 / -1; text-align: right; }
}
@media print {
    .report-print-branding { display: block !important; position: fixed; top: 0; left: 0; z-index: 1; direction: ltr; }
    .report-print-branding img { display: block; width: 52px; height: 52px; object-fit: contain; }
    .reports-view { padding-top: 58px !important; }
    .report-member-financial-card:not([open]) > :not(summary) { display: block; }
    .report-member-financial-card, .report-financial-transaction { break-inside: avoid; }
}

/* First fund onboarding */
#funds-view .funds-empty-state {
    position: relative;
    isolation: isolate;
    width: min(100%, 720px);
    min-height: 330px;
    margin: clamp(42px, 10vh, 110px) auto 0 !important;
    padding: clamp(28px, 5vw, 46px);
    overflow: hidden;
    border: 1px solid rgba(32, 95, 122, .16);
    border-radius: 30px;
    background:
        radial-gradient(circle at 94% 8%, rgba(42, 154, 152, .18), transparent 30%),
        radial-gradient(circle at 5% 95%, rgba(34, 92, 153, .13), transparent 35%),
        linear-gradient(135deg, #f8fcfe 0%, #f3faf8 100%);
    box-shadow: 0 22px 52px rgba(20, 61, 88, .11);
    text-align: right;
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    grid-template-areas:
        "art copy"
        "art action";
    column-gap: clamp(24px, 5vw, 52px);
    row-gap: 23px;
    align-items: center;
}

#funds-view .funds-empty-state::before,
#funds-view .funds-empty-state::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 170px;
    height: 170px;
    border: 1px solid rgba(31, 111, 137, .11);
    border-radius: 42px;
    transform: rotate(25deg);
}

#funds-view .funds-empty-state::before { top: -98px; left: -71px; }
#funds-view .funds-empty-state::after { right: -84px; bottom: -108px; }

#funds-view .funds-empty-art {
    grid-area: art;
    position: relative;
    display: grid;
    place-items: center;
    width: 132px;
    height: 152px;
    border: 1px solid rgba(25, 103, 125, .19);
    border-radius: 28px 28px 42px 28px;
    color: #176c87;
    background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(219, 245, 242, .78));
    box-shadow: 0 14px 28px rgba(18, 94, 118, .14), inset 0 1px 0 #fff;
}

#funds-view .funds-empty-art svg { width: 86px; height: 86px; }

#funds-view .funds-empty-art-spark {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 4px;
    background: #e6a334;
    box-shadow: 0 4px 9px rgba(172, 108, 12, .24);
}

#funds-view .funds-empty-art-spark-one { top: 21px; right: 17px; transform: rotate(18deg); }
#funds-view .funds-empty-art-spark-two { bottom: 19px; left: 17px; width: 7px; height: 7px; border-radius: 50%; background: #238fa1; }

#funds-view .funds-empty-copy { grid-area: copy; min-width: 0; }
#funds-view .funds-empty-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 10px;
    border-radius: 999px;
    color: #207365;
    background: rgba(39, 145, 121, .11);
    font-size: 11px;
    font-weight: 800;
}

#funds-view .funds-empty-state h2 {
    margin: 10px 0 0;
    color: #163c56;
    font-size: clamp(21px, 3vw, 27px);
    line-height: 1.45;
}

#funds-view .funds-empty-state p {
    max-width: 430px;
    margin: 8px 0 0;
    color: #607a86;
    font-size: 13px;
    line-height: 2;
}

#funds-view #funds-empty-create-button {
    grid-area: action;
    width: min(100%, 400px) !important;
    height: auto !important;
    min-height: 70px;
    margin: 0 !important;
    padding: 10px 14px 10px 12px !important;
    border: 1px solid rgba(10, 102, 116, .18) !important;
    border-radius: 18px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #126c79, #15588a) !important;
    box-shadow: 0 13px 24px rgba(17, 88, 128, .24), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
    display: grid !important;
    grid-template-columns: 43px minmax(0, 1fr) 22px;
    gap: 10px !important;
    align-items: center !important;
    text-align: right !important;
    font-size: inherit !important;
    line-height: normal !important;
    overflow: visible;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

#funds-view #funds-empty-create-button::before,
#funds-view #funds-empty-create-button::after { content: none; }
#funds-view #funds-empty-create-button:hover { transform: translateY(-3px); box-shadow: 0 18px 30px rgba(17, 88, 128, .3), inset 0 1px 0 rgba(255, 255, 255, .16) !important; filter: saturate(1.08); }
#funds-view #funds-empty-create-button:active { transform: translateY(0); }
#funds-view #funds-empty-create-button:focus-visible { outline: 4px solid rgba(30, 133, 152, .22) !important; outline-offset: 3px; }

#funds-view .funds-empty-create-icon {
    display: grid !important;
    place-items: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 13px;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
}

#funds-view .funds-empty-create-label { display: grid !important; gap: 3px; min-width: 0; }
#funds-view .funds-empty-create-label strong { color: #fff; font-size: 14px; font-weight: 850; }
#funds-view .funds-empty-create-label small { color: rgba(255, 255, 255, .76); font-size: 10px; font-weight: 550; line-height: 1.55; }
#funds-view .funds-empty-create-arrow { display: block !important; color: rgba(255, 255, 255, .88); font-family: Arial, sans-serif; font-size: 23px; line-height: 1; text-align: left; }

@media (max-width: 560px) {
    #funds-view .funds-empty-state {
        min-height: 0;
        margin-top: 42px !important;
        padding: 29px 22px;
        grid-template-columns: 1fr;
        grid-template-areas: "art" "copy" "action";
        gap: 18px;
        text-align: center;
    }
    #funds-view .funds-empty-art { width: 104px; height: 112px; margin: 0 auto; border-radius: 24px 24px 34px 24px; }
    #funds-view .funds-empty-art svg { width: 70px; height: 70px; }
    #funds-view .funds-empty-state p { margin-right: auto; margin-left: auto; }
    #funds-view #funds-empty-create-button { width: 100% !important; }
}

/* Desktop workspace foundation */
@media (min-width: 1100px) {
    body {
        min-width: 900px;
        padding: 24px;
        background:
            radial-gradient(circle at 8% 4%, rgba(47, 155, 177, .10), transparent 29%),
            radial-gradient(circle at 93% 94%, rgba(32, 112, 142, .08), transparent 30%),
            #eef4f6;
    }

    #dashboard.app-shell {
        width: min(calc(100vw - 48px), 1280px);
        min-height: calc(100vh - 48px);
        margin: 0 auto;
        padding: 30px 144px 42px 42px;
        overflow: visible;
        border: 1px solid rgba(32, 82, 104, .12);
        border-radius: 30px;
        background: rgba(255, 255, 255, .83);
        box-shadow: 0 24px 60px rgba(28, 72, 92, .12);
        backdrop-filter: blur(18px);
    }

    #dashboard.app-shell .app-header {
        width: calc(100% + 84px);
        min-height: 72px;
        margin: -30px -42px 30px -42px;
        padding: 16px 30px;
        border-radius: 29px 29px 22px 22px;
    }

    #dashboard.app-shell .app-header h1 { font-size: 20px; }
    #dashboard.app-shell .app-header .header-actions-left { left: 28px; }
    #dashboard.app-shell .app-header .header-actions-right { gap: 8px; }

    #dashboard.app-shell .bottom-nav,
    #dashboard.app-shell.subpage-active .bottom-nav,
    #dashboard.app-shell.subscription-page-active .bottom-nav {
        position: fixed;
        z-index: 120;
        top: 50%;
        right: clamp(28px, calc(50vw - 622px), 320px);
        left: auto;
        bottom: auto;
        width: 92px;
        height: auto;
        padding: 10px 8px;
        transform: translateY(-50%);
        display: grid !important;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 1fr);
        gap: 5px;
        overflow: visible;
        border: 1px solid rgba(27, 81, 112, .14);
        border-radius: 20px;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 18px 38px rgba(18, 64, 92, .15);
        backdrop-filter: blur(16px);
    }

    #dashboard.app-shell .bottom-nav-shape,
    #dashboard.app-shell .bottom-nav-fab,
    #dashboard.app-shell .bottom-nav-fab-icon { display: none; }

    #dashboard.app-shell .bottom-nav button {
        display: grid;
        place-items: center;
        align-content: center;
        min-height: 66px;
        height: auto;
        padding: 7px 4px;
        border-radius: 14px;
        color: #315a76;
        transition: color .18s ease, background .18s ease, transform .18s ease;
    }

    #dashboard.app-shell .bottom-nav button:hover {
        color: #0c6378;
        background: #edf8f8;
        transform: translateX(-2px);
    }

    #dashboard.app-shell .bottom-nav button.active {
        color: #fff;
        background: linear-gradient(145deg, #167887, #17558a);
        box-shadow: 0 8px 16px rgba(22, 94, 132, .24);
    }

    #dashboard.app-shell .bottom-nav .nav-icon,
    #dashboard.app-shell .bottom-nav button.active .nav-icon {
        width: 25px;
        height: 25px;
        opacity: 1;
        filter: none;
        transform: none;
    }

    #dashboard.app-shell .bottom-nav button.active .nav-icon { filter: none; }
    #dashboard.app-shell .bottom-nav button span { margin-top: 5px; font-size: 10px; }

    #dashboard.app-shell .funds-list {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 20px;
        align-items: start;
    }

    #dashboard.app-shell .fund-card { min-height: 0; }
    #dashboard.app-shell .funds-empty-state { margin-top: clamp(56px, 11vh, 130px) !important; }

    #dashboard.app-shell .members-list,
    #dashboard.app-shell #members-list {
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        gap: 14px;
    }

    #dashboard.app-shell .transaction-filters,
    #dashboard.app-shell .report-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    #dashboard.app-shell .selection-modal-card {
        width: min(100%, 680px);
        max-width: 680px;
    }
}

/* Phase 5: keep compact report filters aligned on every mobile width. */
@media (max-width: 560px) {
    .report-filter-card--finance .report-selection-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .report-filter-card--finance .report-selection-filter-grid > .form-label {
        min-width: 0;
        width: 100%;
    }
}

/* Keep report period/cycle filters identical to the date-filter grid on mobile. */
@media (max-width: 699px) {
    #dashboard.app-shell .report-filter-card--finance .report-date-filter-grid,
    #dashboard.app-shell .report-filter-card--finance .report-selection-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    #dashboard.app-shell .report-filter-card--finance .report-date-filter-grid > .form-label,
    #dashboard.app-shell .report-filter-card--finance .report-selection-filter-grid > .form-label {
        grid-column: auto !important;
        min-width: 0;
        width: 100%;
    }

    #dashboard.app-shell .report-filter-card--finance .report-date-filter-grid .form-input,
    #dashboard.app-shell .report-filter-card--finance .report-selection-filter-grid .form-select {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: 38px;
        height: auto;
        line-height: 1.4;
    }
}

/* Phase 5: desktop fund cards use a plain white, outlined surface. */
@media (min-width: 1100px) {
    #dashboard.app-shell #funds-view .fund-card {
        border: 1px solid #102e6d !important;
        border-radius: 14px !important;
        background: #fff !important;
        background-image: none !important;
        box-shadow: none !important;
        transition: border-width .18s ease, border-color .18s ease;
    }

    #dashboard.app-shell #funds-view .fund-card:hover,
    #dashboard.app-shell #funds-view .fund-card.fund-card-selected-focus {
        transform: none;
        box-shadow: none !important;
        animation: none !important;
    }

    #dashboard.app-shell #funds-view .fund-card.selected {
        border: 3px solid #102e6d !important;
        border-top-width: 3px !important;
        background: #fff !important;
        background-image: none !important;
        box-shadow: none !important;
        animation: none !important;
    }

    #dashboard.app-shell.subscription-page-active #header-back-btn {
        display: none !important;
    }
}

/* Controls that represent selections must not flash a blue touch card. */
#dashboard.app-shell #create-fund-view .fund-cost-option,
#dashboard.app-shell #create-fund-view .fund-charter-radio-option,
#dashboard.app-shell #create-fund-view .first-loan-owner-choice,
#dashboard.app-shell #create-fund-view .fund-type-option,
#dashboard.app-shell .member-edit-toggle,
#member-role-modal .role-modal-option,
#role-permissions-settings .permission-role-radios label,
#role-permissions-settings .permission-option {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

#dashboard.app-shell #create-fund-view .fund-cost-option:active,
#dashboard.app-shell #create-fund-view .fund-charter-radio-option:active,
#dashboard.app-shell #create-fund-view .first-loan-owner-choice:active,
#dashboard.app-shell #create-fund-view .fund-type-option:active,
#dashboard.app-shell .member-edit-toggle:active,
#member-role-modal .role-modal-option:active,
#role-permissions-settings .permission-role-radios label:active,
#role-permissions-settings .permission-option:active {
    transform: none !important;
    box-shadow: none !important;
}

/* فضای کاری دسکتاپ: ناوبری بالا، سایدبار ثابت و بوم مرکزی مستقل */
@media (min-width: 1100px) {
    body {
        min-width: 0;
        padding: 0 0 28px;
        overflow-x: hidden;
        background:
            radial-gradient(circle at 9% 8%, rgba(47, 155, 177, .11), transparent 30%),
            radial-gradient(circle at 91% 92%, rgba(28, 86, 132, .09), transparent 32%),
            #edf4f6;
    }

    #dashboard.app-shell {
        --desktop-sidebar-width: clamp(240px, 22vw, 320px);
        --desktop-fund-rail-width: clamp(240px, 22vw, 320px);
        --desktop-rail-gap: 16px;
        --desktop-top-nav-height: 76px;
        --desktop-top-nav-gap: 16px;
        --desktop-workspace-top: calc(24px + var(--desktop-top-nav-height) + var(--desktop-top-nav-gap));
        box-sizing: border-box;
        position: fixed;
        top: var(--desktop-workspace-top);
        right: calc(24px + var(--desktop-sidebar-width) + var(--desktop-fund-rail-width) + var(--desktop-rail-gap) + var(--desktop-rail-gap));
        bottom: 24px;
        left: 24px;
        width: auto;
        min-height: 0;
        height: auto;
        margin: 0;
        padding: 24px;
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid rgba(32, 82, 104, .12);
        border-radius: 28px;
        background: rgba(255, 255, 255, .86);
        box-shadow: 0 24px 60px rgba(28, 72, 92, .12);
        backdrop-filter: none;
    }

    #dashboard.app-shell .app-header {
        box-sizing: border-box;
        width: 100%;
        min-height: 0;
        height: 0;
        margin: 0 0 106px;
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    #dashboard.app-shell .app-header::before,
    #dashboard.app-shell .app-header .page-title-row { display: none; }
    #dashboard.app-shell .app-header .header-actions-left { left: 22px; }
    #dashboard.app-shell .app-header .header-actions-right { gap: 10px; }
    #dashboard.app-shell .app-header .menu-button { display: none !important; }

    /* Desktop controls that previously lived in the navy header. */
    #dashboard.app-shell .app-header .fund-create-header-btn:not(.hidden) {
        position: fixed;
        z-index: 235;
        right: calc(24px + var(--desktop-sidebar-width) + var(--desktop-rail-gap));
        bottom: 32px;
        width: 46px;
        height: 46px;
        border: 1px solid rgba(18, 100, 126, .18);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 10px 24px rgba(18, 64, 92, .18);
    }

    #dashboard.app-shell .app-header .fund-create-header-btn:not(.hidden) svg {
        stroke: #0c7185 !important;
        filter: none !important;
    }

    #dashboard.app-shell .app-header .notification-bell-button {
        position: fixed;
        z-index: 260;
        top: 40px;
        right: calc(24px + var(--desktop-sidebar-width) - 60px);
        width: 44px;
        height: 44px;
        border: 1px solid rgba(32, 82, 104, .13);
        border-radius: 14px;
        color: #173d85;
        background: #f4fbfc;
        box-shadow: 0 8px 18px rgba(28, 72, 92, .12);
        filter: none !important;
    }

    #dashboard.app-shell .app-header .notification-bell-button > span {
        display: block;
        width: 22px;
        height: 22px;
        color: transparent;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7185' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat;
        filter: none !important;
    }

    #dashboard.app-shell .app-header .notification-bell-button:hover { background: #e7f5f7; }
    #dashboard.app-shell .notification-bell-count { border-color: #f4fbfc; }

    #dashboard.app-shell .notification-bell-modal {
        top: 94px;
        right: calc(24px + var(--desktop-sidebar-width) + var(--desktop-rail-gap));
        width: min(calc(100vw - var(--desktop-sidebar-width) - var(--desktop-fund-rail-width) - 96px), 385px);
        transform-origin: right top;
    }

    #dashboard.app-shell .header-back-btn:not(.hidden) {
        position: fixed;
        z-index: 230;
        top: 42px;
        left: 48px;
        border-radius: 12px;
        background-color: #fff;
        box-shadow: 0 8px 18px rgba(28, 72, 92, .12);
    }

    #dashboard.app-shell .settings-drawer,
    #dashboard.app-shell .settings-drawer.hidden {
        position: fixed;
        z-index: 240;
        top: 24px;
        right: 24px;
        bottom: 24px;
        left: auto;
        display: block !important;
        width: var(--desktop-sidebar-width);
        height: auto;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #dashboard.app-shell .settings-backdrop { display: none !important; }

    #dashboard.app-shell .settings-panel {
        position: static;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        height: 100%;
        padding: 20px 16px;
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid rgba(32, 82, 104, .13);
        border-radius: 26px;
        background: rgba(255, 255, 255, .95);
        box-shadow: 0 20px 48px rgba(28, 72, 92, .14);
        transform: none !important;
    }

    #dashboard.app-shell .drawer-close { display: none !important; }
    #dashboard.app-shell .drawer-brand-logo { width: 132px; }
    #dashboard.app-shell .drawer-user-summary { margin-bottom: 14px; }
    #dashboard.app-shell .drawer-menu-item { min-height: 46px !important; }

    #dashboard.app-shell .bottom-nav,
    #dashboard.app-shell.subpage-active .bottom-nav,
    #dashboard.app-shell.subscription-page-active .bottom-nav {
        position: fixed;
        z-index: 220;
        top: 24px;
        right: calc(24px + var(--desktop-sidebar-width) + var(--desktop-fund-rail-width) + var(--desktop-rail-gap) + var(--desktop-rail-gap));
        bottom: auto;
        left: 24px;
        box-sizing: border-box;
        display: grid !important;
        width: auto;
        min-height: 82px;
        height: auto;
        padding: 9px;
        transform: none;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: 1fr;
        gap: 8px;
        border: 1px solid rgba(33, 89, 119, .14);
        border-radius: 20px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 14px 30px rgba(18, 64, 92, .12);
        backdrop-filter: blur(16px);
    }

    #dashboard.app-shell .bottom-nav-shape,
    #dashboard.app-shell .bottom-nav-fab,
    #dashboard.app-shell .bottom-nav-fab-icon { display: none; }

    #dashboard.app-shell .bottom-nav button {
        display: grid;
        grid-template-columns: auto 1fr;
        place-items: center;
        align-content: center;
        min-height: 62px;
        padding: 10px 14px;
        border-radius: 14px;
        color: #315a76;
        transition: color .18s ease, background .18s ease, transform .18s ease;
    }

    #dashboard.app-shell .bottom-nav button:hover {
        color: #0c6378;
        background: #edf8f8;
        transform: translateY(-2px);
    }

    #dashboard.app-shell .bottom-nav button.active {
        color: #fff;
        background: linear-gradient(135deg, #167887, #17558a);
        box-shadow: 0 8px 16px rgba(22, 94, 132, .22);
    }

    #dashboard.app-shell .bottom-nav .nav-icon,
    #dashboard.app-shell .bottom-nav button.active .nav-icon {
        width: 31px;
        height: 31px;
        margin: 0;
        opacity: 1;
        transform: none;
    }

    #dashboard.app-shell .bottom-nav button.active .nav-icon { filter: none; }
    #dashboard.app-shell .bottom-nav button span { margin: 0 8px 0 0; font-size: 13px; font-weight: 700; }
    #dashboard.app-shell .bottom-nav button[data-section="funds"] { display: none !important; }

    /* Keep default section sizing below the fund workspace width override. */
    #dashboard.app-shell > section:where(:not(.notification-bell-modal):not(.selection-modal):not(.app-modal)) {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    #dashboard.app-shell .funds-list {
        grid-template-columns: repeat(auto-fill, minmax(340px, 430px));
        justify-content: start;
        gap: 20px;
        align-items: start;
    }

    #dashboard.app-shell .fund-card {
        width: 100%;
        min-height: 0;
    }

    #dashboard.app-shell .members-list,
    #dashboard.app-shell #members-list {
        grid-template-columns: repeat(auto-fill, minmax(330px, 430px));
        justify-content: start;
    }

    #dashboard.app-shell .transaction-filters,
    #dashboard.app-shell .report-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    #dashboard.app-shell.desktop-fund-rail-active #funds-view {
        position: fixed;
        z-index: 180;
        top: 24px;
        right: calc(24px + var(--desktop-sidebar-width) + var(--desktop-rail-gap));
        bottom: 24px;
        box-sizing: border-box;
        display: block;
        width: var(--desktop-fund-rail-width);
        margin: 0;
        padding: 18px 12px 84px;
        overflow-y: auto;
        overflow-x: hidden;
        border: 1px solid rgba(32, 82, 104, .13);
        border-radius: 26px;
        background: rgba(255, 255, 255, .95);
        box-shadow: 0 20px 48px rgba(28, 72, 92, .14);
        scrollbar-width: thin;
        scrollbar-color: rgba(19, 87, 120, .35) transparent;
    }

    /* A real selected fund keeps its card rail visible across web sections.
       An account with no fund never revives the first-fund onboarding card. */
    #dashboard.app-shell.desktop-fund-rail-active.has-current-fund #funds-view.hidden {
        display: block !important;
    }

    #dashboard.app-shell.desktop-fund-rail-active #funds-view::-webkit-scrollbar { width: 6px; }
    #dashboard.app-shell.desktop-fund-rail-active #funds-view::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(19, 87, 120, .35); }
    #dashboard.app-shell.desktop-fund-rail-active #funds-message { margin: 0 0 8px; }

    #dashboard.app-shell.desktop-fund-rail-active .fund-rail-header {
        position: sticky;
        z-index: 2;
        top: -18px;
        display: flex;
        align-items: center;
        min-height: 54px;
        margin: -18px -12px 16px;
        padding: 0 16px;
        border-radius: 25px 25px 14px 14px;
        color: #fff;
        background: linear-gradient(135deg, #193f8a, #102e6d 58%, #081d50);
        box-shadow: 0 8px 20px rgba(8, 29, 80, .2);
    }

    #dashboard.app-shell.desktop-fund-rail-active .fund-rail-header h2 {
        margin: 0;
        font-size: 15px;
        font-weight: 800;
    }

    #dashboard.app-shell.desktop-fund-rail-active .funds-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    #dashboard.app-shell.desktop-fund-rail-active .fund-card {
        min-width: 0;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        cursor: pointer;
        transition: none;
        animation: none;
    }

    #dashboard.app-shell.desktop-fund-rail-active .fund-card:hover { transform: none; }
    #dashboard.app-shell.desktop-fund-rail-active .fund-card.fund-card-enter,
    #dashboard.app-shell.desktop-fund-rail-active .fund-card.fund-card-enter-pending,
    #dashboard.app-shell.desktop-fund-rail-active .fund-card.fund-card-selected-focus {
        animation: none;
        opacity: var(--fund-card-final-opacity, 1);
        transform: none;
    }
    #dashboard.app-shell.desktop-fund-rail-active .fund-card.selected {
        border-top-width: 6px !important;
        box-shadow: 0 0 0 3px rgba(23, 92, 145, .14), 0 12px 24px rgba(20, 65, 96, .16) !important;
        animation: none;
    }

    #dashboard.app-shell.desktop-fund-workspace-active > .fund-management-view,
    #dashboard.app-shell.desktop-fund-workspace-active > .members-view,
    #dashboard.app-shell.desktop-fund-workspace-active > .fund-settings-view,
    #dashboard.app-shell.desktop-fund-workspace-active > .cycle-management-view,
    #dashboard.app-shell.desktop-fund-workspace-active > .payment-view,
    #dashboard.app-shell.desktop-fund-workspace-active > .draw-view,
    #dashboard.app-shell.desktop-fund-workspace-active > .fund-history-view {
        width: 100%;
        margin-right: auto;
        margin-left: 0;
    }

    /* در نسخهٔ وب، فیلدهای ثبت تراکنش نیم‌عرض بمانند تا فرم خواناتر شود. */
    #dashboard.app-shell.desktop-fund-workspace-active > .payment-view > .form-label,
    #dashboard.app-shell.desktop-fund-workspace-active > .payment-view > .form-input,
    #dashboard.app-shell.desktop-fund-workspace-active > .payment-view > .payment-bank-input-wrap,
    #dashboard.app-shell.desktop-fund-workspace-active > .payment-view > .payment-recipient-bank-options {
        box-sizing: border-box;
        width: 50%;
        max-width: 460px;
    }

    /* نمایش هم‌زمان مدیریت صندوق و مدیریت اعضا در بوم دسکتاپ. */
    #dashboard.app-shell.desktop-fund-management-split-active {
        display: grid;
        width: auto;
        max-width: none;
        margin-right: auto;
        margin-left: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
        align-items: start;
        min-width: 0;
    }

    #dashboard.app-shell.desktop-fund-management-split-active .app-header {
        grid-column: 1 / -1;
        grid-row: 1;
        margin: 0 0 48px;
    }

    #dashboard.app-shell.desktop-fund-management-split-active > .fund-management-view,
    #dashboard.app-shell.desktop-fund-management-split-active > .members-view {
        grid-row: 2;
        box-sizing: border-box;
        width: auto;
        max-height: calc(100vh - 178px);
        margin: 0;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(19, 87, 120, .35) transparent;
    }

    #dashboard.app-shell.desktop-fund-management-split-active > .fund-management-view {
        grid-column: 1;
    }

    #dashboard.app-shell.desktop-fund-management-split-active > .members-view {
        grid-column: 2;
        padding-right: 2px;
    }

    #dashboard.app-shell.desktop-fund-management-split-active > .fund-management-view,
    #dashboard.app-shell.desktop-fund-management-split-active > .members-view {
        padding: 14px;
        border: 1px solid #c9d9e8;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(18, 59, 98, .08);
    }

    #dashboard.app-shell.desktop-fund-management-split-active .desktop-management-column-title {
        display: flex;
        align-items: center;
        min-height: 46px;
        margin: 0 0 14px;
        padding: 0 14px;
        border: 1px solid #1a4e82;
        border-radius: 12px;
        color: #fff;
        background: linear-gradient(135deg, #102e6d, #1b7690);
        font-size: 15px;
        font-weight: 800;
    }

    #dashboard.app-shell.desktop-fund-management-split-active > .fund-management-view #management-members-list {
        max-height: 352px;
        overflow-y: auto;
    }

    #dashboard.app-shell.desktop-fund-management-split-active > .members-view #members-list {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        margin: 0;
    }

    #dashboard.app-shell.desktop-fund-management-split-active > .members-view .member-card {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
    }

    /* بازگشت به سایدبار در دسکتاپ لازم نیست؛ سایدبار همیشه دیده می‌شود. */
    #dashboard.app-shell .more-view .sidebar-subpage-back {
        display: none;
    }

    /* خروجی فیلتر تراکنش‌ها در دو ستون مستقل نمایش داده می‌شود. */
    #dashboard.app-shell .transactions-results-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, .85fr);
        gap: 18px;
        align-items: start;
        margin-top: 14px;
    }

    #dashboard.app-shell .transactions-results-layout .transactions-list {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    #dashboard.app-shell .transactions-results-layout .transaction-winners-card {
        position: sticky;
        top: 12px;
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        margin: 0;
    }

    #dashboard.app-shell .transactions-results-layout:has(.transaction-winners-card.hidden) {
        grid-template-columns: minmax(0, 1fr);
    }

    #dashboard.app-shell .transactions-results-layout:has(.transaction-winners-card.hidden) .transactions-list {
        grid-column: 1 / -1;
    }

    /* گزارش‌ها: فیلتر و نمای کلی، سپس اعضا و وام‌ها در دو ستون. */
    #dashboard.app-shell .reports-view {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px !important;
        align-items: start;
    }

    #dashboard.app-shell .reports-view > .members-title-row,
    #dashboard.app-shell .reports-view > #reports-fund-picker,
    #dashboard.app-shell .reports-view > #reports-message,
    #dashboard.app-shell .reports-view > .report-transactions-card {
        grid-column: 1 / -1;
    }

    #dashboard.app-shell .reports-view > .report-filter-card--finance,
    #dashboard.app-shell .reports-view > .report-financial-overview,
    #dashboard.app-shell .reports-view > .report-members-card,
    #dashboard.app-shell .reports-view > .report-loans-card {
        box-sizing: border-box;
        min-width: 0;
        margin: 0;
    }

    #dashboard.app-shell .reports-view > .report-filter-card--finance,
    #dashboard.app-shell .reports-view > .report-members-card {
        grid-column: 1;
    }

    #dashboard.app-shell .reports-view > .report-financial-overview,
    #dashboard.app-shell .reports-view > .report-loans-card {
        grid-column: 2;
    }

    /* فاصلهٔ بالای صفحات دارای انتخاب صندوق با ارتفاع ناوبری هماهنگ می‌شود. */
    #dashboard.app-shell:has(.transactions-view:not(.hidden)) .app-header,
    #dashboard.app-shell:has(.messages-view:not(.hidden)) .app-header,
    #dashboard.app-shell:has(.reports-view:not(.hidden)) .app-header {
        margin-bottom: 64px;
    }

    #dashboard.app-shell .transactions-view .transaction-fund-option,
    #dashboard.app-shell .messages-view .transaction-fund-option,
    #dashboard.app-shell .reports-view .transaction-fund-option {
        width: min(100%, 180px);
        max-width: 180px;
        min-height: 124px;
    }

    #dashboard.app-shell .transactions-view .transaction-fund-option img,
    #dashboard.app-shell .messages-view .transaction-fund-option img,
    #dashboard.app-shell .reports-view .transaction-fund-option img {
        width: 100px;
        height: 100px;
    }

    /* The desktop app header is visually collapsed; reserve real space for
       the fund-context icons below the fixed top navigation. */
    #dashboard.app-shell .transactions-view .transaction-fund-picker,
    #dashboard.app-shell .messages-view .transaction-fund-picker,
    #dashboard.app-shell .reports-view .transaction-fund-picker {
        position: relative;
        z-index: 2;
        margin-top: 2px !important;
        padding-top: 4px;
    }

    /* فیلتر بازه گزارش با عرض ستون خود هماهنگ است و هم‌قد نمای کلی می‌شود. */
    #dashboard.app-shell .reports-view > .report-filter-card--finance,
    #dashboard.app-shell .reports-view > .report-financial-overview {
        align-self: stretch;
        height: auto;
    }

    #dashboard.app-shell .report-filter-card--finance .report-date-filter-grid,
    #dashboard.app-shell .report-filter-card--finance .report-selection-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #dashboard.app-shell .report-filter-card--finance .form-label,
    #dashboard.app-shell .report-filter-card--finance .form-input,
    #dashboard.app-shell .report-filter-card--finance .form-select {
        min-width: 0;
        width: 100%;
    }

    #dashboard.app-shell .report-filter-card--finance #report-filter-button {
        width: 100%;
    }

    /* نمای فشردهٔ بازه و خلاصهٔ گزارش. */
    #dashboard.app-shell .report-filter-card--finance,
    #dashboard.app-shell .report-financial-overview {
        padding: 10px !important;
    }

    #dashboard.app-shell .report-filter-card--finance .section-heading,
    #dashboard.app-shell .report-financial-overview .section-heading {
        margin-bottom: 7px;
    }

    #dashboard.app-shell .report-filter-card--finance .report-filter-fields {
        gap: 6px;
    }

    #dashboard.app-shell .report-filter-card--finance .report-date-filter-grid,
    #dashboard.app-shell .report-filter-card--finance .report-selection-filter-grid {
        gap: 6px;
    }

    #dashboard.app-shell .report-filter-card--finance .form-input,
    #dashboard.app-shell .report-filter-card--finance .form-select,
    #dashboard.app-shell .report-filter-card--finance #report-filter-button {
        min-height: 34px;
    }

    #dashboard.app-shell .report-financial-overview .report-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    #dashboard.app-shell .report-financial-overview .report-financial-metric {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 48px;
        padding: 8px 10px;
    }

    #dashboard.app-shell .report-financial-overview .report-financial-metric span {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        line-height: 1.45;
    }

    #dashboard.app-shell .report-financial-overview .report-financial-metric strong {
        flex: 0 0 auto;
        margin: 0;
        font-size: 12px;
        text-align: left;
    }

    /* گزینه‌های فیلتر تراکنش در یک شبکهٔ منظم و هم‌تراز قرار می‌گیرند. */
    #dashboard.app-shell .transactions-view .transaction-status-filter {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        align-items: stretch;
    }

    #dashboard.app-shell .transactions-view .transaction-status-filter label {
        display: grid;
        grid-template-columns: 17px minmax(0, 1fr);
        align-items: center;
        justify-content: start;
        gap: 7px;
        min-height: 48px;
        padding: 8px 10px;
        direction: rtl;
        text-align: right;
    }

    #dashboard.app-shell .transactions-view .transaction-status-filter input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0;
    }

    /* اطلاعات کاربر: فیلدهای اصلی در راست و کارت تصویر در ستون چپ. */
    #dashboard.app-shell .more-view.feature-overlay .profile-form-card {
        grid-template-columns: minmax(230px, .7fr) minmax(0, 1.55fr);
        grid-template-areas:
            "image fields"
            "image gender"
            "actions actions"
            "message message";
        align-items: stretch;
        gap: 12px;
        padding: 14px;
    }

    #dashboard.app-shell .more-view.feature-overlay .profile-fields-grid {
        grid-area: fields;
        align-content: start;
    }

    #dashboard.app-shell .more-view.feature-overlay .profile-gender-card {
        grid-area: gender;
        margin: 0;
    }

    #dashboard.app-shell .more-view.feature-overlay .profile-image-settings {
        grid-area: image;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        min-height: 100%;
        margin: 0;
        padding: 20px 16px;
        text-align: center;
    }

    #dashboard.app-shell .more-view.feature-overlay .profile-image-preview {
        width: 104px;
        height: 104px;
        min-width: 104px;
        min-height: 104px;
        border-radius: 24px;
    }

    #dashboard.app-shell .more-view.feature-overlay .profile-image-settings > div:last-child {
        display: grid;
        justify-items: center;
        text-align: center;
    }

    #dashboard.app-shell .more-view.feature-overlay .profile-image-settings small {
        max-width: 210px;
    }

    #dashboard.app-shell .more-view.feature-overlay #save-profile {
        grid-area: actions;
        margin: 0;
    }

    #dashboard.app-shell .more-view.feature-overlay #profile-message {
        grid-area: message;
    }

    /* صفحه اشتراک: اطلاعات و صندوق‌ها در راست، پیش‌فاکتور و عملیات در چپ. */
    #dashboard.app-shell .subscription-view {
        display: grid;
        grid-template-columns: minmax(310px, .9fr) minmax(0, 1.1fr);
        grid-template-areas:
            "operations status"
            "operations funds"
            "operations create"
            "operations access"
            "message message"
            "plans plans";
        gap: 18px;
        align-items: start;
    }

    #dashboard.app-shell .subscription-view .subscription-status-card {
        grid-area: status;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    #dashboard.app-shell .subscription-view .fund-period-subscription {
        display: contents;
    }

    #dashboard.app-shell .subscription-view .fund-subscription-funds {
        grid-area: funds;
        width: 100%;
        min-width: 0;
    }

    #dashboard.app-shell .subscription-view #subscription-create-fund {
        grid-area: create;
        width: 100%;
        margin: 0;
    }

    #dashboard.app-shell .subscription-view .fund-subscription-config {
        grid-area: operations;
        width: 100%;
        min-width: 0;
        margin: 0;
        align-self: stretch;
    }

    #dashboard.app-shell .subscription-view #subscription-message {
        grid-area: message;
        margin: 0;
    }

    #dashboard.app-shell .subscription-view .subscription-plans-section {
        grid-area: plans;
        width: 100%;
    }

    #dashboard.app-shell .subscription-view .subscription-plan-access {
        grid-area: access;
        position: fixed;
        z-index: 145;
        left: 0;
        bottom: 0;
        width: 36px;
        max-width: calc(100vw - 14px);
        height: 218px;
        margin: 0;
        grid-template-columns: 36px 0fr;
        border-radius: 0 20px 20px 0;
    }

    #dashboard.app-shell .subscription-view .subscription-plan-access.expanded {
        grid-template-columns: 48px minmax(0, 1fr);
        width: min(calc(100vw - 14px), 318px);
    }

    #dashboard.app-shell .subscription-view .subscription-plan-access-toggle {
        min-height: 218px;
    }

    #dashboard.app-shell .subscription-view .subscription-plan-access-content {
        min-width: 0;
        overflow: hidden;
    }

    /* مدیریت کارت بانکی: فهرست کارت‌ها و ویرایشگر در دو ستون مستقل. */
    #dashboard.app-shell .more-view.feature-overlay #more-feature-panel:has(.bank-management-layout) {
        width: 100%;
    }

    #dashboard.app-shell .more-view.feature-overlay .bank-accounts-root {
        min-height: 0;
        padding: 0;
    }

    #dashboard.app-shell .more-view.feature-overlay .bank-management-layout {
        display: grid;
        grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr);
        grid-template-areas: "editor cards";
        gap: 18px;
        align-items: start;
    }

    #dashboard.app-shell .more-view.feature-overlay .bank-saved-column {
        grid-area: cards;
        min-width: 0;
    }

    #dashboard.app-shell .more-view.feature-overlay .bank-editor-column {
        grid-area: editor;
        min-width: 0;
        padding: 14px;
        border: 1px solid #d7e8ee;
        border-radius: 18px;
        background: linear-gradient(145deg, #f7fcfd, #fff);
        box-shadow: 0 10px 24px rgba(20, 72, 96, .08);
    }

    #dashboard.app-shell .more-view.feature-overlay .bank-editor-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid #dcebf0;
    }

    /* Sidebar feature pages use the center workspace while the fund cards
       remain visible in their dedicated right-hand rail. */
    #dashboard.app-shell.desktop-fund-rail-active .more-view.feature-overlay {
        right: calc(24px + var(--desktop-sidebar-width) + var(--desktop-fund-rail-width) + var(--desktop-rail-gap));
        z-index: 170;
    }

    #dashboard.app-shell .more-view.feature-overlay .bank-editor-heading p {
        margin: 0 0 3px;
        color: #5b7885;
        font-size: 10px;
        font-weight: 700;
    }

    #dashboard.app-shell .more-view.feature-overlay .bank-editor-heading h3 {
        margin: 0;
        color: #173d72;
        font-size: 15px;
    }

    #dashboard.app-shell .more-view.feature-overlay .bank-editor-heading .bank-add-button {
        position: static;
        width: auto;
        min-height: 36px;
        padding: 7px 10px;
        border-radius: 10px;
        font-size: 11px;
        white-space: nowrap;
    }

    #dashboard.app-shell .more-view.feature-overlay .bank-editor-heading .bank-add-icon {
        width: 28px;
        height: 22px;
    }

    #dashboard.app-shell .more-view.feature-overlay .bank-accounts-list {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        margin-top: 0 !important;
    }

    #dashboard.app-shell .more-view.feature-overlay .bank-editor-host .profile-tab-panel[data-profile-group="bank"] {
        display: block;
        width: 100%;
    }

    #dashboard.app-shell .more-view.feature-overlay .bank-editor-host .bank-page-root {
        min-height: 0;
        padding: 0;
    }

    #dashboard.app-shell .more-view.feature-overlay .bank-editor-host .bank-page-head {
        display: none;
    }

    /* These controls remain visible outside the removed header. */
    #dashboard.app-shell .app-header .fund-create-header-btn:not(.hidden) {
        z-index: 1000;
        color: #0c7185 !important;
        background: #e7f5f7 !important;
    }

    #dashboard.app-shell .app-header .fund-create-header-btn:not(.hidden) svg {
        stroke: currentColor !important;
    }

    #dashboard.app-shell .app-header .notification-bell-button {
        z-index: 1001;
        color: #0c7185 !important;
        background-color: #e7f5f7 !important;
    }

    /* صفحات بازشده از سایدبار در دسکتاپ داخل بوم مرکزی می‌مانند. */
    #dashboard.app-shell .more-view.feature-overlay {
        position: static;
        inset: auto;
        z-index: auto;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        margin: 0;
        padding: 0 0 18px;
        overflow: visible;
        overscroll-behavior: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    body:has(#dashboard.app-shell .more-view.feature-overlay) {
        overflow-x: hidden;
        overflow-y: auto;
    }

    #dashboard.app-shell .more-view.feature-overlay > .more-subpanel {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    #dashboard.app-shell .more-view.feature-overlay .bank-accounts-list {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    /* نسبت افقی کارت بانکی: عرض ۹ و ارتفاع ۵. */
    #dashboard.app-shell .more-view.feature-overlay .saved-bank-card {
        min-height: 0;
        aspect-ratio: 9 / 5;
    }

    /* سایدبار دسکتاپ: خواناتر و با ظاهر یکپارچه‌تر. */
    #dashboard.app-shell .settings-panel {
        padding: 22px 18px 18px;
        background:
            linear-gradient(180deg, rgba(243, 250, 252, .9), rgba(255, 255, 255, .98) 160px),
            #fff;
    }

    #dashboard.app-shell .settings-panel-head {
        align-items: center;
        min-height: 48px;
        padding: 0 4px 10px;
        border-bottom: 1px solid rgba(35, 93, 120, .10);
    }

    #dashboard.app-shell .drawer-brand-logo { width: 144px; height: auto; }

    #dashboard.app-shell .drawer-user-summary {
        gap: 7px;
        margin: 10px 0;
        padding: 10px 12px;
        border: 1px solid rgba(65, 140, 168, .16);
        border-radius: 15px;
        box-shadow: 0 10px 24px rgba(23, 72, 104, .14);
    }

    #dashboard.app-shell .drawer-user-summary strong { font-size: 16px; }
    #dashboard.app-shell .drawer-user-summary > div:first-of-type > small { font-size: 12px; }
    #dashboard.app-shell .drawer-user-details small { font-size: 10px; }
    #dashboard.app-shell .drawer-user-details b { font-size: 12px; }
    #dashboard.app-shell .drawer-user-details > span { padding: 6px 8px; }
    #dashboard.app-shell .drawer-inline-mobile {
        display: inline-block;
        margin-inline: 4px;
        color: rgba(255,255,255,.82);
        font-size: .78em;
        font-weight: 600;
        direction: ltr;
        unicode-bidi: embed;
    }

    #dashboard.app-shell .drawer-menu-list {
        gap: 7px !important;
        margin: 0 !important;
    }

    #dashboard.app-shell .drawer-menu-item {
        min-height: 49px !important;
        padding: 9px 11px !important;
        border: 1px solid transparent !important;
        border-radius: 14px !important;
        color: #27465b;
        background: rgba(255, 255, 255, .76);
        box-shadow: 0 2px 7px rgba(36, 82, 105, .035);
        transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    #dashboard.app-shell .drawer-menu-item:hover {
        border-color: rgba(23, 120, 135, .18) !important;
        background: #edf8f8;
        box-shadow: 0 8px 18px rgba(23, 86, 112, .10);
        transform: translateX(-3px);
    }

    #dashboard.app-shell .drawer-menu-item:focus-visible {
        outline: 3px solid rgba(22, 120, 135, .24);
        outline-offset: 2px;
    }

    #dashboard.app-shell .drawer-menu-item .drawer-menu-icon {
        width: 29px;
        height: 29px;
        border-radius: 10px;
        background-color: #e6f3f6;
    }

    #dashboard.app-shell .drawer-menu-item > span:nth-child(2) {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -.1px;
    }

    #dashboard.app-shell .drawer-menu-item > b {
        width: 23px;
        height: 23px;
        border-radius: 8px;
        color: #197c8b;
        background: rgba(25, 124, 139, .08);
        font-size: 19px;
        line-height: 20px;
        transition: background .18s ease, color .18s ease;
    }

    #dashboard.app-shell .drawer-menu-item:hover > b {
        color: #fff;
        background: #197c8b;
    }

    #dashboard.app-shell .drawer-menu-item-danger {
        margin-top: 5px;
        background: #fff8f6;
    }

    #dashboard.app-shell .drawer-logout {
        min-height: 46px;
        margin-top: 18px;
        border-radius: 14px;
        font-size: 13px;
        box-shadow: 0 5px 13px rgba(154, 61, 40, .07);
    }
}

@media (min-width: 900px) {
    body:has(#auth-screen:not(.hidden)) {
        display: grid;
        min-height: 100vh;
        place-items: center;
        padding: 32px;
    }

    .auth-screen {
        width: min(calc(100vw - 64px), 1040px);
        min-height: min(680px, calc(100vh - 64px));
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 430px;
        align-items: stretch;
        border: 1px solid rgba(38, 94, 121, .15);
        border-radius: 32px;
        background: #f8fcfe;
        box-shadow: 0 30px 74px rgba(22, 62, 91, .16);
    }

    .auth-screen::before { width: 340px; height: 340px; top: -185px; right: -112px; }
    .auth-screen::after { width: 280px; height: 280px; left: -130px; bottom: -130px; }

    .auth-app-brand {
        min-height: 100%;
        margin: 0;
        padding: 44px;
        display: grid;
        place-items: center;
        background:
            radial-gradient(circle at 10% 5%, rgba(255,255,255,.42), transparent 29%),
            linear-gradient(145deg, #c5edf1, #dce6f7 58%, #b9dfe8);
    }

    .auth-app-brand img {
        width: min(100%, 510px);
        max-height: 390px;
        border-radius: 30px;
        box-shadow: 0 24px 48px rgba(20, 71, 91, .18);
    }

    .auth-screen > .flat-auth-view {
        align-self: center;
        width: auto;
        min-height: 0;
        margin: 0 34px;
        padding: 34px 30px 28px;
        border-color: rgba(213, 229, 235, .95);
        border-radius: 24px;
        box-shadow: 0 16px 32px rgba(26, 69, 98, .10);
    }

    .auth-screen > .flat-auth-view h1 { margin-top: 0; font-size: 22px; }
    .auth-screen > .flat-auth-view > p { max-width: 340px; font-size: 12px; }
    .auth-screen > .flat-auth-view .outlined-field { margin-top: 24px; }
    .auth-screen > .flat-auth-view #auth-submit,
    .auth-screen > .flat-auth-view #account-submit { min-height: 50px; }
    .auth-screen > .flat-auth-view .terms-hint { margin-top: 18px; }

    /* خوانایی بیشتر راهنما، قوانین و پرسش‌های متداول در بوم دسکتاپ. */
    #dashboard.app-shell .more-view.feature-overlay .guide-page {
        font-size: 14px;
        line-height: 2;
    }

    #dashboard.app-shell .more-view.feature-overlay .guide-hero span:not(.guide-hero-icon),
    #dashboard.app-shell .more-view.feature-overlay .faq-hero span:not(.faq-hero-icon) { font-size: 12px; }
    #dashboard.app-shell .more-view.feature-overlay .guide-hero h3,
    #dashboard.app-shell .more-view.feature-overlay .faq-hero h3 { font-size: 18px; }
    #dashboard.app-shell .more-view.feature-overlay .guide-hero p,
    #dashboard.app-shell .more-view.feature-overlay .faq-hero p { font-size: 13px; line-height: 1.95; }
    #dashboard.app-shell .more-view.feature-overlay .guide-page .guide-accordion-toggle strong { font-size: 15px; }
    #dashboard.app-shell .more-view.feature-overlay .guide-page .guide-accordion-toggle small { font-size: 12px; }
    #dashboard.app-shell .more-view.feature-overlay .guide-page .guide-feature-list li { font-size: 13px; line-height: 2; }
    #dashboard.app-shell .more-view.feature-overlay .platform-terms-document h2 { font-size: 16px; }
    #dashboard.app-shell .more-view.feature-overlay .platform-terms-document .platform-terms-section-title { font-size: 14px; }
    #dashboard.app-shell .more-view.feature-overlay .platform-terms-document p,
    #dashboard.app-shell .more-view.feature-overlay .platform-terms-document li { font-size: 13px; line-height: 2.15; }
    #dashboard.app-shell .more-view.feature-overlay .faq-item h3 { font-size: 14px; }
    #dashboard.app-shell .more-view.feature-overlay .faq-item p { font-size: 13px; line-height: 2; }

    /* پنل صندوق همیشه کنترل ایجاد صندوق دارد و اعلان در لبهٔ داخلی سایدبار دیده می‌شود. */
    #dashboard.app-shell.desktop-fund-rail-active #funds-create-button,
    #dashboard.app-shell.desktop-fund-rail-active #funds-create-button.hidden {
        position: fixed;
        z-index: 1250;
        right: calc(24px + var(--desktop-sidebar-width) + var(--desktop-rail-gap));
        bottom: 32px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        border: 1px solid rgba(18, 100, 126, .22) !important;
        border-radius: 14px;
        color: #0a6e82 !important;
        background: #e7f5f7 !important;
        box-shadow: 0 8px 18px rgba(18, 64, 92, .14) !important;
    }

    #dashboard.app-shell.desktop-fund-rail-active #funds-create-button svg {
        width: 25px;
        height: 25px;
        stroke: currentColor !important;
        visibility: visible !important;
    }

    #dashboard.app-shell.desktop-fund-rail-active #notification-bell-button {
        position: fixed;
        z-index: 1251;
        top: 40px;
        right: calc(24px + var(--desktop-sidebar-width) - 60px);
        display: grid !important;
        place-items: center;
        width: 44px;
        height: 44px;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        border: 1px solid rgba(18, 100, 126, .18);
        border-radius: 14px;
        color: #0a6e82 !important;
        background: #e7f5f7 !important;
        box-shadow: 0 8px 18px rgba(18, 64, 92, .12);
    }

    #dashboard.app-shell.desktop-fund-rail-active #notification-bell-button > span {
        display: block !important;
        width: 23px;
        height: 23px;
        visibility: visible !important;
    }

    /* فضای نمای صندوق پس از نوار ثابت بالایی آغاز می‌شود، بدون فاصلهٔ اضافی. */
    #dashboard.app-shell:has(> #funds-view:not(.hidden)) .app-header { margin-bottom: 52px; }

    /* هدر و کارت‌های ستون صندوق. */
    #dashboard.app-shell.desktop-fund-rail-active .fund-rail-header { border-radius: 25px 25px 0 0; }
    #dashboard.app-shell.desktop-fund-rail-active .fund-card,
    #dashboard.app-shell.desktop-fund-rail-active .fund-card.selected { box-shadow: none !important; }

    /* نوار ناوبری فشرده‌تر و خواناتر: آیکون و عنوان کنار هم و جداکننده‌های عمودی. */
    #dashboard.app-shell .bottom-nav,
    #dashboard.app-shell.subpage-active .bottom-nav,
    #dashboard.app-shell.subscription-page-active .bottom-nav {
        min-height: var(--desktop-top-nav-height);
        padding: 8px 10px;
        gap: 0;
    }

    #dashboard.app-shell .bottom-nav button {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 58px;
        padding: 6px 12px;
        border-radius: 13px;
    }

    #dashboard.app-shell .bottom-nav .nav-icon,
    #dashboard.app-shell .bottom-nav button.active .nav-icon {
        width: 35px;
        height: 35px;
        flex: 0 0 35px;
    }

    #dashboard.app-shell .bottom-nav button span {
        margin: 0;
        font-size: 15px;
        font-weight: 800;
        line-height: 1;
    }

    #dashboard.app-shell .bottom-nav button[data-section]:not([data-section="reports"])::after {
        position: absolute;
        top: 18%;
        bottom: 18%;
        left: 0;
        width: 1px;
        content: "";
        background: rgba(31, 78, 111, .17);
    }

    /* مخفی‌سازی دکمه درخواست انصراف در صفحه مدیریت صندوق */
    #member-exit-request-button {
        display: none !important;
    }

    /* مخفی‌سازی دکمه‌های تعلیق و انصراف در لیست اعضا */
    .member-actions [data-member-action="deactivate"],
    .member-actions [data-member-action="exit"],
    .member-exit-actions {
        display: none !important;
    }

}

/* Final desktop header alignment: keep the fund controls in the central
   workspace instead of positioning them outside the viewport. */
@media (min-width: 1100px) {
    #dashboard.app-shell .app-header {
        position: relative;
        height: 46px;
        min-height: 46px;
        margin: 0 0 14px;
        padding: 0;
        overflow: visible;
        z-index: 2400;
    }

    #dashboard.app-shell .app-header .header-actions-left {
        position: absolute;
        inset-inline-start: 0;
        inset-inline-end: auto;
        top: 64px;
        left: auto;
        right: auto;
        height: 46px;
        z-index: 2401;
        transform: none;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #dashboard.app-shell .app-header .fund-create-header-btn:not(.hidden),
    #dashboard.app-shell .app-header .fund-management-header-menu:not(.hidden) {
        position: static;
        inset: auto;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        border: 1px solid rgba(18, 100, 126, .18) !important;
        border-radius: 13px;
        color: #0c7185 !important;
        background: #e7f5f7 !important;
        box-shadow: 0 8px 18px rgba(18, 64, 92, .12) !important;
    }

    #dashboard.app-shell .app-header .fund-create-header-btn:not(.hidden) svg {
        width: 24px;
        height: 24px;
        stroke: currentColor !important;
    }

    #dashboard.app-shell .app-header .header-actions-right {
        position: absolute;
        inset-inline-end: 0;
        inset-inline-start: auto;
        top: 64px;
        right: 0;
        left: auto;
        height: 46px;
        z-index: 2401;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #dashboard.app-shell .app-header .notification-bell-button {
        position: static;
        inset: auto;
        display: inline-grid !important;
        width: 42px;
        height: 42px;
        visibility: visible !important;
        opacity: 1 !important;
        border: 1px solid rgba(18, 100, 126, .18);
        border-radius: 13px;
        color: #0c7185 !important;
        background: #e7f5f7 !important;
        box-shadow: 0 8px 18px rgba(18, 64, 92, .12);
    }

    #dashboard.app-shell .app-header .header-back-btn:not(.hidden) {
        position: static;
        width: 42px;
        height: 42px;
    }

    #dashboard.app-shell:has(> #funds-view:not(.hidden)) .app-header {
        margin-bottom: 14px;
    }

    /* These ID-qualified rules intentionally outrank the legacy fixed rail
       rules above.  The controls belong to the central header, not the
       off-screen edge of the desktop fund rail. */
    #dashboard.app-shell .app-header #funds-create-button:not(.hidden) {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #dashboard.app-shell .app-header #notification-bell-button:not(.hidden) {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: inline-grid !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Desktop controls live in the top-left of the right sidebar, opposite
       the Ham-Vam logo.  Keeping them fixed avoids overlap with page content. */
    #dashboard.app-shell .app-header {
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 3000 !important;
    }

    #dashboard.app-shell .app-header .header-actions-left,
    #dashboard.app-shell .app-header .header-actions-right {
        position: static !important;
        display: contents !important;
    }

    #dashboard.app-shell .app-header #funds-create-button:not(.hidden),
    #dashboard.app-shell .app-header #notification-bell-button:not(.hidden),
    #dashboard.app-shell .app-header #fund-management-menu-button:not(.hidden) {
        position: fixed !important;
        top: 40px !important;
        z-index: 3100 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        margin: 0 !important;
        border: 1px solid rgba(18, 100, 126, .18) !important;
        border-radius: 13px !important;
        color: #0c7185 !important;
        background: #e7f5f7 !important;
        box-shadow: 0 8px 18px rgba(18, 64, 92, .12) !important;
        transform: none !important;
    }

    #dashboard.app-shell .app-header #funds-create-button:not(.hidden) {
        right: calc(24px + var(--desktop-sidebar-width) - 58px) !important;
        left: auto !important;
    }

    #dashboard.app-shell .app-header #notification-bell-button {
        right: calc(24px + var(--desktop-sidebar-width) - 106px) !important;
        left: auto !important;
    }

    #dashboard.app-shell .app-header #fund-management-menu-button:not(.hidden) {
        right: calc(24px + var(--desktop-sidebar-width) - 154px) !important;
        left: auto !important;
    }

    /* The back box is redundant on desktop because the sidebar remains open. */
    #dashboard.app-shell .app-header #header-back-btn,
    #dashboard.app-shell #header-back-btn {
        display: none !important;
    }

    /* Remove the old blue rail title strip that was painted behind the top nav. */
    #dashboard.app-shell.desktop-fund-rail-active .fund-rail-header {
        display: none !important;
    }

    #dashboard.app-shell.desktop-fund-rail-active #funds-view {
        /* Keep the first fund or free-version card close to the top of the rail. */
        top: 24px;
        bottom: 24px;
        padding: 10px 12px 84px;
    }

    /* The mobile onboarding card may use this layout; desktop intentionally
       keeps creation behind the + button in the sidebar. */
    #dashboard.app-shell.desktop-fund-rail-active.first-fund-onboarding-active #funds-view:has(#funds-empty-state.desktop-onboarding-enabled:not(.hidden)) {
        top: var(--desktop-workspace-top);
        right: calc(24px + var(--desktop-sidebar-width) + var(--desktop-rail-gap));
        bottom: 24px;
        left: 24px;
        display: grid !important;
        width: auto;
        padding: 18px 28px;
        place-items: start center;
    }

    /* On web, do not show the large first-fund creation card in the center.
       The persistent + control above the sidebar starts fund creation. */
    #dashboard.app-shell.desktop-fund-rail-active #funds-empty-state {
        display: none !important;
    }

    #dashboard.app-shell.desktop-fund-rail-active #funds-view:has(#funds-empty-state:not(.hidden)) .funds-empty-state {
        width: min(100%, 640px);
        min-height: 0;
        margin: 0 !important;
        padding: 24px 36px;
    }

    /* The creation form is a central-page workflow on desktop, never a rail
       item; this also makes the empty-state action visibly navigate. */
    #dashboard.app-shell #create-fund-view:not(.hidden),
    #dashboard.app-shell #fund-type-selection-view:not(.hidden) {
        position: fixed;
        z-index: 190;
        top: var(--desktop-workspace-top);
        right: calc(24px + var(--desktop-sidebar-width) + var(--desktop-fund-rail-width) + var(--desktop-rail-gap) + var(--desktop-rail-gap));
        bottom: 24px;
        left: 24px;
        display: block;
        box-sizing: border-box;
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 0;
        padding: 28px 10px 42px;
        overflow-y: auto;
        overflow-x: hidden;
        border: 1px solid rgba(32, 82, 104, .12);
        border-radius: 26px;
        background: rgba(255, 255, 255, .95);
        box-shadow: 0 20px 48px rgba(28, 72, 92, .12);
    }

    /* Fund-management overflow menu: it belongs to the central workspace,
       directly below the top navigation, not beside the sidebar logo. */
    #dashboard.app-shell.desktop-fund-management-split-active .app-header #fund-management-menu-button:not(.hidden) {
        position: fixed !important;
        top: 112px !important;
        left: 40px !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 3200 !important;
    }

    #dashboard.app-shell.desktop-fund-management-split-active #fund-management-menu {
        position: fixed !important;
        top: 160px !important;
        left: 40px !important;
        right: auto !important;
        z-index: 3199 !important;
        transform-origin: top left;
    }

    /* در بوم اصلیِ بدون ستون صندوق نیز کارت صندوق‌ها باید نزدیک به بالای بوم باشد. */
    /* Show the free-version access drawer as the first item of the desktop fund rail. */
    #dashboard.app-shell.desktop-fund-rail-active #funds-view .trial-info-panel {
        position: relative;
        z-index: 5;
        width: 100%;
        margin: 0 0 12px;
        border-radius: 16px;
    }

    #dashboard.app-shell.desktop-fund-rail-active #funds-view .funds-trial-toggle {
        min-height: 54px;
        padding: 10px 14px;
    }

    #dashboard.app-shell.desktop-fund-rail-active #funds-view .trial-info-card.expanded .trial-info-card-content {
        padding-right: 14px;
        padding-left: 14px;
    }

    /* The notification panel must float above the desktop fund rail, not behind its cards. */
    #dashboard.app-shell.desktop-fund-rail-active .notification-bell-modal {
        z-index: 3305;
    }

    #dashboard.app-shell #funds-view .funds-empty-state {
        margin-top: 12px !important;
    }
}