.jsn-layout, body, html {
    background: var(--jsn-bg)
}

.jsn-brand, .jsn-description-link, .jsn-modal-btn, .jsn-modal-close, .jsn-payment-type, .jsn-tool-card, .jssn-sidebar .snub-menu-item ul li a {
    text-decoration: none !important
}

.jnsn-navigation, .jsn-family-table-responsive, .jsn-ledger-table-wrap, .jsn-live-activity-list, .jsn-modal-body, .jsn-otp-table-responsive, .select2-container--default .select2-results__options {
    scrollbar-width: thin;
    scrollbar-width: thin
}

:root {
    --jssn-sidebar-width: 310px;
    --jssn-sidebar-collapsed-width: 86px;
    --jsn-primary: #fcc791;
    --jsn-primary-dark: #e86f00;
    --jsn-primary-soft: #fff4e8;
    --jsn-bg: #f5f7fb;
    --jssn-sidebar-bg: #ffffff;
    --jsn-text: #172033;
    --jsn-muted: #7a8499;
    --jsn-border: #e8ebf1;
    --jsn-hover: #f7f8fb;
    --jsn-danger: #dc3545;
    --jsn-radius-sm: 10px;
    --jsn-radius: 14px;
    --jsn-radius-lg: 20px;
    --jsn-shadow: 0 12px 35px rgba(34, 45, 72, 0.08);
    --jsn-transition: 220ms cubic-bezier(.2, .75, .3, 1)
}

*, .jsn-family-form-page, .jsn-family-form-page *, .jsn-family-page, .jsn-family-page *, .jsn-inbox-page, .jsn-inbox-page *, .jsn-letter-page, .jsn-letter-page *, .jsn-main-topbar, .jsn-main-topbar *, .jsn-need-form-page, .jsn-need-form-page *, .jsn-need-page, .jsn-need-page *, .jsn-otp-page, .jsn-otp-page *, .jsn-password-page, .jsn-password-page *, .jsn-payment-page, .jsn-payment-page *, .jsn-profile-page, .jsn-profile-page * {
    box-sizing: border-box
}

body, html {
    margin: 0;
    padding: 0
}

.jsn-filter-text, body {
    direction: rtl
}

.jsn-layout {
    width: 100%;
    min-height: 100vh
}

.jssn-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--jssn-sidebar-width);
    height: 100vh;
    z-index: 99999999;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg,rgb(249 243 243) 0,#fafbfd 100%);
    box-shadow: -7px -5px 0px 9px rgba(31, 42, 68, .06);
    transition: transform var(--jsn-transition),width var(--jsn-transition)
}

.jsn-main-content {
    min-height: 100vh;
    margin-right: var(--jssn-sidebar-width);
    transition: margin-right var(--jsn-transition);
    margin-left: 25px
}

.jssn-sidebar-header {
    position: relative;
    min-height: 95px;
    padding: 17px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--jsn-border);
    background: radial-gradient(circle at top right,rgba(245,124,0,.11),transparent 50%),#fff
}

.jsn-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--jsn-text)
}

    .jsn-brand:focus, .jsn-brand:hover {
        color: var(--jsn-text);
        text-decoration: none
    }

.jsn-brand-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #fff;
    border: 1px solid rgba(245,124,0,.16);
    border-radius: 16px;
    padding: 5px;
    box-shadow: 0 8px 20px rgba(245,124,0,.13)
}

.jsn-brand-text, .jsn-footer-brand-text, .jsn-user-dropdown-head > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px
}

    .jsn-brand-text strong {
        color: var(--jsn-text);
        font-size: 15px;
        font-weight: 800;
        white-space: nowrap
    }

    .jsn-brand-text span {
        color: var(--jsn-muted);
        font-size: 12px;
        white-space: nowrap
    }

.jssn-sidebar-close {
    display: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    color: var(--jsn-muted);
    background: #f2f4f7;
    cursor: pointer;
    transition: var(--jsn-transition)
}

.jsn-clear-search, .jsn-menu-search > i {
    color: #9ca5b6;
    transform: translateY(-50%);
    top: 50%
}

    .jsn-clear-search:hover, .jssn-sidebar-close:hover {
        color: var(--jsn-danger);
        background: #fff0f1
    }

.jsn-menu-search {
    position: relative;
    margin-bottom: 0
}

    .jsn-menu-search > i {
        position: absolute;
        right: 16px;
        font-size: 14px;
        pointer-events: none
    }

    .jsn-menu-search input {
        width: 100%;
        height: 48px;
        padding: 0 44px 0 42px;
        color: var(--jsn-text) !important;
        font-family: inherit;
        font-size: 13px !important;
        background-color: #fff !important;
        border: 2px solid transparent !important;
        border-radius: 8px !important;
        outline: 0;
        transition: var(--jsn-transition);
        background-image: none !important;
        margin: 0 !important
    }

        .jsn-menu-search input::placeholder {
            color: #9ca5b6
        }

        .jsn-menu-search input:hover {
            background: #f1f3f7
        }

        .jsn-menu-search input:focus {
            background: #fff;
            border-color: rgba(245,124,0,.45);
            box-shadow: 0 0 0 4px rgba(245,124,0,.1)
        }

.jsn-clear-search {
    position: absolute;
    left: 10px;
    width: 30px;
    height: 30px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 12px;
    background: 0 0;
    border: 0;
    border-radius: 9px;
    cursor: pointer
}

    .jsn-clear-search.is-visible {
        display: flex
    }

.jnsn-navigation {
    flex: 1;
    scrollbar-color: #d5dae3 transparent
}

.jsn-menu-list, .jsn-menu-list ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.jsn-inbox-datalist > tbody, .jsn-inbox-datalist > tbody > tr, .jsn-inbox-datalist > tbody > tr > td, .jsn-inbox-row-panel, .jsn-menu-list {
    width: 100%
}

.jssn-sidebar .nnnavbar-nav {
    float: none !important;
    width: 100% !important;
    background-color: #fffdfd !important
}

.jssn-sidebar .snub-menu, .jssn-sidebar .snub-menu-item {
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    background: 0 0 !important;
    width: 100% !important
}

.jssn-sidebar .nnnavbar-nav > li {
    position: relative;
    float: none !important;
    width: 100%;
    margin: 3px 0;
    display: block
}

    .jssn-sidebar .nnnavbar-nav > li > .mnenu-link, .jssn-sidebar .nnnavbar-nav > li > a {
        position: relative;
        width: 100%;
        min-height: 48px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        color: #3e485d;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.6;
        text-align: right;
        background: 0 0;
        border: 1px solid transparent;
        border-radius: 13px;
        text-decoration: none !important;
        transition: background var(--jsn-transition),color var(--jsn-transition),border-color var(--jsn-transition),transform var(--jsn-transition)
    }

        .jssn-sidebar .nnnavbar-nav > li > .mnenu-link:hover, .jssn-sidebar .nnnavbar-nav > li > a:hover {
            color: var(--jsn-primary-dark);
            background: var(--jsn-primary-soft);
            border-color: rgba(245,124,0,.1)
        }

    .jssn-sidebar .nnnavbar-nav > li.is-open > .mnenu-link, .jssn-sidebar .nnnavbar-nav > li.is-open > a {
        color: var(--jsn-primary-dark);
        background: var(--jsn-primary-soft);
        border-color: rgba(245,124,0,.16)
    }

        .jssn-sidebar .nnnavbar-nav > li.is-open > .mnenu-link::before {
            position: absolute;
            top: 10px;
            right: -12px;
            bottom: 10px;
            width: 4px;
            content: "";
            background: var(--jsn-primary);
            border-radius: 0 10px 10px 0
        }

.jsn-parent-icon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--jsn-primary);
    background: rgba(245,124,0,.09);
    border-radius: 10px
}

.jsn-parent-title {
    flex: 1;
    min-width: 0
}

.jssn-sidebar .nnnavbar-nav > li > a > font {
    margin-right: 5px;
    color: #8b94a5 !important;
    font-size: 12px;
}

.jssn-sidebar .nnnavbar-nav > li > a > .dnrop-icon {
    margin-right: auto;
    margin-left: 0;
    color: #9da5b3;
    transition: transform var(--jsn-transition)
}

.jssn-sidebar .nnnavbar-nav > li.is-open > a > .dnrop-icon {
    color: var(--jsn-primary);
    transform: rotate(-180deg)
}

.jssn-sidebar .snub-menu {
    position: static !important;
    min-width: 0 !important;
    max-height: 0;
    visibility: visible !important;
    opacity: 1 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    transform: none !important;
    transition: max-height 380ms cubic-bezier(.2, .75, .3, 1),padding 250ms
}

.jssn-sidebar .nnnavbar-nav > li.is-open > .snub-menu, .jssn-sidebar .nnnavbar-nav > li.is-search-match > .snub-menu {
    padding: 6px 0 8px !important
}

.jssn-sidebar .snub-menu-item > ul {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 3px 18px 3px 0;
    border-right: 1px dashed #dfe3ea
}

    .jssn-sidebar .snub-menu-item > ul > li {
        width: 100%;
        margin: 2px 0
    }

.jssn-sidebar .snub-menu-item ul li a {
    position: relative;
    min-height: 40px;
    padding: 9px 38px 9px 10px;
    display: flex;
    align-items: center;
    color: #667085;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
    text-align: right;
    border-radius: 11px;
    transition: var(--jsn-transition)
}

    .jssn-sidebar .snub-menu-item ul li a:hover {
        color: var(--jsn-primary-dark);
        background: #fff;
        box-shadow: 0 5px 18px rgba(35,45,67,.07);
        transform: translateX(-2px)
    }

    .jssn-sidebar .snub-menu-item ul li a .dnrop-icon {
        position: absolute;
        top: 50%;
        right: 10px;
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: baseline;
        justify-content: center;
        color: #9099aa;
        background: #f1f3f6;
        border-radius: 7px;
        transform: translateY(-50%)
    }

    .jssn-sidebar .snub-menu-item ul li a:hover .dnrop-icon {
        color: #fff;
        background: var(--jsn-primary)
    }

    .jssn-sidebar .snub-menu-item ul li a font {
        margin-right: 5px;
        color: #8c95a5 !important;
        font-size: 12px;
    }

.jssn-sidebar .snub-menu-item li.is-active > a {
    color: #fff !important;
    font-weight: 700;
    background: linear-gradient(135deg,var(--jsn-primary),#ff9c35);
    box-shadow: 0 8px 20px rgba(245,124,0,.25)
}

    .jssn-sidebar .snub-menu-item li.is-active > a .dnrop-icon {
        color: var(--jsn-primary);
        background: #fff
    }

.jsn-user-section .snub-menu {
    padding-left: 5px !important;
    padding-right: 5px !important
}

.jsn-user-image, .jsn-user-info, .jsn-user-time {
    padding: 10px 14px !important;
    color: var(--jsn-muted);
    font-size: 12px;
    text-align: center
}

    .jsn-user-image img {
        object-fit: cover;
        border: 3px solid #fff;
        border-radius: 50%;
        box-shadow: 0 0 0 2px var(--jsn-primary-soft),0 8px 20px rgba(31,42,68,.12)
    }

.jsn-inbox-hidden-table, .jsn-inbox-legacy-mobile, .jsn-profile-message[hidden], .jsn-profile-upload-box[hidden], .jsn-upload-progress-area[hidden], .jsn-validation[style*="visibility: hidden"], .jsn-validation[style*="visibility:hidden"], .jssn-sidebar .snub-menu canvas, .jssn-sidebar .snub-menu-item:empty, .jssn-sidebar .snub-menu-item > img, .jssn-sidebar li.jsn-search-hidden {
    display: none !important
}

.jssn-sidebar li.jsn-search-visible {
    display: block !important
}

.jsn-search-highlight {
    padding: 0 2px;
    color: #7a3b00;
    background: #ffe0b7;
    border-radius: 4px
}

.jsn-no-result {
    display: none;
    margin: 10px 16px;
    padding: 22px 12px;
    color: #8b94a5;
    font-size: 12px;
    text-align: center;
    background: #f7f8fa;
    border: 1px dashed #dfe3e9;
    border-radius: 14px
}

    .jsn-no-result i {
        display: block;
        margin-bottom: 9px;
        color: #afb6c2;
        font-size: 24px
    }

    .jsn-no-result.is-visible {
        display: block
    }

.jssn-sidebar-footer {
    border-top: 1px solid var(--jsn-border);
    background: rgba(255,255,255,.92)
}

.jsn-system-status {
    padding: 10px;
    display: flex;
    gap: 10px;
    background: #fdfdfd;
    border: 1px solid #edf0f4
}

.jsn-status-dot {
    position: relative;
    width: 10px;
    min-width: 10px;
    height: 10px;
    background: #28b463;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(40,180,99,.12);
    top: 15px
}

.jsn-live-activity-title > div, .jsn-system-status div {
    flex-direction: column;
    gap: 2px
}

.jsn-system-status strong {
    color: #4a5568;
    font-size: 12px;
}

.jsn-system-status small {
    color: #9aa2b1;
    font-size: 12px;
}

.jsn-mobile-menu-btn {
    position: fixed;
    top: 14px;
    left: 35px;
    z-index: 1030;
    width: 48px;
    height: 48px;
    display: none;
    padding: 0;
    color: #fff;
    font-size: 18px;
    background: linear-gradient(135deg,var(--jsn-primary),#ff9d36);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(245,124,0,.28);
    cursor: pointer;
    margin-top: 10px !important;
}

.jssn-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: none;
    background: rgba(18,24,38,.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--jsn-transition)
}

@media screen and (max-width:991px) {
    body.jsn-menu-open {
        overflow: hidden
    }

    .jssn-sidebar {
        width: min(88vw,330px);
        transform: translateX(110%)
    }

        .jssn-sidebar.is-open {
            transform: translateX(0)
        }

    .jssn-sidebar-overlay {
        display: block;
        pointer-events: none
    }

        .jssn-sidebar-overlay.is-visible {
            opacity: 1;
            pointer-events: auto
        }

    .jsn-main-content {
        margin-right: 0;
        padding-top: 10px
    }

    .jsn-mobile-menu-btn, .jssn-sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center
    }
}

@media screen and (max-width:480px) {
    .jssn-sidebar {
        width: 92vw
    }

    .jssn-sidebar-header {
        min-height: 84px;
        padding: 13px 14px
    }

    .jsn-brand-logo {
        width: 50px;
        height: 50px
    }

    .jsn-brand-text strong {
        font-size: 14px
    }

    .jsn-menu-search {
        margin-right: 12px;
        margin-left: 12px
    }

    .jnsn-navigation {
        padding-right: 8px;
        padding-left: 8px
    }

    .jsn-main-content {
        padding-right: 10px;
        padding-left: 10px
    }
}

.jsn-page-container {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto
}

.jsn-page-header {
    min-height: 82px;
    margin-bottom: 20px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #eaedf2;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(31,42,68,.055)
}

    .jsn-page-header h1 {
        margin: 0 0 5px;
        color: #20293a;
        font-size: 18px;
        font-weight: 800
    }

        .jsn-page-header h1 a {
            color: inherit;
            text-decoration: none
        }

    .jsn-page-header p {
        margin: 0;
        color: #939bab;
        font-size: 12px;
    }

.jsn-main-content .form {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 150px) !important;
    padding: 20px !important;
    background: #fff !important;
    border: 1px solid #eaedf2 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 28px rgba(31,42,68,.055) !important
}

.jsn-desktop-collapse-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7f899a;
    font-size: 14px;
    background: #f3f5f8;
    border: 1px solid #e8ebf0;
    border-radius: 11px;
    cursor: pointer;
    transition: color var(--jsn-transition),background var(--jsn-transition),border-color var(--jsn-transition),transform var(--jsn-transition)
}

    .jsn-desktop-collapse-btn:hover {
        color: #fff;
        background: var(--jsn-primary);
        border-color: var(--jsn-primary);
        transform: translateX(2px)
    }

.jsn-desktop-open-btn {
    position: fixed;
    width: 35px;
    top: 35px;
    right: 18px;
    z-index: 1035;
    height: 35px;
    padding: 0 14px !important;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    background: linear-gradient(135deg,var(--jsn-primary),#ff9d36);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(245,124,0,.27);
    cursor: pointer;
    transition: transform var(--jsn-transition),box-shadow var(--jsn-transition)
}

    .jsn-desktop-open-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(245,124,0,.34)
    }

@media screen and (max-width:991px) {
    .jsn-page-header {
        padding: 14px 16px;
        border-radius: 14px
    }

        .jsn-page-header h1 {
            font-size: 15px
        }

    .jsn-main-content .form {
        padding: 12px !important;
        border-radius: 14px !important
    }

    .jsn-desktop-collapse-btn, .jsn-desktop-open-btn {
        display: none !important
    }
}

@media screen and (min-width:992px) {
    body.jsn-sidebar-collapsed .jssn-sidebar {
        transform: translateX(110%)
    }

    body.jsn-sidebar-collapsed .jsn-main-content {
        margin-right: 0
    }

    .jsn-desktop-collapse-btn, body.jsn-sidebar-collapsed .jsn-desktop-open-btn {
        display: inline-flex
    }

    .jssn-sidebar-close {
        display: none !important
    }
}

.jsn-user-card {
    margin: 12px 14px 14px;
    padding: 14px;
    background: linear-gradient(135deg,rgba(255,247,239,.96),rgba(255,255,255,.98));
    border: 1px solid rgba(245,124,0,.13);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(31,42,68,.055);
    transition: transform var(--jsn-transition),border-color var(--jsn-transition),box-shadow var(--jsn-transition)
}

.jsn-user-avatar, .jsn-user-avatar-wrap img {
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(245,124,0,.17),0 8px 18px rgba(31,42,68,.14)
}

.jsn-user-card-top {
    display: flex;
    align-items: center;
    gap: 12px
}

.jsn-user-avatar-wrap {
    position: relative;
    width: 58px;
    min-width: 58px;
    height: 58px
}

.jsn-user-avatar {
    width: 58px;
    height: 58px;
    display: block;
    background: #fff;
    border: 3px solid #fff;
    border-radius: 16px
}

.jsn-user-online {
    position: absolute;
    left: -2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    background: #22c55e;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(34,197,94,.13)
}

.jsn-user-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right
}

.jsn-user-greeting {
    margin-bottom: 1px;
    color: #8b94a5;
    font-size: 12px;
    font-weight: 500
}

.jsn-user-name {
    width: 100%;
    overflow: hidden;
    color: #20293a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.8;
    white-space: nowrap;
    text-overflow: ellipsis
}

.jsn-user-avatar-wrap img {
    width: 58px !important;
    height: 58px !important;
    display: block;
    border: 3px solid #fff !important;
    border-radius: 16px !important
}

.jsn-user-role {
    margin-top: 1px;
    color: var(--jsn-primary-dark);
    font-size: 12px;
    font-weight: 600
}

.jsn-user-card:hover {
    transform: translateY(-1px);
    border-color: rgba(245,124,0,.24);
    box-shadow: 0 11px 28px rgba(31,42,68,.085)
}

.jsn-tools-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px;
    direction: rtl
}

.jsn-tool-card {
    position: relative;
    min-height: 185px;
    padding: 22px 20px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #20293a;
    background: linear-gradient(145deg,#fff 0,#fbfcfe 100%);
    border: 1px solid #e8ebf1;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(31,42,68,.055);
    overflow: hidden;
    transition: transform 220ms,border-color 220ms,box-shadow 220ms,background 220ms
}

    .jsn-tool-card::before {
        position: absolute;
        top: -50px;
        right: -50px;
        width: 130px;
        height: 130px;
        content: "";
        background: radial-gradient(circle,rgba(245,124,0,.08) 0,rgba(245,124,0,0) 70%);
        pointer-events: none
    }

    .jsn-tool-card:hover {
        color: #20293a;
        background: #fff;
        border-color: rgba(245,124,0,.28);
        box-shadow: 0 16px 34px rgba(31,42,68,.11);
        transform: translateY(-5px);
        text-decoration: none
    }

    .jsn-tool-card:focus {
        color: #20293a;
        text-decoration: none;
        outline: 0;
        border-color: rgba(245,124,0,.42);
        box-shadow: 0 0 0 4px rgba(245,124,0,.09),0 14px 32px rgba(31,42,68,.1)
    }

.jsn-tool-icon {
    width: 84px;
    height: 84px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg,#fff8f1,#fffdfb);
    border: 1px solid rgba(245,124,0,.11);
    border-radius: 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 9px 22px rgba(245,124,0,.09);
    transition: transform 220ms,background 220ms,box-shadow 220ms
}

    .jsn-tool-icon img {
        width: 58px;
        height: 58px;
        display: block;
        object-fit: contain;
        transition: transform 220ms
    }

.jsn-tool-card:hover .jsn-tool-icon {
    background: linear-gradient(145deg,#fff2e4,#fffaf5);
    box-shadow: 0 12px 25px rgba(245,124,0,.14);
    transform: translateY(-2px)
}

    .jsn-tool-card:hover .jsn-tool-icon img {
        transform: scale(1.06)
    }

.jsn-tool-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

    .jsn-tool-content strong {
        margin-bottom: 7px;
        color: #20293a;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.8
    }

    .jsn-tool-content span {
        max-width: 230px;
        color: #8a94a7;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.9
    }

.jsn-tool-arrow {
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca5b5;
    font-size: 12px;
    background: #f6f7f9;
    border: 1px solid #eceff3;
    border-radius: 50%;
    transition: color 220ms,background 220ms,border-color 220ms,transform 220ms
}

.jsn-tool-card:hover .jsn-tool-arrow {
    color: #fff;
    background: #f57c00;
    border-color: #f57c00;
    transform: translateX(-2px)
}

@media screen and (max-width:1300px) {
    .jsn-tools-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}

@media screen and (max-width:991px) {
    .jsn-desktop-collapse-btn, .jsn-desktop-open-btn {
        display: none !important
    }

    .jssn-sidebar-close {
        display: inline-flex
    }

    .jsn-tools-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 14px
    }

    .jsn-tool-card {
        min-height: 170px;
        padding: 18px 14px 16px;
        border-radius: 16px
    }

    .jsn-tool-icon {
        width: 74px;
        height: 74px;
        border-radius: 21px
    }

        .jsn-tool-icon img {
            width: 50px;
            height: 50px
        }

    .jsn-tool-content strong {
        font-size: 13px
    }

    .jsn-tool-content span {
        font-size: 12px;
    }
}

@media screen and (max-width:520px) {
    .jsn-tools-grid {
        grid-template-columns: 1fr;
        gap: 11px
    }

    .jsn-tool-card {
        min-height: 105px;
        padding: 14px 14px 14px 48px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        border-radius: 14px
    }

    .jsn-tool-icon {
        width: 62px;
        min-width: 62px;
        height: 62px;
        margin: 0 0 0 13px;
        border-radius: 18px
    }

        .jsn-tool-icon img {
            width: 42px;
            height: 42px
        }

    .jsn-tool-content {
        align-items: flex-start;
        text-align: right
    }

        .jsn-tool-content strong {
            margin-bottom: 3px;
            font-size: 13px
        }

        .jsn-tool-content span {
            max-width: none;
            font-size: 12px;
        }

    .jsn-tool-arrow {
        left: 12px;
        bottom: 50%;
        transform: translateY(50%)
    }

    .jsn-tool-card:hover .jsn-tool-arrow {
        transform: translateX(-2px) translateY(50%)
    }
}

.jsn-control-icon, .jsn-modal-input-wrap > i, .jsn-modal-money-wrap > span, .moein-date-wrap > i {
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none
}

.jsn-tools-title {
    margin-bottom: 8px;
    padding: 15px 18px;
    background: #fff;
    border: 1px solid #e8ebf1;
    border-radius: 16px;
    box-shadow: 0 7px 22px rgba(31,42,68,.045);
    float: right;
    width: 100%
}

    .jsn-tools-title > div {
        align-items: center;
        gap: 12px;
        margin-right: 10px;
        float: right
    }

.chart-small, .jsn-control-wrap, .moein-date-wrap {
    position: relative;
    width: 100%
}

.jsn-tools-title-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f57c00;
    font-size: 18px;
    background: #fff4e8;
    border-radius: 13px;
    float: right
}

.jsn-form-card-icon, .moein-filter-header-icon {
    min-width: 48px;
    height: 48px;
    font-size: 18px;
    color: #f57c00
}

.jsn-tools-title h2 {
    margin: 0 0 2px;
    color: #20293a;
    font-size: 18px;
    font-weight: 800
}

.jsn-form-card-header p, .jsn-ledger-title p, .jsn-modal-header p, .jsn-tools-title p, .moein-filter-header p {
    margin: 0;
    color: #98a1b1;
    font-size: 12px;
}

.jsn-control-icon {
    position: absolute;
    right: 14px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f57c00;
    font-size: 12px;
    background: #fff3e6;
    border-radius: 9px
}

.jsn-select-with-icon {
    padding-right: 54px
}

.jsn-btn {
    min-height: 48px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    border-radius: 13px;
    cursor: pointer;
    transition: transform 180ms,box-shadow 180ms,background 180ms,border-color 180ms,color 180ms
}

.jsn-btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg,#f57c00,#ff9c38) !important;
    border: 1px solid #f57c00 !important;
    box-shadow: 0 9px 22px rgba(245,124,0,.24)
}

    .jsn-btn-primary:hover {
        color: #fff !important;
        background: linear-gradient(135deg,#e97200,#f8902d) !important;
        transform: translateY(-2px);
        box-shadow: 0 13px 28px rgba(245,124,0,.31)
    }

    .jsn-btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 6px 14px rgba(245,124,0,.2)
    }

.jsn-btn-secondary {
    color: #495366 !important;
    background: #fff !important;
    border: 1px solid #dfe3e9 !important;
    box-shadow: 0 5px 16px rgba(31,42,68,.05)
}

    .jsn-btn-secondary:hover {
        color: #f57c00 !important;
        background: #fffaf5 !important;
        border-color: rgba(245,124,0,.3) !important;
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(31,42,68,.09)
    }

.jsn-btn:disabled, .jsn-btn[disabled] {
    color: #9ca3af !important;
    background: #f1f3f5 !important;
    border-color: #e3e6ea !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none !important;
    opacity: .85
}

.jsn-form-card {
    width: 100%;
    max-width: 980px;
    margin: 24px auto;
    padding: 24px;
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(31,42,68,.07)
}

.jsn-form-card-header {
    margin-bottom: 24px;
    padding-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid #edf0f4
}

.jsn-form-card-icon {
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff4e8;
    border-radius: 14px
}

.jsn-form-card-header h2, .moein-filter-header h3 {
    margin: 0 0 3px;
    color: #20293a;
    font-size: 17px;
    font-weight: 800
}

.jsn-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 4px 18px
}

.jsn-form-actions {
    margin-top: 10px;
    padding-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #edf0f4
}

.moein-filter-card {
    width: 100%;
    max-width: 1000px;
    margin: 24px auto;
    padding: 24px;
    direction: rtl;
    background: linear-gradient(145deg,#fff,#fdfefe);
    border: 1px solid #e8ebf1;
    border-radius: 22px;
    box-shadow: 0 14px 38px rgba(31,42,68,.075);
    animation: 480ms cubic-bezier(.2,.8,.25,1) moeinCardEnter
}

@keyframes moeinCardEnter {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.moein-filter-header {
    margin-bottom: 24px;
    padding-bottom: 18px;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid #edf0f4
}

.moein-filter-header-icon {
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg,#fff0df,#fff9f3);
    border: 1px solid rgba(245,124,0,.13);
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(245,124,0,.1)
}

.moein-date-input, .moein-field .select2-container--default .select2-selection--single {
    background: linear-gradient(145deg,#fff,#fbfcfe);
    box-shadow: 0 6px 18px rgba(31,42,68,.045);
    outline: 0
}

.moein-filter-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 19px 20px
}

.jsn-live-content, .jsn-profile-main-info, .moein-field {
    min-width: 0
}

    .moein-field label {
        min-height: 28px;
        margin-bottom: 7px;
        display: flex;
        align-items: center;
        gap: 7px;
        color: #485266;
        font-size: 12px;
        font-weight: 700
    }

        .moein-field label i {
            width: 20px;
            color: #f57c00;
            font-size: 12px;
            text-align: center
        }

    .moein-field .select2-container {
        width: 100% !important;
        font-family: inherit
    }

    .moein-field .select2-container--default .select2-selection--single {
        position: relative;
        width: 100%;
        height: 52px;
        display: flex;
        align-items: center;
        border: 1px solid #dfe4eb;
        border-radius: 15px;
        transition: border-color .2s,box-shadow .2s,transform .2s,background .2s
    }

        .moein-field .select2-container--default .select2-selection--single:hover {
            background-color: gray;
            border-color: #cbd2dc;
            box-shadow: 0 9px 22px rgba(31,42,68,.07);
            transform: translateY(-1px)
        }

    .moein-field .select2-container--default.select2-container--focus .select2-selection--single, .moein-field .select2-container--default.select2-container--open .select2-selection--single {
        background-color: gray !important;
        border-color: #f57c00;
        box-shadow: 0 0 0 4px rgba(245,124,0,.1),0 10px 24px rgba(31,42,68,.08);
        transform: translateY(-1px)
    }

    .moein-field .select2-container--default .select2-selection--single .select2-selection__rendered {
        width: 100%;
        padding-right: 16px;
        padding-left: 48px;
        color: #283245;
        font-size: 13px;
        font-weight: 500;
        line-height: 50px;
        text-align: right
    }

    .moein-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #a0a8b6
    }

    .moein-field .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 0;
        left: 12px;
        right: auto;
        width: 34px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center
    }

        .moein-field .select2-container--default .select2-selection--single .select2-selection__arrow b {
            position: static;
            width: 8px;
            height: 8px;
            margin: -4px 0 0;
            border: 0;
            border-right: 2px solid #9aa3b2;
            border-bottom: 2px solid #9aa3b2;
            transform: rotate(45deg);
            transition: transform 220ms,border-color 220ms
        }

    .moein-field .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        margin-top: 4px;
        border-color: #f57c00;
        transform: rotate(225deg)
    }

.select2-container--default .select2-dropdown {
    margin-top: 7px;
    direction: rtl;
    background: rgba(255,255,255,.98);
    border: 1px solid #e2e6ec;
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(31,42,68,.16);
    overflow: hidden;
    animation: 220ms cubic-bezier(.2,.8,.25,1) jsnSelectDropdownEnter;
    transform-origin: top center
}

@keyframes jsnSelectDropdownEnter {
    from {
        opacity: 0;
        transform: translateY(-7px) scale(.98)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.select2-container--open .select2-dropdown--above {
    margin-top: 0;
    margin-bottom: 7px;
    transform-origin: bottom center
}

.select2-container--default .select2-dropdown--above, .select2-container--default .select2-dropdown--below {
    border-radius: 16px
}

.select2-container--default .select2-search--dropdown {
    position: relative;
    padding: 12px
}

    .select2-container--default .select2-search--dropdown::before {
        position: absolute;
        top: 50%;
        right: 25px;
        z-index: 2;
        content: "\f002";
        color: #9ba4b3;
        font-family: "Font Awesome 5 Free";
        font-size: 12px;
        font-weight: 900;
        transform: translateY(-50%);
        pointer-events: none
    }

    .select2-container--default .select2-search--dropdown .select2-search__field {
        width: 100%;
        height: 43px;
        padding: 0 39px 0 13px;
        direction: rtl;
        color: #283245;
        font-family: inherit;
        font-size: 12px;
        background: #f5f7fa;
        border: 1px solid transparent;
        border-radius: 12px;
        outline: 0;
        transition: background 180ms,border-color 180ms,box-shadow 180ms
    }

        .select2-container--default .select2-search--dropdown .select2-search__field:focus {
            background: #fff;
            border-color: rgba(245,124,0,.46);
            box-shadow: 0 0 0 4px rgba(245,124,0,.09)
        }

.select2-container--default .select2-results {
    padding: 4px 7px 8px
}

.select2-container--default .select2-results__options {
    max-height: 265px;
    padding-left: 3px;
    scrollbar-color: #d3d8e1 transparent
}

    .select2-container--default .select2-results__options::-webkit-scrollbar {
        width: 6px
    }

    .select2-container--default .select2-results__options::-webkit-scrollbar-track {
        background: 0 0
    }

    .select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
        background: #d3d8e1;
        border-radius: 20px
    }

.select2-container--default .select2-results__option {
    position: relative;
    min-height: 42px;
    margin: 2px 0;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    color: #566074;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;
    border-radius: 10px;
    transition: color 150ms,background 150ms,transform 150ms
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: #d96800;
    background: linear-gradient(135deg,#fff0df,#fff8f1);
    transform: translateX(-2px)
}

.select2-container--default .select2-results__option[aria-selected=true] {
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg,#f57c00,#ff9c38);
    box-shadow: 0 7px 16px rgba(245,124,0,.22)
}

    .select2-container--default .select2-results__option[aria-selected=true] .select2-results__option--highlighted {
        color: #000
    }

.select2-container--default .select2-results__option[role=alert] {
    justify-content: center;
    color: #9099a8;
    text-align: center;
    background: #f7f8fa
}

.moein-date-input {
    width: 100% !important;
    height: 52px !important;
    padding: 0 16px 0 47px !important;
    direction: rtl;
    text-align: right !important;
    color: #283245;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #dfe4eb !important;
    border-radius: 15px !important;
    transition: border-color .2s,box-shadow .2s,transform .2s
}

    .moein-date-input:hover {
        border-color: #98a2b3 !important;
        box-shadow: 0 9px 22px rgba(31,42,68,.07);
        transform: translateY(-1px)
    }

    .moein-date-input:focus {
        background: #98a2b3;
        border-color: #f57c00 !important;
        box-shadow: 0 0 0 4px rgba(245,124,0,.1),0 10px 24px rgba(31,42,68,.08);
        transform: translateY(-1px)
    }

.moein-date-wrap > i {
    position: absolute;
    left: 16px;
    color: #9ca5b3;
    font-size: 14px;
    transition: color 180ms,transform 180ms
}

.moein-date-wrap:focus-within > i {
    color: #f57c00;
    transform: translateY(-50%) scale(1.08)
}

.jsn-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(20,27,42,.56) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: .2s jsnBackdropIn
}

@keyframes jsnBackdropIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.jsn-modal {
    width: min(92vw,720px);
    max-height: min(88vh,850px);
    direction: rtl;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(18,24,38,.34),0 8px 25px rgba(18,24,38,.18);
    overflow: hidden;
    animation: 320ms cubic-bezier(.2,.8,.25,1) jsnModalEnter
}

@keyframes jsnModalEnter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.965)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.jsn-modal-header {
    min-height: 88px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    background: radial-gradient(circle at top right,rgba(245,124,0,.11),transparent 52%),#fff;
    border-bottom: 1px solid #edf0f4
}

.jsn-modal-title-wrap, .jsn-page-title-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px
}

.jsn-modal-title-icon {
    width: 50px;
    min-width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f57c00;
    font-size: 19px;
    background: linear-gradient(145deg,#fff0df,#fff9f3);
    border: 1px solid rgba(245,124,0,.13);
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(245,124,0,.11)
}

.jsn-modal-header h2 {
    margin: 0 0 4px;
    color: #20293a;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.7
}

.jsn-modal-close {
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8f98a7 !important;
    font-size: 14px;
    background: #f4f6f8;
    border: 1px solid #eaedf1;
    border-radius: 12px;
    transition: color 180ms,background 180ms,border-color 180ms,transform 180ms
}

.jsn-modal .select2-container--default .select2-selection--single, .jsn-modal-input {
    background: linear-gradient(145deg,#fff,#fbfcfe);
    box-shadow: 0 5px 16px rgba(31,42,68,.04)
}

.jsn-modal-close:hover {
    color: #dc2626 !important;
    background: #fff1f2;
    border-color: #fecdd3;
    transform: rotate(90deg)
}

.jsn-modal-body {
    flex: 1;
    min-height: 0;
    padding: 22px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #d2d7e0 transparent
}

    .jsn-modal-body::-webkit-scrollbar {
        width: 7px
    }

.jsn-modal .select2-container, .jsn-modal-input {
    width: 100% !important
}

.jsn-modal-body::-webkit-scrollbar-track {
    background: 0 0
}

.jsn-modal-body::-webkit-scrollbar-thumb {
    background: #d2d7e0;
    border-radius: 20px
}

.jsn-modal-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    column-gap: 18px;
    row-gap: 12px
}

.jsn-modal-field {
    min-width: 0;
    align-self: start
}

    .jsn-modal-field label {
        min-height: 27px;
        margin-bottom: 7px;
        display: flex;
        align-items: center;
        gap: 7px;
        color: #485266;
        font-size: 12px;
        font-weight: 700
    }

        .jsn-modal-field label i {
            width: 19px;
            color: #f57c00;
            font-size: 12px;
            text-align: center
        }

.jsn-modal-input {
    min-width: 0;
    height: 50px !important;
    padding: 0 15px !important;
    color: #283245;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #dfe4eb !important;
    border-radius: 14px !important;
    outline: 0;
    transition: border-color 180ms,box-shadow 180ms,transform 180ms,background 180ms
}

    .jsn-modal-input:hover {
        background: #fff;
        border-color: #ccd3dd !important;
        box-shadow: 0 8px 20px rgba(31,42,68,.065);
        transform: translateY(-1px)
    }

    .jsn-modal-input:focus {
        background: #fff;
        border-color: #f57c00 !important;
        box-shadow: 0 0 0 4px rgba(245,124,0,.1),0 9px 22px rgba(31,42,68,.07);
        transform: translateY(-1px)
    }

.jsn-modal-input-wrap, .jsn-modal-money-wrap, .snub-menu li.is-active {
    position: relative
}

    .jsn-modal-input-wrap .jsn-modal-input {
        padding-left: 45px !important
    }

    .jsn-modal-input-wrap > i {
        position: absolute;
        left: 15px;
        color: #98a2b3;
        font-size: 13px
    }

    .jsn-modal-input-wrap:focus-within > i {
        color: #f57c00
    }

    .jsn-modal-money-wrap .jsn-modal-input {
        padding-left: 58px !important;
        direction: ltr;
        text-align: left
    }

    .jsn-modal-money-wrap > span {
        position: absolute;
        left: 13px;
        padding: 4px 7px;
        color: #8b95a5;
        font-size: 12px;
        font-weight: 700;
        background: #f2f4f7;
        border-radius: 7px
    }

.jsn-modal-textarea {
    min-height: 96px !important;
    height: auto !important;
    padding: 13px 15px !important;
    resize: vertical;
    line-height: 1.9
}

@keyframes jsnValidationIn {
    from {
        opacity: 0;
        transform: translateY(-3px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-modal-footer {
    min-height: 78px;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    background: rgba(250,251,253,.96);
    border-top: 1px solid #edf0f4
}

.jsn-modal-btn {
    min-height: 47px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    border-radius: 13px;
    transition: transform 180ms,box-shadow 180ms,background 180ms,border-color 180ms
}

.jsn-modal-btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg,#f57c00,#ff9b35);
    border: 1px solid #f57c00;
    box-shadow: 0 9px 22px rgba(245,124,0,.25)
}

    .jsn-modal-btn-primary:hover {
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 13px 28px rgba(245,124,0,.32)
    }

.jsn-modal-btn-secondary {
    color: #586174 !important;
    background: #fff;
    border: 1px solid #dfe4eb;
    box-shadow: 0 5px 15px rgba(31,42,68,.045)
}

    .jsn-modal-btn-secondary:hover {
        color: #f57c00 !important;
        background: #fffaf5;
        border-color: rgba(245,124,0,.31);
        transform: translateY(-2px)
    }

.jsn-modal-input:disabled, .jsn-modal-input[disabled] {
    color: #a0a7b3 !important;
    background: #f3f5f7 !important;
    border-color: #e5e8ed !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none !important
}

.jsn-modal .select2-container--default .select2-selection--single {
    height: 50px;
    display: flex;
    align-items: center;
    border: 1px solid #dfe4eb;
    border-radius: 14px;
    transition: border-color 180ms,box-shadow 180ms,transform 180ms
}

    .jsn-modal .select2-container--default .select2-selection--single:hover {
        border-color: #ccd3dd;
        box-shadow: 0 8px 20px rgba(31,42,68,.065);
        transform: translateY(-1px)
    }

.jsn-modal .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #f57c00;
    box-shadow: 0 0 0 4px rgba(245,124,0,.1),0 9px 22px rgba(31,42,68,.07)
}

.jsn-money-disabled {
    color: #9aa2af !important;
    background: #f2f4f7 !important;
    border-color: #e1e5ea !important;
    box-shadow: none !important;
    cursor: not-allowed
}

.jsn-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100%;
    padding-right: 15px;
    padding-left: 45px;
    color: #283245;
    font-size: 13px;
    line-height: 48px;
    text-align: right
}

.jsn-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    left: 12px;
    right: auto;
    width: 32px;
    height: 48px
}

.jsn-validation {
    margin-top: 5px;
    padding: 5px 9px;
    color: #dc2626 !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    animation: 180ms jsnValidationIn
}

.jsn-ledger-card {
    width: 100%;
    margin-top: 22px;
    direction: rtl;
    background: #fff;
    border: 1px solid #e7ebf0;
    border-radius: 20px;
    box-shadow: 0 14px 38px rgba(31,42,68,.07);
    overflow: hidden;
    animation: 420ms cubic-bezier(.2,.8,.25,1) jsnLedgerEnter
}

@keyframes jsnLedgerEnter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.992)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.jsn-ledger-header {
    min-height: 84px;
    padding: 17px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: radial-gradient(circle at top right,rgba(245,124,0,.1),transparent 48%),linear-gradient(145deg,#fff,#fdfefe);
    border-bottom: 1px solid #edf0f4
}

.jsn-ledger-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px
}

.jsn-ledger-title-icon {
    width: 48px;
    min-width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f57c00;
    font-size: 18px;
    background: linear-gradient(145deg,#fff0df,#fff9f3);
    border: 1px solid rgba(245,124,0,.13);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(245,124,0,.1)
}

.jsn-ledger-badge, .jsn-row-number {
    display: inline-flex;
    font-size: 12px;
}

.jsn-ledger-title h3 {
    margin: 0 0 3px;
    color: #20293a;
    font-size: 17px;
    font-weight: 900
}

.jsn-ledger-badge {
    min-height: 36px;
    padding: 0 12px;
    align-items: center;
    gap: 7px;
    color: #7d8797;
    font-weight: 700;
    background: #f5f7f9;
    border: 1px solid #e8ebef;
    border-radius: 11px
}

.jsn-ledger-table-wrap {
    min-height: 400px;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-color: #cfd5de transparent
}

    .jsn-ledger-table-wrap::-webkit-scrollbar {
        height: 8px
    }

    .jsn-ledger-table-wrap::-webkit-scrollbar-track {
        background: #f4f6f8
    }

    .jsn-ledger-table-wrap::-webkit-scrollbar-thumb {
        background: #cfd5de;
        border-radius: 20px
    }

.jsn-ledger-table {
    width: 100% !important;
    min-width: 1050px;
    margin: 0;
    direction: rtl;
    background: #fff;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-family: inherit
}

.jsn-family-grid, .jsn-need-grid, .jsn-otp-grid, .jsn-payment-grid, .jsn-products-grid {
    border-spacing: 0;
    border-collapse: separate
}

.jsn-ledger-table td, .jsn-ledger-table th {
    box-sizing: border-box;
    vertical-align: middle;
    border: 0 !important
}

.jsn-ledger-table-header th {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 55px;
    padding: 12px 14px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.6;
    text-align: center;
    background: linear-gradient(135deg,#ef7600,#ff9530);
    border-left: 1px solid rgba(255,255,255,.18) !important;
    white-space: nowrap
}

    .jsn-ledger-table-header th:last-child {
        border-left: 0 !important
    }

.jsn-ledger-row td {
    min-height: 58px;
    padding: 13px 14px;
    color: #3f4859;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.9;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #edf0f4 !important;
    transition: background 180ms,box-shadow 180ms,transform 180ms,color 180ms
}

.jsn-ledger-row-alt td {
    background: #fafbfc
}

.jsn-ledger-row:hover td {
    background: linear-gradient(135deg,#fff9f3,#fff);
    box-shadow: inset 0 1px 0 rgba(245,124,0,.08),inset 0 -1px 0 rgba(245,124,0,.08)
}

    .jsn-ledger-row:hover td:first-child {
        box-shadow: inset -4px 0 0 #f57c00,inset 0 1px 0 rgba(245,124,0,.08),inset 0 -1px 0 rgba(245,124,0,.08)
    }

.jsn-ledger-row {
    animation: .3s both jsnRowEnter
}

@keyframes jsnRowEnter {
    from {
        opacity: 0;
        transform: translateY(5px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-col-index {
    width: 64px;
    min-width: 64px
}

.jsn-row-number {
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e8ed;
    transition: color 180ms,background 180ms,transform 180ms
}

.jsn-ledger-row:hover .jsn-row-number {
    color: #fff;
    background: #f57c00;
    border-color: #f57c00;
    transform: scale(1.04)
}

.jsn-col-balance, .jsn-col-date {
    width: 160px;
    min-width: 160px
}

.jsn-date-cell {
    display: flex;
    align-items: center;
    justify-content: center
}

    .jsn-date-cell > i {
        color: #f57c00;
        font-size: 12px;
    }

    .jsn-date-cell span {
        color: #424c5e;
        font-size: 12px;
        font-weight: 700
    }

    .jsn-date-cell small {
        padding: 3px 6px;
        direction: ltr;
        color: #8790a0;
        font-size: 12px;
        background: #f2f4f7;
        border-radius: 6px
    }

.jsn-col-type {
    width: 185px;
    min-width: 185px
}

.jsn-payment-type {
    max-width: 100%;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #596376 !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
    background: #f4f6f8;
    border: 1px solid #e5e8ed;
    border-radius: 9px;
    transition: color 180ms,background 180ms,border-color 180ms,transform 180ms,box-shadow 180ms
}

    .jsn-payment-type:hover {
        color: #d96800 !important;
        background: #fff3e6;
        border-color: rgba(245,124,0,.22);
        box-shadow: 0 6px 16px rgba(245,124,0,.1);
        transform: translateY(-1px)
    }

.jsn-col-description {
    min-width: 360px;
    text-align: right !important
}

.jsn-description-link {
    width: 100%;
    display: block;
    overflow: hidden;
    color: #3f4859 !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.9;
    text-align: right;
    white-space: normal;
    transition: color 180ms,transform 180ms
}

.jsn-footer-title, .jsn-ledger-footer td, .jsn-money {
    font-size: 12px;
    font-weight: 800
}

.jsn-description-link:hover {
    color: #e16d00 !important;
    transform: translateX(-2px)
}

.jsn-col-money {
    width: 145px;
    min-width: 145px;
    direction: ltr;
    text-align: center !important
}

.jsn-money {
    min-width: 95px;
    padding: 6px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
    color: #303a4d;
    background: #f6f7f9;
    border: 1px solid #e9ecf0;
    border-radius: 9px;
    white-space: nowrap
}

.jsn-footer, .jsn-live-activity, .jsn-page-titlebar, .jsn-satisfaction-card {
    direction: rtl;
    direction: rtl
}

.jsn-money-debit {
    color: #c75d00;
    background: #fff7ed;
    border-color: #fed7aa
}

.jsn-money-credit {
    color: #137a4a;
    background: #ecfdf3;
    border-color: #bbf7d0
}

.jsn-balance {
    color: #4a5568;
    background: #f3f5f7;
    border-color: #e1e5ea
}

.jsn-balance-positive {
    color: #067647 !important;
    background: #ecfdf3 !important;
    border-color: #a7f3d0 !important
}

.jsn-balance-negative {
    color: #dc2626 !important;
    background: #fff1f2 !important;
    border-color: #fecdd3 !important
}

.jsn-balance-zero {
    color: #667085 !important;
    background: #f5f6f8 !important;
    border-color: #e4e7ec !important
}

.jsn-ledger-footer td {
    min-height: 66px;
    padding: 14px;
    color: #fff;
    text-align: center;
    background: linear-gradient(135deg,#273248,#39465e);
    border: 0 !important
}

.jsn-footer-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff
}

    .jsn-footer-title i {
        color: #ff9b35
    }

.jsn-total-money {
    color: #fff !important;
    background: rgba(255,255,255,.1) !important;
    border: 1px solid rgba(255,255,255,.14) !important
}

.jsn-total-debit {
    box-shadow: inset 3px 0 0 #fb923c
}

.jsn-total-credit {
    box-shadow: inset 3px 0 0 #34d399
}

.jsn-empty-row td {
    padding: 55px 20px !important;
    color: #8c95a4;
    font-size: 12px;
    text-align: center;
    background: #fff
}

    .jsn-empty-row td::before {
        margin-bottom: 10px;
        display: block;
        content: "\f15c";
        color: #d0d5dd;
        font-family: "Font Awesome 5 Free";
        font-size: 30px;
        font-weight: 900
    }

.jsn-page-titlebar {
    position: relative;
    width: 100%;
    min-height: 78px;
    padding: 15px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: radial-gradient(circle at top right,rgba(245,124,0,.13),transparent 48%),linear-gradient(145deg,#fff,#fdfefe);
    border: 1px solid #e7ebf0;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(31,42,68,.065);
    animation: 360ms cubic-bezier(.2,.8,.25,1) jsnTitleBarEnter
}

@keyframes jsnTitleBarEnter {
    from {
        opacity: 0;
        transform: translateY(-8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-footer::before, .jsn-page-titlebar::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    content: "";
    background: linear-gradient(90deg,transparent,#f57c00,#ff9b35,transparent)
}

.jsn-page-title-icon {
    width: 48px;
    min-width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f57c00;
    font-size: 18px;
    background: linear-gradient(145deg,#fff0df,#fff9f3);
    border: 1px solid rgba(245,124,0,.14);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(245,124,0,.1);
    transition: transform .2s,box-shadow .2s
}

.jsn-page-titlebar:hover .jsn-page-title-icon {
    transform: translateY(-2px) rotate(-3deg);
    box-shadow: 0 11px 24px rgba(245,124,0,.16)
}

.jsn-page-title-text, .jsn-upload-file-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.jsn-page-title {
    display: block;
    overflow: hidden;
    color: #20293a;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.7;
    white-space: nowrap;
    text-overflow: ellipsis
}

.jsn-page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #98a1b1;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap
}

    .jsn-page-breadcrumb a {
        color: #8c95a5;
        text-decoration: none;
        transition: color 180ms
    }

        .jsn-page-breadcrumb a:hover {
            color: #f57c00
        }

    .jsn-page-breadcrumb i {
        color: #c0c6d0;
        font-size: 12px;
    }

    .jsn-page-breadcrumb span {
        color: #f57c00;
        font-weight: 700
    }

.jsn-branch-cell, .jsn-page-title-actions, .jsn-payment-account {
    display: flex;
    align-items: center;
    gap: 8px
}

.jsn-title-action-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7f8999;
    font-size: 13px;
    background: #f4f6f8;
    border: 1px solid #e7eaef;
    border-radius: 12px;
    cursor: pointer;
    transition: color 180ms,background 180ms,border-color 180ms,transform 180ms,box-shadow 180ms
}

    .jsn-title-action-btn:hover {
        color: #fff;
        background: linear-gradient(135deg,#f57c00,#ff9b35);
        border-color: #f57c00;
        box-shadow: 0 8px 18px rgba(245,124,0,.24);
        transform: translateY(-2px)
    }

        .jsn-title-action-btn:hover i {
            animation: .5s jsnRefreshRotate
        }

@keyframes jsnRefreshRotate {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@media screen and (max-width:650px) {
    .jsn-modal {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        border-radius: 17px
    }

    .jsn-modal-header {
        min-height: 76px;
        padding: 14px 15px
    }

    .jsn-modal-title-icon {
        width: 43px;
        min-width: 43px;
        height: 43px;
        border-radius: 13px
    }

    .jsn-modal-header h2, .jsn-page-title {
        font-size: 14px
    }

    .jsn-modal-header p, .jsn-page-title-actions {
        display: none
    }

    .jsn-modal-body {
        padding: 15px
    }

    .jsn-modal-grid {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .jsn-modal-field-full {
        grid-column: auto
    }

    .jsn-modal-footer {
        padding: 12px 15px;
        flex-direction: column
    }

    .jsn-modal-btn {
        width: 100%
    }

    .jsn-page-titlebar {
        min-height: 68px;
        margin-bottom: 14px;
        padding: 12px 13px;
        border-radius: 15px;
        position: fixed;
        z-index: 999;
        width: 93%;
    }

    .jsn-page-title-icon {
        width: 42px;
        min-width: 42px;
        height: 42px;
        border-radius: 12px
    }

    .jsn-page-breadcrumb {
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

.jsn-footer {
    position: relative;
    width: 100%;
    background: radial-gradient(circle at top right,rgba(245,124,0,.08),transparent 42%),linear-gradient(145deg,#fff,#fafbfd);
    border-top: 1px solid #e7ebf0;
    box-shadow: 0 -8px 30px rgba(31,42,68,.045)
}

.jsn-footer-inner {
    width: 100%;
    max-width: 1700px;
    min-height: 96px;
    margin: 0 auto;
    padding: 18px 24px;
    display: grid;
    grid-template-columns: minmax(220px,auto) minmax(250px,1fr) minmax(210px,auto);
    align-items: center;
    gap: 24px
}

.jsn-footer-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px
}

.jsn-footer-logo {
    width: 48px;
    min-width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(245,124,0,.14);
    border-radius: 14px;
    box-shadow: 0 7px 18px rgba(245,124,0,.09)
}

    .jsn-footer-logo img {
        width: 39px;
        height: 39px;
        display: block;
        object-fit: contain
    }

.jsn-footer-brand-text strong {
    color: #293246;
    font-size: 12px;
    font-weight: 900
}

.jsn-footer-brand-text span {
    color: #99a2b1;
    font-size: 12px;
}

.jsn-footer-center {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

.jsn-footer-panel {
    width: 100%;
    margin-bottom: 5px
}

.jsn-footer-log {
    max-width: 100%;
    overflow: hidden;
    color: #7f8999;
    font-size: 12px;
    line-height: 1.9;
    white-space: normal;
    text-overflow: ellipsis
}

    .jsn-footer-log a {
        color: #f57c00;
        font-weight: 700;
        text-decoration: none;
        transition: color 180ms
    }

        .jsn-footer-log a:hover {
            color: #d96800
        }

.jsn-footer-status {
    min-width: 210px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(247,249,251,.9);
    border: 1px solid #e9edf2;
    border-radius: 13px
}

.jsn-footer-status-dot {
    position: relative;
    width: 10px;
    min-width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(34,197,94,.12)
}

    .jsn-footer-status-dot::after {
        position: absolute;
        inset: -5px;
        content: "";
        border: 1px solid rgba(34,197,94,.28);
        border-radius: 50%;
        animation: 2s infinite jsnFooterPulse
    }

@keyframes jsnFooterPulse {
    0% {
        opacity: .9;
        transform: scale(.65)
    }

    70% {
        opacity: 0;
        transform: scale(1.45)
    }

    100% {
        opacity: 0
    }
}

.jsn-branch-cell > div, .jsn-footer-status div {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.jsn-footer-status strong {
    color: #4b5567;
    font-size: 12px;
    font-weight: 800
}

.jsn-footer-status small {
    color: #99a2b1;
    font-size: 12px;
}

.jsn-footer-bottom {
    min-height: 42px;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #929baa;
    font-size: 12px;
    font-weight: 500;
    background: rgba(247,248,250,.9);
    border-top: 1px solid #edf0f4
}

.jsn-footer-separator {
    width: 4px;
    height: 4px;
    background: #f57c00;
    border-radius: 50%
}

@media screen and (min-width:992px) {
    .jsn-footer {
        width: calc(100% - var(--jssn-sidebar-width));
        margin-right: var(--jssn-sidebar-width);
        transition: width var(--jsn-transition),margin-right var(--jsn-transition)
    }

    body.jsn-sidebar-collapsed .jsn-footer {
        width: 100%;
        margin-right: 0
    }
}

@media screen and (max-width:991px) {
    .jsn-footer {
        width: 100%;
        margin-right: 0
    }

    .jsn-footer-inner {
        min-height: 0;
        padding: 18px 14px;
        grid-template-columns: 1fr;
        gap: 15px
    }

    .jsn-footer-brand, .jsn-footer-status {
        justify-self: center
    }

    .jsn-footer-brand {
        text-align: right
    }

    .jsn-footer-status {
        width: 100%;
        max-width: 340px
    }

    .jsn-footer-bottom {
        padding: 11px 12px;
        flex-wrap: wrap;
        line-height: 1.8;
        text-align: center
    }
}

.index-chart-card, .jsn-satisfaction-card {
    margin-top: 18px;
    padding: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(31,42,68,.06)
}

.index-chart-card {
    border: 1px solid #e7ebf0;
    border-radius: 18px
}

.index-chart-title {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: right
}

    .index-chart-title strong, .jsn-satisfaction-title strong {
        color: #20293a;
        font-size: 14px;
        font-weight: 900
    }

    .index-chart-title span, .jsn-satisfaction-title span {
        color: #98a1b1;
        font-size: 12px;
    }

.index-chart-body {
    position: relative;
    width: 100%;
    height: 220px
}

@media screen and (max-width:767px) {
    .jsn-form-card {
        margin: 12px auto;
        padding: 16px;
        border-radius: 16px
    }

    .jsn-form-grid {
        grid-template-columns: 1fr;
        gap: 0
    }

    .jsn-form-actions {
        flex-direction: column
    }

        .jsn-form-actions .jsn-btn {
            width: 100%
        }

    .moein-filter-card {
        margin: 12px auto;
        padding: 16px;
        border-radius: 17px
    }

    .moein-filter-grid {
        grid-template-columns: 1fr;
        gap: 15px
    }

    .moein-filter-header {
        margin-bottom: 18px
    }

        .moein-filter-header h3 {
            font-size: 15px
        }

    .jsn-ledger-card {
        border-radius: 16px
    }

    .jsn-ledger-header {
        min-height: 74px;
        padding: 14px
    }

    .jsn-ledger-title-icon {
        width: 42px;
        min-width: 42px;
        height: 42px
    }

    .jsn-ledger-title h3 {
        font-size: 14px
    }

    .jsn-ledger-badge, .jsn-ledger-title p {
        display: none
    }

    .index-chart-body {
        height: 190px
    }
}

.jsn-satisfaction-card {
    width: 100%;
    border: 1px solid #e7ebf0;
    border-radius: 18px;
    animation: 420ms jsnSatisfactionEnter
}

@keyframes jsnSatisfactionEnter {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-satisfaction-header {
    margin-bottom: 14px;
    padding-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #edf0f4
}

.jsn-satisfaction-title {
    display: flex;
    align-items: center;
    gap: 11px
}

.jsn-satisfaction-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f57c00;
    font-size: 17px;
    background: #fff4e8;
    border-radius: 13px
}

.jsn-family-auto-send > div, .jsn-family-form-auto > div, .jsn-family-form-submit-note > div, .jsn-family-person > div, .jsn-family-relation-preview > div, .jsn-inbox-live-state div, .jsn-invoice-summary-title > div, .jsn-letter-draft-state div, .jsn-letter-option-card > span:last-child, .jsn-letter-submit-note > div, .jsn-otp-person > div, .jsn-otp-security-state div, .jsn-payment-account > div, .jsn-payment-payer-header div, .jsn-payment-security-badge div, .jsn-satisfaction-title > div {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.jsn-satisfaction-total {
    padding: 7px 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #f7f8fa;
    border: 1px solid #e9ecf1;
    border-radius: 11px
}

.jsn-live-activity-toggle, .jsn-live-icon-stock {
    color: #f57c00;
    background: #fff4e8
}

.jsn-satisfaction-total span {
    color: #98a1b1;
    font-size: 12px;
}

.jsn-satisfaction-total strong {
    color: #344054;
    font-size: 13px;
    font-weight: 900
}

.jsn-satisfaction-chart-body {
    position: relative;
    width: 100%;
    height: 290px
}

@media screen and (max-width:600px) {
    .jsn-satisfaction-chart-body {
        height: 360px
    }

    .jsn-satisfaction-header {
        align-items: flex-start
    }
}



.jsn-live-activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.jsn-live-activity-toggle {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 1px solid #ffe1c2;
    border-radius: 9px;
    cursor: pointer;
    transition: 180ms
}

    .jsn-live-activity-toggle:hover {
        background: #f57c00;
        color: #fff
    }

.jsn-live-activity-list::-webkit-scrollbar-track {
    background: 0 0
}

.jsn-live-item {
    display: flex;
    align-items: flex-start
}

    .jsn-live-item.jsn-live-new {
        animation: .5s jsnLiveItemEnter
    }

.jsn-live-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.jsn-live-icon-sale {
    color: #16a34a;
    background: #ecfdf3
}

.jsn-letter-option-icon.project, .jsn-letter-section-icon.editor, .jsn-live-icon-finance, .jsn-need-section-icon.table, .jsn-payment-section-icon.history, .jsn-payment-share.jan, .jsn-user-menu-icon.profile {
    color: #2563eb;
    background: #eff6ff
}

.jsn-letter-option-icon.signature, .jsn-letter-section-icon.attachment, .jsn-live-icon-user, .jsn-need-section-icon.chart, .jsn-need-section-icon.products, .jsn-payment-share.tadbir, .jsn-user-menu-icon.dashboard {
    color: #7c3aed;
    background: #f5f3ff
}

.jsn-live-icon-system {
    color: #475467;
    background: #f2f4f7
}

.jsn-hidden-select, .jsn-inbox-mobile-meta, .jsn-inbox-mobile-priority, .jsn-live-activity.is-collapsed .jsn-live-activity-empty, .jsn-live-activity.is-collapsed .jsn-live-activity-list {
    display: none
}

.jsn-filter-toggle.is-collapsed i, .jsn-live-activity.is-collapsed .jsn-live-activity-toggle i {
    transform: rotate(180deg)
}

.jsn-live-activity {
    direction: rtl;
    background: #fff;
    border: 1px solid #e9edf2;
    box-shadow: 0 8px 24px rgba(31, 42, 68, .06);
    overflow: hidden;
    position: relative;
    width: 98%;
}

.jsn-live-activity-header {
    padding: 12px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: linear-gradient(90deg,#fff 0,#fff7ed 100%);
    border-bottom: 1px solid #eef1f5
}

.jsn-family-form-submit-note, .jsn-invoice-summary-title, .jsn-letter-submit-note, .jsn-live-activity-title, .jsn-otp-person {
    display: flex;
    align-items: center;
    gap: 9px
}

    .jsn-live-activity-title strong {
        color: #1f2937;
        font-size: 12px;
        font-weight: 900
    }

    .jsn-inbox-empty-search small, .jsn-live-activity-title small, .jsn-no-recipient, .jsn-payment-loader small, .jsn-profile-detail-label, .jsn-profile-summary-card span, .jsn-top-user-welcome, .jsn-upload-file-info small, .jsn-upload-file-info span, .jsn-user-dropdown-head span {
        color: #98a2b3;
        font-size: 12px;
    }

.jsn-live-count, .jsn-live-icon {
    align-items: center;
    color: #ef7d01
}

.jsn-live-dot {
    min-width: 9px;
    position: relative;
    width: 9px;
    height: 9px;
    background: #22c55e;
    border-radius: 50%
}

    .jsn-live-dot::after {
        content: "";
        inset: -4px;
        content: "";
        position: absolute;
        inset: -4px;
        background: rgba(34,197,94,.2);
        border-radius: 50%;
        animation: 1.6s infinite jsnLivePulse
    }

@keyframes jsnLivePulse {
    0% {
        opacity: .9;
        transform: scale(.65);
        opacity: 1
    }

    100%,70% {
        transform: scale(1.35);
        opacity: 0
    }

    100%,75% {
        transform: scale(1.45);
        opacity: 0
    }
}

.jsn-live-count {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    display: inline-flex;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    background: #fff3e5;
    border: 1px solid #ffdfbd;
    border-radius: 8px
}

.jsn-live-activity-list {
    scrollbar-color: #d7dde5 transparent;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-color: #d6dce5 transparent
}

    .jsn-live-activity-list::-webkit-scrollbar {
        width: 5px
    }

    .jsn-live-activity-list::-webkit-scrollbar-thumb {
        background: #d6dce5;
        border-radius: 20px
    }

.jsn-live-item {
    position: relative;
    padding: 10px 12px 0;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: #fff;
    border-bottom: 1px solid #f0f2f5;
    transition: background 180ms,transform 180ms;
    margin-top: 10px;
}

    .jsn-live-item:last-child, .jsn-need-grid-row:last-child td, .jsn-otp-grid-row:last-child td {
        border-bottom: 0
    }

    .jsn-live-item:hover {
        background: #fffaf5
    }

    .jsn-live-item.is-new {
        animation: .7s cubic-bezier(.16,1,.3,1) jsnLiveItemEnter
    }

        .jsn-live-item.is-new::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 3px;
            background: #ef7d01;
            animation: 2.4s forwards jsnLiveAccentFade
        }

@keyframes jsnLiveItemEnter {
    from {
        opacity: 0;
        transform: translateY(-8px);
        background: #fff2e2
    }

    to {
        opacity: 1;
        transform: translateY(0);
        background: 0 0
    }

    0% {
        opacity: 0;
        transform: translateY(-18px) scale(.96);
        background: #fff0df;
        box-shadow: 0 12px 26px rgba(239,125,1,.2)
    }

    55% {
        opacity: 1;
        transform: translateY(3px) scale(1.01)
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        background: #fff;
        box-shadow: none
    }
}

@keyframes jsnLiveAccentFade {
    0%,65% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.jsn-live-icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    justify-content: center;
    font-size: 12px;
    background: #fff3e6;
    border: 1px solid #ffe0bf;
    border-radius: 11px
}

.jsn-live-message {
    color: #475467;
    font-size: 12px;
    line-height: 0
}

    .jsn-live-message strong {
        color: #1f2937;
        font-weight: 900
    }

.jsn-live-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: #98a2b3;
    font-size: 12px;
}

    .jsn-live-meta span {
        display: inline-flex;
        align-items: center;
        gap: 4px
    }

.jsn-live-relative-time {
    color: #ef7d01;
    font-weight: 800
}

.jsn-live-activity-empty {
    padding: 20px 12px;
    color: #98a2b3;
    font-size: 12px;
    text-align: center
}

.jsn-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    direction: ltr
}

.jsn-topbar-reload {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    background: #ef7d01;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(239,125,1,.2);
    transition: transform 180ms,background 180ms,box-shadow 180ms
}

.jsn-top-user-name, .jsn-user-dropdown-head strong {
    color: #1f2937;
    font-size: 12px;
    font-weight: 900
}

.jsn-topbar-reload:hover {
    background: #dc6f00;
    transform: translateY(-2px) rotate(12deg);
    box-shadow: 0 11px 24px rgba(239,125,1,.3)
}

.jsn-top-user-trigger {
    min-width: 210px;
    height: 54px;
    padding: 6px 9px 6px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,.92);
    border: 1px solid #edf0f4;
    border-radius: 15px;
    cursor: default;
    box-shadow: 0 7px 20px rgba(31,42,68,.06);
    backdrop-filter: blur(10px);
    transition: transform .2s,border-color .2s,box-shadow .2s,background .2s
}

.jsn-top-user:hover .jsn-top-user-trigger {
    background: #fff;
    border-color: #ffd7ad;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(31,42,68,.11)
}

.jsn-top-user-avatar-wrap {
    position: relative;
    width: 42px;
    min-width: 42px;
    height: 42px
}

.jsn-top-user-avatar {
    width: 42px;
    height: 42px;
    display: block;
    object-fit: cover;
    background: #fff7ef;
    border: 2px solid #fff;
    border-radius: 13px;
    cursor: zoom-in;
    box-shadow: 0 4px 12px rgba(31,42,68,.13);
    transition: transform .2s,box-shadow .2s
}

    .jsn-top-user-avatar:hover {
        transform: scale(1.06);
        box-shadow: 0 7px 17px rgba(239,125,1,.23)
    }

.jsn-need-add-button:hover > i, .jsn-user-menu-item:hover {
    transform: translateX(-3px)
}

.jsn-top-user-online {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(34,197,94,.14);
    z-index:1;
}

.jsn-top-user-info {
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    text-align: right
}

.jsn-top-user-name {
    max-width: 125px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.jsn-top-user-chevron {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ef7d01;
    font-size: 12px;
    background: #fff4e8;
    border-radius: 8px;
    transition: transform 260ms,background .2s,color .2s
}

.jsn-top-user:hover .jsn-top-user-chevron {
    color: #fff;
    background: #ef7d01;
    transform: rotate(180deg)
}

.jsn-user-dropdown {
    width: 330px;
    padding: 8px;
    background: rgba(255,255,255,.98);
    border: 1px solid #e8ebf0;
    border-radius: 18px;
    box-shadow: 0 22px 55px rgba(31,42,68,.17);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.96);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity 210ms,visibility 210ms,transform 260ms cubic-bezier(.16, 1, .3, 1)
}

    .jsn-user-dropdown::before {
        content: "";
        position: absolute;
        right: 0;
        left: 0;
        top: -12px;
        height: 12px
    }

.jsn-top-user.is-open .jsn-user-dropdown, .jsn-top-user:hover .jsn-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto
}

.jsn-user-dropdown-head {
    padding: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg,#fff9f3 0,#fff 100%);
    border: 1px solid #ffead3;
    border-radius: 13px
}

.jsn-user-dropdown-avatar {
    width: 42px;
    min-width: 42px;
    height: 42px
}

    .jsn-user-dropdown-avatar img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        border: 2px solid #fff;
        border-radius: 12px;
        box-shadow: 0 5px 13px rgba(31,42,68,.13)
    }

.jsn-user-dropdown-menu {
    padding: 7px 0 2px
}

.jsn-user-menu-item {
    position: relative;
    min-height: 53px;
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: inherit;
    text-decoration: none;
    border-radius: 12px;
    transition: background 170ms,transform 170ms
}

    .jsn-user-menu-item:hover {
        background: #fff8f1
    }

.jsn-user-menu-icon {
    width: 35px;
    min-width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 10px;
    transition: transform 180ms
}

.jsn-user-menu-item:hover .jsn-user-menu-icon {
    transform: scale(1.08)
}

.jsn-letter-section-icon.final, .jsn-need-section-icon.request, .jsn-user-menu-icon.otp {
    color: #d97706;
    background: #fff7ed
}

.jsn-letter-section-icon.copy, .jsn-user-menu-icon.password {
    color: #0891b2;
    background: #ecfeff
}

.jsn-inbox-clear-search:hover, .jsn-user-menu-icon.logout-icon {
    color: #dc2626;
    background: #fef2f2
}

.jsn-user-menu-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px
}

    .jsn-password-field > label, .jsn-user-menu-text strong {
        color: #344054;
        font-size: 12px;
        font-weight: 900
    }

    .jsn-branch-cell small, .jsn-character-counter, .jsn-family-birthday small, .jsn-family-form-submit-note small, .jsn-family-mobile-hint, .jsn-family-person small, .jsn-family-relation-preview small, .jsn-gateway-info small, .jsn-invoice-summary-title small, .jsn-letter-option-card small, .jsn-letter-submit-note small, .jsn-letter-title-counter, .jsn-letter-upload-zone small, .jsn-otp-person small, .jsn-payment-account small, .jsn-payment-payer-header small, .jsn-price-cell small, .jsn-user-menu-text small {
        color: #98a2b3;
        font-size: 12px;
    }

.jsn-user-menu-arrow {
    color: #c3cad5;
    font-size: 12px;
    transition: color 170ms,transform 170ms
}

.jsn-user-menu-item:hover .jsn-user-menu-arrow {
    color: #ef7d01;
    transform: translateX(-2px)
}

.jsn-user-dropdown-footer {
    padding-top: 7px;
    border-top: 1px solid #edf0f4
}

.jsn-user-menu-item.logout:hover {
    background: #fff5f5
}

.jsn-family-form-field > label span, .jsn-family-mobile-hint.is-invalid, .jsn-password-match.is-invalid, .jsn-required, .jsn-required-star, .jsn-user-menu-item.logout .jsn-user-menu-text strong {
    color: #dc2626
}

.jsn-avatar-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms,visibility 220ms
}

    .jsn-avatar-modal.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto
    }

.jsn-avatar-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.72);
    backdrop-filter: blur(7px)
}

.jsn-avatar-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(430px,92vw);
    padding: 16px;
    background: #fff;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
    opacity: 0;
    transform: translateY(22px) scale(.9);
    transition: opacity 250ms,transform 320ms cubic-bezier(.16, 1, .3, 1)
}

.jsn-avatar-modal.is-visible .jsn-avatar-modal-dialog {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.jsn-avatar-modal-close {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    background: rgba(17,24,39,.72);
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: background 180ms,transform 180ms
}

    .jsn-avatar-modal-close:hover {
        background: #dc2626;
        transform: rotate(90deg) scale(1.06)
    }

.jsn-avatar-modal-image-wrap {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #f2f4f7;
    border-radius: 18px
}

    .jsn-avatar-modal-image-wrap img, .jsn-upload-preview img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover
    }

.jsn-avatar-modal-caption {
    padding: 13px 4px 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #475467;
    font-size: 12px;
    font-weight: 800
}

.status-cell, body.jsn-avatar-modal-open {
    overflow: hidden
}

@media (max-width:768px) {
    .jsn-top-user-chevron, .jsn-top-user-info {
        display: none
    }

    .jsn-top-user-trigger {
        min-width: auto;
        height: 48px;
        padding: 4px 6px
    }

    .jsn-user-dropdown {
        position: fixed;
        top: 72px;
        right: 12px;
        left: 12px;
        width: auto;
        transform-origin: top center
    }
}

.jsn-user-dropdown {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    overflow: visible
}

.jsn-main-topbar, .jsn-main-topbar-wrapper, .jsn-top-user, .jsn-topbar-left {
    overflow: visible !important
}

.jsn-main-topbar, .jsn-main-topbar-outer, .jsn-top-user, .jsn-topbar-left {
    position: relative;
    overflow: visible !important
}

.jsn-main-topbar-outer {
    z-index: 50000
}

.jsn-main-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    z-index: 50010
}

.jsn-topbar-left {
    z-index: 50020
}

.jsn-top-user {
    direction: rtl;
    z-index: 50030
}

.jsn-user-dropdown {
    z-index: 999999 !important
}

.jsn-menu-panel-divider {
    flex: 0 0 auto;
    height: 10px;
    margin: 0 10px;
    background: linear-gradient(90deg,transparent,#e6eaf0 18%,#e6eaf0 82%,transparent)
}

.jsn-profile-page {
    width: 100%;
    padding: 18px;
    color: #344054;
    font-family: inherit
}

.jsn-profile-hero {
    position: relative;
    padding: 24px;
    background: linear-gradient(135deg,#fff 0,#fffaf4 100%);
    border: 1px solid #e8edf3;
    border-radius: 22px;
    box-shadow: 0 14px 40px rgba(31,42,68,.07);
    overflow: hidden
}

.jsn-profile-cover-decoration {
    position: absolute;
    top: -110px;
    left: -90px;
    width: 310px;
    height: 310px;
    background: radial-gradient(circle,rgba(239,125,1,.13),transparent 70%);
    pointer-events: none
}

.jsn-profile-hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 22px
}

.jsn-profile-image-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px
}

.jsn-profile-image-frame {
    position: relative;
    width: 128px;
    height: 128px;
    padding: 5px;
    background: #fff;
    border: 1px solid #ffe0bf;
    border-radius: 28px;
    box-shadow: 0 12px 30px rgba(31,42,68,.14)
}

.jsn-profile-main-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 22px
}

.jsn-profile-online-status {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 17px;
    height: 17px;
    background: #22c55e;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(34,197,94,.12)
}

.jsn-profile-change-image {
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #e96f00;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    background: #fff3e5;
    border: 1px solid #ffddb8;
    border-radius: 11px;
    cursor: pointer;
    transition: color 180ms,background 180ms,transform 180ms
}

    .jsn-profile-change-image:hover {
        color: #fff;
        background: #ef7d01;
        transform: translateY(-2px)
    }

.jsn-profile-eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    padding: 5px 9px;
    color: #d96800;
    font-size: 12px;
    font-weight: 900;
    background: #fff2e2;
    border-radius: 8px
}

.jsn-profile-main-info h1 {
    margin: 0 0 13px;
    color: #1f2937;
    font-size: 22px;
    font-weight: 900
}

.jsn-profile-identity-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.jsn-profile-inline-info {
    min-height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #667085;
    font-size: 12px;
    background: #f8fafc;
    border: 1px solid #e8ecf2;
    border-radius: 10px
}

    .jsn-profile-inline-info i {
        color: #ef7d01
    }

.jsn-profile-status {
    min-height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 900;
    border-radius: 11px
}

    .jsn-need-action.payment, .jsn-otp-action.confirm, .jsn-otp-status.is-active, .jsn-payment-status.is-success, .jsn-profile-message.is-success, .jsn-profile-status.is-active, .jsn-request-status.status-delivered {
        color: #15803d;
        background: #ecfdf3;
        border: 1px solid #bbf7d0
    }

    .jsn-profile-status.is-inactive {
        color: #dc2626;
        background: #fef2f2;
        border: 1px solid #fecaca
    }

.jsn-profile-upload-box {
    position: relative;
    z-index: 1;
    margin-top: 20px;
    padding: 14px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1px dashed #f2b875;
    border-radius: 15px
}

.jsn-upload-preview {
    width: 66px;
    height: 66px;
    overflow: hidden;
    background: #f2f4f7;
    border: 1px solid #e5e9ef;
    border-radius: 13px
}

.jsn-upload-file-info strong {
    color: #344054;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.jsn-inbox-title-line, .jsn-upload-actions {
    display: flex;
    align-items: center;
    gap: 7px
}

.jsn-upload-cancel, .jsn-upload-confirm {
    min-height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    border-radius: 10px;
    cursor: pointer
}

.jsn-upload-confirm {
    color: #fff;
    background: #ef7d01;
    border: 1px solid #ef7d01
}

    .jsn-upload-confirm:hover {
        background: #dc6f00
    }

.jsn-upload-cancel {
    color: #667085;
    background: #fff;
    border: 1px solid #dfe4eb
}

    .jsn-need-reset-button:hover, .jsn-payment-reset-button:hover, .jsn-upload-cancel:hover {
        color: #dc2626;
        background: #fef2f2;
        border-color: #fecaca
    }

    .jsn-profile-change-image:disabled, .jsn-upload-cancel:disabled, .jsn-upload-confirm:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none
    }

.jsn-upload-progress-area {
    grid-column: 1/-1;
    margin-top: 3px
}

.jsn-upload-progress-header {
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #667085;
    font-size: 12px;
}

    .jsn-need-form-step strong, .jsn-upload-progress-header strong {
        color: #ef7d01;
        font-size: 12px;
    }

.jsn-upload-progress-track {
    height: 8px;
    overflow: hidden;
    background: #edf0f4;
    border-radius: 20px
}

.jsn-upload-progress-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg,#ef7d01,#ffad4d);
    border-radius: inherit;
    transition: width 180ms
}

.jsn-profile-message {
    position: relative;
    z-index: 1;
    margin-top: 13px;
    padding: 11px 13px;
    font-size: 12px;
    line-height: 1.9;
    border-radius: 11px
}

    .jsn-family-action.delete, .jsn-otp-action.cancel, .jsn-otp-status.is-inactive, .jsn-payment-status.is-failed, .jsn-profile-message.is-error, .jsn-request-status.status-rejected {
        color: #b91c1c;
        background: #fef2f2;
        border: 1px solid #fecaca
    }

.jsn-profile-summary {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px
}

.jsn-profile-summary-card {
    min-height: 92px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    box-shadow: 0 7px 22px rgba(31,42,68,.045)
}

.jsn-profile-summary-icon {
    width: 42px;
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ef7d01;
    font-size: 14px;
    background: #fff3e5;
    border-radius: 12px
}

.jsn-profile-detail-content, .jsn-profile-summary-card > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.jsn-profile-summary-card strong {
    color: #344054;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.jsn-profile-details-card {
    margin-top: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(31,42,68,.055)
}

.jsn-profile-section-header {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf0f4
}

    .jsn-family-form-title, .jsn-family-section-title, .jsn-letter-section-title, .jsn-need-section-heading > div, .jsn-need-section-title, .jsn-otp-title, .jsn-payment-card-title, .jsn-profile-section-header > div {
        display: flex;
        align-items: center;
        gap: 10px
    }

.jsn-profile-section-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ef7d01;
    font-size: 13px;
    background: #fff3e5;
    border-radius: 12px
}

.jsn-family-form-title h2, .jsn-family-section-title h2, .jsn-letter-section-title h2, .jsn-otp-title h2, .jsn-payment-card-title h2, .jsn-profile-section-header h2 {
    margin: 0 0 3px;
    color: #1f2937;
    font-size: 13px;
    font-weight: 900
}

.jsn-family-form-title p, .jsn-family-section-title p, .jsn-letter-section-title p, .jsn-need-section-heading p, .jsn-need-section-title p, .jsn-otp-title p, .jsn-payment-card-title p, .jsn-profile-section-header p {
    margin: 0;
    color: #98a2b3;
    font-size: 12px;
}

.jsn-profile-details-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px
}

.jsn-profile-detail-item {
    min-height: 72px;
    padding: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fafbfc;
    border: 1px solid #edf0f4;
    border-radius: 13px;
    transition: background 180ms,border-color 180ms,transform 180ms
}

    .jsn-profile-detail-item:hover {
        background: #fffaf5;
        border-color: #ffe0bf;
        transform: translateY(-2px)
    }

    .jsn-profile-detail-item.is-wide {
        grid-column: span 3
    }

.jsn-profile-detail-icon {
    width: 36px;
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ef7d01;
    font-size: 12px;
    background: #fff3e5;
    border-radius: 10px
}

.jsn-profile-detail-value {
    color: #344054;
    font-size: 12px;
    font-weight: 900;
    overflow-wrap: anywhere
}

.jsn-password-page {
    width: 100%;
    padding: 18px;
    direction: rtl
}

.jsn-password-card {
    width: min(720px,100%);
    margin: 0 auto;
    padding: 22px;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 22px;
    box-shadow: 0 14px 40px rgba(31,42,68,.07)
}

.jsn-password-header {
    margin-bottom: 20px;
    padding-bottom: 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #edf0f4
}

.jsn-password-header-icon {
    width: 48px;
    min-width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ef7d01;
    font-size: 16px;
    background: #fff3e5;
    border: 1px solid #ffdfbc;
    border-radius: 14px
}

.jsn-password-header h2 {
    margin: 0 0 5px;
    color: #1f2937;
    font-size: 16px;
    font-weight: 900
}

.jsn-password-header p {
    margin: 0;
    color: #98a2b3;
    font-size: 12px;
    line-height: 1.8
}

.jsn-password-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px
}

.jsn-password-field {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.jsn-password-input-wrap {
    position: relative;
    height: 48px;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 13px;
    transition: background 180ms,border-color 180ms,box-shadow 180ms
}

    .jsn-password-input-wrap:focus-within {
        background: #fff;
        border-color: #f3a04d;
        box-shadow: 0 0 0 3px rgba(239,125,1,.1)
    }

.jsn-password-input-icon {
    width: 42px;
    min-width: 42px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    font-size: 12px;
    transition: color 180ms
}

.jsn-password-input, .jsn-password-toggle {
    font-size: 12px;
    background: 0 0;
    border: 0;
    height: 100%
}

.jsn-password-input-wrap:focus-within .jsn-password-input-icon {
    color: #ef7d01
}

.jsn-password-input {
    width: 100%;
    min-width: 0;
    padding: 0 5px;
    color: #1f2937;
    font-family: inherit;
    direction: ltr;
    text-align: left;
    outline: 0
}

.jsn-password-toggle {
    width: 42px;
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    border-radius: 10px;
    cursor: pointer;
    transition: color 180ms,background 180ms
}

    .jsn-password-toggle:hover {
        color: #ef7d01;
        background: #fff4e8
    }

.jsn-password-error {
    display: block;
    color: #dc2626;
    font-size: 12px;
    line-height: 1.8
}

    .jsn-family-form-error i, .jsn-password-error i {
        margin-left: 4px
    }

.jsn-password-validation-summary {
    margin-bottom: 15px;
    padding: 11px 13px;
    color: #b91c1c;
    font-size: 12px;
    line-height: 1.9;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 11px
}

    .jsn-password-validation-summary ul {
        margin: 7px 16px 0 0;
        padding: 0
    }

.jsn-password-strength {
    margin-top: 2px
}

.jsn-password-strength-head {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #98a2b3;
    font-size: 12px;
}

    .jsn-password-strength-head strong {
        color: #667085;
        font-size: 12px;
    }

.jsn-password-strength-track {
    height: 7px;
    overflow: hidden;
    background: #edf0f4;
    border-radius: 20px
}

    .jsn-password-strength-track span {
        display: block;
        width: 0;
        height: 100%;
        background: #d1d5db;
        border-radius: inherit;
        transition: width 220ms,background 220ms
    }

.jsn-password-hints {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px
}

    .jsn-password-hints span {
        padding: 5px 7px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: #98a2b3;
        font-size: 12px;
        background: #f8fafc;
        border: 1px solid #edf0f4;
        border-radius: 8px
    }

        .jsn-inbox-priority > i, .jsn-letter-priority i, .jsn-otp-status i, .jsn-password-hints span i, .jsn-payment-status i, .jsn-request-status > i {
            font-size: 5px
        }

        .jsn-letter-recipient-count, .jsn-password-hints span.is-valid {
            color: #15803d;
            background: #ecfdf3;
            border-color: #bbf7d0
        }

.jsn-password-match {
    min-height: 17px;
    color: #98a2b3;
    font-size: 12px;
}

    .jsn-family-mobile-hint.is-valid, .jsn-password-match.is-valid, .jsn-payment-submit-note i, .jsn-selected-recipients-title i {
        color: #15803d
    }

.jsn-password-footer {
    margin-top: 20px;
    padding-top: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid #edf0f4
}

.jsn-password-security-note {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #667085;
    font-size: 12px;
    line-height: 1.8
}

    .jsn-otp-help i, .jsn-password-security-note i {
        color: #ef7d01;
        font-size: 12px;
    }

.jsn-password-submit {
    min-width: 150px;
    min-height: 44px;
    padding: 0 17px;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    background: #ef7d01;
    border: 1px solid #ef7d01;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 9px 20px rgba(239,125,1,.2);
    transition: background 180ms,transform 180ms,box-shadow 180ms
}

    .jsn-password-submit:hover {
        background: #dc6f00;
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(239,125,1,.28)
    }

    .jsn-letter-submit-button:disabled, .jsn-password-submit:disabled {
        opacity: .65;
        cursor: wait;
        transform: none
    }

.jsn-family-form-page, .jsn-family-page, .jsn-inbox-page, .jsn-letter-page, .jsn-need-form-page, .jsn-need-page, .jsn-otp-page, .jsn-payment-page {
    width: 100%;
    padding: 18px;
    direction: rtl;
    color: #344054
}

.jsn-need-hero {
    position: relative;
    padding: 22px;
    background: linear-gradient(135deg,#fff 0,#fff9f1 58%,#fff1df 100%);
    border: 1px solid #f0e4d7;
    border-radius: 23px;
    box-shadow: 0 15px 45px rgba(31,42,68,.075);
    overflow: hidden
}

.jsn-need-hero-decoration {
    position: absolute;
    top: -130px;
    left: -80px;
    width: 330px;
    height: 330px;
    background: radial-gradient(circle,rgba(239,125,1,.16),transparent 68%);
    pointer-events: none
}

.jsn-need-hero::after {
    content: "";
    position: absolute;
    right: -45px;
    bottom: -85px;
    width: 210px;
    height: 210px;
    border: 35px solid rgba(239,125,1,.045);
    border-radius: 50%;
    pointer-events: none
}

.jsn-need-hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 16px
}

.jsn-need-hero-icon {
    width: 62px;
    min-width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    background: linear-gradient(135deg,#ff9d33,#ef7d01);
    border-radius: 18px;
    box-shadow: 0 13px 28px rgba(239,125,1,.27);
    animation: 3s ease-in-out infinite jsnNeedHeroIcon
}

@keyframes jsnNeedHeroIcon {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-4px)
    }
}

.jsn-need-eyebrow {
    display: inline-flex;
    margin-bottom: 5px;
    padding: 4px 8px;
    color: #d96b00;
    font-size: 12px;
    font-weight: 900;
    background: #fff0df;
    border-radius: 7px
}

.jsn-need-form-hero h1, .jsn-need-hero-title h1 {
    margin: 0 0 5px;
    color: #1f2937;
    font-size: 18px;
    font-weight: 900
}

.jsn-inbox-hero p, .jsn-letter-hero p, .jsn-need-form-hero p, .jsn-need-hero-title p, .jsn-otp-hero p, .jsn-payment-hero p {
    margin: 0;
    color: #7b8798;
    font-size: 12px;
    line-height: 1.9
}

.jsn-need-add-button {
    min-width: 205px;
    min-height: 61px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg,#f68b15,#e66d00);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 16px;
    box-shadow: 0 13px 27px rgba(239,125,1,.25);
    transition: transform 220ms,box-shadow 220ms
}

    .jsn-need-add-button:hover {
        color: #fff;
        text-decoration: none;
        transform: translateY(-4px) scale(1.015);
        box-shadow: 0 18px 38px rgba(239,125,1,.34)
    }

.jsn-need-add-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ef7d01;
    font-size: 13px;
    background: #fff;
    border-radius: 12px;
    transition: transform 250ms
}

.jsn-need-add-button:hover .jsn-need-add-icon {
    transform: rotate(90deg)
}

.jsn-need-add-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: right
}

    .jsn-need-add-text strong {
        color: #fff;
        font-size: 12px;
        font-weight: 900
    }

    .jsn-need-add-text small {
        color: rgba(255,255,255,.78);
        font-size: 12px;
    }

.jsn-need-add-button > i {
    font-size: 12px;
    transition: transform .2s
}

.jsn-need-analysis-card, .jsn-need-filter-card, .jsn-need-list-card {
    margin-top: 14px;
    padding: 17px;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 20px;
    box-shadow: 0 10px 32px rgba(31,42,68,.055);
    animation: .5s both jsnNeedCardEnter
}

.jsn-need-list-card {
    animation-delay: 80ms
}

.jsn-need-analysis-card {
    animation-delay: 150ms
}

@keyframes jsnNeedCardEnter {
    from {
        opacity: 0;
        transform: translateY(15px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-need-section-heading {
    margin-bottom: 15px;
    padding-bottom: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf0f4
}

.jsn-need-section-icon {
    min-width: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.jsn-need-section-heading h2, .jsn-need-section-title h2 {
    margin: 0 0 3px;
    color: #1f2937;
    font-size: 12px;
    font-weight: 900
}

.jsn-filter-toggle {
    min-height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #667085;
    font-family: inherit;
    font-size: 12px;
    background: #f8fafc;
    border: 1px solid #e5e9ef;
    border-radius: 9px;
    cursor: pointer;
    transition: color 180ms,background 180ms,border-color 180ms
}

    .jsn-filter-toggle:hover {
        color: #e56e00;
        background: #fff7ee;
        border-color: #ffddb6
    }

    .jsn-filter-toggle i {
        font-size: 12px;
        transition: transform 250ms
    }

.jsn-need-filter-body {
    max-height: 600px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 350ms,opacity 220ms
}

    .jsn-need-filter-body.is-collapsed {
        max-height: 0;
        opacity: 0
    }

.jsn-need-filter-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 11px
}

.jsn-letter-field, .jsn-need-field, .jsn-payment-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px
}

    .jsn-family-form-field > label, .jsn-form-field > label, .jsn-letter-field > label, .jsn-need-field > label, .jsn-payment-field > label {
        color: #475467;
        font-size: 12px;
        font-weight: 900
    }

        .jsn-family-form-field > label i, .jsn-form-field > label i, .jsn-letter-field > label i, .jsn-need-field > label i, .jsn-payment-field > label i {
            margin-left: 5px;
            color: #ef7d01
        }

.jsn-need-input-wrap, .jsn-need-select-wrap {
    position: relative;
    height: 45px;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 12px;
    transition: background 180ms,border-color 180ms,box-shadow 180ms,transform 180ms
}

    .jsn-need-input-wrap:focus-within, .jsn-need-select-wrap:focus-within {
        background: #fff;
        border-color: #f3a04d;
        box-shadow: 0 0 0 3px rgba(239,125,1,.09);
        transform: translateY(-1px)
    }

.jsn-need-control {
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    padding: 0 12px;
    color: #344054;
    font-family: inherit;
    font-size: 12px;
    background: 0 0;
    border: 0;
    outline: 0
}

select.jsn-need-control {
    padding-left: 31px;
    appearance: none;
    cursor: pointer
}

.jsn-family-form-select-wrap > i, .jsn-letter-select-wrap > i, .jsn-need-select-wrap > i, .jsn-select-wrapper > i {
    position: absolute;
    left: 12px;
    color: #98a2b3;
    font-size: 12px;
    pointer-events: none
}

.jsn-date-input {
    direction: ltr;
    text-align: right;
    padding-left: 40px
}

.jsn-field-side-icon {
    position: absolute;
    left: 0;
    width: 40px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    font-size: 12px;
    pointer-events: none
}

.jsn-family-form-error, .jsn-need-validation, .jsn-payment-error {
    display: block;
    color: #dc2626;
    font-size: 12px;
    line-height: 1.8
}

.jsn-need-filter-actions {
    margin-top: 14px;
    padding-top: 13px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px dashed #e5e9ef
}

.jsn-need-search-button {
    min-width: 155px;
    min-height: 42px;
    padding: 0 15px;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    background: linear-gradient(135deg,#f68c17,#e87000);
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(239,125,1,.21);
    transition: transform 180ms,box-shadow 180ms
}

    .jsn-need-search-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(239,125,1,.29)
    }

.jsn-need-reset-button {
    min-height: 42px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667085;
    font-family: inherit;
    font-size: 12px;
    background: #fff;
    border: 1px solid #dfe4eb;
    border-radius: 11px;
    cursor: pointer;
    transition: color 180ms,background 180ms,border-color 180ms
}

.jsn-need-live-badge, .jsn-otp-header-badge {
    min-height: 31px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #15803d;
    font-size: 12px;
    font-weight: 900;
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
    border-radius: 9px
}

.jsn-row-number, .jsn-table-cell-icon {
    align-items: center;
    display: inline-flex
}

.jsn-need-live-badge i {
    font-size: 5px;
    animation: 1.8s infinite jsnStatusPulse
}

@keyframes jsnStatusPulse {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

.jsn-need-table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e7ebf1;
    border-radius: 15px
}

.jsn-family-grid, .jsn-need-grid {
    width: 100%;
    min-width: 1050px;
    color: #344054;
    font-family: inherit
}

.jsn-need-grid-header th {
    padding: 13px 10px;
    color: #667085;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
    background: linear-gradient(180deg,#f9fafb,#f5f7fa);
    border-bottom: 1px solid #e5e9ef;
    white-space: nowrap
}

    .jsn-need-grid-header th:first-child, .jsn-otp-grid-header th:first-child, .jsn-time-picker .jsn-payment-control {
        text-align: center
    }

.jsn-need-grid-row td {
    padding: 12px 10px;
    color: #475467;
    font-size: 12px;
    vertical-align: middle;
    background: #fff;
    border-bottom: 1px solid #eef1f5;
    transition: background 180ms,transform 180ms
}

.jsn-family-grid-alt td, .jsn-need-grid-alt-row td, .jsn-otp-grid-alt td, .jsn-payment-grid-alt td, .jsn-products-grid-alt td {
    background: #fcfdfe
}

.jsn-need-grid-row:hover td {
    background: #fffaf4
}

.jsn-row-number {
    width: 31px;
    height: 31px;
    justify-content: center;
    color: #d96d00;
    font-weight: 900;
    background: #fff3e5;
    border-radius: 9px
}

.jsn-table-cell-icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    justify-content: center;
    color: #2563eb;
    font-size: 12px;
    background: #eff6ff;
    border-radius: 10px
}

.jsn-branch-cell strong, .jsn-family-birthday strong, .jsn-family-person strong, .jsn-gateway-info strong, .jsn-invoice-summary-item strong, .jsn-invoice-summary-title strong, .jsn-letter-submit-note strong, .jsn-letter-upload-zone strong, .jsn-otp-person strong, .jsn-payment-payer-header strong {
    color: #344054;
    font-size: 12px;
}

.jsn-date-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    direction: ltr;
    color: #475467;
    white-space: nowrap
}

    .date-cell i, .jsn-date-cell i, .jsn-payment-date i, .jsn-request-submit-note i {
        color: #ef7d01
    }

.jsn-price-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    direction: ltr;
    text-align: right
}

.jsn-request-price {
    color: #1f2937;
    font-size: 12px;
    font-weight: 900
}

.jsn-payment-status, .jsn-request-status {
    min-height: 30px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 900;
    border-radius: 8px;
    white-space: nowrap
}

    .jsn-debt-button.nan, .jsn-inbox-priority.priority-instant, .jsn-letter-priority.instant, .jsn-payment-status.is-waiting, .jsn-request-status.status-unreviewed {
        color: #b45309;
        background: #fff7ed;
        border: 1px solid #fed7aa
    }

    .jsn-debt-button.tadbir, .jsn-inbox-priority.priority-confidential, .jsn-need-action.invoice, .jsn-otp-send-type.is-all, .jsn-request-status.status-waiting {
        color: #7c3aed;
        background: #f5f3ff;
        border: 1px solid #ddd6fe
    }

    .jsn-otp-send-type.is-login, .jsn-request-status.status-financial {
        color: #0369a1;
        background: #f0f9ff;
        border: 1px solid #bae6fd
    }

    .jsn-request-status.status-preparing {
        color: #c2410c;
        background: #fff7ed;
        border: 1px solid #fdba74
    }

    .jsn-request-status.status-shipping {
        color: #1d4ed8;
        background: #eff6ff;
        border: 1px solid #bfdbfe
    }

    .jsn-inbox-priority.priority-normal, .jsn-letter-priority.normal, .jsn-request-status.status-default {
        color: #475467;
        background: #f8fafc;
        border: 1px solid #e2e8f0
    }

.jsn-description-cell {
    max-width: 230px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #667085
}

    .jsn-description-cell i {
        color: #98a2b3
    }

    .jsn-description-cell span {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.8
    }

.jsn-need-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px
}

.jsn-need-action {
    min-height: 31px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    border-radius: 8px;
    transition: transform 170ms,box-shadow 170ms
}

    .jsn-family-action:hover, .jsn-need-action:hover, .jsn-otp-action:hover, .jsn-otp-add-button:hover, .jsn-otp-edit-button:hover {
        text-decoration: none;
        transform: translateY(-2px)
    }

    .jsn-debt-button.all, .jsn-family-action.edit, .jsn-family-gender.is-male, .jsn-need-action.view, .jsn-otp-edit-button {
        color: #2563eb;
        background: #eff6ff;
        border: 1px solid #bfdbfe
    }

    .jsn-need-action.print {
        color: #475467;
        background: #f8fafc;
        border: 1px solid #dfe5ec
    }

.jsn-need-grid-pager td {
    padding: 13px;
    background: #f8fafc;
    border-top: 1px solid #e5e9ef
}

.jsn-need-grid-pager table {
    margin: 0 auto
}

.jsn-need-grid-pager a, .jsn-need-grid-pager span {
    width: 31px;
    height: 31px;
    margin: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #667085;
    font-size: 12px;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e1e6ed;
    border-radius: 8px
}

.jsn-need-grid-pager span {
    color: #fff;
    background: #ef7d01;
    border-color: #ef7d01
}

.jsn-need-grid-pager a:hover {
    color: #ef7d01;
    border-color: #f2ad65
}

.jsn-need-empty-row td {
    padding: 40px 15px !important;
    color: #98a2b3;
    font-size: 12px;
    text-align: center;
    background: #fff
}

.jsn-need-price-summary {
    margin-bottom: 12px
}

.jsn-need-chart-wrap {
    position: relative;
    width: 100%;
    min-height: 320px;
    padding: 12px;
    background: linear-gradient(180deg,#fff,#fbfcfe);
    border: 1px solid #edf0f4;
    border-radius: 14px
}

    .jsn-need-chart-wrap canvas {
        width: 100% !important;
        max-height: 340px
    }

.jsn-need-form-hero {
    position: relative;
    padding: 22px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg,#fff 0,#fff9f2 65%,#fff0de 100%);
    border: 1px solid #f0e3d6;
    border-radius: 23px;
    box-shadow: 0 14px 42px rgba(31,42,68,.07);
    overflow: hidden
}

    .jsn-need-form-hero::after {
        content: "";
        position: absolute;
        left: -90px;
        top: -120px;
        width: 310px;
        height: 310px;
        background: radial-gradient(circle,rgba(239,125,1,.15),transparent 70%);
        pointer-events: none
    }

.jsn-need-form-hero-icon {
    position: relative;
    z-index: 1;
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 21px;
    background: linear-gradient(135deg,#ff9b30,#ef7d01);
    border-radius: 18px;
    box-shadow: 0 13px 27px rgba(239,125,1,.27);
    animation: 3s ease-in-out infinite jsnNeedFloat
}

@keyframes jsnNeedFloat {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }
}

.jsn-family-form-hero-content, .jsn-family-hero-content, .jsn-inbox-hero-content, .jsn-letter-hero-content, .jsn-need-form-hero-content, .jsn-otp-hero-content, .jsn-payment-hero-content {
    position: relative;
    z-index: 1
}

.jsn-inbox-eyebrow, .jsn-letter-eyebrow, .jsn-need-form-eyebrow, .jsn-otp-eyebrow {
    display: inline-block;
    margin-bottom: 5px;
    padding: 5px 8px;
    color: #d96d00;
    font-size: 12px;
    font-weight: 900;
    background: #fff0df;
    border-radius: 8px
}

.jsn-need-form-step {
    position: relative;
    z-index: 1;
    min-width: 135px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #667085;
    text-align: center;
    background: rgba(255,255,255,.8);
    border: 1px solid #f1dcc6;
    border-radius: 13px
}

    .jsn-family-auto-send span, .jsn-family-form-auto small, .jsn-inbox-live-state span, .jsn-letter-draft-state span, .jsn-need-form-step span, .jsn-otp-security-state span, .jsn-payment-security-badge span, .jsn-payment-total-box span {
        font-size: 12px;
    }

.jsn-need-financial-card, .jsn-product-filter-card, .jsn-products-table-card, .jsn-request-information-card {
    margin-top: 14px;
    padding: 17px;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 20px;
    box-shadow: 0 10px 31px rgba(31,42,68,.055);
    animation: 450ms both jsnNeedSectionEnter
}

@keyframes jsnNeedSectionEnter {
    from {
        opacity: 0;
        transform: translateY(13px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-need-section-header {
    margin-bottom: 14px;
    padding-bottom: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf0f4
}

.jsn-need-section-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ef7d01;
    font-size: 13px;
    background: #fff2e3;
    border-radius: 12px
}

    .jsn-letter-section-icon.recipient, .jsn-need-section-icon.financial {
        color: #15803d;
        background: #ecfdf3
    }

.jsn-need-section-badge, .jsn-product-filter-result {
    padding: 6px 9px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    background: #f8fafc;
    border: 1px solid #e5e9ef;
    border-radius: 9px
}

.jsn-credit-summary {
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg,#15803d,#16a34a);
    border-radius: 16px;
    box-shadow: 0 12px 26px rgba(21,128,61,.18)
}
.jsn-credit-summaryred {
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, #801547, #fe0d87);
    border-radius: 16px;
    box-shadow: 0 12px 26px rgba(21,128,61,.18)
}

.jsn-credit-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    color: rgba(255,255,255,.8);
    font-size: 12px;
}

    .jsn-credit-item strong {
        color: #fff;
        font-size: 12px;
    }

.jsn-credit-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,.25)
}

.jsn-product-filter-grid, .jsn-request-information-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px
}

.jsn-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px
}

    .jsn-family-form-field.is-wide, .jsn-form-field.is-wide, .jsn-letter-field.is-wide, .jsn-payment-field.is-wide {
        grid-column: span 2
    }

.jsn-input-wrapper, .jsn-search-wrapper, .jsn-select-wrapper {
    position: relative;
    height: 46px;
    align-items: center;
    display: flex;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 12px;
    transition: background 180ms,border-color 180ms,box-shadow 180ms,transform 180ms
}

    .jsn-input-wrapper:focus-within, .jsn-search-wrapper:focus-within, .jsn-select-wrapper:focus-within {
        background: #fff;
        border-color: #f3a04d;
        box-shadow: 0 0 0 3px rgba(239,125,1,.09);
        transform: translateY(-1px)
    }

.jsn-form-control {
    width: 100% !important;
    height: 100% !important;
    padding: 0 12px;
    color: #344054;
    font-family: inherit;
    font-size: 12px;
    background: 0 0;
    border: 0 !important;
    outline: 0
}

select.jsn-form-control {
    appearance: none;
    padding-left: 34px
}

.jsn-search-wrapper > i {
    margin-right: 12px;
    color: #98a2b3
}

.jsn-clear-product-search {
    width: 32px;
    height: 32px;
    margin-left: 5px;
    display: none;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    cursor: pointer
}

.jsn-inbox-search-wrap.has-value .jsn-inbox-clear-search, .jsn-search-wrapper.has-value .jsn-clear-product-search {
    display: inline-flex
}

.jsn-textarea-control {
    min-height: 92px !important;
    padding: 12px;
    resize: vertical
}

.jsn-form-error {
    color: #dc2626;
    font-size: 12px;
}

.jsn-payment-table-responsive, .jsn-products-table-scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5e9ef;
    border-radius: 15px;
    scrollbar-width: thin;
    scrollbar-color: #cfd6df transparent
}

.jsn-payment-grid, .jsn-products-grid {
    width: 100%;
    min-width: 1250px;
    font-family: inherit
}

.jsn-products-grid-header th {
    padding: 13px 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    background: linear-gradient(135deg,#ef7d01,#f58b16);
    border-bottom: 1px solid #dd7000;
    white-space: nowrap
}

.jsn-products-grid-row td {
    padding: 12px 10px;
    color: #475467;
    font-size: 12px;
    vertical-align: middle;
    background: #fff;
    border-bottom: 1px solid #edf0f4;
    transition: background 180ms;
    text-align:center;
}

.jsn-products-grid-row:hover td {
    background: #fff9f2
}

.jsn-products-grid input[type=text], .jsn-products-grid select {
    min-height: 42px;
    font-family: inherit;
    background: #fff;
    border: 1px solid #dfe5ec;
    border-radius: 10px
}

.jsn-invoice-summary {
    position: fixed;
    bottom: 12px;
    z-index: 100;
    margin-top: 14px;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(190px,1fr) auto;
    align-items: center;
    gap: 15px;
    background: rgba(255,255,255,.95);
    border: 1px solid #e1e6ed;
    border-radius: 17px;
    box-shadow: 0 18px 45px rgba(31,42,68,.17);
    backdrop-filter: blur(12px)
}

.jsn-invoice-summary-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ef7d01;
    background: #fff2e3;
    border-radius: 11px
}

.jsn-invoice-summary-items {
    display: flex;
    align-items: stretch;
    gap: 7px
}

.jsn-invoice-summary-item {
    min-width: 130px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #98a2b3;
    font-size: 12px;
    background: #f8fafc;
    border: 1px solid #e7ebf1;
    border-radius: 10px
}

    .jsn-invoice-summary-item small, .jsn-payment-price small {
        color: #98a2b3;
        font-size: 12px
    }

    .jsn-invoice-summary-item.total {
        color: #fff;
        background: linear-gradient(135deg,#ef7d01,#f69225);
        border-color: #ef7d01;
        box-shadow: 0 8px 18px rgba(239,125,1,.23)
    }

        .jsn-invoice-summary-item.total small, .jsn-invoice-summary-item.total strong {
            color: #fff
        }

.jsn-request-submit-area {
    margin-top: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 16px
}

.jsn-request-submit-note {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    font-size: 12px;
}

.jsn-request-submit-button {
    min-width: 190px;
    min-height: 46px;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    background: linear-gradient(135deg,#ef7d01,#f69225);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(239,125,1,.24);
    transition: transform 180ms,box-shadow 180ms
}

    .jsn-request-submit-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(239,125,1,.32)
    }

.jsn-invoice-summary {
    opacity: 0;
    visibility: hidden;
    transform: translateY(25px);
    pointer-events: none;
    transition: opacity 240ms,visibility 240ms,transform 280ms
}

    .jsn-invoice-summary.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto
    }

.jsn-gateway-card input, .jsn-gateway-check {
    opacity: 0;
    position: absolute
}

.jsn-payment-hero {
    position: relative;
    min-height: 120px;
    padding: 22px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg,#fff 0,#fff9f1 62%,#ffedd8 100%);
    border: 1px solid #f0e2d2;
    border-radius: 23px;
    box-shadow: 0 14px 42px rgba(31,42,68,.07);
    overflow: hidden;
    animation: 550ms both jsnPaymentHeroEnter
}

@keyframes jsnPaymentHeroEnter {
    from {
        opacity: 0;
        transform: translateY(-15px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-payment-hero-glow {
    position: absolute;
    top: -140px;
    left: -100px;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle,rgba(239,125,1,.17),transparent 68%);
    animation: 5s ease-in-out infinite jsnPaymentGlow
}

@keyframes jsnPaymentGlow {
    0%,100% {
        transform: scale(1);
        opacity: .8
    }

    50% {
        transform: scale(1.18);
        opacity: 1
    }
}

.jsn-payment-hero-icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    background: linear-gradient(135deg,#ff9b32,#ef7d01);
    border-radius: 19px;
    box-shadow: 0 14px 30px rgba(239,125,1,.29);
    animation: 3s ease-in-out infinite jsnPaymentCardFloat
}

@keyframes jsnPaymentCardFloat {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-5px) rotate(-2deg)
    }
}

.jsn-payment-eyebrow {
    display: inline-block;
    margin-bottom: 5px;
    padding: 5px 8px;
    color: #d96b00;
    font-size: 12px;
    font-weight: 900;
    background: #fff0df;
    border-radius: 8px
}

.jsn-family-form-hero h1, .jsn-family-hero h1, .jsn-inbox-hero h1, .jsn-letter-hero h1, .jsn-otp-hero h1, .jsn-payment-hero h1 {
    margin: 0 0 6px;
    color: #1f2937;
    font-size: 18px;
    font-weight: 900
}

.jsn-payment-security-badge {
    position: relative;
    z-index: 1;
    min-width: 155px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #15803d;
    background: rgba(236,253,243,.9);
    border: 1px solid #bbf7d0;
    border-radius: 13px
}

    .jsn-otp-security-state > i, .jsn-payment-security-badge > i {
        font-size: 18px
    }

    .jsn-family-birthday-note strong, .jsn-inbox-live-state strong, .jsn-letter-draft-state strong, .jsn-otp-security-state strong, .jsn-payment-security-badge strong {
        font-size: 12px;
    }

.jsn-new-payment-card, .jsn-payment-history-card {
    margin-top: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 21px;
    box-shadow: 0 11px 34px rgba(31,42,68,.06);
    animation: 520ms both jsnPaymentCardEnter
}

.jsn-payment-history-card {
    animation-delay: .1s
}

@keyframes jsnPaymentCardEnter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.99)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.jsn-family-form-header, .jsn-payment-card-header {
    margin-bottom: 16px;
    padding-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf0f4
}

.jsn-payment-section-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 12px;
    transition: transform 220ms
}

.jsn-family-form-header:hover .jsn-family-form-title > span, .jsn-family-section-header:hover .jsn-family-section-icon, .jsn-gateway-card:hover .jsn-gateway-icon, .jsn-letter-section-header:hover .jsn-letter-section-icon, .jsn-otp-card-header:hover .jsn-otp-title-icon, .jsn-payment-card-header:hover .jsn-payment-section-icon {
    transform: rotate(-7deg) scale(1.08)
}

.jsn-letter-section-icon.settings, .jsn-payment-section-icon.new {
    color: #ef7d01;
    background: #fff2e3
}

.jsn-payment-step-badge {
    padding: 6px 9px;
    color: #d96c00;
    font-size: 12px;
    font-weight: 900;
    background: #fff4e8;
    border: 1px solid #ffdfbc;
    border-radius: 9px
}

.jsn-letter-final-grid, .jsn-letter-form-grid, .jsn-letter-recipient-grid, .jsn-payment-filter-grid, .jsn-payment-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px
}

.jsn-payment-filter-grid {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.jsn-family-form-input-wrap, .jsn-family-form-select-wrap, .jsn-payment-input-wrap {
    position: relative;
    height: 48px;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 13px;
    transition: background 180ms,border-color 180ms,box-shadow 180ms,transform 180ms
}

    .jsn-payment-input-wrap:focus-within {
        background: #fff;
        border-color: #f3a04d;
        box-shadow: 0 0 0 3px rgba(239,125,1,.1);
        transform: translateY(-2px)
    }

.jsn-payment-control {
    width: 100% !important;
    height: 46px !important;
    min-width: 0;
    padding: 0 12px;
    color: #344054;
    font-family: inherit;
    font-size: 12px;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 12px;
    outline: 0;
    transition: background 180ms,border-color 180ms,box-shadow 180ms
}

.jsn-letter-input-wrap .jsn-letter-control, .jsn-letter-select-wrap .jsn-letter-control, .jsn-payment-input-wrap .jsn-payment-control {
    height: 100% !important;
    background: 0 0;
    border: 0;
    border-radius: 0
}

.jsn-payment-control:focus {
    background: #fff;
    border-color: #f3a04d;
    box-shadow: 0 0 0 3px rgba(239,125,1,.09)
}

.jsn-payment-input-wrap.money .jsn-payment-control {
    direction: ltr;
    text-align: left;
    padding-left: 60px
}

.jsn-payment-input-unit {
    position: absolute;
    left: 10px;
    padding: 5px 7px;
    color: #d96d00;
    font-size: 12px;
    font-weight: 900;
    background: #fff1df;
    border-radius: 7px
}

.jsn-letter-input-wrap > span, .jsn-payment-field-icon {
    position: absolute;
    left: 0;
    width: 42px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    pointer-events: none
}

.jsn-payment-amount-words {
    min-height: 16px;
    color: #667085;
    font-size: 12px;
}

.jsn-payment-gateway-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.jsn-gateway-card {
    position: relative;
    min-height: 76px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #475467;
    background: #fafbfc;
    border: 1px solid #e4e8ee;
    border-radius: 14px;
    cursor: pointer;
    transition: transform .2s,background .2s,border-color .2s,box-shadow .2s
}

    .jsn-gateway-card:hover {
        background: #fff9f3;
        border-color: #ffd5a6;
        transform: translateY(-3px);
        box-shadow: 0 10px 23px rgba(31,42,68,.09)
    }

    .jsn-gateway-card.is-selected {
        background: #fff7ee;
        border-color: #ef7d01;
        box-shadow: 0 0 0 3px rgba(239,125,1,.09)
    }

.jsn-gateway-check {
    top: 8px;
    left: 8px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    background: #ef7d01;
    border-radius: 50%;
    transform: scale(.4);
    transition: opacity 180ms,transform .2s
}

.jsn-gateway-card.is-selected .jsn-gateway-check {
    opacity: 1;
    transform: scale(1)
}

.jsn-gateway-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ef7d01;
    font-size: 15px;
    background: #fff1df;
    border-radius: 12px;
    transition: transform .2s
}

.jsn-family-birthday-note > div, .jsn-gateway-info, .jsn-letter-upload-zone > div, .jsn-payment-total-box > div {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.jsn-payment-textarea-wrap {
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 13px;
    transition: background 180ms,border-color 180ms,box-shadow 180ms
}

.jsn-debt-button, .jsn-payment-search-button, .jsn-payment-submit-button {
    font-weight: 900;
    transition: transform 180ms,box-shadow 180ms;
    cursor: pointer;
    font-family: inherit
}

.jsn-payment-textarea-wrap:focus-within {
    background: #fff;
    border-color: #f3a04d;
    box-shadow: 0 0 0 3px rgba(239,125,1,.09)
}

.jsn-payment-textarea {
    min-height: 130px !important;
    padding: 12px !important;
    resize: vertical;
    background: 0 0 !important;
    border: 0 !important;
    box-shadow: none !important
}

.jsn-textarea-footer {
    padding: 8px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #98a2b3;
    font-size: 12px;
    background: #fff;
    border-top: 1px solid #edf0f4
}

.jsn-payment-validation-summary {
    margin-bottom: 14px;
    padding: 11px;
    color: #b91c1c;
    font-size: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 11px
}

.jsn-payment-payer-panel {
    margin-top: 15px;
    padding: 14px;
    background: linear-gradient(135deg,#f8fafc,#fff);
    border: 1px solid #e2e7ee;
    border-radius: 15px;
    animation: 350ms both jsnPayerEnter
}

@keyframes jsnPayerEnter {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-payment-payer-header {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 9px
}

    .jsn-payment-payer-header > span {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #2563eb;
        background: #eff6ff;
        border-radius: 10px
    }

.jsn-debt-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.jsn-debt-button {
    min-height: 39px;
    padding: 0 12px;
    font-size: 12px;
    border-radius: 10px
}

    .jsn-debt-button:hover {
        transform: translateY(-2px)
    }

.jsn-payment-submit-area {
    margin-top: 17px;
    padding-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px dashed #dfe4eb
}

.jsn-payment-submit-note {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #667085;
    font-size: 12px;
}

.jsn-payment-search-button, .jsn-payment-submit-button {
    min-width: 205px;
    min-height: 45px;
    padding: 0 16px;
    color: #fff;
    font-size: 12px;
    background: linear-gradient(135deg,#f68c17,#e66d00);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(239,125,1,.24)
}

    .jsn-payment-search-button:hover, .jsn-payment-submit-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 29px rgba(239,125,1,.32)
    }

.jsn-payment-filter-toggle {
    min-height: 36px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #2563eb;
    font-family: inherit;
    font-size: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 180ms,background 180ms
}

    .jsn-payment-filter-toggle:hover {
        background: #dbeafe;
        transform: translateY(-2px)
    }

.jsn-payment-filter-panel {
    margin-bottom: 15px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e3e8ef;
    border-radius: 15px;
    overflow: hidden;
    animation: 350ms both jsnFilterEnter
}

@keyframes jsnFilterEnter {
    from {
        opacity: 0;
        transform: scaleY(.92)
    }

    to {
        opacity: 1;
        transform: scaleY(1)
    }
}

.jsn-time-picker {
    height: 46px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 5px
}

.jsn-payment-filter-actions {
    margin-top: 14px;
    padding-top: 13px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px dashed #dfe4eb
}

.jsn-payment-reset-button {
    min-height: 43px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667085;
    font-family: inherit;
    font-size: 12px;
    background: #fff;
    border: 1px solid #dfe5ec;
    border-radius: 11px;
    cursor: pointer
}

.jsn-payment-total-box {
    margin-bottom: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475467;
    background: linear-gradient(135deg,#fff9f2,#fff);
    border: 1px solid #ffe0bd;
    border-radius: 13px
}

.jsn-payment-method, .jsn-payment-share {
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 900
}

.jsn-payment-total-icon {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ef7d01;
    background: #fff0df;
    border-radius: 11px
}

.jsn-payment-grid-header th {
    padding: 13px 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
    background: linear-gradient(135deg,#344054,#475467);
    border-bottom: 1px solid #263445;
    white-space: nowrap
}

.jsn-payment-grid-row td {
    padding: 12px 10px;
    color: #475467;
    font-size: 12px;
    vertical-align: middle;
    background: #fff;
    border-bottom: 1px solid #edf0f4;
    transition: background 180ms,transform 180ms
}

.jsn-family-grid-row:hover td, .jsn-otp-grid-row:hover td, .jsn-payment-grid-row:hover td {
    background: #fff9f3
}

.jsn-payment-row-number {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d96d00;
    font-weight: 900;
    background: #fff2e3;
    border-radius: 9px
}

.jsn-payment-account > span {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    background: #eff6ff;
    border-radius: 10px
}

.jsn-family-form-submit-note strong, .jsn-family-relation-preview strong, .jsn-letter-option-card strong, .jsn-payment-account strong {
    color: #344054;
    font-size: 12px;
}

.jsn-payment-method {
    display: inline-flex;
    color: #7c3aed;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 8px
}

.jsn-payment-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    direction: ltr;
    white-space: nowrap
}

.jsn-family-birthday > div, .jsn-payment-price {
    display: flex;
    flex-direction: column;
    gap: 3px;
    direction: ltr
}

    .jsn-payment-price strong {
        color: #1f2937;
        font-size: 12px;
    }

.jsn-payment-description {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.jsn-payment-share {
    min-width: 90px;
    display: inline-flex;
    justify-content: center;
    border-radius: 8px
}

    .jsn-payment-share.nan {
        color: #b45309;
        background: #fff7ed
    }

.jsn-payment-empty-row td {
    padding: 40px !important;
    color: #98a2b3;
    text-align: center;
    background: #fff
}

.jsn-payment-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,.75);
    backdrop-filter: blur(7px)
}

.jsn-payment-loader {
    min-width: 250px;
    padding: 25px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 9px;
    color: #344054;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,.28);
    animation: .3s both jsnLoaderEnter
}

@keyframes jsnLoaderEnter {
    from {
        opacity: 0;
        transform: scale(.85)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.jsn-payment-loader-rings {
    position: relative;
    width: 60px;
    height: 60px
}

    .jsn-payment-loader-rings span {
        position: absolute;
        inset: 0;
        border: 3px solid transparent;
        border-top-color: #ef7d01;
        border-radius: 50%;
        animation: 1s linear infinite jsnPaymentSpin
    }

        .jsn-payment-loader-rings span:nth-child(2) {
            inset: 8px;
            border-top-color: #f59e0b;
            animation-duration: .8s;
            animation-direction: reverse
        }

        .jsn-payment-loader-rings span:nth-child(3) {
            inset: 16px;
            border-top-color: #2563eb;
            animation-duration: .6s
        }

@keyframes jsnPaymentSpin {
    to {
        transform: rotate(360deg)
    }
}

.jsn-payment-loader strong {
    font-size: 12px;
}

@media (max-width:1100px) {
    .jsn-need-filter-grid, .jsn-payment-filter-grid, .jsn-profile-details-grid, .jsn-profile-summary {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .jsn-profile-detail-item.is-wide {
        grid-column: span 2
    }
}

.jsn-otp-hero {
    position: relative;
    min-height: 122px;
    padding: 22px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg,#fff 0,#fff9f2 60%,#ffedd8 100%);
    border: 1px solid #f0e2d3;
    border-radius: 23px;
    box-shadow: 0 15px 43px rgba(31,42,68,.075);
    overflow: hidden;
    animation: 550ms both jsnOtpHeroEnter
}

@keyframes jsnOtpHeroEnter {
    from {
        opacity: 0;
        transform: translateY(-16px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-otp-hero-glow {
    position: absolute;
    top: -140px;
    left: -100px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle,rgba(239,125,1,.18),transparent 68%);
    animation: 5s ease-in-out infinite jsnOtpGlow
}

@keyframes jsnOtpGlow {
    0%,100% {
        transform: scale(1);
        opacity: .8
    }

    50% {
        transform: scale(1.18);
        opacity: 1
    }
}

.jsn-otp-hero-icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 23px;
    background: linear-gradient(135deg,#ff9c32,#ef7d01);
    border-radius: 19px;
    box-shadow: 0 14px 30px rgba(239,125,1,.29);
    animation: 3s ease-in-out infinite jsnOtpShieldFloat
}

@keyframes jsnOtpShieldFloat {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-5px) rotate(-3deg)
    }
}

.jsn-otp-security-state {
    position: relative;
    z-index: 1;
    min-width: 165px;
    padding: 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #15803d;
    background: rgba(236,253,243,.92);
    border: 1px solid #bbf7d0;
    border-radius: 13px;
    animation: 3s ease-in-out infinite jsnOtpSecurityPulse
}

@keyframes jsnOtpSecurityPulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(34,197,94,0)
    }

    50% {
        box-shadow: 0 0 0 5px rgba(34,197,94,.08)
    }
}

.jsn-otp-card {
    margin-top: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 21px;
    box-shadow: 0 11px 34px rgba(31,42,68,.06);
    animation: .5s both jsnOtpCardEnter
}

@keyframes jsnOtpCardEnter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.99)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.jsn-family-section-header, .jsn-otp-card-header {
    margin-bottom: 14px;
    padding-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf0f4
}

.jsn-otp-title-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 14px;
    background: #eff6ff;
    border-radius: 12px;
    transition: transform 220ms
}

.jsn-otp-header-badge i {
    font-size: 12px;
    animation: 1.8s infinite jsnOtpDotPulse
}

@keyframes jsnOtpDotPulse {
    0%,100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .35;
        transform: scale(.7)
    }
}

.jsn-otp-help {
    margin-bottom: 13px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #667085;
    font-size: 12px;
    background: linear-gradient(135deg,#f8fafc,#fff);
    border: 1px solid #e6eaf0;
    border-radius: 11px
}

.jsn-family-table-responsive, .jsn-otp-table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e4e9ef;
    border-radius: 16px;
    scrollbar-color: #cfd6df transparent
}

    .jsn-otp-table-responsive::-webkit-scrollbar {
        height: 6px
    }

    .jsn-otp-table-responsive::-webkit-scrollbar-thumb {
        background: #cfd6df;
        border-radius: 20px
    }

.jsn-otp-grid {
    width: 100%;
    min-width: 950px;
    color: #344054;
    font-family: inherit
}

.jsn-otp-grid-header th {
    padding: 14px 11px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
    background: linear-gradient(135deg,#344054,#475467);
    border-bottom: 1px solid #253143;
    white-space: nowrap
}

.jsn-otp-grid-row td {
    padding: 13px 11px;
    color: #475467;
    font-size: 12px;
    vertical-align: middle;
    background: #fff;
    border-bottom: 1px solid #edf0f4;
    transition: background 180ms,transform 180ms,box-shadow 180ms
}

.jsn-otp-grid-row:hover {
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 20px rgba(31,42,68,.06)
}

.jsn-otp-row-number {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d96d00;
    font-weight: 900;
    background: #fff2e3;
    border-radius: 9px;
    transition: transform 180ms
}

.jsn-otp-avatar, .jsn-otp-mobile {
    display: inline-flex;
    align-items: center
}

.jsn-otp-grid-row:hover .jsn-otp-row-number {
    transform: rotate(-5deg) scale(1.08)
}

.jsn-otp-avatar {
    width: 38px;
    min-width: 38px;
    height: 38px;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    background: linear-gradient(135deg,#f59e0b,#ef7d01);
    border-radius: 11px;
    box-shadow: 0 6px 13px rgba(239,125,1,.18);
    transition: transform 190ms
}

.jsn-otp-grid-row:hover .jsn-otp-avatar {
    transform: rotate(-5deg) scale(1.06)
}

.jsn-otp-mobile {
    min-height: 32px;
    padding: 0 9px;
    gap: 6px;
    direction: ltr;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 9px
}

.jsn-otp-send-type, .jsn-otp-status {
    min-height: 31px;
    align-items: center;
    font-size: 12px;
    border-radius: 8px;
    display: inline-flex;
    gap: 6px;
    font-weight: 900;
    white-space: nowrap
}

.jsn-otp-send-type {
    padding: 0 8px
}

.jsn-otp-status {
    padding: 0 9px
}

.jsn-otp-edit-field, .jsn-otp-select-wrap {
    position: relative;
    min-width: 150px;
    height: 44px;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #dfe5ec;
    border-radius: 11px;
    transition: border-color 180ms,box-shadow 180ms,transform 180ms
}

    .jsn-otp-edit-field:focus-within, .jsn-otp-select-wrap:focus-within {
        border-color: #f3a04d;
        box-shadow: 0 0 0 3px rgba(239,125,1,.09);
        transform: translateY(-1px)
    }

    .jsn-otp-edit-field > i {
        width: 38px;
        display: inline-flex;
        justify-content: center;
        color: #98a2b3;
        pointer-events: none
    }

.jsn-otp-control {
    width: 100% !important;
    height: 100% !important;
    padding: 0 10px;
    color: #344054;
    font-family: inherit;
    font-size: 12px;
    background: 0 0;
    border: 0 !important;
    outline: 0
}

.jsn-family-form-input-wrap.mobile .jsn-family-form-control, .jsn-ltr-input, .jsn-otp-edit-field.mobile .jsn-otp-control {
    direction: ltr;
    text-align: left
}

.jsn-otp-select-wrap .jsn-otp-control {
    padding-left: 30px;
    appearance: none;
    cursor: pointer
}

.jsn-otp-select-wrap > i {
    position: absolute;
    left: 11px;
    color: #98a2b3;
    font-size: 12px;
    pointer-events: none
}

.jsn-otp-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px
}

.jsn-family-action, .jsn-otp-action, .jsn-otp-add-button, .jsn-otp-edit-button {
    min-height: 35px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    border-radius: 9px;
    transition: transform 180ms,box-shadow 180ms,background 180ms
}

    .jsn-otp-edit-button:hover {
        color: #1d4ed8;
        box-shadow: 0 7px 14px rgba(37,99,235,.13)
    }

.jsn-otp-add-button {
    min-width: 145px;
    color: #fff;
    background: linear-gradient(135deg,#f68c17,#e66d00);
    border: 0;
    box-shadow: 0 8px 18px rgba(239,125,1,.22)
}

    .jsn-otp-add-button:hover {
        color: #fff;
        box-shadow: 0 12px 24px rgba(239,125,1,.3)
    }

.jsn-otp-grid-footer td {
    padding: 13px 10px;
    background: linear-gradient(135deg,#fffaf4,#fff);
    border-top: 2px solid #ffe0bd
}

.jsn-otp-add-row-icon {
    width: 33px;
    height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #ef7d01;
    border-radius: 9px;
    animation: 2s ease-in-out infinite jsnOtpAddPulse
}

@keyframes jsnOtpAddPulse {
    0%,100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239,125,1,0)
    }

    50% {
        transform: scale(1.06);
        box-shadow: 0 0 0 5px rgba(239,125,1,.1)
    }
}

.jsn-otp-grid tr.jsn-otp-editing-row td {
    background: #fff7ed;
    border-top: 1px solid #fed7aa;
    border-bottom: 1px solid #fed7aa
}

.jsn-otp-grid tr.jsn-otp-editing-row {
    animation: 350ms both jsnOtpEditingEnter
}

@keyframes jsnOtpEditingEnter {
    from {
        opacity: .7;
        transform: scale(.99)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.jsn-otp-empty-row td {
    padding: 45px 15px !important;
    color: #98a2b3;
    font-size: 12px;
    text-align: center;
    background: #fff
}

@media (max-width:720px) {
    .jsn-profile-page {
        padding: 10px
    }

    .jsn-profile-hero {
        padding: 17px
    }

    .jsn-otp-hero, .jsn-profile-hero-content, .jsn-profile-upload-box {
        grid-template-columns: 1fr;
        text-align: center
    }

    .jsn-need-hero-content, .jsn-payment-hero, .jsn-profile-main-info {
        text-align: center
    }

    .jsn-otp-security-state, .jsn-payment-security-badge, .jsn-profile-identity-line, .jsn-upload-actions {
        justify-content: center
    }

    .jsn-profile-status-area {
        display: flex;
        justify-content: center
    }

    .jsn-need-hero-icon, .jsn-otp-hero-icon, .jsn-payment-hero-icon, .jsn-upload-preview {
        margin: 0 auto
    }

    .jsn-need-filter-grid, .jsn-need-hero-content, .jsn-payment-filter-grid, .jsn-payment-form-grid, .jsn-payment-gateway-list, .jsn-payment-hero, .jsn-profile-details-grid, .jsn-profile-summary {
        grid-template-columns: 1fr
    }

    .jsn-payment-field.is-wide, .jsn-profile-detail-item.is-wide {
        grid-column: span 1
    }

    .jsn-need-page, .jsn-otp-page, .jsn-payment-page {
        padding: 9px
    }

    .jsn-need-hero {
        padding: 16px
    }

    .jsn-need-add-button {
        width: 100%;
        min-width: 0
    }

    .jsn-need-analysis-card, .jsn-need-filter-card, .jsn-need-list-card {
        padding: 13px;
        border-radius: 16px
    }

    .jsn-need-section-heading, .jsn-otp-card-header {
        align-items: flex-start;
        flex-direction: column
    }

    .jsn-need-filter-actions {
        align-items: stretch;
        flex-direction: column-reverse
    }

    .jsn-need-reset-button, .jsn-need-search-button, .jsn-payment-reset-button, .jsn-payment-search-button, .jsn-payment-submit-button {
        width: 100%;
        justify-content: center
    }

    .jsn-payment-filter-actions, .jsn-payment-submit-area {
        align-items: stretch;
        flex-direction: column
    }

    .jsn-otp-card {
        padding: 13px;
        border-radius: 17px
    }
}

.jsn-letter-hero {
    position: relative;
    min-height: 125px;
    padding: 22px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg,#fff 0,#fff9f2 58%,#ffecd6 100%);
    border: 1px solid #f0e1d0;
    border-radius: 23px;
    box-shadow: 0 15px 43px rgba(31,42,68,.075);
    overflow: hidden;
    animation: 550ms both jsnLetterHeroEnter
}

@keyframes jsnLetterHeroEnter {
    from {
        opacity: 0;
        transform: translateY(-17px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-letter-hero-glow {
    position: absolute;
    top: -150px;
    left: -110px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle,rgba(239,125,1,.18),transparent 68%);
    animation: 5s ease-in-out infinite jsnLetterGlow
}

@keyframes jsnLetterGlow {
    0%,100% {
        opacity: .75;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.18)
    }
}

.jsn-letter-hero-icon {
    position: relative;
    z-index: 1;
    width: 66px;
    height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 23px;
    background: linear-gradient(135deg,#ff9c32,#ef7d01);
    border-radius: 19px;
    box-shadow: 0 14px 30px rgba(239,125,1,.29);
    animation: 3s ease-in-out infinite jsnLetterFloat
}

@keyframes jsnLetterFloat {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-5px) rotate(-3deg)
    }
}

.jsn-letter-draft-state {
    position: relative;
    z-index: 1;
    min-width: 145px;
    padding: 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #b45309;
    background: rgba(255,247,237,.92);
    border: 1px solid #fed7aa;
    border-radius: 13px
}

.jsn-letter-draft-dot {
    width: 10px;
    height: 10px;
    background: #f59e0b;
    border-radius: 50%;
    animation: 1.5s infinite jsnLetterDraftPulse
}

@keyframes jsnLetterDraftPulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(245,158,11,0)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(245,158,11,.13)
    }
}

.jsn-letter-card {
    margin-top: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 21px;
    box-shadow: 0 11px 34px rgba(31,42,68,.06);
    animation: .5s both jsnLetterCardEnter
}

.jsn-letter-editor-card {
    animation-delay: 60ms
}

.jsn-letter-attachment-card {
    animation-delay: 110ms
}

.jsn-letter-recipients-card {
    animation-delay: 160ms
}

.jsn-letter-copy-card {
    animation-delay: 210ms
}

.jsn-letter-final-card {
    animation-delay: 260ms
}

@keyframes jsnLetterCardEnter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.99)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.jsn-letter-section-header {
    margin-bottom: 15px;
    padding-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf0f4
}

.jsn-letter-section-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 12px;
    transition: transform 220ms,box-shadow 220ms
}

.jsn-letter-editor-badge, .jsn-letter-recipient-count, .jsn-letter-step-badge {
    min-height: 31px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d96d00;
    font-size: 12px;
    font-weight: 900;
    background: #fff4e8;
    border: 1px solid #ffdfbc;
    border-radius: 9px
}

.jsn-family-gender-preview.is-male, .jsn-letter-editor-badge {
    color: #2563eb;
    background: #eff6ff;
    border-color: #bfdbfe
}

.jsn-letter-field > label small {
    margin-right: 5px;
    color: #98a2b3;
    font-weight: 400
}

.jsn-letter-input-wrap, .jsn-letter-select-wrap {
    position: relative;
    height: 47px;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 12px;
    transition: background 180ms,border-color 180ms,box-shadow 180ms,transform 180ms
}

    .jsn-letter-input-wrap:focus-within, .jsn-letter-select-wrap:focus-within {
        background: #fff;
        border-color: #f3a04d;
        box-shadow: 0 0 0 3px rgba(239,125,1,.09);
        transform: translateY(-2px)
    }

.jsn-letter-control {
    width: 100% !important;
    min-width: 0;
    min-height: 46px;
    padding: 0 12px;
    color: #344054;
    font-family: inherit;
    font-size: 12px;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 12px;
    outline: 0;
    transition: background 180ms,border-color 180ms,box-shadow 180ms
}

    .jsn-letter-control:focus {
        background: #fff;
        border-color: #f3a04d;
        box-shadow: 0 0 0 3px rgba(239,125,1,.09)
    }

select.jsn-letter-control {
    padding-left: 32px;
    appearance: none;
    cursor: pointer
}

.jsn-letter-input-wrap .jsn-letter-control {
    padding-left: 42px
}

.jsn-letter-error {
    display: block;
    color: #dc2626;
    font-size: 12px;
}

.jsn-letter-priority {
    min-height: 29px;
    padding: 0 8px;
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 900;
    border-radius: 8px;
    transition: color .2s,background .2s,border-color .2s
}

    .jsn-letter-priority.urgent {
        color: #b91c1c;
        background: #fef2f2;
        border: 1px solid #fecaca;
        animation: 1.4s infinite jsnUrgentPulse
    }

@keyframes jsnUrgentPulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(220,38,38,0)
    }

    50% {
        box-shadow: 0 0 0 4px rgba(220,38,38,.09)
    }
}

.jsn-letter-editor-wrap {
    padding: 5px;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 15px;
    overflow: hidden;
    transition: border-color 180ms,box-shadow 180ms
}

    .jsn-letter-editor-wrap:focus-within {
        border-color: #f3a04d;
        box-shadow: 0 0 0 3px rgba(239,125,1,.09)
    }

    .jsn-letter-editor-wrap .cke {
        border: 0 !important;
        border-radius: 12px !important;
        overflow: hidden
    }

.jsn-letter-attachment-layout {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(220px,1fr);
    gap: 13px
}

.jsn-letter-upload-zone {
    min-height: 125px;
    padding: 17px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    background: linear-gradient(135deg,#faf8ff,#fff);
    border: 1px dashed #cfc4f6;
    border-radius: 15px;
    transition: transform .2s,border-color .2s,box-shadow .2s
}

    .jsn-letter-upload-zone:hover {
        border-color: #7c3aed;
        transform: translateY(-2px);
        box-shadow: 0 10px 23px rgba(124,58,237,.08)
    }

.jsn-letter-upload-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7c3aed;
    font-size: 17px;
    background: #f5f3ff;
    border-radius: 13px;
    animation: 2.8s ease-in-out infinite jsnUploadFloat
}

@keyframes jsnUploadFloat {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-4px)
    }
}

.jsn-letter-uploaded-files {
    width: 100%;
    color: #667085;
    font-size: 12px;
}

.jsn-selected-recipients {
    min-height: 80px;
    margin-top: 12px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e4e9ef;
    border-radius: 13px
}

.jsn-selected-recipients-title {
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #475467;
    font-size: 12px;
    font-weight: 900
}

.jsn-recipient-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.getadsitems {
    position: relative;
    min-height: 33px;
    padding: 0 10px 0 31px;
    display: inline-flex;
    align-items: center;
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 9px;
    animation: 250ms both jsnRecipientEnter
}

@keyframes jsnRecipientEnter {
    from {
        opacity: 0;
        transform: scale(.75)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.getadsitems .rem {
    position: absolute;
    left: 5px;
    width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    background: #fff;
    border-radius: 6px;
    cursor: pointer
}

    .getadsitems .rem::before {
        content: "\f00d";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 12px;
    }

.jsn-letter-options {
    display: flex;
    flex-direction: column;
    gap: 9px
}

.jsn-letter-option-card {
    min-height: 65px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fafbfc;
    border: 1px solid #e5e9ef;
    border-radius: 13px;
    cursor: pointer;
    transition: background 180ms,border-color 180ms,transform 180ms,box-shadow 180ms
}

    .jsn-letter-option-card:hover {
        background: #fff9f3;
        border-color: #ffd8ac;
        transform: translateX(-3px);
        box-shadow: 0 8px 17px rgba(31,42,68,.06)
    }

    .jsn-letter-option-card input {
        width: 17px;
        height: 17px;
        accent-color: #ef7d01
    }

.jsn-letter-option-icon {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d97706;
    background: #fff7ed;
    border-radius: 11px
}

.jsn-supervision-date {
    display: none;
    padding: 10px;
    background: #fffaf4;
    border: 1px solid #ffe0bd;
    border-radius: 12px
}

    .jsn-supervision-date.is-visible {
        display: block;
        animation: 280ms both jsnSupervisionEnter
    }

@keyframes jsnSupervisionEnter {
    from {
        opacity: 0;
        transform: translateY(-7px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-letter-copy-text {
    min-height: 210px;
    padding: 12px;
    resize: vertical
}

.jsn-letter-submit-area {
    margin-top: 17px;
    padding-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px dashed #dfe4eb
}

.jsn-letter-submit-note > i {
    color: #15803d;
    font-size: 16px
}

.jsn-letter-submit-button {
    min-width: 210px;
    min-height: 47px;
    padding: 0 18px;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    background: linear-gradient(135deg,#f68c17,#e66d00);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 11px 24px rgba(239,125,1,.25);
    transition: transform 180ms,box-shadow 180ms
}

    .jsn-family-form-submit-button:hover, .jsn-letter-submit-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 31px rgba(239,125,1,.33)
    }

@media (max-width:900px) {
    .jsn-letter-attachment-layout, .jsn-letter-final-grid, .jsn-letter-form-grid, .jsn-letter-hero, .jsn-letter-recipient-grid {
        grid-template-columns: 1fr
    }

    .jsn-letter-hero {
        text-align: center
    }

    .jsn-letter-hero-icon {
        margin: 0 auto
    }

    .jsn-letter-draft-state {
        justify-content: center
    }

    .jsn-letter-field.is-wide {
        grid-column: span 1
    }
}

.jsn-inbox-hero {
    position: relative;
    min-height: 122px;
    padding: 22px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg,#fff 0,#fff9f2 58%,#ffecd6 100%);
    border: 1px solid #f0e1d0;
    border-radius: 23px;
    box-shadow: 0 15px 43px rgba(31,42,68,.075);
    overflow: hidden;
    animation: 550ms both jsnInboxHeroEnter
}

@keyframes jsnInboxHeroEnter {
    from {
        opacity: 0;
        transform: translateY(-16px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-inbox-hero-glow {
    position: absolute;
    top: -150px;
    left: -110px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle,rgba(239,125,1,.18),transparent 68%);
    animation: 5s ease-in-out infinite jsnInboxGlow
}

@keyframes jsnInboxGlow {
    0%,100% {
        opacity: .75;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.18)
    }
}

.jsn-inbox-hero-icon {
    position: relative;
    z-index: 1;
    width: 66px;
    height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 23px;
    background: linear-gradient(135deg,#ff9c32,#ef7d01);
    border-radius: 19px;
    box-shadow: 0 14px 30px rgba(239,125,1,.29);
    animation: 3s ease-in-out infinite jsnInboxFloat
}

@keyframes jsnInboxFloat {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-5px) rotate(-3deg)
    }
}

.jsn-inbox-live-state {
    position: relative;
    z-index: 1;
    min-width: 145px;
    padding: 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #15803d;
    background: rgba(236,253,243,.92);
    border: 1px solid #bbf7d0;
    border-radius: 13px
}

.jsn-inbox-live-dot {
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    animation: 1.6s infinite jsnInboxLivePulse
}

@keyframes jsnInboxLivePulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(34,197,94,0)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(34,197,94,.14)
    }
}

.jsn-inbox-toolbar {
    margin-top: 14px;
    padding: 13px;
    display: grid;
    grid-template-columns: minmax(240px,1fr) auto auto;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 17px;
    box-shadow: 0 9px 27px rgba(31,42,68,.055);
    animation: .5s both jsnInboxToolbarEnter
}

@keyframes jsnInboxToolbarEnter {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-inbox-search-wrap {
    position: relative;
    height: 45px;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 12px;
    transition: border-color 180ms,background 180ms,box-shadow 180ms,transform 180ms
}

    .jsn-inbox-search-wrap:focus-within {
        background: #fff;
        border-color: #f3a04d;
        box-shadow: 0 0 0 3px rgba(239,125,1,.09);
        transform: translateY(-1px)
    }

    .jsn-inbox-search-wrap > i {
        width: 40px;
        color: #98a2b3;
        text-align: center
    }

.jsn-inbox-search {
    width: 100%;
    height: 100%;
    padding: 0 4px;
    color: #344054;
    font-family: inherit;
    font-size: 12px;
    background: 0 0;
    border: 0;
    outline: 0
}

.jsn-inbox-clear-search {
    width: 35px;
    height: 35px;
    margin-left: 5px;
    display: none;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    background: 0 0;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: color 180ms,background 180ms
}

.jsn-inbox-filter-buttons {
    display: flex;
    align-items: center;
    gap: 6px
}

.jsn-inbox-filter, .jsn-inbox-result-count {
    min-height: 38px;
    padding: 0 10px;
    display: inline-flex;
    font-size: 12px;
}

.jsn-inbox-filter {
    align-items: center;
    gap: 6px;
    color: #667085;
    font-family: inherit;
    font-weight: 800;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 10px;
    cursor: pointer;
    transition: color 180ms,background 180ms,border-color 180ms,transform 180ms
}

    .jsn-inbox-filter:hover {
        color: #ef7d01;
        background: #fff7ee;
        border-color: #ffdbb1;
        transform: translateY(-2px)
    }

    .jsn-inbox-filter.is-active {
        color: #fff;
        background: linear-gradient(135deg,#f68c17,#e66d00);
        border-color: #ef7d01;
        box-shadow: 0 7px 16px rgba(239,125,1,.22)
    }

.jsn-inbox-result-count {
    align-items: center;
    gap: 5px;
    color: #2563eb;
    font-weight: 900;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px
}

.jsn-inbox-row, .jsn-inbox-table-header {
    width: 100%;
    min-width: 980px;
    display: grid;
    grid-template-columns: minmax(300px,1fr) 125px 190px 105px 105px 85px
}

.jsn-inbox-datalist {
    width: 100%;
    margin-top: 13px;
    border-collapse: separate;
    border-spacing: 0 7px
}

.jsn-inbox-table-header {
    padding: 0 13px;
    align-items: center;
    color: #667085;
    font-size: 12px;
    font-weight: 900;
    background: linear-gradient(180deg,#f9fafb,#f4f6f8);
    border: 1px solid #e4e9ef;
    border-radius: 13px
}

    .jsn-inbox-table-header > div {
        min-height: 43px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #e5e9ef
    }

        .jsn-inbox-table-header > div:first-child {
            justify-content: flex-start
        }

        .jsn-inbox-table-header > div:last-child {
            border-left: 0
        }

.jsn-inbox-row {
    position: relative;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e4e9ef;
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(31,42,68,.035);
    overflow: hidden;
    transition: transform .2s,box-shadow .2s,border-color .2s;
    animation: 420ms both jsnInboxRowEnter
}

@keyframes jsnInboxRowEnter {
    from {
        opacity: 0;
        transform: translateY(11px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-inbox-row:hover {
    z-index: 2;
    border-color: #ffc783;
    transform: translateY(-3px) scale(1.002);
    box-shadow: 0 13px 30px rgba(31,42,68,.095)
}

.jsn-inbox-row::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg,#ff9c32,#ef7d01);
    opacity: 0;
    transition: opacity 180ms
}

.jsn-inbox-row:hover::before {
    opacity: 1
}

.jsn-inbox-main {
    position: relative;
    min-height: 72px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0
}

.jsn-inbox-avatar-wrap {
    position: relative;
    width: 43px;
    min-width: 43px;
    height: 43px
}

.jsn-inbox-avatar, .jsn-inbox-avatar-fallback {
    width: 43px;
    height: 43px;
    border-radius: 12px
}

.jsn-inbox-avatar {
    display: block;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 5px 13px rgba(31,42,68,.13);
    transition: transform 210ms,box-shadow 210ms
}

.jsn-inbox-row:hover .jsn-inbox-avatar {
    transform: scale(1.09) rotate(-3deg);
    box-shadow: 0 8px 17px rgba(31,42,68,.18)
}

.jsn-inbox-avatar-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    color: #ef7d01;
    font-size: 15px;
    background: #fff2e3
}

.jsn-inbox-unread-pulse {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 11px;
    height: 11px;
    background: #22c55e;
    border: 2px solid #fff;
    border-radius: 50%;
    animation: 1.8s infinite jsnInboxUnreadPulse
}

@keyframes jsnInboxUnreadPulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(34,197,94,0)
    }

    50% {
        box-shadow: 0 0 0 5px rgba(34,197,94,.13)
    }
}

.jsn-inbox-letter-content {
    min-width: 0;
    flex: 1
}

.jsn-inbox-letter-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #344054;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    transition: color 180ms
}

    .jsn-inbox-letter-title:hover {
        color: #ef7d01;
        text-decoration: none
    }

.jsn-inbox-open-icon {
    width: 29px;
    min-width: 29px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    font-size: 12px;
    background: #f8fafc;
    border-radius: 8px;
    transition: color 180ms,background 180ms,transform 180ms
}

.jsn-inbox-row:hover .jsn-inbox-open-icon {
    color: #fff;
    background: #ef7d01;
    transform: translateX(-3px)
}

.jsn-inbox-cell {
    min-width: 0;
    padding: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667085;
    font-size: 12px;
    border-right: 1px solid #edf0f4
}

.status-cell > a, .status-cell > div, .status-cell > span {
    max-width: 100%
}

.sender-cell {
    justify-content: flex-start;
    gap: 7px
}

.jsn-inbox-sender-icon {
    width: 30px;
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    background: #eff6ff;
    border-radius: 9px
}

.jsn-inbox-number-badge, .jsn-inbox-priority {
    min-height: 29px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center
}

.date-cell {
    gap: 5px;
    direction: ltr;
    white-space: nowrap
}

.jsn-inbox-number-badge {
    min-width: 57px;
    justify-content: center;
    direction: ltr;
    color: #475467;
    font-weight: 900;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 8px
}

.jsn-inbox-priority {
    gap: 5px;
    font-size: 12px;
    font-weight: 900;
    border-radius: 8px;
    white-space: nowrap
}

.status-cell .letter-new, .status-cell .letter-read, .status-cell font[color=red] {
    min-height: 29px;
    padding: 0 8px;
    align-items: center;
    font-size: 12px;
    display: inline-flex;
    font-weight: 900
}

.jsn-inbox-priority.priority-urgent {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    animation: 1.5s infinite jsnInboxUrgentPulse
}

@keyframes jsnInboxUrgentPulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(220,38,38,0)
    }

    50% {
        box-shadow: 0 0 0 4px rgba(220,38,38,.09)
    }
}

.status-cell a, .status-cell font, .status-cell span {
    font-family: inherit !important
}

    .status-cell .letter-new, .status-cell font[color=red] {
        color: #dc2626 !important;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 8px
    }

.status-cell .letter-read {
    color: #15803d;
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
    border-radius: 8px
}

.jsn-inbox-image-preview {
    position: absolute;
    z-index: 100;
    display: none;
    max-width: 170px
}

.jsn-inbox-footer {
    margin-top: 4px;
    padding: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #98a2b3;
    font-size: 12px;
    background: #f8fafc;
    border: 1px dashed #dfe5ec;
    border-radius: 12px
}

    .jsn-inbox-footer i {
        color: #22c55e
    }

.jsn-inbox-empty-search {
    display: none;
    margin-top: 13px;
    padding: 45px 15px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    background: #fff;
    border: 1px dashed #dfe5ec;
    border-radius: 17px
}

    .jsn-inbox-empty-search.is-visible {
        display: flex;
        animation: .3s both jsnInboxEmptyEnter
    }

@keyframes jsnInboxEmptyEnter {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-inbox-empty-search > span {
    width: 55px;
    height: 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    font-size: 19px;
    background: #f8fafc;
    border-radius: 15px
}

.jsn-inbox-empty-search strong {
    color: #475467;
    font-size: 12px;
}

@media (max-width:1050px) {
    .jsn-inbox-page {
        overflow-x: hidden
    }

    .date-cell, .jsn-inbox-table-header, .number-cell, .priority-cell, .sender-cell {
        display: none
    }

    .jsn-inbox-datalist {
        border-spacing: 0 9px
    }

    .jsn-inbox-row {
        min-width: 0;
        grid-template-columns: minmax(0,1fr) 115px
    }

    .jsn-inbox-main {
        min-height: 88px
    }

    .status-cell {
        border-right: 1px solid #edf0f4
    }

    .jsn-inbox-mobile-priority {
        min-height: 23px;
        padding: 0 6px;
        display: inline-flex;
        align-items: center;
        color: #b45309;
        font-size: 12px;
        background: #fff7ed;
        border-radius: 7px
    }

    .jsn-inbox-mobile-meta {
        margin-top: 7px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 7px
    }

        .jsn-inbox-mobile-meta span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #98a2b3;
            font-size: 12px;
        }

    .jsn-inbox-toolbar {
        grid-template-columns: 1fr
    }

    .jsn-inbox-filter-buttons {
        overflow-x: auto;
        padding-bottom: 3px
    }

    .jsn-inbox-result-count {
        justify-self: start
    }
}

.jsn-family-hero {
    position: relative;
    min-height: 128px;
    padding: 22px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 17px;
    background: linear-gradient(135deg,#fff 0,#fff9f2 56%,#ffead2 100%);
    border: 1px solid #f0dfcc;
    border-radius: 24px;
    box-shadow: 0 15px 44px rgba(31,42,68,.075);
    overflow: hidden;
    animation: 550ms both jsnFamilyHeroEnter
}

@keyframes jsnFamilyHeroEnter {
    from {
        opacity: 0;
        transform: translateY(-17px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-family-hero-glow {
    position: absolute;
    top: -160px;
    left: -110px;
    width: 390px;
    height: 390px;
    background: radial-gradient(circle,rgba(239,125,1,.2),transparent 68%);
    animation: 5s ease-in-out infinite jsnFamilyGlow
}

@keyframes jsnFamilyGlow {
    0%,100% {
        opacity: .75;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.18)
    }
}

.jsn-family-hero::after {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -105px;
    width: 230px;
    height: 230px;
    border: 38px solid rgba(239,125,1,.045);
    border-radius: 50%;
    pointer-events: none
}

.jsn-family-hero-icon {
    position: relative;
    z-index: 1;
    width: 68px;
    min-width: 68px;
    height: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    background: linear-gradient(135deg,#ff9d34,#ef7d01);
    border-radius: 20px;
    box-shadow: 0 15px 32px rgba(239,125,1,.3);
    animation: 3s ease-in-out infinite jsnFamilyGiftFloat
}

@keyframes jsnFamilyGiftFloat {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-6px) rotate(-4deg)
    }
}

.jsn-family-eyebrow, .jsn-family-form-eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    padding: 5px 9px;
    color: #d96d00;
    font-size: 12px;
    font-weight: 900;
    background: #fff0df;
    border-radius: 8px
}

.jsn-family-form-hero p, .jsn-family-hero p {
    max-width: 700px;
    margin: 0;
    color: #7b8798;
    font-size: 12px;
    line-height: 2
}

.jsn-family-auto-send {
    position: relative;
    z-index: 1;
    min-width: 170px;
    padding: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #7c3aed;
    background: linear-gradient(135deg,rgba(245,243,255,.96),rgba(255,255,255,.9));
    border: 1px solid #ddd6fe;
    border-radius: 14px;
    animation: 3s ease-in-out infinite jsnFamilyAutoPulse
}

@keyframes jsnFamilyAutoPulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(124,58,237,0)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(124,58,237,.08)
    }
}

.jsn-family-auto-icon {
    width: 39px;
    min-width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg,#8b5cf6,#7c3aed);
    border-radius: 11px;
    animation: 4s linear infinite jsnFamilyMagicRotate
}

@keyframes jsnFamilyMagicRotate {
    0%,100% {
        transform: rotate(0)
    }

    50% {
        transform: rotate(-8deg)
    }
}

.jsn-family-auto-send strong, .jsn-family-form-auto strong {
    font-size: 12px;
}

.jsn-family-literal-wrap {
    margin-top: 14px
}

.jsn-family-list-card {
    margin-top: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 21px;
    box-shadow: 0 11px 34px rgba(31,42,68,.06);
    animation: .5s both jsnFamilyCardEnter
}

@keyframes jsnFamilyCardEnter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.99)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.jsn-family-form-title > span, .jsn-family-section-icon {
    width: 43px;
    min-width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 14px;
    background: #eff6ff;
    border-radius: 12px;
    transition: transform 220ms
}

.jsn-family-list-badge {
    min-height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7c3aed;
    font-size: 12px;
    font-weight: 900;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 9px
}

    .jsn-family-list-badge i {
        animation: 2s ease-in-out infinite jsnFamilyBadgeGift
    }

@keyframes jsnFamilyBadgeGift {
    0%,100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.17)
    }
}

.jsn-family-info-box {
    margin-bottom: 13px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    font-size: 12px;
    line-height: 1.9;
    background: linear-gradient(135deg,#fffaf4,#fff);
    border: 1px solid #ffe0bd;
    border-radius: 12px
}

    .jsn-family-info-box i {
        color: #ef7d01;
        font-size: 12px
    }

.jsn-family-grid-header th {
    padding: 14px 11px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    background: linear-gradient(135deg,#344054,#475467);
    border-bottom: 1px solid #263445;
    white-space: nowrap
}

.jsn-family-grid-row td {
    padding: 13px 11px;
    color: #475467;
    font-size: 12px;
    vertical-align: middle;
    background: #fff;
    border-bottom: 1px solid #edf0f4;
    transition: background 180ms,box-shadow 180ms
}

.jsn-family-grid-row:hover {
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 23px rgba(31,42,68,.07)
}

.jsn-family-row-number {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d96d00;
    font-weight: 900;
    background: #fff2e3;
    border-radius: 9px;
    transition: transform 180ms
}

.jsn-family-grid-row:hover .jsn-family-row-number {
    transform: rotate(-5deg) scale(1.09)
}

.jsn-family-person {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-align: right
}

.jsn-family-avatar {
    width: 39px;
    min-width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    background: linear-gradient(135deg,#f59e0b,#ef7d01);
    border-radius: 11px;
    box-shadow: 0 6px 14px rgba(239,125,1,.18);
    transition: transform 190ms
}

.jsn-family-grid-row:hover .jsn-family-avatar {
    transform: rotate(-5deg) scale(1.07)
}

.jsn-family-lastname {
    color: #475467;
    font-size: 12px;
    font-weight: 800
}

.jsn-family-gender, .jsn-family-relation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.jsn-family-gender {
    min-height: 31px;
    padding: 0 9px;
    font-weight: 900;
    border-radius: 8px
}

    .jsn-family-gender.is-female {
        color: #be185d;
        background: #fdf2f8;
        border: 1px solid #fbcfe8
    }

.jsn-family-relation {
    max-width: 230px;
    min-height: 32px;
    padding: 6px 9px;
    justify-content: center;
    color: #7c3aed;
    font-weight: 900;
    line-height: 1.7;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 8px
}

.jsn-family-birthday {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.jsn-family-birthday-icon {
    width: 35px;
    min-width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d97706;
    background: #fff7ed;
    border-radius: 10px;
    animation: 2.5s ease-in-out infinite jsnBirthdayIconPulse
}

@keyframes jsnBirthdayIconPulse {
    0%,100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.08)
    }
}

.jsn-family-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.jsn-family-action.edit:hover {
    color: #1d4ed8;
    box-shadow: 0 7px 15px rgba(37,99,235,.13)
}

.jsn-family-action.delete:hover {
    color: #991b1b;
    box-shadow: 0 7px 15px rgba(220,38,38,.13)
}

.jsn-family-empty-row td {
    padding: 50px 15px !important;
    color: #98a2b3;
    font-size: 12px;
    text-align: center;
    background: #fff
}

.jsn-family-action.is-deleting {
    opacity: .65;
    pointer-events: none;
    cursor: wait
}

.jsn-family-form-hero {
    position: relative;
    min-height: 128px;
    padding: 22px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 17px;
    background: linear-gradient(135deg,#fff 0,#fff9f2 58%,#ffead1 100%);
    border: 1px solid #f0dfcc;
    border-radius: 24px;
    box-shadow: 0 15px 44px rgba(31,42,68,.075);
    overflow: hidden;
    animation: 550ms both jsnFamilyFormHeroEnter
}

@keyframes jsnFamilyFormHeroEnter {
    from {
        opacity: 0;
        transform: translateY(-17px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-family-form-glow {
    position: absolute;
    top: -160px;
    left: -110px;
    width: 390px;
    height: 390px;
    background: radial-gradient(circle,rgba(239,125,1,.2),transparent 68%);
    animation: 5s ease-in-out infinite jsnFamilyFormGlow
}

@keyframes jsnFamilyFormGlow {
    0%,100% {
        opacity: .75;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.18)
    }
}

.jsn-family-form-hero::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -110px;
    width: 240px;
    height: 240px;
    border: 39px solid rgba(239,125,1,.045);
    border-radius: 50%;
    pointer-events: none
}

.jsn-family-form-hero-icon {
    position: relative;
    z-index: 1;
    width: 68px;
    min-width: 68px;
    height: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    background: linear-gradient(135deg,#ff9d34,#ef7d01);
    border-radius: 20px;
    box-shadow: 0 15px 32px rgba(239,125,1,.3);
    animation: 3s ease-in-out infinite jsnFamilyFormGiftFloat
}

@keyframes jsnFamilyFormGiftFloat {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-6px) rotate(-4deg)
    }
}

.jsn-family-form-auto {
    position: relative;
    z-index: 1;
    min-width: 165px;
    padding: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #7c3aed;
    background: rgba(245,243,255,.94);
    border: 1px solid #ddd6fe;
    border-radius: 14px;
    animation: 3s ease-in-out infinite jsnFamilyFormAutoPulse
}

@keyframes jsnFamilyFormAutoPulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(124,58,237,0)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(124,58,237,.08)
    }
}

.jsn-family-form-auto > span {
    width: 39px;
    min-width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg,#8b5cf6,#7c3aed);
    border-radius: 11px
}

.jsn-family-form-card {
    width: min(930px,100%);
    margin: 14px auto 0;
    padding: 20px;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 22px;
    box-shadow: 0 12px 37px rgba(31,42,68,.065);
    animation: .5s both jsnFamilyFormCardEnter
}

@keyframes jsnFamilyFormCardEnter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.99)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.jsn-family-form-required-note {
    min-height: 31px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b45309;
    font-size: 12px;
    font-weight: 900;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 9px
}

.jsn-family-form-validation-summary {
    margin-bottom: 15px;
    padding: 12px 14px;
    color: #b91c1c;
    font-size: 12px;
    line-height: 1.9;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    animation: .3s both jsnFamilyValidationEnter
}

@keyframes jsnFamilyValidationEnter {
    from {
        opacity: 0;
        transform: translateY(-7px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.jsn-family-form-validation-summary ul {
    margin: 7px 18px 0 0;
    padding: 0
}

.jsn-family-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 15px
}

.jsn-family-form-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px
}

.jsn-family-form-input-wrap:focus-within, .jsn-family-form-select-wrap:focus-within {
    background: #fff;
    border-color: #f3a04d;
    box-shadow: 0 0 0 3px rgba(239,125,1,.1);
    transform: translateY(-2px)
}

.jsn-family-form-control {
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    padding: 0 12px;
    color: #344054;
    font-family: inherit;
    font-size: 12px;
    background: 0 0;
    border: 0 !important;
    outline: 0
}

.jsn-family-form-input-wrap .jsn-family-form-control {
    padding-left: 43px
}

.jsn-family-form-field-icon {
    position: absolute;
    left: 0;
    width: 43px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    pointer-events: none;
    transition: color 180ms,transform 180ms
}

.jsn-family-form-input-wrap:focus-within .jsn-family-form-field-icon {
    color: #ef7d01;
    transform: scale(1.08)
}

.jsn-family-form-input-wrap.birthday .jsn-family-form-control {
    direction: ltr;
    text-align: right
}

.jsn-family-form-select-wrap .jsn-family-form-control {
    padding-left: 35px;
    appearance: none;
    cursor: pointer
}

.jsn-family-gender-preview {
    min-height: 29px;
    padding: 0 8px;
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 900;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: color 180ms,background 180ms,border-color 180ms
}

    .jsn-family-gender-preview.is-female {
        color: #be185d;
        background: #fdf2f8;
        border-color: #fbcfe8
    }

.jsn-family-relation-preview {
    min-height: 62px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #667085;
    background: linear-gradient(135deg,#f8fafc,#fff);
    border: 1px solid #e4e9ef;
    border-radius: 12px;
    transition: border-color 180ms,transform 180ms,box-shadow 180ms
}

    .jsn-family-relation-preview.is-selected {
        border-color: #ddd6fe;
        transform: translateY(-1px);
        box-shadow: 0 7px 17px rgba(124,58,237,.07)
    }

    .jsn-family-relation-preview > span {
        width: 38px;
        min-width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #7c3aed;
        background: #f5f3ff;
        border-radius: 10px
    }

.jsn-family-birthday-note {
    min-height: 67px;
    padding: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b45309;
    background: linear-gradient(135deg,#fff7ed,#fffdf9);
    border: 1px solid #fed7aa;
    border-radius: 13px
}

    .jsn-family-birthday-note > span {
        width: 41px;
        min-width: 41px;
        height: 41px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: linear-gradient(135deg,#f59e0b,#ef7d01);
        border-radius: 11px;
        animation: 2.4s ease-in-out infinite jsnFamilyBirthdayPulse
    }

@keyframes jsnFamilyBirthdayPulse {
    0%,100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.08)
    }
}

.jsn-family-birthday-note small {
    color: #a16207;
    font-size: 12px;
    line-height: 1.8
}

.jsn-family-form-submit-area {
    margin-top: 19px;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px dashed #dfe4eb
}

.jsn-family-form-submit-note > span {
    width: 39px;
    min-width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #15803d;
    background: #ecfdf3;
    border-radius: 10px
}

.jsn-family-form-submit-button {
    min-width: 205px;
    min-height: 47px;
    padding: 0 17px;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    background: linear-gradient(135deg,#f68c17,#e66d00);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 11px 24px rgba(239,125,1,.25);
    transition: transform 180ms,box-shadow 180ms,opacity 180ms
}

.jnsn-navigation, .jsn-sidebar-body {
    min-height: 380px;
    scroll-behavior: smooth
}

.jsn-family-form-submit-button.is-loading {
    position: relative;
    padding-left: 45px;
    opacity: .75;
    cursor: wait
}

    .jsn-family-form-submit-button.is-loading::after {
        content: "";
        position: absolute;
        left: 16px;
        top: 50%;
        width: 15px;
        height: 15px;
        margin-top: -8px;
        border: 2px solid rgba(255,255,255,.45);
        border-top-color: #fff;
        border-radius: 50%;
        animation: .7s linear infinite jsnFamilySubmitSpin
    }

@keyframes jsnFamilySubmitSpin {
    to {
        transform: rotate(360deg)
    }
}

@media (max-width:850px) {
    .jsn-invoice-summary, .jsn-need-form-hero, .jsn-product-filter-grid, .jsn-request-information-grid {
        grid-template-columns: 1fr
    }

    .jsn-need-form-hero {
        text-align: center
    }

    .jsn-family-form-hero-icon, .jsn-family-hero-icon, .jsn-need-form-hero-icon {
        margin: 0 auto
    }

    .jsn-form-field.is-wide {
        grid-column: span 1
    }

    .jsn-invoice-summary {
        position: fixed
    }

    .jsn-invoice-summary-items {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .jsn-request-submit-area {
        align-items: stretch;
        flex-direction: column
    }

    .jsn-request-submit-button {
        width: 100%
    }

    .jsn-family-form-hero, .jsn-family-hero {
        grid-template-columns: 1fr;
        text-align: center
    }

    .jsn-family-auto-send, .jsn-family-form-auto {
        justify-content: center
    }
}

@media (max-width:650px) {
    .jsn-password-page {
        padding: 10px
    }

    .jsn-password-card {
        padding: 16px;
        border-radius: 17px
    }

    .jsn-family-form-submit-area, .jsn-letter-submit-area, .jsn-password-footer {
        align-items: stretch;
        flex-direction: column
    }

    .jsn-family-form-submit-button, .jsn-letter-submit-button, .jsn-password-submit {
        width: 100%
    }

    .jsn-family-form-page, .jsn-family-page, .jsn-inbox-page, .jsn-letter-page {
        padding: 9px
    }

    .jsn-letter-card {
        padding: 13px;
        border-radius: 17px
    }

    .jsn-family-form-header, .jsn-family-section-header, .jsn-letter-section-header {
        align-items: flex-start;
        flex-direction: column
    }

    .jsn-family-form-grid, .jsn-inbox-hero, .jsn-inbox-row {
        grid-template-columns: 1fr
    }

    .jsn-inbox-hero {
        text-align: center
    }

    .jsn-inbox-hero-icon {
        margin: 0 auto
    }

    .jsn-inbox-live-state {
        justify-content: center
    }

    .status-cell {
        min-height: 42px;
        justify-content: flex-start;
        border-top: 1px solid #edf0f4;
        border-right: 0
    }

    .jsn-inbox-filter {
        white-space: nowrap
    }

    .jsn-inbox-letter-title {
        font-size: 12px;
    }

    .jsn-family-list-card {
        padding: 12px;
        border-radius: 17px
    }

    .jsn-family-table-responsive {
        overflow: visible;
        border: 0
    }

    .jsn-family-grid {
        min-width: 0
    }

    .jsn-family-grid-header {
        display: none
    }

    .jsn-family-grid, .jsn-family-grid tbody, .jsn-family-grid td, .jsn-family-grid tr {
        width: 100%;
        display: block
    }

    .jsn-family-grid-row {
        margin-bottom: 12px;
        background: #fff;
        border: 1px solid #e4e9ef;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 7px 18px rgba(31,42,68,.06)
    }

        .jsn-family-grid-row td {
            position: relative;
            min-height: 51px;
            padding: 11px 115px 11px 11px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            text-align: right !important;
            border-bottom: 1px solid #edf0f4
        }

            .jsn-family-grid-row td::before {
                position: absolute;
                right: 12px;
                width: 95px;
                color: #98a2b3;
                font-size: 12px;
                font-weight: 900
            }

            .jsn-family-grid-row td:first-child::before {
                content: "ردیف"
            }

            .jsn-family-grid-row td:nth-child(2)::before {
                content: "نام"
            }

            .jsn-family-grid-row td:nth-child(3)::before {
                content: "نام خانوادگی"
            }

            .jsn-family-grid-row td:nth-child(4)::before {
                content: "جنسیت"
            }

            .jsn-family-grid-row td:nth-child(5)::before {
                content: "نوع وابستگی"
            }

            .jsn-family-grid-row td:nth-child(6)::before {
                content: "تاریخ تولد"
            }

            .jsn-family-grid-row td:nth-child(7)::before {
                content: "عملیات"
            }

    .jsn-family-actions, .jsn-family-birthday, .jsn-family-person {
        justify-content: flex-start
    }

    .jsn-family-relation {
        max-width: 100%
    }

    .jsn-family-form-card {
        padding: 14px;
        border-radius: 17px
    }

    .jsn-family-form-field.is-wide {
        grid-column: span 1
    }
}

.snub-menu a.jsn-current-menu {
    position: relative;
    color: #fff !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg,#ff9b31,#ef7d01) !important;
    border-radius: 11px;
    box-shadow: 0 9px 21px rgba(239,125,1,.27);
    transform: translateX(-3px);
    transition: color 180ms,background 180ms,transform 180ms,box-shadow 180ms
}

    .snub-menu a.jsn-current-menu::before {
        content: "";
        position: absolute;
        top: 50%;
        right: -5px;
        width: 4px;
        height: 24px;
        background: #ef7d01;
        border-radius: 10px;
        transform: translateY(-50%);
        box-shadow: 0 0 12px rgba(239,125,1,.55)
    }

    .snub-menu a.jsn-current-menu::after, .snub-menu li.is-active::after {
        position: absolute;
        top: 50%;
        background: #fff;
        transform: translateY(-50%)
    }

    .snub-menu a.jsn-current-menu::after {
        content: "\f00c";
        left: 11px;
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ef7d01;
        font-family: "Font Awesome 5 Free";
        font-size: 12px;
        font-weight: 900;
        border-radius: 7px
    }

.snub-menu a.jsn-current-menu-attention {
    animation: 550ms jsnCurrentMenuAttention
}

@keyframes jsnCurrentMenuAttention {
    0%,100% {
        transform: translateX(-3px) scale(1);
        box-shadow: 0 9px 21px rgba(239,125,1,.27)
    }

    50% {
        transform: translateX(-6px) scale(1.025);
        box-shadow: 0 13px 30px rgba(239,125,1,.44)
    }
}

.snub-menu li.is-active::after {
    content: "";
    right: -1px;
    width: 8px;
    height: 8px;
    border: 2px solid #ef7d01;
    border-radius: 50%;
    animation: 1.8s ease-in-out infinite jsnCurrentMenuDot
}

@keyframes jsnCurrentMenuDot {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(239,125,1,0)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(239,125,1,.13)
    }
}

.jsn-sidebar-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-padding-block: 100px
}

    .jsn-sidebar-body::-webkit-scrollbar {
        width: 5px
    }

    .jsn-sidebar-body::-webkit-scrollbar-thumb {
        background: rgba(148,163,184,.45);
        border-radius: 20px
    }

    .jsn-sidebar-body::-webkit-scrollbar-track {
        background: 0 0
    }

.jnsn-navigation {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-padding-top: 100px;
    scroll-padding-bottom: 130px;
    overscroll-behavior: contain
}

    .jnsn-navigation::-webkit-scrollbar {
        width: 5px
    }

    .jnsn-navigation::-webkit-scrollbar-track {
        background: 0 0
    }

    .jnsn-navigation::-webkit-scrollbar-thumb {
        background: rgba(148,163,184,.45);
        border-radius: 20px
    }

        .jnsn-navigation::-webkit-scrollbar-thumb:hover {
            background: rgba(239,125,1,.55)
        }

input, select Specificity: (0,0,1), textarea {
    background-color: #f7f7f7 !important;
    margin-bottom: 0 !important
}

input, select, textarea {
    background-color: #f7f7f7 !important;
    margin-bottom: 0 !important
}


/* =========================================================
   صفحه گردش حساب معین
========================================================= */

.jsn-ledger-page,
.jsn-ledger-page *,
.jsn-ledger-page *::before,
.jsn-ledger-page *::after {
    box-sizing: border-box;
}

.jsn-ledger-page {
    width: 100%;
    padding: 18px;
    direction: rtl;
    color: #344054;
}

/* =========================================================
   هدر
========================================================= */

.jsn-ledger-hero {
    position: relative;
    min-height: 130px;
    padding: 23px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 17px;
    background: linear-gradient( 135deg, #ffffff 0%, #fffaf4 52%, #ffead2 100% );
    border: 1px solid #f1dfcb;
    border-radius: 25px;
    box-shadow: 0 17px 48px rgba(31, 42, 68, 0.075);
    overflow: hidden;
    animation: jsnLedgerHeroEnter 600ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes jsnLedgerHeroEnter {

    from {
        opacity: 0;
        transform: translateY(-18px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.jsn-ledger-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

    .jsn-ledger-orb.orb-one {
        top: -145px;
        left: -100px;
        width: 360px;
        height: 360px;
        background: radial-gradient( circle, rgba(239, 125, 1, .18), transparent 67% );
        animation: jsnLedgerOrbOne 6s ease-in-out infinite;
    }

    .jsn-ledger-orb.orb-two {
        right: 30%;
        bottom: -150px;
        width: 280px;
        height: 280px;
        background: radial-gradient( circle, rgba(37, 99, 235, .075), transparent 68% );
        animation: jsnLedgerOrbTwo 7s ease-in-out infinite;
    }

@keyframes jsnLedgerOrbOne {

    0%, 100% {
        opacity: .75;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.19);
    }
}

@keyframes jsnLedgerOrbTwo {

    0%, 100% {
        transform: translateX(0) translateY(0);
    }

    50% {
        transform: translateX(20px) translateY(-10px);
    }
}

.jsn-ledger-hero-icon {
    position: relative;
    z-index: 2;
    width: 67px;
    height: 67px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 24px;
    background: linear-gradient( 135deg, #ff9f3b, #ef7d01 );
    border-radius: 20px;
    box-shadow: 0 16px 33px rgba(239, 125, 1, .29);
    animation: jsnLedgerIconFloat 3s ease-in-out infinite;
}

    .jsn-ledger-hero-icon::before {
        content: "";
        position: absolute;
        inset: -6px;
        border: 1px solid rgba(239, 125, 1, .23);
        border-radius: 24px;
        animation: jsnLedgerIconRing 2.5s ease-in-out infinite;
    }

@keyframes jsnLedgerIconFloat {

    0%, 100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-6px) rotate(-3deg);
    }
}

@keyframes jsnLedgerIconRing {

    0%, 100% {
        opacity: .3;
        transform: scale(.95);
    }

    50% {
        opacity: .85;
        transform: scale(1.05);
    }
}

.jsn-ledger-hero-content {
    position: relative;
    z-index: 2;
}

.jsn-ledger-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
    padding: 5px 9px;
    color: #d96d00;
    font-size: 12px;
    font-weight: 900;
    background: #fff0df;
    border-radius: 8px;
}

.jsn-ledger-hero-content h2 {
    margin: 0 0 7px;
    color: #1f2937;
    font-size: 19px;
    font-weight: 950;
}

.jsn-ledger-hero-content p {
    margin: 0;
    color: #7b8798;
    font-size: 12px;
    line-height: 1.9;
}

.jsn-ledger-security {
    position: relative;
    z-index: 2;
    min-width: 175px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #15803d;
    background: rgba(236, 253, 243, .9);
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    backdrop-filter: blur(6px);
    animation: jsnLedgerSecurityPulse 3s ease-in-out infinite;
}

@keyframes jsnLedgerSecurityPulse {

    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, .07);
    }
}

.jsn-ledger-security-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    border-radius: 10px;
}

.jsn-ledger-security > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.jsn-ledger-security small {
    font-size: 12px;
}

.jsn-ledger-security strong {
    font-size: 12px;
}

/* =========================================================
   نوار توضیحات
========================================================= */

.jsn-ledger-toolbar {
    margin-top: 14px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: #ffffff;
    border: 1px solid #e7ebf1;
    border-radius: 17px;
    box-shadow: 0 9px 26px rgba(31, 42, 68, .05);
    animation: jsnLedgerToolbarEnter 500ms 80ms ease both;
}

@keyframes jsnLedgerToolbarEnter {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jsn-ledger-toolbar-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

    .jsn-ledger-toolbar-title > span {
        width: 39px;
        height: 39px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #2563eb;
        background: #eff6ff;
        border-radius: 11px;
    }

    .jsn-ledger-toolbar-title > div {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .jsn-ledger-toolbar-title strong {
        color: #344054;
        font-size: 12px;
    }

    .jsn-ledger-toolbar-title small {
        color: #98a2b3;
        font-size: 12px;
    }

.jsn-ledger-legends {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.jsn-ledger-legend {
    min-height: 31px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 900;
    border-radius: 9px;
}

    .jsn-ledger-legend.credit {
        color: #15803d;
        background: #ecfdf3;
        border: 1px solid #bbf7d0;
    }

    .jsn-ledger-legend.debit {
        color: #b91c1c;
        background: #fef2f2;
        border: 1px solid #fecaca;
    }

    .jsn-ledger-legend.verified {
        color: #2563eb;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
    }

/* =========================================================
   کارت جدول
========================================================= */

.jsn-ledger-table-card {
    position: relative;
    margin-top: 14px;
    padding: 13px;
    background: #ffffff;
    border: 1px solid #e6ebf1;
    border-radius: 23px;
    box-shadow: 0 15px 43px rgba(31, 42, 68, .065);
    overflow: hidden;
    animation: jsnLedgerTableEnter 550ms 140ms ease both;
}

@keyframes jsnLedgerTableEnter {

    from {
        opacity: 0;
        transform: translateY(17px) scale(.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.jsn-ledger-table-glow {
    position: absolute;
    top: -200px;
    right: 15%;
    width: 430px;
    height: 300px;
    background: radial-gradient( circle, rgba(239, 125, 1, .07), transparent 68% );
    pointer-events: none;
}

.jsn-ledger-table-responsive {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e4e9ef;
    border-radius: 17px;
    scrollbar-width: thin;
    scrollbar-color: #cbd3dd transparent;
}

    .jsn-ledger-table-responsive::-webkit-scrollbar {
        height: 7px;
    }

    .jsn-ledger-table-responsive::-webkit-scrollbar-track {
        background: transparent;
    }

    .jsn-ledger-table-responsive::-webkit-scrollbar-thumb {
        background: #cbd3dd;
        border-radius: 20px;
    }

/* =========================================================
   GridView
========================================================= */

.jsn-ledger-grid {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
    font-family: inherit;
    color: #344054;
}

/* هدر */
.jsn-ledger-grid-header th {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 15px 11px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    background: linear-gradient( 135deg, #253247, #3f4e64 );
    border-bottom: 1px solid #1e293b;
    white-space: nowrap;
}

    .jsn-ledger-grid-header th:first-child {
        border-top-right-radius: 15px;
    }

    .jsn-ledger-grid-header th:last-child {
        border-top-left-radius: 15px;
    }

/* ردیف */
.jsn-ledger-grid-row {
    position: relative;
    opacity: 0;
    transform: translateY(10px);
    animation: jsnLedgerRowEnter 400ms ease forwards;
}

@keyframes jsnLedgerRowEnter {

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jsn-ledger-grid-row td {
    position: relative;
    padding: 13px 10px;
    color: #475467;
    font-size: 12px;
    vertical-align: middle;
    background: #ffffff;
    border-bottom: 1px solid #edf0f4;
    transition: background 200ms ease, box-shadow 200ms ease;
}

.jsn-ledger-grid-alt td {
    background: #fcfdfe;
}

.jsn-ledger-grid-row:hover td {
    background: #fff9f3;
}

    .jsn-ledger-grid-row:hover td:first-child {
        box-shadow: inset -4px 0 0 #ef7d01;
    }

.jsn-ledger-selected-row td {
    background: #fff3e4 !important;
}

/* شماره ردیف */
.jsn-ledger-row-number {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d96d00;
    font-weight: 950;
    background: linear-gradient( 135deg, #fff5e9, #ffead1 );
    border: 1px solid #ffdfba;
    border-radius: 10px;
    transition: transform 190ms ease, box-shadow 190ms ease;
}

.jsn-ledger-grid-row:hover
.jsn-ledger-row-number {
    transform: rotate(-5deg) scale(1.09);
    box-shadow: 0 7px 14px rgba(239, 125, 1, .13);
}

/* طرف حساب */
.jsn-ledger-account {
    display: flex;
    align-items: center;
    gap: 9px;
}

.jsn-ledger-account-icon {
    width: 39px;
    min-width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    background: linear-gradient( 135deg, #eff6ff, #dbeafe );
    border: 1px solid #bfdbfe;
    border-radius: 11px;
    transition: transform 190ms ease;
}

.jsn-ledger-grid-row:hover
.jsn-ledger-account-icon {
    transform: rotate(-6deg) scale(1.07);
}

.jsn-ledger-account-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.jsn-ledger-account-name {
    color: #344054;
    font-size: 12px;
    font-weight: 900;
    direction: ltr;
    text-align: right;
}

/* مبلغ */
.jsn-ledger-amount {
    min-width: 125px;
    min-height: 43px;
    padding: 6px 9px;
    display: inline-grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 6px;
    direction: ltr;
    border-radius: 11px;
    transition: transform 190ms ease, box-shadow 190ms ease;
}

    .jsn-ledger-amount > i {
        grid-row: span 2;
        width: 27px;
        height: 27px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }

    .jsn-ledger-amount strong {
        font-size: 12px;
        font-weight: 950;
    }

    .jsn-ledger-amount small {
        font-size: 12px;
        opacity: .66;
    }

.jsn-ledger-credit {
    color: #15803d;
    background: linear-gradient( 135deg, #ecfdf3, #f5fff9 );
    border: 1px solid #bbf7d0;
}

    .jsn-ledger-credit > i {
        background: #dcfce7;
    }

.jsn-ledger-debit {
    color: #b91c1c;
    background: linear-gradient( 135deg, #fef2f2, #fff8f8 );
    border: 1px solid #fecaca;
}

    .jsn-ledger-debit > i {
        background: #fee2e2;
    }

.jsn-ledger-grid-row:hover
.jsn-ledger-amount:not(.is-zero) {
    transform: translateY(-2px);
}

.jsn-ledger-grid-row:hover
.jsn-ledger-credit:not(.is-zero) {
    box-shadow: 0 8px 16px rgba(21, 128, 61, .11);
}

.jsn-ledger-grid-row:hover
.jsn-ledger-debit:not(.is-zero) {
    box-shadow: 0 8px 16px rgba(185, 28, 28, .10);
}

.jsn-ledger-amount.is-zero {
    min-width: 80px;
    color: #98a2b3;
    background: #f8fafc;
    border-color: #e5e7eb;
    opacity: .7;
}

    .jsn-ledger-amount.is-zero > i,
    .jsn-ledger-amount.is-zero small {
        display: none;
    }

/* نوع سند */
.jsn-ledger-document-type {
    min-height: 34px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7c3aed;
    font-size: 12px;
    font-weight: 900;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 9px;
    white-space: nowrap;
    transition: transform 180ms ease;
}

.jsn-ledger-grid-row:hover
.jsn-ledger-document-type {
    transform: translateY(-2px);
}

.jsn-ledger-document-type.is-payment {
    color: #15803d;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

.jsn-ledger-document-type.is-receipt {
    color: #2563eb;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.jsn-ledger-document-type.is-correction {
    color: #b45309;
    background: #fff7ed;
    border-color: #fed7aa;
}

.jsn-ledger-document-type.is-cancelled {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* شرح */
.jsn-ledger-description {
    min-width: 230px;
    max-width: 390px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.jsn-ledger-description-icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 9px;
}

.jsn-ledger-description > div {
    min-width: 0;
}

.jsn-ledger-description-text {
    display: block;
    color: #475467;
    font-size: 12px;
    line-height: 1.9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* تاریخ */
.jsn-ledger-date {
    min-height: 34px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    direction: ltr;
    color: #475467;
    font-size: 12px;
    font-weight: 800;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    white-space: nowrap;
}

    .jsn-ledger-date i {
        color: #ef7d01;
    }

/* لاگ */
.jsn-ledger-log {
    min-height: 34px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475467;
    font-size: 12px;
    font-weight: 900;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    white-space: nowrap;
}

    .jsn-ledger-log.is-verified {
        color: #15803d;
        background: #ecfdf3;
        border-color: #bbf7d0;
    }

    .jsn-ledger-log.is-pending {
        color: #b45309;
        background: #fff7ed;
        border-color: #fed7aa;
    }

    .jsn-ledger-log.is-error {
        color: #b91c1c;
        background: #fef2f2;
        border-color: #fecaca;
    }

    .jsn-ledger-log.is-verified i {
        animation: jsnLedgerVerifiedPulse 2s infinite;
    }

@keyframes jsnLedgerVerifiedPulse {

    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}

/* فوتر */
.jsn-ledger-grid-footer td {
    padding: 12px;
    color: #667085;
    font-size: 12px;
    background: linear-gradient( 135deg, #f8fafc, #ffffff );
    border-top: 1px solid #e5e9ef;
}

/* صفحه‌بندی */
.jsn-ledger-grid-pager td {
    padding: 15px !important;
    background: #ffffff !important;
    border-top: 1px solid #e5e9ef;
}

.jsn-ledger-grid-pager table {
    margin: 0 auto;
    border-spacing: 5px;
}

    .jsn-ledger-grid-pager table td {
        padding: 0 !important;
        border: 0 !important;
    }

.jsn-ledger-grid-pager a,
.jsn-ledger-grid-pager span {
    min-width: 35px;
    height: 35px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475467;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

    .jsn-ledger-grid-pager a:hover {
        color: #ef7d01;
        background: #fff7ed;
        border-color: #fed7aa;
        transform: translateY(-2px);
        box-shadow: 0 7px 13px rgba(239, 125, 1, .12);
    }

.jsn-ledger-grid-pager span {
    color: #ffffff;
    background: linear-gradient( 135deg, #f68c17, #e66d00 );
    border-color: #ef7d01;
    box-shadow: 0 8px 16px rgba(239, 125, 1, .23);
}

/* جدول خالی */
.jsn-ledger-empty-row td {
    padding: 60px 20px !important;
    color: transparent;
    text-align: center;
    background: #ffffff;
}

    .jsn-ledger-empty-row td::before {
        content: "\f1ea";
        width: 65px;
        height: 65px;
        margin: 0 auto 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ef7d01;
        font-family: "Font Awesome 5 Free";
        font-size: 23px;
        font-weight: 900;
        background: #fff2e3;
        border-radius: 19px;
        animation: jsnLedgerEmptyFloat 3s ease-in-out infinite;
    }

    .jsn-ledger-empty-row td::after {
        content: "اطلاعاتی جهت نمایش وجود ندارد";
        display: block;
        color: #98a2b3;
        font-size: 12px;
        font-weight: 800;
    }

@keyframes jsnLedgerEmptyFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.jsn-ledger-mobile-label,
.jsn-ledger-mobile-field-title {
    display: none;
}

/* =========================================================
   موبایل
========================================================= */

@media (max-width: 900px) {

    .jsn-ledger-page {
        padding: 9px;
    }

    .jsn-ledger-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .jsn-ledger-hero-icon {
        margin: 0 auto;
    }

    .jsn-ledger-security {
        justify-content: center;
    }

    .jsn-ledger-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .jsn-ledger-table-card {
        padding: 8px;
    }

    .jsn-ledger-table-responsive {
        overflow: visible;
        border: 0;
    }

    .jsn-ledger-grid {
        min-width: 0;
        border-collapse: separate;
    }

        .jsn-ledger-grid,
        .jsn-ledger-grid tbody,
        .jsn-ledger-grid tr,
        .jsn-ledger-grid td {
            width: 100%;
            display: block;
        }

    .jsn-ledger-grid-header {
        display: none;
    }

    .jsn-ledger-grid-row {
        margin-bottom: 13px;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        padding: 12px;
        background: #ffffff;
        border: 1px solid #e5e9ef;
        border-radius: 17px;
        box-shadow: 0 9px 23px rgba(31, 42, 68, .06);
    }

        .jsn-ledger-grid-row td {
            padding: 0;
            border: 0;
            background: transparent !important;
        }

            .jsn-ledger-grid-row td:nth-child(1) {
                position: absolute;
                left: 19px;
                margin-top: 3px;
                width: auto;
            }

            .jsn-ledger-grid-row td:nth-child(2),
            .jsn-ledger-grid-row td:nth-child(6) {
                grid-column: span 2;
            }

    .jsn-ledger-account {
        min-height: 57px;
        padding: 8px;
        background: #f8fafc;
        border-radius: 12px;
    }

    .jsn-ledger-account-content {
        padding-left: 45px;
    }

    .jsn-ledger-mobile-label,
    .jsn-ledger-mobile-field-title {
        display: block;
        margin-bottom: 5px;
        color: #98a2b3;
        font-size: 12px;
        font-weight: 800;
    }

    .jsn-ledger-amount,
    .jsn-ledger-document-type,
    .jsn-ledger-date,
    .jsn-ledger-log {
        width: 100%;
        min-width: 0;
    }

    .jsn-ledger-document-type,
    .jsn-ledger-date,
    .jsn-ledger-log {
        min-height: 43px;
        justify-content: center;
    }

    .jsn-ledger-description {
        width: 100%;
        max-width: none;
        padding: 9px;
        background: #f8fafc;
        border-radius: 12px;
    }

    .jsn-ledger-description-text {
        white-space: normal;
    }

    .jsn-ledger-grid-pager {
        display: block !important;
        grid-column: span 2;
    }

        .jsn-ledger-grid-pager td {
            display: block;
        }
}

@media (max-width: 540px) {

    .jsn-ledger-grid-row {
        grid-template-columns: 1fr;
    }

        .jsn-ledger-grid-row td:nth-child(2),
        .jsn-ledger-grid-row td:nth-child(6) {
            grid-column: span 1;
        }

    .jsn-ledger-legends {
        width: 100%;
    }

    .jsn-ledger-legend {
        flex: 1;
        justify-content: center;
    }
}

/* ==========================================================
   تاریخچه رسید و حواله انبار
========================================================== */

.jsn-stock-history,
.jsn-stock-history *,
.jsn-stock-history *::before,
.jsn-stock-history *::after {
    box-sizing: border-box;
}

.jsn-stock-history {
    width: 100%;
    padding: 18px;
    direction: rtl;
    color: #344054;
}

/* ==========================================================
   هدر اصلی
========================================================== */

.jsn-stock-hero {
    position: relative;
    min-height: 132px;
    padding: 23px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 17px;
    background: linear-gradient( 135deg, #ffffff 0%, #fff9f1 52%, #ffead3 100% );
    border: 1px solid #f1deca;
    border-radius: 25px;
    box-shadow: 0 18px 49px rgba(31, 42, 68, .075);
    overflow: hidden;
    animation: jsnStockHeroEnter 600ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes jsnStockHeroEnter {
    from {
        opacity: 0;
        transform: translateY(-18px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.jsn-stock-hero-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

    .jsn-stock-hero-shape.shape-one {
        width: 360px;
        height: 360px;
        top: -170px;
        left: -100px;
        background: radial-gradient( circle, rgba(239, 125, 1, .18), transparent 68% );
        animation: jsnStockOrbOne 6s ease-in-out infinite;
    }

    .jsn-stock-hero-shape.shape-two {
        width: 280px;
        height: 280px;
        right: 35%;
        bottom: -180px;
        background: radial-gradient( circle, rgba(124, 58, 237, .08), transparent 68% );
        animation: jsnStockOrbTwo 7s ease-in-out infinite;
    }

@keyframes jsnStockOrbOne {
    0%, 100% {
        opacity: .7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes jsnStockOrbTwo {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-20px, -15px);
    }
}

.jsn-stock-hero-icon {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 25px;
    background: linear-gradient( 135deg, #ff9e39, #ef7d01 );
    border-radius: 20px;
    box-shadow: 0 16px 34px rgba(239, 125, 1, .3);
    animation: jsnStockIconFloat 3s ease-in-out infinite;
}

    .jsn-stock-hero-icon::before {
        content: "";
        position: absolute;
        inset: -6px;
        border: 1px solid rgba(239, 125, 1, .24);
        border-radius: 25px;
        animation: jsnStockIconRing 2.6s ease-in-out infinite;
    }

@keyframes jsnStockIconFloat {
    0%, 100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-6px) rotate(-3deg);
    }
}

@keyframes jsnStockIconRing {
    0%, 100% {
        opacity: .3;
        transform: scale(.95);
    }

    50% {
        opacity: .85;
        transform: scale(1.05);
    }
}

.jsn-stock-hero-content {
    position: relative;
    z-index: 2;
}

.jsn-stock-eyebrow {
    display: inline-flex;
    margin-bottom: 6px;
    padding: 5px 9px;
    color: #d96d00;
    font-size: 12px;
    font-weight: 900;
    background: #fff0df;
    border-radius: 8px;
}

.jsn-stock-hero-content h2 {
    margin: 0 0 7px;
    color: #1f2937;
    font-size: 19px;
    font-weight: 950;
}

.jsn-stock-hero-content p {
    margin: 0;
    color: #7b8798;
    font-size: 12px;
    line-height: 1.9;
}

.jsn-stock-hero-status {
    position: relative;
    z-index: 2;
    min-width: 155px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #15803d;
    background: rgba(236, 253, 243, .92);
    border: 1px solid #bbf7d0;
    border-radius: 14px;
}

.jsn-stock-live-dot {
    width: 11px;
    height: 11px;
    background: #22c55e;
    border-radius: 50%;
    animation: jsnStockLivePulse 1.6s infinite;
}

@keyframes jsnStockLivePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, .4);
    }

    70% {
        box-shadow: 0 0 0 9px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.jsn-stock-hero-status > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.jsn-stock-hero-status small {
    font-size: 12px;
}

.jsn-stock-hero-status strong {
    font-size: 12px;
}

/* ==========================================================
   نوار وضعیت
========================================================== */

.jsn-stock-toolbar {
    margin-top: 14px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #e7ebf1;
    border-radius: 17px;
    box-shadow: 0 9px 26px rgba(31, 42, 68, .05);
    animation: jsnStockToolbarEnter 500ms 80ms ease both;
}

@keyframes jsnStockToolbarEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jsn-stock-toolbar-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

    .jsn-stock-toolbar-title > span {
        width: 39px;
        height: 39px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #2563eb;
        background: #eff6ff;
        border-radius: 11px;
    }

    .jsn-stock-toolbar-title > div {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .jsn-stock-toolbar-title strong {
        color: #344054;
        font-size: 12px;
    }

    .jsn-stock-toolbar-title small {
        color: #98a2b3;
        font-size: 12px;
    }

.jsn-stock-legends {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.jsn-stock-legend {
    min-height: 31px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 900;
    border-radius: 9px;
}

    .jsn-stock-legend.approved {
        color: #15803d;
        background: #ecfdf3;
        border: 1px solid #bbf7d0;
    }

    .jsn-stock-legend.pending {
        color: #b45309;
        background: #fff7ed;
        border: 1px solid #fed7aa;
    }

    .jsn-stock-legend.rejected {
        color: #b91c1c;
        background: #fef2f2;
        border: 1px solid #fecaca;
    }

/* ==========================================================
   بخش رسید و حواله
========================================================== */

.jsn-stock-section {
    margin-top: 14px;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #e6ebf1;
    border-radius: 23px;
    box-shadow: 0 15px 43px rgba(31, 42, 68, .065);
    animation: jsnStockSectionEnter 550ms ease both;
}

.jsn-transfer-section {
    animation-delay: 100ms;
}

@keyframes jsnStockSectionEnter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.jsn-stock-section-header {
    margin-bottom: 13px;
    padding: 3px 3px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf0f4;
}

.jsn-stock-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jsn-stock-section-icon {
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 12px;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.jsn-stock-section-header:hover
.jsn-stock-section-icon {
    transform: rotate(-7deg) scale(1.08);
}

.jsn-stock-section-icon.receipt {
    color: #15803d;
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
}

.jsn-stock-section-icon.transfer {
    color: #7c3aed;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
}

.jsn-stock-section-title h3 {
    margin: 0 0 3px;
    color: #1f2937;
    font-size: 13px;
    font-weight: 950;
}

.jsn-stock-section-title p {
    margin: 0;
    color: #98a2b3;
    font-size: 12px;
}

.jsn-stock-type-badge {
    min-height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 900;
    border-radius: 9px;
}

    .jsn-stock-type-badge.receipt {
        color: #15803d;
        background: #ecfdf3;
        border: 1px solid #bbf7d0;
    }

    .jsn-stock-type-badge.transfer {
        color: #7c3aed;
        background: #f5f3ff;
        border: 1px solid #ddd6fe;
    }

/* ==========================================================
   GridView
========================================================== */

.jsn-stock-grid-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e4e9ef;
    border-radius: 17px;
    scrollbar-width: thin;
    scrollbar-color: #cbd3dd transparent;
}

    .jsn-stock-grid-wrap::-webkit-scrollbar {
        height: 7px;
    }

    .jsn-stock-grid-wrap::-webkit-scrollbar-thumb {
        background: #cbd3dd;
        border-radius: 20px;
    }

.jsn-stock-grid {
    width: 100%;
    min-width: 1250px;
    border-collapse: separate;
    border-spacing: 0;
    color: #344054;
    font-family: inherit;
}

.jsn-stock-grid-header th {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 15px 10px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    background: linear-gradient( 135deg, #253247, #435269 );
    border-bottom: 1px solid #1e293b;
    white-space: nowrap;
}

    .jsn-stock-grid-header th:first-child {
        border-top-right-radius: 15px;
    }

    .jsn-stock-grid-header th:last-child {
        border-top-left-radius: 15px;
    }

.jsn-stock-grid-row {
    opacity: 0;
    transform: translateY(10px);
    animation: jsnStockRowEnter 400ms ease forwards;
}

@keyframes jsnStockRowEnter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jsn-stock-grid-row td {
    position: relative;
    padding: 13px 10px;
    color: #475467;
    font-size: 12px;
    vertical-align: middle;
    background: #ffffff;
    border-bottom: 1px solid #edf0f4;
    transition: background 200ms ease, box-shadow 200ms ease;
}

.jsn-stock-grid-alt td {
    background: #fcfdfe;
}

.jsn-stock-grid-row:hover td {
    background: #fff9f3;
}

.jsn-receipt-grid
.jsn-stock-grid-row:hover td:first-child {
    box-shadow: inset -4px 0 0 #22c55e;
}

.jsn-transfer-grid
.jsn-stock-grid-row:hover td:first-child {
    box-shadow: inset -4px 0 0 #7c3aed;
}

.jsn-stock-selected-row td {
    background: #fff3e4 !important;
}

/* شماره ردیف */
.jsn-stock-row-number {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    border-radius: 10px;
    transition: transform 190ms ease, box-shadow 190ms ease;
}

    .jsn-stock-row-number.receipt {
        color: #15803d;
        background: #ecfdf3;
        border: 1px solid #bbf7d0;
    }

    .jsn-stock-row-number.transfer {
        color: #7c3aed;
        background: #f5f3ff;
        border: 1px solid #ddd6fe;
    }

.jsn-stock-grid-row:hover
.jsn-stock-row-number {
    transform: rotate(-5deg) scale(1.09);
}

/* طرف حساب */
.jsn-stock-account {
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.jsn-stock-account-icon {
    width: 39px;
    min-width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    transition: transform 190ms ease;
}

    .jsn-stock-account-icon.receipt {
        color: #15803d;
        background: #ecfdf3;
    }

    .jsn-stock-account-icon.transfer {
        color: #7c3aed;
        background: #f5f3ff;
    }

.jsn-stock-grid-row:hover
.jsn-stock-account-icon {
    transform: rotate(-6deg) scale(1.07);
}

.jsn-stock-account-link,
.jsn-stock-account-name {
    color: #344054;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

    .jsn-stock-account-link:hover {
        color: #ef7d01;
        text-decoration: none;
    }

/* تاریخ */
.jsn-stock-date {
    min-height: 35px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    direction: ltr;
    color: #475467;
    font-size: 12px;
    font-weight: 800;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    white-space: nowrap;
}

    .jsn-stock-date i {
        color: #ef7d01;
    }

/* شرح */
.jsn-stock-description {
    min-width: 220px;
    max-width: 350px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.jsn-stock-description-icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 9px;
}

.jsn-stock-description > div {
    min-width: 0;
}

.jsn-stock-description-text {
    display: block;
    color: #475467;
    font-size: 12px;
    line-height: 1.9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* شماره سند */
.jsn-stock-document-number {
    min-height: 35px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    direction: ltr;
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 9px;
}

/* وضعیت‌ها */
.jsn-stock-status {
    min-width: 105px;
    min-height: 34px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #475467;
    font-size: 12px;
    font-weight: 900;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    white-space: nowrap;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.jsn-stock-grid-row:hover
.jsn-stock-status {
    transform: translateY(-2px);
}

.jsn-stock-status i {
    font-size: 5px;
}

.jsn-stock-status.is-approved {
    color: #15803d;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

.jsn-stock-status.is-pending {
    color: #b45309;
    background: #fff7ed;
    border-color: #fed7aa;
}

.jsn-stock-status.is-unchecked {
    color: #c2410c;
    background: #fff7ed;
    border-color: #fdba74;
}

.jsn-stock-status.is-rejected {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.jsn-stock-status.is-incomplete {
    color: #64748b;
    background: #f8fafc;
    border-color: #cbd5e1;
}

.jsn-stock-status.is-conditional {
    color: #7c3aed;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.jsn-stock-status.is-separated {
    color: #2563eb;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.jsn-stock-status.is-pending i {
    animation: jsnStockPendingPulse 1.8s infinite;
}

@keyframes jsnStockPendingPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .35;
        transform: scale(.72);
    }
}

/* مبلغ حواله */
.jsn-stock-amount {
    min-width: 135px;
    min-height: 46px;
    padding: 6px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
    color: #7c3aed;
    background: linear-gradient( 135deg, #f5f3ff, #faf9ff );
    border: 1px solid #ddd6fe;
    border-radius: 11px;
    transition: transform 190ms ease, box-shadow 190ms ease;
}

.jsn-stock-grid-row:hover
.jsn-stock-amount {
    transform: translateY(-2px);
    box-shadow: 0 9px 17px rgba(124, 58, 237, .11);
}

.jsn-stock-amount-icon {
    width: 30px;
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ede9fe;
    border-radius: 8px;
}

.jsn-stock-amount > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jsn-stock-amount-value {
    font-size: 12px;
    font-weight: 950;
}

.jsn-stock-amount small {
    font-size: 12px;
    opacity: .7;
}

/* عملیات */
.jsn-stock-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.jsn-inline-panel {
    width: auto !important;
    display: inline-flex !important;
}

.jsn-stock-action-button {
    position: relative;
    width: 37px;
    height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-decoration: none;
    border-radius: 10px;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

    .jsn-stock-action-button:hover {
        text-decoration: none;
        transform: translateY(-3px) rotate(-4deg);
    }

    .jsn-stock-action-button.edit {
        color: #2563eb;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
    }

        .jsn-stock-action-button.edit:hover {
            color: #1d4ed8;
            box-shadow: 0 9px 17px rgba(37, 99, 235, .16);
        }

    .jsn-stock-action-button.invoice {
        color: #7c3aed;
        background: #f5f3ff;
        border: 1px solid #ddd6fe;
    }

        .jsn-stock-action-button.invoice:hover {
            color: #6d28d9;
            box-shadow: 0 9px 17px rgba(124, 58, 237, .16);
        }

/* فوتر */
.jsn-stock-grid-footer td {
    padding: 12px;
    color: #475467;
    background: linear-gradient( 135deg, #fff9f2, #ffffff );
    border-top: 2px solid #ffe0bd;
}

.jsn-stock-total {
    min-width: 180px;
    padding: 9px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #d96d00;
    background: #fff4e8;
    border: 1px solid #ffdfbc;
    border-radius: 10px;
}

    .jsn-stock-total > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 900;
    }

.jsn-stock-total-value {
    direction: ltr;
    font-size: 12px;
    font-weight: 950;
}

/* صفحه‌بندی */
.jsn-stock-pager td {
    padding: 15px !important;
    background: #ffffff !important;
    border-top: 1px solid #e5e9ef;
}

.jsn-stock-pager table {
    margin: 0 auto;
    border-spacing: 5px;
}

    .jsn-stock-pager table td {
        padding: 0 !important;
        border: 0 !important;
    }

.jsn-stock-pager a,
.jsn-stock-pager span {
    min-width: 35px;
    height: 35px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475467;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

    .jsn-stock-pager a:hover {
        color: #ef7d01;
        background: #fff7ed;
        border-color: #fed7aa;
        transform: translateY(-2px);
        box-shadow: 0 7px 13px rgba(239, 125, 1, .12);
    }

.jsn-stock-pager span {
    color: #ffffff;
    background: linear-gradient( 135deg, #f68c17, #e66d00 );
    border-color: #ef7d01;
    box-shadow: 0 8px 16px rgba(239, 125, 1, .23);
}

/* خالی */
.jsn-stock-empty-row td {
    padding: 55px 20px !important;
    color: transparent;
    text-align: center;
    background: #ffffff;
}

    .jsn-stock-empty-row td::before {
        content: "\f49e";
        width: 65px;
        height: 65px;
        margin: 0 auto 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ef7d01;
        font-family: "Font Awesome 5 Free";
        font-size: 23px;
        font-weight: 900;
        background: #fff2e3;
        border-radius: 19px;
        animation: jsnStockEmptyFloat 3s ease-in-out infinite;
    }

    .jsn-stock-empty-row td::after {
        content: "اطلاعاتی جهت نمایش وجود ندارد";
        display: block;
        color: #98a2b3;
        font-size: 12px;
        font-weight: 800;
    }

@keyframes jsnStockEmptyFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.jsn-stock-mobile-label {
    display: none;
}

/* ==========================================================
   موبایل
========================================================== */

@media (max-width: 900px) {

    .jsn-stock-history {
        padding: 9px;
    }

    .jsn-stock-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .jsn-stock-hero-icon {
        margin: 0 auto;
    }

    .jsn-stock-hero-status {
        justify-content: center;
    }

    .jsn-stock-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .jsn-stock-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .jsn-stock-grid-wrap {
        overflow: visible;
        border: 0;
    }

    .jsn-stock-grid {
        min-width: 0;
    }

        .jsn-stock-grid,
        .jsn-stock-grid tbody,
        .jsn-stock-grid tr,
        .jsn-stock-grid td {
            width: 100%;
            display: block;
        }

    .jsn-stock-grid-header {
        display: none;
    }

    .jsn-stock-grid-row {
        position: relative;
        margin-bottom: 13px;
        padding: 12px;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        background: #ffffff;
        border: 1px solid #e5e9ef;
        border-radius: 17px;
        box-shadow: 0 9px 23px rgba(31, 42, 68, .06);
    }

        .jsn-stock-grid-row td {
            padding: 0;
            border: 0;
            background: transparent !important;
        }

            .jsn-stock-grid-row td:first-child {
                position: absolute;
                left: 15px;
                top: 15px;
                width: auto;
            }

            .jsn-stock-grid-row td:nth-child(2),
            .jsn-stock-grid-row td:nth-child(4) {
                grid-column: span 2;
            }

    .jsn-stock-account {
        min-height: 58px;
        padding: 8px;
        background: #f8fafc;
        border-radius: 12px;
    }

        .jsn-stock-account > div {
            padding-left: 45px;
        }

    .jsn-stock-mobile-label {
        display: block;
        margin-bottom: 5px;
        color: #98a2b3;
        font-size: 12px;
        font-weight: 800;
    }

    .jsn-stock-date,
    .jsn-stock-document-number,
    .jsn-stock-status,
    .jsn-stock-amount {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .jsn-stock-description {
        width: 100%;
        max-width: none;
        padding: 9px;
        background: #f8fafc;
        border-radius: 12px;
    }

    .jsn-stock-description-text {
        white-space: normal;
    }

    .jsn-stock-actions {
        min-height: 46px;
        padding: 5px;
        background: #f8fafc;
        border-radius: 11px;
    }

    .jsn-stock-pager {
        display: block !important;
        grid-column: span 2;
    }

    .jsn-stock-grid-footer {
        display: block !important;
        grid-column: span 2;
    }
}

@media (max-width: 550px) {

    .jsn-stock-grid-row {
        grid-template-columns: 1fr;
    }

        .jsn-stock-grid-row td:nth-child(2),
        .jsn-stock-grid-row td:nth-child(4) {
            grid-column: span 1;
        }

    .jsn-stock-legends {
        width: 100%;
    }

    .jsn-stock-legend {
        flex: 1;
        justify-content: center;
    }
}

.jsn-stock-action-button.is-clicked {
    animation: jsnStockActionClick 350ms ease;
}

@keyframes jsnStockActionClick {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(.82) rotate(-5deg);
    }

    100% {
        transform: scale(1);
    }
}

.jsn-havale-search-panel,
.jsn-havale-search-panel *,
.jsn-havale-search-panel *::before,
.jsn-havale-search-panel *::after {
    box-sizing: border-box;
}

.jsn-havale-search-panel {
    width: 100%;
    margin-bottom: 16px;
    padding: 0;
    direction: rtl;
    color: #344054;
    background: #ffffff;
    border: 1px solid #e6ebf1;
    border-radius: 23px;
    box-shadow: 0 16px 44px rgba(31, 42, 68, .07);
    overflow: hidden;
    animation: jsnHavaleSearchEnter 550ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes jsnHavaleSearchEnter {
    from {
        opacity: 0;
        transform: translateY(-15px) scale(.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* هدر */
.jsn-havale-search-hero {
    position: relative;
    min-height: 105px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    background: linear-gradient( 135deg, #ffffff 0%, #fff9f2 55%, #ffead4 100% );
    border-bottom: 1px solid #f0e3d4;
    overflow: hidden;
}

.jsn-havale-search-glow {
    position: absolute;
    left: -100px;
    top: -150px;
    width: 340px;
    height: 340px;
    background: radial-gradient( circle, rgba(239, 125, 1, .18), transparent 68% );
    animation: jsnHavaleGlow 5s ease-in-out infinite;
}

@keyframes jsnHavaleGlow {
    0%, 100% {
        opacity: .7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.18);
    }
}

.jsn-havale-search-icon {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    background: linear-gradient( 135deg, #ff9c34, #ef7d01 );
    border-radius: 17px;
    box-shadow: 0 14px 29px rgba(239, 125, 1, .28);
    animation: jsnHavaleSearchIcon 3s ease-in-out infinite;
}

@keyframes jsnHavaleSearchIcon {
    0%, 100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-5px) rotate(-4deg);
    }
}

.jsn-havale-search-title {
    position: relative;
    z-index: 1;
}

.jsn-havale-search-eyebrow {
    display: inline-flex;
    margin-bottom: 5px;
    padding: 4px 8px;
    color: #d96d00;
    font-size: 12px;
    font-weight: 900;
    background: #fff0df;
    border-radius: 8px;
}

.jsn-havale-search-title h3 {
    margin: 0 0 5px;
    color: #1f2937;
    font-size: 16px;
    font-weight: 950;
}

.jsn-havale-search-title p {
    margin: 0;
    color: #7b8798;
    font-size: 12px;
    line-height: 1.9;
}

.jsn-havale-collapse-button {
    position: relative;
    z-index: 1;
    min-height: 38px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #b45309;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    background: rgba(255, 247, 237, .9);
    border: 1px solid #fed7aa;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease;
}

    .jsn-havale-collapse-button:hover {
        background: #fff1df;
        transform: translateY(-2px);
    }

    .jsn-havale-collapse-button i {
        transition: transform 220ms ease;
    }

    .jsn-havale-collapse-button.is-collapsed i {
        transform: rotate(180deg);
    }

/* بدنه */
.jsn-havale-search-body {
    max-height: 2000px;
    padding: 15px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 450ms ease, padding 350ms ease, opacity 250ms ease;
}

    .jsn-havale-search-body.is-collapsed {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
    }

/* سکشن */
.jsn-havale-filter-section {
    margin-bottom: 13px;
    padding: 14px;
    background: linear-gradient( 135deg, #fafbfc, #ffffff );
    border: 1px solid #e6ebf1;
    border-radius: 16px;
    transition: transform 190ms ease, box-shadow 190ms ease, border-color 190ms ease;
}

    .jsn-havale-filter-section:hover {
        border-color: #f1d8bb;
        transform: translateY(-2px);
        box-shadow: 0 11px 26px rgba(31, 42, 68, .055);
    }

.jsn-havale-section-header {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.jsn-havale-section-icon {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 11px;
    transition: transform 180ms ease;
}

.jsn-havale-filter-section:hover
.jsn-havale-section-icon {
    transform: rotate(-6deg) scale(1.06);
}

.jsn-havale-section-icon.basic {
    color: #ef7d01;
    background: #fff2e3;
}

.jsn-havale-section-icon.account {
    color: #2563eb;
    background: #eff6ff;
}

.jsn-havale-section-icon.status {
    color: #7c3aed;
    background: #f5f3ff;
}

.jsn-havale-section-header > div,
.jsn-havale-section-header > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.jsn-havale-section-header strong {
    color: #344054;
    font-size: 12px;
}

.jsn-havale-section-header small {
    color: #98a2b3;
    font-size: 12px;
}

/* گرید */
.jsn-havale-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.jsn-havale-filter-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jsn-havale-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .jsn-havale-field > label {
        color: #475467;
        font-size: 12px;
        font-weight: 900;
    }

        .jsn-havale-field > label i {
            margin-left: 5px;
            color: #ef7d01;
        }

/* کنترل‌ها */
.jsn-havale-input-wrap,
.jsn-havale-select-wrap {
    position: relative;
    height: 47px;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 12px;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

    .jsn-havale-input-wrap:focus-within,
    .jsn-havale-select-wrap:focus-within {
        background: #ffffff;
        border-color: #f3a04d;
        box-shadow: 0 0 0 3px rgba(239, 125, 1, .09);
        transform: translateY(-2px);
    }

.jsn-havale-control {
    width: 100% !important;
    min-width: 0;
    min-height: 46px;
    padding: 0 11px;
    color: #344054;
    font-family: inherit;
    font-size: 12px;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 12px;
    outline: none;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.jsn-havale-input-wrap
.jsn-havale-control,
.jsn-havale-select-wrap
.jsn-havale-control {
    height: 100% !important;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.jsn-havale-control:focus {
    background: #ffffff;
    border-color: #f3a04d;
    box-shadow: 0 0 0 3px rgba(239, 125, 1, .09);
}

.jsn-havale-input-wrap
.jsn-havale-control {
    padding-left: 42px;
}

.jsn-havale-input-wrap > span {
    position: absolute;
    left: 0;
    width: 42px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    pointer-events: none;
}

.jsn-havale-select-wrap
.jsn-havale-control {
    padding-left: 32px;
    appearance: none;
}

.jsn-havale-select-wrap > i {
    position: absolute;
    left: 12px;
    color: #98a2b3;
    font-size: 12px;
    pointer-events: none;
}

.jsn-havale-date-control,
.jsn-havale-number-control {
    direction: ltr;
    text-align: left;
}

/* Select2 */
.jsn-havale-field
.select2-container {
    width: 100% !important;
}

    .jsn-havale-field
    .select2-container
    .select2-selection--single {
        height: 47px !important;
        display: flex;
        align-items: center;
        background: #f8fafc !important;
        border: 1px solid #e2e7ee !important;
        border-radius: 12px !important;
    }

    .jsn-havale-field
    .select2-container
    .select2-selection__rendered {
        width: 100%;
        padding: 0 12px !important;
        color: #344054 !important;
        font-size: 12px;
        !important;
        line-height: 45px !important;
    }

    .jsn-havale-field
    .select2-container
    .select2-selection__arrow {
        top: 10px !important;
        left: 8px !important;
        right: auto !important;
    }

/* کارت چک‌باکس */
.jsn-havale-option-container {
    min-width: 0;
}

.jsn-havale-check-card {
    min-height: 67px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #ffffff;
    border: 1px solid #e5e9ef;
    border-radius: 13px;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

    .jsn-havale-check-card:hover {
        background: #fff9f3;
        border-color: #ffd7aa;
        transform: translateY(-2px);
        box-shadow: 0 9px 18px rgba(31, 42, 68, .06);
    }

    .jsn-havale-check-card input {
        width: 17px;
        height: 17px;
        accent-color: #ef7d01;
    }

.jsn-havale-check-icon {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ef7d01;
    background: #fff2e3;
    border-radius: 11px;
}

.jsn-havale-check-card.daily
.jsn-havale-check-icon {
    color: #2563eb;
    background: #eff6ff;
}

.jsn-havale-check-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .jsn-havale-check-content strong {
        color: #344054;
        font-size: 12px;
    }

    .jsn-havale-check-content small {
        color: #98a2b3;
        font-size: 12px;
    }

/* مدیران */
.jsn-havale-manager-toggle {
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: inherit;
    font-family: inherit;
    text-align: right;
    background: transparent;
    border: 0;
    cursor: pointer;
}

    .jsn-havale-manager-toggle
    .jsn-havale-section-header {
        margin-bottom: 0;
    }

    .jsn-havale-manager-toggle > i {
        color: #98a2b3;
        transition: transform 220ms ease;
    }

    .jsn-havale-manager-toggle.is-open > i {
        transform: rotate(180deg);
    }

.jsn-havale-manager-filters {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 450ms ease, opacity 280ms ease, margin-top 280ms ease;
}

    .jsn-havale-manager-filters.is-open {
        max-height: 800px;
        margin-top: 12px;
        opacity: 1;
    }

.jsn-havale-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.jsn-havale-status-card {
    min-width: 0;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #e5e9ef;
    border-radius: 13px;
    transition: transform 190ms ease, box-shadow 190ms ease, border-color 190ms ease;
}

    .jsn-havale-status-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 21px rgba(31, 42, 68, .07);
    }

    .jsn-havale-status-card.finance:hover {
        border-color: #bfdbfe;
    }

    .jsn-havale-status-card.treasury:hover {
        border-color: #bbf7d0;
    }

    .jsn-havale-status-card.commerce:hover {
        border-color: #ddd6fe;
    }

    .jsn-havale-status-card.quality:hover {
        border-color: #fed7aa;
    }

.jsn-havale-status-card-header {
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .jsn-havale-status-card-header > span {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }

.finance
.jsn-havale-status-card-header > span {
    color: #2563eb;
    background: #eff6ff;
}

.treasury
.jsn-havale-status-card-header > span {
    color: #15803d;
    background: #ecfdf3;
}

.commerce
.jsn-havale-status-card-header > span {
    color: #7c3aed;
    background: #f5f3ff;
}

.quality
.jsn-havale-status-card-header > span {
    color: #d97706;
    background: #fff7ed;
}

.jsn-havale-status-card-header > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.jsn-havale-status-card-header strong {
    color: #344054;
    font-size: 12px;
}

.jsn-havale-status-card-header small {
    color: #98a2b3;
    font-size: 12px;
}

.jsn-havale-status-list {
    width: 100% !important;
    min-height: 145px;
    padding: 5px;
    color: #475467;
    font-family: inherit;
    font-size: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    outline: none;
}

    .jsn-havale-status-list option {
        margin: 2px 0;
        padding: 7px;
        border-radius: 7px;
    }

        .jsn-havale-status-list option:checked {
            color: #ffffff;
            background: linear-gradient( 135deg, #f68c17, #e66d00 );
        }

.jsn-havale-selected-count {
    display: block;
    margin-top: 6px;
    color: #98a2b3;
    font-size: 12px;
}

/* فوتر */
.jsn-havale-search-footer {
    padding-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    border-top: 1px dashed #dfe4eb;
}

.jsn-havale-active-summary {
    display: flex;
    align-items: center;
    gap: 9px;
}

.jsn-havale-summary-icon {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7c3aed;
    background: #f5f3ff;
    border-radius: 11px;
}

.jsn-havale-active-summary > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.jsn-havale-active-summary strong {
    color: #344054;
    font-size: 12px;
}

.jsn-havale-active-summary
#jsnHavaleActiveFilters {
    color: #98a2b3;
    font-size: 12px;
}

.jsn-havale-search-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jsn-havale-reset-button,
.jsn-havale-search-button {
    min-height: 44px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    border-radius: 11px;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.jsn-havale-reset-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667085;
    background: #ffffff;
    border: 1px solid #dfe5ec;
}

    .jsn-havale-reset-button:hover {
        color: #b91c1c;
        background: #fef2f2;
        border-color: #fecaca;
        transform: translateY(-2px);
    }

.jsn-havale-search-button {
    min-width: 170px;
    color: #ffffff;
    background: linear-gradient( 135deg, #f68c17, #e66d00 );
    border: 0;
    box-shadow: 0 10px 22px rgba(239, 125, 1, .24);
}

    .jsn-havale-search-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 29px rgba(239, 125, 1, .32);
    }

    .jsn-havale-search-button.is-loading {
        position: relative;
        padding-left: 42px;
        opacity: .82;
        cursor: wait;
    }

        .jsn-havale-search-button.is-loading::after {
            content: "";
            position: absolute;
            left: 15px;
            top: 50%;
            width: 15px;
            height: 15px;
            margin-top: -8px;
            border: 2px solid rgba(255,255,255,.4);
            border-top-color: #ffffff;
            border-radius: 50%;
            animation: jsnHavaleButtonSpin 700ms linear infinite;
        }

@keyframes jsnHavaleButtonSpin {
    to {
        transform: rotate(360deg);
    }
}

/* واکنش‌گرا */
@media (max-width: 1100px) {

    .jsn-havale-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jsn-havale-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {

    .jsn-havale-search-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .jsn-havale-search-icon {
        margin: 0 auto;
    }

    .jsn-havale-collapse-button {
        justify-content: center;
    }

    .jsn-havale-filter-grid,
    .jsn-havale-filter-grid-two,
    .jsn-havale-status-grid {
        grid-template-columns: 1fr;
    }

    .jsn-havale-search-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .jsn-havale-search-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .jsn-havale-reset-button,
    .jsn-havale-search-button {
        width: 100%;
        justify-content: center;
    }
}

.jsn-brand-logo {
    display: block;
    max-width: 100%;
    height: auto;
    transform-origin: center;
    will-change: transform, filter;
    animation: jsnBrandLogoPremium 7s cubic-bezier(.22, .8, .25, 1) infinite;
}

@keyframes jsnBrandLogoPremium {
    /* لوگو بیشتر زمان ثابت است */
    0%, 58%, 100% {
        transform: translateY(0) scale(1) rotate(0deg);
        filter: brightness(1) contrast(1) saturate(1) drop-shadow( 0 0 0 rgba(239, 125, 1, 0) );
    }
    /* شروع نرم افکت */
    62% {
        transform: translateY(-2px) scale(1.025) rotate(-0.5deg);
        filter: brightness(1.08) contrast(1.03) saturate(1.08) drop-shadow( 0 6px 10px rgba(239, 125, 1, .13) );
    }
    /* برق اول */
    67% {
        transform: translateY(-4px) scale(1.06) rotate(0.8deg);
        filter: brightness(1.35) contrast(1.08) saturate(1.16) drop-shadow( 0 10px 19px rgba(239, 125, 1, .32) ) drop-shadow( 0 0 10px rgba(255, 224, 178, .72) );
    }
    /* بازگشت کوتاه */
    71% {
        transform: translateY(-2px) scale(1.035) rotate(-0.4deg);
        filter: brightness(1.08) contrast(1.02) saturate(1.07) drop-shadow( 0 7px 13px rgba(239, 125, 1, .18) );
    }
    /* برق دوم، کوتاه‌تر و ظریف‌تر */
    74% {
        transform: translateY(-3px) scale(1.045) rotate(0.35deg);
        filter: brightness(1.23) contrast(1.06) saturate(1.12) drop-shadow( 0 9px 16px rgba(239, 125, 1, .25) ) drop-shadow( 0 0 7px rgba(255, 244, 220, .6) );
    }
    /* آرام‌شدن */
    80% {
        transform: translateY(0) scale(1) rotate(0deg);
        filter: brightness(1) contrast(1) saturate(1) drop-shadow( 0 0 0 rgba(239, 125, 1, 0) );
    }
}

.jsn-brand-logo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
}

.jsn-brand-logo {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 100%;
    height: auto;
    transform-origin: center;
    animation: jsnBrandLogoMotion 7s cubic-bezier(.22, .8, .25, 1) infinite;
}

/* نوار نور متحرک */
.jsn-brand-logo-wrap::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -60%;
    bottom: -60%;
    left: -70%;
    width: 28%;
    background: linear-gradient( 110deg, transparent 0%, rgba(255, 255, 255, .06) 22%, rgba(255, 255, 255, .9) 48%, rgba(255, 221, 165, .72) 59%, transparent 100% );
    opacity: 0;
    filter: blur(.7px);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: jsnBrandLogoShine 7s cubic-bezier(.25, .75, .25, 1) infinite;
}

/* هاله زیر لوگو */
.jsn-brand-logo-wrap::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 15%;
    background: radial-gradient( circle, rgba(255, 164, 64, .36), rgba(239, 125, 1, .14) 40%, transparent 72% );
    opacity: 0;
    transform: scale(.8);
    filter: blur(9px);
    pointer-events: none;
    animation: jsnBrandLogoAura 7s ease-in-out infinite;
}

@keyframes jsnBrandLogoMotion {

    0%, 58%, 100% {
        transform: translateY(0) scale(1) rotate(0);
        filter: brightness(1) saturate(1);
    }

    65% {
        transform: translateY(-3px) scale(1.045) rotate(-.5deg);
        filter: brightness(1.12) saturate(1.1);
    }

    70% {
        transform: translateY(-5px) scale(1.065) rotate(.7deg);
        filter: brightness(1.23) saturate(1.16);
    }

    78% {
        transform: translateY(-1px) scale(1.018) rotate(-.2deg);
        filter: brightness(1.07) saturate(1.06);
    }

    84% {
        transform: translateY(0) scale(1) rotate(0);
        filter: brightness(1) saturate(1);
    }
}

@keyframes jsnBrandLogoShine {

    0%, 61% {
        left: -70%;
        opacity: 0;
    }

    64% {
        opacity: .2;
    }

    68% {
        opacity: 1;
    }

    77% {
        left: 145%;
        opacity: .35;
    }

    81%, 100% {
        left: 145%;
        opacity: 0;
    }
}

@keyframes jsnBrandLogoAura {

    0%, 59%, 100% {
        opacity: 0;
        transform: scale(.8);
    }

    67% {
        opacity: .8;
        transform: scale(1.12);
    }

    77% {
        opacity: .25;
        transform: scale(1.03);
    }

    84% {
        opacity: 0;
        transform: scale(.9);
    }
}

.jsn-top-user-avatar-wrap {
    position: relative;
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    isolation: isolate;
}

    .jsn-top-user-avatar-wrap::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        border-radius: 50%;
        background: conic-gradient( from 0deg, transparent 0deg, transparent 115deg, rgba(255, 171, 72, 0.15) 150deg, #ef7d01 190deg, #ffd19d 225deg, transparent 270deg, transparent 360deg );
        opacity: 0;
        animation: jsnAvatarRingSpin 6.5s linear infinite;
    }

    .jsn-top-user-avatar-wrap::after {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 5px;
        background: #ffffff;
        border-radius: 50%;
    }

    .jsn-top-user-avatar-wrap
    .jsn-top-user-avatar {
        position: relative;
        z-index: 1;
        width: 54px;
        height: 54px;
    }

@keyframes jsnAvatarRingSpin {

    0%, 57%, 100% {
        opacity: 0;
        transform: rotate(0deg) scale(.94);
    }

    64% {
        opacity: .55;
    }

    72% {
        opacity: 1;
        transform: rotate(220deg) scale(1);
    }

    81% {
        opacity: 0;
        transform: rotate(390deg) scale(1.05);
    }
}

.jsn-top-user-avatar {
    display: block;
    width: 54px;
    height: 54px;
    object-fit: cover;
    object-position: center;
    border: 3px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    transform-origin: center;
    will-change: transform, filter, box-shadow;
    box-shadow: 0 8px 20px rgba(31, 42, 68, 0.18), 0 0 0 3px rgba(239, 125, 1, 0.10);
    animation: jsnUserAvatarSpecialMove 12s cubic-bezier(.22, .75, .25, 1) infinite;
    transition: transform 220ms ease, filter 220ms ease, box-shadow 220ms ease;
}

@keyframes jsnUserAvatarSpecialMove {
    /* بیشتر زمان ثابت می‌ماند */
    0%, 58%, 100% {
        transform: translateY(0) scale(1) rotate(0deg);
        filter: brightness(1) contrast(1) saturate(1);
        box-shadow: 0 8px 20px rgba(31, 42, 68, 0.18), 0 0 0 3px rgba(239, 125, 1, 0.10);
    }
    /* شروع حرکت */
    62% {
        transform: translateY(-2px) scale(1.035) rotate(-1deg);
        filter: brightness(1.05) contrast(1.02) saturate(1.08);
        box-shadow: 0 11px 24px rgba(31, 42, 68, 0.21), 0 0 0 4px rgba(239, 125, 1, 0.14);
    }
    /* اوج افکت */
    68% {
        transform: translateY(-5px) scale(1.10) rotate(1.5deg);
        filter: brightness(1.18) contrast(1.05) saturate(1.16);
        box-shadow: 0 15px 30px rgba(31, 42, 68, 0.24), 0 0 0 4px rgba(255, 255, 255, 0.95), 0 0 0 10px rgba(239, 125, 1, 0.13), 0 0 28px rgba(255, 166, 66, 0.35);
    }
    /* برق کوتاه */
    72% {
        transform: translateY(-4px) scale(1.075) rotate(-0.7deg);
        filter: brightness(1.35) contrast(1.08) saturate(1.20);
        box-shadow: 0 14px 28px rgba(31, 42, 68, 0.23), 0 0 0 5px rgba(255, 255, 255, 0.90), 0 0 0 11px rgba(255, 168, 65, 0.18), 0 0 34px rgba(255, 191, 117, 0.46);
    }
    /* برگشت فنری */
    77% {
        transform: translateY(-1px) scale(1.025) rotate(0.3deg);
        filter: brightness(1.08) contrast(1.02) saturate(1.08);
        box-shadow: 0 10px 23px rgba(31, 42, 68, 0.20), 0 0 0 4px rgba(239, 125, 1, 0.12);
    }

    82% {
        transform: translateY(0) scale(1) rotate(0deg);
        filter: brightness(1) contrast(1) saturate(1);
        box-shadow: 0 8px 20px rgba(31, 42, 68, 0.18), 0 0 0 3px rgba(239, 125, 1, 0.10);
    }
}
.select2-container {
    display: inline;
}
.jssn-sidebar::before {
    content: "";
    position: absolute;
    top: 3%;
    bottom: 3%;
    left: 0;
    width: 3px;
    background: linear-gradient( 180deg, transparent, rgba(255, 255, 255, 0.9), #ff9b35, #f57c00, #ff9b35, rgba(255, 255, 255, 0.9), transparent );
    border-radius: 999px;
    pointer-events: none;
}
.jssn-sidebar-header::before {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, #f57c00, #ff9b35, transparent);
}
.jsn-live-activity::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, #f57c00, #ff9b35, transparent);
}

/* =====================================================
   Search result open animation
===================================================== */

.jssn-sidebar
.nnnavbar-nav > li.is-search-open {
    animation: jsnSearchParentEnter 420ms cubic-bezier(.2,.8,.25,1) both;
}


@keyframes jsnSearchParentEnter {

    from {
        opacity: .55;
        transform: translateX(7px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}


/* سرمنویی که داخلش نتیجه وجود دارد */
.jssn-sidebar
.nnnavbar-nav > li.is-search-match > a {
    color: var(--jsn-primary-dark) !important;
    background: linear-gradient( 135deg, #fff4e8, #fffaf5 ) !important;
    border-color: rgba(245,124,0,.18) !important;
    box-shadow: 0 5px 16px rgba(245,124,0,.08);
    animation: jsnSearchParentGlow 2.2s ease-in-out infinite;
}


@keyframes jsnSearchParentGlow {

    0%, 100% {
        box-shadow: 0 5px 16px rgba(245,124,0,.07);
    }

    50% {
        box-shadow: 0 7px 22px rgba(245,124,0,.15);
    }
}


/* خود زیرمنویی که نتیجه واقعی است */
.jssn-sidebar
.snub-menu li.jsn-search-result > a {
    position: relative;
    font-weight: 700 !important;
    border: 1px solid rgba(245,124,0,.14);
    box-shadow: 0 5px 15px rgba(31,42,68,.055);
    animation: jsnSearchResultEnter 450ms cubic-bezier(.2,.8,.25,1) both;
}


    /*
  علامت کوچک نتیجه پیدا شده
*/
    .jssn-sidebar
    .snub-menu li.jsn-search-result > a::after {
        content: "";
        position: absolute;
        left: 10px;
        top: 50%;
        width: 6px;
        height: 6px;
        background: #f57c00;
        border-radius: 50%;
        transform: translateY(-50%);
        box-shadow: 0 0 0 4px rgba(245,124,0,.10);
        animation: jsnSearchResultDot 1.6s ease-in-out infinite;
    }


@keyframes jsnSearchResultEnter {

    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes jsnSearchResultDot {

    0%, 100% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 0 0 3px rgba(245,124,0,.08);
    }

    50% {
        transform: translateY(-50%) scale(1.22);
        box-shadow: 0 0 0 7px rgba(245,124,0,0);
    }
}


/* =========================================================
   Personnel Grid
========================================================= */

.jsn-personnel-page,
.jsn-personnel-page *,
.jsn-personnel-page *::before,
.jsn-personnel-page *::after {
    box-sizing: border-box;
}

.jsn-personnel-page {
    width: 100%;
    padding: 18px;
    direction: rtl;
    color: #344054;
}


/* =========================================================
   Hero
========================================================= */

.jsn-personnel-hero {
    position: relative;
    min-height: 125px;
    padding: 22px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 16px;
    background: linear-gradient( 135deg, #ffffff 0%, #fffaf5 55%, #ffead5 100% );
    border: 1px solid #f0dfce;
    border-radius: 24px;
    box-shadow: 0 17px 45px rgba(31,42,68,.07);
    overflow: hidden;
    animation: jsnPersonnelHeroEnter 550ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes jsnPersonnelHeroEnter {

    from {
        opacity: 0;
        transform: translateY(-16px) scale(.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


.jsn-personnel-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}


    .jsn-personnel-hero-glow.glow-one {
        width: 340px;
        height: 340px;
        top: -170px;
        left: -100px;
        background: radial-gradient( circle, rgba(245,124,0,.18), transparent 68% );
        animation: jsnPersonnelGlowOne 6s ease-in-out infinite;
    }


    .jsn-personnel-hero-glow.glow-two {
        width: 250px;
        height: 250px;
        right: 30%;
        bottom: -150px;
        background: radial-gradient( circle, rgba(37,99,235,.08), transparent 70% );
        animation: jsnPersonnelGlowTwo 7s ease-in-out infinite;
    }


@keyframes jsnPersonnelGlowOne {

    0%, 100% {
        opacity: .65;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.18);
    }
}


@keyframes jsnPersonnelGlowTwo {

    0%, 100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(-15px,-12px);
    }
}


.jsn-personnel-hero-icon {
    position: relative;
    z-index: 2;
    width: 66px;
    height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 24px;
    background: linear-gradient( 135deg, #ff9c35, #ef7d01 );
    border-radius: 19px;
    box-shadow: 0 15px 32px rgba(239,125,1,.28);
    animation: jsnPersonnelHeroIcon 3s ease-in-out infinite;
}


@keyframes jsnPersonnelHeroIcon {

    0%, 100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-5px) rotate(-4deg);
    }
}


.jsn-personnel-hero-content {
    position: relative;
    z-index: 2;
}


.jsn-personnel-eyebrow {
    display: inline-flex;
    margin-bottom: 5px;
    padding: 5px 9px;
    color: #d96d00;
    font-size: 11px;
    font-weight: 900;
    background: #fff0df;
    border-radius: 8px;
}


.jsn-personnel-hero-content h2 {
    margin: 0 0 6px;
    color: #1f2937;
    font-size: 19px;
    font-weight: 900;
}


.jsn-personnel-hero-content p {
    margin: 0;
    color: #7b8798;
    font-size: 12px;
    line-height: 1.9;
}


.jsn-personnel-hero-status {
    position: relative;
    z-index: 2;
    min-width: 170px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #15803d;
    background: rgba(236,253,243,.9);
    border: 1px solid #bbf7d0;
    border-radius: 13px;
}


.jsn-personnel-status-dot {
    width: 11px;
    height: 11px;
    background: #22c55e;
    border-radius: 50%;
    animation: jsnPersonnelStatusPulse 1.7s infinite;
}


@keyframes jsnPersonnelStatusPulse {

    0% {
        box-shadow: 0 0 0 0 rgba(34,197,94,.4);
    }

    70% {
        box-shadow: 0 0 0 9px rgba(34,197,94,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34,197,94,0);
    }
}


.jsn-personnel-hero-status > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.jsn-personnel-hero-status small {
    font-size: 10px;
}


.jsn-personnel-hero-status strong {
    font-size: 12px;
}


/* =========================================================
   Toolbar
========================================================= */

.jsn-personnel-toolbar {
    margin-top: 14px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: #ffffff;
    border: 1px solid #e7ebf1;
    border-radius: 17px;
    box-shadow: 0 9px 25px rgba(31,42,68,.045);
    animation: jsnPersonnelToolbarEnter 500ms 80ms ease both;
}


@keyframes jsnPersonnelToolbarEnter {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.jsn-personnel-toolbar-title {
    display: flex;
    align-items: center;
    gap: 9px;
}


    .jsn-personnel-toolbar-title > span {
        width: 39px;
        height: 39px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #2563eb;
        background: #eff6ff;
        border-radius: 11px;
    }


    .jsn-personnel-toolbar-title > div {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }


    .jsn-personnel-toolbar-title strong {
        color: #344054;
        font-size: 12px;
    }


    .jsn-personnel-toolbar-title small {
        color: #98a2b3;
        font-size: 10px;
    }


.jsn-personnel-legends {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}


.jsn-personnel-legend {
    min-height: 31px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    border-radius: 9px;
}


    .jsn-personnel-legend.branch {
        color: #2563eb;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
    }


    .jsn-personnel-legend.position {
        color: #7c3aed;
        background: #f5f3ff;
        border: 1px solid #ddd6fe;
    }


    .jsn-personnel-legend.action {
        color: #d96d00;
        background: #fff7ed;
        border: 1px solid #fed7aa;
    }


/* =========================================================
   Grid Card
========================================================= */

.jsn-personnel-grid-card {
    position: relative;
    margin-top: 14px;
    padding: 13px;
    background: #ffffff;
    border: 1px solid #e6ebf1;
    border-radius: 22px;
    box-shadow: 0 15px 42px rgba(31,42,68,.06);
    overflow: hidden;
    animation: jsnPersonnelGridEnter 550ms 130ms ease both;
}


@keyframes jsnPersonnelGridEnter {

    from {
        opacity: 0;
        transform: translateY(17px) scale(.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


.jsn-personnel-grid-glow {
    position: absolute;
    width: 400px;
    height: 300px;
    top: -210px;
    right: 20%;
    background: radial-gradient( circle, rgba(245,124,0,.07), transparent 68% );
    pointer-events: none;
}


.jsn-personnel-grid-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e4e9ef;
    border-radius: 17px;
    scrollbar-width: thin;
    scrollbar-color: #cbd3dd transparent;
}


.jsn-personnel-grid {
    width: 100%;
    min-width: 1250px;
    border-collapse: separate;
    border-spacing: 0;
    color: #344054;
}


/* =========================================================
   Header
========================================================= */

.jsn-personnel-grid-header th {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 15px 11px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    background: linear-gradient( 135deg, #253247, #435269 );
    border-bottom: 1px solid #1e293b;
}


    .jsn-personnel-grid-header th:first-child {
        border-top-right-radius: 15px;
    }


    .jsn-personnel-grid-header th:last-child {
        border-top-left-radius: 15px;
    }


/* =========================================================
   Rows
========================================================= */

.jsn-personnel-grid-row {
    opacity: 0;
    transform: translateY(10px);
    animation: jsnPersonnelRowEnter 420ms ease forwards;
}


@keyframes jsnPersonnelRowEnter {

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.jsn-personnel-grid-row td {
    position: relative;
    padding: 13px 10px;
    color: #475467;
    font-size: 12px;
    vertical-align: middle;
    background: #ffffff;
    border-bottom: 1px solid #edf0f4;
    transition: background 200ms ease, box-shadow 200ms ease;
}


.jsn-personnel-grid-alt td {
    background: #fcfdfe;
}


.jsn-personnel-grid-row:hover td {
    background: #fff9f3;
}


    .jsn-personnel-grid-row:hover td:first-child {
        box-shadow: inset -4px 0 0 #ef7d01;
    }


.jsn-personnel-selected-row td {
    background: #fff3e4 !important;
}


/* =========================================================
   Row Number
========================================================= */

.jsn-personnel-row-number {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d96d00;
    font-weight: 900;
    background: linear-gradient( 135deg, #fff5e9, #ffead1 );
    border: 1px solid #ffdfba;
    border-radius: 10px;
    transition: transform 190ms ease, box-shadow 190ms ease;
}


.jsn-personnel-grid-row:hover
.jsn-personnel-row-number {
    transform: rotate(-5deg) scale(1.08);
    box-shadow: 0 7px 14px rgba(239,125,1,.13);
}


/* =========================================================
   Avatar Placeholder
========================================================= */

.jsn-personnel-avatar-placeholder {
    width: 46px;
    height: 46px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f57c00;
    font-size: 16px;
    background: linear-gradient( 135deg, #fff1e0, #ffffff );
    border: 2px solid #ffffff;
    border-radius: 14px;
    box-shadow: 0 0 0 2px rgba(245,124,0,.12), 0 7px 16px rgba(31,42,68,.1);
    transition: transform 200ms ease;
}


.jsn-personnel-grid-row:hover
.jsn-personnel-avatar-placeholder {
    transform: translateY(-3px) rotate(-4deg) scale(1.06);
}


/* =========================================================
   Name
========================================================= */

.jsn-personnel-name-cell {
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 9px;
}


.jsn-personnel-name-icon {
    width: 38px;
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    background: #eff6ff;
    border-radius: 10px;
    transition: transform 190ms ease;
}


.jsn-personnel-grid-row:hover
.jsn-personnel-name-icon {
    transform: rotate(-5deg) scale(1.06);
}


.jsn-personnel-name-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}


    .jsn-personnel-name-content strong {
        color: #344054;
        font-size: 13px;
        font-weight: 800;
    }


    .jsn-personnel-name-content small {
        color: #98a2b3;
        font-size: 10px;
    }


/* =========================================================
   Branch / Position
========================================================= */

.jsn-personnel-branch-badge,
.jsn-personnel-position-badge {
    min-height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
    border-radius: 10px;
    transition: transform 180ms ease, box-shadow 180ms ease;
}


.jsn-personnel-branch-badge {
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}


.jsn-personnel-position-badge {
    color: #7c3aed;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
}


.jsn-personnel-grid-row:hover
.jsn-personnel-branch-badge,
.jsn-personnel-grid-row:hover
.jsn-personnel-position-badge {
    transform: translateY(-2px);
}


/* =========================================================
   Mobile
========================================================= */

.jsn-personnel-mobile {
    min-height: 37px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    direction: ltr;
    color: #15803d;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    transition: transform 180ms ease, box-shadow 180ms ease;
}


    .jsn-personnel-mobile:hover {
        color: #166534;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(21,128,61,.11);
    }


/* =========================================================
   Actions
========================================================= */

.jsn-personnel-actions {
    min-width: 410px;
    display: grid;
    grid-template-columns: repeat(6, minmax(52px,1fr));
    gap: 6px;
}


.jsn-personnel-action {
    position: relative;
    min-height: 48px;
    padding: 5px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #667085;
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
    background: #f8fafc;
    border: 1px solid #e5e9ef;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 180ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}


    .jsn-personnel-action i {
        font-size: 13px;
        transition: transform 180ms ease;
    }


    .jsn-personnel-action::before {
        content: "";
        position: absolute;
        top: -100%;
        left: -50%;
        width: 35%;
        height: 280%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.85), transparent );
        transform: rotate(25deg);
        opacity: 0;
        pointer-events: none;
    }


    .jsn-personnel-action:hover {
        text-decoration: none;
        transform: translateY(-4px);
        box-shadow: 0 9px 18px rgba(31,42,68,.11);
    }


        .jsn-personnel-action:hover i {
            transform: scale(1.15) rotate(-5deg);
        }


        .jsn-personnel-action:hover::before {
            opacity: 1;
            animation: jsnPersonnelActionShine 650ms ease;
        }


@keyframes jsnPersonnelActionShine {

    from {
        left: -50%;
    }

    to {
        left: 140%;
    }
}


/* Action Colors */

.jsn-personnel-action.edit {
    color: #2563eb;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.jsn-personnel-action.certificate {
    color: #b45309;
    background: #fff7ed;
    border-color: #fed7aa;
}

.jsn-personnel-action.disciplinary {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.jsn-personnel-action.contract {
    color: #7c3aed;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.jsn-personnel-action.leave {
    color: #0891b2;
    background: #ecfeff;
    border-color: #a5f3fc;
}

.jsn-personnel-action.finance {
    color: #15803d;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

.jsn-personnel-action.letter {
    color: #0369a1;
    background: #f0f9ff;
    border-color: #bae6fd;
}

.jsn-personnel-action.password {
    color: #be123c;
    background: #fff1f2;
    border-color: #fecdd3;
}

.jsn-personnel-action.history {
    color: #475569;
    background: #f8fafc;
    border-color: #cbd5e1;
}

.jsn-personnel-action.test {
    color: #9333ea;
    background: #faf5ff;
    border-color: #e9d5ff;
}

.jsn-personnel-action.neo {
    color: #4f46e5;
    background: #eef2ff;
    border-color: #c7d2fe;
}

.jsn-personnel-action.food {
    color: #ea580c;
    background: #fff7ed;
    border-color: #fdba74;
}


/* =========================================================
   Mobile Layout
========================================================= */

.jsn-personnel-mobile-label {
    display: none;
}


@media (max-width: 900px) {

    .jsn-personnel-page {
        padding: 8px;
    }

    .jsn-personnel-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .jsn-personnel-hero-icon {
        margin: 0 auto;
    }

    .jsn-personnel-hero-status {
        justify-content: center;
    }

    .jsn-personnel-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .jsn-personnel-grid-card {
        padding: 8px;
    }

    .jsn-personnel-grid-wrap {
        overflow: visible;
        border: 0;
    }

    .jsn-personnel-grid {
        min-width: 0;
    }

        .jsn-personnel-grid,
        .jsn-personnel-grid tbody,
        .jsn-personnel-grid tr,
        .jsn-personnel-grid td {
            width: 100%;
            display: block;
        }

    .jsn-personnel-grid-header {
        display: none;
    }

    .jsn-personnel-grid-row {
        position: relative;
        margin-bottom: 13px;
        padding: 12px;
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 9px;
        background: #ffffff;
        border: 1px solid #e5e9ef;
        border-radius: 17px;
        box-shadow: 0 9px 23px rgba(31,42,68,.06);
    }

        .jsn-personnel-grid-row td {
            padding: 0;
            border: 0;
            background: transparent !important;
        }

            .jsn-personnel-grid-row td:first-child {
                position: absolute;
                left: 14px;
                top: 14px;
                width: auto;
            }

            .jsn-personnel-grid-row td:nth-child(2) {
                width: 55px;
                position: absolute;
                right: 14px;
                top: 14px;
            }

            .jsn-personnel-grid-row td:nth-child(3),
            .jsn-personnel-grid-row td:last-child {
                grid-column: span 2;
            }

    .jsn-personnel-name-cell {
        min-height: 65px;
        padding: 8px 65px 8px 50px;
        background: #f8fafc;
        border-radius: 12px;
    }

    .jsn-personnel-mobile-label {
        display: block;
        margin-bottom: 5px;
        color: #98a2b3;
        font-size: 10px;
        font-weight: 700;
    }

    .jsn-personnel-branch-badge,
    .jsn-personnel-position-badge,
    .jsn-personnel-mobile {
        width: 100%;
    }

    .jsn-personnel-actions {
        min-width: 0;
        width: 100%;
        grid-template-columns: repeat(4,1fr);
        padding: 8px;
        background: #f8fafc;
        border-radius: 12px;
    }
}


@media (max-width: 550px) {

    .jsn-personnel-grid-row {
        grid-template-columns: 1fr;
    }

        .jsn-personnel-grid-row td:nth-child(3),
        .jsn-personnel-grid-row td:last-child {
            grid-column: span 1;
        }

    .jsn-personnel-actions {
        grid-template-columns: repeat(3,1fr);
    }

    .jsn-personnel-legends {
        width: 100%;
    }

    .jsn-personnel-legend {
        flex: 1;
        justify-content: center;
    }
}

.jsn-personnel-action.is-clicking {
    transform: translateY(-1px) scale(.92) !important;
    transition-duration: 80ms !important;
}
/* =========================================================
   Personnel Search
========================================================= */

.jsn-personnel-search,
.jsn-personnel-search *,
.jsn-personnel-search *::before,
.jsn-personnel-search *::after {
    box-sizing: border-box;
}


.jsn-personnel-search {
    width: 100%;
    margin-bottom: 16px;
    direction: rtl;
    color: #344054;
    background: #fff;
    border: 1px solid #e5eaf0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(31,42,68,.065);
    animation: jsnPersonnelSearchEnter 550ms cubic-bezier(.2,.8,.2,1) both;
}


@keyframes jsnPersonnelSearchEnter {

    from {
        opacity: 0;
        transform: translateY(-14px) scale(.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   Header
========================================================= */

.jsn-personnel-search-header {
    position: relative;
    min-height: 105px;
    padding: 17px 19px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    background: linear-gradient( 135deg, #ffffff 0%, #fffaf5 55%, #ffead5 100% );
    border-bottom: 1px solid #f0e2d4;
    overflow: hidden;
}


.jsn-personnel-search-header-glow {
    position: absolute;
    width: 330px;
    height: 330px;
    left: -120px;
    top: -170px;
    background: radial-gradient( circle, rgba(245,124,0,.18), transparent 68% );
    border-radius: 50%;
    pointer-events: none;
    animation: jsnPersonnelSearchGlow 5s ease-in-out infinite;
}


@keyframes jsnPersonnelSearchGlow {

    0%, 100% {
        opacity: .65;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.18);
    }
}


.jsn-personnel-search-header-icon {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    background: linear-gradient( 135deg, #ff9c35, #ef7d01 );
    border-radius: 17px;
    box-shadow: 0 14px 29px rgba(239,125,1,.28);
    animation: jsnPersonnelSearchIcon 3s ease-in-out infinite;
}


@keyframes jsnPersonnelSearchIcon {

    0%, 100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-5px) rotate(-4deg);
    }
}


.jsn-personnel-search-header-content {
    position: relative;
    z-index: 2;
}


.jsn-personnel-search-eyebrow {
    display: inline-flex;
    margin-bottom: 5px;
    padding: 4px 8px;
    color: #d96d00;
    font-size: 10px;
    font-weight: 900;
    background: #fff0df;
    border-radius: 8px;
}


.jsn-personnel-search-header-content h3 {
    margin: 0 0 5px;
    color: #1f2937;
    font-size: 16px;
    font-weight: 900;
}


.jsn-personnel-search-header-content p {
    margin: 0;
    color: #7b8798;
    font-size: 11px;
    line-height: 1.9;
}


/* =========================================================
   Add personnel
========================================================= */

.jsn-personnel-search-add-area {
    position: relative;
    z-index: 2;
    min-width: 145px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


    /*
    برای خروجی قدیمی Literal هم کار می‌کند
*/
    .jsn-personnel-search-add-area > a {
        min-height: 46px;
        padding: 0 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: #15803d !important;
        font-size: 11px;
        font-weight: 800;
        text-decoration: none !important;
        background: linear-gradient( 135deg, #ecfdf3, #f5fff8 );
        border: 1px solid #bbf7d0;
        border-radius: 12px;
        box-shadow: 0 8px 18px rgba(21,128,61,.08);
        transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
    }


        .jsn-personnel-search-add-area > a:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 23px rgba(21,128,61,.15);
        }


        /* عکس قدیمی add.jpg */
        .jsn-personnel-search-add-area > a img {
            width: 34px !important;
            height: 34px !important;
            object-fit: contain;
            border: 0 !important;
            border-radius: 9px !important;
        }


/* =========================================================
   Body
========================================================= */

.jsn-personnel-search-body {
    padding: 15px;
}


.jsn-personnel-search-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}


/* =========================================================
   Field
========================================================= */

.jsn-personnel-search-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}


    .jsn-personnel-search-field > label {
        min-height: 30px;
        display: flex;
        align-items: center;
        gap: 7px;
        color: #475467;
        font-size: 11px;
        font-weight: 800;
    }


.jsn-personnel-field-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    background: #eff6ff;
    border-radius: 8px;
}


    .jsn-personnel-field-icon.date {
        color: #d97706;
        background: #fff7ed;
    }


    .jsn-personnel-field-icon.branch {
        color: #0891b2;
        background: #ecfeff;
    }


    .jsn-personnel-field-icon.position {
        color: #7c3aed;
        background: #f5f3ff;
    }


    .jsn-personnel-field-icon.status {
        color: #15803d;
        background: #ecfdf3;
    }


/* =========================================================
   Inputs
========================================================= */

.jsn-personnel-input-wrap,
.jsn-personnel-select-wrap {
    position: relative;
    height: 48px;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 12px;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}


    .jsn-personnel-input-wrap:focus-within,
    .jsn-personnel-select-wrap:focus-within {
        background: #fff;
        border-color: rgba(245,124,0,.55);
        box-shadow: 0 0 0 4px rgba(245,124,0,.08);
        transform: translateY(-2px);
    }


.jsn-personnel-search-control {
    width: 100% !important;
    height: 46px !important;
    min-width: 0;
    padding: 0 12px;
    color: #344054 !important;
    font-family: inherit;
    font-size: 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}


.jsn-personnel-input-wrap
.jsn-personnel-search-control {
    padding-left: 43px;
}


.jsn-personnel-input-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    pointer-events: none;
    transition: color 180ms ease, transform 180ms ease;
}


.jsn-personnel-input-wrap:focus-within
.jsn-personnel-input-icon {
    color: #ef7d01;
    transform: scale(1.08);
}


.jsn-personnel-date {
    direction: ltr !important;
    text-align: left !important;
}


/* =========================================================
   Select
========================================================= */

.jsn-personnel-select-wrap
select {
    padding-left: 35px !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}


.jsn-personnel-select-wrap > i {
    position: absolute;
    left: 13px;
    color: #98a2b3;
    font-size: 9px;
    pointer-events: none;
    transition: transform 180ms ease, color 180ms ease;
}


.jsn-personnel-select-wrap:focus-within > i {
    color: #ef7d01;
    transform: rotate(180deg);
}


/* =========================================================
   Footer
========================================================= */

.jsn-personnel-search-footer {
    margin-top: 15px;
    padding-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px dashed #dfe4eb;
}


.jsn-personnel-filter-summary {
    display: flex;
    align-items: center;
    gap: 9px;
}


.jsn-personnel-filter-summary-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7c3aed;
    background: #f5f3ff;
    border-radius: 11px;
}


.jsn-personnel-filter-summary > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.jsn-personnel-filter-summary strong {
    color: #344054;
    font-size: 11px;
}


.jsn-personnel-filter-summary span:last-child {
    color: #98a2b3;
    font-size: 10px;
}


.jsn-personnel-search-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* =========================================================
   Buttons
========================================================= */

.jsn-personnel-clear-button,
.jsn-personnel-search-button {
    min-height: 45px;
    padding: 0 15px;
    font-family: inherit;
    font-size: 11px !important;
    font-weight: 800;
    border-radius: 11px !important;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}


.jsn-personnel-clear-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #667085;
    background: #fff;
    border: 1px solid #dfe5ec;
}


    .jsn-personnel-clear-button:hover {
        color: #b91c1c;
        background: #fef2f2;
        border-color: #fecaca;
        transform: translateY(-2px);
    }


.jsn-personnel-search-button {
    min-width: 165px;
    color: #fff !important;
    background: linear-gradient( 135deg, #f68c17, #e66d00 ) !important;
    border: 0 !important;
    box-shadow: 0 10px 22px rgba(239,125,1,.25) !important;
}


    .jsn-personnel-search-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 29px rgba(239,125,1,.32) !important;
    }


    /* loading */
    .jsn-personnel-search-button.is-searching {
        position: relative;
        padding-left: 43px;
        cursor: wait;
    }


        .jsn-personnel-search-button.is-searching::after {
            content: "";
            position: absolute;
            left: 16px;
            top: 50%;
            width: 15px;
            height: 15px;
            margin-top: -8px;
            border: 2px solid rgba(255,255,255,.4);
            border-top-color: #fff;
            border-radius: 50%;
            animation: jsnPersonnelSearchSpin 700ms linear infinite;
        }


@keyframes jsnPersonnelSearchSpin {

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   No Result
========================================================= */

.jsn-personnel-no-result {
    margin-top: 12px;
    padding: 25px;
    text-align: center;
    color: #667085;
    background: linear-gradient( 135deg, #fffafa, #ffffff );
    border: 1px dashed #fecaca;
    border-radius: 14px;
    animation: jsnPersonnelNoResultEnter 450ms ease both;
}


    .jsn-personnel-no-result i {
        width: 48px;
        height: 48px;
        margin: 0 auto 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #dc2626;
        font-size: 17px;
        background: #fef2f2;
        border-radius: 14px;
    }


    .jsn-personnel-no-result strong {
        display: block;
        color: #344054;
        font-size: 13px;
    }


    .jsn-personnel-no-result small {
        display: block;
        margin-top: 4px;
        color: #98a2b3;
        font-size: 10px;
    }


@keyframes jsnPersonnelNoResultEnter {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1050px) {

    .jsn-personnel-search-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}


@media (max-width: 700px) {

    .jsn-personnel-search-header {
        grid-template-columns: 1fr;
        text-align: center;
    }


    .jsn-personnel-search-header-icon {
        margin: 0 auto;
    }


    .jsn-personnel-search-add-area {
        justify-content: center;
    }


    .jsn-personnel-search-grid {
        grid-template-columns: 1fr;
    }


    .jsn-personnel-search-footer {
        align-items: stretch;
        flex-direction: column;
    }


    .jsn-personnel-search-buttons {
        flex-direction: column;
        align-items: stretch;
    }


    .jsn-personnel-clear-button,
    .jsn-personnel-search-button {
        width: 100%;
    }
}

.jsn-personnel-add-button {
    min-width: 165px;
    min-height: 54px;
    padding: 7px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #15803d !important;
    text-decoration: none !important;
    background: linear-gradient( 135deg, #ecfdf3, #ffffff );
    border: 1px solid #bbf7d0;
    border-radius: 13px;
    box-shadow: 0 8px 18px rgba(21,128,61,.09);
    transition: transform 180ms ease, box-shadow 180ms ease;
}


    .jsn-personnel-add-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 13px 25px rgba(21,128,61,.16);
    }


.jsn-personnel-add-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient( 135deg, #22c55e, #15803d );
    border-radius: 10px;
    box-shadow: 0 7px 15px rgba(21,128,61,.22);
}


.jsn-personnel-add-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}


    .jsn-personnel-add-text strong {
        color: #166534;
        font-size: 11px;
    }


    .jsn-personnel-add-text small {
        color: #86a28e;
        font-size: 9px;
    }



/* =========================================================
   PERSONNEL FORM
========================================================= */

.jsn-personnel-form-page,
.jsn-personnel-form-page *,
.jsn-personnel-form-page *::before,
.jsn-personnel-form-page *::after {
    box-sizing: border-box;
}

.jsn-personnel-form-page {
    width: 100%;
    direction: rtl;
    color: #344054;
}


/* HERO */

.jsn-pf-hero {
    position: relative;
    min-height: 130px;
    padding: 20px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 16px;
    background: linear-gradient( 135deg, #ffffff 0%, #fffaf5 52%, #ffe8d0 100% );
    border: 1px solid #f0dfce;
    border-radius: 23px;
    box-shadow: 0 15px 42px rgba(31,42,68,.07);
    overflow: hidden;
    animation: jsnPfEnter 550ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes jsnPfEnter {

    from {
        opacity: 0;
        transform: translateY(-15px) scale(.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


.jsn-pf-hero-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    left: -150px;
    top: -230px;
    background: radial-gradient( circle, rgba(245,124,0,.20), transparent 68% );
    pointer-events: none;
    animation: jsnPfGlow 6s ease-in-out infinite;
}

@keyframes jsnPfGlow {

    0%, 100% {
        transform: scale(1);
        opacity: .65;
    }

    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}


.jsn-pf-hero-icon {
    position: relative;
    z-index: 2;
    width: 67px;
    height: 67px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    background: linear-gradient( 135deg, #ff9b35, #eb7300 );
    border-radius: 19px;
    box-shadow: 0 15px 30px rgba(239,125,1,.28);
    animation: jsnPfHeroIcon 3.3s ease-in-out infinite;
}


@keyframes jsnPfHeroIcon {

    0%, 100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-5px) rotate(-4deg);
    }
}


.jsn-pf-hero-title {
    position: relative;
    z-index: 2;
}


    .jsn-pf-hero-title > span {
        display: inline-flex;
        margin-bottom: 5px;
        padding: 4px 9px;
        color: #d96d00;
        font-size: 11px;
        font-weight: 900;
        background: #fff0df;
        border-radius: 8px;
    }


    .jsn-pf-hero-title h2 {
        margin: 0 0 5px;
        color: #1f2937;
        font-size: 20px;
        font-weight: 900;
    }


    .jsn-pf-hero-title p {
        margin: 0;
        color: #7b8798;
        font-size: 12px;
        line-height: 1.9;
    }


/* PHOTO */

.jsn-pf-photo-area {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
}


.jsn-pf-current-photo {
    position: relative;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 3px solid #fff;
    border-radius: 19px;
    box-shadow: 0 0 0 2px rgba(245,124,0,.16), 0 10px 25px rgba(31,42,68,.14);
    overflow: hidden;
}


    .jsn-pf-current-photo img {
        position: relative;
        z-index: 2;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        border-radius: 16px !important;
    }


.jsn-pf-photo-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
    font-size: 24px;
    background: linear-gradient( 135deg, #fff4e8, #ffffff );
}


.jsn-pf-top-save,
.jsn-pf-save-button {
    min-height: 46px;
    padding: 0 16px !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    background: linear-gradient( 135deg, #f68c17, #e66d00 ) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 22px rgba(239,125,1,.26);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}


    .jsn-pf-top-save:hover,
    .jsn-pf-save-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 29px rgba(239,125,1,.34);
    }


/* QUICK */

.jsn-pf-quick-actions {
    margin: 13px 0;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 15px;
    box-shadow: 0 7px 20px rgba(31,42,68,.045);
}


.jsn-pf-quick-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    font-size: 11px;
}


    .jsn-pf-quick-info i {
        color: #2563eb;
    }


.jsn-pf-auto-button {
    min-height: 40px;
    padding: 0 13px !important;
    color: #7c3aed !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    background: #f5f3ff !important;
    border: 1px solid #ddd6fe !important;
    border-radius: 10px !important;
    cursor: pointer;
}


/* SECTIONS */

.jsn-pf-section {
    margin-bottom: 13px;
    background: #fff;
    border: 1px solid #e5eaf0;
    border-radius: 18px;
    box-shadow: 0 9px 25px rgba(31,42,68,.045);
    overflow: hidden;
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms ease;
}


    .jsn-pf-section:hover {
        border-color: #edd9c4;
        box-shadow: 0 12px 31px rgba(31,42,68,.065);
    }


.jsn-pf-section-header {
    width: 100%;
    min-height: 70px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: inherit;
    font-family: inherit;
    text-align: right;
    background: linear-gradient( 135deg, #fbfcfd, #ffffff );
    border: 0;
    cursor: pointer;
}


.jsn-pf-section-icon {
    width: 43px;
    min-width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border-radius: 12px;
}


    .jsn-pf-section-icon.organization {
        color: #2563eb;
        background: #eff6ff;
    }

    .jsn-pf-section-icon.identity {
        color: #0891b2;
        background: #ecfeff;
    }

    .jsn-pf-section-icon.systems {
        color: #d97706;
        background: #fff7ed;
    }

    .jsn-pf-section-icon.contract {
        color: #7c3aed;
        background: #f5f3ff;
    }

    .jsn-pf-section-icon.salary {
        color: #15803d;
        background: #ecfdf3;
    }

    .jsn-pf-section-icon.credit {
        color: #b45309;
        background: #fff7ed;
    }

    .jsn-pf-section-icon.bank {
        color: #0369a1;
        background: #f0f9ff;
    }

    .jsn-pf-section-icon.insurance {
        color: #475569;
        background: #f1f5f9;
    }

    .jsn-pf-section-icon.contact {
        color: #e11d48;
        background: #fff1f2;
    }

    .jsn-pf-section-icon.education {
        color: #4f46e5;
        background: #eef2ff;
    }

    .jsn-pf-section-icon.upload {
        color: #9333ea;
        background: #faf5ff;
    }


.jsn-pf-section-heading {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


    .jsn-pf-section-heading strong {
        color: #344054;
        font-size: 13px;
        font-weight: 900;
    }


    .jsn-pf-section-heading small {
        font-size: 10px;
    }


.jsn-pf-chevron {
    transition: transform 300ms ease;
}


.jsn-pf-section.is-collapsed
.jsn-pf-chevron {
    transform: rotate(180deg);
}


/* BODY */

.jsn-pf-section-body {
    max-height: 5000px;
    padding: 15px;
    opacity: 1;
    border-top: 1px solid #edf0f4;
    transition: max-height 450ms ease, opacity 250ms ease, padding 300ms ease;
}


.jsn-pf-section.is-collapsed
.jsn-pf-section-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border-top: 0;
    overflow: hidden;
}


/* GRID */

.jsn-pf-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
}


.jsn-pf-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.jsn-pf-field-wide {
    grid-column: span 2;
}


.jsn-pf-field-full {
    grid-column: 1 / -1;
}


.jsn-pf-field > label {
    min-height: 25px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #475467;
    font-size: 11px;
    font-weight: 800;
}


    .jsn-pf-field > label i {
        color: #f57c00;
    }


    .jsn-pf-field > label b {
        color: #dc2626;
        font-size: 14px;
    }


/* CONTROLS */

.jsn-pf-control {
    width: 100% !important;
    height: 47px !important;
    min-width: 0;
    padding: 0 12px !important;
    color: #344054 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e7ee !important;
    border-radius: 11px !important;
    outline: none !important;
    margin: 0 !important;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}


    .jsn-pf-control:hover {
        border-color: #d6dce5 !important;
    }


    .jsn-pf-control:focus {
        background: #fff !important;
        border-color: rgba(245,124,0,.6) !important;
        box-shadow: 0 0 0 4px rgba(245,124,0,.08) !important;
        transform: translateY(-1px);
    }


.jsn-pf-ltr {
    direction: ltr !important;
    text-align: left !important;
}


/* MONEY */

.jsn-pf-money {
    direction: ltr !important;
    text-align: left !important;
    font-weight: 700 !important;
    color: #166534 !important;
    background: #f7fff9 !important;
    border-color: #d7f4df !important;
}


    .jsn-pf-money:focus {
        border-color: #86d99a !important;
        box-shadow: 0 0 0 4px rgba(34,197,94,.08) !important;
    }


/* TEXTAREA */

.jsn-pf-textarea {
    height: 140px !important;
    padding: 11px 12px !important;
    resize: vertical;
    line-height: 1.9;
}


/* VALIDATOR */

.jsn-pf-validator {
    display: block;
    margin-top: 2px;
    color: #dc2626 !important;
    font-size: 10px;
    font-weight: 700;
}


/* CHECKBOX */

.jsn-pf-checkbox-field {
    justify-content: flex-end;
}


.jsn-pf-switch-card {
    min-height: 69px;
    padding: 9px 11px;
    display: flex !important;
    align-items: center;
    gap: 9px;
    background: #fafbfc;
    border: 1px solid #e5e9ef;
    border-radius: 12px;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}


    .jsn-pf-switch-card:hover {
        background: #fff9f3;
        border-color: #ffd5a8;
        transform: translateY(-2px);
    }


    .jsn-pf-switch-card input {
        width: 18px;
        height: 18px;
        accent-color: #f57c00;
    }


.jsn-pf-switch-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f57c00;
    background: #fff2e3;
    border-radius: 10px;
}


.jsn-pf-switch-card > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.jsn-pf-switch-card strong {
    color: #344054;
    font-size: 11px;
}


.jsn-pf-switch-card small {
    color: #98a2b3;
    font-size: 9px;
}


/* LISTBOX */

.jsn-pf-listbox {
    width: 100% !important;
    min-height: 140px;
    padding: 6px;
    direction: rtl;
    color: #475467;
    font-family: inherit;
    font-size: 12px;
    background: #f8fafc;
    border: 1px solid #e2e7ee;
    border-radius: 11px;
    outline: none;
}


    .jsn-pf-listbox option {
        padding: 7px;
        border-radius: 7px;
    }


        .jsn-pf-listbox option:checked {
            color: #fff;
            background: linear-gradient( 135deg, #f68c17, #e66d00 );
        }


/* SYSTEMS */

.jsn-pf-system-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}


.jsn-pf-system-card {
    min-height: 85px;
    padding: 12px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
    background: #fafbfc;
    border: 1px solid #e5e9ef;
    border-radius: 14px;
}


.jsn-pf-system-icon {
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 12px;
}


.jsn-pf-system-card.sales
.jsn-pf-system-icon {
    background: linear-gradient( 135deg, #22c55e, #15803d );
}


.jsn-pf-system-card.peyk
.jsn-pf-system-icon {
    background: linear-gradient( 135deg, #f59e0b, #e66d00 );
}


.jsn-pf-system-card > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.jsn-pf-system-card strong {
    color: #344054;
    font-size: 12px;
}


.jsn-pf-system-button {
    min-height: 40px;
    padding: 0 11px !important;
    color: #475467 !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    background: #fff !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 9px !important;
    cursor: pointer;
}


/* UPLOAD */

.jsn-pf-upload-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}


.jsn-pf-upload-card {
    min-height: 105px;
    padding: 14px;
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 11px;
    background: linear-gradient( 135deg, #fafbfc, #ffffff );
    border: 1px dashed #d4dae3;
    border-radius: 14px;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}


    .jsn-pf-upload-card:hover {
        background: #fff9f3;
        border-color: #f3b26f;
        transform: translateY(-2px);
    }


.jsn-pf-upload-icon {
    width: 49px;
    height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 18px;
    background: #eff6ff;
    border-radius: 13px;
}


    .jsn-pf-upload-icon.signature {
        color: #7c3aed;
        background: #f5f3ff;
    }


.jsn-pf-upload-card > span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.jsn-pf-upload-card strong {
    color: #344054;
    font-size: 12px;
}


.jsn-pf-upload-card small {
    color: #98a2b3;
    font-size: 9px;
}


.jsn-pf-file-input {
    grid-column: 1 / -1;
    width: 100%;
    padding: 7px;
    color: #667085;
    font-family: inherit;
    font-size: 10px;
    background: #f8fafc;
    border: 1px solid #e5e9ef;
    border-radius: 9px;
}


/* REPORT */

.jsn-pf-report-viewer {
    min-height: 80px;
    padding: 10px;
    background: #f8fafc;
    border: 1px dashed #d7dde6;
    border-radius: 12px;
}


/* SAVE BAR */

.jsn-pf-save-bar {
    position: sticky;
    bottom: 12px;
    z-index: 100;
    margin-top: 15px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(255,255,255,.94);
    border: 1px solid #e4e9ef;
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(31,42,68,.13);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.jsn-pf-save-info {
    display: flex;
    align-items: center;
    gap: 9px;
}


    .jsn-pf-save-info > span {
        width: 41px;
        height: 41px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #15803d;
        background: #ecfdf3;
        border-radius: 11px;
    }


    .jsn-pf-save-info > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }


    .jsn-pf-save-info strong {
        color: #344054;
        font-size: 11px;
    }


    .jsn-pf-save-info small {
        color: #98a2b3;
        font-size: 9px;
    }


.jsn-pf-save-button {
    min-width: 190px;
}


/* MOBILE */

@media (max-width:1100px) {

    .jsn-pf-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}


@media (max-width:750px) {

    .jsn-pf-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }


    .jsn-pf-hero-icon {
        margin: 0 auto;
    }


    .jsn-pf-photo-area {
        justify-content: center;
        flex-wrap: wrap;
    }


    .jsn-pf-quick-actions {
        align-items: stretch;
        flex-direction: column;
    }


    .jsn-pf-grid,
    .jsn-pf-system-grid,
    .jsn-pf-upload-grid {
        grid-template-columns: 1fr;
    }


    .jsn-pf-field-wide,
    .jsn-pf-field-full {
        grid-column: auto;
    }


    .jsn-pf-system-card {
        grid-template-columns: auto 1fr;
    }


    .jsn-pf-system-button {
        grid-column: 1 / -1;
    }


    .jsn-pf-save-bar {
        position: static;
        align-items: stretch;
        flex-direction: column;
    }


    .jsn-pf-save-button {
        width: 100%;
        min-width: 0;
    }
}



.finance-section {
    direction: rtl;
    margin-bottom: 25px;
}


/* Header */

.finance-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
    padding: 0 4px;
}

    .finance-section-head strong {
        display: block;
        font-size: 15px;
        font-weight: 900;
        color: #0f172a;
    }

    .finance-section-head span {
        display: block;
        margin-top: 3px;
        color: #94a3b8;
        font-size: 10px;
    }

.finance-live {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 30px;
    background: rgba(34,197,94,.08);
    color: #16a34a;
    font-size: 10px;
    font-weight: 700;
}

    .finance-live i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 10px #22c55e;
        animation: livePulse 1.6s ease-in-out infinite;
    }


/* Cards container */

.account-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    perspective: 1400px;
}


/* Main Card */

.finance-card {
    --accent: #3b82f6;
    --accent2: #60a5fa;
    --soft: rgba(59,130,246,.11);
    position: relative;
    min-height: 135px;
    display: flex;
    align-items: center;
    padding: 21px 22px;
    border-radius: 23px;
    overflow: hidden;
    background: linear-gradient( 135deg, rgba(255,255,255,.96), rgba(255,255,255,.78) );
    border: 1px solid rgba(255,255,255,.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 15px 40px rgba(15,23,42,.08), 0 3px 10px rgba(15,23,42,.04), inset 0 1px 0 rgba(255,255,255,.95);
    opacity: 0;
    transform: translateY(35px) scale(.90) rotateX(11deg);
    transform-style: preserve-3d;
    transition: transform .20s ease-out, box-shadow .35s ease, border-color .35s ease;
    animation: cardEntrance .9s cubic-bezier(.16,1,.3,1) forwards;
}

    .finance-card:nth-child(1) {
        animation-delay: .05s;
    }

    .finance-card:nth-child(2) {
        animation-delay: .16s;
    }

    .finance-card:nth-child(3) {
        animation-delay: .27s;
    }


    .finance-card:hover {
        box-shadow: 0 28px 58px rgba(15,23,42,.15), 0 8px 22px rgba(15,23,42,.07), 0 0 35px var(--soft);
    }


    /* Background Orb */

    .finance-card::before {
        content: "";
        position: absolute;
        width: 210px;
        height: 210px;
        right: -100px;
        top: -115px;
        border-radius: 50%;
        background: radial-gradient( circle, var(--accent), transparent 68% );
        opacity: .16;
        animation: blobMove 5s ease-in-out infinite alternate;
        pointer-events: none;
    }


    /* Animated bottom line */

    .finance-card::after {
        content: "";
        position: absolute;
        right: 6%;
        bottom: 0;
        width: 88%;
        height: 3px;
        border-radius: 20px;
        background: linear-gradient( 90deg, transparent, var(--accent), var(--accent2), var(--accent), transparent );
        background-size: 220% 100%;
        box-shadow: 0 0 14px var(--accent);
        animation: bottomLight 3s linear infinite;
    }


/* Moving Glass Shine */

.card-glow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

    .card-glow::before {
        content: "";
        position: absolute;
        width: 85px;
        height: 220%;
        top: -55%;
        left: -140px;
        transform: rotate(22deg);
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), rgba(255,255,255,.68), rgba(255,255,255,.12), transparent );
        animation: movingShine 4.7s ease-in-out infinite;
    }


    /* Floating glow */

    .card-glow::after {
        content: "";
        position: absolute;
        width: 80px;
        height: 80px;
        left: 3%;
        bottom: -40px;
        border-radius: 50%;
        background: var(--accent);
        opacity: .10;
        filter: blur(25px);
        animation: glowOrbit 6s ease-in-out infinite;
    }


/* Icon */

.finance-icon {
    position: relative;
    z-index: 5;
    width: 66px;
    min-width: 66px;
    height: 66px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 17px;
    border-radius: 20px;
    color: var(--accent);
    font-size: 29px;
    font-weight: 900;
    background: linear-gradient( 145deg, rgba(255,255,255,.98), var(--soft) );
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 12px 25px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.95);
    transform: translateZ(20px);
    animation: iconFloat 3.3s ease-in-out infinite;
    transition: transform .35s ease, box-shadow .35s ease;
}


    /* Ring around icon */

    .finance-icon::before {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 25px;
        border: 1px solid var(--accent);
        opacity: .16;
        animation: iconRing 2.7s ease-out infinite;
    }


.finance-card:hover .finance-icon {
    transform: translateZ(30px) translateY(-4px) rotate(-4deg) scale(1.08);
    box-shadow: 0 18px 32px rgba(15,23,42,.13), 0 0 25px var(--soft);
}


/* Info */

.finance-info {
    position: relative;
    z-index: 6;
    flex: 1;
    transform: translateZ(15px);
}


.finance-title {
    display: inline-block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}


    .finance-title::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-left: 6px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 9px var(--accent);
        animation: statusDot 1.8s ease-in-out infinite;
    }


/* Value */

.finance-value {
    direction: rtl;
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 27px;
    line-height: 38px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.7px;
    white-space: nowrap;
    animation: valuePop .85s cubic-bezier(.16,1,.3,1) .32s both;
}


    .finance-value span {
        position: relative;
        display: inline-block;
        text-shadow: 0 1px 0 #fff, 0 5px 15px rgba(15,23,42,.08);
    }


        .finance-value span::after {
            content: "";
            position: absolute;
            left: -100%;
            top: 0;
            width: 38%;
            height: 100%;
            background: linear-gradient( 90deg, transparent, rgba(255,255,255,.85), transparent );
            transform: skewX(-20deg);
            animation: numberShine 5.4s ease-in-out infinite;
        }


    .finance-value small {
        font-size: 10px;
        font-weight: 600;
        color: #94a3b8;
    }


.finance-subtitle {
    margin-top: 3px;
    color: #94a3b8;
    font-size: 10px;
}


/* Percentage badge */

.finance-percent {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 7px;
    padding: 4px 9px;
    border-radius: 20px;
    background: var(--soft);
    color: var(--accent);
    font-size: 9px;
    font-weight: 700;
    animation: percentEnter .7s ease .7s both;
}


/* Progress */

.finance-progress {
    width: 100%;
    height: 4px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(148,163,184,.14);
}


.finance-progress-bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient( 90deg, var(--accent), var(--accent2) );
    box-shadow: 0 0 10px var(--accent);
    transition: width 1.4s cubic-bezier(.16,1,.3,1);
}


/* Balance Badge */

.balance-badge {
    display: inline-flex;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--soft);
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}


/* Colors */

.card-bed {
    --accent: #f97316;
    --accent2: #fb923c;
    --soft: rgba(249,115,22,.11);
    background: linear-gradient( 135deg, rgba(255,255,255,.98), rgba(255,247,237,.90) );
}


.card-bes {
    --accent: #16a34a;
    --accent2: #4ade80;
    --soft: rgba(34,197,94,.11);
    background: linear-gradient( 135deg, rgba(255,255,255,.98), rgba(240,253,244,.90) );
}


.card-moein {
    --accent: #2563eb;
    --accent2: #60a5fa;
    --soft: rgba(59,130,246,.12);
    background: linear-gradient( 135deg, rgba(255,255,255,.98), rgba(239,246,255,.92) );
    box-shadow: 0 18px 45px rgba(37,99,235,.10), 0 4px 12px rgba(15,23,42,.04);
}


    .card-moein .finance-value {
        font-size: 30px;
    }


    /* Negative balance */

    .card-moein.negative {
        --accent: #dc2626;
        --accent2: #fb7185;
        --soft: rgba(239,68,68,.14);
        background: linear-gradient( 135deg, rgba(255,255,255,.99), rgba(255,241,242,.94) );
        border-color: rgba(239,68,68,.25);
        animation: cardEntrance .9s cubic-bezier(.16,1,.3,1) forwards, negativePulse 2.7s ease-in-out 1.4s infinite;
    }


        .card-moein.negative .finance-value span {
            color: #dc2626;
            text-shadow: 0 4px 16px rgba(220,38,38,.15);
        }


        .card-moein.negative .finance-icon {
            animation: iconFloat 3.3s ease-in-out infinite, dangerIcon 2s ease-in-out infinite;
        }


/* Animations */

@keyframes cardEntrance {

    0% {
        opacity: 0;
        transform: translateY(38px) scale(.88) rotateX(13deg);
        filter: blur(7px);
    }

    55% {
        opacity: 1;
        transform: translateY(-7px) scale(1.025) rotateX(-1deg);
        filter: blur(0);
    }

    75% {
        transform: translateY(2px) scale(.997);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0);
        filter: blur(0);
    }
}


@keyframes movingShine {

    0%, 68% {
        left: -140px;
        opacity: 0;
    }

    72% {
        opacity: .85;
    }

    91% {
        left: 115%;
        opacity: .5;
    }

    100% {
        left: 125%;
        opacity: 0;
    }
}


@keyframes blobMove {

    from {
        transform: translate(0,0) scale(1);
    }

    to {
        transform: translate(-32px,26px) scale(1.25);
    }
}


@keyframes bottomLight {

    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}


@keyframes glowOrbit {

    0%,100% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(100px,-55px) scale(1.4);
    }
}


@keyframes iconFloat {

    0%,100% {
        transform: translateZ(20px) translateY(0);
    }

    50% {
        transform: translateZ(20px) translateY(-5px);
    }
}


@keyframes iconRing {

    0% {
        transform: scale(.84);
        opacity: .22;
    }

    75% {
        transform: scale(1.2);
        opacity: 0;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}


@keyframes statusDot {

    0%,100% {
        transform: scale(1);
        opacity: .55;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }
}


@keyframes valuePop {

    from {
        opacity: 0;
        transform: scale(.75) translateY(8px);
    }

    70% {
        opacity: 1;
        transform: scale(1.055) translateY(-2px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


@keyframes percentEnter {

    from {
        opacity: 0;
        transform: translateY(5px) scale(.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


@keyframes numberShine {

    0%,65% {
        left: -100%;
        opacity: 0;
    }

    70% {
        opacity: .8;
    }

    88% {
        left: 130%;
        opacity: .5;
    }

    100% {
        left: 130%;
        opacity: 0;
    }
}


@keyframes negativePulse {

    0%,100% {
        box-shadow: 0 15px 40px rgba(220,38,38,.08), 0 0 0 rgba(220,38,38,0);
    }

    50% {
        box-shadow: 0 20px 50px rgba(220,38,38,.17), 0 0 32px rgba(220,38,38,.10);
    }
}


@keyframes dangerIcon {

    0%,100% {
        box-shadow: 0 12px 25px rgba(220,38,38,.08);
    }

    50% {
        box-shadow: 0 15px 32px rgba(220,38,38,.19), 0 0 24px rgba(220,38,38,.13);
    }
}


@keyframes livePulse {

    0%,100% {
        transform: scale(1);
        opacity: .6;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }
}


@media(max-width:900px) {

    .account-summary {
        grid-template-columns: 1fr;
    }
}


@media(prefers-reduced-motion:reduce) {

    .finance-card,
    .finance-icon,
    .card-glow::before,
    .card-glow::after,
    .finance-value,
    .finance-live i {
        animation: none !important;
    }
}


.finance-section {
    position: relative;
    overflow: hidden;
}

/* Header در شروع مخفی */
.finance-section-head {
    opacity: 0;
    transform: translateY(-12px);
}

/* کارت‌ها در شروع مخفی */
.finance-card {
    opacity: 1;
}

/* خط Reveal */
.finance-reveal-line {
    position: absolute;
    top: 0;
    right: -35%;
    width: 35%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.15), rgba(255,255,255,.75), rgba(255,255,255,.18), transparent );
    filter: blur(6px);
    transform: skewX(-18deg);
    opacity: 0;
}


/* Sequence */

.finance-section.reveal-active .finance-section-head {
    animation: financeHeaderReveal .08s cubic-bezier(.16,1,.3,1) forwards;
}


.finance-section.reveal-active .finance-reveal-line {
    animation: financeRevealSweep 1.15s cubic-bezier(.16,1,.3,1) .35s forwards;
}


/* کارت بدهکار */

.finance-section.reveal-active
.finance-card:nth-child(1) {
    animation: financeRevealCardLeft .85s cubic-bezier(.16,1,.3,1) .65s forwards;
}


/* کارت بستانکار */

.finance-section.reveal-active
.finance-card:nth-child(2) {
    animation: financeRevealCardCenter .90s cubic-bezier(.16,1,.3,1) .18s forwards;
}


/* کارت مانده */

.finance-section.reveal-active
.finance-card:nth-child(3) {
    animation: financeRevealBalance 1s cubic-bezier(.16,1,.3,1) .28s forwards;
}


/* Header */

@keyframes financeHeaderReveal {

    0% {
        opacity: 0;
        transform: translateY(-14px);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


/* نور عبوری */

@keyframes financeRevealSweep {

    0% {
        right: -40%;
        opacity: 0;
    }

    20% {
        opacity: .95;
    }

    75% {
        opacity: .75;
    }

    100% {
        right: 120%;
        opacity: 0;
    }
}


/* کارت اول */

@keyframes financeRevealCardLeft {

    0% {
        opacity: 1;
        transform: translateX(22px) translateY(12px) scale(.96) rotateY(-5deg);
        filter: blur(2px);
    }

    60% {
        transform: translateX(-3px) translateY(-3px) scale(1.015) rotateY(1deg);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1) rotateY(0);
        filter: blur(0);
    }
}


/* کارت دوم */

@keyframes financeRevealCardCenter {

    0% {
        opacity: 1;
        transform: translateY(20px) scale(.95) rotateX(6deg);
        filter: blur(2px);
    }

    60% {
        transform: translateY(-4px) scale(1.02) rotateX(-1deg);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0);
    }
}


/* مانده */

@keyframes financeRevealBalance {

    0% {
        opacity: 1;
        transform: translateX(-18px) translateY(14px) scale(.93) rotateY(5deg);
        filter: blur(2px);
    }

    55% {
        transform: translateX(3px) translateY(-5px) scale(1.025) rotateY(-1deg);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1) rotateY(0);
    }
}


.finance-value span.finance-number-finish {
    animation: financeNumberFinish .65s cubic-bezier(.16,1,.3,1);
}


@keyframes financeNumberFinish {

    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    35% {
        transform: scale(1.10);
        filter: brightness(1.35);
        text-shadow: 0 0 10px var(--accent), 0 0 22px var(--soft), 0 5px 15px rgba(15,23,42,.08);
    }

    70% {
        transform: scale(.985);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}


.finance-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 28px;
    background: radial-gradient( circle at 20% 20%, rgba(249,115,22,.055), transparent 35% ), radial-gradient( circle at 55% 80%, rgba(34,197,94,.045), transparent 38% ), radial-gradient( circle at 90% 25%, rgba(59,130,246,.055), transparent 35% );
    animation: financeAmbientBackground 8s ease-in-out infinite alternate;
}


@keyframes financeAmbientBackground {

    0% {
        transform: scale(1) translate(0,0);
        filter: blur(0);
    }

    100% {
        transform: scale(1.025) translate(3px,-2px);
        filter: blur(1px);
    }
}

.finance-card {
    --mouse-x: 50%;
    --mouse-y: 50%;
}


.mouse-light {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient( 180px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,.38), rgba(255,255,255,.12) 30%, transparent 65% );
    transition: opacity .25s ease;
}


.finance-card:hover .mouse-light {
    opacity: 1;
}


.jsn-ledger-card {
    position: relative;
}


    .jsn-ledger-card.ledger-arrived {
        animation: ledgerArrival .75s cubic-bezier(.16,1,.3,1);
    }


@keyframes ledgerArrival {

    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    35% {
        transform: scale(1.012);
        filter: brightness(1.08);
        box-shadow: 0 12px 35px rgba(249,115,22,.14);
    }

    70% {
        transform: scale(.997);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}