:root {
    --mf-sidebar-width: 280px;
}

body {
    background: #f5f7fb;
    color: #172033;
}

.auth-shell {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f766e 0%, #155e75 48%, #334155 100%);
}

.auth-tenant-brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.15rem;
    color: #172033;
    text-decoration: none;
}

.auth-tenant-brand:hover {
    color: #172033;
}

.auth-tenant-brand img,
.auth-tenant-brand span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 12px;
    background: var(--tenant-primary, #155e75);
    color: #fff;
    font-weight: 900;
    object-fit: cover;
}

.auth-tenant-brand strong {
    min-width: 0;
    color: #172033;
    font-size: 1.08rem;
    line-height: 1.2;
}

.app-shell {
    min-height: 100vh;
}

.sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--mf-sidebar-width);
    width: var(--mf-sidebar-width);
    min-height: 100vh;
    background: #0f172a;
    color: #e2e8f0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(148, 163, 184, .58) rgba(15, 23, 42, .6);
    scrollbar-width: thin;
}

.sidebar > .nav {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
    overscroll-behavior: contain;
    padding-bottom: 0;
    scrollbar-color: rgba(148, 163, 184, .45) rgba(15, 23, 42, .35);
    scrollbar-width: thin;
}

.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, .55);
}

.sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, .58);
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(203, 213, 225, .78);
}

.sidebar .nav-link {
    color: #cbd5e1;
    border-radius: .5rem;
    padding: .65rem .85rem;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
}

.sidebar .nav-group-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    min-width: 0;
    text-align: left;
}

.sidebar .nav-group-toggle span,
.sidebar .nav-link span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.sidebar .nav-group-toggle .nav-group-caret {
    transition: transform .2s ease;
}

.sidebar .nav-group-toggle[aria-expanded="true"] .nav-group-caret {
    transform: rotate(90deg);
}

.sidebar .nav-collapse {
    gap: .2rem;
    margin-top: .15rem;
}

.sidebar .nav-collapse.collapse:not(.show) {
    display: none;
}

.sidebar .nav-collapse.show,
.sidebar .nav-collapse.collapsing {
    display: grid;
}

.sidebar .nav-section-title {
    margin: .85rem .85rem .2rem;
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.sidebar .nav-sublink {
    margin-left: .55rem;
    padding-left: 1rem;
    border-left: 2px solid rgba(148, 163, 184, .22);
    width: calc(100% - .55rem);
}

.header-user-menu {
    align-items: center;
    display: inline-flex;
    gap: .55rem;
    min-height: 38px;
    padding: .25rem .65rem .25rem .3rem;
}

.header-user-avatar {
    border: 2px solid #fff;
    border-radius: 9px;
    flex: 0 0 auto;
    height: 34px;
    object-fit: cover;
    width: 34px;
}

.header-user-avatar-fallback {
    align-items: center;
    background: #cff4fc;
    color: #155e75;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 900;
    justify-content: center;
}

.account-profile-photo {
    border: 3px solid #fff;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
    flex: 0 0 auto;
    height: 92px;
    object-fit: cover;
    width: 92px;
}

.account-profile-photo-fallback {
    align-items: center;
    background: linear-gradient(135deg, #155e75, #22c55e);
    color: #fff;
    display: inline-flex;
    font-size: 1.7rem;
    font-weight: 900;
    justify-content: center;
}

.header-user-copy {
    line-height: 1.05;
    max-width: 170px;
    min-width: 0;
    text-align: left;
}

.header-user-copy strong,
.header-user-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-user-copy strong {
    color: #172033;
    font-size: .9rem;
    font-weight: 800;
}

.header-user-copy small {
    color: #64748b;
    font-size: .73rem;
}

.dropdown-menu-group-title {
    align-items: center;
    color: #172033;
    display: flex;
    font-weight: 800;
    padding-bottom: .35rem;
}

.dropdown-section-toggle {
    gap: .45rem;
    justify-content: space-between;
    padding-bottom: .55rem;
    padding-top: .55rem;
    width: 100%;
}

.dropdown-section-toggle span {
    align-items: center;
    display: flex;
    min-width: 0;
}

.dropdown-section-caret {
    transition: transform .18s ease;
}

.dropdown-section-toggle:not(.collapsed) .dropdown-section-caret {
    transform: rotate(90deg);
}

.dropdown-subitem {
    font-size: .92rem;
    padding-left: 2.35rem;
}

.role-preview-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
    color: #172033;
    min-width: min(360px, calc(100vw - 2rem));
    padding: .75rem;
}

.role-preview-card-head {
    align-items: center;
    display: flex;
    gap: .7rem;
    padding: .15rem .1rem .65rem;
}

.role-preview-card-icon,
.role-preview-row-icon {
    align-items: center;
    background: #e0f2fe;
    border-radius: 10px;
    color: #0369a1;
    display: inline-flex;
    flex: 0 0 auto;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.role-preview-card-head strong,
.role-preview-row-copy strong {
    display: block;
    font-size: .94rem;
    font-weight: 900;
    line-height: 1.15;
}

.role-preview-card-head small,
.role-preview-row-copy small {
    color: #64748b;
    display: block;
    font-size: .76rem;
    line-height: 1.25;
    margin-top: .15rem;
}

.role-preview-active-note {
    align-items: center;
    background: #0f766e;
    border-radius: 12px;
    color: #fff;
    display: flex;
    gap: .65rem;
    justify-content: space-between;
    margin-bottom: .65rem;
    padding: .65rem;
}

.role-preview-active-note small {
    color: rgba(255, 255, 255, .78);
    display: block;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.role-preview-active-note strong {
    display: block;
    font-size: .92rem;
}

.role-preview-select-form {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: grid;
    gap: .55rem;
    padding: .7rem;
}

.role-preview-select-form label {
    color: #475569;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    margin: 0;
    text-transform: uppercase;
}

.role-preview-select-form .form-select {
    border-color: #cbd5e1;
    color: #172033;
    font-size: .9rem;
    font-weight: 800;
    min-height: 44px;
}

.role-preview-select-form small {
    color: #64748b;
    font-size: .74rem;
    line-height: 1.35;
}

.role-preview-select-form .btn {
    font-weight: 900;
    min-height: 42px;
}

.role-preview-list {
    display: grid;
    gap: .45rem;
}

.role-preview-row {
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    gap: .65rem;
    padding: .55rem;
    text-align: left;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.role-preview-row:hover {
    border-color: #bfdbfe;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.role-preview-row.is-current {
    background: #ecfdf5;
    border-color: #86efac;
}

.role-preview-row-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.role-preview-row .btn {
    flex: 0 0 auto;
    font-weight: 800;
    padding: .32rem .62rem;
}

.role-preview-current {
    background: #16a34a;
    border-radius: 999px;
    color: #fff;
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 900;
    padding: .28rem .58rem;
}

.role-preview-divider {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    padding: .4rem .1rem .05rem;
    text-transform: uppercase;
}

.content {
    min-width: 0;
}

.min-w-0 {
    min-width: 0;
}

.pwa-install-button {
    display: none !important;
    align-items: center;
    gap: .25rem;
}

@media (max-width: 767.98px) {
    .pwa-install-button {
        display: inline-flex !important;
    }
}

.pwa-install-ready .pwa-install-button:not(.btn-warning) {
    box-shadow: 0 0 0 .18rem rgba(20, 184, 166, .18);
}

.pwa-installed .pwa-install-button {
    opacity: .86;
}

.pwa-install-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1050;
    min-height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: #155e75;
    color: #fff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .24);
    font-weight: 700;
}

.pwa-offline-badge {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 1060;
    transform: translateX(-50%);
    padding: .55rem .85rem;
    border-radius: 999px;
    background: #172033;
    color: #fff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .22);
    font-size: .85rem;
    font-weight: 700;
}

.pwa-install-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
}

.pwa-install-summary {
    display: flex;
    gap: .85rem;
    align-items: center;
    padding: 1rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #ecfdf5, #f8fafc);
}

.pwa-install-summary > i {
    display: inline-grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #155e75;
    color: #fff;
    font-size: 1.35rem;
}

.pwa-install-summary strong,
.pwa-install-summary span {
    display: block;
}

.pwa-install-summary strong {
    color: #172033;
}

.pwa-install-summary span {
    color: #475569;
    line-height: 1.45;
}

.pwa-install-steps {
    display: grid;
    gap: .65rem;
    margin: 1rem 0;
    padding-left: 1.25rem;
    color: #475569;
    line-height: 1.6;
}

.pwa-install-note {
    padding: .85rem 1rem;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-weight: 700;
}

.mobile-bottom-nav,
.mobile-sidebar-backdrop {
    display: none;
}

.metric-card {
    border: 0;
    border-radius: .75rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.operations-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 1.8rem);
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, .2), transparent 28%),
        linear-gradient(135deg, #0f172a, #155e75);
    color: #fff;
    box-shadow: 0 22px 58px rgba(15, 23, 42, .18);
}

.operations-eyebrow,
.operations-panel-head span,
.operations-table-head span,
.operations-link-card span,
.operations-metric span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.operations-eyebrow {
    display: inline-block;
    margin-bottom: .55rem;
    color: #fde68a;
}

.operations-hero h2 {
    max-width: 760px;
    margin-bottom: .65rem;
    font-size: clamp(1.9rem, 4vw, 3.4rem);
    font-weight: 900;
    line-height: 1;
}

.operations-hero p {
    max-width: 760px;
    color: rgba(255, 255, 255, .82);
    line-height: 1.65;
}

.operations-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.operations-hero-panel {
    display: grid;
    gap: .75rem;
    align-content: center;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
}

.operations-hero-panel div {
    padding: .85rem;
    border-radius: 8px;
    background: rgba(15, 23, 42, .28);
}

.operations-hero-panel span,
.operations-hero-panel strong {
    display: block;
}

.operations-hero-panel span {
    color: rgba(255, 255, 255, .68);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.operations-hero-panel strong {
    color: #fff;
    font-size: clamp(1.15rem, 2vw, 1.6rem);
}

.operations-link-card {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(280px, 1.15fr);
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
}

.operations-link-card strong {
    display: block;
    color: #172033;
    font-size: 1.2rem;
}

.operations-link-card p {
    margin: .25rem 0 0;
    color: #64748b;
}

.operations-link-copy {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.operations-link-copy .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.operations-link-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.operations-referral-toggle,
.operations-referral-copy {
    grid-column: 1 / -1;
}

.operations-referral-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .75rem;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: .92rem;
}

.operations-referral-copy {
    padding-top: .15rem;
}

.operations-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
}

.operations-metric {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    min-height: 150px;
    padding: 1rem;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
}

.operations-metric strong,
.operations-metric small {
    display: block;
}

.operations-metric strong {
    margin: .35rem 0 .25rem;
    color: #172033;
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.08;
}

.operations-metric small {
    color: #64748b;
}

.operations-metric > i {
    display: inline-grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    font-size: 1.35rem;
}

.operations-metric.members > i {
    background: #e0f2fe;
    color: #0369a1;
}

.operations-metric.savings > i {
    background: #ecfdf5;
    color: #047857;
}

.operations-metric.due > i {
    background: #fffbeb;
    color: #b45309;
}

.operations-metric.loans > i {
    background: #eef2ff;
    color: #4338ca;
}

.operations-panel {
    overflow: hidden;
    padding: 1rem;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
}

.operations-focus-card {
    overflow: hidden;
    padding: 1rem;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
}

.operations-focus-header,
.operations-tab-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.operations-focus-header span:first-child,
.operations-tab-head span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.operations-focus-header h3,
.operations-tab-head h3 {
    margin: .15rem 0 0;
    color: #172033;
    font-size: 1.05rem;
    font-weight: 900;
}

.operations-focus-header p {
    max-width: 680px;
    margin: .25rem 0 0;
    color: #64748b;
}

.operations-tab-head > i {
    color: #0f766e;
    font-size: 1.45rem;
}

.operations-tab-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}

.operations-tab-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.55rem;
    height: 2.55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #0f766e;
    background: #ecfdf5;
    font-size: 1.35rem;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.operations-tab-shortcut:hover,
.operations-tab-shortcut:focus-visible {
    color: #0f766e;
    border-color: #99f6e4;
    background: #d1fae5;
    box-shadow: 0 10px 24px rgba(15, 118, 110, .16);
    transform: translateY(-1px);
}

.operations-tab-shortcut.is-static {
    opacity: .65;
    pointer-events: none;
}

.operations-tab-head.has-shortcut > div:first-child {
    min-width: 0;
}

.operations-focus-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .35rem;
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.operations-focus-tabs button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 42px;
    padding: .55rem .75rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    font-weight: 900;
}

.operations-focus-tabs button:hover {
    border-color: #bae6fd;
    background: #eff6ff;
    color: #0369a1;
}

.operations-focus-tabs button.active {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
}

.operations-focus-tabs button em {
    min-width: 24px;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    font-size: .76rem;
    font-style: normal;
    text-align: center;
}

.operations-focus-tabs button.active em {
    background: rgba(255, 255, 255, .18);
}

.operations-tab-pane {
    animation: operationsTabIn .16s ease-out;
}

.operations-snapshot-card {
    margin-top: -.35rem;
}

.operations-snapshot-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.25fr) repeat(2, minmax(180px, .85fr));
    gap: .75rem;
}

.operations-progress-panel,
.operations-snapshot-stat {
    padding: .95rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.operations-progress-panel > div:first-child,
.operations-snapshot-stat {
    display: grid;
    gap: .2rem;
}

.operations-progress-panel span,
.operations-snapshot-stat span {
    color: #64748b;
    font-size: .82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.operations-progress-panel strong,
.operations-snapshot-stat strong {
    color: #172033;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 900;
}

.operations-progress-panel small {
    display: block;
    margin-top: .45rem;
    color: #64748b;
    font-weight: 800;
}

.operations-split-bar {
    overflow: hidden;
    height: 12px;
    margin-top: .8rem;
    border-radius: 999px;
    background: #e0f2fe;
}

.operations-split-bar span {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b8a6, #0f766e);
}

@keyframes operationsTabIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

.operations-panel-head,
.operations-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.operations-panel-head h3,
.operations-table-head h3 {
    margin: .15rem 0 0;
    color: #172033;
    font-size: 1.05rem;
    font-weight: 900;
}

.operations-panel-head > i {
    color: #0f766e;
    font-size: 1.45rem;
}

.operations-mix {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.operations-ring {
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(#14b8a6 var(--savings), #e2e8f0 0);
}

.operations-ring strong,
.operations-ring span {
    grid-column: 1;
    grid-row: 1;
}

.operations-ring strong {
    align-self: center;
    margin-top: -.8rem;
    color: #172033;
    font-size: 1.65rem;
    z-index: 1;
}

.operations-ring span {
    align-self: center;
    margin-top: 2.2rem;
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    z-index: 1;
}

.operations-ring::after {
    content: "";
    grid-column: 1;
    grid-row: 1;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: #fff;
}

.operations-mix-list,
.operations-cash-list {
    display: grid;
    gap: .65rem;
}

.operations-mix-list div,
.operations-cash-list div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem;
    border-radius: 8px;
    background: #f8fafc;
}

.operations-mix-list span,
.operations-cash-list span {
    color: #64748b;
}

.operations-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.operations-action {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 58px;
    padding: .8rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #172033;
    text-decoration: none;
    font-weight: 900;
}

.operations-action:hover {
    border-color: #14b8a6;
    background: #ecfdf5;
    color: #0f766e;
}

.operations-action i {
    color: #0f766e;
}

.operations-table th {
    color: #64748b;
    font-size: .78rem;
    text-transform: uppercase;
}

.operations-risk-pill {
    padding: .35rem .6rem;
    border-radius: 999px;
    background: #fffbeb;
    color: #92400e;
    font-size: .78rem;
    font-weight: 900;
}

.operations-due-list,
.operations-member-list,
.operations-alert-list,
.operations-transaction-list {
    display: grid;
    gap: .65rem;
}

.operations-due-list a,
.operations-due-list > div,
.operations-member-list a,
.operations-member-list > div,
.operations-alert-list div,
.operations-transaction-list a,
.operations-transaction-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #172033;
    text-decoration: none;
}

.operations-due-list a:hover,
.operations-member-list a:hover,
.operations-transaction-list a:hover {
    border-color: #14b8a6;
    background: #ecfdf5;
}

.operations-transaction-list > .operations-approval-item {
    align-items: stretch;
    padding: .7rem;
}

.operations-approval-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
    color: #172033;
    text-decoration: none;
}

.operations-approval-main:hover {
    color: #0f766e;
}

.operations-approval-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-left: auto;
}

.operations-approval-actions form {
    margin: 0;
}

.operations-approval-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border-radius: 7px;
    font-weight: 800;
}

.operations-approval-actions .btn-success,
.operations-approval-actions .btn-success span,
.operations-approval-actions .btn-success i {
    color: #ffffff !important;
}

.operations-approval-actions .btn-success {
    background: #047857;
    border-color: #047857;
}

.operations-approval-actions .btn-success:hover,
.operations-approval-actions .btn-success:focus {
    background: #065f46;
    border-color: #065f46;
}

.operations-due-list strong,
.operations-due-list span,
.operations-due-list em,
.operations-member-list strong,
.operations-member-list span,
.operations-member-list em,
.operations-alert-list strong,
.operations-alert-list span,
.operations-transaction-list strong,
.operations-transaction-list span,
.operations-transaction-list small,
.operations-transaction-list em {
    display: block;
}

.operations-due-list span,
.operations-member-list span,
.operations-alert-list span,
.operations-transaction-list span,
.operations-transaction-list small {
    color: #64748b;
    font-size: .88rem;
}

.operations-due-list em,
.operations-member-list em {
    color: #172033;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.operations-transaction-list a,
.operations-transaction-list > div {
    justify-content: flex-start;
}

.operations-transaction-list em {
    margin-left: auto;
    color: #172033;
    font-style: normal;
    text-align: right;
    white-space: nowrap;
}

.operations-transaction-list em strong {
    font-weight: 900;
}

.operations-transaction-icon {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #e0f2fe;
    color: #0369a1;
}

.operations-transaction-icon.success {
    background: #dcfce7;
    color: #15803d;
}

.operations-transaction-icon.danger {
    background: #fee2e2;
    color: #b91c1c;
}

.operations-transaction-icon.warning {
    background: #fef3c7;
    color: #92400e;
}

.operations-transaction-icon.info {
    background: #e0f2fe;
    color: #0369a1;
}

.operations-transaction-icon.primary {
    background: #dbeafe;
    color: #1d4ed8;
}

.operations-empty {
    padding: 1rem;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
}

.customer-form-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
}

.customer-form-hero,
.customer-submit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
}

.customer-form-hero {
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
}

.customer-form-tabs {
    gap: .45rem;
    padding: 1rem 1.25rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.customer-form-tabs .nav-link {
    border-radius: 8px 8px 0 0;
    color: #475569;
    font-weight: 700;
}

.customer-form-tabs .nav-link.active {
    background: #0f766e;
    color: #fff;
}

.customer-form-body {
    padding: 1.25rem;
}

.customer-form-section-title {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.customer-form-section-title h3 {
    margin: 0;
    font-size: 1rem;
}

.customer-form-section-title p {
    margin: .25rem 0 0;
    color: #64748b;
}

.customer-form-option {
    height: 100%;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.customer-toolbar {
    row-gap: .65rem;
}

.customer-filter-form {
    flex: 1 1 560px;
    min-width: 0;
    align-items: center;
}

.customer-search-input {
    min-width: 0;
}

.customer-search-form {
    flex: 0 1 360px;
    max-width: min(100%, 380px);
}

.customer-bulk-header {
    padding-bottom: .75rem;
    border-bottom: 1px solid #e2e8f0;
}

.customer-filter-select {
    flex: 0 1 140px;
    min-width: 128px;
    max-width: 160px;
}

.customer-new-btn {
    padding-inline: .65rem;
    white-space: nowrap;
}

.customer-toolbar .btn-sm,
.customer-toolbar .form-control-sm,
.customer-toolbar .form-select-sm {
    min-height: 31px;
    font-size: .82rem;
}

.customer-bulk-panel .form-label {
    margin-bottom: .25rem;
    font-size: .82rem;
}

.customer-submit-bar {
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.member-index-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);
    gap: 1rem;
    align-items: stretch;
    padding: clamp(1rem, 3vw, 1.4rem);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, .96), rgba(30, 64, 175, .9)),
        #0f766e;
    color: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
}

.member-index-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.member-index-copy span,
.member-directory-head span {
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.member-index-copy span {
    color: rgba(255, 255, 255, .72);
}

.member-index-copy h2 {
    max-width: 720px;
    margin: .35rem 0 .6rem;
    font-size: clamp(1.65rem, 4vw, 2.85rem);
    line-height: 1.05;
}

.member-index-copy p {
    max-width: 780px;
    color: rgba(255, 255, 255, .84);
}

.member-index-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .8rem;
}

.member-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.member-stat-card {
    display: grid;
    gap: .28rem;
    min-height: 142px;
    padding: .95rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(12px);
}

.member-stat-card:hover {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.member-stat-card i {
    color: #bfdbfe;
    font-size: 1.35rem;
}

.member-stat-card span,
.member-stat-card small {
    color: rgba(255, 255, 255, .78);
}

.member-stat-card strong {
    color: #fff;
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1;
}

.member-directory-card {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
}

.member-collapsible-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: .65rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.member-collapsible-panel {
    overflow: hidden;
    min-width: 0;
    border: 1px solid #dbe7f3;
    border-radius: 8px;
    background: #fff;
}

.member-collapsible-panel[open] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
    align-items: stretch;
}

.member-collapsible-stack.has-open .member-collapsible-panel:not([open]) {
    display: none;
}

.member-collapsible-summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 58px;
    padding: .75rem 1rem;
    cursor: pointer;
    list-style: none;
}

.member-collapsible-summary::-webkit-details-marker {
    display: none;
}

.member-collapsible-icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.05rem;
}

.member-collapsible-text {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.member-collapsible-text small {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.member-collapsible-text strong {
    color: #172033;
    font-size: 1rem;
    line-height: 1.25;
}

.member-collapsible-badge {
    margin-left: auto;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: .72rem;
    font-weight: 900;
    white-space: nowrap;
}

.member-collapsible-chevron {
    margin-left: .25rem;
    color: #64748b;
    transition: transform .18s ease;
}

.member-collapsible-panel[open] .member-collapsible-chevron {
    transform: rotate(180deg);
}

.member-collapsible-content {
    border-top: 1px solid #e2e8f0;
}

.member-collapsible-panel[open] .member-collapsible-content {
    border-top: 0;
    border-left: 1px solid #e2e8f0;
}

.app-filter-collapse {
    overflow: hidden;
    border: 1px solid #dbe7f3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.app-filter-summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 58px;
    padding: .75rem 1rem;
    cursor: pointer;
    list-style: none;
}

.app-filter-summary::-webkit-details-marker {
    display: none;
}

.app-filter-icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.05rem;
}

.app-filter-copy {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.app-filter-copy small,
.app-filter-copy strong,
.app-filter-copy em {
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-filter-copy small {
    color: #0f766e;
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.app-filter-copy strong {
    color: #111827;
    font-size: 1.02rem;
    font-weight: 900;
    white-space: nowrap;
}

.app-filter-copy em {
    color: #64748b;
    font-size: .8rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.35;
}

.app-filter-badge {
    margin-left: auto;
    padding: .28rem .6rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .72rem;
    font-weight: 900;
    white-space: nowrap;
}

.app-filter-chevron {
    color: #64748b;
    transition: transform .18s ease;
}

.app-filter-collapse[open] .app-filter-chevron {
    transform: rotate(180deg);
}

.app-filter-body {
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.app-filter-body > form,
.app-filter-body > .report-filter-panel,
.app-filter-body > .commodity-filter-card,
.app-filter-body > .section-filter-panel,
.app-filter-body > .audit-filter-panel,
.app-filter-body > .finance-filter-panel,
.app-filter-body > .withdrawal-filter,
.app-filter-body > .repayment-search-panel,
.app-filter-body > .receipt-filter-panel,
.app-filter-body > .super-company-filter {
    margin: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.app-filter-body > form {
    padding: 1rem;
}

@media (max-width: 767.98px) {
    .app-filter-summary {
        gap: .55rem;
        min-height: 52px;
        padding: .7rem .8rem;
    }

    .app-filter-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .app-filter-copy strong {
        font-size: .94rem;
        max-width: 46vw;
    }

    .app-filter-copy em {
        display: none;
    }

    .app-filter-badge {
        padding: .22rem .45rem;
        font-size: .68rem;
    }
}

.member-selected-pill-sm {
    margin-left: auto;
    padding: .28rem .55rem;
    font-size: .74rem;
    width: auto;
    justify-content: center;
}

.member-directory-head,
.member-filter-strip,
.member-directory-body {
    padding: 1rem 1.25rem;
}

.member-directory-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fff, #f8fafc);
}

.member-directory-head span {
    color: #64748b;
}

.member-directory-head h3 {
    margin: .15rem 0 0;
    color: #172033;
    font-size: 1.05rem;
    font-weight: 900;
}

.member-filter-strip {
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.member-filter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.member-filter-top span,
.member-filter-top strong {
    display: block;
}

.member-filter-top span {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.member-filter-top strong {
    color: #172033;
}

.member-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .75rem;
}

.member-active-filters span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 30px;
    padding: .25rem .55rem;
    border: 1px solid #bae6fd;
    border-radius: 999px;
    background: #eff6ff;
    color: #0369a1;
    font-size: .78rem;
    font-weight: 800;
}

.member-directory-body {
    display: grid;
    gap: 1rem;
}

.customer-bulk-panel {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.member-action-panel {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, #fff, #f8fafc 60%, #ecfeff);
}

.member-action-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #0f766e, #2563eb);
}

.member-action-title {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.member-action-title > span {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #0f766e;
    color: #fff;
    font-size: 1.15rem;
}

.member-selected-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: #172033;
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
}

.member-action-note {
    margin-top: .75rem;
    padding: .65rem .75rem;
    border-radius: 8px;
    background: #ecfdf5;
    color: #047857;
    font-size: .82rem;
    font-weight: 800;
}

.member-table-shell {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.member-table {
    margin-bottom: 0;
}

.member-table thead th {
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: .76rem;
    text-transform: uppercase;
}

.member-table tbody tr {
    border-color: #edf2f7;
    transition: background-color .16s ease, box-shadow .16s ease;
}

.member-table tbody tr:hover {
    background: #f8fafc;
    box-shadow: inset 4px 0 0 #14b8a6;
}

.member-account-pill,
.member-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: .28rem .55rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 900;
    white-space: nowrap;
}

.member-account-pill {
    background: #eef2ff;
    color: #3730a3;
}

.member-name-cell {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 220px;
}

.member-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #fff;
    font-size: .9rem;
    font-weight: 900;
}

.member-photo-frame {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    text-decoration: none;
}

.member-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-photo-placeholder {
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    border-color: rgba(37, 99, 235, .2);
    font-size: .9rem;
    font-weight: 900;
}

.member-subtext,
.member-muted-line {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #64748b;
    font-size: .84rem;
}

.member-muted-line {
    white-space: nowrap;
}

.member-muted-line i,
.member-subtext i {
    color: #0f766e;
}

.member-source-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: #fffbeb;
    color: #92400e;
    font-size: .7rem;
    font-weight: 900;
}

.member-badge.kyc-pending,
.member-badge.status-inactive {
    background: #fffbeb;
    color: #92400e;
}

.member-badge.kyc-verified,
.member-badge.status-active {
    background: #ecfdf5;
    color: #047857;
}

.member-badge.kyc-rejected,
.member-badge.status-suspended {
    background: #fef2f2;
    color: #b91c1c;
}

.member-form-card {
    border-color: rgba(15, 118, 110, .18);
}

.member-form-hero {
    background:
        linear-gradient(135deg, #ecfeff, #fff 54%, #eef2ff);
}

.member-form-title {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
}

.member-form-icon {
    display: grid;
    place-items: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: #0f766e;
    color: #fff;
    font-size: 1.55rem;
    box-shadow: 0 14px 28px rgba(15, 118, 110, .22);
}

.member-form-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.member-form-summary div {
    display: grid;
    gap: .2rem;
    padding: .8rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.member-form-summary i {
    color: #0f766e;
    font-size: 1.15rem;
}

.member-form-summary span {
    color: #64748b;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.member-form-summary strong {
    overflow: hidden;
    color: #172033;
    font-size: .95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finance-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
    gap: 1rem;
    align-items: stretch;
    padding: clamp(1rem, 3vw, 1.4rem);
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
}

.finance-hero-savings {
    background: linear-gradient(135deg, #0f766e, #2563eb);
}

.finance-hero-deposits {
    background: linear-gradient(135deg, #0369a1, #0f766e);
}

.finance-hero-loans {
    background: linear-gradient(135deg, #4338ca, #0f766e);
}

.finance-hero-investments {
    background: linear-gradient(135deg, #155e75, #7c3aed);
}

.finance-hero-repayments {
    background: linear-gradient(135deg, #172033, #0f766e);
}

.finance-hero-expenses {
    background: linear-gradient(135deg, #7c2d12, #0f766e);
}

.finance-hero-reports {
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, .22), transparent 34%),
        linear-gradient(135deg, #0f766e, #172033 58%, #4338ca);
}

.finance-hero-groups {
    background:
        radial-gradient(circle at 82% 18%, rgba(191, 219, 254, .22), transparent 34%),
        linear-gradient(135deg, #0f766e 0%, #155e75 45%, #172033 100%);
}

.finance-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.finance-hero-copy span,
.finance-card-title span,
.finance-pane-title span {
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.finance-hero-copy span {
    color: rgba(255, 255, 255, .72);
}

.finance-hero-copy h2 {
    max-width: 760px;
    margin: .35rem 0 .6rem;
    font-size: clamp(1.65rem, 4vw, 2.85rem);
    line-height: 1.05;
}

.finance-hero-copy p {
    max-width: 780px;
    margin: 0;
    color: rgba(255, 255, 255, .84);
}

.finance-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.finance-metric-card {
    display: grid;
    gap: .25rem;
    min-height: 136px;
    padding: .95rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
}

a.finance-metric-card {
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

a.finance-metric-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .16);
}

.finance-metric-card i {
    color: #bfdbfe;
    font-size: 1.35rem;
}

.finance-metric-card span,
.finance-metric-card small {
    color: rgba(255, 255, 255, .78);
}

.finance-metric-card strong {
    overflow: hidden;
    color: #fff;
    font-size: clamp(1.25rem, 2.6vw, 1.8rem);
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-period-note {
    display: inline-flex;
    width: fit-content;
    margin-top: .9rem;
    padding: .35rem .6rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .82);
    font-size: .78rem;
    font-weight: 800;
}

.finance-hero-reports .report-dashboard-card i {
    color: #facc15;
}

.finance-hero-reports .report-dashboard-card.green i {
    color: #86efac;
}

.finance-hero-reports .report-dashboard-card.amber i {
    color: #fbbf24;
}

.finance-hero-reports .report-dashboard-card.blue i {
    color: #93c5fd;
}

.finance-hero-reports .report-dashboard-card.rose i {
    color: #fda4af;
}

.finance-workspace {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07) !important;
}

.finance-tabbar {
    padding: .85rem 1rem 0;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fff, #f8fafc);
}

.finance-tabs {
    gap: .5rem;
    padding-bottom: .85rem;
}

.finance-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 38px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-weight: 900;
}

.finance-tabs .nav-link.active {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
}

.finance-pane-title,
.finance-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.finance-pane-title {
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.finance-card-title {
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fff, #f8fafc);
}

.finance-pane-title span,
.finance-card-title span {
    color: #64748b;
}

.finance-pane-title h3,
.finance-card-title h3 {
    margin: .15rem 0 0;
    color: #172033;
    font-size: 1.05rem;
    font-weight: 900;
}

.finance-pane-title p {
    margin: .2rem 0 0;
    color: #64748b;
}

.finance-filter-panel {
    padding: .9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.finance-form-panel,
.finance-editor-card,
.finance-guide-card,
.finance-product-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

.finance-form-panel,
.finance-editor-card,
.finance-guide-card {
    padding: 1rem;
}

.finance-product-card {
    height: 100%;
    padding: 1rem;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.finance-product-card:hover {
    border-color: #14b8a6;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .1);
    transform: translateY(-2px);
}

.finance-product-card p {
    color: #64748b;
}

.finance-product-section {
    background: #f8fafc !important;
}

.finance-guide-card {
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.finance-guide-card > span {
    color: #0f766e;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.finance-guide-card h3 {
    margin: .15rem 0 1rem;
    color: #172033;
    font-size: 1.05rem;
    font-weight: 900;
}

.finance-guide-list {
    display: grid;
    gap: .75rem;
}

.finance-guide-list div,
.finance-guide-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: .7rem;
    padding: .8rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.finance-guide-item {
    display: block;
}

.finance-guide-item summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.finance-guide-item summary::-webkit-details-marker {
    display: none;
}

.finance-guide-list div > i,
.finance-guide-item summary > i {
    display: grid;
    place-items: center;
    grid-row: span 2;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
}

.finance-guide-item summary span {
    color: #64748b;
    transition: transform .16s ease;
}

.finance-guide-item[open] summary span {
    transform: rotate(180deg);
}

.finance-guide-list strong {
    color: #172033;
}

.finance-guide-list p {
    margin: .1rem 0 0;
    color: #64748b;
}

.finance-guide-item p {
    margin: .65rem 0 0 3rem;
}

.finance-table-shell {
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.finance-table thead th {
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: .76rem;
    text-transform: uppercase;
}

.finance-table tbody tr {
    transition: background-color .16s ease, box-shadow .16s ease;
}

.finance-table tbody tr:hover {
    background: #f8fafc;
    box-shadow: inset 4px 0 0 #14b8a6;
}

.finance-id-pill,
.finance-soft-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .28rem .55rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 900;
    white-space: nowrap;
}

.finance-id-pill {
    background: #eef2ff;
    color: #3730a3;
}

.finance-soft-badge {
    background: #ecfeff;
    color: #155e75;
}

.finance-soft-badge.status-active,
.finance-soft-badge.status-disbursed,
.finance-soft-badge.status-completed {
    background: #ecfdf5;
    color: #047857;
}

.finance-soft-badge.status-applied,
.finance-soft-badge.status-approved,
.finance-soft-badge.status-pending {
    background: #eff6ff;
    color: #1d4ed8;
}

.finance-soft-badge.status-defaulted,
.finance-soft-badge.status-rejected,
.finance-soft-badge.status-suspended {
    background: #fef2f2;
    color: #b91c1c;
}

.finance-soft-badge.status-closed {
    background: #f1f5f9;
    color: #475569;
}

.finance-list .list-group-item {
    border-left: 0;
    border-right: 0;
}

.repayment-table form {
    padding: .65rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.savings-account-filter {
    background:
        linear-gradient(135deg, #fff, #f8fafc 70%, #ecfdf5);
}

.savings-open-form {
    display: grid;
    gap: 1rem;
    background:
        linear-gradient(180deg, #fff, #f8fafc);
}

.savings-open-section {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.savings-open-collapse {
    padding: 0;
    overflow: hidden;
}

.savings-open-section-title {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: .9rem;
}

.savings-open-collapse .savings-open-section-title {
    align-items: center;
    margin-bottom: 0;
    padding: 1rem;
    cursor: pointer;
    list-style: none;
}

.savings-open-collapse .savings-open-section-title::-webkit-details-marker {
    display: none;
}

.savings-open-collapse[open] .savings-open-section-title {
    border-bottom: 1px solid #e2e8f0;
}

.savings-open-section-body {
    padding: 1rem;
}

.savings-open-section-body.row {
    margin-right: 0;
    margin-left: 0;
}

.savings-open-section-title > span {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.1rem;
}

.savings-open-section-title strong,
.savings-open-section-title small {
    display: block;
}

.savings-open-section-title strong {
    color: #172033;
    font-size: 1rem;
}

.savings-open-section-title small {
    margin-top: .1rem;
    color: #64748b;
}

.savings-open-section-chevron {
    margin-left: auto;
    color: #64748b;
    transition: transform .16s ease;
}

.savings-open-collapse[open] .savings-open-section-chevron {
    transform: rotate(180deg);
}

.savings-open-summary {
    padding: .9rem 1rem;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e3a8a;
    font-weight: 800;
    line-height: 1.5;
}

.savings-open-preview-section {
    background: linear-gradient(135deg, #fff, #ecfdf5);
}

.savings-open-submit {
    min-height: 48px;
}

.savings-product-layout {
    align-items: flex-start;
}

.savings-product-showcase-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
    padding: .9rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.savings-product-showcase-title span,
.savings-product-showcase-title strong,
.savings-product-showcase-title small {
    display: block;
}

.savings-product-showcase-title span {
    color: #0f766e;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.savings-product-showcase-title strong {
    color: #172033;
}

.savings-product-showcase-title small {
    color: #64748b;
}

.savings-product-editor.finance-editor-card {
    position: sticky;
    top: 82px;
}

.savings-product-editor .form-label,
.savings-open-form .form-label {
    margin-bottom: .3rem;
    color: #475569;
    font-size: .82rem;
    font-weight: 800;
}

.savings-product-card.finance-product-card {
    background:
        linear-gradient(180deg, #fff, #f8fafc);
}

.expense-create-card .finance-card-title {
    background: linear-gradient(135deg, #fff7ed, #f8fafc);
}

.expense-category-list,
.expense-top-grid {
    display: grid;
    gap: .75rem;
}

.expense-category-list div,
.expense-top-card {
    padding: .85rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.expense-category-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.expense-category-list span,
.expense-top-card span,
.expense-top-card strong,
.expense-top-card small {
    display: block;
}

.expense-category-list span,
.expense-top-card span {
    color: #172033;
    font-weight: 900;
}

.expense-category-list em {
    padding: .25rem .5rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: .75rem;
    font-style: normal;
    font-weight: 900;
}

.expense-top-card strong {
    margin-top: .15rem;
    color: #7c2d12;
    font-size: 1.08rem;
}

.expense-top-card small {
    margin-top: .45rem;
    color: #64748b;
    font-weight: 800;
}

.expense-top-bar {
    overflow: hidden;
    height: 10px;
    margin-top: .7rem;
    border-radius: 999px;
    background: #ffedd5;
}

.expense-top-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #fb923c, #0f766e);
}

.report-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: stretch;
    padding: 1.25rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, .96), rgba(23, 32, 51, .98)),
        radial-gradient(circle at top right, rgba(250, 204, 21, .28), transparent 32%);
    color: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
}

.report-hero-copy span,
.report-hero-period span,
.report-type-card span,
.report-type-card small,
.report-summary-card span,
.report-summary-card strong,
.report-summary-card small,
.report-kpi-card span,
.report-kpi-card strong,
.report-detail-head span,
.report-detail-head h3 {
    display: block;
}

.report-hero-copy span,
.report-hero-period span {
    color: #facc15;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.report-hero-copy h2 {
    margin: .25rem 0 .35rem;
    font-size: clamp(1.45rem, 3vw, 2.4rem);
    font-weight: 900;
    line-height: 1.08;
}

.report-hero-copy p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .84);
    font-weight: 700;
}

.report-hero-period {
    min-width: 260px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
}

.report-hero-period strong {
    display: block;
    margin-top: .3rem;
    color: #fff;
    font-size: 1.05rem;
}

.report-hero-period small {
    display: block;
    margin-top: .45rem;
    color: rgba(255, 255, 255, .76);
    font-weight: 800;
}

.report-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem;
}

.report-type-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .65rem;
    align-items: center;
    min-height: 92px;
    padding: .9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.report-type-card:hover {
    border-color: #14b8a6;
    color: #172033;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .09);
    transform: translateY(-2px);
}

.report-type-card.active {
    border-color: #0f766e;
    background: linear-gradient(135deg, #0f766e, #164e63);
    color: #fff;
}

.report-type-card i {
    display: grid;
    place-items: center;
    grid-row: span 2;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.1rem;
}

.report-type-card.active i {
    background: rgba(255, 255, 255, .18);
    color: #facc15;
}

.report-type-card span {
    font-weight: 900;
}

.report-type-card small {
    overflow: hidden;
    color: #64748b;
    font-weight: 700;
    line-height: 1.35;
}

.report-type-card.active small {
    color: rgba(255, 255, 255, .78);
}

.report-control-card {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff, #f8fafc);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.report-control-card .form-label {
    margin-bottom: .3rem;
    color: #475569;
    font-size: .82rem;
    font-weight: 900;
}

.report-module-workspace {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
}

.report-tabbar {
    padding: .85rem 1rem 0;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fff, #f8fafc);
    overflow-x: auto;
}

.report-tabs {
    flex-wrap: nowrap;
    gap: .45rem;
}

.report-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: .5rem .75rem;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    color: #475569;
    font-size: .86rem;
    font-weight: 900;
    white-space: nowrap;
}

.report-tabs .nav-link i {
    color: #0f766e;
}

.report-tabs .nav-link.active {
    border-color: #e2e8f0;
    border-bottom-color: #fff;
    background: #fff;
    color: #0f766e;
}

.report-filter-panel {
    display: grid;
    grid-template-columns: minmax(220px, .75fr) minmax(0, 1.6fr);
    gap: 1rem;
    align-items: stretch;
    padding: 1rem;
}

#report-breakdown,
#financial-breakdown {
    scroll-margin-top: 96px;
}

.report-current-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 118px;
    padding: 1rem;
    border: 1px solid #ccfbf1;
    border-radius: 8px;
    background: linear-gradient(135deg, #ecfdf5, #f8fafc);
}

.report-current-summary span,
.report-current-summary strong,
.report-current-summary small {
    display: block;
}

.report-current-summary span {
    color: #0f766e;
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.report-current-summary strong {
    margin-top: .2rem;
    color: #172033;
    font-size: 1.05rem;
    font-weight: 900;
}

.report-current-summary small {
    margin-top: .3rem;
    color: #64748b;
    font-weight: 700;
    line-height: 1.45;
}

.report-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
    align-items: end;
}

.report-filter-field .form-label {
    margin-bottom: .3rem;
    color: #475569;
    font-size: .82rem;
    font-weight: 900;
}

.report-filter-actions {
    display: flex;
    gap: .45rem;
    align-items: center;
    justify-content: flex-end;
}

.report-filter-actions .btn {
    min-height: 38px;
    white-space: nowrap;
}

.report-summary-strip,
.report-kpi-grid {
    display: grid;
    gap: .55rem;
}

.report-summary-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.report-summary-card,
.report-kpi-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.report-summary-card {
    display: flex;
    justify-content: space-between;
    gap: .7rem;
    min-width: 0;
    padding: .85rem;
}

.report-summary-card span,
.report-kpi-card span {
    color: #64748b;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.report-summary-card strong {
    overflow: hidden;
    margin-top: .2rem;
    color: #172033;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-summary-card small {
    margin-top: .25rem;
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
}

.report-summary-card i {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
}

.report-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
}

.report-kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 86px;
    padding: .62rem .7rem;
}

.report-kpi-card::after {
    content: "";
    position: absolute;
    right: -.7rem;
    bottom: -.7rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(20, 184, 166, .12);
}

.report-kpi-card i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-bottom: .38rem;
    border-radius: 8px;
    background: #fff7ed;
    color: #c2410c;
    font-size: .9rem;
}

.report-kpi-card strong {
    overflow: hidden;
    margin-top: .12rem;
    color: #172033;
    font-size: .98rem;
    font-weight: 900;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-detail-card {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
}

.report-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fff, #f8fafc);
}

.report-detail-head span {
    color: #0f766e;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.report-detail-head h3 {
    margin: .1rem 0 0;
    color: #172033;
    font-size: 1rem;
    font-weight: 900;
}

.report-detail-tabs {
    flex-wrap: nowrap;
    gap: .45rem;
    overflow-x: auto;
    padding-bottom: .1rem;
}

.report-detail-tabs .nav-link {
    min-height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: .84rem;
    font-weight: 900;
    white-space: nowrap;
}

.report-detail-tabs .nav-link.active {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
}

.report-table thead th {
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: .76rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.report-table tbody td {
    color: #334155;
    font-weight: 700;
}

.report-table tbody tr:hover {
    background: #f8fafc;
    box-shadow: inset 4px 0 0 #14b8a6;
}

.report-breakdown-tile {
    min-height: 126px;
    padding: 1rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: linear-gradient(135deg, #eff6ff, #fff);
}

.report-breakdown-tile span,
.report-breakdown-tile small {
    display: block;
    color: #64748b;
    font-size: .78rem;
    font-weight: 800;
}

.report-breakdown-tile strong {
    display: block;
    margin: .45rem 0;
    color: #0f172a;
    font-size: 1.45rem;
    font-weight: 950;
    line-height: 1.1;
}

.report-breakdown-tile.positive {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #f0fdf4, #fff);
}

.report-breakdown-tile.negative {
    border-color: #fecdd3;
    background: linear-gradient(135deg, #fff1f2, #fff);
}

.report-ledger-detail-row > td {
    border-top: 0;
    background: #f8fafc;
}

.report-ledger-detail {
    margin: 0 .85rem .85rem;
    padding: .85rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .06);
}

.report-ledger-detail table thead th {
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .72rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.report-ledger-detail table tbody td {
    color: #334155;
    font-size: .82rem;
    font-weight: 700;
    vertical-align: top;
}

@media (max-width: 1199.98px) {
    .report-summary-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .report-filter-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .report-hero {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .report-hero-period {
        min-width: 0;
    }

    .report-type-grid {
        display: flex;
        overflow-x: auto;
        padding-bottom: .35rem;
    }

    .report-type-card {
        flex: 0 0 235px;
    }

    .report-tabbar {
        padding: .75rem .75rem 0;
    }

    .report-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .2rem;
    }

    .report-tabs .nav-link {
        border-radius: 8px;
    }

    .report-filter-panel {
        padding: .85rem;
    }

    .report-filter-form {
        grid-template-columns: 1fr;
    }

    .report-filter-actions {
        justify-content: stretch;
    }

    .report-filter-actions .btn {
        flex: 1 1 0;
    }

    .report-summary-strip {
        display: flex;
        overflow-x: auto;
        padding-bottom: .35rem;
    }

    .report-summary-card {
        flex: 0 0 210px;
    }

    .report-detail-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-detail-tabs {
        width: 100%;
    }
}

.section-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    gap: 1rem;
    align-items: stretch;
    padding: 1.25rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(23, 32, 51, .98), rgba(15, 118, 110, .92)),
        radial-gradient(circle at top right, rgba(250, 204, 21, .24), transparent 34%);
    color: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
}

.section-hero-copy span,
.section-hero-panel span,
.section-stat-card span,
.section-stat-card strong,
.section-stat-card small,
.section-card-title strong,
.section-card-title small,
.section-pane-head span,
.section-pane-head h3,
.section-mini-card span,
.section-mini-card strong,
.section-statement-card span,
.section-statement-card strong,
.billing-summary span,
.billing-summary strong,
.billing-summary a,
.billing-summary p {
    display: block;
}

.section-hero-copy span,
.section-hero-panel span,
.section-pane-head span {
    color: #facc15;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.section-hero-copy h2 {
    margin: .25rem 0 .35rem;
    font-size: clamp(1.45rem, 3vw, 2.35rem);
    font-weight: 900;
    line-height: 1.08;
}

.section-hero-copy p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .84);
    font-weight: 700;
}

.section-hero-panel {
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
}

.section-hero-panel strong {
    display: block;
    overflow: hidden;
    margin-top: .3rem;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.12;
    text-overflow: ellipsis;
}

.section-hero-panel small {
    display: block;
    overflow-wrap: anywhere;
    margin-top: .45rem;
    color: rgba(255, 255, 255, .76);
    font-weight: 800;
}

.section-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.section-stat-card,
.section-form-card,
.section-data-card,
.section-workspace,
.section-mini-card,
.section-statement-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.section-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 134px;
    padding: 1rem;
}

.section-stat-card::after {
    content: "";
    position: absolute;
    right: -.8rem;
    bottom: -.8rem;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(20, 184, 166, .12);
}

.section-stat-card i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: .7rem;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
}

.section-stat-card span,
.section-mini-card span,
.section-statement-card span {
    color: #64748b;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.section-stat-card strong,
.section-mini-card strong,
.section-statement-card strong {
    overflow: hidden;
    margin-top: .2rem;
    color: #172033;
    font-size: 1.16rem;
    font-weight: 900;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-stat-card small {
    margin-top: .35rem;
    color: #64748b;
    font-weight: 700;
}

.settings-stat-grid {
    gap: .6rem;
    margin-bottom: 1.35rem !important;
}

.settings-stat-grid .section-stat-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: .12rem .65rem;
    align-content: center;
    min-height: 86px;
    padding: .65rem .76rem;
}

.settings-stat-grid .section-stat-card::after {
    right: -.65rem;
    bottom: -.65rem;
    width: 52px;
    height: 52px;
}

.settings-stat-grid .section-stat-card i {
    width: 32px;
    height: 32px;
    grid-row: 1 / span 3;
    margin-bottom: 0;
    font-size: .95rem;
}

.settings-stat-grid .section-stat-card span {
    font-size: .68rem;
}

.settings-stat-grid .section-stat-card strong {
    margin-top: 0;
    font-size: 1rem;
}

.settings-stat-grid .section-stat-card small {
    margin-top: .08rem;
    font-size: .82rem;
    line-height: 1.22;
}

.notification-stat-grid {
    gap: .55rem;
}

.notification-stat-grid .section-stat-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: .04rem .65rem;
    align-content: center;
    min-height: 88px;
    padding: .66rem .78rem;
}

.notification-stat-grid .section-stat-card::after {
    right: -.55rem;
    bottom: -.55rem;
    width: 46px;
    height: 46px;
}

.notification-stat-grid .section-stat-card i {
    grid-row: 1 / span 3;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    font-size: .95rem;
}

.notification-stat-grid .section-stat-card span {
    font-size: .68rem;
}

.notification-stat-grid .section-stat-card strong {
    margin-top: 0;
    font-size: 1rem;
}

.notification-stat-grid .section-stat-card small {
    margin-top: 0;
    font-size: .72rem;
}

.notification-action-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
}

.notification-cost-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: .65rem;
    max-width: 620px;
}

.notification-cost-item {
    min-height: 72px;
    padding: .72rem .9rem;
    border: 1px solid #dbe7f3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.notification-cost-item span,
.notification-cost-item small {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
}

.notification-cost-item span {
    text-transform: uppercase;
}

.notification-cost-item strong {
    display: block;
    margin: .12rem 0;
    color: #172033;
    font-size: 1rem;
    font-weight: 900;
}

.section-workspace {
    overflow: hidden;
}

.section-tabbar {
    padding: .85rem 1rem 0;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fff, #f8fafc);
}

.section-tabs {
    flex-wrap: nowrap;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .85rem;
}

.section-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-weight: 900;
    white-space: nowrap;
}

.section-tabs .nav-link.active {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
}

.section-pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.section-pane-head span {
    color: #0f766e;
}

.section-pane-head h3 {
    margin: .15rem 0 0;
    color: #172033;
    font-size: 1.05rem;
    font-weight: 900;
}

.section-form-card,
.section-data-card {
    overflow: hidden;
}

.section-form-card {
    padding: 1rem;
}

@media (min-width: 992px) {
    .sticky-lg-top.section-form-card {
        top: 82px;
        z-index: 10;
    }
}

.section-card-title {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.section-card-title > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.1rem;
}

.section-card-title strong {
    color: #172033;
    font-size: 1rem;
    font-weight: 900;
}

.section-card-title small {
    margin-top: .12rem;
    color: #64748b;
    font-weight: 700;
}

.coa-workspace {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .06);
}

.coa-workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid #eef2f7;
}

.coa-workspace-head h3 {
    margin: 0;
    color: #172033;
    font-size: 1.45rem;
    font-weight: 900;
}

.coa-workspace-head p {
    margin: .15rem 0 0;
    color: #64748b;
    font-weight: 700;
}

.coa-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: flex-end;
}

.coa-toolbar .btn {
    border-radius: 9px;
    font-weight: 800;
}

.coa-create-panel {
    display: grid;
    grid-template-columns: 160px 220px minmax(240px, 1fr) 180px;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.coa-company-picker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 1rem 1.25rem .25rem;
    padding: .45rem .7rem;
    border-radius: 9px;
    background: #f1f5f9;
    color: #334155;
    font-weight: 800;
}

.coa-tree {
    display: grid;
    gap: .1rem;
    min-height: 360px;
    padding: .75rem 1.25rem 2rem;
    background: #fff;
}

.coa-tree-company,
.coa-tree-node > summary,
.coa-account-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .7rem;
    border-radius: 8px;
}

.coa-tree-company {
    padding: .85rem .25rem;
    color: #334155;
}

.coa-tree-company strong,
.coa-tree-name strong,
.coa-name strong {
    color: #2f2f2f;
    font-weight: 800;
}

.coa-tree-company .coa-tree-meta,
.coa-name small {
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
}

.coa-name small {
    display: block;
    margin-top: .1rem;
}

.coa-tree-node {
    display: block;
}

.coa-tree-node > summary {
    grid-template-columns: 34px minmax(0, 1fr) auto auto 18px;
    padding: .65rem .25rem;
    cursor: pointer;
    list-style: none;
}

.coa-tree-node > summary::-webkit-details-marker {
    display: none;
}

.coa-tree-node > summary:hover,
.coa-account-row:hover {
    background: #f8fafc;
}

.coa-tree-node > summary::after {
    content: "\F282";
    justify-self: end;
    color: #64748b;
    font-family: "bootstrap-icons";
    font-size: .8rem;
    transition: transform .16s ease;
}

.coa-tree-node[open] > summary::after {
    transform: rotate(90deg);
}

.coa-folder-icon,
.coa-leaf-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: #334155;
    font-size: 1.05rem;
}

.coa-leaf-icon {
    color: #0f766e;
}

.coa-tree-count {
    min-width: 28px;
    padding: .18rem .5rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: .74rem;
    font-weight: 900;
    text-align: center;
}

.coa-tree-balance,
.coa-balance {
    color: #2f2f2f;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.coa-tree-children {
    display: grid;
    gap: .1rem;
    margin-left: 2.15rem;
    padding-left: 1.1rem;
    border-left: 1px solid #e2e8f0;
}

.coa-account-list {
    display: grid;
    gap: .1rem;
    margin-left: 2.15rem;
    padding-left: 1.1rem;
    border-left: 1px solid #edf2f7;
}

.coa-account-row {
    grid-template-columns: 28px 82px minmax(0, 1fr) auto auto;
    padding: .55rem .25rem;
}

.coa-code {
    color: #64748b;
    font-size: .82rem;
    font-weight: 900;
}

.coa-account-empty {
    padding: .7rem .9rem;
    color: #64748b;
    font-weight: 800;
}

.section-data-card > .section-card-title {
    margin-bottom: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fff, #f8fafc);
}

.journal-pane-head {
    align-items: center;
}

.journal-pane-head .btn {
    white-space: nowrap;
}

.journal-workspace {
    display: block;
}

.journal-entries-card {
    overflow: hidden;
}

.journal-table-wrap {
    border-top: 1px solid #e2e8f0;
}

.journal-table {
    min-width: 920px;
}

.journal-table tbody td {
    vertical-align: middle;
}

.journal-table td strong,
.journal-table td small {
    display: block;
}

.journal-table td strong {
    color: #172033;
    font-weight: 900;
}

.journal-table td small {
    color: #64748b;
    font-size: .78rem;
    font-weight: 800;
}

.journal-date {
    width: 110px;
    color: #475569;
    font-weight: 900;
}

.journal-amount {
    color: #172033;
    font-variant-numeric: tabular-nums;
    font-weight: 950;
    white-space: nowrap;
}

.journal-reference {
    max-width: 260px;
    color: #334155;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.journal-description {
    min-width: 220px;
    color: #475569;
}

.journal-type-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
}

.journal-type-pill.debit {
    background: #fee2e2;
    color: #b91c1c;
}

.journal-type-pill.credit {
    background: #dcfce7;
    color: #15803d;
}

.journal-modal .modal-header {
    align-items: flex-start;
    border-bottom: 1px solid #e2e8f0;
}

.journal-modal .modal-eyebrow {
    display: block;
    color: #0f766e;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.journal-modal-note {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .85rem;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e3a8a;
    font-weight: 800;
}

.journal-line-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .25rem;
    padding: .85rem 1rem;
    border: 1px solid #dbe5ef;
    border-radius: 8px 8px 0 0;
    background: #f8fafc;
}

.journal-line-toolbar span {
    display: block;
    color: #0f766e;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.journal-line-toolbar strong {
    display: block;
    color: #172033;
    font-weight: 900;
}

.journal-line-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.journal-lines-wrap {
    border-right: 1px solid #dbe5ef;
    border-left: 1px solid #dbe5ef;
}

.journal-lines-table {
    min-width: 900px;
}

.journal-lines-table th {
    border-bottom: 1px solid #dbe5ef;
    background: #fff;
    color: #475569;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.journal-lines-table td {
    vertical-align: middle;
    border-bottom: 1px solid #edf2f7;
}

.journal-lines-table th:first-child,
.journal-lines-table td:first-child {
    width: 140px;
}

.journal-lines-table th:nth-child(3),
.journal-lines-table td:nth-child(3) {
    width: 170px;
}

.journal-lines-table th:last-child,
.journal-lines-table td:last-child {
    width: 92px;
}

.journal-balance-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    padding: .9rem 1rem;
    border: 1px solid #dbe5ef;
    border-radius: 0 0 8px 8px;
    background: #fff;
}

.journal-balance-panel div {
    padding: .75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.journal-balance-panel div.is-balanced {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.journal-balance-panel div.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.journal-balance-panel span {
    display: block;
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.journal-balance-panel strong {
    display: block;
    margin-top: .2rem;
    color: #172033;
    font-size: 1.05rem;
    font-weight: 900;
}

.journal-balance-panel p {
    grid-column: 1 / -1;
    margin: 0;
    color: #475569;
    font-weight: 800;
}

@media (max-width: 575.98px) {
    .journal-pane-head {
        align-items: stretch;
        flex-direction: column;
    }

    .journal-pane-head .btn {
        width: 100%;
    }

    .journal-table {
        min-width: 780px;
    }

    .journal-modal .modal-title {
        font-size: 1.15rem;
    }

    .journal-line-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .journal-balance-panel {
        grid-template-columns: 1fr;
    }
}

.section-form-card .form-label,
.section-filter-panel .form-label,
.settings-workspace .form-label {
    margin-bottom: .3rem;
    color: #475569;
    font-size: .82rem;
    font-weight: 900;
}

.section-filter-panel {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.section-table thead th {
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: .76rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.section-table tbody td {
    color: #334155;
    font-weight: 700;
}

.section-table tbody tr:hover {
    background: #f8fafc;
    box-shadow: inset 4px 0 0 #14b8a6;
}

.section-mini-grid,
.section-list,
.billing-summary {
    display: grid;
    gap: .75rem;
}

.section-mini-card,
.section-statement-card {
    padding: .95rem;
}

.section-list {
    padding: 1rem;
}

.section-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.section-list span {
    color: #334155;
    font-weight: 900;
}

.section-list strong {
    color: #0f766e;
}

.section-statement-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.chart-account-summary-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .55rem;
}

.chart-account-summary-card {
    min-height: auto;
    padding: .62rem .7rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
}

.chart-account-summary-card span {
    font-size: .66rem;
    letter-spacing: 0;
}

.chart-account-summary-card strong {
    margin-top: .14rem;
    font-size: .95rem;
}

.chart-account-summary-card small {
    display: block;
    margin-top: .14rem;
    color: #475569;
    font-size: .72rem;
    font-weight: 700;
}

.section-statement-card.highlight {
    border-color: #99f6e4;
    background: linear-gradient(135deg, #ecfdf5, #fff);
}

.trial-balance-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc, #fff);
}

.trial-balance-view-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
    padding: .25rem;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    background: #f8fafc;
}

.trial-balance-view-switch button {
    min-height: 42px;
    padding: .35rem .85rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-weight: 900;
}

.trial-balance-view-switch button.active {
    background: #0f766e;
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 118, 110, .18);
}

.trial-balance-summary-card {
    min-height: 112px;
    padding: 1rem;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    background: #fff;
}

.trial-balance-summary-card span,
.trial-balance-guide-copy span {
    display: block;
    color: #0f766e;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.trial-balance-summary-card strong {
    display: block;
    margin-top: .25rem;
    color: #172033;
    font-size: 1.45rem;
    font-weight: 900;
}

.trial-balance-summary-card small {
    display: block;
    margin-top: .35rem;
    color: #64748b;
    font-weight: 700;
    line-height: 1.35;
}

.trial-balance-summary-card.is-balanced {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.trial-balance-summary-card.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.trial-balance-table .trial-section-row td {
    border-top: 1px solid #dbe5ef;
    border-bottom: 1px solid #dbe5ef;
    background: #f8fafc;
    color: #0f766e;
}

.trial-balance-table .trial-section-row strong {
    display: block;
    color: #0f766e;
    font-size: .95rem;
    font-weight: 900;
}

.trial-balance-table .trial-section-row small {
    display: block;
    margin-top: .12rem;
    color: #64748b;
    font-weight: 700;
}

.trial-balance-table td strong {
    display: block;
    color: #172033;
    font-weight: 900;
}

.trial-balance-table td small {
    display: block;
    margin-top: .1rem;
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
}

.trial-balance-table .trial-money,
.trial-balance-table .trial-section-total td,
.trial-balance-table .trial-grand-total td {
    font-weight: 900;
}

.trial-balance-table .trial-section-total td {
    background: #f1f5f9;
    color: #334155;
}

.trial-balance-table .trial-grand-total td {
    border-bottom: 0;
    background: #172033;
    color: #fff;
}

.trial-balance-guide {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) repeat(5, minmax(150px, 1fr));
    gap: .85rem;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.trial-balance-guide-copy,
.trial-balance-guide-card {
    padding: .95rem;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    background: #f8fafc;
}

.trial-balance-guide-copy h4 {
    margin: .2rem 0;
    color: #172033;
    font-size: 1rem;
    font-weight: 900;
}

.trial-balance-guide-copy p {
    margin: 0;
    color: #64748b;
    font-weight: 700;
}

.trial-balance-guide-card strong {
    display: block;
    color: #172033;
    font-weight: 900;
}

.trial-balance-guide-card ul {
    display: grid;
    gap: .35rem;
    margin: .55rem 0 0;
    padding-left: 1rem;
    color: #64748b;
    font-size: .84rem;
    font-weight: 700;
}

.balance-sheet-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc, #fff);
}

.balance-sheet-summary-card {
    min-height: 112px;
    padding: 1rem;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    background: #fff;
}

.balance-sheet-summary-card span {
    display: block;
    color: #0f766e;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.balance-sheet-summary-card strong {
    display: block;
    margin-top: .25rem;
    color: #172033;
    font-size: 1.45rem;
    font-weight: 900;
}

.balance-sheet-summary-card small {
    display: block;
    margin-top: .35rem;
    color: #64748b;
    font-weight: 700;
    line-height: 1.35;
}

.balance-sheet-summary-card.is-balanced {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.balance-sheet-summary-card.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.balance-sheet-table .balance-sheet-major-row td {
    background: #172033;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
}

.balance-sheet-table .balance-sheet-section-row td {
    border-top: 1px solid #dbe5ef;
    border-bottom: 1px solid #dbe5ef;
    background: #f8fafc;
    color: #0f766e;
}

.balance-sheet-table .balance-sheet-section-row strong {
    display: block;
    color: #0f766e;
    font-size: .95rem;
    font-weight: 900;
}

.balance-sheet-table .balance-sheet-section-row small {
    display: block;
    margin-top: .12rem;
    color: #64748b;
    font-weight: 700;
}

.balance-sheet-table td strong {
    display: block;
    color: #172033;
    font-weight: 900;
}

.balance-sheet-table td small {
    display: block;
    margin-top: .1rem;
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
}

.balance-sheet-table .balance-sheet-money,
.balance-sheet-table .balance-sheet-subtotal td,
.balance-sheet-table .balance-sheet-total-row td,
.balance-sheet-table .balance-sheet-grand-total td {
    font-weight: 900;
}

.balance-sheet-table .balance-sheet-subtotal td {
    background: #f1f5f9;
    color: #334155;
}

.balance-sheet-table .balance-sheet-total-row td {
    background: #ecfdf5;
    color: #0f766e;
}

.balance-sheet-table .balance-sheet-grand-total td {
    border-bottom: 0;
    background: #0f766e;
    color: #fff;
}

.balance-sheet-equation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.balance-sheet-equation span:first-child,
.balance-sheet-equation div > span {
    display: block;
    color: #0f766e;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.balance-sheet-equation strong {
    display: block;
    color: #172033;
    font-weight: 900;
}

.balance-sheet-equation p {
    margin: .2rem 0 0;
    color: #64748b;
    font-weight: 700;
}

.balance-sheet-equation > span:last-child {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
}

.balance-sheet-equation > span.is-balanced {
    background: #dcfce7;
    color: #166534;
}

.balance-sheet-equation > span.is-warning {
    background: #fef3c7;
    color: #92400e;
}

.profit-loss-summary,
.aging-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc, #fff);
}

.aging-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.aging-summary.aging-overview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profit-loss-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profit-loss-summary-card,
.aging-summary-card {
    min-height: 112px;
    padding: 1rem;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    background: #fff;
}

.profit-loss-summary-card span,
.aging-summary-card span,
.profit-loss-formula span:first-child {
    display: block;
    color: #0f766e;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.profit-loss-summary-card strong,
.aging-summary-card strong {
    display: block;
    margin-top: .25rem;
    color: #172033;
    font-size: 1.35rem;
    font-weight: 900;
}

.profit-loss-summary-card small,
.aging-summary-card small {
    display: block;
    margin-top: .35rem;
    color: #64748b;
    font-weight: 700;
    line-height: 1.35;
}

.profit-loss-summary-card.is-profit,
.aging-summary-card.is-total {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.aging-summary-card.is-danger {
    border-color: #fecaca;
    background: #fef2f2;
}

.aging-summary-card.is-calm {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.profit-loss-summary-card.is-loss {
    border-color: #fecaca;
    background: #fef2f2;
}

.aging-bucket-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.aging-bucket-card {
    padding: .95rem;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    background: #f8fafc;
}

.aging-bucket-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.aging-bucket-card-head span {
    color: #172033;
    font-weight: 900;
}

.aging-bucket-card-head strong {
    color: #64748b;
    font-size: .92rem;
}

.aging-bucket-amount {
    display: block;
    margin-top: .55rem;
    color: #172033;
    font-size: 1.15rem;
    font-weight: 900;
}

.aging-bucket-card small {
    display: block;
    margin-top: .25rem;
    color: #64748b;
    font-weight: 700;
}

.aging-progress {
    height: 8px;
    margin-top: .8rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.aging-progress span {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
    background: #0f766e;
}

.aging-bucket-card.is-caution .aging-progress span {
    background: #d97706;
}

.aging-bucket-card.is-high .aging-progress span {
    background: #ea580c;
}

.aging-bucket-card.is-critical .aging-progress span {
    background: #dc2626;
}

.aging-risk-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}

.aging-risk-badge.is-watch {
    background: #e0f2fe;
    color: #075985;
}

.aging-risk-badge.is-caution {
    background: #fef3c7;
    color: #92400e;
}

.aging-risk-badge.is-high {
    background: #ffedd5;
    color: #9a3412;
}

.aging-risk-badge.is-critical {
    background: #fee2e2;
    color: #991b1b;
}

.aging-limit-note {
    padding: .75rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: .88rem;
    font-weight: 800;
}

.profit-loss-table .profit-loss-section-row td {
    border-top: 1px solid #dbe5ef;
    border-bottom: 1px solid #dbe5ef;
    background: #f8fafc;
    color: #0f766e;
}

.profit-loss-table .profit-loss-section-row strong {
    display: block;
    color: #0f766e;
    font-size: .95rem;
    font-weight: 900;
}

.profit-loss-table .profit-loss-section-row small,
.aging-table td small,
.general-ledger-table td small {
    display: block;
    margin-top: .12rem;
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
}

.profit-loss-table td strong,
.aging-table td strong,
.general-ledger-table td strong {
    display: block;
    color: #172033;
    font-weight: 900;
}

.profit-loss-table .profit-loss-money,
.profit-loss-table .profit-loss-subtotal td,
.profit-loss-table .profit-loss-total-row td,
.profit-loss-table .profit-loss-grand-total td,
.ledger-money,
.aging-money {
    font-weight: 900;
}

.profit-loss-table .profit-loss-subtotal td {
    background: #f1f5f9;
    color: #334155;
}

.profit-loss-table .profit-loss-total-row td {
    background: #ecfdf5;
    color: #0f766e;
}

.profit-loss-table .profit-loss-grand-total td {
    border-bottom: 0;
    background: #0f766e;
    color: #fff;
}

.accounting-quick-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) minmax(190px, 1fr) minmax(150px, .8fr) minmax(140px, .7fr) minmax(140px, .7fr) auto;
    gap: .75rem;
    align-items: end;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.accounting-quick-filter-field {
    display: grid;
    gap: .35rem;
    min-width: 0;
    margin: 0;
}

.accounting-quick-filter-field > span {
    color: #64748b;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.accounting-quick-filter-field .input-group,
.accounting-quick-filter-field .form-control,
.accounting-quick-filter-field .form-select {
    min-width: 0;
}

.accounting-quick-filter-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

.accounting-quick-filter-actions .btn {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    font-weight: 800;
    white-space: nowrap;
}

.income-pane-head {
    flex-wrap: wrap;
}

.income-create-button,
.income-register-head .btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 800;
}

.income-workspace {
    display: grid;
    gap: 1rem;
}

.income-overview-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);
    gap: 1rem;
    align-items: stretch;
    padding: 1rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(240, 253, 250, .98), rgba(239, 246, 255, .92)),
        radial-gradient(circle at top right, rgba(20, 184, 166, .16), transparent 36%);
}

.income-overview-copy {
    display: flex;
    align-items: center;
    min-width: 0;
}

.income-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.income-overview-stat {
    min-width: 0;
    padding: .85rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
}

.income-overview-stat span,
.income-overview-stat strong,
.income-overview-stat small {
    display: block;
}

.income-overview-stat span {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.income-overview-stat strong {
    overflow: hidden;
    margin-top: .2rem;
    color: #172033;
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.income-overview-stat small {
    overflow: hidden;
    margin-top: .25rem;
    color: #64748b;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.income-register-card {
    min-height: 360px;
}

.income-register-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.income-register-head .section-card-title {
    margin-bottom: 0;
}

.income-table {
    min-width: 900px;
}

.income-table td,
.income-table th {
    vertical-align: middle;
}

.income-empty-state {
    display: grid;
    justify-items: center;
    gap: .45rem;
    padding: 2rem 1rem;
    text-align: center;
}

.income-empty-state i {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.35rem;
}

.income-empty-state strong {
    color: #172033;
    font-weight: 900;
}

.income-empty-state span {
    color: #64748b;
    font-weight: 700;
}

.income-modal {
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 26px 80px rgba(15, 23, 42, .24);
}

.income-modal .modal-header {
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc, #ecfdf5);
}

.income-modal .modal-eyebrow {
    display: block;
    color: #0f766e;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.income-modal .modal-title {
    margin-top: .1rem;
    color: #172033;
    font-weight: 900;
}

.income-modal-note {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: .85rem;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e3a8a;
    font-weight: 800;
}

.income-modal-note i {
    flex: 0 0 auto;
}

.income-modal .modal-footer {
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.general-ledger-table {
    min-width: 0 !important;
    table-layout: fixed;
}

.general-ledger-table th:nth-child(1),
.general-ledger-table td:nth-child(1) {
    width: 88px;
}

.general-ledger-table th:nth-child(2),
.general-ledger-table td:nth-child(2) {
    width: 24%;
}

.general-ledger-table th:nth-child(4),
.general-ledger-table td:nth-child(4),
.general-ledger-table th:nth-child(5),
.general-ledger-table td:nth-child(5) {
    width: 115px;
}

.general-ledger-table th:nth-child(6),
.general-ledger-table td:nth-child(6) {
    width: 86px;
}

.ledger-description {
    overflow-wrap: anywhere;
    color: #334155;
    font-weight: 800;
}

.ledger-summary-row {
    cursor: pointer;
}

.ledger-summary-row:hover td {
    background: #f8fafc;
}

.ledger-view-button {
    white-space: nowrap;
}

.ledger-detail-row > td {
    padding-top: 0;
    border-top: 0;
    background: #f8fafc;
}

.ledger-detail-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    padding: 1rem;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.ledger-detail-card div {
    min-width: 0;
    padding: .75rem;
    border-radius: 12px;
    background: #f8fafc;
}

.ledger-detail-card span {
    display: block;
    color: #64748b;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.ledger-detail-card strong {
    margin-top: .2rem;
    overflow-wrap: anywhere;
}

.ledger-detail-card__wide {
    grid-column: 1 / -1;
}

@media (max-width: 1199.98px) {
    .accounting-quick-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .accounting-quick-filter-actions {
        justify-content: flex-start;
    }

    .income-overview-panel {
        grid-template-columns: 1fr;
    }

    .ledger-detail-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .accounting-quick-filter {
        grid-template-columns: 1fr;
        padding: .85rem;
    }

    .accounting-quick-filter-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .income-pane-head,
    .income-register-head {
        align-items: stretch;
        flex-direction: column;
    }

    .income-create-button,
    .income-register-head .btn {
        justify-content: center;
        width: 100%;
    }

    .income-overview-panel {
        padding: .85rem;
    }

    .income-overview-grid {
        grid-template-columns: 1fr;
    }

    .general-ledger-table {
        table-layout: auto;
    }

    .ledger-detail-card {
        grid-template-columns: 1fr;
    }
}

.profit-loss-formula {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.profit-loss-formula strong {
    display: block;
    color: #172033;
    font-weight: 900;
}

.profit-loss-formula p {
    margin-top: .25rem;
    color: #64748b;
    font-weight: 700;
}

.profit-loss-formula > span:last-child {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-weight: 900;
    white-space: nowrap;
}

.profit-loss-head {
    gap: 1rem;
}

.profit-loss-period-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: .55rem 1rem;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e;
    font-weight: 900;
    white-space: nowrap;
}

.profit-loss-control-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.profit-loss-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto auto;
    align-items: end;
    gap: .75rem;
}

.profit-loss-field {
    display: grid;
    gap: .35rem;
    margin: 0;
}

.profit-loss-field > span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.profit-loss-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.profit-loss-action-bar .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 800;
}

.profit-loss-statement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
}

.profit-loss-statement-card,
.profit-loss-bottom-summary,
.profit-loss-ledger-detail {
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .04);
}

.profit-loss-statement-card {
    overflow: hidden;
}

.profit-loss-statement-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #e2e8f0;
}

.profit-loss-statement-card-head span {
    display: block;
    color: #0f766e;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.profit-loss-statement-card-head h4 {
    margin: .15rem 0 0;
    color: #172033;
    font-size: 1.15rem;
    font-weight: 900;
}

.profit-loss-statement-card-head strong {
    color: #172033;
    font-size: 1.15rem;
    font-weight: 900;
    white-space: nowrap;
}

.profit-loss-mini-table {
    width: 100%;
    border-collapse: collapse;
}

.profit-loss-mini-table th,
.profit-loss-mini-table td {
    padding: .85rem 1.15rem;
    border-bottom: 1px solid #edf2f7;
    color: #172033;
    vertical-align: middle;
}

.profit-loss-mini-table th {
    color: #475569;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.profit-loss-mini-table td {
    font-weight: 700;
}

.profit-loss-mini-table td:last-child {
    font-weight: 900;
}

.profit-loss-mini-table tr.is-total td {
    border-bottom: 0;
    background: #f8fafc;
    color: #0f172a;
    font-weight: 900;
}

.profit-loss-bottom-summary {
    margin: 0 1.25rem 1rem;
    overflow: hidden;
}

.profit-loss-ledger-detail {
    margin: 0 1.25rem 1.25rem;
    padding: 1rem;
}

.profit-loss-ledger-detail summary {
    cursor: pointer;
    color: #0f766e;
    font-weight: 900;
}

.channel-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.channel-option {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: .5rem;
    min-height: 88px;
    padding: .8rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
}

.channel-option input {
    position: absolute;
    top: .7rem;
    right: .7rem;
}

.channel-option span {
    display: grid;
    place-items: center;
    grid-row: span 2;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
}

.channel-option strong,
.channel-option small {
    display: block;
    padding-right: 1.2rem;
}

.channel-option strong {
    color: #172033;
    font-weight: 900;
}

.channel-option small {
    color: #64748b;
    font-weight: 700;
}

.audience-box,
.sms-counter {
    padding: .8rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.sms-counter {
    margin-top: .5rem;
    color: #0f766e;
    font-weight: 900;
}

.notification-hero {
    align-items: stretch;
}

.notification-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: .75rem;
    min-width: min(100%, 340px);
}

.notification-hero-grid div {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.notification-hero-grid span,
.notification-hero-grid strong,
.notification-hero-grid small {
    display: block;
}

.notification-hero-grid span,
.notification-hero-grid small {
    color: rgba(255, 255, 255, .78);
    font-size: .78rem;
    font-weight: 800;
}

.notification-hero-grid strong {
    margin: .15rem 0;
    font-size: 1.75rem;
    font-weight: 950;
}

.notification-center-card {
    overflow: hidden;
}

.notification-center-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.notification-center-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.notification-center-icon {
    display: grid;
    flex: 0 0 42px;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.1rem;
}

.notification-center-title strong,
.notification-center-title small {
    display: block;
}

.notification-center-title strong {
    line-height: 1.15;
}

.notification-center-title small {
    margin-top: .15rem;
    line-height: 1.35;
}

.notification-audience-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.notification-audience-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background:
        linear-gradient(135deg, #fff, #eff6ff);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
}

.notification-audience-card.tenant {
    border-color: #ccfbf1;
    background: linear-gradient(135deg, #fff, #f0fdfa);
}

.notification-audience-card.member {
    border-color: #dbeafe;
}

.notification-audience-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #0f766e;
    color: #fff;
    font-size: 1.25rem;
}

.notification-audience-card.member .notification-audience-icon {
    background: #1d4ed8;
}

.notification-audience-card span,
.notification-audience-card h3,
.notification-audience-card p {
    display: block;
}

.notification-audience-card span {
    color: #0f766e;
    font-size: .74rem;
    font-weight: 950;
    text-transform: uppercase;
}

.notification-audience-card.member span {
    color: #1d4ed8;
}

.notification-audience-card h3 {
    margin: .08rem 0 .18rem;
    color: #172033;
    font-size: 1rem;
    font-weight: 950;
}

.notification-audience-card p {
    margin: 0;
    color: #64748b;
    font-size: .84rem;
    font-weight: 700;
}

.notification-audience-card > strong {
    min-width: 46px;
    padding: .45rem .6rem;
    border-radius: 999px;
    background: #fff;
    color: #172033;
    text-align: center;
    font-size: .95rem;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.notification-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .35rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.notification-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    color: #475569;
    font-weight: 900;
}

.notification-tabs .nav-link em {
    padding: .12rem .45rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #172033;
    font-size: .72rem;
    font-style: normal;
}

.notification-tabs .nav-link.active {
    background: #0f766e;
    color: #fff;
    box-shadow: 0 10px 22px rgba(15, 118, 110, .18);
}

.notification-tabs .nav-link.active em {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.notification-pane-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f0fdfa, #fff);
}

.notification-pane-intro.member {
    background: linear-gradient(135deg, #eff6ff, #fff);
}

.notification-pane-intro strong,
.notification-pane-intro small {
    display: block;
}

.notification-pane-intro strong {
    color: #172033;
    font-weight: 950;
}

.notification-pane-intro small {
    margin-top: .15rem;
    color: #64748b;
    font-weight: 700;
}

.notification-pane-intro > span {
    flex: 0 0 auto;
    padding: .4rem .65rem;
    border-radius: 999px;
    background: #fff;
    color: #0f766e;
    font-size: .78rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.notification-inbox-layout {
    display: grid;
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
    align-items: stretch;
    min-height: 360px;
    background: #fff;
}

.notification-inbox-sidebar {
    display: grid;
    align-content: start;
    gap: .8rem;
    padding: 1rem;
    border-right: 1px solid #e2e8f0;
    background:
        linear-gradient(180deg, #f0fdfa, #fff);
}

.notification-inbox-sidebar.member {
    background: linear-gradient(180deg, #eff6ff, #fff);
}

.notification-side-kpi,
.notification-side-note {
    padding: .9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.notification-side-kpi span,
.notification-side-kpi strong,
.notification-side-note strong,
.notification-side-note p {
    display: block;
}

.notification-side-kpi span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
}

.notification-side-kpi strong {
    margin-top: .1rem;
    color: #172033;
    font-size: 1.65rem;
    font-weight: 950;
}

.notification-side-note strong {
    color: #172033;
    font-weight: 950;
}

.notification-side-note p {
    margin: .35rem 0 0;
    color: #64748b;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.45;
}

.notification-inbox-main {
    min-width: 0;
}

.notification-pane-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fff, #f8fafc);
}

.notification-pane-toolbar.member {
    background: linear-gradient(135deg, #fff, #eff6ff);
}

.notification-pane-toolbar strong,
.notification-pane-toolbar small {
    display: block;
}

.notification-pane-toolbar strong {
    color: #172033;
    font-weight: 950;
}

.notification-pane-toolbar small {
    margin-top: .15rem;
    color: #64748b;
    font-weight: 700;
}

.notification-pane-toolbar > span {
    flex: 0 0 auto;
    padding: .4rem .65rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: .78rem;
    font-weight: 900;
}

.notification-pane-toolbar.member > span {
    background: #dbeafe;
    color: #1d4ed8;
}

.notification-timeline {
    display: grid;
}

.notification-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}

.notification-item:last-child {
    border-bottom: 0;
}

.notification-item.unread {
    background: linear-gradient(90deg, #ecfdf5, #fff);
}

.notification-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
}

.notification-icon.member {
    background: #eff6ff;
    color: #1d4ed8;
}

.notification-item.read .notification-icon {
    background: #f1f5f9;
    color: #64748b;
}

.notification-copy strong {
    color: #172033;
    font-weight: 900;
}

.notification-copy p {
    margin: .25rem 0;
    color: #475569;
}

.notification-copy small {
    color: #64748b;
    font-weight: 700;
}

.notification-meta-row,
.notification-recipient-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .35rem;
}

.notification-recipient-line {
    margin-top: .5rem;
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
}

.notification-empty-state {
    display: grid;
    place-items: center;
    gap: .35rem;
    min-height: 220px;
    padding: 2rem;
    color: #64748b;
    text-align: center;
}

.notification-empty-state i {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #0f766e;
    font-size: 1.45rem;
}

.notification-empty-state strong {
    color: #172033;
    font-weight: 950;
}

.notification-empty-state span {
    max-width: 340px;
    font-size: .9rem;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .notification-hero-grid {
        grid-template-columns: 1fr;
        min-width: 100%;
    }

    .notification-audience-grid,
    .notification-inbox-layout {
        grid-template-columns: 1fr;
    }

    .notification-audience-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .notification-audience-card > strong {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .notification-inbox-sidebar {
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .notification-center-head,
    .notification-pane-intro,
    .notification-pane-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .notification-tabs,
    .notification-tabs .nav-item,
    .notification-tabs .nav-link {
        width: 100%;
    }

    .notification-tabs .nav-link {
        justify-content: space-between;
    }
}

.service-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.service-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: .55rem .75rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.service-chip:hover,
.service-chip.active {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
}

.bill-status-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    padding: .55rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.bill-status-form input[name="token"],
.bill-status-form button {
    grid-column: span 2;
}

.bill-payment-app-form {
    display: grid;
    gap: 1rem;
}

.bill-payment-tabs-shell {
    min-width: 0;
}

.bill-payment-form-card {
    max-width: 1060px;
    margin: 0 auto;
}

.bill-step,
.bill-extra-card {
    padding: .9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff, #f8fafc);
}

.bill-step-compact {
    padding: .7rem;
}

.bill-step-mini-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .55rem;
    color: #0f766e;
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.bill-step-mini-title i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: #ccfbf1;
}

.bill-step-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: .65rem;
    align-items: center;
    margin-bottom: .8rem;
}

.bill-step-head > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0f766e;
    color: #fff;
    font-weight: 950;
}

.bill-step-head strong,
.bill-step-head small {
    display: block;
}

.bill-step-head strong {
    color: #172033;
    font-weight: 950;
}

.bill-step-head small {
    color: #64748b;
    font-size: .8rem;
    font-weight: 700;
}

.bill-service-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.bill-service-tile {
    display: grid;
    gap: .35rem;
    min-height: 86px;
    padding: .75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    text-align: left;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.bill-service-tile i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
}

.bill-service-tile span {
    font-weight: 950;
    line-height: 1.15;
}

.bill-step-compact .bill-service-picker {
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
    gap: .45rem;
}

.bill-step-compact .bill-service-tile {
    min-height: 56px;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    padding: .55rem;
}

.bill-step-compact .bill-service-tile i {
    width: 30px;
    height: 30px;
    font-size: 1rem;
}

.bill-service-tile.active,
.bill-service-tile:hover {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
}

.bill-service-tile.active i,
.bill-service-tile:hover i {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.bill-more-toggle,
.member-bill-extra button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0f766e;
    font-weight: 950;
}

@media (min-width: 992px) {
    .bill-payment-app-form {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
        align-items: start;
    }

    .bill-payment-app-form .bill-step:nth-of-type(2) {
        grid-row: span 2;
    }

    .bill-payment-app-form .bill-extra-card,
    .bill-payment-app-form > .d-grid {
        grid-column: 1 / -1;
    }
}

.billing-summary {
    padding: 1rem;
}

.billing-summary div {
    padding: .85rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.billing-summary span {
    color: #64748b;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.billing-summary strong,
.billing-summary a,
.billing-summary p {
    margin: .2rem 0 0;
    color: #172033;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.billing-summary p {
    font-weight: 700;
}

.auto-renewal-switch {
    padding: .9rem 1rem .9rem 3rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.settings-form-shell {
    margin-bottom: 2rem;
}

.settings-tab-body {
    padding: 1.25rem;
}

.settings-workspace .tab-pane > .row,
.settings-workspace .tab-pane > h2 + .row {
    padding: .25rem;
}

.settings-workspace .tab-pane h2 {
    color: #172033;
    font-weight: 900;
}

.settings-pane-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.automation-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.automation-placeholders {
    display: grid;
    gap: .6rem;
    padding: .85rem 1rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
}

.automation-placeholders strong {
    color: #1e3a8a;
    font-size: .84rem;
    font-weight: 900;
    text-transform: uppercase;
}

.automation-placeholders div {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.automation-placeholders span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .25rem .55rem;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #fff;
    color: #1d4ed8;
    font-size: .78rem;
    font-weight: 900;
}

.automation-group-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}

.automation-group-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border-radius: 999px;
    color: #475569;
    font-weight: 800;
}

.automation-group-tabs .nav-link.active {
    background: #0f766e;
    color: #fff;
}

.automation-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff, #f8fafc);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.automation-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .85rem;
    align-items: start;
}

.automation-card-head strong {
    display: block;
    color: #172033;
    font-size: .98rem;
    font-weight: 900;
}

.automation-card-head span {
    display: block;
    margin-top: .25rem;
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.45;
}

.automation-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.automation-channel-grid-collapsed {
    margin-top: .75rem;
    padding: .75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.automation-channel-option {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 38px;
    padding: .5rem .6rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: .82rem;
    font-weight: 900;
}

.automation-channel-option span {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    min-width: 0;
}

.automation-channel-summary {
    background: #f8fafc;
}

.automation-collapse-button .bi {
    display: inline-block;
    transition: transform .16s ease;
}

.automation-collapse-button[aria-expanded="true"] .bi-chevron-right {
    transform: rotate(90deg);
}

.automation-template-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .65rem .75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.automation-template-summary span {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.automation-template-summary strong {
    display: block;
    overflow: hidden;
    margin-top: .12rem;
    color: #172033;
    font-size: .88rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.automation-template-grid {
    display: grid;
    gap: .65rem;
    margin-top: .75rem;
    padding: .8rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.automation-template-grid textarea {
    min-height: 94px;
    resize: vertical;
}

.settings-workspace .alert,
.settings-workspace .bg-light {
    border-radius: 8px !important;
}

.settings-save-bar {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

@media (max-width: 1199.98px) {
    .section-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chart-account-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .section-hero {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .notification-action-row {
        flex-direction: column;
    }

    .notification-cost-strip {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .section-stat-grid,
    .section-statement-grid,
    .trial-balance-summary,
    .balance-sheet-summary,
    .profit-loss-summary,
    .profit-loss-filter-grid,
    .profit-loss-statement-grid,
    .aging-summary,
    .aging-bucket-grid,
    .channel-option-grid {
        grid-template-columns: 1fr;
    }

    .trial-balance-guide {
        grid-template-columns: 1fr;
    }

    .chart-account-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trial-balance-summary,
    .balance-sheet-summary,
    .profit-loss-summary,
    .aging-summary,
    .aging-bucket-grid,
    .trial-balance-guide {
        padding: .85rem;
    }

    .balance-sheet-equation,
    .profit-loss-formula {
        align-items: flex-start;
        flex-direction: column;
        padding: .85rem;
    }

    .profit-loss-control-panel,
    .profit-loss-statement-grid {
        padding: .85rem;
    }

    .profit-loss-period-pill {
        width: 100%;
    }

    .profit-loss-action-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .25rem;
    }

    .profit-loss-action-bar .btn {
        flex: 0 0 auto;
    }

    .profit-loss-statement-card-head {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
    }

    .profit-loss-bottom-summary,
    .profit-loss-ledger-detail {
        margin-right: .85rem;
        margin-left: .85rem;
    }

    .section-pane-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .coa-workspace-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .coa-toolbar {
        justify-content: flex-start;
        width: 100%;
    }

    .coa-create-panel {
        grid-template-columns: 1fr;
    }

    .coa-company-picker {
        margin: .85rem .85rem .15rem;
    }

    .coa-tree {
        padding: .65rem .85rem 1.5rem;
    }

    .coa-tree-company,
    .coa-tree-node > summary {
        grid-template-columns: 28px minmax(0, 1fr) auto 16px;
        gap: .5rem;
    }

    .coa-tree-company .coa-tree-meta {
        grid-column: 2 / -1;
    }

    .coa-tree-node > summary {
        grid-template-columns: 28px minmax(0, 1fr) auto 16px;
    }

    .coa-tree-count {
        display: none;
    }

    .coa-tree-balance {
        grid-column: 2 / -1;
        justify-self: start;
        text-align: left;
    }

    .coa-tree-children,
    .coa-account-list {
        margin-left: .85rem;
        padding-left: .75rem;
    }

    .coa-account-row {
        grid-template-columns: 28px minmax(0, 1fr) auto;
        gap: .5rem;
    }

    .coa-code,
    .coa-name,
    .coa-balance,
    .coa-account-row .btn {
        grid-column: 2 / -1;
        justify-self: start;
        text-align: left;
    }

    .section-tabs,
    .service-chip-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .65rem;
    }

    .service-chip {
        flex: 0 0 auto;
    }

    .bill-status-form {
        grid-template-columns: 1fr;
    }

    .bill-status-form input[name="token"],
    .bill-status-form button {
        grid-column: span 1;
    }

    .settings-tab-body {
        padding: 1rem;
    }

    .automation-channel-grid {
        grid-template-columns: 1fr;
    }

    .automation-template-summary {
        grid-template-columns: 1fr;
    }

    .automation-template-summary .btn {
        justify-self: start;
    }
}

.table td,
.table th {
    vertical-align: middle;
}

.badge-soft {
    background: #e0f2fe;
    color: #075985;
}

.receipt {
    max-width: 760px;
}

.place-items-center {
    place-items: center;
}

.trial-countdown {
    background: linear-gradient(135deg, #ecfeff, #f8fafc);
    color: #164e63;
}

.trial-clock {
    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 800;
    color: #0f766e;
    white-space: nowrap;
}

.site-v2 {
    background: #f5f7fb;
    color: #172033;
    overflow-x: hidden;
}

.site-v2 a {
    color: inherit;
    text-decoration: none;
}

.site-v2 .btn-primary {
    background: #0f766e;
    border-color: #0f766e;
}

.site-v2 .site-hero-cta {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
    box-shadow: 0 14px 30px rgba(20, 184, 166, .34);
    animation: siteTrialPulse 1.8s ease-in-out infinite;
}

.site-v2 .site-hero-cta:hover {
    background: #115e59;
    border-color: #115e59;
    color: #fff;
}

.site-v2 .site-hero-demo {
    background: #fff;
    border-color: #fff;
    color: #0f172a;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .22);
}

.site-v2 .site-hero-demo:hover {
    background: #f8fafc;
    border-color: #f8fafc;
    color: #0f766e;
}

.site-v2 .btn-outline-primary {
    color: #0f766e;
    border-color: #0f766e;
}

.site-v2 .btn-outline-primary:hover {
    background: #0f766e;
    color: #fff;
}

.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.site-nav .container {
    gap: .75rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}

.site-brand span {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff;
    color: #fff;
    font-weight: 800;
    overflow: hidden;
}

.site-brand strong {
    white-space: nowrap;
    color: #111827;
    font-size: 1.12rem;
    font-weight: 950;
    letter-spacing: 0;
}

.site-brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .05rem;
    line-height: 1.05;
}

.site-brand small {
    color: #0f766e;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-brand img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.orbit-portal-branding {
    display: flex;
    justify-content: center;
    padding: 1.25rem 1rem 1.75rem;
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.orbit-portal-branding .site-brand {
    gap: .75rem;
}

.orbit-portal-branding .site-brand span {
    width: 42px;
    height: 42px;
}

.orbit-portal-branding .site-brand strong {
    font-size: 1rem;
    font-weight: 950;
}

.orbit-sidebar-brand,
.orbit-header-brand {
    text-decoration: none;
}

.orbit-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
}

.orbit-sidebar-brand-top {
    flex: 0 0 auto;
    margin: 0 0 1.5rem;
}

.orbit-sidebar-brand-bottom {
    flex: 0 0 auto;
    margin-top: 1rem;
}

.orbit-sidebar-brand img {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: #fff;
    object-fit: contain;
    padding: .15rem;
}

.tenant-sidebar-logo-fallback {
    align-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    justify-content: center;
    border-radius: 9px;
    background: #e0f2fe;
    color: #0f766e;
    display: inline-flex;
    font-size: .8rem;
    font-weight: 950;
}

.orbit-sidebar-brand span,
.orbit-sidebar-brand small,
.orbit-sidebar-brand strong {
    display: block;
    min-width: 0;
}

.orbit-sidebar-brand small {
    color: rgba(255, 255, 255, .62);
    font-size: .72rem;
    line-height: 1;
}

.orbit-sidebar-brand strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orbit-header-brand {
    align-items: center;
    gap: .45rem;
    min-height: 34px;
    padding: .25rem .6rem .25rem .35rem;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 999px;
    background: #fff;
    color: #111827;
}

.orbit-header-brand img {
    width: 26px;
    height: 26px;
    border-radius: 8px;
}

.orbit-header-brand strong {
    font-size: .9rem;
    font-weight: 950;
}

.site-nav-links > a,
.site-nav-more {
    color: #172033;
    text-decoration: none;
}

.site-nav-links > a:hover,
.site-nav-more:hover {
    color: #0f766e;
}

.site-nav-more {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 700;
}

.site-nav-dropdown {
    min-width: 230px;
    padding: .45rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .14);
}

.site-nav-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 40px;
    border-radius: 6px;
    color: #334155;
    font-weight: 700;
}

.site-nav-dropdown .dropdown-item i {
    color: #0f766e;
}

.site-nav-dropdown .dropdown-item:hover,
.site-nav-dropdown .dropdown-item:focus {
    background: #ecfdf5;
    color: #0f766e;
}

.site-mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.site-mobile-menu {
    border-top: 1px solid rgba(15, 23, 42, .08);
    background: #fff;
}

.site-mobile-menu .container {
    display: grid;
    gap: .45rem;
}

.site-mobile-menu a,
.site-mobile-menu button {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 44px;
    padding: .65rem .75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #172033;
    text-align: left;
    text-decoration: none;
    font-weight: 800;
}

.site-mobile-menu a:hover,
.site-mobile-menu button:hover {
    background: #ecfdf5;
    color: #0f766e;
}

.site-mobile-menu i {
    color: #0f766e;
}

.site-mobile-menu-group {
    display: grid;
    gap: .25rem;
    margin-top: .35rem;
    padding: .65rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.site-mobile-menu-group > span {
    padding: .2rem .1rem .35rem;
    color: #64748b;
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.whatsapp-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 70;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #25d366;
    color: #fff !important;
    font-size: 1.7rem;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .22);
}

.site-hero {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    color: #fff;
}

.site-hero-carousel,
.site-hero-carousel .carousel-inner,
.site-hero-carousel .carousel-item {
    position: absolute;
    inset: 0;
    height: 100%;
}

.site-hero-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.site-hero-visual-slide {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 18%, rgba(250, 204, 21, .28), transparent 26%),
        radial-gradient(circle at 76% 72%, rgba(20, 184, 166, .38), transparent 30%),
        linear-gradient(135deg, #082f49 0%, #0f766e 48%, #111827 100%);
}

.site-hero-visual-slide::before,
.site-hero-visual-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .82;
}

.site-hero-visual-slide::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 84px 84px;
}

.site-hero-visual-slide::after {
    inset: 8% 6% 6% 52%;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .15), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, .18) 0 12%, transparent 12% 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 12px, transparent 12px 34px),
        rgba(255, 255, 255, .08);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .24);
    backdrop-filter: blur(8px);
}

.site-hero-visual-payments {
    background:
        radial-gradient(circle at 70% 20%, rgba(56, 189, 248, .34), transparent 26%),
        radial-gradient(circle at 72% 72%, rgba(250, 204, 21, .3), transparent 31%),
        linear-gradient(135deg, #164e63 0%, #0f766e 52%, #172033 100%);
}

.site-hero-visual-payments::after {
    background:
        radial-gradient(circle at 20% 25%, rgba(250, 204, 21, .9) 0 9%, transparent 10%),
        radial-gradient(circle at 78% 26%, rgba(255, 255, 255, .92) 0 7%, transparent 8%),
        linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06)),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .16) 0 10px, transparent 10px 38px);
}

.site-hero-visual-reports {
    background:
        radial-gradient(circle at 72% 22%, rgba(244, 63, 94, .25), transparent 25%),
        radial-gradient(circle at 82% 80%, rgba(20, 184, 166, .42), transparent 31%),
        linear-gradient(135deg, #172033 0%, #155e75 48%, #0f766e 100%);
}

.site-hero-visual-reports::after {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)),
        linear-gradient(140deg, transparent 0 22%, rgba(250, 204, 21, .85) 22% 28%, transparent 28% 40%, rgba(20, 184, 166, .9) 40% 48%, transparent 48% 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 10px, transparent 10px 42px);
}

.site-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10, 18, 32, .92), rgba(10, 18, 32, .76) 44%, rgba(10, 18, 32, .38)),
        linear-gradient(0deg, rgba(10, 18, 32, .55), rgba(10, 18, 32, .08));
    z-index: 2;
}

.site-hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.site-eyebrow {
    display: inline-block;
    margin-bottom: .85rem;
    color: rgba(255, 255, 255, .82);
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 0;
}

.site-eyebrow.dark {
    color: #0f766e;
}

.site-hero h1 {
    max-width: 780px;
    font-size: clamp(2.6rem, 5.8vw, 5.2rem);
    line-height: .95;
    overflow-wrap: normal;
    text-shadow: 0 4px 28px rgba(0, 0, 0, .38);
}

.site-hero h1 span {
    color: #facc15;
    text-shadow: 0 6px 32px rgba(250, 204, 21, .2);
}

.site-rotating-word {
    display: inline-block;
    min-width: 10.8ch;
    vertical-align: baseline;
    transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}

.site-rotating-word.is-changing {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px);
}

.site-hero p {
    max-width: 680px;
    margin: 1.25rem 0;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(1.05rem, 2vw, 1.28rem);
    text-shadow: 0 3px 16px rgba(0, 0, 0, .35);
}

.site-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.25rem;
    margin-top: 1.25rem;
    color: rgba(255, 255, 255, .92);
    font-weight: 700;
}

.site-hero-points i {
    color: #67e8f9;
    margin-right: .3rem;
}

.site-hero-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    max-width: 680px;
    margin-top: 1.4rem;
}

.site-hero-proof div {
    padding: .9rem 1rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
}

.site-hero-proof strong,
.site-hero-proof span {
    display: block;
}

.site-hero-proof strong {
    color: #fff;
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    line-height: 1;
}

.site-hero-proof span {
    margin-top: .25rem;
    color: rgba(255, 255, 255, .78);
    font-size: .82rem;
    font-weight: 700;
}

.site-dashboard-card {
    background: rgba(255, 255, 255, .95);
    color: #172033;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 8px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .34);
    padding: clamp(1.1rem, 3vw, 1.5rem);
}

.site-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.site-dashboard-grid div {
    padding: .9rem;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.site-dashboard-grid span,
.site-dashboard-grid strong {
    display: block;
}

.site-dashboard-grid span {
    color: #64748b;
    font-size: .82rem;
}

.site-dashboard-grid strong {
    margin-top: .2rem;
    font-size: clamp(1rem, 2vw, 1.35rem);
}

.site-bars {
    height: 132px;
    display: flex;
    align-items: end;
    gap: .55rem;
    margin: 1rem 0;
    padding: .85rem;
    background: #172033;
    border-radius: 8px;
}

.site-bars span {
    flex: 1;
    min-width: 18px;
    border-radius: 8px 8px 3px 3px;
    background: #14b8a6;
}

.site-bars span:nth-child(2n) {
    background: #38bdf8;
}

.site-bars span:nth-child(3n) {
    background: #f59e0b;
}

.site-dashboard-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .75rem 0;
    border-top: 1px solid #e2e8f0;
}

.site-dashboard-row-wrap {
    align-items: flex-start;
}

.site-gateway-list,
.site-channel-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
    max-width: 260px;
}

.site-gateway-list em,
.site-channel-list em {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: .16rem .5rem;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .72rem;
    font-style: normal;
    font-weight: 800;
}

.site-channel-list em {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.site-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .8rem;
}

.site-dashboard-actions span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .48rem .65rem;
    border-radius: 8px;
    background: #ecfeff;
    color: #155e75;
    font-size: .78rem;
    font-weight: 900;
}

.site-merchant-panel {
    padding: 1.1rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 22px 54px rgba(15, 23, 42, .1);
}

.site-merchant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
    padding: 1rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f766e, #155e75);
    color: #fff;
}

.site-merchant-head span,
.site-merchant-head strong {
    display: block;
}

.site-merchant-head span {
    color: rgba(255, 255, 255, .72);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.site-merchant-head strong {
    margin-top: .25rem;
    font-size: 1.15rem;
    font-weight: 950;
}

.site-merchant-head em {
    flex: 0 0 auto;
    padding: .55rem .7rem;
    border-radius: 8px;
    background: #facc15;
    color: #172033;
    font-style: normal;
    font-weight: 950;
}

.site-merchant-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.site-merchant-steps div {
    min-height: 142px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.site-merchant-steps i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: .7rem;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.2rem;
}

.site-merchant-steps strong,
.site-merchant-steps span {
    display: block;
}

.site-merchant-steps strong {
    color: #172033;
    font-weight: 950;
}

.site-merchant-steps span {
    margin-top: .3rem;
    color: #64748b;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.45;
}

.site-proof {
    background: #fff;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    padding: 1.25rem 0;
}

.site-proof-card {
    height: 100%;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #0f766e;
    background: #f8fafc;
}

.site-proof-card span,
.site-proof-card strong {
    display: block;
}

.site-proof-card span {
    color: #64748b;
    font-size: .85rem;
}

.site-proof-card strong {
    margin-top: .2rem;
    font-size: clamp(1rem, 2vw, 1.45rem);
}

.site-section {
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.site-soft {
    background: #eef3f7;
}

.site-demo-page {
    background: #f4f8fb;
    color: #172033;
}

.site-demo-hero {
    padding: clamp(4rem, 8vw, 7rem) 0;
    background:
        linear-gradient(135deg, rgba(21, 94, 117, .08), rgba(14, 165, 233, .08)),
        #fff;
}

.site-demo-hero h1 {
    max-width: 720px;
    font-size: clamp(2.4rem, 5vw, 5rem);
    line-height: .95;
    margin: .75rem 0 1rem;
    font-weight: 950;
}

.site-demo-hero p {
    max-width: 680px;
    color: #526179;
    font-size: 1.16rem;
}

.site-demo-access-card,
.site-demo-card {
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 22px 54px rgba(15, 23, 42, .1);
}

.site-demo-access-card {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.site-demo-access-card h2 {
    margin: 1rem 0 .35rem;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 950;
}

.site-demo-access-card p,
.site-demo-card p {
    color: #64748b;
}

.site-demo-secret,
.site-demo-credential {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 8px;
    background: #f8fafc;
}

.site-demo-secret {
    margin: 1.25rem 0 1rem;
    padding: 1rem;
}

.site-demo-secret span,
.site-demo-credential span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.site-demo-secret strong,
.site-demo-credential strong {
    color: #111827;
    font-weight: 950;
}

.site-demo-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.site-demo-card > i {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.45rem;
}

.site-demo-card h3 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 950;
}

.site-demo-card p {
    min-height: 4.5rem;
    margin: 0;
}

.site-demo-credential {
    padding: .78rem .85rem;
}

.site-demo-credential strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.site-demo-credential button {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 8px;
    background: #fff;
    color: #0f766e;
}

.site-section-head {
    max-width: 780px;
    margin-bottom: 2rem;
}

.site-section h2,
.site-section-head h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1;
}

.site-section-head p,
.site-lead {
    color: #64748b;
    font-size: 1.08rem;
}

.site-image {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 22px 54px rgba(15, 23, 42, .16);
}

.site-about-media {
    position: relative;
}

.site-about-media-card {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: min(78%, 330px);
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
}

.site-about-media-card strong,
.site-about-media-card span {
    display: block;
}

.site-about-media-card strong {
    color: #172033;
    font-weight: 950;
}

.site-about-media-card span {
    margin-top: .25rem;
    color: #475569;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.45;
}

.site-about-copy {
    max-width: 720px;
}

.site-about-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin-top: 1.5rem;
}

.site-about-list div {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: .8rem;
    min-height: 132px;
    padding: 1rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.site-about-list i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.2rem;
}

.site-about-list strong,
.site-about-list small {
    display: block;
}

.site-about-list strong {
    color: #172033;
    font-size: .98rem;
    font-weight: 950;
}

.site-about-list small {
    margin-top: .3rem;
    color: #64748b;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.45;
}

.site-feature,
.site-testimonial,
.site-price {
    height: 100%;
    padding: 1.35rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
}

.site-feature i {
    color: #0f766e;
    font-size: 1.65rem;
}

.site-feature h3 {
    margin-top: .85rem;
    font-size: 1.1rem;
}

.site-feature p,
.site-testimonial p {
    color: #64748b;
}

.site-feature-tabs {
    overflow-x: auto;
    margin-bottom: 1rem;
    padding-bottom: .2rem;
}

.site-feature-tabs .nav {
    flex-wrap: nowrap;
    gap: .55rem;
}

.site-feature-tabs .nav-link {
    min-height: 42px;
    padding: .55rem .85rem;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: .86rem;
    font-weight: 900;
    white-space: nowrap;
}

.site-feature-tabs .nav-link.active {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
}

.site-feature-panel {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .08);
}

.site-feature-panel-head {
    display: grid;
    gap: .25rem;
    padding: 1.2rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fff, #f8fafc);
}

.site-feature-panel-head span {
    color: #0f766e;
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.site-feature-panel-head strong {
    max-width: 760px;
    color: #172033;
    font-size: clamp(1.2rem, 2.6vw, 1.8rem);
    font-weight: 950;
    line-height: 1.15;
}

.site-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.site-feature-grid .site-feature {
    min-height: 230px;
    border-width: 0 1px 0 0;
    border-radius: 0;
    box-shadow: none;
}

.site-feature-grid .site-feature:last-child {
    border-right: 0;
}

.site-visual-gallery {
    display: grid;
    grid-template-columns: 1.25fr .9fr .9fr;
    gap: 1rem;
}

.site-visual-card {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border-radius: 8px;
    background: #0f172a;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .16);
}

.site-visual-card-large {
    min-height: 360px;
}

.site-visual-card img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    transition: transform .45s ease;
}

.site-visual-card:hover img {
    transform: scale(1.04);
}

.site-visual-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, .02), rgba(15, 23, 42, .82));
}

.site-visual-card div {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1;
    color: #fff;
}

.site-visual-card span,
.site-visual-card strong {
    display: block;
}

.site-visual-card span {
    margin-bottom: .35rem;
    color: #a7f3d0;
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.site-visual-card strong {
    max-width: 440px;
    font-size: clamp(1.05rem, 2vw, 1.55rem);
    line-height: 1.16;
}

.site-portal-showcase {
    position: relative;
    min-height: 420px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 22px 54px rgba(15, 23, 42, .16);
}

.site-portal-showcase img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
}

.site-bills-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.site-bills-grid div {
    min-height: 150px;
    display: grid;
    align-content: start;
    gap: .5rem;
    padding: 1.2rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
}

.site-bills-grid i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #e9fbf6;
    color: #0f766e;
    font-size: 1.35rem;
}

.site-bills-grid strong {
    font-size: 1.08rem;
}

.site-bills-grid span {
    color: #64748b;
}

.site-phone-card {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    width: min(260px, calc(100% - 2.5rem));
    display: grid;
    gap: .45rem;
    padding: 1.2rem;
    background: #172033;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

.site-phone-card i {
    font-size: 1.75rem;
    color: #67e8f9;
}

.site-phone-card span {
    color: #cbd5e1;
}

.site-phone-card button {
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    padding: .7rem;
    font-weight: 800;
}

.site-testimonials {
    background: #fff;
}

.site-testimonials .carousel-indicators [data-bs-target] {
    background-color: #0f766e;
}

.site-carousel-control {
    width: 42px;
    height: 42px;
    top: auto;
    bottom: .35rem;
    border-radius: 50%;
    background: #172033;
    opacity: 1;
}

.site-carousel-control.carousel-control-prev {
    left: auto;
    right: 3.4rem;
}

.site-carousel-control.carousel-control-next {
    right: .35rem;
}

.site-stars {
    color: #f59e0b;
    font-weight: 800;
    margin-bottom: .75rem;
}

.site-testimonial strong,
.site-testimonial span {
    display: block;
}

.site-testimonial span {
    color: #64748b;
    font-size: .9rem;
}

.pricing-toggle {
    display: inline-flex;
    padding: .25rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
}

.pricing-toggle button {
    border: 0;
    border-radius: 6px;
    padding: .55rem 1rem;
    background: transparent;
    color: #475569;
    font-weight: 800;
}

.pricing-toggle button.active {
    background: #0f766e;
    color: #fff;
}

.site-price ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: grid;
    gap: .55rem;
}

.site-price {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.45rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.site-price:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 118, 110, .24);
    box-shadow: 0 26px 62px rgba(15, 23, 42, .12);
}

.site-price::after {
    content: "";
    position: absolute;
    inset: auto 1.45rem 1.05rem 1.45rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(15, 118, 110, .2), rgba(245, 158, 11, .2), rgba(2, 132, 199, .2));
    pointer-events: none;
}

.site-price.featured {
    border-color: rgba(15, 118, 110, .45);
    background: linear-gradient(180deg, #ffffff 0%, #f7fffc 100%);
    box-shadow: 0 30px 68px rgba(15, 118, 110, .18);
}

.site-price.featured::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #0f766e, #f59e0b, #0284c7);
}

.site-price-kicker {
    color: #0f766e;
    font-size: .72rem;
    letter-spacing: .04em;
    font-weight: 900;
    text-transform: uppercase;
}

.site-price-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .85rem;
    position: relative;
    z-index: 1;
}

.site-price-top h3 {
    margin-bottom: 0;
    font-size: 1.45rem;
}

.site-price-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #e9fbf6;
    color: #0f766e;
    font-size: 1.35rem;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .08);
}

.site-price.featured .site-price-icon {
    background: #fff7ed;
    color: #c2410c;
}

.site-price-custom {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, .16), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-color: rgba(2, 132, 199, .22);
}

.site-price-custom::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #0284c7, #0f766e, #f59e0b);
}

.site-price-custom .site-price-icon {
    background: #e0f2fe;
    color: #0369a1;
}

.site-price-value {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .35rem 0 .15rem;
    padding: .85rem .95rem;
    border: 1px solid rgba(15, 118, 110, .12);
    border-radius: 8px;
    background: #f8fafc;
    position: relative;
    z-index: 1;
}

.site-price-value [data-monthly-price],
.site-price-value [data-yearly-price] {
    color: #172033;
    font-size: clamp(2.15rem, 4vw, 3.35rem);
    font-weight: 900;
    line-height: 1;
    overflow-wrap: anywhere;
}

.site-price-value small,
.site-price-value em {
    color: #64748b;
    font-size: .9rem;
    font-style: normal;
    font-weight: 800;
}

.site-price-value em {
    margin-bottom: .2rem;
}

.site-price-custom-value {
    align-items: flex-start;
    flex-direction: column;
    gap: .2rem;
    background: #eff6ff;
    border-color: rgba(2, 132, 199, .16);
}

.site-price-custom-value span {
    color: #172033;
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    font-weight: 900;
    line-height: 1.05;
}

.site-price-custom-value em {
    color: #0369a1;
    font-size: 1rem;
}

.site-plan-limits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    position: relative;
    z-index: 1;
}

.site-plan-limits div {
    min-width: 0;
    padding: .75rem .65rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.site-plan-limits span,
.site-plan-limits strong,
.site-plan-limits small {
    display: block;
}

.site-plan-limits span {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.site-plan-limits strong {
    margin-top: .15rem;
    color: #172033;
    font-size: clamp(1.05rem, 3vw, 1.28rem);
    line-height: 1;
    overflow-wrap: anywhere;
}

.site-plan-limits small {
    margin-top: .2rem;
    color: #64748b;
    font-size: .75rem;
    font-weight: 700;
}

.site-plan-included {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    position: relative;
    z-index: 1;
}

.site-plan-included div {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem;
    border: 1px solid rgba(15, 118, 110, .16);
    border-radius: 8px;
    background: #f0fdfa;
    color: #134e4a;
    font-weight: 900;
}

.site-plan-included i {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #0f766e;
    color: #fff;
}

.site-price .btn {
    position: relative;
    z-index: 1;
    margin-top: auto;
    border-width: 2px;
    font-weight: 900;
}

.site-price.featured .btn {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
    box-shadow: 0 14px 30px rgba(15, 118, 110, .2);
}

.site-price li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    color: #475569;
}

.site-price li i {
    color: #0f766e;
    margin-top: .12rem;
}

.site-price-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: -.25rem 0 1.1rem;
}

.site-price-tags span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .6rem;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-size: .76rem;
    font-weight: 900;
}

.site-price-tags i {
    color: #0284c7;
}

.site-contact {
    background: #172033;
    color: #fff;
}

.site-contact p {
    color: rgba(255, 255, 255, .78);
}

.site-contact-list {
    display: grid;
    gap: .75rem;
    margin-top: 1.25rem;
}

.site-contact-list a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .95rem 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
}

.site-contact-list i {
    color: #67e8f9;
}

.site-contact-form {
    height: 100%;
    padding: clamp(1.2rem, 3vw, 2rem);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
}

.site-contact-form .form-control {
    min-height: 46px;
}

.site-footer {
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.manual-site {
    background: #f5f7fb;
    color: #172033;
    min-height: 100vh;
}

.manual-nav {
    background: rgba(255, 255, 255, .95);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.manual-hero {
    position: relative;
    overflow: hidden;
    padding: 5rem 0;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .86), rgba(21, 94, 117, .9)),
        url("https://images.unsplash.com/photo-1678693362448-27bc143e74d9?auto=format&fit=crop&fm=jpg&q=80&w=1800") center/cover;
    color: #fff;
}

.manual-hero h1 {
    max-width: 760px;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.04;
}

.manual-hero p {
    max-width: 720px;
    color: rgba(255, 255, 255, .84);
    font-size: 1.08rem;
}

.manual-summary-card {
    display: grid;
    gap: .8rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    color: #172033;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .18);
}

.manual-summary-card div {
    display: grid;
    gap: .2rem;
    padding: .95rem;
    border-radius: 8px;
    background: #f8fafc;
}

.manual-summary-card span {
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.manual-summary-card strong {
    color: #172033;
}

.manual-main {
    padding: 3.5rem 0;
}

.manual-toc {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: .25rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.manual-toc strong {
    margin-bottom: .35rem;
    color: #172033;
}

.manual-toc a {
    padding: .45rem .55rem;
    border-radius: 6px;
    color: #475569;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
}

.manual-toc a:hover {
    background: #e0f2fe;
    color: #155e75;
}

.manual-card {
    margin-bottom: 1rem;
    padding: 1.4rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
    scroll-margin-top: 1rem;
}

.manual-card h2 {
    margin: .4rem 0 .9rem;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 900;
}

.manual-card h3 {
    font-size: 1rem;
    font-weight: 900;
}

.manual-card p,
.manual-card li {
    color: #475569;
    line-height: 1.65;
}

.manual-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.manual-steps.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.manual-steps div,
.manual-grid div,
.manual-two-col > div {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.manual-steps strong,
.manual-grid strong {
    display: block;
    margin-bottom: .35rem;
    color: #172033;
}

.manual-steps p,
.manual-grid p {
    margin: 0;
}

.manual-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.manual-grid i {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: .75rem;
    border-radius: 8px;
    background: #e0f2fe;
    color: #155e75;
    font-size: 1.25rem;
}

.manual-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.manual-list {
    display: grid;
    gap: .65rem;
    margin: 0;
    padding-left: 1.1rem;
}

.manual-faq .accordion-item {
    border-color: #e2e8f0;
}

.manual-faq .accordion-button {
    font-weight: 800;
}

.mobile-app-site {
    min-height: 100vh;
    background: #f6f8fb;
    color: #172033;
}

.mobile-app-hero {
    position: relative;
    overflow: hidden;
    padding: 5rem 0;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .9), rgba(16, 122, 103, .86)),
        url("https://images.unsplash.com/photo-1512428559087-560fa5ceab42?auto=format&fit=crop&fm=jpg&q=80&w=1800") center/cover;
    color: #fff;
}

.mobile-app-hero h1 {
    max-width: 780px;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.04;
}

.mobile-app-hero p {
    max-width: 720px;
    color: rgba(255, 255, 255, .84);
    font-size: 1.08rem;
}

.mobile-app-preview {
    display: grid;
    justify-items: center;
}

.mobile-app-phone {
    width: min(310px, 100%);
    padding: .8rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 34px;
    background: #07111f;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.mobile-app-phone-top {
    width: 92px;
    height: 8px;
    margin: .3rem auto .8rem;
    border-radius: 999px;
    background: #334155;
}

.mobile-app-phone-screen {
    display: grid;
    gap: .75rem;
    min-height: 440px;
    padding: 1rem;
    border-radius: 24px;
    background: linear-gradient(180deg, #f8fafc, #e0f2fe);
    color: #172033;
}

.mobile-app-phone-screen > span {
    color: #155e75;
    font-size: .82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.mobile-app-phone-screen > strong {
    font-size: 1.5rem;
    line-height: 1.1;
}

.mobile-app-phone-screen div {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .07);
}

.mobile-app-phone-screen i {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #facc15;
    color: #172033;
}

.mobile-app-phone-screen em {
    color: #172033;
    font-style: normal;
    font-weight: 900;
}

.mobile-app-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.mobile-app-grid div,
.mobile-app-checklist div {
    padding: 1rem;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

.mobile-app-grid i {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: .85rem;
    border-radius: 8px;
    background: #e0f2fe;
    color: #155e75;
    font-size: 1.25rem;
}

.mobile-app-grid strong {
    display: block;
    margin-bottom: .35rem;
    color: #172033;
}

.mobile-app-grid p {
    margin: 0;
    color: #475569;
    line-height: 1.6;
}

.mobile-app-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.mobile-app-checklist div {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.mobile-app-checklist i {
    color: #14b8a6;
    font-size: 1.2rem;
}

.mobile-app-checklist span {
    color: #475569;
    line-height: 1.55;
}

.terms-site {
    min-height: 100vh;
    background: #f6f8fb;
    color: #172033;
}

.terms-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 7vw, 6rem) 0;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(15, 118, 110, .88)),
        url("https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&fm=jpg&q=80&w=1800") center/cover;
    color: #fff;
}

.terms-hero h1 {
    max-width: 820px;
    font-size: clamp(2.25rem, 5vw, 4.4rem);
    font-weight: 950;
    line-height: 1;
}

.terms-hero p {
    max-width: 700px;
    color: rgba(255, 255, 255, .84);
    font-size: 1.08rem;
}

.terms-hero-card {
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 22px 56px rgba(15, 23, 42, .22);
    backdrop-filter: blur(16px);
}

.terms-hero-card span,
.terms-hero-card strong {
    display: block;
}

.terms-hero-card span {
    color: #facc15;
    font-size: .82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.terms-hero-card strong {
    margin-top: .35rem;
    font-size: 1.6rem;
}

.terms-hero-card p {
    margin: .75rem 0 0;
    font-size: .95rem;
}

.terms-main {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.terms-layout {
    display: grid;
    grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.terms-index {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
}

.terms-index span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.terms-index a {
    padding: .55rem .65rem;
    border-radius: 8px;
    color: #334155;
    font-weight: 800;
    text-decoration: none;
}

.terms-index a:hover {
    background: #ecfdf5;
    color: #0f766e;
}

.terms-content {
    display: grid;
    gap: .85rem;
}

.terms-card {
    position: relative;
    padding: clamp(1.1rem, 3vw, 1.55rem);
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .06);
}

.terms-card > span {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: .85rem;
    border-radius: 8px;
    background: #e0f2fe;
    color: #155e75;
    font-weight: 950;
}

.terms-card h2,
.terms-contact h2 {
    margin-bottom: .55rem;
    color: #172033;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 950;
    line-height: 1.08;
}

.terms-card p,
.terms-card li,
.terms-contact p {
    color: #475569;
    line-height: 1.7;
}

.terms-card ul {
    margin-bottom: 0;
    padding-left: 1.1rem;
}

.terms-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.1rem, 3vw, 1.6rem);
    border-radius: 8px;
    background: #e7f8f5;
    border: 1px solid #b6e7df;
}

.terms-contact p {
    margin-bottom: 0;
}

.terms-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

@media (max-width: 991.98px) {
    .terms-layout {
        grid-template-columns: 1fr;
    }

    .terms-index {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .terms-index span {
        grid-column: 1 / -1;
    }

    .terms-contact {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .terms-index {
        grid-template-columns: 1fr;
    }
}

.saas-site {
    background: #f6f8fb;
    color: #172033;
}

.saas-site a {
    color: inherit;
    text-decoration: none;
}

.saas-site .btn-primary {
    background: #0f766e;
    border-color: #0f766e;
}

.saas-site .btn-outline-primary {
    color: #0f766e;
    border-color: #0f766e;
}

.saas-site .btn-outline-primary:hover {
    background: #0f766e;
    color: #fff;
}

.saas-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .95);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.saas-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
}

.saas-brand span {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #0f766e;
    color: #fff;
    font-weight: 800;
}

.saas-nav a:not(.btn):hover {
    color: #0f766e;
}

.saas-hero {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #172033;
    color: #fff;
}

.saas-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .4);
    z-index: 1;
}

.saas-hero-visual {
    position: absolute;
    inset: 0;
    background: #dfe7ea;
    color: #172033;
}

.saas-screen {
    position: absolute;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .2);
}

.screen-main {
    right: 7vw;
    top: 92px;
    width: min(760px, 56vw);
    min-height: 500px;
    padding: 1.15rem;
}

.screen-side {
    right: 5vw;
    bottom: 82px;
    width: min(360px, 32vw);
    padding: 1.2rem;
}

.screen-topbar {
    display: flex;
    gap: .35rem;
    margin-bottom: 1rem;
}

.screen-topbar span {
    width: .72rem;
    height: .72rem;
    border-radius: 50%;
    background: #e2e8f0;
}

.screen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    margin-bottom: 1rem;
}

.screen-metric {
    padding: 1rem;
    background: #e9fbf6;
    border: 1px solid #c8eee3;
    border-radius: 8px;
}

.screen-metric small,
.screen-metric strong {
    display: block;
}

.screen-metric small {
    color: #64748b;
}

.screen-metric strong {
    margin-top: .35rem;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
}

.accent-blue {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.accent-gold {
    background: #fffbeb;
    border-color: #fde68a;
}

.screen-chart {
    height: 190px;
    display: flex;
    align-items: end;
    gap: .85rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.screen-chart span {
    flex: 1;
    min-width: 22px;
    border-radius: 8px 8px 3px 3px;
    background: #0f766e;
}

.screen-chart span:nth-child(2n) {
    background: #2563eb;
}

.screen-chart span:nth-child(3n) {
    background: #d97706;
}

.screen-table {
    display: grid;
    gap: .35rem;
}

.screen-table div {
    display: grid;
    grid-template-columns: 1fr .8fr .8fr;
    gap: 1rem;
    padding: .7rem .85rem;
    border-radius: 8px;
    background: #f8fafc;
}

.screen-table div:first-child {
    background: #172033;
    color: #fff;
}

.member-mini {
    display: grid;
    gap: .4rem;
}

.member-mini i {
    font-size: 2rem;
    color: #0f766e;
}

.member-mini span {
    color: #64748b;
}

.saas-hero .container {
    z-index: 2;
}

.saas-hero-copy {
    max-width: 700px;
    padding: 6rem 0;
}

.saas-eyebrow {
    display: inline-block;
    margin-bottom: .8rem;
    color: rgba(255, 255, 255, .72);
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 0;
}

.saas-eyebrow.dark {
    color: #0f766e;
}

.saas-hero h1 {
    font-size: clamp(3rem, 8vw, 6.8rem);
    line-height: .92;
    max-width: 760px;
}

.saas-hero p {
    max-width: 650px;
    margin: 1.4rem 0;
    color: rgba(255, 255, 255, .84);
    font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.saas-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
    color: rgba(255, 255, 255, .88);
    font-weight: 700;
}

.saas-hero-proof i {
    color: #67e8f9;
    margin-right: .25rem;
}

.saas-band {
    background: #fff;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    padding: 1.25rem 0;
}

.saas-stat {
    padding: 1rem;
    border-left: 4px solid #0f766e;
    background: #f8fafc;
    border-radius: 8px;
}

.saas-stat span,
.saas-stat strong {
    display: block;
}

.saas-stat span {
    color: #64748b;
    font-size: .85rem;
}

.saas-stat strong {
    margin-top: .2rem;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
}

.saas-section {
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.saas-section-soft {
    background: #fff;
}

.saas-section-head {
    max-width: 760px;
    margin-bottom: 2rem;
}

.saas-section-head h2,
.saas-section h2,
.saas-deploy h2 {
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1;
}

.saas-section-head p,
.saas-lead,
.saas-deploy p {
    color: #64748b;
    font-size: 1.08rem;
}

.saas-feature,
.saas-price,
.saas-portal-preview,
.saas-steps > div {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
}

.saas-feature {
    height: 100%;
    padding: 1.35rem;
}

.saas-feature i {
    color: #0f766e;
    font-size: 1.7rem;
}

.saas-feature h3 {
    margin-top: .85rem;
    font-size: 1.1rem;
}

.saas-feature p {
    margin-bottom: 0;
    color: #64748b;
}

.saas-portal-preview {
    display: grid;
    grid-template-columns: minmax(220px, .65fr) 1fr;
    gap: 1.2rem;
    align-items: center;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: #eef7f5;
}

.portal-phone {
    max-width: 280px;
    margin: auto;
    padding: 1.35rem;
    border-radius: 28px;
    background: #172033;
    color: #fff;
    box-shadow: 0 24px 55px rgba(15, 23, 42, .24);
}

.phone-notch {
    width: 72px;
    height: 6px;
    margin: 0 auto 1rem;
    border-radius: 999px;
    background: #64748b;
}

.portal-phone strong,
.portal-phone span,
.portal-phone button {
    display: block;
}

.portal-phone span {
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.phone-balance {
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 8px;
    background: #0f766e;
    font-size: 1.45rem;
    font-weight: 800;
}

.portal-phone button {
    width: 100%;
    border: 0;
    border-radius: 8px;
    padding: .75rem;
    margin-top: .65rem;
    background: #fff;
    color: #172033;
    font-weight: 700;
}

.portal-lines {
    display: grid;
    gap: .85rem;
}

.portal-lines div {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .95rem 1rem;
    border-radius: 8px;
    background: #fff;
    font-weight: 700;
}

.portal-lines i {
    color: #2563eb;
    font-size: 1.25rem;
}

.saas-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.saas-steps > div {
    padding: 1.25rem;
}

.saas-steps span {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #172033;
    color: #fff;
    font-weight: 800;
    margin-bottom: 1rem;
}

.saas-steps p {
    color: #64748b;
    margin: .55rem 0 0;
}

.saas-pricing-section {
    background: #eef2f7;
}

.saas-price {
    height: 100%;
    padding: 1.4rem;
}

.saas-price h3 {
    font-size: 1.25rem;
}

.saas-price-value {
    margin: 1rem 0;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
}

.saas-price-value span {
    font-size: 1rem;
    color: #64748b;
    font-weight: 600;
}

.saas-price ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: grid;
    gap: .55rem;
}

.saas-price li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #475569;
}

.saas-price li i {
    color: #0f766e;
}

.saas-deploy {
    background: #172033;
    color: #fff;
}

.saas-deploy p {
    color: rgba(255, 255, 255, .75);
}

.saas-check-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .8rem;
}

.saas-check-grid span {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    font-weight: 700;
}

.saas-check-grid i {
    color: #67e8f9;
    margin-right: .45rem;
}

.saas-footer {
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.agent-site {
    background: #f4f7fb;
    color: #172033;
    overflow-x: hidden;
}

.agent-site-personal {
    background:
        linear-gradient(180deg, #f7fbff 0, #eef6f5 46%, #f8fafc 100%);
}

.agent-site a {
    color: inherit;
    text-decoration: none;
}

.agent-site .btn-primary {
    background: #0f766e;
    border-color: #0f766e;
}

.agent-site .btn-primary:hover {
    background: #115e59;
    border-color: #115e59;
}

.agent-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.agent-nav a:not(.btn):hover {
    color: #0f766e;
}

.agent-hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

.agent-hero-slider,
.agent-hero-overlay {
    position: absolute;
    inset: 0;
}

.agent-hero-slider,
.agent-hero-slider .carousel-inner,
.agent-hero-slider .carousel-item {
    height: 100%;
}

.agent-hero-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    transition: transform 5.6s ease;
}

.agent-hero-slider .carousel-item.active img {
    transform: scale(1.09);
}

.agent-hero-dots {
    z-index: 4;
    right: auto;
    bottom: 1.5rem;
    left: clamp(1rem, 6vw, 5rem);
    justify-content: flex-start;
    margin: 0;
}

.agent-hero-dots [data-bs-target] {
    width: 2rem;
    height: .35rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .6);
}

.agent-hero-dots .active {
    background: #67e8f9;
}

.agent-hero-overlay {
    background:
        linear-gradient(90deg, rgba(10, 18, 32, .94), rgba(10, 18, 32, .78) 48%, rgba(10, 18, 32, .38)),
        linear-gradient(0deg, rgba(15, 118, 110, .45), rgba(15, 23, 42, .2));
}

.agent-hero-content {
    position: relative;
    z-index: 2;
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.agent-eyebrow {
    display: inline-block;
    margin-bottom: .8rem;
    color: rgba(255, 255, 255, .78);
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 0;
}

.agent-eyebrow.dark {
    color: #0f766e;
}

.agent-hero h1 {
    max-width: 820px;
    font-size: clamp(2.35rem, 5.2vw, 5.2rem);
    line-height: 1;
    text-shadow: 0 4px 28px rgba(0, 0, 0, .38);
}

.agent-site-personal .agent-hero {
    min-height: 680px;
}

.agent-site-personal .agent-hero h1 {
    max-width: 760px;
    font-size: clamp(2.15rem, 4.4vw, 4.4rem);
    line-height: 1.03;
}

.agent-site-personal .agent-hero-overlay {
    background:
        linear-gradient(90deg, rgba(9, 18, 31, .9), rgba(12, 43, 52, .7) 52%, rgba(12, 43, 52, .3)),
        linear-gradient(0deg, rgba(15, 118, 110, .35), rgba(15, 23, 42, .18));
}

.agent-hero p {
    max-width: 680px;
    margin: 1.25rem 0;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    text-shadow: 0 3px 16px rgba(0, 0, 0, .32);
}

.agent-hero-copy-carousel {
    position: relative;
    min-height: clamp(260px, 33vw, 430px);
}

.agent-hero-copy {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
    transition: opacity .55s ease, transform .55s ease;
}

.agent-hero-copy.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.agent-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.25rem;
    margin-top: 1.25rem;
    color: rgba(255, 255, 255, .92);
    font-weight: 700;
}

.agent-hero-points i {
    color: #67e8f9;
    margin-right: .3rem;
}

.agent-panel {
    padding: clamp(1.15rem, 3vw, 1.5rem);
    background: rgba(255, 255, 255, .96);
    color: #172033;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 8px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .34);
}

.agent-commission-badge {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem 1rem;
    align-items: end;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #172033, #0f766e);
    color: #fff;
}

.agent-commission-badge span,
.agent-commission-badge em {
    color: rgba(255, 255, 255, .76);
    font-size: .82rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.agent-commission-badge strong {
    grid-row: span 2;
    color: #facc15;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: .9;
}

.agent-panel-grid,
.agent-earnings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.agent-panel-grid div,
.agent-earnings div {
    padding: 1rem;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.agent-panel-grid span,
.agent-panel-grid strong,
.agent-earnings span,
.agent-earnings strong,
.agent-earnings small {
    display: block;
}

.agent-panel-grid span,
.agent-earnings span,
.agent-earnings small {
    color: #64748b;
}

.agent-panel-grid strong,
.agent-earnings strong {
    margin-top: .25rem;
    font-size: clamp(1.08rem, 2vw, 1.6rem);
}

.agent-level-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: 1rem;
}

.agent-level-card {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
}

.agent-level-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: #0f766e;
}

.agent-level-card.builder::before {
    background: #14b8a6;
}

.agent-level-card.growth::before {
    background: #38bdf8;
}

.agent-level-card.leader::before {
    background: #f59e0b;
}

.agent-level-card.elite::before {
    background: #facc15;
}

.agent-level-card span,
.agent-level-card strong,
.agent-level-card small {
    display: block;
}

.agent-level-card span {
    margin-top: .45rem;
    color: #0f766e;
    font-weight: 900;
    text-transform: uppercase;
}

.agent-level-card strong {
    margin: .6rem 0 .25rem;
    color: #172033;
    font-size: 1.35rem;
}

.agent-level-card small,
.agent-level-card p {
    color: #64748b;
}

.agent-level-card p {
    margin: .75rem 0 0;
    line-height: 1.55;
}

.agent-reward-feature {
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.agent-ref-card {
    display: grid;
    gap: .2rem;
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 8px;
    background: #172033;
    color: #fff;
}

.agent-ref-card span {
    color: #cbd5e1;
    font-size: .85rem;
}

.agent-ref-card strong {
    overflow-wrap: anywhere;
    font-size: .92rem;
}

.agent-ref-card-compact {
    margin-bottom: 0;
}

.agent-ref-card-compact strong {
    font-size: 1rem;
}

.agent-step-mini {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
    border-top: 1px solid #e2e8f0;
    font-weight: 700;
}

.agent-step-mini i {
    color: #0f766e;
    font-size: 1.2rem;
}

.agent-proof {
    background: #fff;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    padding: 1.25rem 0;
}

.agent-proof div div div {
    height: 100%;
    padding: 1rem;
    border-left: 4px solid #0f766e;
    background: #f8fafc;
    border-radius: 8px;
}

.agent-proof span,
.agent-proof strong {
    display: block;
}

.agent-proof span {
    color: #64748b;
    font-size: .85rem;
}

.agent-proof strong {
    margin-top: .2rem;
    font-size: clamp(1rem, 2vw, 1.45rem);
}

.agent-ai-section {
    padding-bottom: 0;
}

.agent-ai-panel {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(1rem, 3vw, 1.5rem);
    align-items: center;
    padding: clamp(1.3rem, 4vw, 2rem);
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
}

.agent-ai-copy h2 {
    font-size: clamp(2rem, 4vw, 3.7rem);
    line-height: 1;
}

.agent-ai-copy p {
    color: #52627a;
    font-size: 1.08rem;
}

.agent-ai-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
}

.agent-ai-strip span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .7rem;
    border-radius: 999px;
    background: #ecfeff;
    color: #155e75;
    font-weight: 800;
    font-size: .86rem;
}

.agent-ai-grid,
.agent-catalog-grid {
    display: grid;
    gap: .85rem;
}

.agent-ai-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-ai-card {
    min-height: 180px;
    padding: 1rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #f8fbff;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.agent-ai-card:hover,
.agent-product-card:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 118, 110, .35);
    box-shadow: 0 22px 45px rgba(15, 23, 42, .1);
}

.agent-ai-card i {
    color: #0f766e;
    font-size: 1.8rem;
}

.agent-ai-card strong,
.agent-ai-card span {
    display: block;
}

.agent-ai-card strong {
    margin: .85rem 0 .45rem;
    font-size: 1.1rem;
}

.agent-ai-card span {
    color: #64748b;
    line-height: 1.55;
}

.agent-section {
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.agent-soft {
    background: #eaf1f5;
}

.agent-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-product-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    min-height: 190px;
    padding: 1.1rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.agent-product-icon {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.65rem;
}

.agent-product-body em {
    color: #0f766e;
    font-style: normal;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.agent-product-body h3 {
    margin: .35rem 0 .45rem;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.agent-product-body p {
    color: #64748b;
    margin-bottom: .8rem;
    line-height: 1.55;
}

.agent-product-body strong {
    color: #0f766e;
}

.agent-product-tabs {
    gap: .55rem;
    margin-bottom: 1rem;
    padding: .55rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.agent-product-tabs .nav-link {
    border-radius: 8px;
    color: #475569;
    font-weight: 850;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.agent-product-tabs .nav-link:hover {
    background: #ecfeff;
    color: #0f766e;
    transform: translateY(-1px);
}

.agent-product-tabs .nav-link.active {
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #fff;
    box-shadow: 0 14px 28px rgba(15, 118, 110, .22);
}

.agent-product-tab-content .tab-pane,
.agent-support-content .tab-pane {
    animation: agentFadeUp .28s ease both;
}

.agent-support-shell {
    padding: clamp(1rem, 3vw, 1.4rem);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .08);
}

.agent-support-card {
    height: 100%;
    padding: 1.15rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.agent-support-card:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 118, 110, .35);
    box-shadow: 0 18px 36px rgba(15, 23, 42, .08);
}

.agent-support-card i {
    color: #0f766e;
    font-size: 1.55rem;
}

.agent-support-card h3 {
    margin: .75rem 0 .35rem;
    font-size: 1.05rem;
}

.agent-support-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.55;
}

.agent-support-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background: #0f172a;
    color: #fff;
}

.agent-support-action strong,
.agent-support-action span {
    display: block;
}

.agent-support-action span {
    color: rgba(255, 255, 255, .74);
}

.agent-feature,
.agent-product-card,
.agent-ai-card,
.agent-panel,
.agent-support-shell {
    animation: agentFadeUp .36s ease both;
}

@keyframes agentFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.agent-section-head {
    max-width: 780px;
    margin-bottom: 2rem;
}

.agent-section h2,
.agent-section-head h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1;
}

.agent-section-head p,
.agent-lead {
    color: #64748b;
    font-size: 1.08rem;
}

.agent-feature {
    height: 100%;
    padding: 1.35rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
}

.agent-feature i {
    color: #0f766e;
    font-size: 1.7rem;
}

.agent-feature h3 {
    margin-top: .85rem;
    font-size: 1.12rem;
}

.agent-feature p {
    color: #64748b;
    margin-bottom: 0;
}

.agent-card-link:hover .agent-feature {
    transform: translateY(-2px);
    border-color: rgba(15, 118, 110, .35);
}

.agent-contact {
    background: #172033;
    color: #fff;
}

.agent-contact p {
    color: rgba(255, 255, 255, .78);
}

.agent-faq .accordion-item {
    border: 0;
    margin-bottom: .8rem;
    border-radius: 8px;
    overflow: hidden;
}

.agent-faq .accordion-button {
    font-weight: 800;
}

.agent-site-program {
    background: #f5f7fb;
}

.agent-site-program .agent-nav {
    backdrop-filter: blur(16px);
}

.agent-site-program .agent-hero {
    min-height: clamp(540px, 72vh, 650px);
    background: #0f172a;
}

.agent-site-program .agent-hero-slider img {
    filter: saturate(.82) contrast(.95) brightness(.55);
    opacity: .5;
    object-position: center;
}

.agent-site-program .agent-hero-slider .carousel-item.active img {
    transform: scale(1.045);
}

.agent-site-program .agent-hero-overlay {
    background:
        linear-gradient(90deg, rgba(10, 18, 32, .98), rgba(10, 18, 32, .9) 46%, rgba(10, 18, 32, .68)),
        linear-gradient(135deg, rgba(15, 118, 110, .42), rgba(245, 158, 11, .12));
}

.agent-site-program .agent-hero-copy-carousel {
    min-height: 0;
}

.agent-site-program .agent-hero-copy {
    display: none;
    position: static;
    opacity: 1;
    transform: none;
}

.agent-site-program .agent-hero-copy.is-active {
    display: block;
}

.agent-site-program .agent-hero-content {
    padding-top: clamp(3rem, 5vw, 4.5rem);
    padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.agent-site-program .agent-hero h1 {
    max-width: 650px;
    font-size: clamp(2.05rem, 4vw, 3.65rem);
    line-height: 1.08;
}

.agent-site-program .agent-hero p {
    max-width: 580px;
    font-size: clamp(1rem, 1.6vw, 1.16rem);
    line-height: 1.68;
}

.agent-site-program .agent-hero .btn {
    margin-top: .35rem;
}

.agent-site-program .agent-hero-points {
    max-width: 720px;
    gap: .65rem 1rem;
}

.agent-site-program .agent-hero-points span {
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .24);
}

.agent-site-program .agent-panel {
    max-width: 430px;
    margin-left: auto;
    box-shadow: 0 20px 54px rgba(15, 23, 42, .24);
}

.agent-site-program .agent-step-mini {
    padding: .58rem 0;
    font-size: .92rem;
}

.agent-site-program .agent-commission-badge {
    background: linear-gradient(135deg, #0f172a, #0f766e 72%, #f59e0b);
}

.agent-site-program .agent-commission-badge strong {
    color: #fde047;
    font-size: clamp(2.1rem, 4vw, 3.2rem);
}

.agent-site-program .agent-section {
    padding: clamp(3.2rem, 6vw, 5.2rem) 0;
}

.agent-site-program .agent-soft {
    background: #edf4f7;
}

.agent-program-shell {
    padding: clamp(1rem, 2.5vw, 1.4rem);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 22px 54px rgba(15, 23, 42, .08);
}

.agent-program-tabs {
    margin-bottom: 1.2rem;
}

.agent-program-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.agent-program-content .tab-pane {
    animation: agentFadeUp .34s ease both;
}

.agent-program-pane {
    display: grid;
    grid-template-columns: minmax(240px, .78fr) minmax(0, 1.22fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: start;
    min-height: 360px;
    padding: clamp(1rem, 3vw, 1.7rem);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(236, 253, 245, .74), rgba(255, 247, 237, .44)),
        #f8fafc;
}

.agent-program-pane h3 {
    margin: .45rem 0 .75rem;
    color: #172033;
    font-size: clamp(1.65rem, 3vw, 2.6rem);
    font-weight: 900;
    line-height: 1.05;
}

.agent-program-pane p {
    color: #52627a;
    font-size: 1.04rem;
    line-height: 1.7;
}

.agent-program-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.agent-program-card {
    display: grid;
    gap: .45rem;
    min-height: 150px;
    padding: 1rem;
    border: 1px solid #dbe5ee;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.agent-program-card:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 118, 110, .35);
    box-shadow: 0 20px 40px rgba(15, 23, 42, .09);
}

.agent-program-card i {
    color: #0f766e;
    font-size: 1.55rem;
}

.agent-program-card strong {
    color: #172033;
    font-size: 1.02rem;
}

.agent-program-card span {
    color: #64748b;
    line-height: 1.55;
}

.agent-program-pane .agent-level-track {
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    overflow-x: auto;
    padding-bottom: .45rem;
}

.agent-program-pane .agent-level-card {
    min-height: 180px;
}

.agent-program-pane .agent-ai-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-program-pane .agent-ai-card {
    min-height: 150px;
    background: #fff;
}

.agent-site-program .agent-product-card {
    min-height: 168px;
}

.agent-site-program .agent-feature,
.agent-site-program .agent-product-card,
.agent-site-program .agent-ai-card,
.agent-site-program .agent-panel,
.agent-site-program .agent-support-shell,
.agent-site-program .agent-program-shell {
    animation-duration: .45s;
}

@media (prefers-reduced-motion: reduce) {
    .agent-hero-slider img,
    .agent-hero-copy,
    .agent-feature,
    .agent-product-card,
    .agent-ai-card,
    .agent-panel,
    .agent-support-shell,
    .agent-program-shell,
    .agent-program-card {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

.merchant-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 1rem;
    padding: clamp(1.2rem, 3vw, 1.7rem);
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, .22), transparent 28%),
        linear-gradient(135deg, #0f172a, #0f766e);
    color: #fff;
    box-shadow: 0 22px 58px rgba(15, 23, 42, .18);
}

.merchant-eyebrow {
    display: inline-block;
    margin-bottom: .55rem;
    color: #fde68a;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.merchant-dashboard-hero h2 {
    max-width: 780px;
    margin-bottom: .65rem;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 900;
    line-height: 1;
}

.merchant-dashboard-hero p {
    max-width: 760px;
    color: rgba(255, 255, 255, .8);
    line-height: 1.65;
}

.merchant-wallet-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 38px;
    padding: .42rem .78rem;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 8px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    font-size: .95rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.merchant-wallet-chip i {
    font-size: 1.05rem;
}

.merchant-level-panel {
    display: grid;
    gap: 1rem;
    align-content: center;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
}

.merchant-level-panel span,
.merchant-level-panel em {
    display: block;
    color: rgba(255, 255, 255, .72);
    font-style: normal;
    font-weight: 800;
}

.merchant-level-panel strong {
    display: block;
    color: #fff;
    font-size: 2rem;
}

.merchant-level-panel > div:first-child i {
    color: #facc15;
    font-size: 2.35rem;
}

.merchant-progress .progress,
.merchant-target-progress {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
}

.merchant-progress .progress-bar,
.merchant-target-progress .progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, #facc15, #22c55e);
}

.merchant-level-perk {
    display: flex;
    gap: .65rem;
    align-items: center;
    padding: .8rem;
    border-radius: 8px;
    background: rgba(15, 23, 42, .28);
}

.merchant-level-perk i {
    color: #facc15;
}

.merchant-target-card {
    overflow: hidden;
}

.merchant-target-card .card-body {
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.merchant-target-card i {
    color: #0f766e;
    font-size: 2rem;
}

.merchant-target-card .progress {
    background: #e2e8f0;
}

.merchant-target-note {
    margin-top: .75rem;
    padding: .75rem;
    border-radius: 8px;
    background: #ecfdf5;
    color: #047857;
    font-weight: 800;
}

.merchant-rule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.merchant-rule-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .6rem;
}

.merchant-rule-card {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.merchant-rule-card i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.2rem;
}

.merchant-rule-card span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.merchant-rule-card strong {
    color: #172033;
    font-size: 1.65rem;
    line-height: 1;
}

.merchant-rule-card small {
    color: #64748b;
    line-height: 1.45;
}

.merchant-rule-grid.compact .merchant-rule-card {
    padding: .75rem;
}

.merchant-rule-grid.compact .merchant-rule-card i {
    width: 32px;
    height: 32px;
    font-size: 1rem;
}

.merchant-rule-grid.compact .merchant-rule-card strong {
    font-size: 1.05rem;
}

.merchant-bonus-card {
    overflow: hidden;
}

.merchant-bonus-card .card-body {
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, .14), transparent 34%),
        #fff;
}

.merchant-bonus-card .card-body > .d-flex i {
    color: #f59e0b;
    font-size: 2rem;
}

.merchant-bonus-checklist {
    display: grid;
    gap: .75rem;
}

.merchant-bonus-checklist > div {
    display: grid;
    gap: .45rem;
    padding: .8rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.merchant-bonus-checklist > div.complete {
    border-color: rgba(15, 118, 110, .2);
    background: #ecfdf5;
}

.merchant-bonus-checklist span {
    display: flex;
    gap: .5rem;
    color: #334155;
    font-weight: 800;
    line-height: 1.35;
}

.merchant-bonus-checklist i {
    color: #0f766e;
}

.merchant-bonus-checklist strong {
    color: #64748b;
    font-size: .82rem;
}

.merchant-bonus-checklist .progress {
    height: 7px;
    background: #e2e8f0;
}

.merchant-bonus-checklist .progress-bar {
    background: linear-gradient(90deg, #0f766e, #f59e0b);
}

.merchant-kyc-card {
    overflow: hidden;
}

.merchant-kyc-card .card-body {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, .1), transparent 30%),
        linear-gradient(180deg, #fff, #f8fafc);
}

.merchant-kyc-verified {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid rgba(15, 118, 110, .2);
    border-radius: 8px;
    background: #ecfdf5;
    color: #134e4a;
}

.merchant-kyc-verified i {
    color: #0f766e;
    font-size: 2rem;
}

.merchant-kyc-verified strong,
.merchant-kyc-verified span {
    display: block;
}

.merchant-kyc-verified span {
    color: #0f766e;
}

.merchant-incentive-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    height: 100%;
}

.merchant-incentive-card {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

.merchant-incentive-card i {
    color: #f59e0b;
    font-size: 1.45rem;
}

.merchant-incentive-card strong {
    color: #172033;
}

.merchant-incentive-card span {
    color: #64748b;
    line-height: 1.45;
}

.merchant-incentive-card em {
    width: max-content;
    max-width: 100%;
    padding: .3rem .55rem;
    border-radius: 999px;
    background: #fffbeb;
    color: #92400e;
    font-size: .78rem;
    font-style: normal;
    font-weight: 900;
}

.merchant-dashboard-levels {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
}

.merchant-dashboard-levels div {
    position: relative;
    overflow: hidden;
    padding: .9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.merchant-dashboard-levels div::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: #0f766e;
}

.merchant-dashboard-levels .starter {
    border-color: rgba(37, 99, 235, .22);
    background: #eff6ff;
}

.merchant-dashboard-levels .starter::before {
    background: #2563eb;
}

.merchant-dashboard-levels .builder {
    border-color: rgba(15, 118, 110, .24);
    background: #ecfdf5;
}

.merchant-dashboard-levels .builder::before {
    background: #0f766e;
}

.merchant-dashboard-levels .growth {
    border-color: rgba(245, 158, 11, .28);
    background: #fffbeb;
}

.merchant-dashboard-levels .growth::before {
    background: #f59e0b;
}

.merchant-dashboard-levels .leader {
    border-color: rgba(124, 58, 237, .24);
    background: #f5f3ff;
}

.merchant-dashboard-levels .leader::before {
    background: #7c3aed;
}

.merchant-dashboard-levels .elite {
    border-color: rgba(220, 38, 38, .22);
    background: #fff1f2;
}

.merchant-dashboard-levels .elite::before {
    background: #dc2626;
}

.merchant-dashboard-levels div.active {
    box-shadow: 0 18px 36px rgba(15, 23, 42, .12);
    transform: translateY(-2px);
}

.merchant-dashboard-levels span,
.merchant-dashboard-levels strong,
.merchant-dashboard-levels small {
    display: block;
}

.merchant-dashboard-levels span {
    color: #0f766e;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.merchant-dashboard-levels strong {
    margin: .2rem 0;
    color: #172033;
}

.merchant-dashboard-levels small {
    color: #64748b;
}

.merchant-identity-strip .card-body {
    background:
        radial-gradient(circle at right, rgba(15, 118, 110, .08), transparent 34%),
        #fff;
}

.merchant-identity-note {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    max-width: 360px;
    padding: .75rem .9rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e40af;
    font-weight: 800;
    line-height: 1.35;
}

.merchant-identity-note i {
    color: #0f766e;
}

.merchant-command-center {
    overflow: hidden;
}

.merchant-command-center .card-body {
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, .1), transparent 30%),
        linear-gradient(180deg, #fff, #f8fafc);
}

.merchant-portal-tabs,
.super-company-tabs {
    gap: .55rem;
    padding: .55rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.merchant-portal-tabs .nav-link,
.super-company-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    border-radius: 8px;
    color: #475569;
    font-weight: 850;
}

.merchant-portal-tabs .nav-link span,
.super-company-tabs .nav-link span {
    display: inline-grid;
    min-width: 24px;
    min-height: 24px;
    place-items: center;
    padding: 0 .4rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: .76rem;
}

.merchant-portal-tabs .nav-link.active,
.super-company-tabs .nav-link.active {
    background: #0f766e;
    color: #fff;
    box-shadow: 0 12px 26px rgba(15, 118, 110, .2);
}

.merchant-portal-tabs .nav-link.active span,
.super-company-tabs .nav-link.active span {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.merchant-verification-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, .1), transparent 30%),
        #f8fafc;
}

.merchant-verification-summary-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.35rem;
}

.merchant-verification-summary span,
.merchant-verification-summary strong,
.merchant-verification-summary small {
    display: block;
}

.merchant-verification-summary span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.merchant-verification-summary strong {
    color: #172033;
    font-size: 1.35rem;
}

.merchant-verification-summary small {
    max-width: 720px;
    color: #64748b;
    line-height: 1.5;
}

.merchant-verification-summary-actions {
    display: flex;
    justify-content: flex-end;
}

.merchant-command-card,
.merchant-command-metric,
.super-report-card,
.super-assignment-stat,
.super-detail-tile,
.super-company-mini-stat {
    display: grid;
    gap: .45rem;
    height: 100%;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.merchant-command-card i,
.merchant-command-metric i,
.super-report-card i,
.super-assignment-stat i,
.super-company-mini-stat i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
}

.merchant-command-card span,
.merchant-command-metric span,
.super-report-card span,
.super-assignment-stat span,
.super-detail-tile span,
.super-company-mini-stat span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.merchant-command-card strong,
.merchant-command-metric strong,
.super-report-card strong,
.super-assignment-stat strong,
.super-detail-tile strong,
.super-company-mini-stat strong {
    color: #172033;
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}

.merchant-command-card strong {
    font-size: .95rem;
}

.merchant-mini-table {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.merchant-mini-table table {
    min-width: 520px;
}

.merchant-mini-table th {
    color: #64748b;
    font-size: .78rem;
    text-transform: uppercase;
}

.merchant-product-chip {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    padding: .85rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.merchant-product-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 118, 110, .28);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .08);
}

.merchant-product-chip > span {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
}

.merchant-product-chip strong,
.merchant-product-chip small {
    display: block;
}

.merchant-product-chip small {
    color: #64748b;
}

.merchant-command-metric strong,
.super-report-card strong,
.super-assignment-stat strong,
.super-company-mini-stat strong {
    font-size: 1.65rem;
    line-height: 1;
}

.merchant-next-steps {
    display: grid;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.merchant-next-steps div {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #334155;
    font-weight: 800;
}

.merchant-next-steps i {
    color: #0f766e;
}

.super-company-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    min-height: 112px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

.super-company-count.active {
    border-color: #0f766e;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #fff;
}

.super-company-count small,
.super-company-count strong {
    display: block;
}

.super-company-count small {
    color: inherit;
    opacity: .78;
    font-weight: 850;
}

.super-company-count strong {
    margin-top: .25rem;
    font-size: 2rem;
    line-height: 1;
}

.super-company-count i {
    color: #0f766e;
    font-size: 2rem;
}

.super-company-count.active i {
    color: #fff;
}

.super-company-workspace {
    overflow: hidden;
}

.super-company-filter {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.super-company-table .dropdown-menu form {
    margin: 0;
}

.super-group-card {
    display: grid;
    gap: .8rem;
    height: 100%;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #172033;
}

.super-group-card:hover,
.super-report-link:hover,
.super-merchant-group-row:hover {
    border-color: rgba(15, 118, 110, .35);
    background: #f0fdfa;
}

.super-group-card span small,
.super-group-card span strong {
    display: block;
}

.super-group-card span small,
.super-merchant-group-row small {
    color: #64748b;
}

.super-group-card span strong {
    font-size: 1.25rem;
}

.super-group-card div {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.super-group-card em,
.super-merchant-group-row em {
    width: max-content;
    max-width: 100%;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: .78rem;
    font-style: normal;
    font-weight: 900;
}

.super-merchant-group-list {
    display: grid;
    gap: .75rem;
}

.super-merchant-group-row,
.super-report-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    text-decoration: none;
}

.super-report-link {
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
}

.super-report-link i {
    width: 42px;
    height: 42px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    background: #eef2ff;
    color: #2563eb;
}

.super-report-link strong,
.super-report-link small,
.super-merchant-group-row strong,
.super-merchant-group-row small {
    display: block;
}

.super-report-link small {
    color: #64748b;
    line-height: 1.45;
}

.super-company-profile {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    border-radius: 8px;
    background: linear-gradient(135deg, #0f172a, #0f766e);
    color: #fff;
}

.super-company-profile h2 {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    font-weight: 900;
}

.super-company-profile p {
    margin: .45rem 0 0;
    color: rgba(255, 255, 255, .8);
}

.super-detail-tile a {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.tenant-public {
    background: var(--tenant-page-bg, #f4f8fb);
}

.tenant-theme-community .tenant-hero-shade {
    background:
        linear-gradient(90deg, rgba(7, 24, 20, .95) 0%, rgba(7, 24, 20, .82) 32%, rgba(7, 24, 20, .42) 66%, rgba(7, 24, 20, .12) 100%),
        linear-gradient(0deg, rgba(7, 24, 20, .34), rgba(7, 24, 20, .08));
}

.tenant-theme-community .tenant-hero-pill {
    background: var(--tenant-accent, #0ea5e9);
    color: #07111f;
}

.tenant-theme-clean .tenant-public-nav {
    background: rgba(255, 255, 255, .98);
}

.tenant-theme-clean .tenant-hero-shade {
    background:
        linear-gradient(90deg, rgba(15, 23, 42, .94) 0%, rgba(15, 23, 42, .78) 38%, rgba(15, 23, 42, .34) 72%, rgba(15, 23, 42, .1) 100%),
        linear-gradient(0deg, rgba(15, 23, 42, .35), rgba(15, 23, 42, .08));
}

.tenant-theme-premium .tenant-public-panel,
.tenant-theme-premium .tenant-public-card,
.tenant-theme-premium .tenant-page-card,
.tenant-theme-premium .tenant-feature-card {
    border-color: color-mix(in srgb, var(--tenant-primary, #155e75) 26%, #dbe5f0);
    box-shadow: 0 24px 54px rgba(15, 23, 42, .12);
}

.tenant-theme-editorial .tenant-public-nav {
    background: rgba(255, 255, 255, .96);
    border-bottom: 3px solid var(--tenant-accent, #eab308);
}

.tenant-theme-editorial .tenant-hero-shade {
    background:
        linear-gradient(90deg, rgba(5, 11, 22, .98) 0%, rgba(5, 11, 22, .9) 36%, rgba(5, 11, 22, .52) 68%, rgba(5, 11, 22, .18) 100%),
        linear-gradient(0deg, rgba(5, 11, 22, .46), rgba(5, 11, 22, .06));
}

.tenant-theme-editorial .tenant-hero-pill,
.tenant-theme-editorial .tenant-public-menu a.active {
    background: var(--tenant-accent, #eab308);
    color: #07111f;
}

.tenant-theme-editorial .tenant-hero-motion span {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .32);
    text-shadow: none;
}

.tenant-theme-editorial .tenant-hero-motion-bottom span {
    background: var(--tenant-accent, #eab308);
    border-color: var(--tenant-accent, #eab308);
    color: #07111f;
    font-weight: 900;
}

.tenant-theme-editorial .tenant-section-kicker,
.tenant-theme-editorial .tenant-section-heading span {
    color: var(--tenant-primary, #155e75);
}

.tenant-theme-editorial .tenant-service-card,
.tenant-theme-editorial .tenant-product-card,
.tenant-theme-editorial .tenant-feature-card,
.tenant-theme-editorial .tenant-public-card {
    border-top: 4px solid var(--tenant-accent, #eab308);
}

.tenant-site-modern.tenant-theme-community {
    background: #f7f3ea;
}

.tenant-theme-community .tenant-site-hero {
    border-bottom: 8px solid var(--tenant-accent, #f59e0b);
}

.tenant-theme-community .tenant-hero-content {
    max-width: 900px;
}

.tenant-theme-community .tenant-hero-content h1 {
    max-width: 980px;
}

.tenant-theme-community .tenant-service-card,
.tenant-theme-community .tenant-about-list div,
.tenant-theme-community .tenant-product {
    border-left: 5px solid var(--tenant-accent, #f59e0b);
}

.tenant-theme-community .tenant-journey-shell {
    grid-template-columns: 1fr;
    background:
        linear-gradient(135deg, rgba(255, 251, 235, .95), rgba(236, 253, 245, .94)),
        #fff;
}

.tenant-theme-community .tenant-journey-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tenant-theme-community .tenant-journey-tab {
    min-height: 92px;
}

.tenant-site-modern.tenant-theme-clean {
    background: #f8fafc;
}

.tenant-theme-clean .tenant-hero-carousel,
.tenant-theme-clean .tenant-hero-slide {
    min-height: clamp(560px, calc(100vh - 160px), 680px);
}

.tenant-theme-clean .tenant-hero-motion,
.tenant-theme-clean .tenant-hero-motion-bottom {
    display: none;
}

.tenant-theme-clean .tenant-hero-content {
    max-width: 700px;
    padding-bottom: clamp(3rem, 7vw, 5rem);
}

.tenant-theme-clean .tenant-hero-content h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1;
}

.tenant-theme-clean .tenant-public-panel,
.tenant-theme-clean .tenant-public-card,
.tenant-theme-clean .tenant-stat,
.tenant-theme-clean .tenant-product,
.tenant-theme-clean .tenant-service-card,
.tenant-theme-clean .tenant-product-table,
.tenant-theme-clean .tenant-journey-shell {
    box-shadow: none;
}

.tenant-theme-clean .tenant-section {
    padding-top: clamp(2.5rem, 6vw, 4rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.tenant-site-modern.tenant-theme-premium {
    background:
        radial-gradient(circle at 15% 5%, rgba(124, 58, 237, .12), transparent 34%),
        radial-gradient(circle at 85% 18%, rgba(6, 182, 212, .12), transparent 30%),
        #f5f3ff;
}

.tenant-theme-premium .tenant-hero-shade {
    background:
        linear-gradient(270deg, rgba(18, 8, 38, .96) 0%, rgba(18, 8, 38, .84) 38%, rgba(18, 8, 38, .4) 72%, rgba(18, 8, 38, .14) 100%),
        linear-gradient(0deg, rgba(18, 8, 38, .42), rgba(18, 8, 38, .08));
}

.tenant-theme-premium .tenant-hero-content {
    margin-left: auto;
    max-width: 720px;
}

.tenant-theme-premium .tenant-hero-content h1 {
    font-size: clamp(3rem, 7vw, 6.4rem);
}

.tenant-theme-premium .tenant-section-heading {
    align-items: center;
    border-left: 6px solid var(--tenant-primary, #6d28d9);
    padding-left: 1rem;
}

.tenant-theme-premium .tenant-service-card,
.tenant-theme-premium .tenant-product,
.tenant-theme-premium .tenant-testimonial,
.tenant-theme-premium .tenant-journey-panel {
    background: linear-gradient(180deg, #fff, #faf5ff);
}

.tenant-theme-premium .tenant-journey-shell {
    border-color: rgba(124, 58, 237, .22);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(245, 243, 255, .95)),
        #fff;
}

.tenant-theme-editorial.tenant-site-modern {
    background: #fffaf0;
}

.tenant-theme-editorial .tenant-hero-content h1 {
    color: var(--tenant-accent, #eab308);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.6rem, 9vw, 8.4rem);
    line-height: .9;
}

.tenant-theme-editorial .tenant-hero-content p {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.1rem, 2.3vw, 1.55rem);
}

.tenant-theme-editorial .tenant-hero-chips a {
    border-color: rgba(250, 204, 21, .7);
}

.tenant-theme-editorial .tenant-section-heading {
    align-items: start;
    border-bottom: 3px solid var(--tenant-accent, #eab308);
    padding-bottom: 1rem;
}

.tenant-theme-editorial .tenant-journey-shell {
    grid-template-columns: minmax(0, 1fr);
    background: #111827;
    color: #fff;
}

.tenant-theme-editorial .tenant-journey-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tenant-theme-editorial .tenant-journey-panel {
    background: #fffaf0;
}

@media (max-width: 767.98px) {
    .tenant-theme-community .tenant-journey-tabs,
    .tenant-theme-editorial .tenant-journey-tabs {
        grid-template-columns: 1fr;
    }

    .tenant-theme-premium .tenant-hero-content {
        margin-left: 0;
    }
}

.tenant-public a {
    color: inherit;
    text-decoration: none;
}

.tenant-public .btn-primary,
.tenant-public .btn-success {
    background: var(--tenant-primary);
    border-color: var(--tenant-primary);
}

.tenant-public .btn-outline-primary {
    color: var(--tenant-primary);
    border-color: var(--tenant-primary);
}

.tenant-public .btn-outline-primary:hover {
    background: var(--tenant-primary);
    color: #fff;
}

.tenant-public-nav {
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    backdrop-filter: blur(14px);
    z-index: 1040;
}

.tenant-public-nav-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tenant-public-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: #172033;
    text-decoration: none;
    flex: 0 0 auto;
}

.tenant-public-brand img,
.tenant-public-brand span {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--tenant-primary);
    color: #fff;
    font-weight: 800;
    object-fit: cover;
}

.tenant-public-brand strong {
    display: block;
    font-size: 1.05rem;
    line-height: 1.05;
    max-width: 220px;
}

.tenant-public-brand-copy small {
    color: #64748b;
    display: block;
    font-size: .78rem;
    line-height: 1.2;
    margin-top: .2rem;
}

.tenant-public-hero {
    background: var(--tenant-primary);
    color: #fff;
    padding: clamp(3rem, 7vw, 6rem) 0;
}

.tenant-public-hero-full {
    position: relative;
    min-height: 680px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.tenant-hero-image,
.tenant-hero-overlay {
    position: absolute;
    inset: 0;
}

.tenant-hero-image {
    background-image: url("https://images.unsplash.com/photo-1678693362448-27bc143e74d9?auto=format&fit=crop&fm=jpg&q=80&w=1800");
    background-size: cover;
    background-position: center;
}

.tenant-hero-overlay {
    background:
        linear-gradient(90deg, rgba(15, 23, 42, .9), rgba(15, 23, 42, .72) 46%, rgba(15, 23, 42, .35)),
        linear-gradient(0deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .08));
}

.tenant-public-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.tenant-public-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: 1;
    max-width: 760px;
}

.tenant-public-hero p {
    font-size: 1.15rem;
    max-width: 660px;
    color: rgba(255, 255, 255, .86);
}

.tenant-eyebrow {
    display: inline-block;
    margin-bottom: .8rem;
    color: rgba(255, 255, 255, .72);
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
}

.tenant-public-panel,
.tenant-public-card,
.tenant-stat,
.tenant-product {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .09);
}

.tenant-public-panel {
    color: #172033;
    padding: 1.25rem;
}

.tenant-service-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 0;
    border-top: 1px solid rgba(15, 23, 42, .08);
    font-weight: 600;
}

.tenant-service-row i {
    color: var(--tenant-primary);
    font-size: 1.25rem;
}

.tenant-stat,
.tenant-product {
    padding: 1.25rem;
    height: 100%;
}

.tenant-stat span {
    display: block;
    color: #64748b;
    font-size: .9rem;
}

.tenant-stat strong {
    display: block;
    margin-top: .25rem;
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    color: #172033;
    overflow-wrap: anywhere;
}

.tenant-product p {
    color: #64748b;
    min-height: 3rem;
}

.tenant-wide-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 22px 54px rgba(15, 23, 42, .16);
}

.tenant-about-list {
    display: grid;
    gap: .8rem;
    margin-top: 1.25rem;
}

.tenant-about-list div,
.tenant-contact-card a,
.tenant-contact-card div {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.tenant-about-list div {
    padding: 1rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
}

.tenant-about-list i,
.tenant-service-card i {
    color: var(--tenant-primary);
    font-size: 1.35rem;
}

.tenant-public-soft {
    background: #eaf1f5;
}

.tenant-service-card {
    height: 100%;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
}

.tenant-service-card h3 {
    margin-top: .85rem;
    font-size: 1.12rem;
}

.tenant-service-card p {
    color: #64748b;
    margin-bottom: 0;
}

.tenant-journey-shell {
    display: grid;
    grid-template-columns: minmax(220px, 310px) minmax(0, 1fr);
    gap: 1rem;
    padding: clamp(1rem, 2.6vw, 1.5rem);
    border: 1px solid #dbe5ee;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(239, 246, 255, .86)),
        #fff;
    box-shadow: 0 22px 54px rgba(15, 23, 42, .09);
}

.tenant-journey-tabs {
    display: grid;
    gap: .75rem;
    align-content: start;
}

.tenant-journey-tab {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    width: 100%;
    padding: .85rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    text-align: left;
    font-weight: 900;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.tenant-journey-tab i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ecfeff;
    color: var(--tenant-primary);
    font-size: 1.2rem;
}

.tenant-journey-tab:hover,
.tenant-journey-tab.active {
    transform: translateX(4px);
    border-color: rgba(15, 118, 110, .25);
    background: var(--tenant-primary);
    color: #fff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .12);
}

.tenant-journey-tab.active i {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.tenant-journey-content {
    min-width: 0;
}

.tenant-journey-panel {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    min-height: 430px;
    padding: clamp(1rem, 3vw, 2rem);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.tenant-journey-panel h3 {
    margin: .35rem 0 .8rem;
    color: #172033;
    font-size: clamp(1.65rem, 4vw, 3.2rem);
    font-weight: 900;
    line-height: 1.05;
}

.tenant-journey-panel p {
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.75;
}

.tenant-journey-panel img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 22px 52px rgba(15, 23, 42, .14);
    transition: transform .45s ease;
}

.tab-pane.active .tenant-journey-panel img {
    animation: tenantImageReveal .55s ease both;
}

.tenant-journey-panel:hover img,
.tenant-wide-image:hover {
    transform: scale(1.03);
}

.tenant-public-contact {
    background: #172033;
    color: #fff;
}

.tenant-public-contact p {
    color: rgba(255, 255, 255, .78);
}

.tenant-contact-card {
    display: grid;
    gap: .75rem;
    padding: clamp(1.2rem, 3vw, 1.6rem);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
}

.tenant-contact-card a,
.tenant-contact-card div {
    padding: .9rem 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
}

.tenant-contact-card i {
    color: #67e8f9;
}

.tenant-public-footer {
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.tenant-whatsapp-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 80;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #25d366;
    color: #fff !important;
    font-size: 1.7rem;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .22);
}

.tenant-form-shell {
    display: grid;
    grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.tenant-form-shell h1 {
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.tenant-form-shell p {
    color: #64748b;
    font-size: 1.05rem;
}

.tenant-public-card {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.tenant-login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.tenant-login-shell .tenant-public-card {
    width: min(100%, 460px);
}

.tenant-login-shell .tenant-public-brand {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.tenant-login-shell .tenant-public-brand img,
.tenant-login-shell .tenant-public-brand span {
    width: 64px;
    height: 64px;
}

.tenant-login-shell .tenant-public-brand strong {
    font-size: 1.12rem;
    line-height: 1.15;
    max-width: 100%;
}

.tenant-site-modern {
    background: #f6f8fb;
    color: #172033;
}

.tenant-public-nav-collapse {
    margin-left: auto;
}

.tenant-public-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
}

.tenant-public-menu a {
    position: relative;
    color: #334155;
    font-size: .88rem;
    font-weight: 800;
    border-radius: 8px;
    padding: .75rem 1rem;
    transition: color .18s ease;
}

.tenant-public-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.45rem;
    height: 2px;
    background: var(--tenant-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .22s ease;
}

.tenant-public-menu a:hover {
    color: var(--tenant-primary);
}

.tenant-public-menu a.active {
    background: var(--tenant-primary);
    color: #fff;
}

.tenant-public-menu a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.tenant-public-menu a.active::after {
    display: none;
}

.tenant-public-actions {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    margin-left: 1.1rem;
}

.tenant-public-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-left: auto;
    padding: .6rem .8rem;
    border: 1px solid #dbe5ee;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    font-weight: 800;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
}

.tenant-site-hero {
    position: relative;
    overflow: hidden;
    background: #0f172a;
}

.tenant-hero-carousel,
.tenant-hero-slide {
    min-height: clamp(680px, calc(100vh - 88px), 860px);
}

.tenant-hero-slide {
    position: relative;
    display: flex;
    align-items: center;
    background-position: center;
    background-size: cover;
}

.tenant-hero-slide.active {
    animation: tenantHeroDrift 6.5s ease-out both;
}

.tenant-hero-shade {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(10, 18, 32, .96) 0%, rgba(10, 18, 32, .86) 28%, rgba(10, 18, 32, .52) 58%, rgba(10, 18, 32, .18) 100%),
        linear-gradient(0deg, rgba(10, 18, 32, .42), rgba(10, 18, 32, .08));
}

.tenant-hero-motion {
    inset-inline: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: clamp(1rem, 4vw, 2.5rem);
    z-index: 1;
}

.tenant-hero-motion-track {
    align-items: center;
    animation: tenantHeroWordRail 42s linear infinite;
    display: flex;
    gap: clamp(2rem, 5vw, 5rem);
    width: max-content;
    will-change: transform;
}

.tenant-hero-motion span {
    color: rgba(255, 255, 255, .16);
    font-size: clamp(3.4rem, 11vw, 9.2rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: .82;
    text-shadow: 0 22px 60px rgba(0, 0, 0, .35);
    white-space: nowrap;
}

.tenant-hero-motion-bottom {
    bottom: clamp(1.8rem, 4vw, 3.25rem);
    top: auto;
    z-index: 3;
}

.tenant-hero-motion-bottom .tenant-hero-motion-track {
    animation-direction: reverse;
    animation-duration: 32s;
    gap: .75rem;
}

.tenant-hero-motion-bottom span {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(.9rem, 2vw, 1.05rem);
    line-height: 1;
    padding: .72rem .95rem;
    text-shadow: none;
}

.tenant-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(6.5rem, 10vw, 8.5rem);
    color: #fff;
}

.tenant-hero-content h1,
.tenant-page-hero h1,
.tenant-site-cta h2 {
    font-weight: 900;
    letter-spacing: 0;
}

.tenant-hero-content h1 {
    color: #fff;
    font-size: clamp(3.25rem, 8vw, 7.2rem);
    line-height: .9;
    max-width: 850px;
}

.tenant-hero-content p {
    max-width: 760px;
    margin: 1.35rem 0 1.65rem;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1.05rem, 2.1vw, 1.45rem);
    line-height: 1.65;
}

.tenant-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.tenant-hero-buttons .btn {
    border-radius: 8px;
    font-weight: 900;
    padding: .9rem 1.35rem;
}

.tenant-hero-pill {
    background: var(--tenant-primary);
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-weight: 900;
    margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
    padding: .6rem 1rem;
}

.tenant-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: clamp(1.7rem, 3.5vw, 2.5rem);
}

.tenant-hero-chips a {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-weight: 900;
    gap: .45rem;
    padding: .65rem .9rem;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.tenant-hero-chips a:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .52);
    color: #fff;
    transform: translateY(-2px);
}

.tenant-glow-btn {
    border: 0 !important;
    background:
        linear-gradient(135deg, var(--tenant-primary, #0f766e), var(--tenant-accent, #0ea5e9)) !important;
    color: #fff !important;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(15, 23, 42, .45);
    box-shadow:
        0 0 0 4px rgba(20, 184, 166, .2),
        0 0 34px rgba(34, 211, 238, .72),
        0 18px 36px rgba(15, 23, 42, .28);
    animation: tenantCtaPulse 1.5s ease-in-out infinite;
}

.tenant-glow-btn:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow:
        0 0 0 5px rgba(20, 184, 166, .26),
        0 0 48px rgba(34, 211, 238, .9),
        0 22px 44px rgba(15, 23, 42, .32);
}

.tenant-hero-carousel .carousel-control-prev,
.tenant-hero-carousel .carousel-control-next {
    display: none;
}

.tenant-hero-carousel .carousel-indicators {
    bottom: clamp(1.2rem, 4vw, 2.4rem);
    justify-content: flex-start;
    left: max(1.5rem, calc((100vw - 1320px) / 2 + .75rem));
    margin: 0;
    right: auto;
    width: auto;
}

.tenant-hero-carousel .carousel-indicators [data-bs-target] {
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 999px;
    height: 14px;
    opacity: 1;
    width: 14px;
}

.tenant-hero-carousel .carousel-indicators .active {
    background: var(--tenant-primary);
    border-color: var(--tenant-primary);
    width: 46px;
}

@keyframes tenantCtaPulse {
    0%, 100% {
        box-shadow:
            0 0 0 4px rgba(20, 184, 166, .2),
            0 0 30px rgba(34, 211, 238, .62),
            0 18px 36px rgba(15, 23, 42, .28);
    }
    50% {
        box-shadow:
            0 0 0 8px rgba(20, 184, 166, .28),
            0 0 54px rgba(34, 211, 238, .96),
            0 20px 42px rgba(15, 23, 42, .32);
    }
}

@keyframes tenantHeroDrift {
    from {
        background-position: center center;
    }
    to {
        background-position: center 44%;
    }
}

@keyframes tenantHeroWordRail {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes tenantImageReveal {
    from {
        opacity: .8;
        transform: scale(1.04);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (min-width: 992px) {
    .tenant-public-nav-collapse {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
    }
}

.tenant-floating-stats {
    position: relative;
    z-index: 2;
    margin-top: -58px;
}

.tenant-section {
    padding-top: clamp(3.25rem, 8vw, 5.5rem);
    padding-bottom: clamp(3.25rem, 8vw, 5.5rem);
}

.tenant-section h2 {
    color: #172033;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.08;
}

.tenant-section-kicker,
.tenant-section-heading span {
    display: inline-flex;
    color: var(--tenant-primary);
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tenant-lead {
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.75;
}

.tenant-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tenant-section-heading h2 {
    margin: .25rem 0 0;
}

.tenant-product {
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.tenant-product:hover,
.tenant-service-card:hover,
.tenant-stat:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 118, 110, .25);
    box-shadow: 0 22px 50px rgba(15, 23, 42, .13);
}

.tenant-product h3 {
    margin-top: .6rem;
    font-size: 1.08rem;
    font-weight: 900;
}

.tenant-product small {
    color: #64748b;
    font-weight: 700;
}

.tenant-product-tag {
    display: inline-flex;
    padding: .28rem .55rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tenant-product-tag.loan {
    background: #eff6ff;
    color: #1d4ed8;
}

.tenant-product-tag.investment {
    background: #fef3c7;
    color: #92400e;
}

.tenant-product-table {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
}

.tenant-product-table thead th {
    background: #f8fafc;
    color: #64748b;
    font-size: .78rem;
    text-transform: uppercase;
}

.tenant-product-table a {
    color: var(--tenant-primary);
    font-weight: 900;
}

.tenant-testimonial-carousel {
    padding-bottom: 2.4rem;
}

.tenant-testimonial-carousel .carousel-inner {
    overflow: hidden;
}

.tenant-testimonial-row {
    display: grid;
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    gap: 1rem;
}

.tenant-testimonial {
    min-height: 250px;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
    transform: translateY(0);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.tenant-testimonial:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 118, 110, .2);
    box-shadow: 0 24px 52px rgba(15, 23, 42, .12);
}

.tenant-testimonial p {
    color: #475569;
    min-height: 92px;
}

.tenant-testimonial strong,
.tenant-testimonial small {
    display: block;
}

.tenant-testimonial small {
    color: #64748b;
}

.tenant-testimonial-dots {
    position: static;
    margin: 1.1rem 0 0;
}

.tenant-testimonial-dots [data-bs-target] {
    width: 34px;
    height: 5px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 118, 110, .25);
    opacity: 1;
}

.tenant-testimonial-dots .active {
    background: var(--tenant-primary);
}

.tenant-site-cta,
.tenant-page-hero {
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, .28), transparent 34%),
        linear-gradient(135deg, #0f172a, var(--tenant-primary));
    color: #fff;
}

.tenant-site-cta .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: clamp(3rem, 7vw, 5rem);
    padding-bottom: clamp(3rem, 7vw, 5rem);
}

.tenant-site-cta p,
.tenant-page-hero p {
    max-width: 760px;
    color: rgba(255, 255, 255, .82);
}

.tenant-page-hero {
    padding: clamp(4.5rem, 10vw, 7rem) 0;
}

.tenant-page-hero h1 {
    max-width: 940px;
    font-size: clamp(2.3rem, 6vw, 4.7rem);
    line-height: 1;
}

.tenant-contact-card-light {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
}

.tenant-contact-card-light a,
.tenant-contact-card-light div {
    background: #f8fafc;
    color: #172033;
}

.tenant-contact-form {
    height: 100%;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
}

.tenant-page-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tenant-page-card,
.tenant-page-step,
.tenant-channel-card {
    background: #fff;
    border: 1px solid #dbe5ee;
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
    padding: clamp(1.1rem, 2.5vw, 1.5rem);
}

.tenant-page-card i,
.tenant-page-step i,
.tenant-channel-card i {
    align-items: center;
    background: #ecfdf5;
    border-radius: 8px;
    color: var(--tenant-primary);
    display: inline-flex;
    font-size: 1.35rem;
    height: 48px;
    justify-content: center;
    margin-bottom: .85rem;
    width: 48px;
}

.tenant-page-card h3,
.tenant-page-step h3,
.tenant-channel-card h3 {
    color: #172033;
    font-size: 1.08rem;
    font-weight: 900;
    margin-bottom: .5rem;
}

.tenant-page-card p,
.tenant-page-step p,
.tenant-channel-card p {
    color: #64748b;
    margin-bottom: 0;
}

.tenant-page-split {
    background: #fff;
    border: 1px solid #dbe5ee;
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
    overflow: hidden;
}

.tenant-page-split > .row {
    min-height: 460px;
}

.tenant-page-split-copy {
    padding: clamp(1.25rem, 4vw, 2.5rem);
}

.tenant-process-list {
    display: grid;
    gap: .85rem;
    counter-reset: tenant-process;
}

.tenant-process-item {
    align-items: start;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: .85rem;
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 1rem;
}

.tenant-process-item::before {
    align-items: center;
    background: var(--tenant-primary);
    border-radius: 999px;
    color: #fff;
    content: counter(tenant-process);
    counter-increment: tenant-process;
    display: inline-flex;
    font-weight: 900;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.tenant-process-item h3 {
    font-size: 1rem;
    font-weight: 900;
    margin-bottom: .2rem;
}

.tenant-process-item p {
    color: #64748b;
    margin-bottom: 0;
}

.tenant-product-tabs {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe5ee;
    border-radius: 8px;
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .5rem;
}

.tenant-product-tabs .nav-link {
    border-radius: 8px;
    color: #334155;
    font-weight: 900;
}

.tenant-product-tabs .nav-link.active {
    background: var(--tenant-primary);
    color: #fff;
}

.tenant-product-detail {
    color: #64748b;
    display: grid;
    gap: .35rem;
    margin-top: .85rem;
}

.tenant-empty-panel {
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    padding: 2rem;
    text-align: center;
}

[data-tenant-animate] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
}

[data-tenant-animate].tenant-animate-in {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-tenant-animate] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .tenant-hero-motion-track {
        animation: none;
        transform: none;
    }
}

@media (max-width: 991.98px) {
    .tenant-public-nav-inner {
        flex-wrap: wrap;
    }

    .tenant-public-nav-collapse {
        flex: 0 0 100%;
        margin-left: 0;
        padding: .75rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
    }

    .tenant-public-menu,
    .tenant-public-actions {
        display: grid;
        gap: .25rem;
        margin-left: 0;
    }

    .tenant-public-menu a {
        padding: .75rem .85rem;
        border-radius: 8px;
    }

    .tenant-public-menu a:hover {
        background: #f1f5f9;
    }

    .tenant-public-menu a::after {
        display: none;
    }

    .tenant-public-actions {
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
        margin-top: .75rem;
    }

    .tenant-hero-carousel,
    .tenant-hero-slide {
        min-height: 760px;
    }

    .tenant-hero-motion:not(.tenant-hero-motion-bottom) {
        display: none;
    }

    .tenant-hero-motion-bottom {
        bottom: 1.2rem;
        display: block;
    }

    .tenant-journey-shell,
    .tenant-journey-panel {
        grid-template-columns: 1fr;
    }

    .tenant-journey-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tenant-testimonial-row {
        grid-template-columns: 1fr;
    }

    .tenant-journey-tab:hover,
    .tenant-journey-tab.active {
        transform: translateY(-2px);
    }

    .tenant-section-heading,
    .tenant-site-cta .container {
        align-items: stretch;
        flex-direction: column;
    }

    .tenant-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 575.98px) {
    .tenant-public-brand strong {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tenant-hero-content {
        padding-top: 3.5rem;
        padding-bottom: 7.2rem;
    }

    .tenant-hero-content h1 {
        font-size: clamp(2.65rem, 14vw, 4rem);
    }

    .tenant-hero-content p {
        font-size: 1rem;
    }

    .tenant-hero-chips {
        gap: .5rem;
    }

    .tenant-hero-chips a {
        padding: .55rem .7rem;
    }

    .tenant-hero-motion-bottom span {
        font-size: .82rem;
        padding: .58rem .72rem;
    }

    .tenant-floating-stats {
        margin-top: 0;
        padding-top: 1rem;
    }

    .tenant-hero-buttons .btn {
        width: 100%;
    }

    .tenant-journey-tabs {
        grid-template-columns: 1fr;
    }

    .tenant-journey-panel {
        min-height: 0;
        padding: 1rem;
    }

    .tenant-page-grid,
    .tenant-process-item {
        grid-template-columns: 1fr;
    }

    .tenant-product-tabs {
        align-items: stretch;
        flex-direction: column;
    }

    .tenant-product-tabs .nav-link {
        width: 100%;
    }
}

.member-portal-shell {
    color: #172033;
}

.member-portal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 480px);
    gap: 1rem;
    align-items: stretch;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, .94), rgba(37, 99, 235, .86)),
        #0f766e;
    color: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
}

.member-portal-hero h2 {
    margin: .35rem 0 .65rem;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    line-height: 1;
}

.member-portal-hero p {
    max-width: 780px;
    color: rgba(255, 255, 255, .88);
}

.member-wallet-hero-card {
    display: grid;
    align-content: space-between;
    min-width: 0;
}

.member-bank-balance {
    width: min(100%, 420px);
    padding: 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    backdrop-filter: blur(10px);
}

.member-bank-balance span,
.member-bank-balance strong {
    display: block;
}

.member-bank-balance span {
    color: rgba(255, 255, 255, .78);
    font-size: .78rem;
    font-weight: 900;
}

.member-bank-balance strong {
    margin-top: .1rem;
    color: #fff;
    font-size: clamp(1.55rem, 5vw, 2.7rem);
    font-weight: 950;
    letter-spacing: 0;
}

.member-portal-identity {
    display: grid;
    align-content: center;
    padding: 1.25rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
}

.member-portal-identity span,
.member-portal-identity strong {
    display: block;
}

.member-portal-identity strong {
    margin-top: .25rem;
    font-size: clamp(1.35rem, 3vw, 2rem);
}

.member-account-stack {
    display: grid;
    gap: .6rem;
}

.member-account-row {
    display: block;
    width: 100%;
    padding: .65rem .75rem;
    border-radius: 8px;
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
}

.member-account-row.primary {
    background: rgba(255, 255, 255, .2);
}

.member-account-row:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .9);
    outline-offset: 2px;
}

.member-account-row-title {
    display: block;
}

.member-account-row span {
    max-width: 9.5rem;
    color: rgba(255, 255, 255, .78);
    font-size: .72rem;
    font-weight: 900;
    line-height: 1.35;
    text-transform: uppercase;
}

.member-account-row strong {
    margin-top: .1rem;
    color: #fff;
    font-size: clamp(1.05rem, 2.4vw, 1.8rem);
    overflow-wrap: anywhere;
}

.member-account-row small {
    display: block;
    margin-top: .1rem;
    color: rgba(255, 255, 255, .76);
}

.member-account-row-balance {
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.member-account-row-balance span {
    font-size: .66rem;
}

.member-account-row-balance strong {
    margin-top: .05rem;
    font-size: 1rem;
    line-height: 1.1;
}

.member-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
}

.member-quick-actions a {
    display: grid;
    place-items: center;
    gap: .25rem;
    min-height: 72px;
    padding: .65rem .35rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
    text-decoration: none;
}

.member-quick-actions a:hover {
    background: rgba(255, 255, 255, .24);
}

.member-quick-actions i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #fff;
    color: #0f766e;
    font-size: 1rem;
}

.member-portal-panel {
    overflow: hidden;
}

.member-portal-sections {
    background: #fff;
}

.member-dashboard-section {
    scroll-margin-top: 5.5rem;
}

.member-dashboard-section > .table-responsive {
    padding: 1rem;
}

.member-portal-tabs {
    gap: .35rem;
}

.member-portal-tabs .nav-link {
    border-radius: 8px;
    color: #475569;
    font-weight: 700;
}

.member-portal-tabs .nav-link.active {
    background: #0f766e;
    color: #fff;
}

.member-section-title {
    margin-bottom: 1rem;
}

.member-section-title h3,
.member-side-panel h3 {
    margin: 0;
    font-size: 1.05rem;
}

.member-section-title p {
    margin: .2rem 0 0;
    color: #64748b;
}

.member-side-panel {
    height: auto;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.member-side-panel h3 {
    margin-bottom: .85rem;
}

.member-dashboard-notifications {
    overflow: hidden;
    padding: .8rem;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff, #f8fafc);
}

.member-dashboard-notifications-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.member-dashboard-notifications-head span,
.member-dashboard-notifications-head h3,
.member-dashboard-notifications-head strong {
    display: block;
}

.member-dashboard-notifications-head span {
    color: #0f766e;
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-dashboard-notifications-head h3 {
    margin: .1rem 0 0;
    color: #172033;
    font-size: 1rem;
    font-weight: 950;
}

.member-dashboard-notifications-head strong {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 .55rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: .85rem;
    font-weight: 950;
}

.member-dashboard-notification-list {
    display: grid;
    gap: .5rem;
}

.member-dashboard-notification-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: .6rem;
    align-items: start;
    padding: .65rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.member-dashboard-notification-item.unread {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #f0fdf4, #fff);
}

.member-dashboard-notification-item > i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: .95rem;
}

.member-dashboard-notification-item-head {
    display: grid;
    gap: .15rem;
}

.member-dashboard-notification-item-head strong,
.member-dashboard-notification-item-head span,
.member-dashboard-notification-item p {
    display: block;
}

.member-dashboard-notification-item-head strong {
    color: #172033;
    font-size: .9rem;
    font-weight: 950;
    line-height: 1.25;
}

.member-dashboard-notification-item-head span {
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
}

.member-dashboard-notification-item p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: .25rem 0 0;
    color: #475569;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.35;
}

.member-transfer-actions {
    display: grid;
    gap: .75rem;
}

.member-transfer-choice-panel {
    display: grid;
    gap: .9rem;
}

.member-transfer-balance-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .75rem .85rem;
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 8px;
    background: #ecfdf5;
}

.member-transfer-balance-strip span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.member-transfer-balance-strip strong {
    color: #0f766e;
    font-size: 1rem;
    font-weight: 950;
    white-space: nowrap;
}

.member-transfer-group {
    padding: .8rem;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 8px;
    background: rgba(255, 255, 255, .75);
}

.member-transfer-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
    padding: .35rem;
    border: 1px solid rgba(15, 118, 110, .16);
    border-radius: 8px;
    background: #eaf5f4;
}

.member-transfer-switch-btn {
    display: grid;
    gap: .1rem;
    min-width: 0;
    padding: .65rem .75rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    text-align: left;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.member-transfer-switch-btn:hover {
    color: #0f766e;
    transform: translateY(-1px);
}

.member-transfer-switch-btn.active {
    background: #fff;
    color: #0f766e;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
}

.member-transfer-switch-btn span {
    overflow: hidden;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-transfer-switch-btn small {
    overflow: hidden;
    color: inherit;
    font-size: .74rem;
    font-weight: 800;
    opacity: .78;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-transfer-tab-content .member-transfer-group {
    margin-top: 0;
}

.member-transfer-group-head {
    margin-bottom: .7rem;
}

.member-transfer-group-head strong,
.member-transfer-group-head small {
    display: block;
}

.member-transfer-group-head strong {
    color: #172033;
    font-size: .95rem;
    font-weight: 950;
}

.member-transfer-group-head small {
    color: #64748b;
    font-weight: 700;
}

.member-transfer-action {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    width: 100%;
    min-height: 78px;
    padding: .85rem;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    text-align: left;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.member-transfer-action:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, .35);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
}

.member-transfer-action:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.member-transfer-action span {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.15rem;
}

.member-transfer-action.primary {
    border-color: rgba(15, 118, 110, .4);
    background: linear-gradient(135deg, #f0fdfa, #fff);
}

.member-transfer-action strong,
.member-transfer-action small {
    min-width: 0;
}

.member-transfer-action strong {
    font-size: .98rem;
}

.member-transfer-action small {
    color: #64748b;
}

.member-transfer-actions-compact {
    gap: .6rem;
}

.member-transfer-actions-compact .member-transfer-action {
    min-height: 70px;
    padding: .75rem;
}

.member-transfer-actions-compact .member-transfer-action strong {
    font-size: .92rem;
}

.member-transfer-actions-compact .member-transfer-action small {
    font-size: .82rem;
    line-height: 1.25;
}

.member-transfer-modal .modal-content,
.member-transfer-confirm-modal {
    border: 0;
    border-radius: 8px;
}

.member-transfer-source {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(220px, 1.2fr);
    gap: .85rem;
    align-items: center;
    padding: .9rem;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8fafc, #fff);
}

.member-transfer-source > div:first-child,
.member-transfer-source label {
    display: grid;
    gap: .25rem;
    margin: 0;
}

.member-transfer-source span,
.member-bank-card-head span,
.member-transfer-review span {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.member-transfer-source strong {
    color: #172033;
    font-size: 1.05rem;
}

.member-transfer-source-balance {
    display: grid;
    gap: .2rem;
    justify-items: end;
    text-align: right;
}

.member-transfer-source-balance small {
    color: #64748b;
}

.member-bank-card {
    position: relative;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    background: #fff;
}

.member-bank-card::after {
    content: "";
    position: absolute;
    right: -42px;
    bottom: -42px;
    width: 118px;
    height: 118px;
    border-radius: 999px;
    background: rgba(15, 118, 110, .08);
    pointer-events: none;
}

.member-bank-card-head {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.member-bank-card-head strong {
    display: block;
    color: #172033;
}

.member-bank-card-head > i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.2rem;
}

.member-account-verified {
    position: relative;
    z-index: 1;
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    margin-top: .75rem;
    padding: .4rem .6rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: .8rem;
    font-weight: 800;
}

.member-transfer-review {
    display: grid;
    gap: .65rem;
}

.member-transfer-review > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: .85rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.member-transfer-review strong {
    min-width: 0;
    max-width: 68%;
    text-align: right;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .member-transfer-source {
        grid-template-columns: 1fr;
    }

    .member-transfer-review > div {
        display: grid;
        gap: .25rem;
    }

    .member-transfer-review strong {
        max-width: 100%;
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    #memberTransferConfirmModal .modal-dialog {
        max-width: calc(100% - 1rem);
        margin: .5rem;
    }

    #memberTransferConfirmModal .modal-content {
        max-height: calc(100dvh - 1rem);
        overflow: hidden;
        border-radius: 10px;
    }

    #memberTransferConfirmModal .modal-header {
        align-items: flex-start;
        padding: .8rem .9rem .45rem;
    }

    #memberTransferConfirmModal .modal-header .small {
        font-size: .68rem;
        line-height: 1.1;
    }

    #memberTransferConfirmModal .modal-title {
        font-size: 1.05rem;
        line-height: 1.2;
    }

    #memberTransferConfirmModal .btn-close {
        width: .8rem;
        height: .8rem;
        padding: .65rem;
    }

    #memberTransferConfirmModal .modal-body {
        padding: .6rem .9rem;
        overflow-y: auto;
    }

    #memberTransferConfirmModal .modal-footer {
        display: grid;
        grid-template-columns: .8fr 1.2fr;
        gap: .5rem;
        padding: .55rem .9rem .85rem;
    }

    #memberTransferConfirmModal .modal-footer .btn {
        width: 100%;
        min-height: 40px;
        padding: .45rem .65rem;
        font-size: .88rem;
    }

    #memberTransferConfirmModal .member-transfer-review {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .45rem;
    }

    #memberTransferConfirmModal .member-transfer-review > div {
        display: grid;
        min-height: auto;
        gap: .22rem;
        align-content: center;
        padding: .55rem .6rem;
        border-radius: 9px;
    }

    #memberTransferConfirmModal .member-transfer-review > div:nth-child(-n+3) {
        min-height: 68px;
    }

    #memberTransferConfirmModal .member-transfer-review > div:nth-child(n+4) {
        grid-column: 1 / -1;
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: start;
        min-height: 54px;
    }

    #memberTransferConfirmModal .member-transfer-review span {
        font-size: .62rem;
        line-height: 1.15;
    }

    #memberTransferConfirmModal .member-transfer-review strong {
        max-width: 100%;
        color: #172033;
        font-size: .84rem;
        line-height: 1.3;
        text-align: left;
    }

    #memberTransferConfirmModal .member-transfer-review > div:nth-child(-n+3) strong {
        font-size: .9rem;
        line-height: 1.15;
    }
}

.member-profile-workspace {
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.member-profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 1rem;
    align-items: stretch;
    padding: 1rem;
    border: 1px solid #ccfbf1;
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .1), transparent 36%),
        linear-gradient(135deg, #ecfdf5, #fff);
}

.member-profile-hero-main {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: .85rem;
    align-items: center;
}

.member-profile-avatar {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 950;
    overflow: hidden;
}

.member-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-profile-hero-main span,
.member-profile-hero-main h3,
.member-profile-hero-main p,
.member-profile-status-grid span,
.member-profile-status-grid strong,
.member-profile-status-grid small,
.member-profile-kyc-panel strong,
.member-profile-kyc-panel span,
.member-profile-kyc-panel small,
.member-profile-section-head span,
.member-profile-section-head h4 {
    display: block;
}

.member-profile-hero-main span,
.member-profile-status-grid span,
.member-profile-section-head span {
    color: #0f766e;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-profile-hero-main h3 {
    margin: .12rem 0 .25rem;
    color: #172033;
    font-size: 1.25rem;
    font-weight: 950;
}

.member-profile-hero-main p {
    max-width: 680px;
    margin: 0;
    color: #475569;
    font-weight: 700;
}

.member-profile-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.member-profile-status-grid div {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: .85rem;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.member-profile-status-grid strong {
    margin-top: .15rem;
    color: #172033;
    font-size: 1rem;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.member-profile-status-grid small {
    margin-top: .2rem;
    color: #64748b;
    font-weight: 800;
    line-height: 1.3;
}

.member-profile-kyc-panel {
    display: grid;
    grid-template-columns: 46px minmax(0, .85fr) minmax(280px, 1.15fr);
    gap: .85rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: linear-gradient(135deg, #eff6ff, #fff);
}

.member-profile-kyc-panel.success,
.member-profile-kyc-panel.muted {
    grid-template-columns: 46px minmax(0, 1fr);
}

.member-profile-kyc-panel.success {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #f0fdf4, #fff);
}

.member-profile-kyc-panel.muted {
    background: #f8fafc;
}

.member-profile-kyc-panel > i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.2rem;
}

.member-profile-kyc-panel strong {
    color: #172033;
    font-weight: 950;
}

.member-profile-kyc-panel span,
.member-profile-kyc-panel small {
    color: #64748b;
    font-weight: 700;
    line-height: 1.45;
}

.member-profile-kyc-panel small {
    margin-top: .25rem;
}

.member-profile-kyc-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    align-items: end;
}

.member-profile-selfie {
    grid-column: 1 / -1;
}

.member-profile-form {
    display: grid;
    gap: 1rem;
}

.member-profile-tab-panel {
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

.member-profile-main-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .4rem;
    padding: .65rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc, #ecfeff);
}

.member-profile-main-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 42px;
    padding: .55rem .35rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: rgba(255, 255, 255, .88);
    color: #64748b;
    text-align: center;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.member-profile-main-tabs button:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, .35);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .07);
}

.member-profile-main-tabs button.active {
    border-color: transparent;
    background: linear-gradient(135deg, #0f766e, #115e59);
    color: #fff;
    box-shadow: 0 16px 30px rgba(15, 118, 110, .2);
}

.member-profile-main-tabs button > span {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: .86rem;
    font-weight: 950;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-profile-main-tabs button.active > span {
    color: #fff;
}

.member-profile-main-content {
    padding: 1rem;
}

.member-profile-main-content .member-profile-form-section {
    padding: 0;
    border: 0;
    box-shadow: none;
}

.member-profile-form-section {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.member-profile-section-head {
    margin-bottom: .85rem;
}

.member-profile-section-head h4 {
    margin: .12rem 0 0;
    color: #172033;
    font-size: 1rem;
    font-weight: 950;
}

.member-profile-form .form-label {
    margin-bottom: .3rem;
    color: #475569;
    font-size: .82rem;
    font-weight: 900;
}

.member-profile-form .form-control,
.member-profile-form .form-select {
    min-height: 40px;
}

.member-profile-help {
    padding: .65rem .75rem;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
}

.member-profile-photo-card {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: .9rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: .85rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8fafc, #fff);
}

.member-profile-photo-preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 132px;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px dashed rgba(15, 118, 110, .35);
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
}

.member-profile-photo-preview video,
.member-profile-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-profile-photo-preview [data-member-photo-placeholder] {
    display: grid;
    gap: .25rem;
    justify-items: center;
    font-weight: 950;
}

.member-profile-photo-preview [data-member-photo-placeholder] i {
    font-size: 1.7rem;
}

.member-profile-photo-copy {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.member-profile-photo-copy > span {
    color: #0f766e;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-profile-photo-copy strong {
    color: #172033;
    font-size: 1rem;
    font-weight: 950;
}

.member-profile-photo-copy p {
    margin: 0;
    color: #64748b;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.4;
}

.member-profile-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
}

.member-profile-photo-feedback {
    font-weight: 700;
}

.member-profile-actions {
    display: flex;
    justify-content: flex-end;
}

.member-profile-actions .btn {
    min-width: 160px;
}

.kyc-selfie-capture {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    padding: .75rem;
    border: 1px solid rgba(15, 118, 110, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
}

.kyc-selfie-preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 140px;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px dashed rgba(15, 118, 110, .35);
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
}

.kyc-selfie-preview video,
.kyc-selfie-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kyc-selfie-preview [data-kyc-selfie-placeholder] {
    display: grid;
    gap: .25rem;
    justify-items: center;
    font-size: .8rem;
    font-weight: 700;
}

.kyc-selfie-preview [data-kyc-selfie-placeholder] i {
    color: #0f766e;
    font-size: 1.35rem;
}

.kyc-selfie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
}

.member-savings-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: stretch;
    padding: 1rem;
    border: 1px solid #ccfbf1;
    border-radius: 8px;
    background:
        linear-gradient(135deg, #ecfdf5, #fff);
}

.member-savings-hero span,
.member-savings-hero h3,
.member-savings-hero p,
.member-savings-hero-action strong,
.member-savings-hero-action small {
    display: block;
}

.member-savings-hero span {
    color: #0f766e;
    font-size: .75rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-savings-hero h3 {
    margin: .15rem 0 .3rem;
    color: #172033;
    font-size: 1.25rem;
    font-weight: 950;
}

.member-savings-hero p {
    max-width: 760px;
    margin: 0;
    color: #475569;
    font-weight: 700;
}

.member-savings-hero-action {
    display: grid;
    align-content: center;
    min-width: 190px;
    padding: .9rem;
    border-radius: 8px;
    background: #0f766e;
    color: #fff;
}

.member-savings-hero-action strong {
    font-size: 1.25rem;
    font-weight: 950;
}

.member-savings-hero-action small {
    color: rgba(255, 255, 255, .78);
    font-weight: 800;
}

.member-savings-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
}

.member-savings-product-card {
    display: grid;
    gap: .15rem;
    min-height: 92px;
    padding: .85rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    text-align: left;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.member-savings-product-card.active,
.member-savings-product-card:hover {
    border-color: #0f766e;
    background: #f0fdfa;
}

.member-savings-product-card span,
.member-savings-product-card strong,
.member-savings-product-card small {
    display: block;
}

.member-savings-product-card span {
    color: #0f766e;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-savings-product-card strong {
    font-weight: 950;
}

.member-savings-product-card small {
    color: #64748b;
    font-weight: 800;
}

.member-savings-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .85rem;
}

.member-savings-plan-card,
.member-savings-empty {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.member-savings-plan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.member-savings-plan-head span,
.member-savings-plan-head strong,
.member-savings-plan-head small,
.member-savings-plan-balance span,
.member-savings-plan-balance strong {
    display: block;
}

.member-savings-plan-head span {
    color: #0f766e;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-savings-plan-head strong {
    color: #172033;
    font-weight: 950;
}

.member-savings-plan-head small {
    color: #64748b;
    font-weight: 800;
}

.member-savings-plan-head em {
    padding: .25rem .5rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
}

.member-savings-plan-head em.active {
    background: #dcfce7;
    color: #047857;
}

.member-savings-plan-balance {
    margin: .9rem 0;
}

.member-savings-plan-balance span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
}

.member-savings-plan-balance strong {
    color: #172033;
    font-size: 1.35rem;
    font-weight: 950;
}

.member-savings-progress {
    display: grid;
    gap: .35rem;
}

.member-savings-progress > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    color: #172033;
    font-weight: 900;
}

.member-savings-progress small {
    color: #64748b;
    font-weight: 800;
}

.member-savings-progress-bar {
    overflow: hidden;
    height: 9px;
    border-radius: 999px;
    background: #dbeafe;
}

.member-savings-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0f766e, #2563eb);
}

.member-savings-progress.neutral .member-savings-progress-bar span {
    background: linear-gradient(90deg, #64748b, #0f766e);
}

.member-savings-plan-meta {
    display: grid;
    gap: .4rem;
    margin-top: .85rem;
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
}

.member-savings-plan-meta div {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.member-savings-plan-meta i {
    color: #0f766e;
}

.member-savings-empty {
    display: grid;
    place-items: center;
    gap: .35rem;
    min-height: 220px;
    color: #64748b;
    text-align: center;
}

.member-savings-empty i {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.5rem;
}

.member-savings-empty strong {
    color: #172033;
    font-weight: 950;
}

.member-savings-product-summary {
    padding: .8rem;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: .86rem;
    font-weight: 800;
}

.member-savings-workspace {
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.member-savings-switch-panel {
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.member-savings-main-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    padding: .85rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fff, #f8fafc);
}

.member-savings-main-tabs button {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    min-height: 66px;
    padding: .75rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    text-align: center;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
}

.member-savings-main-tabs i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.1rem;
}

.member-savings-main-tabs span,
.member-savings-main-tabs strong {
    display: block;
}

.member-savings-main-tabs span {
    min-width: 0;
    overflow: hidden;
    font-size: .95rem;
    font-weight: 950;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-savings-main-tabs strong {
    padding: .25rem .55rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: .78rem;
    font-weight: 950;
}

.member-savings-main-tabs button.active {
    border-color: #0f766e;
    background: linear-gradient(135deg, #0f766e, #115e59);
    color: #fff;
}

.member-savings-main-tabs button.active i {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.member-savings-main-tabs button.active strong {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.member-savings-main-content {
    padding: 1rem;
}

.member-savings-panel,
.member-savings-action-panel {
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.member-savings-panel {
    padding: 1rem;
}

.member-savings-panel-head,
.member-savings-action-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.member-savings-panel-head span,
.member-savings-action-head span {
    display: block;
    color: #0f766e;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-savings-panel-head h3,
.member-savings-action-head h3 {
    margin: .15rem 0 .2rem;
    color: #172033;
    font-size: 1.1rem;
    font-weight: 950;
}

.member-savings-panel-head p {
    max-width: 520px;
    margin: 0;
    color: #64748b;
    font-size: .9rem;
    font-weight: 700;
}

.member-savings-panel-head > strong {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 .65rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e;
    font-weight: 950;
}

.member-savings-action-panel {
    position: sticky;
    top: 1rem;
    overflow: hidden;
}

.member-savings-switch-panel .member-savings-panel,
.member-savings-switch-panel .member-savings-action-panel {
    border: 0;
    box-shadow: none;
}

.member-savings-switch-panel .member-savings-action-panel {
    position: static;
}

.member-savings-switch-panel .member-savings-action-head {
    padding: 0 0 .85rem;
}

.member-savings-switch-panel .member-savings-action-tabs {
    padding: 0 0 .85rem;
}

.member-savings-switch-panel .member-savings-action-content {
    padding: 1rem 0 0;
}

.member-savings-action-head {
    margin: 0;
    padding: 1rem 1rem .75rem;
}

.member-savings-action-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    padding: 0 1rem .85rem;
    border-bottom: 1px solid #e2e8f0;
}

.member-savings-action-tabs button {
    display: grid;
    gap: .22rem;
    justify-items: center;
    padding: .58rem .35rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-size: .74rem;
    font-weight: 900;
}

.member-savings-action-tabs button i {
    color: #0f766e;
    font-size: 1rem;
}

.member-savings-action-tabs button.active {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
}

.member-savings-action-tabs button.active i {
    color: #fff;
}

.member-savings-action-content {
    padding: 1rem;
}

.member-savings-action-content h4 {
    margin: 0 0 .85rem;
    color: #172033;
    font-size: 1rem;
    font-weight: 950;
}

.member-savings-action-empty {
    padding: 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-weight: 800;
}

.member-savings-history-list {
    display: grid;
    gap: .65rem;
}

.member-savings-history-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .85rem;
    align-items: center;
    padding: .85rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #f8fafc;
}

.member-savings-history-item span,
.member-savings-history-item small,
.member-savings-history-item strong,
.member-savings-history-item em {
    display: block;
}

.member-savings-history-item span {
    color: #0f766e;
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-savings-history-item strong {
    color: #172033;
    font-weight: 950;
}

.member-savings-history-item small {
    color: #64748b;
    font-size: .78rem;
    font-weight: 750;
}

.member-savings-history-item em {
    justify-self: end;
    margin-bottom: .25rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: .68rem;
    font-style: normal;
    font-weight: 950;
    text-align: center;
}

.member-savings-history-item > div:last-child {
    text-align: right;
}

.member-savings-plan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .9rem;
}

.member-savings-plan-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 34px;
    font-weight: 800;
}

.member-savings-product-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.member-loan-workspace {
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.member-loan-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    gap: 1rem;
    align-items: stretch;
    padding: 1rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, .12), transparent 38%),
        linear-gradient(135deg, #eff6ff, #fff);
}

.member-loan-hero span,
.member-loan-hero h3,
.member-loan-hero p,
.member-loan-hero-stats span,
.member-loan-hero-stats strong {
    display: block;
}

.member-loan-hero span {
    color: #1d4ed8;
    font-size: .75rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-loan-hero h3 {
    margin: .15rem 0 .3rem;
    color: #172033;
    font-size: 1.25rem;
    font-weight: 950;
}

.member-loan-hero p {
    max-width: 760px;
    margin: 0;
    color: #475569;
    font-weight: 700;
}

.member-loan-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.member-loan-hero-stats div {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: .85rem;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.member-loan-hero-stats span {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.member-loan-hero-stats strong {
    color: #172033;
    font-size: 1.1rem;
    font-weight: 950;
}

.member-loan-switch-panel {
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.member-loan-main-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    padding: .85rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fff, #f8fafc);
}

.member-loan-main-tabs button {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    min-height: 58px;
    padding: .75rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    text-align: left;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
}

.member-loan-main-tabs i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 1.1rem;
}

.member-loan-main-tabs span,
.member-loan-main-tabs small,
.member-loan-main-tabs b,
.member-loan-main-tabs strong {
    display: block;
}

.member-loan-main-tabs small {
    color: #64748b;
    font-size: .7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-loan-main-tabs button > span {
    min-width: 0;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-loan-main-tabs b {
    font-size: .95rem;
    font-weight: 950;
}

.member-loan-main-tabs strong {
    padding: .25rem .55rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .78rem;
    font-weight: 950;
}

.member-loan-main-tabs button.active {
    border-color: #1d4ed8;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff;
}

.member-loan-main-tabs button.active i {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.member-loan-main-tabs button.active small {
    color: rgba(255, 255, 255, .76);
}

.member-loan-main-tabs button.active strong {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.member-loan-main-content {
    padding: 1rem;
}

.member-loan-panel,
.member-loan-action-panel {
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.member-loan-panel {
    padding: 1rem;
}

.member-loan-panel-head,
.member-loan-action-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.member-loan-panel-head span,
.member-loan-action-head span {
    display: block;
    color: #1d4ed8;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-loan-panel-head h3,
.member-loan-action-head h3 {
    margin: .15rem 0 .2rem;
    color: #172033;
    font-size: 1.1rem;
    font-weight: 950;
}

.member-loan-panel-head p {
    max-width: 540px;
    margin: 0;
    color: #64748b;
    font-size: .9rem;
    font-weight: 700;
}

.member-loan-panel-head > strong {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 .65rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 950;
}

.member-loan-list-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-bottom: .85rem;
}

.member-loan-list-tabs button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: center;
    min-height: 46px;
    padding: .55rem .65rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #f8fafc;
    color: #172033;
    text-align: left;
    font-weight: 950;
}

.member-loan-list-tabs i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
}

.member-loan-list-tabs span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-loan-list-tabs strong {
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 .45rem;
    border-radius: 999px;
    background: #e0f2fe;
    color: #1d4ed8;
    font-size: .72rem;
}

.member-loan-list-tabs button.active {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #fff;
}

.member-loan-list-tabs button.active i,
.member-loan-list-tabs button.active strong {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.member-loan-list-content {
    min-width: 0;
}

.member-loan-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: .85rem;
}

.member-loan-card,
.member-loan-empty {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.member-loan-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.member-loan-card-head span,
.member-loan-card-head strong,
.member-loan-card-head small,
.member-loan-balance-row span,
.member-loan-balance-row strong {
    display: block;
}

.member-loan-card-head span {
    color: #1d4ed8;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-loan-card-head strong {
    color: #172033;
    font-weight: 950;
}

.member-loan-card-head small {
    color: #64748b;
    font-weight: 800;
}

.member-loan-card-head em {
    padding: .25rem .5rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
}

.member-loan-card-head em.active {
    background: #dcfce7;
    color: #047857;
}

.member-loan-balance-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin: .9rem 0;
}

.member-loan-balance-row div {
    padding: .7rem;
    border-radius: 8px;
    background: #f8fafc;
}

.member-loan-balance-row span {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.member-loan-balance-row strong {
    color: #172033;
    font-size: .98rem;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.member-loan-progress {
    display: grid;
    gap: .35rem;
}

.member-loan-progress > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    color: #172033;
    font-weight: 900;
}

.member-loan-progress small {
    color: #64748b;
    font-weight: 800;
}

.member-loan-meta {
    display: grid;
    gap: .4rem;
    margin-top: .85rem;
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
}

.member-loan-meta div {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.member-loan-meta i {
    color: #1d4ed8;
}

.member-loan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .9rem;
}

.member-loan-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 34px;
    font-weight: 800;
}

.member-loan-schedule {
    margin-top: .85rem;
}

.member-loan-schedule-list {
    display: grid;
    gap: .45rem;
    padding: .65rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #f8fafc;
}

.member-loan-schedule-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: .55rem;
    align-items: center;
    padding: .5rem;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    font-size: .78rem;
    font-weight: 850;
}

.member-loan-schedule-date,
.member-loan-schedule-amount,
.member-loan-schedule-item em {
    min-width: 0;
    overflow-wrap: anywhere;
}

.member-loan-schedule-date,
.member-loan-schedule-amount {
    display: grid;
    gap: .08rem;
}

.member-loan-schedule-date span,
.member-loan-schedule-amount span {
    color: #64748b;
    font-size: .6rem;
    font-weight: 900;
    text-transform: uppercase;
}

.member-loan-schedule-date strong,
.member-loan-schedule-amount strong {
    color: #172033;
    font-size: .82rem;
    font-weight: 950;
}

.member-loan-schedule-item em {
    padding: .18rem .45rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .68rem;
    font-style: normal;
    font-weight: 950;
    text-transform: capitalize;
}

.member-loan-schedule-pay {
    justify-self: end;
    min-height: 30px;
    padding: .2rem .55rem;
    font-size: .7rem;
    font-weight: 900;
}

.member-loan-history-list {
    display: grid;
    gap: .65rem;
}

.member-loan-history-card {
    padding: .85rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.member-loan-history-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.member-loan-history-card-head span,
.member-loan-history-card-head strong {
    display: block;
}

.member-loan-history-card-head span {
    color: #1d4ed8;
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-loan-history-card-head strong {
    color: #172033;
    font-weight: 950;
}

.member-loan-history-card-head em {
    flex: 0 0 auto;
    padding: .22rem .5rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .68rem;
    font-style: normal;
    font-weight: 950;
}

.member-loan-history-card-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin-top: .75rem;
}

.member-loan-history-card-meta div {
    padding: .55rem;
    border-radius: 8px;
    background: #f8fafc;
}

.member-loan-history-card-meta span,
.member-loan-history-card-meta strong {
    display: block;
}

.member-loan-history-card-meta span {
    color: #64748b;
    font-size: .65rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-loan-history-card-meta strong {
    color: #172033;
    font-size: .82rem;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.member-loan-empty {
    display: grid;
    place-items: center;
    gap: .35rem;
    min-height: 220px;
    color: #64748b;
    text-align: center;
}

.member-loan-empty i {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 1.5rem;
}

.member-loan-empty strong {
    color: #172033;
    font-weight: 950;
}

.member-loan-action-panel {
    position: sticky;
    top: 1rem;
    overflow: hidden;
}

.member-loan-switch-panel .member-loan-panel,
.member-loan-switch-panel .member-loan-action-panel {
    border: 0;
    box-shadow: none;
}

.member-loan-switch-panel .member-loan-action-panel {
    position: static;
}

.member-loan-switch-panel .member-loan-action-head {
    padding: 0 0 .85rem;
}

.member-loan-switch-panel .member-loan-action-tabs {
    padding: 0 0 .85rem;
}

.member-loan-switch-panel .member-loan-action-content {
    padding: 1rem 0 0;
}

.member-loan-action-head {
    margin: 0;
    padding: 1rem 1rem .75rem;
}

.member-loan-action-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    padding: 0 1rem .85rem;
    border-bottom: 1px solid #e2e8f0;
}

.member-loan-action-tabs button {
    display: grid;
    gap: .25rem;
    justify-items: center;
    padding: .65rem .45rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
}

.member-loan-action-tabs button i {
    color: #1d4ed8;
    font-size: 1rem;
}

.member-loan-action-tabs button.active {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #fff;
}

.member-loan-action-tabs button.active i {
    color: #fff;
}

.member-loan-action-content {
    padding: 1rem;
}

.member-loan-action-content h4 {
    margin: 0 0 .85rem;
    color: #172033;
    font-size: 1rem;
    font-weight: 950;
}

.member-loan-product-summary,
.member-loan-action-empty {
    padding: .8rem;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: .86rem;
    font-weight: 800;
}

.member-loan-action-empty {
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
}

.member-loan-extra-box {
    padding: .85rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #f8fafc;
}

.member-loan-extra-box summary {
    cursor: pointer;
    color: #172033;
    font-weight: 950;
}

.member-save-now-panel {
    background: linear-gradient(135deg, #ecfdf5, #fff);
}

.member-autodebit-box {
    padding: .85rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: linear-gradient(135deg, #eff6ff, #fff);
}

.member-bills-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .14);
}

.member-bills-hero span,
.member-bills-hero h3,
.member-bills-hero p {
    display: block;
}

.member-bills-hero span {
    color: rgba(255, 255, 255, .75);
    font-size: .75rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-bills-hero h3 {
    margin: .2rem 0 .3rem;
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    font-weight: 950;
}

.member-bills-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .84);
    font-weight: 700;
}

.member-bills-hero > i {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: 2rem;
}

.member-bill-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
}

.member-bill-service-card {
    display: grid;
    gap: .45rem;
    min-height: 118px;
    padding: .9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    text-align: left;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.member-bill-service-card.active,
.member-bill-service-card:hover {
    border-color: #0f766e;
    background: #f0fdfa;
}

.member-bill-service-card i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.25rem;
}

.member-bill-service-card span {
    font-weight: 950;
}

.member-bill-pay-card {
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, .12), transparent 34%),
        #fff;
}

.member-bill-pay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.member-bill-pay-head span,
.member-bill-pay-head h3 {
    display: block;
}

.member-bill-pay-head span {
    color: #0f766e;
    font-size: .75rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-bill-pay-head h3 {
    margin: .1rem 0 0;
    color: #172033;
    font-size: 1.25rem;
    font-weight: 950;
}

.member-bill-pay-head > i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.25rem;
}

.member-bill-selected {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
}

.member-bill-selected i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .16);
}

.member-bill-selected span {
    font-size: 1.05rem;
    font-weight: 950;
}

.member-bill-extra {
    padding: .75rem;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}

.member-bill-credit-option {
    border: 1px solid #b45309;
    background: #f59e0b;
    color: #1f2937;
    box-shadow: 0 8px 18px rgba(180, 83, 9, .16);
    font-weight: 900;
}

.member-bill-credit-option:hover,
.member-bill-credit-option:focus {
    border-color: #92400e;
    background: #d97706;
    color: #111827;
}

.btn-check:checked + .member-bill-credit-option {
    border-color: #78350f;
    background: #92400e;
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .25);
}

.staff-wallet-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 360px);
    gap: 1rem;
    align-items: stretch;
    padding: clamp(1.1rem, 3vw, 1.8rem);
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, .22), transparent 34%),
        linear-gradient(135deg, #0f766e, #1d4ed8);
    color: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
}

.staff-wallet-hero span,
.staff-wallet-hero h2,
.staff-wallet-hero p,
.staff-wallet-account-card strong,
.staff-wallet-account-card small {
    display: block;
}

.staff-wallet-hero span {
    color: rgba(255, 255, 255, .74);
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.staff-wallet-hero h2 {
    margin: .2rem 0 .45rem;
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 950;
}

.staff-wallet-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .86);
    font-weight: 700;
}

.staff-wallet-account-card {
    display: grid;
    align-content: center;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(10px);
}

.staff-wallet-account-card strong {
    margin: .2rem 0;
    color: #fff;
    font-size: clamp(1.2rem, 4vw, 2rem);
    font-weight: 950;
    letter-spacing: .03em;
}

.staff-wallet-account-card small {
    color: rgba(255, 255, 255, .8);
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .member-portal-hero {
        grid-template-columns: 1fr;
    }

    .staff-wallet-hero {
        grid-template-columns: 1fr;
    }

    .member-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .member-savings-hero {
        grid-template-columns: 1fr;
    }

    .member-savings-hero-action {
        min-width: 0;
    }

    .member-savings-workspace {
        padding: .75rem !important;
    }

    .member-savings-main-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
        padding: .55rem;
    }

    .member-savings-main-tabs button {
        gap: .35rem;
        min-height: 48px;
        padding: .45rem;
    }

    .member-savings-main-tabs i {
        width: 30px;
        height: 30px;
        font-size: .85rem;
    }

    .member-savings-main-tabs strong {
        padding: .12rem .38rem;
        font-size: .62rem;
    }

    .member-savings-main-tabs span {
        font-size: .8rem;
    }

    .member-savings-main-content {
        padding: .75rem;
    }

    .member-savings-panel,
    .member-savings-action-panel {
        box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
    }

    .member-savings-panel {
        padding: .75rem;
    }

    .member-savings-panel-head,
    .member-savings-action-head {
        gap: .65rem;
        margin-bottom: .75rem;
    }

    .member-savings-panel-head h3,
    .member-savings-action-head h3 {
        font-size: .98rem;
    }

    .member-savings-panel-head p {
        font-size: .8rem;
        line-height: 1.4;
    }

    .member-savings-card-grid {
        grid-template-columns: 1fr;
        gap: .65rem;
    }

    .member-savings-action-panel {
        position: static;
    }

    .member-savings-action-head,
    .member-savings-action-content {
        padding: .8rem;
    }

    .member-savings-action-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .3rem;
        padding: 0 .6rem .65rem;
    }

    .member-savings-action-tabs button {
        min-height: 54px;
        padding: .42rem .18rem;
        font-size: .62rem;
        line-height: 1.05;
        white-space: nowrap;
    }

    .member-savings-action-tabs button i {
        font-size: .9rem;
    }

    .member-savings-switch-panel .member-savings-action-head {
        padding: 0 0 .65rem;
    }

    .member-savings-switch-panel .member-savings-action-tabs {
        padding: 0 0 .65rem;
    }

    .member-savings-switch-panel .member-savings-action-content {
        padding: .75rem 0 0;
    }

    .member-savings-product-grid,
    .member-savings-product-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .member-savings-product-card {
        min-height: 76px;
        padding: .65rem;
    }

    .member-savings-product-card span,
    .member-savings-plan-head span,
    .member-savings-panel-head span,
    .member-savings-action-head span {
        font-size: .65rem;
    }

    .member-savings-product-card strong,
    .member-savings-plan-head strong {
        font-size: .86rem;
        line-height: 1.25;
    }

    .member-savings-plan-head {
        align-items: flex-start;
    }

    .member-savings-history-item {
        grid-template-columns: 1fr;
        gap: .55rem;
        padding: .7rem;
    }

    .member-savings-history-item > div:last-child {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: .2rem .55rem;
        align-items: center;
        text-align: left;
    }

    .member-savings-history-item > div:last-child em {
        justify-self: start;
        margin-bottom: 0;
    }

    .member-savings-history-item > div:last-child strong,
    .member-savings-history-item > div:last-child small {
        text-align: right;
    }

    .member-profile-hero,
    .member-profile-kyc-panel {
        grid-template-columns: 1fr;
        padding: .75rem;
    }

    .member-profile-hero-main {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .member-profile-avatar {
        width: 52px;
        height: 52px;
        font-size: 1rem;
    }

    .member-profile-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .member-profile-kyc-form {
        grid-template-columns: 1fr;
    }

    .member-profile-form-section {
        padding: .8rem;
    }

    .member-loan-hero {
        grid-template-columns: 1fr;
        padding: .75rem;
    }

    .member-loan-hero h3 {
        font-size: .98rem;
        line-height: 1.2;
    }

    .member-loan-hero p {
        font-size: .8rem;
        line-height: 1.4;
    }

    .member-loan-hero-stats {
        gap: .5rem;
    }

    .member-loan-main-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
        padding: .65rem;
    }

    .member-loan-main-tabs button {
        min-height: 50px;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: .4rem;
        padding: .5rem;
    }

    .member-loan-main-tabs i {
        width: 32px;
        height: 32px;
        font-size: .92rem;
    }

    .member-loan-main-tabs button > span {
        font-size: .9rem;
    }

    .member-loan-main-tabs strong {
        padding: .18rem .42rem;
        font-size: .7rem;
    }

    .member-loan-main-tabs b {
        font-size: .86rem;
    }

    .member-loan-main-content {
        padding: .65rem;
    }

    .member-loan-panel,
    .member-loan-action-panel {
        box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
    }

    .member-loan-panel {
        padding: .75rem;
    }

    .member-loan-panel-head,
    .member-loan-action-head {
        gap: .65rem;
        margin-bottom: .75rem;
    }

    .member-loan-panel-head h3,
    .member-loan-action-head h3 {
        font-size: .98rem;
    }

    .member-loan-panel-head p {
        font-size: .8rem;
        line-height: 1.4;
    }

    .member-loan-card-grid {
        grid-template-columns: 1fr;
        gap: .65rem;
    }

    .member-loan-list-tabs {
        gap: .35rem;
        margin-bottom: .65rem;
    }

    .member-loan-list-tabs button {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        min-height: 44px;
        gap: .35rem;
        padding: .45rem;
        font-size: .78rem;
    }

    .member-loan-list-tabs i {
        width: 30px;
        height: 30px;
        font-size: .85rem;
    }

    .member-loan-list-tabs strong {
        min-width: 24px;
        height: 24px;
        padding: 0 .35rem;
        font-size: .65rem;
    }

    .member-loan-action-panel {
        position: static;
    }

    .member-loan-action-head,
    .member-loan-action-content {
        padding: .8rem;
    }

    .member-loan-action-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .35rem;
        padding: 0 .8rem .75rem;
    }

    .member-loan-action-tabs button {
        padding: .55rem .25rem;
        font-size: .7rem;
    }

    .member-loan-schedule-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .member-loan-schedule-item em {
        grid-column: 1;
        justify-self: start;
    }

    .member-loan-schedule-pay {
        grid-column: 2;
        justify-self: end;
    }

    .member-loan-history-card-meta {
        grid-template-columns: 1fr;
        gap: .4rem;
    }

    .member-loan-balance-row {
        grid-template-columns: 1fr;
        gap: .45rem;
        margin: .65rem 0;
    }

    .member-bills-hero {
        grid-template-columns: 1fr;
    }

    .member-bills-hero > i {
        display: none;
    }
}

@media (max-width: 575.98px) {
    body.app-authenticated {
        padding-bottom: 0;
    }

    .content > header {
        min-height: 56px;
        padding: .5rem .75rem !important;
        gap: .5rem;
    }

    .content > header .pwa-install-button {
        min-height: 38px;
        padding: .35rem .65rem;
        font-size: .84rem;
        line-height: 1.15;
        white-space: nowrap;
    }

    .member-portal-shell {
        padding-bottom: 1rem;
    }

    .member-portal-hero {
        gap: .75rem;
        margin-bottom: .75rem !important;
        padding: .85rem;
    }

    .member-portal-hero h2 {
        margin: .2rem 0 .4rem;
        font-size: 1.55rem;
        line-height: 1.08;
    }

    .member-portal-hero p {
        margin-bottom: .65rem !important;
        font-size: .9rem;
        line-height: 1.4;
    }

    .member-bank-balance,
    .member-portal-identity {
        padding: .75rem;
    }

    .member-bank-balance strong {
        font-size: 1.65rem;
        line-height: 1.1;
    }

    .member-bank-balance .btn {
        padding: .32rem .55rem;
        font-size: .82rem;
    }

    .member-account-stack {
        gap: .5rem;
    }

    .member-account-row {
        padding: .55rem .65rem;
    }

    .member-account-row span {
        max-width: none;
        font-size: .68rem;
        line-height: 1.25;
    }

    .member-account-row strong {
        font-size: 1.1rem;
        line-height: 1.15;
    }

    .member-account-row small {
        font-size: .78rem;
        line-height: 1.3;
    }

    .member-savings-hero {
        gap: .65rem;
        margin-bottom: .75rem !important;
        padding: .75rem;
    }

    .member-savings-hero h3 {
        font-size: .98rem;
        line-height: 1.2;
    }

    .member-savings-hero p {
        font-size: .8rem;
        line-height: 1.4;
    }

    .member-savings-hero-action {
        padding: .7rem;
    }

    .member-savings-hero-action strong {
        font-size: 1rem;
    }

    .member-savings-main-tabs button span {
        font-size: .82rem;
    }

    .member-savings-main-content {
        padding: .6rem;
    }

    .member-savings-plan-card,
    .member-savings-empty {
        padding: .8rem;
    }

    .member-savings-plan-balance {
        margin: .65rem 0;
    }

    .member-savings-plan-balance strong {
        font-size: 1.1rem;
    }

    .member-savings-plan-meta {
        gap: .3rem;
        margin-top: .65rem;
        font-size: .74rem;
    }

    .member-savings-plan-actions .btn {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
    }

    .member-profile-workspace {
        padding: .75rem !important;
    }

    .member-profile-hero {
        gap: .65rem;
        margin-bottom: .75rem !important;
    }

    .member-profile-hero-main h3 {
        font-size: .98rem;
        line-height: 1.2;
    }

    .member-profile-hero-main p {
        font-size: .8rem;
        line-height: 1.4;
    }

    .member-profile-status-grid strong {
        font-size: .9rem;
    }

    .member-profile-status-grid small {
        font-size: .72rem;
    }

    .member-profile-kyc-panel {
        gap: .65rem;
    }

    .member-profile-kyc-panel > i {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .member-profile-form {
        gap: .75rem;
    }

    .member-profile-form-section {
        padding: .75rem;
    }

    .member-profile-section-head {
        margin-bottom: .65rem;
    }

    .member-profile-section-head span,
    .member-profile-hero-main span,
    .member-profile-status-grid span {
        font-size: .65rem;
    }

    .member-profile-section-head h4 {
        font-size: .9rem;
    }

    .member-profile-actions {
        position: sticky;
        bottom: 86px;
        z-index: 5;
        padding: .55rem;
        border: 1px solid #dbeafe;
        border-radius: 8px;
        background: rgba(255, 255, 255, .94);
        backdrop-filter: blur(12px);
    }

    .member-profile-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .member-loan-workspace {
        padding: .75rem !important;
    }

    .member-loan-hero-stats div {
        min-height: 72px;
        padding: .7rem;
    }

    .member-loan-hero-stats strong {
        font-size: .95rem;
    }

    .member-loan-card,
    .member-loan-empty {
        padding: .8rem;
    }

    .member-loan-card-head span,
    .member-loan-panel-head span,
    .member-loan-action-head span {
        font-size: .65rem;
    }

    .member-loan-card-head strong {
        font-size: .86rem;
        line-height: 1.25;
    }

    .member-loan-meta {
        gap: .3rem;
        margin-top: .65rem;
        font-size: .74rem;
    }

    .member-loan-actions .btn {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
    }

    .member-quick-actions {
        gap: .45rem;
    }

    .member-quick-actions a {
        min-height: 58px;
        padding: .45rem .25rem;
        font-size: .72rem;
    }

    .member-quick-actions i {
        width: 28px;
        height: 28px;
        font-size: .95rem;
    }

    .member-metric-row {
        --bs-gutter-x: .65rem;
        --bs-gutter-y: .65rem;
        margin-bottom: 1rem !important;
    }

    .member-metric-row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .member-metric-row .metric-card .card-body {
        display: flex;
        min-height: 78px;
        flex-direction: column;
        justify-content: center;
        padding: .7rem .75rem;
    }

    .member-metric-row .metric-card .small {
        font-size: .74rem;
        line-height: 1.2;
    }

    .member-metric-row .metric-card .h4 {
        font-size: 1.08rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .member-dashboard-section .row.g-4.p-3,
    .member-dashboard-section .row.g-4.p-lg-4 {
        --bs-gutter-y: 1rem;
        padding: 1rem !important;
    }

    .member-dashboard-notifications {
        padding: .65rem;
    }

    .member-dashboard-notification-list {
        gap: .45rem;
    }

    .member-dashboard-notification-item {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: .5rem;
        padding: .55rem;
    }

    .member-dashboard-notification-item > i {
        width: 30px;
        height: 30px;
        font-size: .85rem;
    }

    .member-dashboard-notification-item-head strong {
        font-size: .84rem;
    }

    .member-dashboard-notification-item p {
        font-size: .78rem;
    }

    .member-section-title {
        margin-bottom: .75rem;
    }

    .member-section-title h3 {
        font-size: 1rem;
    }

    .member-section-title p {
        font-size: .88rem;
        line-height: 1.45;
    }

    .member-transaction-history {
        overflow: visible;
    }

    .member-transaction-table {
        border-collapse: separate;
        border-spacing: 0 .65rem;
    }

    .member-transaction-table thead {
        display: none;
    }

    .member-transaction-table tbody,
    .member-transaction-table tr,
    .member-transaction-table td {
        display: block;
        width: 100%;
    }

    .member-transaction-table tbody tr {
        padding: .75rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
    }

    .member-transaction-table tbody tr td {
        display: grid;
        grid-template-columns: minmax(84px, .42fr) minmax(0, 1fr);
        gap: .7rem;
        align-items: start;
        padding: .35rem 0;
        border: 0;
        font-size: .88rem;
        line-height: 1.35;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .member-transaction-table tbody tr td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: .7rem;
        font-weight: 900;
        line-height: 1.25;
        text-transform: uppercase;
    }

    .member-transaction-table tbody tr td:first-child {
        padding-top: 0;
    }

    .member-transaction-table tbody tr td:last-child {
        padding-bottom: 0;
    }

    .member-transaction-table tbody tr td:nth-child(2) .fw-semibold {
        font-size: .95rem;
        line-height: 1.25;
    }

    .member-transaction-table tbody tr td:nth-child(2) .small {
        margin-top: .15rem;
        font-size: .8rem;
        line-height: 1.35;
    }

    .member-transaction-table tbody tr td:nth-child(5) span {
        font-size: .95rem;
        font-weight: 900;
    }

    .member-transaction-table .badge {
        width: fit-content;
    }

    #memberBillPaymentModal .modal-dialog {
        max-width: calc(100% - 1rem);
        margin: .5rem;
    }

    #memberBillPaymentModal .modal-content {
        max-height: calc(100dvh - 1rem);
        border-radius: 10px;
        overflow: hidden;
    }

    #memberBillPaymentModal .modal-header {
        padding: .55rem .75rem;
    }

    #memberBillPaymentModal .modal-title {
        font-size: 1rem;
    }

    #memberBillPaymentModal .btn-close {
        width: .75rem;
        height: .75rem;
        padding: .65rem;
    }

    #memberBillPaymentModal .modal-body {
        padding: .5rem;
    }

    #memberBillPaymentModal .row.g-4 {
        --bs-gutter-x: .75rem;
        --bs-gutter-y: .75rem;
    }

    #memberBillPaymentModal .member-bills-hero {
        margin-bottom: .45rem !important;
        padding: .55rem;
    }

    #memberBillPaymentModal .member-bills-hero h3 {
        font-size: .9rem;
        line-height: 1.2;
    }

    #memberBillPaymentModal .member-bills-hero span {
        font-size: .65rem;
    }

    #memberBillPaymentModal .member-bills-hero p {
        display: none;
    }

    #memberBillPaymentModal .member-bill-service-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .35rem;
    }

    #memberBillPaymentModal .member-bill-service-card {
        min-height: 70px;
        align-content: center;
        justify-items: center;
        gap: .3rem;
        padding: .35rem .25rem;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        text-align: center;
    }

    #memberBillPaymentModal .member-bill-service-card i {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        font-size: 1rem;
    }

    #memberBillPaymentModal .member-bill-service-card span {
        max-width: 100%;
        color: #475569;
        font-size: .7rem;
        line-height: 1.1;
        text-align: center;
        overflow-wrap: anywhere;
    }

    #memberBillPaymentModal .member-bill-service-card.active,
    #memberBillPaymentModal .member-bill-service-card:hover {
        border-color: transparent;
        background: #f0fdfa;
    }

    #memberBillPaymentModal .member-bill-service-card.active span,
    #memberBillPaymentModal .member-bill-service-card:hover span {
        color: #0f766e;
    }

    #memberBillPaymentModal .member-side-panel {
        padding: .65rem;
    }

    #memberBillPaymentModal .member-bill-pay-head {
        margin-bottom: .5rem;
    }

    #memberBillPaymentModal .member-bill-pay-head h3 {
        font-size: .95rem;
    }

    #memberBillPaymentModal .member-bill-pay-head span {
        font-size: .65rem;
    }

    #memberBillPaymentModal .member-bill-pay-head > i {
        width: 30px;
        height: 30px;
        font-size: .95rem;
    }

    #memberBillPaymentModal .member-bill-selected,
    #memberBillPaymentModal .member-bill-extra,
    #memberBillPaymentModal .alert {
        padding: .5rem;
    }

    #memberBillPaymentModal .member-bill-selected i {
        width: 32px;
        height: 32px;
    }

    #memberBillPaymentModal .member-bill-selected span {
        font-size: .9rem;
    }

    #memberBillPaymentModal .form-select-lg,
    #memberBillPaymentModal .form-control-lg,
    #memberBillPaymentModal .input-group-lg > .form-control,
    #memberBillPaymentModal .input-group-lg > .input-group-text {
        min-height: 38px;
        padding: .35rem .55rem;
        font-size: .88rem;
    }

    #memberBillPaymentModal .btn-lg {
        padding: .45rem .65rem;
        font-size: .88rem;
    }
}

@media (max-width: 379.98px) {
    #memberBillPaymentModal .member-bill-service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.member-notification-history {
    overflow: hidden;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.member-notification-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fff, #f8fafc);
}

.member-notification-history-head span,
.member-notification-history-head h4,
.member-notification-history-head strong {
    display: block;
}

.member-notification-history-head span {
    color: #0f766e;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.member-notification-history-head h4 {
    margin: .12rem 0 0;
    color: #172033;
    font-size: 1.02rem;
    font-weight: 950;
}

.member-notification-history-head strong {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 .65rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e;
    font-weight: 950;
}

.member-notification-list {
    display: grid;
    gap: .65rem;
    padding: 1rem;
}

.member-notification-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    padding: .85rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.member-notification-item.unread {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #f0fdf4, #fff);
}

.member-notification-item > i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1.08rem;
}

.member-notification-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.member-notification-item-head strong,
.member-notification-item-head span,
.member-notification-item p,
.member-notification-item small {
    display: block;
}

.member-notification-item-head strong {
    color: #172033;
    font-size: .95rem;
    font-weight: 950;
}

.member-notification-item-head span {
    flex: 0 0 auto;
    color: #64748b;
    font-size: .76rem;
    font-weight: 800;
    text-align: right;
}

.member-notification-item p {
    margin: .25rem 0 .3rem;
    color: #475569;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.45;
}

.member-notification-item small {
    color: #64748b;
    font-weight: 800;
}

.member-notification-empty {
    display: grid;
    place-items: center;
    gap: .35rem;
    min-height: 180px;
    color: #64748b;
    text-align: center;
}

.member-notification-empty i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f766e;
    font-size: 1.35rem;
}

.member-notification-empty strong {
    color: #172033;
    font-weight: 950;
}

.notification-preference-panel,
.member-notification-preferences {
    padding: 1rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
}

.notification-preference-panel {
    display: grid;
    gap: .75rem;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
}

.notification-preference-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.notification-preference-panel-head span,
.notification-preference-panel-head strong {
    display: block;
}

.notification-preference-panel-head span {
    color: #0f766e;
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.notification-preference-panel-head strong {
    color: #172033;
    font-size: 1rem;
    font-weight: 950;
}

.notification-preference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.notification-preference-switch {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    min-height: 68px;
    padding: .8rem;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    cursor: pointer;
}

.notification-preference-switch.muted {
    opacity: .65;
}

.notification-preference-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f766e;
}

.notification-preference-icon i {
    font-size: 1.15rem;
}

.notification-preference-copy {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.notification-preference-copy strong,
.notification-preference-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-preference-copy strong {
    color: #172033;
    font-size: .92rem;
    font-weight: 950;
    white-space: nowrap;
}

.notification-preference-copy small {
    color: #64748b;
    font-size: .78rem;
    font-weight: 750;
}

.notification-preference-toggle {
    min-height: 0;
    margin: 0;
    padding-left: 2.4rem;
}

.notification-preference-toggle .form-check-input {
    width: 2.25rem;
    height: 1.2rem;
    margin-top: 0;
    cursor: pointer;
}

.notification-preference-sound {
    grid-column: 1 / -1;
}

@media (max-width: 575.98px) {
    .member-notification-history-head,
    .member-notification-list {
        padding: .75rem;
    }

    .member-notification-list {
        max-height: none;
        gap: .55rem;
    }

    .member-notification-item {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: .6rem;
        padding: .7rem;
    }

    .member-notification-item > i {
        width: 34px;
        height: 34px;
        font-size: .95rem;
    }

    .member-notification-item-head {
        display: grid;
        gap: .15rem;
    }

    .member-notification-item-head span {
        text-align: left;
    }

    .member-notification-item p {
        font-size: .82rem;
    }

    .notification-preference-grid {
        grid-template-columns: 1fr;
    }

    .notification-preference-panel {
        padding: .75rem;
    }

    .notification-preference-panel-head {
        display: grid;
        gap: .15rem;
    }

    .notification-preference-switch {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: .55rem;
        min-height: 58px;
        padding: .65rem;
    }

    .notification-preference-icon {
        width: 34px;
        height: 34px;
    }

    .notification-preference-copy strong {
        font-size: .86rem;
    }

    .notification-preference-copy small {
        font-size: .72rem;
    }
}

@media (min-width: 992px) {
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        max-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 991.98px) {
    body.app-authenticated {
        padding-bottom: 0;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    .app-shell {
        display: block;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1060;
        width: min(86vw, 330px);
        max-width: 330px;
        max-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-106%);
        transition: transform .22s ease;
        box-shadow: 24px 0 50px rgba(15, 23, 42, .24);
    }

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

    .mobile-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1055;
        background: rgba(15, 23, 42, .48);
        backdrop-filter: blur(2px);
    }

    body.mobile-menu-open .mobile-sidebar-backdrop {
        display: block;
    }

    .content {
        width: 100%;
    }

    .content > .p-3 {
        padding-bottom: calc(6rem + env(safe-area-inset-bottom)) !important;
    }

    .member-dashboard-section > .p-3,
    .member-dashboard-section > .p-lg-4,
    .member-dashboard-section > .member-savings-workspace,
    .member-dashboard-section > .member-loan-workspace {
        padding-bottom: calc(6.25rem + env(safe-area-inset-bottom)) !important;
    }

    .content > header {
        position: sticky;
        top: 0;
        z-index: 1040;
        min-height: 64px;
    }

    .mobile-menu-toggle {
        width: 38px;
        height: 38px;
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1045;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: .2rem;
        min-height: 66px;
        padding: .45rem .45rem calc(.45rem + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(15, 23, 42, .08);
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 -12px 28px rgba(15, 23, 42, .08);
        backdrop-filter: blur(14px);
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        min-width: 0;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #64748b;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .14rem;
        padding: .25rem .15rem;
        text-decoration: none;
        font-size: .72rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .mobile-bottom-nav i {
        font-size: 1.15rem;
        line-height: 1;
    }

    .mobile-bottom-nav a.active,
    .mobile-bottom-nav button:focus-visible {
        background: rgba(21, 94, 117, .1);
        color: var(--tenant-primary, #155e75);
        outline: 0;
    }

    .pwa-install-fab {
        bottom: 12px;
        right: 12px;
    }

    .pwa-offline-badge {
        bottom: 14px;
    }
}

@media (max-width: 1199.98px) {
    .operations-hero,
    .operations-link-card {
        grid-template-columns: 1fr;
    }

    .member-index-hero,
    .finance-hero,
    .member-form-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operations-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .site-nav .container {
        flex-wrap: wrap;
    }

    .site-brand strong {
        font-size: .95rem;
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
        right: 12px;
        bottom: 12px;
    }

    .site-hero {
        min-height: auto;
    }

    .site-hero-overlay {
        background: rgba(10, 18, 32, .82);
    }

    .site-hero-content {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .site-hero-proof,
    .site-visual-gallery,
    .site-feature-grid {
        grid-template-columns: 1fr;
    }

    .site-feature-grid .site-feature {
        min-height: 0;
        border-width: 0 0 1px;
    }

    .site-feature-grid .site-feature:last-child {
        border-bottom: 0;
    }

    .site-visual-card,
    .site-visual-card-large {
        min-height: 280px;
    }

    .site-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .site-merchant-steps {
        grid-template-columns: 1fr;
    }

    .site-merchant-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-bills-grid {
        grid-template-columns: 1fr;
    }

    .site-dashboard-card {
        margin-top: 1rem;
    }

    .pricing-toggle {
        width: 100%;
    }

    .pricing-toggle button {
        flex: 1 1 0;
    }

    .site-price {
        padding: 1.1rem;
    }

    .site-price-top {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .site-price-top .badge {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .site-plan-limits {
        gap: .45rem;
    }

    .site-plan-limits div,
    .site-plan-included div {
        padding: .7rem .55rem;
    }

    .site-plan-included {
        grid-template-columns: 1fr;
    }

    .operations-hero,
    .operations-link-card,
    .operations-panel,
    .operations-focus-card {
        padding: 1rem;
    }

    .operations-hero-panel,
    .operations-metrics,
    .operations-mix,
    .operations-actions,
    .operations-snapshot-grid {
        grid-template-columns: 1fr;
    }

    .operations-link-copy {
        flex-direction: column;
        align-items: stretch;
    }

    .operations-link-actions {
        justify-content: flex-start;
    }

    .operations-referral-toggle {
        align-items: flex-start;
        flex-direction: column;
    }

    .operations-hero-actions .btn,
    .operations-link-copy .btn {
        width: 100%;
    }

    .operations-link-copy .operations-link-actions .btn {
        width: auto;
    }

    .operations-ring {
        margin: 0 auto;
    }

    .operations-focus-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .45rem;
    }

    .operations-focus-tabs button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .operations-transaction-list > .operations-approval-item {
        align-items: stretch;
        flex-direction: column;
    }

    .operations-approval-main {
        width: 100%;
    }

    .operations-approval-actions {
        justify-content: flex-end;
        width: 100%;
        margin-left: 0;
    }

    .operations-focus-header,
    .operations-tab-head,
    .operations-panel-head,
    .operations-table-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-portal-showcase,
    .site-portal-showcase img {
        min-height: 340px;
    }

    .site-phone-card {
        position: static;
        width: auto;
        margin: -5.5rem 1rem 1rem;
    }

    .customer-form-hero,
    .customer-submit-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .member-index-hero,
    .member-stat-grid,
    .finance-hero,
    .finance-metric-grid,
    .member-form-summary {
        grid-template-columns: 1fr;
    }

    .member-directory-head,
    .member-filter-top,
    .member-action-title,
    .member-form-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .member-collapsible-stack {
        grid-template-columns: 1fr;
        padding: .75rem;
    }

    .member-collapsible-panel[open] {
        display: block;
    }

    .member-collapsible-summary {
        gap: .55rem;
        padding: .7rem;
    }

    .member-collapsible-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .member-collapsible-badge,
    .member-selected-pill-sm {
        margin-left: 0;
    }

    .member-collapsible-chevron {
        margin-left: auto;
    }

    .member-collapsible-panel[open] .member-collapsible-content {
        border-top: 1px solid #e2e8f0;
        border-left: 0;
    }

    .member-selected-pill {
        width: 100%;
        justify-content: center;
    }

    .member-selected-pill-sm {
        width: auto;
    }

    .member-name-cell {
        min-width: 190px;
    }

    .member-subtext {
        flex-wrap: wrap;
    }

    .finance-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .65rem;
    }

    .finance-tabs .nav-link {
        white-space: nowrap;
    }

    .finance-pane-title,
    .finance-card-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .savings-product-showcase-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .savings-product-editor.finance-editor-card {
        position: static;
    }

    .finance-hero-copy h2 {
        font-size: clamp(1.55rem, 8vw, 2.15rem);
    }

    .customer-form-hero .btn,
    .customer-submit-bar .btn {
        width: 100%;
    }

    .customer-form-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: .65rem;
    }

    .customer-form-tabs .nav-link {
        white-space: nowrap;
        border-radius: 8px;
    }

    .customer-filter-form,
    .customer-search-form,
    .customer-search-input,
    .customer-filter-select,
    .customer-new-btn {
        flex: 1 1 100%;
        max-width: none;
        width: 100%;
    }

    .saas-hero {
        min-height: auto;
    }

    .saas-hero::before {
        background: rgba(15, 23, 42, .64);
    }

    .screen-main {
        width: 720px;
        right: -360px;
        top: 40px;
        opacity: .58;
    }

    .screen-side {
        display: none;
    }

    .saas-hero-copy {
        padding: 4.5rem 0;
    }

    .saas-portal-preview,
    .saas-steps,
    .saas-check-grid {
        grid-template-columns: 1fr;
    }

    .agent-nav .container {
        flex-wrap: wrap;
    }

    .agent-hero {
        min-height: auto;
    }

    .agent-hero-overlay {
        background: rgba(10, 18, 32, .82);
    }

    .agent-hero-content {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .agent-hero-copy-carousel {
        min-height: 300px;
    }

    .agent-hero-dots {
        left: 1rem;
        bottom: .85rem;
    }

    .agent-panel {
        margin-top: 1rem;
    }

    .agent-panel-grid,
    .agent-earnings {
        grid-template-columns: 1fr;
    }

    .agent-product-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .65rem;
    }

    .agent-product-tabs .nav-link {
        white-space: nowrap;
    }

    .agent-support-action {
        align-items: stretch;
        flex-direction: column;
    }

    .agent-ai-panel,
    .agent-ai-grid,
    .agent-catalog-grid,
    .agent-program-pane,
    .agent-program-grid,
    .agent-program-pane .agent-ai-grid {
        grid-template-columns: 1fr;
    }

    .agent-site-program .agent-hero {
        min-height: auto;
    }

    .agent-site-program .agent-hero h1 {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .agent-site-program .agent-panel {
        max-width: none;
    }

    .agent-program-pane {
        min-height: auto;
    }

    .agent-program-pane .agent-level-track {
        grid-template-columns: 1fr;
        overflow-x: visible;
    }

    .agent-level-track,
    .merchant-dashboard-hero,
    .merchant-rule-grid,
    .merchant-incentive-grid,
    .merchant-dashboard-levels {
        grid-template-columns: 1fr;
    }

    .merchant-portal-tabs,
    .super-company-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .6rem;
    }

    .merchant-portal-tabs .nav-link,
    .super-company-tabs .nav-link {
        white-space: nowrap;
    }

    .merchant-identity-note {
        width: 100%;
        max-width: none;
    }

    .merchant-verification-summary {
        grid-template-columns: 1fr;
    }

    .merchant-verification-summary-actions {
        justify-content: flex-start;
    }

    .kyc-selfie-capture {
        grid-template-columns: 1fr;
    }

    .kyc-selfie-preview {
        width: 100%;
        max-width: 220px;
    }

    .merchant-dashboard-hero {
        padding: 1rem;
    }

    .super-company-profile {
        flex-direction: column;
    }

    .tenant-public-hero-inner,
    .tenant-form-shell {
        grid-template-columns: 1fr;
    }

    .member-portal-hero {
        grid-template-columns: 1fr;
    }

    .member-portal-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .35rem;
    }

    .member-portal-tabs .nav-link {
        white-space: nowrap;
    }

    .manual-hero {
        padding: 3.5rem 0;
    }

    .manual-main {
        padding: 2rem 0;
    }

    .manual-toc {
        position: static;
    }

    .manual-steps,
    .manual-steps.compact,
    .manual-grid,
    .manual-two-col {
        grid-template-columns: 1fr;
    }

    .manual-card {
        padding: 1rem;
    }

    .site-about-list {
        grid-template-columns: 1fr;
    }

    .site-about-media-card {
        position: static;
        width: 100%;
        margin-top: .85rem;
    }

    .mobile-app-hero {
        padding: 3.5rem 0;
    }

    .mobile-app-grid,
    .mobile-app-checklist {
        grid-template-columns: 1fr;
    }

    .mobile-app-phone {
        width: min(280px, 100%);
    }

    .mobile-app-phone-screen {
        min-height: 360px;
    }
}

html {
    scroll-behavior: smooth;
}

.site-v2,
.site-v2 * {
    letter-spacing: 0;
}

.site-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, #0f766e, #f59e0b, #0284c7);
    box-shadow: 0 6px 18px rgba(15, 118, 110, .28);
    transition: width .12s linear;
}

.site-v2 .btn,
.site-v2 button,
.site-v2 a,
.site-v2 .site-feature,
.site-v2 .site-price,
.site-v2 .site-testimonial,
.site-v2 .site-proof-card,
.site-v2 .site-about-list div,
.site-v2 .site-contact-list a {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease, color .22s ease;
}

.site-nav {
    backdrop-filter: blur(18px);
    transition: box-shadow .22s ease, background-color .22s ease, border-color .22s ease;
}

.site-nav.site-nav-scrolled {
    background: rgba(255, 255, 255, .9);
    border-bottom-color: rgba(15, 118, 110, .13);
    box-shadow: 0 16px 42px rgba(15, 23, 42, .1);
}

.site-brand span {
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
    transition: transform .22s ease, box-shadow .22s ease;
}

.site-brand:hover span {
    transform: translateY(-2px) rotate(-2deg);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .2);
}

.site-nav-links > a {
    position: relative;
    padding: .35rem 0;
}

.site-nav-links > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: .1rem;
    height: 2px;
    border-radius: 999px;
    background: #0f766e;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}

.site-nav-links > a:hover::after {
    transform: scaleX(1);
}

.site-mobile-toggle {
    border-color: rgba(15, 118, 110, .28);
    background: #f0fdfa;
    color: #134e4a;
    font-weight: 900;
}

.site-mobile-menu {
    box-shadow: 0 18px 46px rgba(15, 23, 42, .12);
}

.site-mobile-menu.collapsing {
    transition: height .22s ease;
}

.whatsapp-float {
    animation: siteWhatsAppPulse 2.8s ease-in-out infinite;
}

.site-hero {
    min-height: min(820px, 100svh);
}

.site-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .72), transparent);
}

.site-hero-carousel img {
    transform: scale(1.04) translateY(var(--hero-shift, 0));
    transition: transform .18s linear;
}

.site-hero-carousel .carousel-item.active img {
    animation: siteHeroImage 6.8s ease both;
}

.site-hero-carousel .carousel-item.active .site-hero-visual-slide {
    animation: siteHeroVisual 6.8s ease both;
}

.site-hero-content .site-eyebrow,
.site-hero-content h1,
.site-hero-content p,
.site-hero-content .btn,
.site-hero-points,
.site-hero-proof,
.site-dashboard-card {
    animation: siteRise .72s ease both;
}

.site-hero-content h1 {
    animation-delay: .08s;
}

.site-hero-content p {
    animation-delay: .16s;
}

.site-hero-content .btn {
    animation-delay: .22s;
}

.site-hero-content .site-hero-cta {
    animation: siteRise .72s ease .22s both, siteTrialPulse 1.8s ease-in-out 1.1s infinite;
}

.site-hero-points {
    animation-delay: .28s;
}

.site-hero-proof {
    animation-delay: .34s;
}

.site-dashboard-card {
    position: relative;
    overflow: hidden;
    animation-delay: .26s;
    transition: transform .28s ease, box-shadow .28s ease;
}

.site-dashboard-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #0f766e, #f59e0b, #0284c7);
}

.site-dashboard-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 82px rgba(0, 0, 0, .32);
}

.site-bars span {
    transform-origin: bottom;
    animation: siteBarGrow .9s cubic-bezier(.2, .75, .2, 1) both, siteBarWave 2.6s ease-in-out 1.1s infinite;
}

.site-bars span:nth-child(2) {
    animation-delay: .08s;
    animation-duration: .9s, 2.9s;
}

.site-bars span:nth-child(3) {
    animation-delay: .16s;
    animation-duration: .9s, 2.4s;
}

.site-bars span:nth-child(4) {
    animation-delay: .24s;
    animation-duration: .9s, 3.1s;
}

.site-bars span:nth-child(5) {
    animation-delay: .32s;
    animation-duration: .9s, 2.7s;
}

.site-bars span:nth-child(6) {
    animation-delay: .4s;
    animation-duration: .9s, 3.3s;
}

.site-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.2rem;
    z-index: 4;
    display: inline-grid;
    justify-items: center;
    gap: .3rem;
    color: rgba(255, 255, 255, .78) !important;
    transform: translateX(-50%);
    font-size: 1rem;
}

.site-scroll-cue span {
    width: 24px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, .58);
    border-radius: 999px;
    position: relative;
}

.site-scroll-cue span::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    transform: translateX(-50%);
    animation: siteScrollDot 1.5s ease-in-out infinite;
}

.site-proof-card,
.site-feature,
.site-price,
.site-testimonial,
.site-about-list div,
.site-contact-list a {
    will-change: transform;
}

.site-proof-card:hover,
.site-feature:hover,
.site-testimonial:hover,
.site-about-list div:hover,
.site-contact-list a:hover {
    transform: translateY(-5px);
    border-color: rgba(15, 118, 110, .2);
    box-shadow: 0 26px 60px rgba(15, 23, 42, .12);
}

.site-feature:hover i,
.site-about-list div:hover i,
.site-bills-grid div:hover i {
    transform: translateY(-2px) scale(1.04);
}

.site-feature i,
.site-about-list i,
.site-bills-grid i {
    transition: transform .22s ease, background-color .22s ease, color .22s ease;
}

.site-feature-tabs .nav-link {
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.site-feature-tabs .nav-link:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 118, 110, .3);
    color: #0f766e;
}

.site-feature-tab-content .tab-pane.show.active {
    animation: siteFadeLift .32s ease both;
}

.site-portal-showcase img {
    transition: transform .45s ease;
}

.site-portal-showcase:hover img {
    transform: scale(1.035);
}

.site-phone-card {
    animation: siteFloat 4s ease-in-out infinite;
}

.site-price .btn:hover,
.site-hero .btn:hover,
.site-contact-form .btn:hover {
    transform: translateY(-2px);
}

.site-price-value {
    transition: background-color .22s ease, border-color .22s ease;
}

.site-price:hover .site-price-value {
    border-color: rgba(15, 118, 110, .26);
    background: #f0fdfa;
}

.site-testimonials .carousel-inner {
    overflow: visible;
}

.site-motion-ready .site-reveal {
    opacity: 0;
    transform: translateY(24px);
}

.site-motion-ready .site-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .58s ease var(--reveal-delay, 0ms), transform .58s ease var(--reveal-delay, 0ms);
}

@keyframes siteRise {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes siteFadeLift {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes siteHeroImage {
    from {
        transform: scale(1.08) translateY(var(--hero-shift, 0));
    }
    to {
        transform: scale(1.04) translateY(var(--hero-shift, 0));
    }
}

@keyframes siteHeroVisual {
    from {
        transform: scale(1.04) translateY(var(--hero-shift, 0));
    }
    to {
        transform: scale(1) translateY(var(--hero-shift, 0));
    }
}

@keyframes siteBarGrow {
    from {
        transform: scaleY(.08);
        opacity: .45;
    }
    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes siteBarWave {
    0%,
    100% {
        transform: scaleY(.72);
    }
    35% {
        transform: scaleY(1);
    }
    65% {
        transform: scaleY(.5);
    }
}

@keyframes siteFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes siteScrollDot {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }
    35% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 15px);
    }
}

@keyframes siteWhatsAppPulse {
    0%,
    100% {
        transform: translateY(0);
        box-shadow: 0 16px 34px rgba(15, 23, 42, .22);
    }
    50% {
        transform: translateY(-3px);
        box-shadow: 0 20px 44px rgba(37, 211, 102, .34);
    }
}

@keyframes siteTrialPulse {
    0%,
    100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 14px 30px rgba(20, 184, 166, .34), 0 0 0 0 rgba(250, 204, 21, 0);
    }
    50% {
        transform: translateY(-2px) scale(1.035);
        box-shadow: 0 0 0 9px rgba(250, 204, 21, .42), 0 0 28px rgba(250, 204, 21, .72), 0 18px 42px rgba(20, 184, 166, .46);
    }
}

@media (max-width: 767.98px) {
    .site-brand {
        max-width: calc(100% - 112px);
    }

    .site-brand strong {
        white-space: normal;
        line-height: 1.08;
    }

    .site-mobile-menu {
        max-height: calc(100svh - 68px);
        overflow-y: auto;
    }

    .site-mobile-menu .container {
        padding-top: .75rem !important;
        padding-bottom: .9rem !important;
    }

    .site-mobile-menu a,
    .site-mobile-menu button {
        min-height: 46px;
        background: #f8fafc;
    }

    .site-hero::after {
        background-size: 44px 44px;
        mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .58), transparent);
    }

    .site-hero-carousel img {
        object-position: 58% center;
    }

    .site-hero-content {
        padding-top: 2.35rem;
        padding-bottom: 2.6rem;
    }

    .site-hero-content .row {
        --bs-gutter-y: 1.2rem;
    }

    .site-hero h1 {
        font-size: 2.35rem;
        line-height: 1.03;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .site-rotating-word {
        display: block;
        width: fit-content;
        max-width: 100%;
        min-width: 0;
        margin: .08rem 0;
        overflow-wrap: anywhere;
    }

    .site-hero p {
        margin: 1rem 0;
        font-size: 1rem;
        line-height: 1.55;
    }

    .site-hero .btn-lg {
        width: 100%;
        min-height: 50px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .site-hero-points {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
    }

    .site-hero-points span {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: .58rem .65rem;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 8px;
        background: rgba(255, 255, 255, .1);
        line-height: 1.2;
    }

    .site-hero-proof {
        display: grid;
        grid-template-columns: 1fr;
        gap: .65rem;
        max-width: none;
        margin-right: 0;
        padding: .2rem 0 .5rem;
        overflow: visible;
    }

    .site-hero-proof div {
        width: 100%;
    }

    .site-dashboard-card {
        margin-top: .3rem;
        padding: .95rem;
        box-shadow: 0 22px 46px rgba(0, 0, 0, .24);
    }

    .site-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
    }

    .site-dashboard-grid div {
        padding: .72rem;
    }

    .site-dashboard-grid strong {
        font-size: 1rem;
    }

    .site-bars {
        height: 86px;
        gap: .35rem;
        margin: .8rem 0;
        padding: .65rem;
    }

    .site-dashboard-row {
        padding: .58rem 0;
        gap: .55rem;
        font-size: .86rem;
    }

    .site-dashboard-row-wrap {
        display: none;
    }

    .site-dashboard-actions span {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        padding: .48rem .4rem;
    }

    .site-scroll-cue {
        display: none;
    }

    .site-section {
        padding: 3.1rem 0;
    }

    .site-section h2,
    .site-section-head h2 {
        font-size: 2rem;
        line-height: 1.08;
    }

    .site-section-head {
        margin-bottom: 1.35rem;
    }

    .site-feature-tabs {
        margin-inline: -1rem;
        padding-inline: 1rem;
        scrollbar-width: none;
    }

    .site-feature-tabs::-webkit-scrollbar,
    .site-hero-proof::-webkit-scrollbar {
        display: none;
    }

    .site-feature-panel-head {
        padding: 1rem;
    }

    .site-portal-showcase,
    .site-portal-showcase img {
        min-height: 320px;
    }

    .site-phone-card {
        position: relative;
        right: auto;
        bottom: auto;
        width: auto;
        margin: -5.4rem 1rem 1rem;
        animation: none;
    }

    .site-carousel-control {
        bottom: .2rem;
    }
}

@media (max-width: 420px) {
    .site-hero h1 {
        font-size: 2.05rem;
    }

    .site-hero-points {
        grid-template-columns: 1fr;
    }

    .site-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .site-v2 *,
    .site-v2 *::before,
    .site-v2 *::after {
        animation: none !important;
        transition: none !important;
    }

    .site-motion-ready .site-reveal {
        opacity: 1;
        transform: none;
    }
}

@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: #fff;
    }
}

.member-transaction-history {
    overflow: visible;
}

.member-transaction-list {
    display: grid;
    gap: .65rem;
}

.member-transaction-item {
    overflow: hidden;
    border: 1px solid #dbe5ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

.member-transaction-item summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 18px;
    gap: .75rem;
    align-items: center;
    min-height: 68px;
    padding: .75rem .85rem;
    cursor: pointer;
    list-style: none;
}

.member-transaction-item summary::-webkit-details-marker {
    display: none;
}

.member-transaction-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1.05rem;
}

.member-transaction-icon.is-credit {
    color: #047857;
    background: #dcfce7;
}

.member-transaction-icon.is-debit {
    color: #b91c1c;
    background: #fee2e2;
}

.member-transaction-main {
    min-width: 0;
}

.member-transaction-title,
.member-transaction-subtitle {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-transaction-title {
    color: #111827;
    font-size: .98rem;
    font-weight: 900;
}

.member-transaction-subtitle {
    margin-top: .15rem;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.25;
}

.member-transaction-amount {
    font-size: .98rem;
    font-weight: 900;
    white-space: nowrap;
}

.member-transaction-chevron {
    color: #64748b;
    transition: transform .2s ease;
}

.member-transaction-item[open] .member-transaction-chevron {
    transform: rotate(180deg);
}

.member-transaction-detail {
    display: grid;
    gap: .8rem;
    padding: .8rem .9rem .95rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.member-transaction-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .6rem;
}

.member-transaction-detail-grid > div {
    min-width: 0;
    padding: .7rem;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
}

.member-transaction-detail-grid span {
    display: block;
    color: #64748b;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.member-transaction-detail-grid strong {
    display: block;
    margin-top: .25rem;
    color: #0f172a;
    font-size: .88rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.member-transaction-note {
    margin: 0;
    color: #475569;
    font-size: .86rem;
    line-height: 1.45;
}

.member-transaction-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.member-transaction-actions .btn {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
    font-weight: 800;
}

.member-transaction-empty {
    padding: 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    color: #64748b;
    background: #f8fafc;
    text-align: center;
}

.member-list-pagination {
    margin-top: .9rem;
    padding-top: .75rem;
    border-top: 1px solid #e2e8f0;
}

.member-list-pagination nav {
    display: flex;
    justify-content: center;
}

.member-list-pagination svg {
    width: 1rem;
    height: 1rem;
}

.member-list-pagination .pagination {
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0;
}

.member-list-pagination .page-link {
    border-radius: 8px;
    font-weight: 800;
}

.member-transaction-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.member-notification-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 1rem 1rem;
    padding: .75rem 0 0;
}

.member-pagination-meta {
    color: #64748b;
    font-size: .8rem;
    font-weight: 800;
}

.member-pagination-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    justify-content: flex-end;
}

.member-pagination-buttons a,
.member-pagination-buttons span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: .35rem .65rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #fff;
    color: #0f766e;
    font-size: .8rem;
    font-weight: 900;
    text-decoration: none;
}

.member-pagination-buttons a:hover {
    border-color: #0f766e;
    background: #ecfdf5;
}

.member-pagination-buttons span.active {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
}

.member-pagination-buttons span.disabled,
.member-pagination-buttons span.ellipsis {
    color: #94a3b8;
    cursor: default;
}

@media (max-width: 575.98px) {
    .member-notification-pagination {
        display: grid;
        gap: .55rem;
        margin: 0 .75rem .75rem;
    }

    .member-transaction-pagination {
        display: grid;
        gap: .55rem;
    }

    .member-pagination-meta {
        text-align: center;
    }

    .member-pagination-buttons {
        justify-content: center;
    }

    .member-pagination-buttons a,
    .member-pagination-buttons span {
        min-width: 30px;
        min-height: 30px;
        padding: .3rem .5rem;
        font-size: .72rem;
    }

    .member-transaction-list {
        gap: .5rem;
    }

    .member-transaction-item {
        border-radius: 10px;
        box-shadow: 0 5px 14px rgba(15, 23, 42, .045);
    }

    .member-transaction-item summary {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: .55rem;
        min-height: 56px;
        padding: .55rem .6rem;
    }

    .member-transaction-icon {
        width: 34px;
        height: 34px;
        font-size: .9rem;
    }

    .member-transaction-title {
        font-size: .84rem;
        line-height: 1.2;
    }

    .member-transaction-subtitle {
        font-size: .68rem;
    }

    .member-transaction-amount {
        font-size: .8rem;
    }

    .member-transaction-chevron {
        display: none;
    }

    .member-transaction-detail {
        padding: .65rem;
        gap: .65rem;
    }

    .member-transaction-detail-grid {
        grid-template-columns: 1fr 1fr;
        gap: .45rem;
    }

    .member-transaction-detail-grid > div {
        padding: .55rem;
    }

    .member-transaction-detail-grid span {
        font-size: .62rem;
    }

    .member-transaction-detail-grid strong {
        font-size: .78rem;
    }

    .member-transaction-actions .btn {
        flex: 1 1 auto;
        min-height: 34px;
        justify-content: center;
        font-size: .74rem;
    }

    .member-list-pagination {
        overflow-x: auto;
        padding-bottom: .15rem;
    }

    .member-list-pagination nav {
        justify-content: flex-start;
    }

    .member-list-pagination .pagination {
        flex-wrap: nowrap;
        min-width: max-content;
    }
}

@media (max-width: 991.98px) {
    .member-profile-main-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .member-profile-photo-card {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: .7rem;
        padding: .7rem;
    }

    .member-profile-photo-preview {
        width: 104px;
    }
}

@media (max-width: 575.98px) {
    .member-profile-tab-panel {
        border-radius: 8px;
    }

    .member-profile-main-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .25rem;
        padding: .45rem;
    }

    .member-profile-main-tabs button {
        min-height: 36px;
        padding: .42rem .16rem;
    }

    .member-profile-main-tabs button > span {
        font-size: .68rem;
    }

    .member-profile-main-content {
        padding: .75rem;
    }

    .member-profile-photo-card {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: .6rem;
    }

    .member-profile-photo-preview {
        width: 84px;
    }

    .member-profile-photo-copy strong {
        font-size: .86rem;
        line-height: 1.15;
    }

    .member-profile-photo-copy p,
    .member-profile-photo-feedback {
        font-size: .72rem;
    }

    .member-profile-photo-actions .btn {
        min-height: 32px;
        padding: .3rem .45rem;
        font-size: .7rem;
    }
}

@media (max-width: 767.98px) {
    .operations-tab-head.has-shortcut {
        align-items: center;
        flex-direction: row;
    }

    .operations-tab-head.has-shortcut .operations-tab-actions {
        margin-left: auto;
    }

    .operations-tab-shortcut {
        flex: 0 0 auto;
        width: 2.35rem;
        height: 2.35rem;
    }
}