@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


    :root {
        --bg: #f5f7fb;
        --surface: #ffffff;
        --surface-soft: #eef4f6;
        --text: #17212b;
        --muted: #66727f;
        --line: #d9e1e7;
        --primary: #731f71;
        --primary-dark: #5a1857;
        --primary-rgb: 115, 31, 113;
        --danger: #b42318;
        --danger-bg: #fff1f0;
        --shadow: 0 24px 70px rgba(23, 33, 43, 0.14);
        --shadow-soft: 0 18px 46px rgba(23, 33, 43, 0.09);
        --shadow-card: 0 12px 34px rgba(23, 33, 43, 0.07);

        /* TYPOGRAPHY */

        --font-xs: 12px;
        --font-sm: 13px;
        --font-base: 14px;
        --font-md: 15px;
        --font-lg: 16px;
        --font-xl: 18px;
        --font-2xl: 22px;
        --font-3xl: 28px;
        --font-4xl: 36px;

        --fw-normal: 400;
        --fw-medium: 500;
        --fw-semibold: 600;
        --fw-bold: 700;
        --fw-extrabold: 800;

        font-family: Inter, ui-sans-serif, system-ui,
            -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    }

    * {
        box-sizing: border-box;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    [hidden] {
        display: none !important;
    }

    body {
        margin: 0;
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(var(--primary-rgb), 0.08), transparent 360px),
            var(--bg);
        color: var(--text);
        overflow-x: hidden;

        font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-size: var(--font-md);
        font-weight: var(--fw-normal);
        line-height: 1.5;
    }

    iconify-icon,
    .ui-icon {
        display: inline-block;
        width: 1em;
        height: 1em;
        flex: 0 0 auto;
        vertical-align: -0.125em;
    }

    .client-page {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    a {
        color: var(--primary-dark);
        font-weight: 500;
        text-decoration: none;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
    }

    .auth-page {
        background: #ffffff;
        max-width: 100%;
        overflow-x: hidden;
        width: 100%;
    }

    .auth-page *,
    .auth-page *::before,
    .auth-page *::after {
        max-width: 100%;
    }

    .auth-shell {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        min-height: 100vh;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .auth-content {
        display: grid;
        grid-template-rows: auto 1fr;
        min-width: 0;
        min-height: 100vh;
        max-width: 100%;
        overflow-x: hidden;
        padding: clamp(24px, 5vw, 56px);
        width: 100%;
    }

    .auth-panel {
        align-self: center;
        justify-self: center;
        width: min(100%, 500px);
        padding: clamp(12px, 2vw, 24px) 0;
    }

    .auth-heading {
        margin-bottom: 26px;
        text-align: center;
    }

    .auth-heading h1 {
        color: var(--primary);
        font-weight: 400;
    }

    .auth-logo-link,
    .brand-link {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .auth-logo-link {
        align-self: start;
        justify-self: start;
    }

    .brand-link {
        color: inherit;
        font-size: 18px;
    }

    .nav-logo {
        display: block;
        width: auto;
        height: 44px;
        object-fit: contain;
    }

    .auth-nav-logo {
        height: 54px;
    }

    .auth-visual {
        min-width: 0;
        min-height: 100vh;
        overflow: hidden;
        position: relative;
    }

    .auth-visual img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        object-fit: cover;
        object-position: center;
    }

    .brand-mark {
        display: inline-grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 8px;
        background: var(--primary);
        color: #ffffff;
        font-weight: 600;
    }

    .eyebrow {
        margin: 0 0 4px;
        color: var(--primary-dark);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    h1 {
        margin: 0;
        font-size: clamp(28px, 5vw, 40px);
        line-height: 1.08;
    }

    .form-stack {
        display: grid;
        gap: 18px;
        min-width: 0;
    }

    .form-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }

    label {
        display: grid;
        gap: 8px;
        color: var(--text);
        font-weight: 500;
        min-width: 0;
    }

    label > span:not(.password-control) {
        font-size: 14px;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
        color: var(--text);
        outline: none;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select {
        min-height: 48px;
        padding: 0 14px;
    }

    textarea {
        min-height: 120px;
        padding: 12px 14px;
        resize: vertical;
    }

    input:not([type="checkbox"]):not([type="radio"]):focus,
    select:focus,
    textarea:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.12);
    }

    .password-control {
        position: relative;
        display: block;
    }

    .password-control input {
        padding-right: 52px;
    }

    .password-toggle {
        position: absolute;
        top: 50%;
        right: 10px;
        display: inline-grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        transform: translateY(-50%);
    }

    .password-toggle:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.12);
    }

    .eye-icon {
        position: relative;
        display: block;
        width: 22px;
        height: 14px;
        border: 2px solid currentColor;
        border-radius: 999px 999px 999px 999px / 780px 780px 780px 780px;
    }

    .eye-icon::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        transform: translate(-50%, -50%);
    }

    .password-toggle.is-visible .eye-icon::after {
        content: "";
        position: absolute;
        top: -4px;
        left: 9px;
        width: 2px;
        height: 20px;
        border-radius: 2px;
        background: currentColor;
        transform: rotate(45deg);
    }

    .pin-control {
        display: grid;
        grid-template-columns: repeat(4, minmax(48px, 1fr));
        gap: 10px;
        max-width: 300px;
        width: 100%;
    }

    .pin-box {
        min-width: 0;
        min-height: 58px;
        padding: 0;
        text-align: center;
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0;
    }

    .pin-generate-button {
        justify-self: start;
    }

    .phone-control {
        display: grid;
        grid-template-columns: minmax(126px, 150px) 1fr;
        gap: 10px;
        min-width: 0;
    }

    .native-country-code {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .country-picker {
        position: relative;
    }

    .country-picker-toggle,
    .country-picker-option {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 48px;
        border: 1px solid var(--line);
        background: #ffffff;
        color: var(--text);
        cursor: pointer;
        font: inherit;
    }

    .country-picker-toggle {
        justify-content: flex-start;
        border-radius: 8px;
        padding: 0 14px;
    }

    .country-picker-toggle .country-picker-arrow {
        margin-left: auto;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid var(--muted);
    }

    .country-picker-placeholder {
        color: var(--muted);
    }

    .country-picker-toggle:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.12);
        outline: none;
    }

    .country-picker-menu {
        position: absolute;
        z-index: 10;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        display: none;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 16px 36px rgba(23, 33, 43, 0.16);
    }

    .country-picker.is-open .country-picker-menu {
        display: block;
    }

    .country-picker-option {
        border: 0;
        border-radius: 0;
        padding: 0 12px;
        text-align: left;
    }

    .country-picker-option:hover,
    .country-picker-option[aria-selected="true"] {
        background: var(--surface-soft);
    }

    .country-picker-label {
        display: none;
    }

    .country-flag {
        display: block;
        width: 26px;
        height: 18px;
        flex: 0 0 26px;
        border-radius: 3px;
        object-fit: cover;
        box-shadow: 0 0 0 1px rgba(23, 33, 43, 0.12);
    }

    .button-primary {
        min-height: 50px;
        border: 0;
        border-radius: 8px;
        background: var(--primary);
        color: #ffffff;
        cursor: pointer;
        font-weight: 500;
    }

    .button-primary:hover {
        background: var(--primary-dark);
    }

    button:disabled {
        cursor: not-allowed;
        opacity: 0.55;
    }

    .button-secondary,
    .button-link {
        border: 0;
        background: transparent;
        color: var(--primary-dark);
        cursor: pointer;
        font-weight: 500;
    }

    .button-secondary {
        min-height: 44px;
        padding: 0;
    }

    .button-link {
        padding: 0;
    }

    .form-link {
        margin: 0;
        color: var(--muted);
        text-align: center;
    }

    .alert {
        border-radius: 8px;
        margin-bottom: 18px;
        padding: 12px 14px;
    }

    .alert p {
        margin: 0;
    }

    .alert p + p {
        margin-top: 6px;
    }

    .alert-error {
        background: var(--danger-bg);
        border: 1px solid rgba(180, 35, 24, 0.2);
        color: var(--danger);
    }

    .field-error {
        margin: -2px 0 0;
        color: var(--danger);
        font-size: 13px;
        font-weight: 500;
    }

    .toast-region {
        position: fixed;
        z-index: 1000;
        top: 18px;
        left: 50%;
        display: grid;
        gap: 10px;
        width: min(calc(100% - 32px), 460px);
        transform: translateX(-50%);
    }

    .toast {
        position: relative;
        display: grid;
        gap: 4px;
        min-height: 54px;
        padding: 15px 50px 15px 16px;
        border: 1px solid;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 14px 36px rgba(23, 33, 43, 0.18);
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .toast p {
        margin: 0;
        font-size: 14px;
    }

    .toast a {
        color: inherit;
        text-decoration: underline;
    }

    .toast-success {
        border-color: #a7e5c4;
        color: #087443;
    }

    .toast-error {
        border-color: #f1c1bd;
        color: var(--danger);
    }

    .toast-info {
        border-color: #bfd9f5;
        color: #175a95;
    }

    .toast-close {
        position: absolute;
        top: 10px;
        right: 10px;
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: currentColor;
        cursor: pointer;
        font-size: 22px;
        line-height: 1;
    }

    .toast-close:hover {
        background: rgba(23, 33, 43, 0.06);
    }

    .toast.is-leaving {
        opacity: 0;
        transform: translateY(-8px);
    }

    .alert-success {
        background: #ecfdf5;
        border: 1px solid rgba(var(--primary-rgb), 0.22);
        color: var(--primary-dark);
    }

    .role-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        min-height: 74px;
        padding: 0 clamp(18px, 5vw, 56px);
        background: var(--surface);
        border-bottom: 1px solid var(--line);
    }

    .role-nav {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .role-header-admin .brand-mark {
        background: #334155;
    }

    .admin-page {
        display: grid;
        grid-template-columns: 350px minmax(0, 1fr);
        min-height: 100vh;
        background: #f8f5ff;
        transition: grid-template-columns 180ms ease;
    }

    .admin-page.is-admin-sidebar-collapsed {
        grid-template-columns: 108px minmax(0, 1fr);
    }

    .admin-sidebar {
        position: fixed;
        grid-column: 1;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        display: flex;
        flex-direction: column;
        width: 350px;
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
        background: #ffffff;
        border-right: 1px solid #dde3ec;
    }

    .admin-page.is-admin-sidebar-collapsed .admin-sidebar {
        width: 108px;
    }

    .admin-sidebar-head {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 84px;
        padding: 0 20px;
        border-bottom: 1px solid #dde3ec;
    }

    .admin-logo {
        display: flex;
        align-items: center;
        min-width: 0;
        flex: 1 1 auto;
        color: var(--primary-dark);
        font-size: clamp(36px, 3vw, 48px);
        font-weight: 700;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .admin-logo .nav-logo {
        height: 54px;
        max-width: 170px;
    }

    .admin-sidebar-toggle {
        display: inline-grid;
        place-items: center;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        border: 1px solid rgba(var(--primary-rgb), 0.14);
        border-radius: 14px;
        background: #ffffff;
        color: var(--primary-dark);
        cursor: pointer;
        font-size: 24px;
        transition: background 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .admin-sidebar-toggle:hover {
        background: rgba(var(--primary-rgb), 0.08);
        transform: translateY(-1px);
    }

    .admin-side-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 14px;
        scrollbar-color: rgba(var(--primary-rgb), 0.38) transparent;
        scrollbar-width: thin;
    }

    .admin-side-nav::-webkit-scrollbar {
        width: 8px;
    }

    .admin-side-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .admin-side-nav::-webkit-scrollbar-thumb {
        background: rgba(var(--primary-rgb), 0.28);
        border-radius: 999px;
    }

    .admin-side-list {
        display: grid;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .admin-side-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 16px;
        min-height: 52px;
        padding: 0 18px;
        border-radius: 12px;
        color: #26364d;
        font-size: 15px;
        font-weight: 600;
    }

    .admin-side-label {
        min-width: 0;
    }

    .admin-side-link.is-active {
        background: var(--primary);
        color: #ffffff;
    }

    .admin-side-icon {
        position: relative;
        display: inline-block;
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        color: currentColor;
    }

    .icon-home::before {
        content: "";
        position: absolute;
        inset: 8px 4px 3px;
        border: 2px solid currentColor;
        border-top: 0;
        border-radius: 2px;
    }

    .icon-home::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 4px;
        width: 14px;
        height: 14px;
        border-top: 2px solid currentColor;
        border-left: 2px solid currentColor;
        transform: rotate(45deg);
    }

    .icon-users::before,
    .icon-users::after {
        content: "";
        position: absolute;
        border: 2px solid currentColor;
        border-radius: 50%;
    }

    .icon-users::before {
        top: 1px;
        left: 6px;
        width: 8px;
        height: 8px;
    }

    .icon-users::after {
        right: 1px;
        bottom: 1px;
        left: 1px;
        height: 10px;
        border-bottom: 0;
        border-radius: 12px 12px 0 0;
    }

    .icon-doc {
        border: 2px solid currentColor;
        border-radius: 3px;
    }

    .icon-doc::before {
        content: "";
        position: absolute;
        top: 5px;
        right: 3px;
        left: 3px;
        height: 2px;
        background: currentColor;
        box-shadow: 0 5px 0 currentColor;
    }

    .icon-shield {
        border: 2px solid currentColor;
        border-radius: 12px 12px 8px 8px;
    }

    .icon-shield::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
    }

    .icon-megaphone::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 2px;
        width: 15px;
        height: 11px;
        border: 2px solid currentColor;
        border-left-width: 5px;
        transform: skewY(-12deg);
    }

    .icon-folder::before {
        content: "";
        position: absolute;
        inset: 6px 1px 3px;
        border: 2px solid currentColor;
        border-radius: 3px;
    }

    .icon-folder::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 9px;
        height: 6px;
        border: 2px solid currentColor;
        border-bottom: 0;
        border-radius: 3px 3px 0 0;
    }

    .admin-side-count {
        display: inline-grid;
        place-items: center;
        min-width: 26px;
        height: 26px;
        margin-left: auto;
        border-radius: 999px;
        background: var(--primary);
        color: #ffffff;
        font-size: 13px;
    }

    .admin-page.is-admin-sidebar-collapsed .admin-sidebar-head {
        justify-content: center;
        padding: 0 14px;
    }

    .admin-page.is-admin-sidebar-collapsed .admin-logo {
        display: none;
    }

    .admin-page.is-admin-sidebar-collapsed .admin-sidebar-toggle {
        width: 50px;
        height: 50px;
        border-radius: 18px;
        font-size: 28px;
    }

    .admin-page.is-admin-sidebar-collapsed .admin-side-nav {
        padding: 14px 10px;
    }

    .admin-page.is-admin-sidebar-collapsed .admin-side-list {
        gap: 12px;
    }

    .admin-page.is-admin-sidebar-collapsed .admin-side-link {
        justify-content: center;
        min-height: 62px;
        padding: 0;
        border-radius: 18px;
    }

    .admin-page.is-admin-sidebar-collapsed .admin-side-link::after {
        content: attr(data-tooltip);
        position: absolute;
        top: 50%;
        left: calc(100% + 12px);
        z-index: 40;
        min-width: max-content;
        padding: 8px 10px;
        border-radius: 10px;
        background: #17212b;
        color: #ffffff;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        opacity: 0;
        pointer-events: none;
        transform: translate(-6px, -50%);
        transition: opacity 140ms ease, transform 140ms ease;
        white-space: nowrap;
    }

    .admin-page.is-admin-sidebar-collapsed .admin-side-link:hover::after,
    .admin-page.is-admin-sidebar-collapsed .admin-side-link:focus-visible::after {
        opacity: 1;
        transform: translate(0, -50%);
    }

    .admin-page.is-admin-sidebar-collapsed .admin-side-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 28px;
    }

    .admin-page.is-admin-sidebar-collapsed .admin-side-label,
    .admin-page.is-admin-sidebar-collapsed .admin-side-chevron,
    .admin-page.is-admin-sidebar-collapsed .admin-logout {
        display: none;
    }

    .admin-page.is-admin-sidebar-collapsed .admin-side-count {
        position: absolute;
        top: 8px;
        right: 8px;
        min-width: 24px;
        min-height: 24px;
        padding: 0 6px;
        font-size: 12px;
    }

    .admin-side-chevron {
        width: 8px;
        height: 8px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        opacity: 0.48;
        transform: rotate(45deg);
    }

    .admin-logout {
        display: flex;
        align-items: center;
        gap: 92px;
        flex: 0 0 auto;
        min-height: 54px;
        margin: 0 14px 16px;
        padding: 0 18px;
        border: 1px solid #dde3ec;
        border-radius: 14px;
        color: #cc1f1a;
        font-weight: 600;
    }

    .admin-shell {
        grid-column: 2;
        min-width: 0;
    }

    .admin-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 84px;
        padding: 0 20px;
        background: #ffffff;
        border-bottom: 1px solid #dde3ec;
    }

    .admin-content {
        width: min(100% - 48px, 1330px);
        margin: 0 auto;
        padding: clamp(36px, 5vw, 64px) 0;
    }

    .admin-overview {
        display: grid;
        gap: 32px;
    }

    .admin-overview-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 24px;
    }

    .admin-head-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 12px;
    }

    .access-tabs {
        display: grid;
        gap: 18px;
        justify-items: center;
    }

    .access-tab-list {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 2px;
        padding: 6px;
        width: min(100%, 920px);
        overflow-x: auto;
        border: 1px solid rgba(115, 31, 113, 0.12);
        border-radius: 12px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
        scrollbar-width: none;
    }

    .access-tab-list::-webkit-scrollbar {
        display: none;
    }

    .access-tab-list .js-tab-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1 0 max-content;
        min-height: 42px;
        padding: 0 16px;
        border: 1px solid transparent;
        border-radius: 8px;
        color: #475467;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.1;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
    }

    .access-tab-list .js-tab-trigger.is-active {
        border-color: rgba(var(--primary-rgb), 0.18);
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-dark);
    }

    .access-tab-panel {
        scroll-margin-top: 20px;
        width: min(100%, 920px);
    }

    .permission-panel {
        gap: 16px;
    }

    .permission-table-wrap {
        overflow-x: auto;
        border: 1px solid #e4e7ec;
        border-radius: 8px;
        background: #ffffff;
    }

    .permission-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 640px;
    }

    .permission-table th,
    .permission-table td {
        padding: 12px 14px;
        border-bottom: 1px solid #eef2f6;
        text-align: left;
        vertical-align: middle;
    }

    .permission-table thead th {
        color: #475467;
        background: #f8fafc;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .permission-table th:last-child,
    .permission-table td:last-child {
        width: 96px;
        text-align: center;
    }

    .permission-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .permission-group-row th {
        padding: 10px 14px;
        color: var(--primary-dark);
        background: rgba(var(--primary-rgb), 0.06);
        border-bottom-color: rgba(var(--primary-rgb), 0.1);
        font-size: 13px;
        font-weight: 700;
    }

    .permission-table td strong {
        display: block;
        color: #101828;
        font-size: 14px;
        line-height: 1.35;
    }

    .permission-table td span {
        display: block;
        margin-top: 3px;
        color: #667085;
        font-size: 12px;
        line-height: 1.4;
    }

    .permission-check {
        display: inline-grid;
        place-items: center;
    }

    .permission-check input[type="checkbox"] {
        width: 20px;
        height: 20px;
        margin: 0;
        accent-color: var(--primary);
    }

    .permission-check input[type="checkbox"]:disabled {
        cursor: not-allowed;
        opacity: 0.55;
    }

    .admin-pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 16px;
        color: #667085;
        font-size: 14px;
    }

    .admin-pagination div {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    .admin-pagination .button-primary,
    .admin-pagination .button-secondary {
        min-height: 36px;
        padding: 0 12px;
    }

    .loan-list-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 14px 0 12px;
    }

    .loan-list-toolbar > span {
        color: #667085;
        font-size: 14px;
        font-weight: 700;
    }

    .loan-export-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        margin: 0;
    }

    .loan-selected-export-form {
        margin: 0;
    }

    .loan-desktop-table input[type="checkbox"],
    .loan-mobile-select input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--primary);
    }

    .loan-mobile-select {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #667085;
        font-size: 13px;
        font-weight: 700;
    }

    .contribution-record-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 14px 0 12px;
    }

    .contribution-record-toolbar > span {
        color: #667085;
        font-size: 14px;
        font-weight: 700;
    }

    .contribution-export-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    .contribution-selected-export-form {
        margin: 0;
    }

    .contribution-record-select {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #667085;
        font-size: 13px;
        font-weight: 700;
    }

    .contribution-record-select input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--primary);
    }

    .investment-list-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 14px 0 12px;
    }

    .investment-list-toolbar > span {
        color: #667085;
        font-size: 14px;
        font-weight: 700;
    }

    .investment-export-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    .investment-admin-page input[type="checkbox"][name="selected_investments[]"] {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--primary);
    }

    .transfer-export-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    .transfer-record-select {
        display: inline-grid;
        place-items: center;
    }

    .transfer-record-select input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--primary);
    }

    @media (max-width: 640px) {
        .admin-pagination {
            align-items: stretch;
            flex-direction: column;
        }

        .admin-pagination div {
            justify-content: flex-start;
        }

        .loan-export-actions {
            justify-content: flex-start;
        }

        .loan-list-toolbar {
            align-items: stretch;
            flex-direction: column;
        }

        .contribution-record-toolbar {
            align-items: stretch;
            flex-direction: column;
        }

        .contribution-export-actions {
            justify-content: flex-start;
        }

        .investment-list-toolbar {
            align-items: stretch;
            flex-direction: column;
        }

        .investment-export-actions {
            justify-content: flex-start;
        }

        .transfer-export-actions {
            justify-content: flex-start;
        }
    }

    .admin-overview-head h1 {
        font-size: clamp(32px, 3vw, 42px);
    }

    .admin-overview-head p {
        margin: 14px 0 0;
        color: #667085;
    }

    .admin-manage-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 136px;
        min-height: 54px;
        padding: 0 22px;
        border-radius: 999px;
        background: var(--primary);
        color: #ffffff;
        box-shadow: 0 16px 34px rgba(var(--primary-rgb), 0.18);
    }

    .admin-stat-grid {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .admin-stat-card {
        display: grid;
        gap: 18px;
        min-height: 120px;
        padding: 22px 20px;
        border: 1px solid #dde3ec;
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 14px 28px rgba(23, 33, 43, 0.06);
    }

    .admin-stat-card span {
        color: #475467;
        font-size: 14px;
    }

    .admin-stat-card strong {
        color: #020b24;
        font-size: 30px;
        line-height: 1;
    }

    .dashboard-visual-grid {
        display: grid;
        gap: 16px;
        grid-template-columns: minmax(240px, 0.75fr) repeat(2, minmax(0, 1fr));
    }

    .dashboard-chart-card {
        display: grid;
        gap: 20px;
        align-content: start;
        min-width: 0;
        padding: 22px;
        border: 1px solid rgba(115, 31, 113, 0.12);
        border-radius: 18px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .dashboard-chart-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
    }

    .dashboard-chart-head span {
        color: #475467;
        font-size: 14px;
    }

    .dashboard-chart-head strong {
        color: #020b24;
        font-size: 20px;
        line-height: 1.1;
        text-align: right;
    }

    .dashboard-donut {
        --chart-value: 0;
        display: grid;
        place-items: center;
        justify-self: center;
        width: min(180px, 70vw);
        aspect-ratio: 1;
        border-radius: 50%;
        background:
            radial-gradient(circle closest-side, #ffffff 66%, transparent 67%),
            conic-gradient(var(--primary) calc(var(--chart-value) * 1%), #dfe6ea 0);
    }

    .dashboard-donut span {
        color: var(--primary-dark);
        font-size: 30px;
        font-weight: 700;
    }

    .dashboard-chart-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;
        color: #475467;
        font-size: 13px;
    }

    .dashboard-chart-legend span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .legend-dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: #dfe6ea;
    }

    .legend-dot.is-primary {
        background: var(--primary);
    }

    .dashboard-bars {
        display: grid;
        gap: 14px;
    }

    .dashboard-bar-row {
        display: grid;
        grid-template-columns: minmax(112px, 0.85fr) minmax(120px, 1.4fr) minmax(56px, auto);
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .dashboard-bar-row span {
        min-width: 0;
        color: #475467;
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .dashboard-bar-row strong {
        color: #020b24;
        font-size: 14px;
        text-align: right;
        white-space: nowrap;
    }

    .dashboard-bar-track {
        height: 12px;
        overflow: hidden;
        border-radius: 999px;
        background: #e9eef4;
    }

    .dashboard-bar-track i {
        display: block;
        min-width: 4px;
        max-width: 100%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--primary), #c94f79);
    }

    .dashboard-money-bars .dashboard-bar-track i {
        background: linear-gradient(90deg, #0f8b6f, #f2a23a);
    }

    .admin-welcome-card {
        position: relative;
        min-height: clamp(360px, 52vw, 520px);
        overflow: hidden;
        border-radius: 28px 28px 0 0;
        background:
            radial-gradient(circle at 10% 42%, rgba(255, 255, 255, 0.08), transparent 170px),
            linear-gradient(135deg, var(--primary-dark), #2f1230);
        color: #ffffff;
    }

    .admin-welcome-copy {
        position: relative;
        z-index: 2;
        display: grid;
        justify-items: center;
        padding-top: clamp(54px, 8vw, 86px);
        color: #ffdc5c;
        text-align: center;
    }

    .admin-welcome-copy span {
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(72px, 11vw, 160px);
        font-style: italic;
        line-height: 0.8;
    }

    .admin-welcome-copy em {
        margin-top: 10px;
        color: #ffffff;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(46px, 8vw, 96px);
        line-height: 0.8;
    }

    .admin-welcome-copy strong {
        margin-top: 34px;
        color: #ffffff;
        font-size: clamp(44px, 8vw, 82px);
        text-transform: uppercase;
    }

    .admin-welcome-mark {
        position: absolute;
        left: clamp(22px, 5vw, 70px);
        bottom: clamp(22px, 5vw, 70px);
        z-index: 2;
        display: grid;
        place-items: center;
        width: clamp(94px, 13vw, 156px);
        height: clamp(94px, 13vw, 156px);
        border-radius: 28px;
        background: #ffffff;
        color: var(--primary);
        font-size: clamp(54px, 8vw, 92px);
        font-weight: 700;
        transform: rotate(-38deg);
    }

    .admin-welcome-ribbon {
        position: absolute;
        top: -16px;
        right: -68px;
        width: clamp(260px, 28vw, 420px);
        height: 86px;
        background: #ffdc5c;
        transform: rotate(-47deg);
        box-shadow: 120px 140px 0 rgba(255, 220, 92, 0.82);
    }

    .client-header {
        display: grid;
        grid-template-columns: minmax(170px, 1fr) auto minmax(220px, 1fr);
        align-items: center;
        gap: 24px;
        min-height: 78px;
        padding: 0 clamp(18px, 5vw, 56px);
        background: var(--surface);
        border-bottom: 1px solid var(--line);
    }

    .client-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        justify-self: start;
        color: var(--primary-dark);
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 0;
    }

    .client-brand .nav-logo {
        max-width: 160px;
    }

    .client-main-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }

    .client-nav-pill {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 136px;
        min-height: 42px;
        padding: 0 26px;
        border-radius: 999px;
        background: #f1f4f8;
        color: #4b5563;
        box-shadow: inset 0 0 0 1px rgba(23, 33, 43, 0.02);
    }

    .client-nav-pill.is-active {
        background: var(--primary);
        color: #ffffff;
        box-shadow: 0 14px 28px rgba(var(--primary-rgb), 0.22);
    }

    .client-nav-pill.is-muted {
        color: #8a94a3;
    }

    .client-nav-badge {
        position: absolute;
        top: -13px;
        right: -10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        min-height: 20px;
        padding: 0 8px;
        border-radius: 999px;
        background: var(--primary-dark);
        color: #ffffff;
        font-size: 11px;
        line-height: 1;
    }

    .client-userbar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 14px;
    }

    .client-notification,
    .client-avatar {
        position: relative;
        display: inline-grid;
        place-items: center;
        width: 54px;
        height: 54px;
        border: 1px solid #e2e8f0;
        border-radius: 50%;
        background: #ffffff;
    }

    .client-notification:hover,
    .client-avatar:hover {
        border-color: rgba(var(--primary-rgb), 0.28);
    }

    .client-notification span {
        position: relative;
        width: 18px;
        height: 19px;
        border-radius: 10px 10px 7px 7px;
        background: #000000;
    }

    .client-notification span::before {
        content: "";
        position: absolute;
        top: -4px;
        left: 50%;
        width: 8px;
        height: 6px;
        border-radius: 8px 8px 0 0;
        background: #000000;
        transform: translateX(-50%);
    }

    .client-notification span::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 50%;
        width: 8px;
        height: 4px;
        border-radius: 0 0 8px 8px;
        background: #000000;
        transform: translateX(-50%);
    }

    .client-user-summary {
        display: grid;
        gap: 2px;
        border: 0;
        background: transparent;
        color: var(--text);
        cursor: pointer;
        font: inherit;
        text-align: left;
    }

    .client-user-name {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.15;
    }

    .client-user-role {
        color: #667085;
        font-size: 14px;
        line-height: 1.15;
    }

    .client-avatar {
        overflow: hidden;
        border-color: #101828;
        cursor: pointer;
        background: #ffffff;
    }

    .user-head-icon {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .client-menu-panel {
        position: absolute;
        z-index: 30;
        top: calc(100% + 14px);
        right: 0;
        width: 280px;
        overflow: hidden;
        border: 1px solid #e4e7ec;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 20px 60px rgba(23, 33, 43, 0.18);
    }

    .client-menu-head {
        display: grid;
        gap: 8px;
        padding: 18px 20px 16px;
    }

    .client-menu-head strong {
        color: var(--text);
        font-size: 14px;
        font-weight: 600;
    }

    .client-menu-head span {
        color: #667085;
        font-size: 13px;
    }

    .client-menu-item {
        display: flex;
        align-items: center;
        gap: 16px;
        min-height: 52px;
        padding: 0 20px;
        border-top: 1px solid #eef2f6;
        color: #344054;
        font-size: 15px;
        font-weight: 600;
    }

    .client-menu-item:hover {
        background: #f8fafc;
        color: var(--primary);
    }

    .client-menu-icon {
        position: relative;
        width: 20px;
        height: 20px;
        color: #344054;
    }

    .icon-profile::before {
        content: "";
        position: absolute;
        top: 1px;
        left: 6px;
        width: 8px;
        height: 8px;
        border: 2px solid currentColor;
        border-radius: 50%;
    }

    .icon-profile::after {
        content: "";
        position: absolute;
        right: 1px;
        bottom: 0;
        left: 1px;
        height: 9px;
        border: 2px solid currentColor;
        border-bottom: 0;
        border-radius: 12px 12px 0 0;
    }

    .icon-location {
        border: 2px solid currentColor;
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);
    }

    .icon-location::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        width: 6px;
        height: 6px;
        border: 2px solid currentColor;
        border-radius: 50%;
    }

    .icon-settings {
        border: 2px solid currentColor;
        border-radius: 50%;
    }

    .icon-settings::before {
        content: "";
        position: absolute;
        inset: 5px;
        border: 2px solid currentColor;
        border-radius: 50%;
    }

    .icon-settings::after {
        content: "";
        position: absolute;
        top: -5px;
        left: 7px;
        width: 2px;
        height: 28px;
        border-radius: 2px;
        background: currentColor;
        box-shadow: 0 0 0 0 currentColor;
        transform: rotate(45deg);
    }

    .icon-logout::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 1px;
        width: 12px;
        height: 10px;
        border: 2px solid currentColor;
        border-right: 0;
        border-radius: 2px;
    }

    .icon-logout::after {
        content: "";
        position: absolute;
        top: 8px;
        right: 1px;
        width: 12px;
        height: 2px;
        background: currentColor;
        box-shadow: 4px -4px 0 -1px currentColor, 4px 4px 0 -1px currentColor;
    }

    .client-logout {
        display: none;
    }

    .client-footer {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 18px;
        min-height: 68px;
        padding: 0 clamp(18px, 5vw, 30px);
        background: #242424;
        color: #ffffff;
        font-size: 12px;
    }

    .client-footer p {
        margin: 0;
    }

    .client-footer strong {
        font-weight: 600;
    }

    .client-footer span {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        margin-left: 10px;
        padding: 0 14px;
        border-radius: 999px;
        background: #ff5b21;
        color: #ffffff;
        font-weight: 600;
    }

    .dashboard-shell {
        flex: 1;
        width: min(100% - 32px, 1120px);
        margin: 0 auto;
        padding: clamp(28px, 6vw, 70px) 0;
    }

    .dashboard-shell:has(.client-dashboard-home) {
        display: flex;
        align-items: stretch;
        padding: clamp(8px, 1.4vh, 14px) 0;
    }

    .dashboard-hero {
        display: grid;
        gap: 12px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: clamp(24px, 5vw, 46px);
    }

    .client-dashboard-home {
        gap: clamp(8px, 1.4vh, 14px);
        width: 100%;
        padding: clamp(12px, 2vw, 18px);
        background:
            linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
        box-shadow: var(--shadow-card);
    }

    .client-dashboard-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: start;
    }

    .client-dashboard-head h1 {
        max-width: 760px;
        font-size: clamp(22px, 2.5vw, 30px);
    }

    .client-dashboard-status {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        min-width: 190px;
        padding: 10px 12px;
        border: 1px solid rgba(var(--primary-rgb), 0.14);
        border-radius: 8px;
        background: rgba(var(--primary-rgb), 0.04);
    }

    .client-dashboard-status span,
    .client-summary-card span {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.35;
    }

    .client-dashboard-status strong {
        color: var(--text);
        font-size: 15px;
        line-height: 1.35;
    }

    .client-dashboard-status .client-rating-stars {
        color: #d19100;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .client-membership-banner {
        display: block;
        overflow: hidden;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 16px 34px rgba(var(--primary-rgb), 0.12);
    }

    .client-membership-banner picture {
        display: block;
    }

    .client-membership-banner img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    .client-action-tiles {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .client-action-tile {
        align-content: center;
        align-items: center;
        aspect-ratio: 1 / 0.78;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(23, 33, 43, 0.05);
        color: var(--text);
        display: grid;
        gap: 8px;
        justify-items: center;
        min-height: clamp(80px, 12vh, 104px);
        padding: 10px 8px;
        text-align: center;
        transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
    }

    .client-action-tile:hover {
        border-color: rgba(var(--primary-rgb), 0.34);
        background: rgba(var(--primary-rgb), 0.035);
        box-shadow: 0 16px 34px rgba(var(--primary-rgb), 0.12);
        transform: translateY(-2px);
    }

    .client-action-icon {
        align-items: center;
        background: rgba(var(--primary-rgb), 0.1);
        border-radius: 8px;
        color: var(--primary-dark);
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 26px;
        height: 44px;
        justify-content: center;
        width: 44px;
    }

    .client-action-tile strong {
        color: var(--text);
        font-size: 15px;
        line-height: 1.25;
        max-width: 96px;
        overflow-wrap: anywhere;
        text-align: center;
        text-wrap: balance;
    }

    .client-dashboard-summary {
        display: grid;
        grid-template-columns: minmax(0, 260px);
    }

    .client-summary-card {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 58px;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface-soft);
    }

    .client-summary-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        background: #ffffff;
        color: var(--primary-dark);
        font-size: 21px;
    }

    .client-summary-card div {
        display: grid;
        gap: 2px;
    }

    .client-summary-card strong {
        color: var(--primary-dark);
        font-size: 22px;
        line-height: 1;
    }

    .membership-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
        gap: clamp(24px, 4vw, 40px);
        align-items: center;
        width: min(100%, 980px);
        margin: 0 auto;
        padding: clamp(25px, 5vw, 44px);
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--surface);
        box-shadow: 0 15px 32px rgba(23, 33, 43, 0.05);
    }

    .membership-content {
        display: grid;
        gap: 26px;
        min-width: 0;
    }

    .membership-visual {
        margin: 0;
    }

    .membership-visual img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 14px;
        object-fit: cover;
    }

    .membership-head {
        display: grid;
        gap: 12px;
    }

    .membership-head h1 {
        margin: 0;
        font-size: clamp(28px, 4vw, 38px);
    }

    .membership-status {
        display: grid;
        gap: 8px;
        padding: 18px 20px;
        border: 1px solid;
        border-radius: 12px;
    }

    .membership-status p {
        margin: 0;
    }

    .membership-status.is-pending {
        border-color: #f7d99b;
        background: #fffbeb;
        color: #925c00;
    }

    .membership-status.is-approved {
        border-color: #a7e5c4;
        background: #ecfdf3;
        color: #087443;
    }

    .membership-status.is-rejected {
        border-color: #f1c1bd;
        background: var(--danger-bg);
        color: var(--danger);
    }

    .membership-form {
        display: grid;
        gap: 22px;
    }

    .membership-form small {
        color: var(--muted);
    }

    .membership-submit {
        padding: 0 22px;
        justify-self: start;
    }

    .membership-action-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: max-content;
        min-height: 48px;
        padding: 0 22px;
        border-radius: 8px;
        background: var(--primary);
        color: #ffffff;
    }

    .client-nav-soon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 18px;
        padding: 0 7px;
        border-radius: 999px;
        background: #ff5b21;
        color: #ffffff;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        text-transform: uppercase;
    }

    .coming-soon-page {
        display: grid;
        place-items: center;
        min-height: min(560px, calc(100vh - 220px));
    }

    .coming-soon-hero {
        width: min(100%, 560px);
        display: grid;
        justify-items: start;
        gap: 14px;
        padding: clamp(24px, 5vw, 42px);
        border: 1px solid rgba(var(--primary-rgb), 0.14);
        border-radius: 8px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .coming-soon-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        border-radius: 8px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 30px;
    }

    .coming-soon-hero h1 {
        margin: 0;
        font-size: clamp(30px, 5vw, 46px);
        letter-spacing: 0;
    }

    .coming-soon-hero .muted {
        margin: 0 0 8px;
    }

    .kyc-panel {
        max-width: 760px;
    }

    .secure-file-field {
        padding: 16px;
        border: 1px dashed var(--line);
        border-radius: 10px;
        background: #fafbfc;
    }

    .secure-file-field input[type="file"] {
        padding: 10px;
        background: #ffffff;
    }

    .secure-file-field small {
        color: var(--muted);
        font-size: 12px;
    }

    .secure-file-current {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
        color: var(--muted);
        font-size: 14px;
    }

    .secure-file-current a {
        text-decoration: underline;
    }

    .settings-panel {
        display: grid;
        gap: 24px;
        max-width: 680px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: clamp(24px, 5vw, 42px);
    }

    .client-page .settings-panel {
        width: min(100%, 680px);
        margin: 0 auto;
    }

    .next-of-kin-card {
        display: grid;
        gap: 22px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface-soft);
        padding: 22px;
    }

    .next-of-kin-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
    }

    .next-of-kin-card-head h2 {
        margin: 4px 0 0;
        color: var(--text);
        font-size: 22px;
    }

    .next-of-kin-details {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin: 0;
    }

    .next-of-kin-details dt {
        margin-bottom: 6px;
        color: var(--muted);
        font-size: 13px;
    }

    .next-of-kin-details dd {
        margin: 0;
        color: var(--text);
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .next-of-kin-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .next-of-kin-actions form {
        margin: 0;
    }

    .button-secondary.button-danger {
        border-color: rgba(180, 35, 24, 0.22);
        color: var(--danger);
    }

    .button-secondary.button-danger:hover {
        background: var(--danger-bg);
        border-color: rgba(180, 35, 24, 0.38);
    }

    .settings-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding-top: 20px;
        border-top: 1px solid var(--line);
    }

    .settings-form-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .settings-actions h2 {
        margin: 0 0 8px;
        font-size: 22px;
    }

    .settings-action-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 16px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
    }

    .avatar-form {
        padding-bottom: 22px;
        border-bottom: 1px solid var(--line);
    }

    .avatar-upload-row {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .profile-avatar-preview {
        display: grid;
        place-items: center;
        width: 104px;
        height: 104px;
        flex: 0 0 104px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--surface-soft);
        color: var(--primary-dark);
        font-size: 36px;
        font-weight: 700;
    }

    .profile-avatar-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .user-profile-page {
        display: grid;
        gap: 1rem;
    }

    .user-profile-hero {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .user-profile-hero h1 {
        margin: 0.2rem 0;
    }

    .user-profile-avatar {
        width: 96px;
        height: 96px;
        border-radius: 28px;
        overflow: hidden;
        display: grid;
        place-items: center;
        background: var(--surface-strong);
        color: var(--accent);
        font-size: 2.2rem;
        font-weight: 800;
        flex: 0 0 auto;
    }

    .user-profile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .avatar-upload-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .avatar-file-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 16px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
        cursor: pointer;
    }

    .avatar-file-button input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .avatar-cropper {
        position: fixed;
        z-index: 80;
        inset: 0;
        display: grid;
        place-items: center;
        padding: 20px;
        background: rgba(23, 33, 43, 0.56);
    }

    .avatar-cropper-panel {
        display: grid;
        gap: 18px;
        width: min(100%, 390px);
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
        padding: 22px;
        box-shadow: var(--shadow);
    }

    .avatar-cropper-preview {
        width: min(100%, 312px);
        aspect-ratio: 1;
        justify-self: center;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: #f8fafc;
        cursor: grab;
    }

    .avatar-cropper-preview:active {
        cursor: grabbing;
    }

    .avatar-cropper-preview canvas {
        display: block;
        width: 100%;
        height: 100%;
    }

    .avatar-zoom-control {
        gap: 10px;
    }

    .avatar-zoom-control input {
        min-height: 0;
        padding: 0;
    }

    .avatar-cropper-actions {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr 1fr;
    }

    .admin-requests {
        display: grid;
        gap: 30px;
    }

    .request-count {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
        padding: 0 20px;
        border-radius: 999px;
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-dark);
        font-weight: 600;
    }

    .request-list {
        display: grid;
        gap: 18px;
    }

    .request-empty,
    .request-card {
        border: 1px solid #dde3ec;
        border-radius: 18px;
        background: #ffffff;
        padding: clamp(20px, 3vw, 26px);
    }

    .request-empty {
        color: var(--muted);
    }

    .request-card {
        display: grid;
        gap: 18px;
    }

    .shadow-create-card form {
        max-width: 580px;
    }

    .agent-member-list {
        display: grid;
        gap: 12px;
        margin-top: 18px;
    }

    .agent-member-row {
        align-items: center;
        border-top: 1px solid var(--line);
        display: flex;
        gap: 14px;
        justify-content: space-between;
        padding-top: 12px;
    }

    .agent-member-row small {
        color: var(--muted);
        display: block;
        margin-top: 4px;
    }

    .agent-member-row button {
        min-height: 42px;
        padding: 8px 16px;
    }

    .account-mode-card {
        background: #f7fafc;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 20px;
    }

    .account-mode-card h2 {
        font-size: 22px;
        margin: 0 0 8px;
    }

    .transfer-page,
    .transfer-history,
    .capital-page,
    .capital-history,
    .loan-page,
    .loan-history {
        display: grid;
        gap: 24px;
    }

    .transfer-builder {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }

    .loan-builder {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }

    .loan-step-shell {
        display: grid;
        gap: 18px;
    }

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

    .loan-step-trigger {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 58px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
        color: var(--muted);
        cursor: pointer;
        padding: 10px 14px;
        text-align: left;
    }

    .loan-step-trigger span {
        display: inline-grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--surface-soft);
        color: var(--muted);
        font-weight: 700;
    }

    .loan-step-trigger strong {
        color: inherit;
        font-size: 14px;
    }

    .loan-step-trigger.is-active {
        border-color: var(--primary);
        color: var(--primary-dark);
        box-shadow: 0 12px 30px rgba(var(--primary-rgb), 0.1);
    }

    .loan-step-trigger.is-active span,
    .loan-step-trigger.is-complete span {
        background: var(--primary);
        color: #ffffff;
    }

    .loan-step-trigger:disabled {
        cursor: not-allowed;
        opacity: 0.55;
    }

    .loan-step-panels {
        display: grid;
    }

    .loan-step-panel {
        display: none;
        min-height: 420px;
    }

    .loan-step-panel.is-active {
        display: grid;
        align-content: start;
        gap: 22px;
        width: 100%;
    }

    .loan-step-head {
        align-items: center;
        display: flex;
        gap: 14px;
    }

    .loan-step-head h2 {
        margin: 0;
    }

    .loan-step-page-number {
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: var(--primary);
        color: #ffffff;
        font-size: 22px;
        font-weight: 800;
        line-height: 1;
    }

    .loan-step-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: flex-end;
    }

    .loan-builder h2,
    .loan-history h2,
    .loan-filter-card h2 {
        margin: 0;
    }

    .transfer-builder h2,
    .transfer-history h2,
    .transfer-secret h2 {
        margin: 0;
    }

    .transfer-secret {
        border: 1px solid #b7e2c9;
        border-radius: 18px;
        background: #ecfdf3;
        padding: clamp(18px, 3vw, 26px);
    }

    .transfer-secret p {
        margin: 8px 0 0;
    }

    .transfer-secret strong {
        color: #087443;
        font-size: 26px;
        letter-spacing: 0.08em;
    }

    .recipient-results {
        display: grid;
        gap: 10px;
    }

    .recipient-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        border: 1px solid #dde3ec;
        border-radius: 10px;
        padding: 12px 14px;
        color: var(--text);
        text-decoration: none;
    }

    .recipient-main {
        display: grid;
        gap: 5px;
        min-width: 0;
    }

    .recipient-option:hover {
        border-color: var(--primary);
        background: var(--surface-soft);
    }

    .recipient-option span,
    .transfer-selection span {
        color: var(--muted);
        font-size: 14px;
    }

    .transfer-selection,
    .transfer-payout-value {
        margin: 0;
    }

    .guarantor-summary,
    .loan-review-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guarantor-summary > div,
    .loan-review-grid > div {
        display: grid;
        gap: 4px;
        min-width: 0;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
        padding: 14px;
    }

    .guarantor-summary span,
    .loan-review-grid span {
        color: var(--muted);
        font-size: 13px;
    }

    .guarantor-summary small,
    .loan-review-grid small {
        color: var(--muted);
    }

    .guarantor-rating,
    .guarantor-rating-card {
        color: var(--muted);
    }

    .guarantor-rating {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        gap: 8px;
        border-radius: 999px;
        background: var(--surface-soft);
        padding: 6px 10px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }

    .guarantor-rating-label {
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
    }

    .guarantor-rating-card {
        align-content: center;
    }

    .guarantor-stars {
        color: #d19100;
        font-size: 16px;
        letter-spacing: 0;
    }

    .credibility-legend {
        display: grid;
        gap: 4px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface-soft);
        padding: 12px 14px;
    }

    .credibility-legend > span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .credibility-legend p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
    }

    .credibility-legend strong {
        color: #d19100;
        letter-spacing: 0;
    }

    .member-credibility-card {
        align-items: center;
        display: grid;
        gap: 14px;
        grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
    }

    .member-credibility-card > div {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

    .member-credibility-card span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 600;
    }

    .member-credibility-card strong {
        color: var(--text);
    }

    .member-credibility-stars {
        color: #d19100 !important;
        font-size: 20px;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .transfer-calculation {
        display: grid;
        gap: 10px;
        border-radius: 10px;
        background: var(--surface-soft);
        padding: 14px;
    }

    .transfer-calculation p {
        display: flex;
        justify-content: space-between;
        margin: 0;
    }

    .transfer-totals {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .transfer-totals span {
        display: grid;
        gap: 4px;
        color: var(--muted);
    }

    .transfer-totals strong {
        color: var(--text);
    }

    .capital-year-filter {
        width: min(180px, 100%);
    }

    .capital-summary {
        max-width: 760px;
    }

    .capital-values {
        display: flex;
        flex-wrap: wrap;
        gap: 36px;
        padding: 16px;
        border-radius: 10px;
        background: var(--surface-soft);
    }

    .capital-values span {
        display: grid;
        gap: 5px;
        color: var(--muted);
    }

    .capital-values strong {
        color: var(--text);
        font-size: 20px;
    }

    .capital-history {
        max-width: 760px;
    }

    .capital-history h2,
    .capital-admin-tools h2,
    .capital-records h2 {
        margin: 0;
    }

    .capital-history-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .capital-history-item div {
        display: flex;
        align-items: baseline;
        gap: 20px;
    }

    .capital-history-item strong {
        font-size: 20px;
    }

    .capital-admin-tools {
        display: grid;
        grid-template-columns: repeat(2, minmax(260px, 1fr));
        gap: 20px;
    }

    .project-workspace {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(3, minmax(250px, 1fr));
        margin-top: 20px;
    }

    .project-balance-value {
        color: #087443;
        font-size: clamp(26px, 3vw, 38px);
    }

    .project-search-result,
    .project-add-row,
    .project-ledger-row {
        align-items: center;
        border-top: 1px solid #eaecf0;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        margin: 12px 0 0;
        padding-top: 12px;
    }

    .project-create-flow {
        margin-top: 18px;
    }

    .project-create-stepper {
        display: grid;
        gap: 18px;
        margin-top: 18px;
    }

    .project-create-step h3 {
        margin: 0 0 14px;
    }

    .project-manager-options {
        display: grid;
        gap: 10px;
        margin-bottom: 16px;
    }

    .project-manager-option {
        align-items: center;
        display: flex;
        grid-template-columns: none;
        gap: 12px;
        min-height: 64px;
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
    }

    .project-manager-option input {
        width: 18px;
        height: 18px;
        min-height: 18px;
        flex: 0 0 18px;
        padding: 0;
    }

    .project-manager-option small {
        color: var(--muted);
        display: block;
        margin-top: 3px;
    }

    .project-step-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .project-add-row button {
        min-height: 40px;
        padding: 8px 15px;
    }

    .project-ledger-row small {
        color: var(--muted);
        display: block;
        font-size: 12px;
    }

    .project-money {
        margin: 16px 0;
    }

    .project-start-form {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
        margin-top: 16px;
    }

    .meeting-time-grid,
    .meeting-overview-grid {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .meeting-overview-grid {
        margin: 20px 0;
    }

    .meeting-copy {
        color: var(--muted);
        line-height: 1.65;
    }

    .meeting-cancel-form {
        border-top: 1px solid var(--line);
        margin-top: 22px;
        padding-top: 18px;
    }

    .meeting-lock-state {
        color: var(--muted);
        margin: 14px 0;
    }

    .meeting-locked {
        background: #f2f4f7;
        border-radius: 999px;
        color: #344054;
        font-weight: 700;
        padding: 9px 16px;
    }

    .attendance-checklist {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(3, minmax(220px, 1fr));
        margin: 22px 0;
    }

    .attendance-check {
        align-items: center;
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 10px;
        display: flex;
        gap: 12px;
        min-height: 62px;
        padding: 12px 14px;
    }

    .attendance-check input {
        height: 19px;
        width: 19px;
    }

    .attendance-check small,
    .attendance-result small {
        color: var(--muted);
        display: block;
    }

    .meeting-warning {
        background: #fffbeb;
        border: 1px solid #f7d99b;
        border-radius: 8px;
        color: #925c00;
        margin: 0 0 18px;
        padding: 12px;
    }

    .attendance-results {
        display: grid;
        gap: 12px;
        margin-top: 22px;
    }

    .attendance-result {
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 10px;
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(180px, 1.1fr) auto auto minmax(230px, 1fr);
        padding: 13px;
    }

    .attendance-pill {
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        padding: 8px 11px;
    }

    .attendance-pill.is-present,
    .attendance-pill.is-effective {
        background: #ecfdf3;
        color: #087443;
    }

    .attendance-pill.is-absent {
        background: var(--danger-bg);
        color: var(--danger);
    }

    .attendance-pill.is-correction {
        background: #eff6ff;
        color: #175cd3;
    }

    .meeting-correction-form {
        align-items: center;
        display: flex;
        gap: 8px;
    }

    .meeting-correction-form input {
        min-width: 150px;
    }

    .attendance-summary-grid {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(4, minmax(180px, 1fr));
        margin: 20px 0;
    }

    .attendance-summary {
        display: grid;
        gap: 7px;
    }

    .attendance-summary span {
        color: var(--muted);
    }

    .attendance-summary b {
        color: var(--primary-dark);
        font-size: 29px;
    }

    .attendance-table {
        border-collapse: collapse;
        width: 100%;
    }

    .attendance-table th,
    .attendance-table td {
        border-bottom: 1px solid var(--line);
        padding: 13px 10px;
        text-align: left;
    }

    .attendance-table th {
        color: var(--muted);
        font-size: 13px;
    }

    .attendance-table-card {
        overflow-x: auto;
    }

    .admin-transfer-table {
        min-width: 760px;
    }

    .admin-transfer-table th,
    .admin-transfer-table td {
        white-space: nowrap;
    }

    .admin-transfer-table td {
        vertical-align: middle;
    }

    .table-action-icon {
        display: inline-grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(var(--primary-rgb), 0.18);
        border-radius: 10px;
        color: var(--primary-dark);
        font-size: 20px;
    }

    .table-action-icon:hover {
        background: rgba(var(--primary-rgb), 0.08);
    }

    .transfer-detail-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .directory-pagination {
        align-items: center;
        color: var(--muted);
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: space-between;
    }

    .directory-pagination p {
        margin: 0;
    }

    .directory-pagination div {
        align-items: center;
        display: flex;
        gap: 14px;
    }

    .directory-pagination .button-secondary {
        min-height: 42px;
        padding: 8px 16px;
    }

    .admin-user-page {
        gap: 22px;
    }

    .admin-user-mini-header {
        background: linear-gradient(135deg, #ffffff 0%, #f6f9ff 100%);
        border: 1px solid #dde3ec;
        border-radius: 20px;
        overflow: hidden;
        padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 30px) 0;
    }

    .admin-user-mini-top,
    .admin-user-identity,
    .admin-user-header-actions {
        align-items: center;
        display: flex;
    }

    .admin-user-mini-top {
        gap: 20px;
        justify-content: space-between;
    }

    .admin-user-identity {
        gap: 18px;
    }

    .admin-user-avatar {
        align-items: center;
        background: #ffffff;
        border-radius: 50%;
        color: var(--primary-dark);
        display: inline-flex;
        flex: 0 0 62px;
        font-size: 27px;
        font-weight: 700;
        height: 62px;
        justify-content: center;
        overflow: hidden;
        width: 62px;
    }

    .admin-user-avatar img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .admin-user-identity h1 {
        font-size: clamp(23px, 3vw, 29px);
        margin: 3px 0 5px;
    }

    .admin-user-meta {
        color: var(--muted);
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
    }

    .admin-user-header-actions {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: flex-end;
    }

    .admin-user-state {
        background: #eef2f7;
        border-radius: 999px;
        color: #475467;
        font-size: 13px;
        font-weight: 700;
        padding: 9px 14px;
    }

    .admin-user-state.is-active {
        background: #e8f7ee;
        color: #067647;
    }

    .admin-user-state.is-unverified {
        background: #fff4df;
        color: #956000;
    }

    .admin-user-tabs {
        display: flex;
        gap: 28px;
        margin-top: 24px;
    }

    .admin-user-tabs a {
        border-bottom: 3px solid transparent;
        color: var(--muted);
        font-weight: 600;
        padding: 0 2px 15px;
        text-decoration: none;
    }

    .admin-user-tabs a.is-active {
        border-color: var(--primary);
        color: var(--primary-dark);
    }

    .admin-user-tabs.access-tab-list {
        gap: 6px;
        margin-top: 0;
    }

    .admin-user-tabs.access-tab-list a {
        border: 1px solid transparent;
        border-radius: 8px;
        color: #475467;
        font-weight: 500;
        padding: 0 16px;
    }

    .admin-user-tabs.access-tab-list a.is-active {
        border-color: rgba(var(--primary-rgb), 0.18);
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-dark);
    }

    .admin-user-panel header h2 {
        font-size: 22px;
        margin: 4px 0 0;
    }

    .admin-user-panel .kyc-details {
        gap: 22px;
        display: grid;
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }

    .admin-user-empty {
        background: var(--surface-soft);
        border-radius: 12px;
        color: var(--muted);
        padding: 22px;
    }

    .admin-user-empty strong {
        color: var(--text);
    }

    .admin-user-empty p {
        margin: 8px 0 0;
    }

    .admin-address-card {
        display: grid;
        gap: 25px;
    }

    .admin-address-lines {
        background: var(--surface-soft);
        border-left: 4px solid var(--primary);
        border-radius: 10px;
        color: var(--text);
        line-height: 1.75;
        margin: 0;
        padding: 18px 20px;
    }

    /* Shared UI polish using the Umoja palette. */
    .button-primary,
    .button-secondary,
    .country-picker-toggle,
    input,
    select,
    textarea {
        border-radius: 12px;
    }

    .button-primary {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        padding-inline: 20px;
        box-shadow: 0 12px 26px rgba(var(--primary-rgb), 0.2);
        transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }

    .button-primary:hover {
        box-shadow: 0 16px 32px rgba(var(--primary-rgb), 0.26);
        transform: translateY(-1px);
    }

    .button-secondary {
        align-items: center;
        border: 1px solid rgba(var(--primary-rgb), 0.22);
        border-radius: 12px;
        display: inline-flex;
        justify-content: center;
        padding: 0 16px;
        transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
    }

    .button-secondary:hover {
        background: rgba(var(--primary-rgb), 0.08);
        border-color: rgba(var(--primary-rgb), 0.38);
    }

    .request-empty,
    .request-card,
    .account-mode-card,
    .admin-user-mini-header,
    .client-menu-panel,
    .admin-stat-card {
        border-color: rgba(115, 31, 113, 0.12);
        box-shadow: var(--shadow-card);
    }

    .request-card,
    .request-empty {
        border-radius: 22px;
    }

    .admin-page {
        background:
            radial-gradient(circle at 78% 2%, rgba(var(--primary-rgb), 0.1), transparent 340px),
            #f7f3fb;
    }

    .admin-sidebar {
        background:
            linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);
        box-shadow: 12px 0 36px rgba(23, 33, 43, 0.04);
    }

    .admin-logo {
        gap: 10px;
        letter-spacing: -0.04em;
        text-transform: none;
    }

    .admin-logo::before {
        content: none;
    }

    .admin-side-link {
        border: 1px solid transparent;
        transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .admin-side-link:hover {
        background: rgba(var(--primary-rgb), 0.08);
        border-color: rgba(var(--primary-rgb), 0.12);
        color: var(--primary-dark);
        transform: translateX(2px);
    }

    .admin-side-link.is-active {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        box-shadow: 0 14px 28px rgba(var(--primary-rgb), 0.22);
    }

    .admin-side-icon,
    .client-menu-icon {
        font-size: 21px;
    }

    .admin-side-count {
        background: #ffffff;
        color: var(--primary-dark);
        box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.14);
    }

    .client-header {
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 10px 32px rgba(23, 33, 43, 0.05);
    }

    .brand-mark {
        border-radius: 14px;
        box-shadow: 0 12px 24px rgba(var(--primary-rgb), 0.18);
    }

    .client-nav-pill {
        gap: 8px;
        min-width: auto;
        padding: 0 18px;
        border: 1px solid rgba(23, 33, 43, 0.04);
        background: #ffffff;
        color: #4b5563;
        box-shadow: 0 8px 18px rgba(23, 33, 43, 0.05);
        transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .client-nav-pill:hover {
        color: var(--primary-dark);
        transform: translateY(-1px);
    }

    .client-nav-pill.is-active {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        box-shadow: 0 16px 30px rgba(var(--primary-rgb), 0.24);
    }

    .client-notification,
    .client-avatar,
    .client-user-summary {
        box-shadow: 0 8px 20px rgba(23, 33, 43, 0.06);
    }

    .client-notification {
        color: var(--primary-dark);
        font-size: 22px;
    }

    .client-notification:hover,
    .client-avatar:hover {
        background: rgba(var(--primary-rgb), 0.06);
    }

    .client-menu-item {
        border-radius: 12px;
        transition: background 160ms ease, color 160ms ease;
    }

    .client-menu-item:hover {
        background: rgba(var(--primary-rgb), 0.08);
        color: var(--primary-dark);
    }

    .attendance-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .attendance-table th {
        background: #f7f3fb;
        color: var(--primary-dark);
        font-weight: 700;
    }

    .attendance-table th:first-child {
        border-top-left-radius: 12px;
    }

    .attendance-table th:last-child {
        border-top-right-radius: 12px;
    }

    .attendance-table td {
        background: #ffffff;
    }

    .attendance-table tr:hover td {
        background: #fbf8ff;
    }

    .capital-records {
        display: grid;
        gap: 18px;
    }

    .loan-calculation {
        display: grid;
        gap: 10px;
        padding: 14px;
        border-radius: 10px;
        background: var(--surface-soft);
    }

    .loan-calculation p,
    .loan-preview-schedule p {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        margin: 0;
    }

    .loan-preview-schedule {
        display: grid;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--line);
    }

    .loan-totals {
        display: flex;
        flex-wrap: wrap;
        gap: 26px;
    }

    .loan-totals span {
        display: grid;
        gap: 4px;
        color: var(--muted);
    }

    .loan-totals strong {
        color: var(--text);
    }

    .loan-installments {
        display: grid;
        gap: 12px;
    }

    .loan-installment {
        display: grid;
        gap: 12px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface-soft);
    }

    .loan-installment > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px 20px;
    }

    .loan-installment span:not(.request-status) {
        color: var(--muted);
    }

    .loan-proof-form,
    .loan-default-form {
        max-width: 480px;
    }

    .loan-filter-form {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
        align-items: end;
    }

    .loan-default-actions {
        grid-template-columns: repeat(3, minmax(210px, 1fr));
    }

    .loan-dashboard-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 28px;
    }

    .loan-dashboard-summary .request-card {
        min-width: 210px;
        color: var(--text);
        text-decoration: none;
    }

    .loan-dashboard-summary strong {
        color: var(--primary-dark);
        font-size: 28px;
    }

    .dashboard-quick-actions {
        display: grid;
        gap: 18px;
        margin-top: 28px;
    }

    .dashboard-quick-actions h2 {
        margin: 0;
        font-size: clamp(22px, 3vw, 28px);
    }

    .quick-action-grid {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(5, minmax(150px, 1fr));
    }

    .quick-action-card {
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 20px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
        color: var(--text);
        display: grid;
        gap: 10px;
        min-height: 164px;
        padding: 20px;
        transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }

    .quick-action-card:hover {
        border-color: rgba(var(--primary-rgb), 0.32);
        box-shadow: 0 18px 42px rgba(var(--primary-rgb), 0.12);
        transform: translateY(-2px);
    }

    .quick-action-card > span {
        align-items: center;
        background: rgba(var(--primary-rgb), 0.1);
        border-radius: 16px;
        color: var(--primary-dark);
        display: inline-flex;
        font-size: 25px;
        height: 48px;
        justify-content: center;
        width: 48px;
    }

    .quick-action-card strong {
        font-size: 17px;
    }

    .quick-action-card small {
        color: var(--muted);
        line-height: 1.45;
    }

    .settings-more-section {
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 24px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
        display: grid;
        gap: 22px;
        padding: clamp(20px, 3vw, 28px);
    }

    .settings-more-section h2,
    .settings-more-item h3 {
        margin: 0;
    }

    .settings-more-list {
        display: grid;
        gap: 14px;
    }

    .settings-more-item {
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 18px;
        display: grid;
        gap: 16px;
        grid-template-columns: auto 1fr auto;
        padding: 18px;
    }

    .settings-more-icon {
        align-items: center;
        background: rgba(var(--primary-rgb), 0.1);
        border-radius: 16px;
        color: var(--primary-dark);
        display: inline-flex;
        font-size: 25px;
        height: 48px;
        justify-content: center;
        width: 48px;
    }

    .transfer-proof-form,
    .transfer-confirm-form {
        max-width: 460px;
    }

    .request-status.is-pending-payment,
    .request-status.is-awaiting-verification,
    .request-status.is-pending-guarantor-consent,
    .request-status.is-pending-review,
    .request-status.is-pending,
    .request-status.is-late {
        background: #fffbeb;
        color: #925c00;
    }

    .request-status.is-ready-for-payout {
        background: #eff6ff;
        color: #175cd3;
    }

    .request-status.is-completed {
        background: #ecfdf3;
        color: #087443;
    }

    .request-status.is-paid {
        background: #ecfdf3;
        color: #087443;
    }

    .request-status.is-disbursed,
    .request-status.is-partially-paid {
        background: #eff6ff;
        color: #175cd3;
    }

    .request-status.is-fully-paid {
        background: #ecfdf3;
        color: #087443;
    }

    .request-status.is-defaulted {
        background: var(--danger-bg);
        color: var(--danger);
    }

    .request-status.is-cancelled {
        background: #f2f4f7;
        color: #667085;
    }

    .request-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
    }

    .request-card-head h2 {
        margin: 0 0 7px;
        font-size: 21px;
    }

    .request-card-head p,
    .request-reason,
    .request-note {
        margin: 0;
        color: #667085;
    }

    .request-status {
        display: inline-flex;
        min-height: 32px;
        align-items: center;
        padding: 0 12px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
    }

    .request-status.is-pending {
        background: #fffbeb;
        color: #925c00;
    }

    .request-status.is-approved {
        background: #ecfdf3;
        color: #087443;
    }

    .request-status.is-rejected {
        background: var(--danger-bg);
        color: var(--danger);
    }

    .request-status.is-submitted,
    .request-status.is-action-required {
        background: #fffbeb;
        color: #925c00;
    }

    .request-actions {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(2, minmax(230px, 1fr));
    }

    .kyc-review-actions {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }

    .request-actions form {
        display: grid;
        gap: 10px;
    }

    .request-actions button {
        min-height: 48px;
        border-radius: 8px;
    }

    .request-reject {
        border: 1px solid #f1c1bd;
        background: #ffffff;
        color: var(--danger);
        cursor: pointer;
    }

    .request-action {
        border: 1px solid #f7d99b;
        background: #ffffff;
        color: #925c00;
        cursor: pointer;
    }

    .kyc-details {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        margin: 0;
    }

    .kyc-details dt {
        margin-bottom: 5px;
        color: #667085;
        font-size: 13px;
    }

    .kyc-details dd {
        margin: 0;
        font-weight: 600;
    }

    .kyc-file-links {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .muted {
        color: var(--muted);
        margin: 0;
    }

    .role-footer {
        padding: 24px;
        color: var(--muted);
        text-align: center;
    }

    @media (max-width: 900px) {
        .auth-page {
            background: #ffffff;
        }

        .auth-shell,
        .auth-content {
            min-height: 100vh;
        }

        .auth-shell {
            display: block;
        }

        .auth-content {
            padding: 22px;
        }

        .auth-panel {
            padding: 36px 0 0;
        }

        .auth-visual {
            display: none;
        }
    }

    @media (max-width: 560px) {
        .form-grid,
        .phone-control {
            grid-template-columns: 1fr;
        }

        .recipient-option {
            align-items: flex-start;
            flex-direction: column;
        }

        .guarantor-rating {
            white-space: normal;
        }

        .loan-step-actions {
            justify-content: stretch;
        }

        .loan-step-actions .button-primary,
        .loan-step-actions .button-secondary {
            width: 100%;
        }

        .loan-step-panel {
            min-height: 0;
        }

        .loan-step-head {
            align-items: flex-start;
        }

        .loan-step-page-number {
            width: 46px;
            height: 46px;
            font-size: 19px;
        }

        .member-credibility-card {
            grid-template-columns: 1fr;
        }

        .role-header {
            align-items: flex-start;
            flex-direction: column;
            padding-bottom: 16px;
            padding-top: 16px;
        }

        .client-header {
            grid-template-columns: 1fr;
            gap: 16px;
            padding-bottom: 16px;
            padding-top: 16px;
        }

        .client-brand,
        .client-userbar {
            justify-self: stretch;
        }

        .client-main-nav {
            justify-content: flex-start;
            overflow-x: auto;
            width: 100%;
            padding-bottom: 4px;
        }

        .client-nav-pill {
            min-width: max-content;
        }

        .client-userbar {
            justify-content: flex-start;
        }

        .client-notification,
        .client-avatar {
            width: 46px;
            height: 46px;
        }

        .client-logout {
            display: inline-flex;
            align-items: center;
            min-height: 46px;
            margin-left: auto;
        }

        .client-footer {
            align-items: flex-start;
            flex-direction: column;
            justify-content: center;
            padding-bottom: 16px;
            padding-top: 16px;
        }
    }

    @media (max-width: 1100px) {
        .transfer-builder,
        .loan-builder {
            grid-template-columns: 1fr;
        }

        .loan-stepper,
        .guarantor-summary,
        .loan-review-grid {
            grid-template-columns: 1fr;
        }

        .capital-admin-tools {
            grid-template-columns: 1fr;
        }

        .project-workspace,
        .project-start-form,
        .meeting-overview-grid,
        .attendance-checklist,
        .attendance-summary-grid,
        .quick-action-grid,
        .settings-section-grid {
            grid-template-columns: 1fr;
        }

        .attendance-result {
            grid-template-columns: 1fr;
        }

        .loan-default-actions,
        .loan-filter-form {
            grid-template-columns: 1fr;
        }

        .admin-page {
            grid-template-columns: 108px minmax(0, 1fr);
        }

        .admin-page.is-admin-sidebar-collapsed {
            grid-template-columns: 108px minmax(0, 1fr);
        }

        .admin-sidebar {
            position: fixed;
            width: 108px;
            height: 100vh;
            min-height: 100vh;
            overflow: hidden;
        }

        .admin-sidebar-head {
            justify-content: center;
            min-height: 72px;
            padding: 0 14px;
        }

        .admin-page.is-admin-sidebar-collapsed .admin-sidebar-head {
            justify-content: center;
            padding: 0 14px;
        }

        .admin-logo,
        .admin-page.is-admin-sidebar-collapsed .admin-logo {
            display: none;
        }

        .admin-sidebar-toggle,
        .admin-page.is-admin-sidebar-collapsed .admin-sidebar-toggle {
            width: 50px;
            height: 50px;
            border-radius: 18px;
            font-size: 28px;
        }

        .admin-side-nav {
            flex: 1 1 auto;
            overflow-x: hidden;
            overflow-y: auto;
            padding: 14px 10px;
        }

        .admin-side-list {
            display: grid;
            gap: 12px;
        }

        .admin-side-link {
            justify-content: center;
            min-width: 0;
            min-height: 62px;
            padding: 0;
            border-radius: 18px;
        }

        .admin-page.is-admin-sidebar-collapsed .admin-side-link {
            justify-content: center;
            min-height: 62px;
            padding: 0;
            border-radius: 18px;
        }

        .admin-side-icon,
        .admin-page.is-admin-sidebar-collapsed .admin-side-icon {
            width: 28px;
            height: 28px;
            flex-basis: 28px;
            font-size: 28px;
        }

        .admin-side-label,
        .admin-page.is-admin-sidebar-collapsed .admin-side-label {
            display: none;
        }

        .admin-side-count,
        .admin-page.is-admin-sidebar-collapsed .admin-side-count {
            position: absolute;
            top: 8px;
            right: 8px;
            min-width: 24px;
            min-height: 24px;
            font-size: 12px;
        }

        .admin-logout {
            display: none;
        }

        .admin-stat-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .dashboard-visual-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 640px) {
        .admin-topbar {
            justify-content: flex-start;
        }

        .admin-topbar > div:first-child {
            display: none;
        }

        .admin-content {
            width: min(100% - 28px, 1330px);
            padding-top: 28px;
        }

        .admin-overview-head {
            align-items: flex-start;
            flex-direction: column;
        }

        .admin-stat-grid {
            grid-template-columns: 1fr;
        }

        .dashboard-chart-card {
            padding: 18px;
        }

        .dashboard-chart-head {
            display: grid;
        }

        .dashboard-chart-head strong {
            text-align: left;
        }

        .dashboard-bar-row {
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .dashboard-bar-row strong {
            text-align: left;
        }

        .admin-welcome-card {
            min-height: 340px;
            border-radius: 22px;
        }

        .settings-actions {
            align-items: flex-start;
            flex-direction: column;
        }

        .avatar-upload-row,
        .avatar-upload-actions {
            align-items: flex-start;
            flex-direction: column;
        }

        .request-card-head,
        .request-actions,
        .kyc-review-actions,
        .capital-history-item {
            display: grid;
            grid-template-columns: 1fr;
        }

        .meeting-time-grid,
        .meeting-correction-form {
            display: grid;
            grid-template-columns: 1fr;
        }

        .settings-more-item,
        .admin-user-mini-top,
        .admin-user-identity,
        .admin-user-header-actions {
            align-items: flex-start;
            grid-template-columns: 1fr;
            flex-direction: column;
        }

        .admin-user-header-actions {
            width: 100%;
        }

        .admin-user-tabs {
            gap: 22px;
        }

        .next-of-kin-card-head,
        .next-of-kin-actions {
            align-items: stretch;
            flex-direction: column;
        }

        .next-of-kin-details {
            grid-template-columns: 1fr;
        }

        .next-of-kin-actions .button-secondary,
        .next-of-kin-actions form,
        .next-of-kin-actions button {
            width: 100%;
        }

        .admin-user-panel .kyc-details {
            grid-template-columns: 1fr;
        }
    }

    /* --------------------------------------------------------------------------
    Auth layout refinement - merged for login/register/complete-account screens
    Keeps the existing Umoja palette and only overrides the auth UI section.
    -------------------------------------------------------------------------- */

    .auth-page {
        min-height: 100vh;
        background:
            radial-gradient(circle at 0% 0%, rgba(var(--primary-rgb), 0.10), transparent 360px),
            linear-gradient(135deg, #ffffff 0%, #f8f5fb 100%);
    }

    .auth-shell {
        display: grid;
        grid-template-columns: minmax(420px, 520px) minmax(0, 1fr);
        min-height: 100vh;
        width: 100%;
        overflow: hidden;
    }

    .auth-content {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: clamp(28px, 5vw, 56px);
        background: rgba(255, 255, 255, 0.96);
    }

    .auth-content-inner {
        width: min(100%, 430px);
    }

    .auth-logo-link {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 30px;
    }

    .auth-nav-logo,
    .auth-logo-link .nav-logo {
        height: clamp(46px, 5vw, 58px);
        width: auto;
        max-width: 190px;
        object-fit: contain;
    }

    .auth-panel {
        width: 100%;
        padding: clamp(26px, 4vw, 38px);
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 24px;
        background: #ffffff;
        box-shadow: 0 24px 70px rgba(23, 33, 43, 0.12);
    }

    .auth-heading {
        margin-bottom: 28px;
        text-align: left;
    }

    .auth-heading h1 {
        margin: 0;
        color: var(--text);
        font-size: clamp(28px, 4vw, 34px);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.035em;
    }

    .auth-heading p,
    .auth-panel .auth-subtitle {
        margin: 10px 0 0;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.6;
    }

    .auth-panel .form-stack,
    .auth-panel form {
        gap: 18px;
    }

    .auth-panel label {
        gap: 8px;
        color: #344054;
        font-weight: 600;
    }

    .auth-panel label > span:not(.password-control) {
        font-size: 14px;
    }

    .auth-panel input,
    .auth-panel select,
    .auth-panel textarea,
    .auth-panel .country-picker-toggle {
        min-height: 48px;
        border: 1px solid #d0d5dd;
        border-radius: 12px;
        background: #ffffff;
        color: #101828;
        transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    }

    .auth-panel input,
    .auth-panel select {
        padding: 0 14px;
    }

    .auth-panel textarea {
        padding: 12px 14px;
    }

    .auth-panel input:focus,
    .auth-panel select:focus,
    .auth-panel textarea:focus,
    .auth-panel .country-picker-toggle:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.12);
    }

    .auth-panel .button-primary,
    .auth-panel button[type="submit"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 50px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: #ffffff;
        font-weight: 700;
        box-shadow: 0 16px 34px rgba(var(--primary-rgb), 0.22);
    }

    .auth-panel .button-primary:hover,
    .auth-panel button[type="submit"]:hover {
        transform: translateY(-1px);
        box-shadow: 0 20px 40px rgba(var(--primary-rgb), 0.28);
    }

    .auth-panel .form-link {
        margin-top: 4px;
        color: var(--muted);
        font-size: 14px;
        text-align: center;
    }

    .auth-panel .alert {
        border-radius: 14px;
    }

    .auth-visual {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
        background:
            radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.18), transparent 260px),
            linear-gradient(135deg, var(--primary-dark), #241226);
    }

    .auth-visual::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(120deg, rgba(23, 33, 43, 0.42), rgba(23, 33, 43, 0.05));
        pointer-events: none;
    }

    .auth-visual::after {
        content: "";
        position: absolute;
        right: -120px;
        bottom: -120px;
        z-index: 2;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        pointer-events: none;
    }

    .auth-visual img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        object-fit: cover;
        object-position: center;
    }

    @media (max-width: 960px) {
        .auth-shell {
            grid-template-columns: 1fr;
        }

        .auth-content {
            min-height: 100vh;
            padding: 32px 20px;
        }

        .auth-content-inner {
            width: min(100%, 430px);
        }

        .auth-panel {
            padding: 28px 22px;
            border-radius: 20px;
        }

        .auth-heading {
            text-align: left;
        }

        .auth-heading h1 {
            font-size: 28px;
        }

        .auth-visual {
            display: none;
        }
    }

    @media (max-width: 560px) {
        .auth-content {
            align-items: flex-start;
            padding: 24px 16px;
        }

        .auth-logo-link {
            margin-bottom: 22px;
        }

        .auth-panel {
            padding: 24px 18px;
            box-shadow: 0 16px 42px rgba(23, 33, 43, 0.10);
        }

        .auth-heading h1 {
            font-size: 26px;
        }
    }

    /* ==========================================================
    AUTH LAYOUT + RESPONSIVE HERO OPTIMIZATION
    Added for optimized WebP/JPG auth hero images:
    - umoja-auth-hero-960.webp
    - umoja-auth-hero-1440.webp
    - umoja-auth-hero-1440.jpg
    ========================================================== */

    .auth-page {
        background: #ffffff;
        width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
    }

    .auth-page *,
    .auth-page *::before,
    .auth-page *::after {
        max-width: 100%;
    }

    .auth-shell {
        display: grid;
        grid-template-columns: minmax(420px, 520px) minmax(0, 1fr);
        min-height: 100vh;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .auth-content {
        display: grid;
        grid-template-rows: auto 1fr;
        min-width: 0;
        min-height: 100vh;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        padding: clamp(28px, 4vw, 52px);
        background: #ffffff;
    }

    .auth-logo-link {
        display: inline-flex;
        align-items: center;
        justify-self: start;
        align-self: start;
        gap: 12px;
        margin-bottom: 28px;
    }

    .auth-nav-logo {
        display: block;
        width: auto;
        height: 54px;
        object-fit: contain;
    }

    .auth-panel {
        align-self: center;
        justify-self: center;
        width: min(100%, 430px);
        padding: clamp(12px, 2vw, 22px) 0;
    }

    .auth-heading {
        margin-bottom: 28px;
        text-align: center;
    }

    .auth-heading h1 {
        margin: 0;
        color: var(--primary);
        font-size: clamp(28px, 3vw, 34px);
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.03em;
    }

    .auth-heading p {
        margin: 10px 0 0;
        color: var(--muted);
    }

    /* Hero image container */
    .auth-visual {
        position: relative;
        min-width: 0;
        min-height: 100vh;
        overflow: hidden;
        background: #f4eef6;
    }

    .auth-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to right,
            rgba(var(--primary-rgb), 0.08),
            rgba(var(--primary-rgb), 0)
        );
        pointer-events: none;
    }

    .auth-visual picture,
    .auth-visual img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .auth-visual img {
        min-height: 100vh;
        object-fit: cover;
        object-position: center center;
    }

    /* Auth form polish */
    .auth-panel input,
    .auth-panel select,
    .auth-panel textarea,
    .auth-panel .country-picker-toggle {
        border-radius: 12px;
    }

    .auth-panel input,
    .auth-panel select,
    .auth-panel .country-picker-toggle {
        min-height: 50px;
    }

    .auth-panel textarea {
        min-height: 120px;
    }

    .auth-panel .button-primary {
        width: 100%;
        min-height: 52px;
        border-radius: 12px;
    }

    /* 14-inch laptop optimization: 1366px to 1440px wide screens */
    @media (min-width: 1024px) and (max-width: 1440px) {
        .auth-shell {
            grid-template-columns: minmax(390px, 470px) minmax(0, 1fr);
        }

        .auth-content {
            padding: 32px;
        }

        .auth-panel {
            width: min(100%, 400px);
        }

        .auth-heading h1 {
            font-size: 30px;
        }

        .auth-visual img {
            object-position: center top;
        }
    }

    /* Smaller laptops */
    @media (min-width: 961px) and (max-width: 1200px) {
        .auth-shell {
            grid-template-columns: minmax(370px, 440px) minmax(0, 1fr);
        }

        .auth-content {
            padding: 28px;
        }

        .auth-panel {
            width: min(100%, 380px);
        }

        .auth-nav-logo {
            height: 50px;
        }
    }

    /* Tablets and mobile */
    @media (max-width: 960px) {
        .auth-shell {
            grid-template-columns: 1fr;
        }

        .auth-visual {
            display: none;
        }

        .auth-content {
            min-height: 100vh;
            padding: 32px 20px;
            align-items: center;
        }

        .auth-logo-link {
            justify-self: center;
            justify-content: center;
            margin-bottom: 28px;
        }

        .auth-panel {
            width: min(100%, 500px);
        }

        .auth-heading {
            text-align: center;
        }
    }

    /* Mobile */
    @media (max-width: 640px) {
        .auth-content {
            padding: 24px 18px;
        }

        .auth-heading h1 {
            font-size: 28px;
        }

        .auth-nav-logo {
            height: 48px;
        }

        .form-grid,
        .phone-control {
            grid-template-columns: 1fr;
        }

        .pin-control {
            grid-template-columns: repeat(4, minmax(42px, 1fr));
        }
    }

    /* ==========================================================
    FINAL AUTH LAYOUT CORRECTION
    Fixes login/register layout on 14-inch screens and keeps
    the hero banner responsive.
    ========================================================== */

    .auth-shell {
        grid-template-columns: minmax(360px, 33.5vw) minmax(0, 1fr);
    }

    .auth-content {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px;
    }

    .auth-content-inner {
        width: 100%;
        max-width: 420px;
    }

    .auth-logo-link {
        margin-bottom: 34px;
    }

    .auth-panel {
        width: 100%;
        max-width: 420px;
        padding: 30px 28px 22px;
        border: 1px solid rgba(115, 31, 113, 0.08);
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 22px 60px rgba(23, 33, 43, 0.08);
    }

    .auth-heading {
        margin-bottom: 28px;
    }

    .auth-heading h1 {
        font-size: 30px;
        font-weight: 600;
    }

    .auth-visual img {
        object-position: center center;
    }

    @media (min-width: 1024px) and (max-width: 1440px) {
        .auth-shell {
            grid-template-columns: 440px minmax(0, 1fr);
        }

        .auth-content {
            padding: 28px 36px;
        }

        .auth-content-inner {
            max-width: 416px;
        }

        .auth-panel {
            max-width: 416px;
            padding: 28px 26px 22px;
        }

        .auth-visual img {
            object-position: center center;
        }
    }

    @media (max-width: 960px) {
        .auth-shell {
            grid-template-columns: 1fr;
        }

        .auth-content {
            min-height: 100vh;
            padding: 28px 18px;
        }

        .auth-visual {
            display: none;
        }

        .auth-content-inner {
            max-width: 500px;
        }
    }

    /* --  ShemsouStart --  */
    /* Member top navigation improvements */
    .client-main-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 12px 16px;
    }

    .client-nav-pill {
        min-width: auto;
        min-height: 44px;
        padding: 0 22px;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 600;
        white-space: nowrap;
    }

    .client-nav-pill .ui-icon,
    .client-nav-pill iconify-icon {
        font-size: 18px;
    }

    /* Mobile optimisation */
    @media (max-width: 768px) {

        .header-nav {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            width: 100%;
            margin: 0 auto;
        }

        .header-nav .nav-pill {
            flex: 0 0 auto;
        }
    }

        .client-main-nav {
            width: 100%;
            justify-content: flex-start;
            overflow-x: auto;
            gap: 10px;
            padding: 8px 2px 10px;
            scrollbar-width: none;
        }

        .client-main-nav::-webkit-scrollbar {
            display: none;
        }

        .client-nav-pill {
            flex: 0 0 auto;
            min-height: 40px;
            padding: 0 16px;
            font-size: 14px;
            border-radius: 999px;
        }

        .client-nav-pill .ui-icon,
        .client-nav-pill iconify-icon {
            font-size: 16px;
        }

    /* Very small phones */
    @media (max-width: 420px) {
        .client-nav-pill {
            padding: 0 14px;
            font-size: 13px;
        }
    }




    .nav-label {
        display: inline;
    }

    .nav-icon {
        font-size: 18px;
    }

    @media (max-width: 768px) {
        .client-header {
            grid-template-columns: auto 1fr auto;
            gap: 10px;
            padding: 12px 14px;
            min-height: 70px;
        }

        .client-brand .nav-logo {
            max-width: 110px;
            height: 40px;
        }

        .client-main-nav {
            justify-content: center;
            gap: 8px;
            overflow-x: auto;
            padding: 0;
            scrollbar-width: none;
        }

        .client-main-nav::-webkit-scrollbar {
            display: none;
        }

        .client-nav-pill {
            width: 44px;
            min-width: 44px;
            height: 44px;
            min-height: 44px;
            padding: 0;
            border-radius: 999px;
            justify-content: center;
        }

        .nav-label,
        .client-user-summary {
            display: none;
        }

        .nav-icon {
            font-size: 22px;
        }

        .client-notification,
        .client-avatar {
            width: 42px;
            height: 42px;
        }

        .client-userbar {
            gap: 8px;
        }

        .client-menu-panel {
            right: 0;
            width: min(280px, calc(100vw - 28px));
        }

        .dashboard-shell {
            width: min(100% - 24px, 1120px);
            padding: 24px 0;
        }

        .client-footer {
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            text-align: left;
            padding: 18px 14px;
        }
    }

    /* -- ShemsouEnd -- */


    /* ==========================================================
    UMOJA MEMBER PORTAL NAVIGATION ENHANCEMENTS
    Desktop + Mobile Responsive Improvements
    Paste-safe override block added at the end of global.css
    ========================================================== */

    /* Main member navigation */
    .client-main-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 12px 16px;
        min-width: 0;
    }

    /* Navigation pill base */
    .client-nav-pill {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        min-width: auto;
        min-height: 48px;
        padding: 0 22px;

        border-radius: 999px;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        background: rgba(var(--primary-rgb), 0.045);

        color: #475569;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;

        box-shadow: 0 4px 14px rgba(23, 33, 43, 0.04);
        transition:
            background 180ms ease,
            border-color 180ms ease,
            color 180ms ease,
            box-shadow 180ms ease,
            transform 180ms ease;
    }

    /* Inactive hover */
    .client-nav-pill:hover {
        background: rgba(var(--primary-rgb), 0.085);
        border-color: rgba(var(--primary-rgb), 0.22);
        color: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.10);
    }

    /* Icon polish */
    .client-nav-pill .ui-icon,
    .client-nav-pill iconify-icon,
    .client-nav-pill .nav-icon {
        width: 1.15em;
        height: 1.15em;
        font-size: 18px;
        color: #64748b;
        transition: color 180ms ease, transform 180ms ease;
    }

    .client-nav-pill:hover .ui-icon,
    .client-nav-pill:hover iconify-icon,
    .client-nav-pill:hover .nav-icon {
        color: var(--primary-dark);
        transform: scale(1.04);
    }

    /* Active navigation pill */
    .client-nav-pill.is-active {
        border-color: var(--primary);
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: #ffffff;
        box-shadow:
            0 14px 30px rgba(var(--primary-rgb), 0.24),
            0 4px 12px rgba(var(--primary-rgb), 0.16);
    }

    .client-nav-pill.is-active .ui-icon,
    .client-nav-pill.is-active iconify-icon,
    .client-nav-pill.is-active .nav-icon {
        color: #ffffff;
    }

    /* Active indicator */
    .client-nav-pill.is-active::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -10px;
        width: 24px;
        height: 4px;
        border-radius: 999px;
        background: var(--primary);
        transform: translateX(-50%);
    }

    /* Label helpers for mobile icon-only mode */
    .nav-label {
        display: inline;
    }

    .nav-icon {
        font-size: 18px;
    }

    /* Header refinement */
    .client-header {
        position: sticky;
        top: 0;
        z-index: 50;
        backdrop-filter: blur(14px);
    }

    /* Better dashboard width on larger screens */
    .dashboard-shell {
        width: min(100% - 40px, 1280px);
    }

    /* Tablet optimisation */
    @media (max-width: 1024px) {
        .client-header {
            grid-template-columns: minmax(130px, auto) minmax(0, 1fr) auto;
            gap: 14px;
            padding-inline: 18px;
        }

        .client-main-nav {
            gap: 10px;
            padding-inline: 8px;
        }

        .client-nav-pill {
            min-height: 44px;
            padding: 0 18px;
            font-size: 14px;
        }

        .client-user-name {
            font-size: 14px;
        }

        .client-user-role {
            font-size: 12px;
        }
    }

    /* Mobile navigation: icon-only pills */
    @media (max-width: 768px) {
        .client-header {
            grid-template-columns: auto minmax(0, 1fr) auto;
            gap: 10px;
            min-height: 70px;
            padding: 12px 14px;
        }

        .client-brand .nav-logo {
            max-width: 110px;
            height: auto;
            max-height: 40px;
        }

        .client-main-nav {
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 0;
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }

        .client-main-nav::-webkit-scrollbar {
            display: none;
        }

        .client-nav-pill {
            flex: 0 0 auto;
            width: 44px;
            min-width: 44px;
            height: 44px;
            min-height: 44px;
            padding: 0;
            gap: 0;
            border-radius: 999px;
        }

        .client-nav-pill.is-active::after {
            bottom: -7px;
            width: 18px;
            height: 3px;
        }

        .nav-label {
            display: none;
        }

        .nav-icon,
        .client-nav-pill .ui-icon,
        .client-nav-pill iconify-icon {
            font-size: 22px;
            width: 1.2em;
            height: 1.2em;
        }

        .client-user-summary {
            display: none;
        }

        .client-userbar {
            gap: 8px;
        }

        .client-notification,
        .client-avatar {
            width: 42px;
            height: 42px;
        }

        .client-menu-panel {
            right: 0;
            width: min(280px, calc(100vw - 28px));
        }

        .dashboard-shell {
            width: min(100% - 24px, 1120px);
            padding: 14px 0;
        }

        .dashboard-shell:has(.client-dashboard-home) {
            padding: 8px 0;
        }

        .dashboard-hero {
            padding: 16px 14px;
            border-radius: 12px;
        }

        .membership-panel {
            grid-template-columns: 1fr;
            gap: 22px;
        }

        .membership-visual {
            order: -1;
        }

        .client-dashboard-head {
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .client-dashboard-status {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            min-width: 0;
            padding: 8px 10px;
        }

        .dashboard-hero h1 {
            font-size: clamp(21px, 6vw, 28px);
        }

        .client-action-tiles {
            gap: 8px;
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .client-membership-banner {
            border-radius: 8px;
        }

        .client-membership-banner img {
            height: auto;
            min-height: 0;
            object-fit: contain;
            object-position: center;
        }

        .client-action-tile {
            aspect-ratio: auto;
            min-height: clamp(68px, 10vh, 86px);
            padding: 8px 5px;
        }

        .client-action-icon {
            width: 34px;
            height: 34px;
            font-size: 19px;
        }

        .client-action-tile strong {
            font-size: 13px;
            max-width: 86px;
        }

        .client-dashboard-summary {
            grid-template-columns: 1fr;
        }

        .client-summary-card {
            min-height: 48px;
            padding: 8px 10px;
        }

        .client-footer {
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            text-align: left;
            min-height: auto;
            padding: 10px 14px;
        }

        .client-footer span {
            margin-left: 0;
            margin-top: 6px;
        }
    }

    /* Small phones */
    @media (max-width: 420px) {
        .client-header {
            padding-inline: 10px;
            gap: 8px;
        }

        .client-brand .nav-logo {
            max-width: 96px;
        }

        .client-main-nav {
            gap: 6px;
        }

        .client-nav-pill {
            width: 40px;
            min-width: 40px;
            height: 40px;
            min-height: 40px;
        }

        .nav-icon,
        .client-nav-pill .ui-icon,
        .client-nav-pill iconify-icon {
            font-size: 20px;
        }

        .client-notification,
        .client-avatar {
            width: 38px;
            height: 38px;
        }
    }

    .member-finance-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(220px, 1fr));
        gap: 20px;
        margin-top: 38px;
    }

    .member-finance-card {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 18px;
        min-height: 150px;
        padding: 26px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 24px;
        background: #ffffff;
        box-shadow: 0 18px 42px rgba(23, 33, 43, 0.06);
    }

    .member-card-icon {
        display: inline-grid;
        place-items: center;
        width: 54px;
        height: 54px;
        border-radius: 18px;
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary);
        font-size: 26px;
    }

    .member-finance-card span:not(.member-card-icon) {
        color: #475569;
        font-size: 15px;
        font-weight: 600;
    }

    .member-finance-card strong {
        display: block;
        margin-top: 12px;
        color: var(--primary-dark);
        font-size: 34px;
        line-height: 1;
    }

    .member-analytics-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(180px, 1fr));
        gap: 14px;
        margin-top: 20px;
    }

    .member-analytics-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 16px 18px;
        border: 1px solid rgba(var(--primary-rgb), 0.1);
        border-radius: 18px;
        background: rgba(var(--primary-rgb), 0.035);
    }

    .member-analytics-card span {
        color: #64748b;
        font-size: 14px;
        font-weight: 600;
    }

    .member-analytics-card strong {
        color: var(--primary-dark);
        font-size: 22px;
    }

    /* Tablet */
    @media (max-width: 1100px) {
        .member-finance-grid,
        .member-analytics-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* Mobile */
    @media (max-width: 640px) {
        .member-finance-grid {
            grid-template-columns: 1fr;
            gap: 16px;
            margin-top: 28px;
        }

        .member-finance-card {
            min-height: 135px;
            padding: 24px;
            border-radius: 22px;
        }

        .member-card-icon {
            width: 50px;
            height: 50px;
            font-size: 24px;
        }

        .member-finance-card strong {
            font-size: 30px;
        }

        .member-analytics-grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }
    }

    .member-action-section {
        display: grid;
        gap: 18px;
        margin-top: 34px;
    }

    .member-action-section h3 {
        margin: 0;
        color: var(--primary-dark);
        font-size: 18px;
        font-weight: 700;
    }

    .member-action-section .quick-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    @media (max-width: 960px) {
        .member-action-section .quick-action-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 640px) {
        .member-action-section {
            margin-top: 26px;
        }

        .member-action-section .quick-action-grid {
            grid-template-columns: 1fr;
        }
    }

    .member-action-section h3 {
        margin: 0 0 8px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: #9ca3af;
        position: relative;
        padding-bottom: 10px;
    }

    .member-action-section h3::after {
        content: "";
        display: block;
        margin-top: 10px;
        width: 60px;
        height: 2px;
        border-radius: 999px;
        background: rgba(var(--primary-rgb), 0.15);
    }

    .contribution-page {
        gap: 26px;
    }

    .contribution-head {
        align-items: end;
    }

    .contribution-summary-card,
    .contribution-payment-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 26px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 24px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .contribution-summary-card h2,
    .contribution-payment-card h2 {
        margin: 4px 0 8px;
        font-size: clamp(28px, 4vw, 42px);
        color: var(--primary-dark);
    }

    .contribution-pay-form {
        display: grid;
        grid-template-columns: minmax(220px, 1fr) auto;
        align-items: end;
        gap: 16px;
        width: min(100%, 560px);
    }

    .section-heading-row {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 18px;
    }

    .section-heading-row h2 {
        margin: 0;
    }

    .contribution-history-list {
        display: grid;
        gap: 14px;
    }

    .contribution-history-card {
        display: grid;
        grid-template-columns: minmax(160px, 1fr) auto auto;
        align-items: center;
        gap: 16px;
        padding: 18px;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 10px 26px rgba(23, 33, 43, 0.05);
    }

    .contribution-history-card div {
        display: grid;
        gap: 4px;
    }

    .contribution-history-card strong {
        color: var(--text);
        font-size: 18px;
    }

    .contribution-history-card span {
        color: var(--muted);
    }

    .contribution-proof-form {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(220px, 1fr) auto;
        align-items: end;
        gap: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--line);
    }

    @media (max-width: 820px) {
        .contribution-head,
        .contribution-summary-card,
        .contribution-payment-card {
            align-items: stretch;
            flex-direction: column;
        }

        .capital-year-filter {
            width: 100%;
        }

        .contribution-pay-form,
        .contribution-proof-form {
            grid-template-columns: 1fr;
            width: 100%;
        }

        .contribution-history-card {
            grid-template-columns: 1fr;
            align-items: stretch;
        }

        .contribution-history-card .settings-action-link,
        .contribution-history-card .button-primary {
            width: 100%;
        }
    }

    @media (max-width: 520px) {
        .contribution-summary-card,
        .contribution-payment-card {
            padding: 22px;
            border-radius: 20px;
        }

        .contribution-summary-card h2,
        .contribution-payment-card h2 {
            font-size: 32px;
        }
    }

    .contribution-summary-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 14px;
    }

    .summary-year-filter {
        width: 140px;
    }

    .summary-year-filter select {
        width: 100%;
        min-height: 44px;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: #fff;
        padding: 0 14px;
        font-size: 14px;
        font-weight: 600;
    }

    .contribution-kpis{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
        gap:16px;
        margin-bottom:20px;
    }

    .kpi-card{
        background:#fff;
        border-radius:20px;
        padding:20px;
        display:flex;
        align-items:center;
        gap:16px;
        border:1px solid var(--line);
    }

    .kpi-icon{
        width:52px;
        height:52px;
        border-radius:16px;
        display:grid;
        place-items:center;
        background:rgba(122,35,123,.08);
        color:var(--primary);
        font-size:24px;
    }

    .kpi-card span{
        display:block;
        font-size:13px;
        color:#7a8798;
    }

    .kpi-card strong{
        display:block;
        font-size:24px;
        margin-top:4px;
    }

    .contribution-progress-card{
        background:#fff;
        border-radius:20px;
        padding:20px;
        margin-bottom:24px;
        border:1px solid var(--line);
    }

    .progress-header{
        display:flex;
        justify-content:space-between;
        margin-bottom:12px;
    }

    .progress-track{
        height:12px;
        background:#eef2f6;
        border-radius:999px;
        overflow:hidden;
    }

    .progress-fill{
        height:100%;
        background:var(--primary);
        border-radius:999px;
    }

    .summary-mini-stats{
        display:flex;
        gap:32px;
        margin-top:18px;
    }

    .summary-mini-stats span{
        display:block;
        font-size:12px;
        color:#7a8798;
    }

    .summary-mini-stats strong{
        display:block;
        margin-top:4px;
    }

    .contribution-timeline{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
        gap:12px;
        margin-bottom:24px;
    }

    .timeline-month{
        padding:12px 14px;
        border-radius:12px;
        background:#fff;
        border:1px solid var(--line);
        display:flex;
        align-items:center;
        gap:10px;
    }

    .timeline-month.is-paid{
        background:#ecfdf3;
        color:#0f8f4e;
        border-color:#b7e5c4;
    }

    .admin-section {
        display: grid;
        gap: 16px;
    }

    .section-label {
        color: #94a3b8;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .admin-stat-card.highlight {
        border-color: rgba(var(--primary-rgb), 0.22);
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.08), transparent 140px),
            #ffffff;
    }

    .admin-insight-grid {
        grid-template-columns: minmax(240px, 0.75fr) repeat(2, minmax(280px, 1fr));
    }

    .action-centre-list,
    .cash-position-list {
        display: grid;
        gap: 12px;
    }

    .action-centre-row,
    .cash-position-list div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 12px 14px;
        border-radius: 12px;
        background: #f8fafc;
    }

    .action-centre-row span,
    .cash-position-list span {
        color: #64748b;
        font-size: 14px;
        font-weight: 600;
    }

    .action-centre-row strong,
    .cash-position-list strong {
        color: var(--primary-dark);
        font-size: 16px;
    }

    @media (max-width: 1100px) {
        .admin-insight-grid {
            grid-template-columns: 1fr;
        }
    }

    .admin-side-group {
        display: grid;
        gap: 8px;
        margin-bottom: 18px;
    }

    .admin-side-group-title {
        margin: 8px 8px 2px;
        color: #94a3b8;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .admin-page.is-admin-sidebar-collapsed .admin-side-group-title {
        display: none;
    }

    .admin-side-link {
        min-height: 48px;
    }

    .admin-side-count {
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-dark);
    }

    .admin-side-link.is-active .admin-side-count {
        background: #ffffff;
        color: var(--primary-dark);
    }

    .admin-side-dropdown {
        margin-bottom: 10px;
    }

    .admin-side-dropdown-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 38px;
        padding: 0 12px;
        margin: 4px 4px;
        border-radius: 10px;
        color: #94a3b8;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        cursor: pointer;
        list-style: none;
    }

    .admin-side-dropdown-title::-webkit-details-marker {
        display: none;
    }

    .admin-side-dropdown-title:hover {
        background: rgba(var(--primary-rgb), 0.06);
        color: var(--primary-dark);
    }

    .admin-side-dropdown-title iconify-icon {
        font-size: 16px;
        transition: transform 160ms ease;
    }

    .admin-side-dropdown[open] .admin-side-dropdown-title iconify-icon {
        transform: rotate(180deg);
    }

    .admin-side-dropdown .admin-side-list {
        margin-top: 6px;
    }

    .admin-page.is-admin-sidebar-collapsed .admin-side-dropdown-title {
        display: none;
    }

    .admin-page.is-admin-sidebar-collapsed .admin-side-dropdown {
        margin-bottom: 0;
    }

    .admin-page.is-admin-sidebar-collapsed .admin-side-dropdown .admin-side-list {
        display: grid;
    }

    /* Admin mobile optimisation */
    @media (max-width: 768px) {
        .admin-page {
            display: block;
            min-height: 100vh;
        }

        .admin-sidebar {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
            width: 280px;
            max-width: 82vw;
            transform: translateX(-100%);
            transition: transform 180ms ease;
            box-shadow: 24px 0 60px rgba(23, 33, 43, 0.18);
        }

        .admin-page.is-admin-sidebar-open .admin-sidebar {
            transform: translateX(0);
        }

        .admin-shell {
            width: 100%;
            min-width: 0;
        }

        .admin-topbar {
            position: sticky;
            top: 0;
            z-index: 80;
            min-height: 68px;
            padding: 0 14px;
        }

        .admin-content {
            width: min(100% - 28px, 100%);
            padding: 28px 0;
        }

        .admin-overview-head {
            align-items: flex-start;
            flex-direction: column;
            gap: 16px;
        }

        .admin-overview-head h1 {
            font-size: 30px;
        }

        .admin-manage-button {
            width: 100%;
            min-height: 48px;
        }

        .admin-stat-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .admin-stat-card {
            min-height: 104px;
            padding: 20px;
            border-radius: 18px;
        }

        .admin-stat-card strong {
            font-size: 28px;
        }

        .dashboard-visual-grid,
        .admin-insight-grid {
            grid-template-columns: 1fr;
        }

        .dashboard-chart-card {
            padding: 20px;
            border-radius: 18px;
        }

        .client-user-summary {
            display: none;
        }

        .client-notification,
        .client-avatar {
            width: 42px;
            height: 42px;
        }
    }

    /* Admin nav polish: desktop + mobile */
    .admin-topbar {
        gap: 12px;
    }

    .admin-mobile-sidebar-toggle {
        display: none;
    }

    @media (min-width: 769px) {
        .admin-topbar {
            justify-content: space-between;
            padding: 0 24px;
        }

        .admin-side-dropdown-title {
            color: #8b96a8;
        }

        .admin-side-link {
            border-radius: 14px;
            min-height: 48px;
        }

        .admin-side-link:hover {
            background: rgba(var(--primary-rgb), 0.07);
            color: var(--primary-dark);
        }

        .admin-side-link.is-active {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #ffffff;
            box-shadow: 0 12px 26px rgba(var(--primary-rgb), 0.2);
        }
    }

    @media (max-width: 768px) {
        .admin-page {
            display: block;
        }

        .admin-topbar {
            position: sticky;
            top: 0;
            z-index: 900;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 64px;
            padding: 0 14px;
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--line);
        }

        .admin-mobile-sidebar-toggle {
            display: inline-grid;
            place-items: center;
            width: 44px;
            height: 44px;
            border: 1px solid rgba(var(--primary-rgb), 0.16);
            border-radius: 14px;
            background: #ffffff;
            color: var(--primary-dark);
            font-size: 22px;
            box-shadow: 0 8px 20px rgba(23, 33, 43, 0.06);
        }

        .admin-sidebar {
            position: fixed;
            inset: 0 auto 0 0;
            z-index: 1001;
            width: min(86vw, 310px);
            transform: translateX(-105%);
            transition: transform 220ms ease;
            box-shadow: 24px 0 70px rgba(23, 33, 43, 0.24);
        }

        .admin-page.is-admin-sidebar-open .admin-sidebar {
            transform: translateX(0);
        }

        .admin-sidebar-backdrop {
            position: fixed;
            inset: 0;
            z-index: 1000;
            border: 0;
            background: rgba(15, 23, 42, 0.42);
            backdrop-filter: blur(2px);
        }

        .admin-sidebar-head {
            min-height: 70px;
            padding: 0 16px;
        }

        .admin-logo .nav-logo {
            height: 42px;
            max-width: 140px;
        }

        .admin-side-nav {
            padding: 12px;
        }

        .admin-side-dropdown-title {
            min-height: 38px;
            padding: 0 12px;
            color: #8b96a8;
            font-size: 11px;
            letter-spacing: 0.14em;
        }

        .admin-side-link {
            min-height: 48px;
            padding: 0 14px;
            border-radius: 14px;
            font-size: 14px;
        }

        .admin-side-link.is-active {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #ffffff;
        }

        .admin-shell {
            width: 100%;
        }

        .admin-content {
            width: min(100% - 28px, 100%);
            padding: 28px 0;
        }

        .client-userbar {
            margin-left: auto;
            gap: 8px;
        }

        .client-notification,
        .client-avatar {
            width: 42px;
            height: 42px;
        }

        .client-user-summary {
            display: none;
        }
    }

    .admin-directory-toolbar {
        display: grid;
        grid-template-columns: minmax(260px, 1fr) 180px 140px auto;
        gap: 14px;
        align-items: end;
    }

    .admin-user-cell {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .admin-user-avatar {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-dark);
        font-weight: 800;
    }

    .admin-user-meta {
        display: grid;
        gap: 3px;
    }

    .admin-user-meta strong {
        color: var(--text);
    }

    .admin-user-meta span {
        color: var(--muted);
        font-size: 13px;
    }

    .admin-role-pill {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        min-height: 30px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(var(--primary-rgb), 0.08);
        color: var(--primary-dark);
        font-size: 12px;
        font-weight: 700;
    }

    @media (max-width: 860px) {
        .admin-directory-toolbar {
            grid-template-columns: 1fr;
        }

        .attendance-table thead {
            display: none;
        }

        .attendance-table,
        .attendance-table tbody,
        .attendance-table tr,
        .attendance-table td {
            display: block;
            width: 100%;
        }

        .attendance-table tr {
            padding: 16px;
            border-bottom: 1px solid var(--line);
        }

        .attendance-table td {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            padding: 10px 0;
            border: 0;
        }

        .attendance-table td::before {
            content: attr(data-label);
            color: #94a3b8;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
        }

        .attendance-table td[data-label="User"] {
            display: block;
        }

        .attendance-table td[data-label="User"]::before {
            display: none;
        }
    }

    .admin-users-table th {
        color: #6b7280;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .admin-user-checkbox {
        width: 18px;
        height: 18px;
        accent-color: var(--primary);
    }

    .admin-user-photo,
    .admin-user-avatar {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        object-fit: cover;
        flex-shrink: 0;
    }

    .admin-user-photo {
        border: 2px solid rgba(var(--primary-rgb), 0.18);
    }

    .admin-users-table td {
        vertical-align: middle;
    }

    .admin-users-table tbody tr:hover {
        background: rgba(var(--primary-rgb), 0.035);
    }

    @media (max-width: 860px) {
        .admin-users-table td[data-label="Select"] {
            display: none;
        }

        .admin-users-table td[data-label="Registered"],
        .admin-users-table td[data-label="Phone"],
        .admin-users-table td[data-label="Role"],
        .admin-users-table td[data-label="Manage"] {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .admin-user-photo,
    .admin-user-photo-placeholder {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        display: grid;
        place-items: center;
    }

    .admin-user-photo {
        object-fit: cover;
        border: 2px solid #f1e6f5;
    }

    .admin-user-photo-placeholder svg,
    .admin-user-photo-placeholder img {
        width: 100%;
        height: 100%;
    }

    /* =========================================================
    Umoja Mutual Bank Typography Scale
    Added to slightly reduce Inter font sizing globally
    while keeping the interface readable and professional.
    ========================================================= */

    html {
        font-size: 15px;
    }

    body {
        font-size: 14px;
        line-height: 1.5;
    }

    /* Global headings */
    h1 {
        font-size: clamp(24px, 4vw, 36px);
        line-height: 1.15;
    }

    h2 {
        font-size: clamp(20px, 3vw, 28px);
        line-height: 1.2;
    }

    h3 {
        font-size: 18px;
        line-height: 1.25;
    }

    /* Small labels */
    .eyebrow,
    .section-label,
    .admin-side-dropdown-title,
    .admin-side-group-title {
        font-size: 11px;
        letter-spacing: 0.13em;
    }

    /* Forms */
    label > span:not(.password-control) {
        font-size: 13px;
    }

    input,
    select,
    textarea {
        font-size: 14px;
    }

    input,
    select,
    .country-picker-toggle,
    .country-picker-option {
        min-height: 44px;
    }

    textarea {
        font-size: 14px;
    }

    /* Buttons */
    .button-primary,
    .button-secondary,
    .button-link,
    .admin-manage-button,
    .membership-action-link,
    .settings-action-link {
        font-size: 14px;
    }

    .button-primary {
        min-height: 44px;
    }

    .button-secondary,
    .settings-action-link {
        min-height: 40px;
    }

    /* Auth screens */
    .auth-heading h1 {
        font-size: clamp(26px, 4vw, 34px);
    }

    .auth-panel {
        font-size: 14px;
    }

    .pin-box {
        min-height: 52px;
        font-size: 20px;
    }

    /* Admin layout */
    .admin-overview-head h1 {
        font-size: clamp(28px, 3vw, 36px);
        font-weight: 700;
    }

    .admin-overview-head p {
        font-size: 14px;
    }

    .admin-side-link {
        font-size: 14px;
    }

    .admin-side-count {
        font-size: 12px;
    }

    .admin-logo {
        font-size: clamp(30px, 3vw, 40px);
    }

    .admin-stat-card span,
    .dashboard-chart-head span,
    .dashboard-bar-row span {
        font-size: 13px;
    }

    .admin-stat-card strong {
        font-size: 26px;
    }

    .dashboard-chart-head strong {
        font-size: 18px;
    }

    .dashboard-donut span {
        font-size: 26px;
    }

    /* Tables */
    .attendance-table,
    .admin-users-table {
        font-size: 14px;
    }

    .attendance-table th,
    .admin-users-table th {
        font-size: 11px;
        letter-spacing: 0.12em;
    }

    .attendance-table td,
    .admin-users-table td {
        font-size: 14px;
    }

    /* User directory */
    .admin-user-meta strong {
        font-size: 14px;
    }

    .admin-user-meta span {
        font-size: 12px;
    }

    .admin-role-pill {
        font-size: 11px;
    }

    /* Member/client navigation */
    .client-nav-pill {
        font-size: 14px;
    }

    .client-user-name {
        font-size: 15px;
    }

    .client-user-role {
        font-size: 13px;
    }

    .client-menu-item {
        font-size: 14px;
    }

    /* Member dashboard */
    .dashboard-hero h1,
    .membership-head h1 {
        font-size: clamp(26px, 4vw, 34px);
    }

    .quick-action-card strong {
        font-size: 16px;
    }

    .quick-action-card small {
        font-size: 13px;
    }

    .loan-dashboard-summary .request-card span,
    .analytics-card span {
        font-size: 13px;
    }

    .loan-dashboard-summary .request-card strong,
    .analytics-card strong {
        font-size: 24px;
    }

    /* Contribution / capital pages */
    .contribution-summary-card h2,
    .contribution-payment-card h2 {
        font-size: clamp(26px, 4vw, 38px);
    }

    .kpi-card span,
    .summary-mini-stats span {
        font-size: 12px;
    }

    .kpi-card strong {
        font-size: 22px;
    }

    /* Mobile refinement */
    @media (max-width: 768px) {
        html {
            font-size: 14.5px;
        }

        body {
            font-size: 13.5px;
        }

        h1,
        .admin-overview-head h1,
        .dashboard-hero h1,
        .membership-head h1 {
            font-size: clamp(24px, 7vw, 30px);
        }

        h2 {
            font-size: clamp(20px, 6vw, 26px);
        }

        .admin-stat-card strong,
        .loan-dashboard-summary .request-card strong,
        .analytics-card strong {
            font-size: 24px;
        }

        .button-primary,
        .button-secondary,
        input,
        select,
        textarea {
            font-size: 14px;
        }

        .admin-side-link,
        .client-nav-pill,
        .client-menu-item {
            font-size: 14px;
        }
    }

    /* Admin user detail header fix */
    .admin-user-mini-header {
        padding: 28px 32px 0;
        border-radius: 24px;
        background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    }

    .admin-user-mini-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .admin-user-identity {
        display: flex;
        align-items: center;
        gap: 22px;
    }

    .admin-user-avatar {
        width: 84px;
        height: 84px;
        flex: 0 0 84px;
        border-radius: 50%;
        background: #f4eaf4;
    }

    .admin-user-identity h1 {
        margin: 4px 0 8px;
        font-size: clamp(28px, 3vw, 38px);
        line-height: 1.05;
    }

    .admin-user-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 14px;
        margin: 0;
        color: var(--muted);
        font-size: 14px;
    }

    .admin-user-meta span {
        display: inline-flex;
        align-items: center;
    }

    .admin-user-meta span + span::before {
        content: "•";
        margin-right: 14px;
        color: #cbd5e1;
    }

    .admin-user-header-actions {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .admin-user-state {
        min-height: 42px;
        padding: 0 18px;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .admin-user-tabs {
        margin-top: 28px;
    }

    @media (max-width: 768px) {
        .admin-user-mini-header {
            padding: 22px 20px 0;
        }

        .admin-user-mini-top {
            align-items: flex-start;
            flex-direction: column;
        }

        .admin-user-identity {
            align-items: flex-start;
        }

        .admin-user-avatar {
            width: 68px;
            height: 68px;
            flex-basis: 68px;
        }

        .admin-user-identity h1 {
            font-size: 28px;
        }

        .admin-user-header-actions {
            width: 100%;
            justify-content: space-between;
        }

        .admin-user-tabs {
            gap: 22px;
            overflow-x: auto;
            padding-bottom: 0;
        }
    }

    .admin-user-mini-top {
        align-items: center;
    }

    .admin-user-identity {
        align-items: center;
    }

    .admin-user-identity h1 {
        font-size: clamp(26px, 3vw, 34px);
        line-height: 1.08;
    }

    .admin-user-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
        margin: 0;
    }

    .admin-user-meta span + span::before {
        content: "•";
        margin-right: 14px;
        color: #cbd5e1;
    }

    @media (max-width: 768px) {
        .admin-user-mini-top {
            align-items: flex-start;
            flex-direction: column;
        }

        .admin-user-header-actions {
            width: 100%;
            justify-content: space-between;
        }
    }

    .admin-table-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .admin-table-actions form {
        margin: 0;
    }

    .expense-adjustments-table {
        min-width: 920px;
    }

    .expense-adjustments-table th:nth-child(7),
    .expense-adjustments-table td:nth-child(7) {
        min-width: 220px;
        white-space: normal;
    }

    .expense-adjustments-table td[data-label="Actions"] {
        white-space: nowrap;
    }

    .table-action-icon.is-danger {
        color: var(--danger);
        border-color: rgba(180, 35, 24, 0.18);
        background: #ffffff;
    }

    .table-action-icon.is-danger:hover {
        background: var(--danger-bg);
    }

    @media (max-width: 768px) {
        .client-header {
            grid-template-columns: auto minmax(0, 1fr) auto;
            grid-template-areas: "brand nav user";
            align-items: center;
            gap: 8px;
            min-height: 70px;
            padding: 10px 10px;
        }

        .client-brand {
            grid-area: brand;
            flex: 0 0 auto;
        }

        .client-brand .nav-logo {
            max-width: 86px;
            max-height: 36px;
        }

        .client-userbar {
            grid-area: user;
            justify-self: end;
            flex: 0 0 auto;
            gap: 6px;
        }

        .client-main-nav {
            grid-area: nav;
            justify-content: flex-start;
            min-width: 0;
            width: 100%;
            overflow-x: auto;
            padding: 0;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }

        .client-main-nav::-webkit-scrollbar {
            display: none;
        }

        .client-nav-pill {
            flex: 0 0 44px;
        }

        .client-notification,
        .client-avatar {
            width: 40px;
            height: 40px;
        }
    }
    /* Notifications */
    .notifications-page {
        max-width: 980px;
    }

    .notifications-list {
        display: grid;
        gap: 10px;
    }

    .notification-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        padding: 16px;
        color: inherit;
        background: #fff;
        border: 1px solid #d9e1e7;
        border-radius: 8px;
    }

    .notification-row:hover {
        border-color: #8aa2b3;
    }

    .notification-row.is-unread {
        background: #f7fbff;
        border-color: #9cc7e6;
    }

    .notification-row-link {
        display: grid;
        grid-template-columns: 10px minmax(0, 1fr) auto;
        gap: 14px;
        align-items: center;
        min-width: 0;
        color: inherit;
        text-decoration: none;
    }

    .notification-row form,
    .notification-detail-actions form {
        margin: 0;
    }

    .notification-delete-button {
        min-height: 38px;
        border: 1px solid rgba(180, 35, 24, 0.22);
        border-radius: 8px;
        background: #ffffff;
        color: var(--danger);
        cursor: pointer;
        font-weight: 700;
        padding: 0 12px;
    }

    .notification-delete-button:hover {
        background: var(--danger-bg);
        border-color: rgba(180, 35, 24, 0.38);
    }

    .notification-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #b8c4ce;
    }

    .notification-row.is-unread .notification-dot {
        background: #1570ef;
    }

    .notification-row strong,
    .notification-row small {
        display: block;
    }

    .notification-row small {
        margin-top: 4px;
        color: #667085;
    }

    .notification-row time {
        color: #667085;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .notification-detail-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    @media (max-width: 640px) {
        .notification-row,
        .notification-row-link {
            grid-template-columns: 1fr;
        }

        .notification-dot {
            display: none;
        }

        .notification-row form,
        .notification-row form button,
        .notification-detail-actions,
        .notification-detail-actions a,
        .notification-detail-actions button {
            width: 100%;
        }
    }

    /* Asset module */
    .inline-check {
        align-items: center;
        display: flex;
        gap: 10px;
        font-weight: 500;
    }

    .inline-check input {
        width: auto;
    }

    .asset-file-links {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 12px;
    }

    .asset-usage-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }

    .request-status.is-available,
    .request-status.is-returned {
        background: #ecfdf3;
        color: #087443;
    }

    .request-status.is-allocated {
        background: #eff6ff;
        color: #175cd3;
    }

    .request-status.is-retired {
        background: #f2f4f7;
        color: #667085;
    }

    /* Client dashboard fit */
    .dashboard-shell:has(.client-dashboard-home) {
        display: flex;
        align-items: stretch;
        padding-block: clamp(8px, 1.4vh, 14px);
    }

    .client-dashboard-home {
        gap: clamp(8px, 1.4vh, 14px);
        width: 100%;
    }

    .client-dashboard-home .client-action-tile {
        min-height: clamp(80px, 12vh, 104px);
    }

    @media (max-width: 768px) {
        .dashboard-shell:has(.client-dashboard-home) {
            width: min(100% - 20px, 1120px);
            padding-block: 8px;
        }

        .client-dashboard-home {
            gap: 8px;
            padding: 14px 12px;
            border-radius: 12px;
        }

        .client-dashboard-home .client-dashboard-head {
            gap: 8px;
        }

        .client-dashboard-home h1 {
            font-size: clamp(21px, 6vw, 28px);
        }

        .client-dashboard-home .client-dashboard-status {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 8px 10px;
        }

        .client-dashboard-home .client-action-tiles {
            gap: 8px;
        }

        .client-dashboard-home .client-action-tile {
            min-height: clamp(66px, 10vh, 84px);
            padding: 7px 5px;
        }

        .client-dashboard-home .client-action-icon {
            width: 32px;
            height: 32px;
            font-size: 18px;
        }

        .client-dashboard-home .client-action-tile strong {
            font-size: 12px;
            line-height: 1.15;
        }

        .client-dashboard-home .client-summary-card {
            min-height: 46px;
            padding: 7px 10px;
        }

        .client-page:has(.client-dashboard-home) .client-footer {
            padding-block: 8px;
        }
    }

    @media (max-width: 420px) {
        .client-dashboard-home {
            padding: 12px 10px;
        }

        .client-dashboard-home .client-action-tile {
            min-height: 62px;
        }
    }

    /* Responsive navigation normalization */
    .client-header {
        grid-template-columns: minmax(112px, auto) minmax(0, 1fr) auto;
        gap: clamp(8px, 2vw, 18px);
    }

    .client-brand,
    .client-main-nav,
    .client-userbar {
        min-width: 0;
    }

    .client-brand .nav-logo {
        width: auto;
        height: auto;
        max-width: clamp(86px, 14vw, 150px);
        max-height: 48px;
    }

    .client-main-nav {
        justify-content: center;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .client-main-nav::-webkit-scrollbar {
        display: none;
    }

    .client-nav-pill {
        flex: 0 0 auto;
        min-width: 0;
        max-width: 100%;
    }

    .client-userbar {
        flex: 0 0 auto;
    }

    @media (max-width: 1024px) {
        .client-header {
            padding-inline: 14px;
        }

        .client-main-nav {
            justify-content: flex-start;
        }

        .client-nav-pill {
            min-height: 42px;
            padding-inline: 14px;
        }
    }

    @media (max-width: 768px) {
        .client-header {
            grid-template-columns: auto minmax(0, 1fr) auto;
            grid-template-areas: "brand nav user";
            gap: 8px;
            min-height: 64px;
            padding: 10px;
        }

        .client-brand {
            grid-area: brand;
        }

        .client-main-nav {
            grid-area: nav;
            gap: 8px;
            padding: 0 2px;
        }

        .client-userbar {
            grid-area: user;
            justify-self: end;
            gap: 6px;
        }

        .client-brand .nav-logo {
            max-width: 86px;
            max-height: 36px;
        }

        .client-nav-pill {
            width: 42px;
            min-width: 42px;
            height: 42px;
            min-height: 42px;
            padding: 0;
            gap: 0;
        }

        .client-nav-pill.is-active::after {
            bottom: -6px;
            width: 16px;
            height: 3px;
        }

        .nav-label {
            display: none;
        }

        .nav-icon,
        .client-nav-pill .ui-icon,
        .client-nav-pill iconify-icon {
            width: 1.2em;
            height: 1.2em;
            font-size: 21px;
        }

        .client-user-summary {
            display: none;
        }

        .client-notification,
        .client-avatar {
            width: 40px;
            height: 40px;
        }

        .client-menu-panel {
            right: 0;
            width: min(280px, calc(100vw - 20px));
        }
    }

    @media (max-width: 420px) {
        .client-header {
            gap: 6px;
            padding-inline: 8px;
        }

        .client-brand .nav-logo {
            max-width: 76px;
            max-height: 32px;
        }

        .client-main-nav {
            gap: 6px;
        }

        .client-nav-pill {
            width: 38px;
            min-width: 38px;
            height: 38px;
            min-height: 38px;
        }

        .nav-icon,
        .client-nav-pill .ui-icon,
        .client-nav-pill iconify-icon {
            font-size: 19px;
        }

        .client-notification,
        .client-avatar {
            width: 36px;
            height: 36px;
        }
    }

    @media (max-width: 340px) {
        .client-brand .nav-logo {
            max-width: 64px;
        }

        .client-nav-pill {
            width: 34px;
            min-width: 34px;
            height: 34px;
            min-height: 34px;
        }

        .client-notification,
        .client-avatar {
            width: 34px;
            height: 34px;
        }
    }

    .admin-side-nav,
    .admin-side-list,
    .admin-side-dropdown {
        min-width: 0;
    }

    .admin-side-link {
        min-width: 0;
    }

    .admin-side-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    @media (max-width: 768px) {
        .admin-sidebar {
            max-width: 88vw;
        }

        .admin-topbar .client-userbar {
            min-width: 0;
            max-width: calc(100vw - 28px);
        }

        .admin-side-link {
            min-height: 44px;
        }
    }

    /* Balanced client/member header */
    .client-header-balanced {
        display: grid;
        grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
        align-items: center;
        gap: 16px;
    }

    .client-header-balanced .client-brand {
        justify-self: start;
    }

    .client-header-balanced .client-main-nav {
        justify-self: center;
    }

    .client-header-balanced .client-userbar {
        justify-self: end;
    }

    @media (max-width: 768px) {
        .client-nav-soon {
            position: absolute;
            top: -4px;
            right: -5px;
            min-height: 15px;
            padding: 0 5px;
            font-size: 8px;
        }

        .client-header-balanced {
            grid-template-columns: auto 1fr auto;
            min-height: 64px;
            padding: 0 10px;
            gap: 8px;
        }

        .client-header-balanced .nav-logo {
            height: 32px;
            max-width: 92px;
        }

        .client-header-balanced .client-main-nav {
            justify-self: center;
            display: flex;
            justify-content: center;
            gap: 6px;
        }

        .client-header-balanced .client-nav-pill {
            width: 44px;
            height: 44px;
            min-width: 44px;
            min-height: 44px;
            padding: 0;
            border-radius: 50%;
        }

        .client-header-balanced .nav-label {
            display: none;
        }

        .client-header-balanced .nav-icon {
            font-size: 20px;
        }

        .client-header-balanced .client-userbar {
            gap: 6px;
        }

        .client-header-balanced .client-user-summary {
            display: none;
        }

        .client-header-balanced .client-notification,
        .client-header-balanced .client-avatar {
            width: 42px;
            height: 42px;
        }
    }

    /* Client dashboard responsive enhancement */
    .client-home {
        display: grid;
        gap: 22px;
    }

    .client-home-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 18px;
        padding: clamp(22px, 4vw, 36px);
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 24px;
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.08), transparent 260px),
            #ffffff;
        box-shadow: var(--shadow-card);
    }

    .client-home-hero h1 {
        max-width: 720px;
        font-size: clamp(28px, 4vw, 42px);
        line-height: 1.08;
    }

    .client-home-hero p {
        max-width: 620px;
        margin: 12px 0 0;
        color: var(--muted);
    }

    .client-dashboard-status {
        display: grid;
        gap: 6px;
        min-width: 180px;
        padding: 14px 16px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 16px;
        background: #fbf8ff;
    }

    .client-dashboard-status span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .client-rating-stars {
        color: #d99a00;
        font-size: 18px;
        letter-spacing: 1px;
    }

    .client-action-tiles {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .client-action-tile {
        display: grid;
        gap: 10px;
        min-height: 150px;
        padding: 22px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 20px;
        background: #ffffff;
        color: var(--text);
        box-shadow: var(--shadow-card);
        transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    }

    .client-action-tile:hover {
        transform: translateY(-2px);
        border-color: rgba(var(--primary-rgb), 0.28);
        box-shadow: 0 16px 34px rgba(23, 33, 43, 0.09);
    }

    .client-action-tile strong {
        font-size: 17px;
    }

    .client-action-tile small {
        color: var(--muted);
        font-size: 13px;
    }

    .client-action-tile.is-featured {
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.12), transparent 180px),
            #ffffff;
    }

    .client-action-icon,
    .client-summary-icon {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 16px;
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-dark);
        font-size: 24px;
    }

    .client-dashboard-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .client-summary-card {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 18px;
        background: #f8fbff;
    }

    .client-summary-card div {
        display: grid;
        gap: 4px;
    }

    .client-summary-card span {
        color: var(--muted);
    }

    .client-summary-card strong {
        color: var(--primary-dark);
        font-size: 24px;
    }

    @media (max-width: 768px) {
        .dashboard-shell {
            width: min(100% - 20px, 100%);
            padding: 14px 0 22px;
        }

        .client-home {
            gap: 14px;
        }

        .client-home-hero {
            grid-template-columns: 1fr;
            padding: 18px;
            border-radius: 18px;
        }

        .client-home-hero h1 {
            font-size: 25px;
            line-height: 1.12;
        }

        .client-home-hero p {
            font-size: 14px;
        }

        .client-dashboard-status {
            min-width: 0;
            width: 100%;
            grid-template-columns: 1fr auto;
            align-items: center;
        }

        .client-action-tiles {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }

        .client-action-tile {
            justify-items: center;
            min-height: 112px;
            padding: 14px 8px;
            text-align: center;
            border-radius: 14px;
        }

        .client-action-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            font-size: 20px;
        }

        .client-action-tile strong {
            font-size: 13px;
            line-height: 1.2;
        }

        .client-action-tile small {
            display: none;
        }

        .client-dashboard-summary {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .client-summary-card {
            padding: 14px;
            border-radius: 14px;
        }

        .client-summary-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            font-size: 20px;
        }

        .client-summary-card strong {
            font-size: 21px;
        }
    }

    .client-user-summary {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .client-user-name {
        background: transparent !important;
    }

    .client-user-role {
        background: transparent !important;
    }

    /* Client membership upgrade page */
    .membership-upgrade-page {
        display: grid;
    }

    .membership-upgrade-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
        overflow: hidden;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 26px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .membership-copy {
        display: grid;
        align-content: center;
        gap: 22px;
        padding: clamp(24px, 5vw, 48px);
    }

    .membership-copy h1 {
        max-width: 560px;
        font-size: clamp(30px, 4vw, 46px);
        line-height: 1.04;
    }

    .membership-lead {
        max-width: 640px;
        margin: 0;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.65;
    }

    .membership-benefits {
        display: grid;
        gap: 12px;
    }

    .membership-benefits div {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--text);
        font-weight: 600;
    }

    .membership-benefits iconify-icon {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        padding: 9px;
        border-radius: 12px;
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-dark);
    }

    .membership-upgrade-form {
        max-width: 620px;
    }

    .membership-upgrade-form textarea {
        min-height: 130px;
    }

    .membership-submit,
    .membership-action-link {
        width: fit-content;
        min-height: 46px;
        padding: 0 20px;
    }

    .membership-visual {
        min-height: 100%;
        margin: 0;
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.2), transparent 280px),
            #f7f3fb;
    }

    .membership-visual img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 520px;
        object-fit: cover;
        object-position: center;
    }

    @media (max-width: 900px) {
        .membership-upgrade-card {
            grid-template-columns: 1fr;
        }

        .membership-visual {
            order: -1;
            max-height: 260px;
        }

        .membership-visual img {
            min-height: 260px;
        }
    }

    @media (max-width: 600px) {
        .membership-upgrade-card {
            border-radius: 18px;
        }

        .membership-copy {
            gap: 18px;
            padding: 22px 18px;
        }

        .membership-copy h1 {
            font-size: 29px;
        }

        .membership-lead {
            font-size: 14px;
        }

        .membership-benefits div {
            align-items: flex-start;
            font-size: 14px;
        }

        .membership-submit,
        .membership-action-link {
            width: 100%;
        }
    }

    /* Global notification badge fix */
    .client-notification {
        position: relative;
        overflow: visible;
    }

    .client-notification > span {
        position: absolute;
        top: -4px;
        right: -4px;
        z-index: 2;
        display: inline-grid;
        place-items: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--primary);
        color: #ffffff;
        border: 2px solid #ffffff;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 6px 14px rgba(var(--primary-rgb), 0.22);
    }

    /* Remove old bell-shape pseudo styling from notification spans */
    .client-notification > span::before,
    .client-notification > span::after {
        content: none !important;
        display: none !important;
    }

    @media (max-width: 768px) {
        .client-notification > span {
            top: -3px;
            right: -3px;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            font-size: 10px;
        }
    }

    /* ==========================================================
    FINAL CARD VALUE SIZE NORMALISATION
    Keeps dashboard/card amounts consistent, even for millions.
    Added by ChatGPT.
    ========================================================== */

    :root {
        --card-value-size: 1.45rem;
        --card-value-size-mobile: 1.28rem;
        --card-value-line-height: 1.08;
    }

    /* Give all KPI/card content enough room to shrink without overflowing */
    .member-finance-card,
    .member-analytics-card,
    .client-summary-card,
    .loan-overview-card,
    .transfer-overview-card,
    .admin-stat-card,
    .kpi-card,
    .contribution-summary-card,
    .contribution-payment-card,
    .loan-history-metrics div,
    .transfer-record-grid div,
    .dashboard-chart-card,
    .quick-action-card {
        min-width: 0;
        overflow: hidden;
    }

    .member-finance-card > div,
    .member-analytics-card > div,
    .client-summary-card > div,
    .loan-overview-card > div,
    .transfer-overview-card > div,
    .admin-stat-card > div,
    .kpi-card > div,
    .loan-history-metrics div,
    .transfer-record-grid div,
    .dashboard-chart-head,
    .cash-position-list div,
    .action-centre-row {
        min-width: 0;
    }

    /* Main money/value text across dashboard and finance cards */
    .member-finance-card strong,
    .client-summary-card strong,
    .loan-overview-card strong,
    .transfer-overview-card strong,
    .admin-stat-card strong,
    .kpi-card strong,
    .loan-dashboard-summary .request-card strong,
    .analytics-card strong,
    .loan-history-metrics strong,
    .transfer-record-grid strong,
    .cash-position-list strong,
    .action-centre-row strong {
        display: block;
        max-width: 100%;
        color: var(--primary-dark);
        font-size: var(--card-value-size) !important;
        font-weight: 800;
        line-height: var(--card-value-line-height);
        letter-spacing: -0.025em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-variant-numeric: tabular-nums;
    }

    /* The four large member dashboard finance cards */
    .member-finance-card strong {
        margin-top: 8px;
    }

    /* Compact count cards should align visually with financial cards */
    .member-analytics-card strong {
        font-size: var(--card-value-size) !important;
        font-variant-numeric: tabular-nums;
    }

    /* Prevent icons from stealing too much space on large values */
    .member-card-icon,
    .client-summary-icon,
    .loan-overview-icon,
    .transfer-overview-icon,
    .kpi-icon {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
    }

    /* Slightly tighter layout for the member dashboard finance grid */
    .member-finance-card {
        gap: 14px;
        padding: 22px;
    }

    .member-finance-card span:not(.member-card-icon) {
        font-size: 14px;
        line-height: 1.2;
    }

    /* Mobile size remains consistent but smaller */
    @media (max-width: 768px) {
        .member-finance-card strong,
        .member-analytics-card strong,
        .client-summary-card strong,
        .loan-overview-card strong,
        .transfer-overview-card strong,
        .admin-stat-card strong,
        .kpi-card strong,
        .loan-dashboard-summary .request-card strong,
        .analytics-card strong,
        .loan-history-metrics strong,
        .transfer-record-grid strong,
        .cash-position-list strong,
        .action-centre-row strong {
            font-size: var(--card-value-size-mobile) !important;
        }

        .member-finance-card {
            grid-template-columns: auto minmax(0, 1fr);
            gap: 12px;
            padding: 18px;
            min-height: 112px;
        }

        .member-card-icon,
        .client-summary-icon,
        .loan-overview-icon,
        .transfer-overview-icon,
        .kpi-icon {
            flex-basis: 42px;
            width: 42px;
            height: 42px;
            font-size: 20px;
        }
    }

    /* Very narrow screens: keep values readable and inside the card */
    @media (max-width: 420px) {
        :root {
            --card-value-size-mobile: 1.12rem;
        }

        .member-finance-card strong,
        .member-analytics-card strong,
        .client-summary-card strong,
        .loan-overview-card strong,
        .transfer-overview-card strong,
        .admin-stat-card strong,
        .kpi-card strong {
            letter-spacing: -0.035em;
        }
    }
    .transfer-centre {
        display: grid;
        gap: 26px;
    }

    .transfer-hero {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        padding: 34px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 26px;
        background: #fff;
        box-shadow: var(--shadow-card);
    }

    .transfer-overview-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px;
    }

    .transfer-overview-card {
        display: flex !important;
        align-items: center;
        gap: 14px;
        min-height: 108px;
        padding: 18px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 20px;
        background: #fff;
        box-shadow: var(--shadow-card);
    }

    .transfer-overview-icon {
        display: grid !important;
        place-items: center;
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 16px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 24px;
    }

    .transfer-overview-card div {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

    .transfer-overview-card span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 600;
    }

    .transfer-overview-card strong {
        color: var(--primary-dark);
        font-size: 1.55rem;
        font-weight: 800;
        line-height: 1.1;
        white-space: nowrap;
    }

    .transfer-create-card {
        display: grid;
        gap: 22px;
        padding: 28px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 26px;
        background: #fff;
        box-shadow: var(--shadow-card);
    }

    @media (max-width: 1100px) {
        .transfer-overview-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }

    @media (max-width: 768px) {
        .transfer-hero {
            flex-direction: column;
            align-items: stretch;
            padding: 22px;
            border-radius: 20px;
        }

        .transfer-overview-grid {
            grid-template-columns: 1fr !important;
        }
    }

    .transfer-search-form-inline {
        display: grid;
        gap: 8px;
        margin-top: 20px;
    }

    .transfer-search-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .transfer-search-wrapper input {
        width: 100%;
        height: 68px;
        padding: 0 160px 0 56px;
        border-radius: 18px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        background: #fff;
        font-size: 18px;
    }

    .transfer-search-icon {
        position: absolute;
        left: 20px;
        font-size: 24px;
        color: var(--muted);
        z-index: 2;
    }

    .transfer-search-btn {
        position: absolute;
        right: 10px;
        height: 50px;
        padding: 0 24px;
        border: 0;
        border-radius: 14px;
        background: var(--primary);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
        transition: 0.2s ease;
    }

    .transfer-search-btn:hover {
        opacity: 0.92;
    }

    /* ==========================================================
    TRANSFER RECORD PANEL FIX
    ========================================================== */

    .transfer-card-list {
        display: grid;
        gap: 16px;
        margin-top: 18px;
    }

    .transfer-record-card {
        display: grid;
        gap: 18px;
        padding: 24px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 22px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .transfer-record-card header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
    }

    .transfer-record-card h3 {
        margin: 4px 0 6px;
        color: var(--text);
        font-size: 23px;
        font-weight: 800;
    }

    .transfer-record-card p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
    }

    .transfer-record-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .transfer-record-grid div {
        display: grid;
        gap: 4px;
        padding: 14px;
        border-radius: 14px;
        background: #f8fbff;
    }

    .transfer-record-grid span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 600;
    }

    .transfer-record-grid strong {
        color: var(--primary-dark);
        font-size: 18px;
        font-weight: 800;
    }

    .transfer-record-card .settings-action-link {
        justify-self: start;
        min-height: 42px;
        padding: 0 16px;
        border-radius: 12px;
        background: #ffffff;
    }

    @media (max-width: 768px) {
        .transfer-record-card header {
            flex-direction: column;
        }

        .transfer-record-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ==========================================================
    LOANS PAGE CARD LAYOUT FIX
    ========================================================== */

    .loan-centre {
        display: grid;
        gap: 26px;
    }

    .loan-hero {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        padding: 34px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 26px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .loan-overview-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px;
    }

    .loan-overview-card {
        display: flex !important;
        align-items: center;
        gap: 14px;
        min-height: 108px;
        padding: 18px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 20px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .loan-overview-icon {
        display: grid !important;
        place-items: center;
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 16px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 24px;
    }

    .loan-overview-card div {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

    .loan-overview-card span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 600;
    }

    .loan-overview-card strong {
        color: var(--primary-dark);
        font-size: 1.55rem;
        font-weight: 800;
        line-height: 1.1;
        white-space: nowrap;
    }

    .loan-request-card {
        display: grid;
        gap: 22px;
        padding: 28px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 26px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    @media (max-width: 1100px) {
        .loan-overview-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }

    @media (max-width: 768px) {
        .loan-hero {
            flex-direction: column;
            align-items: stretch;
            padding: 22px;
            border-radius: 20px;
        }

        .loan-overview-grid {
            grid-template-columns: 1fr !important;
        }
    }

    .loan-search-form-inline {
        display: grid;
        gap: 8px;
        margin-top: 20px;
    }

    .loan-search-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .loan-search-wrapper input {
        width: 100%;
        height: 68px;
        padding: 0 150px 0 56px;
        border-radius: 18px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        background: #ffffff;
        font-size: 18px;
    }

    .loan-search-icon {
        position: absolute;
        left: 20px;
        z-index: 2;
        color: var(--muted);
        font-size: 24px;
    }

    .loan-search-btn {
        position: absolute;
        right: 10px;
        height: 50px;
        padding: 0 24px;
        border: 0;
        border-radius: 14px;
        background: var(--primary);
        color: #ffffff;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 12px 26px rgba(var(--primary-rgb), 0.18);
    }

    .loan-search-btn:hover {
        background: var(--primary-dark);
    }

    /* ==========================================================
    LOAN STEP 2 - REPAYMENT PLAN PANEL FIX
    ========================================================== */

    .loan-panel-modern[data-step-panel="2"] {
        gap: 24px;
    }

    .loan-panel-modern[data-step-panel="2"] .selected-guarantor-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 18px;
        padding: 18px 20px;
        border-radius: 18px;
        background: #f8fbff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
    }

    .loan-panel-modern[data-step-panel="2"] .loan-simulator-inputs {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr);
        gap: 16px;
    }

    .loan-panel-modern[data-step-panel="2"] input,
    .loan-panel-modern[data-step-panel="2"] select {
        min-height: 58px;
        border-radius: 16px;
        font-size: 16px;
    }

    .loan-panel-modern[data-step-panel="2"] .loan-simulator-result {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        padding: 16px;
        border-radius: 20px;
        background: #f8fbff;
    }

    .loan-panel-modern[data-step-panel="2"] .loan-simulator-result > div {
        display: grid;
        gap: 6px;
        padding: 16px;
        border-radius: 16px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
    }

    .loan-panel-modern[data-step-panel="2"] .loan-simulator-result span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
    }

    .loan-panel-modern[data-step-panel="2"] .loan-simulator-result strong {
        color: var(--primary-dark);
        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1.1;
        white-space: nowrap;
    }

    .loan-panel-modern[data-step-panel="2"] .loan-preview-schedule {
        grid-column: 1 / -1;
        display: grid;
        gap: 10px;
        padding-top: 4px;
    }

    .loan-panel-modern[data-step-panel="2"] .loan-preview-schedule p {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin: 0;
        padding: 14px 16px;
        border-radius: 14px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
    }

    .loan-panel-modern[data-step-panel="2"] .loan-step-actions {
        margin-top: 8px;
    }

    @media (max-width: 900px) {
        .loan-panel-modern[data-step-panel="2"] .loan-simulator-inputs,
        .loan-panel-modern[data-step-panel="2"] .loan-simulator-result {
            grid-template-columns: 1fr;
        }

        .loan-panel-modern[data-step-panel="2"] .selected-guarantor-card {
            grid-template-columns: 1fr;
        }
    }

    /* ==========================================================
    LOAN STEP 3 - REVIEW AND SUBMIT FIX
    ========================================================== */

    .loan-panel-modern[data-step-panel="3"] {
        gap: 24px;
    }

    .loan-panel-modern[data-step-panel="3"] .loan-review-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-top: 18px;
        padding: 16px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 20px;
        background: #f8fbff;
    }

    .loan-panel-modern[data-step-panel="3"] .loan-review-row {
        display: grid;
        gap: 6px;
        padding: 16px;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        border-radius: 16px;
        background: #ffffff;
    }

    .loan-panel-modern[data-step-panel="3"] .loan-review-row span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
    }

    .loan-panel-modern[data-step-panel="3"] .loan-review-row strong {
        color: var(--primary-dark);
        font-size: 18px;
        font-weight: 800;
        text-align: left;
    }

    .loan-panel-modern[data-step-panel="3"] .loan-confirm-note {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        border: 1px solid #bfd9f5;
        border-radius: 16px;
        background: #eff6ff;
        color: #175a95;
    }

    .loan-panel-modern[data-step-panel="3"] .loan-confirm-note p {
        margin: 0;
    }

    .loan-panel-modern[data-step-panel="3"] .loan-confirm-note .ui-icon {
        font-size: 22px;
        margin-top: 2px;
    }

    .loan-panel-modern[data-step-panel="3"] .loan-step-actions {
        margin-top: 10px;
    }

    @media (max-width: 768px) {
        .loan-panel-modern[data-step-panel="3"] .loan-review-card {
            grid-template-columns: 1fr;
        }
    }

    .loan-overview-card strong {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ==========================================================
    LOAN REQUEST HISTORY CARD FIX
    ========================================================== */

    .loan-history-list {
        display: grid;
        gap: 18px;
        margin-top: 18px;
    }

    .loan-history-card {
        display: grid;
        gap: 18px;
        padding: 24px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 24px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .loan-history-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
    }

    .loan-history-card-head h2 {
        margin: 4px 0 8px;
        font-size: 26px;
        font-weight: 800;
    }

    .loan-history-card-head p {
        margin: 0;
        color: var(--muted);
    }

    .loan-history-metrics {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .loan-history-metrics div {
        display: grid;
        gap: 4px;
        padding: 16px;
        border-radius: 16px;
        background: #f8fbff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
    }

    .loan-history-metrics span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
    }

    .loan-history-metrics strong {
        color: var(--primary-dark);
        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1.1;
        white-space: nowrap;
    }

    .loan-status-timeline {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .loan-status-timeline span {
        display: grid;
        place-items: center;
        min-height: 36px;
        padding: 0 12px;
        border-radius: 999px;
        background: #f2f4f7;
        color: #667085;
        font-size: 12px;
        font-weight: 800;
        text-align: center;
    }

    .loan-status-timeline span.is-complete {
        background: #ecfdf3;
        color: #087443;
    }

    .loan-status-timeline span.is-current {
        background: #fffbeb;
        color: #925c00;
    }

    @media (max-width: 768px) {
        .loan-history-card-head {
            flex-direction: column;
        }

        .loan-history-metrics,
        .loan-status-timeline {
            grid-template-columns: 1fr;
        }

        .loan-history-metrics strong {
            font-size: 1.2rem;
        }
    }

    /* ==========================================================
    TRANSFER STEP 2 - RECIPIENT + AMOUNT UI FIX
    ========================================================== */

    .transfer-panel-modern[data-step-panel="2"] {
        gap: 24px;
    }

    .transfer-selected-recipient {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px 20px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 18px;
        background: #f8fbff;
    }

    .transfer-selected-recipient .transfer-recipient-avatar {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 16px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-weight: 800;
        font-size: 20px;
    }

    .transfer-selected-recipient div {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

    .transfer-selected-recipient span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
    }

    .transfer-selected-recipient strong {
        color: var(--text);
        font-size: 18px;
        font-weight: 800;
    }

    .transfer-selected-recipient small {
        color: var(--muted);
        font-size: 13px;
    }

    .transfer-amount-form {
        display: grid;
        gap: 18px;
    }

    .transfer-amount-form input {
        min-height: 58px;
        border-radius: 16px;
        font-size: 16px;
    }

    .transfer-simulator {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        padding: 16px;
        border-radius: 20px;
        background: #f8fbff;
    }

    .transfer-simulator > div {
        display: grid;
        gap: 6px;
        padding: 16px;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        border-radius: 16px;
        background: #ffffff;
    }

    .transfer-simulator span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
    }

    .transfer-simulator strong {
        color: var(--primary-dark);
        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1.1;
        white-space: nowrap;
    }

    .transfer-panel-modern[data-step-panel="2"] .loan-step-actions {
        margin-top: 8px;
    }

    @media (max-width: 768px) {
        .transfer-selected-recipient {
            align-items: flex-start;
        }

        .transfer-simulator {
            grid-template-columns: 1fr !important;
        }
    }

    /* ==========================================================
    TRANSFER STEP 3 - CONFIRM TRANSFER FIX
    ========================================================== */

    .transfer-panel-modern[data-step-panel="3"] {
        gap: 24px;
    }

    .transfer-panel-modern[data-step-panel="3"] .transfer-review-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-top: 18px;
        padding: 16px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 20px;
        background: #f8fbff;
    }

    .transfer-panel-modern[data-step-panel="3"] .transfer-review-row {
        display: grid;
        gap: 6px;
        padding: 16px;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        border-radius: 16px;
        background: #ffffff;
    }

    .transfer-panel-modern[data-step-panel="3"] .transfer-review-row span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
    }

    .transfer-panel-modern[data-step-panel="3"] .transfer-review-row strong {
        color: var(--primary-dark);
        font-size: 18px;
        font-weight: 800;
        text-align: left;
    }

    .transfer-panel-modern[data-step-panel="3"] .transfer-review-row.is-total {
        background: rgba(var(--primary-rgb), 0.06);
    }

    .transfer-panel-modern[data-step-panel="3"] .transfer-review-row.is-total strong {
        font-size: 22px;
    }

    .transfer-panel-modern[data-step-panel="3"] .transfer-confirm-note {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        border: 1px solid #bfd9f5;
        border-radius: 16px;
        background: #eff6ff;
        color: #175a95;
    }

    .transfer-panel-modern[data-step-panel="3"] .transfer-confirm-note p {
        margin: 0;
    }

    .transfer-panel-modern[data-step-panel="3"] .transfer-confirm-note .ui-icon {
        font-size: 22px;
        margin-top: 2px;
    }

    .transfer-panel-modern[data-step-panel="3"] .loan-step-actions {
        margin-top: 10px;
    }

    @media (max-width: 768px) {
        .transfer-panel-modern[data-step-panel="3"] .transfer-review-card {
            grid-template-columns: 1fr;
        }
    }


    /* ==========================================================
    CLIENT DASHBOARD SUMMARY CARDS - 3 COLUMNS FIX
    Forces Active loans, Total payable amount, and Next due date
    onto one equal-width row on desktop.
    ========================================================== */

    .client-dashboard-summary {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
        margin-top: 18px;
        width: 100%;
    }

    .client-summary-card {
        display: flex !important;
        align-items: center;
        gap: 14px;
        width: 100%;
        min-width: 0;
        min-height: 92px;
        padding: 18px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 18px;
        background: #f8fbff;
        overflow: hidden;
    }

    .client-summary-card > div {
        display: grid;
        gap: 4px;
        min-width: 0;
        flex: 1 1 auto;
    }

    .client-summary-card span {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.35;
    }

    .client-summary-card strong {
        display: block;
        max-width: 100%;
        color: var(--primary-dark);
        font-size: 1.45rem !important;
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -0.025em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-variant-numeric: tabular-nums;
    }

    .client-summary-icon {
        display: grid !important;
        place-items: center;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border-radius: 16px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 23px;
    }

    @media (min-width: 769px) {
        .client-dashboard-summary {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
    }

    @media (max-width: 768px) {
        .client-dashboard-summary {
            grid-template-columns: 1fr !important;
            gap: 10px !important;
        }

        .client-summary-card {
            min-height: 74px;
            padding: 14px;
            border-radius: 14px;
        }

        .client-summary-icon {
            flex-basis: 42px;
            width: 42px;
            height: 42px;
            border-radius: 12px;
            font-size: 20px;
        }

        .client-summary-card strong {
            font-size: 1.28rem !important;
        }
    }

    @media (max-width: 768px) {

        .app-header .header-nav {
            justify-content: center !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

    }

    /* ==================================================
    MOBILE NAVIGATION CENTER FIX
    ================================================== */
    @media (max-width: 768px) {

        .client-main-nav {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin: 0 auto;
            overflow-x: auto;
            scrollbar-width: none;
        }

        .client-main-nav::-webkit-scrollbar {
            display: none;
        }

        .client-nav-pill {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .client-nav-pill .nav-icon,
        .client-nav-pill iconify-icon,
        .client-nav-pill .ui-icon {
            margin: 0;
        }
    }

    /* ==========================================================
    TRANSFER OUTGOING / INCOMING SECTION FIX
    ========================================================== */

    .transfer-history {
        display: grid;
        gap: 18px;
        width: min(100%, 900px);
        margin: 0 auto;
        padding: 28px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 24px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .transfer-history .eyebrow {
        margin-bottom: 4px;
    }

    .transfer-history h2 {
        margin: 0;
        font-size: clamp(24px, 3vw, 32px);
    }

    .transfer-history > p {
        margin: 0;
        color: var(--muted);
    }

    .transfer-history .request-empty {
        margin-top: 4px;
        padding: 18px 20px;
        border-radius: 18px;
        background: #f8fbff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
    }

    @media (max-width: 768px) {
        .transfer-history {
            width: 100%;
            padding: 20px;
            border-radius: 20px;
        }
    }

    /* Banking pages */
    .banking-page {
        width: min(100%, 980px) !important;
        max-width: 980px;
        gap: 26px;
        padding: clamp(22px, 4vw, 36px);
    }

    .banking-page-head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 16px;
        align-items: center;
    }

    .banking-page-head .eyebrow,
    .banking-page-head h1,
    .banking-page-head .muted {
        grid-column: 2;
        margin-top: 0;
    }

    .banking-head-icon,
    .banking-form-head > span,
    .banking-group-head > span {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 24px;
    }

    .banking-page .access-tabs,
    .banking-admin-detail,
    .banking-tabs {
        justify-items: stretch;
    }

    .banking-page .access-tab-list,
    .banking-admin-detail .access-tab-list,
    .banking-tabs .access-tab-list {
        width: 100%;
        justify-content: flex-start;
        background: #f8fafc;
        border-color: #e4e7ec;
        box-shadow: none;
    }

    .banking-section-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        margin: 6px 0 16px;
    }

    .banking-section-head h2 {
        margin: 2px 0 0;
        color: var(--text);
        font-size: 24px;
    }

    .banking-section-head > span {
        flex: 0 0 auto;
        border: 1px solid #d0d5dd;
        border-radius: 999px;
        padding: 7px 12px;
        background: #ffffff;
        color: #344054;
        font-size: 13px;
        font-weight: 700;
    }

    .banking-account-group {
        display: grid;
        gap: 14px;
        margin-top: 18px;
    }

    .banking-group-head,
    .banking-form-head {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .banking-group-head h3,
    .banking-form-head h2 {
        margin: 0;
        color: var(--text);
        font-size: 20px;
    }

    .banking-form-head .eyebrow {
        margin-bottom: 4px;
    }

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

    .banking-account-card {
        display: grid;
        gap: 18px;
        min-width: 0;
        border: 1px solid #dbe7ef;
        border-radius: 8px;
        background: #ffffff;
        padding: 18px;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    }

    .banking-account-card header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    .banking-account-card header span {
        border-radius: 999px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .banking-account-card header strong {
        min-width: 0;
        color: var(--primary-dark);
        font-size: 19px;
        overflow-wrap: anywhere;
        text-align: right;
    }

    .banking-account-card dl,
    .banking-detail-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 0;
    }

    .admin-user-panel .banking-detail-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .banking-account-card dt,
    .banking-detail-list dt {
        margin-bottom: 4px;
        color: #667085;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .banking-account-card dd,
    .banking-detail-list dd {
        margin: 0;
        color: #101828;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .banking-empty-state {
        display: grid;
        gap: 5px;
        border: 1px dashed #cbd5e1;
        border-radius: 8px;
        background: #f8fafc;
        padding: 18px;
        color: #475467;
    }

    .banking-empty-state strong {
        color: #101828;
    }

    .banking-empty-state p {
        margin: 0;
    }

    .banking-form-card,
    .banking-detail-panel {
        border-radius: 8px;
        border-color: #dbe7ef;
    }

    .banking-form-card .form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .banking-form-card label span {
        color: #344054;
        font-weight: 700;
    }

    .banking-form-card input,
    .banking-form-card select {
        min-height: 46px;
    }

    .banking-summary-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 18px;
    }

    .banking-summary-grid .banking-stat-card {
        min-width: 0;
        border-radius: 8px;
        border-color: #dbe7ef;
        background: #ffffff;
    }

    .banking-stat-card span {
        color: #667085;
        font-weight: 700;
        text-transform: uppercase;
    }

    .banking-stat-card strong {
        font-size: clamp(19px, 2.2vw, 26px) !important;
        overflow-wrap: anywhere;
    }

    .banking-admin-page details.banking-form-card summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        cursor: pointer;
    }

    .banking-admin-page .access-tab-panel {
        width: 100%;
    }

    @media (max-width: 900px) {
        .banking-account-grid,
        .banking-summary-grid,
        .banking-form-card .form-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 560px) {
        .banking-page {
            padding: 20px;
        }

        .banking-page-head {
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .banking-page-head .eyebrow,
        .banking-page-head h1,
        .banking-page-head .muted {
            grid-column: 1;
        }

        .banking-section-head,
        .banking-account-card header {
            align-items: stretch;
            flex-direction: column;
        }

        .banking-section-head > span {
            width: fit-content;
        }

        .banking-account-card header strong {
            text-align: left;
        }

        .banking-account-card dl,
        .banking-detail-list,
        .admin-user-panel .banking-detail-list {
            grid-template-columns: 1fr;
        }
    }

    /* Admin documents */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .admin-documents-page {
        gap: 22px;
    }

    .document-hero .request-count {
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
    }

    .documents-layout {
        display: grid;
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
        gap: 18px;
        align-items: start;
    }

    .admin-documents-tabs .access-tab-list {
        width: 100%;
        justify-content: flex-start;
        background: #ffffff;
    }

    .admin-documents-tabs .access-tab-list a {
        gap: 8px;
    }

    .admin-documents-tabs .access-tab-list span {
        display: inline-grid;
        place-items: center;
        min-width: 24px;
        height: 24px;
        border-radius: 999px;
        background: #eef2f6;
        color: #475467;
        font-size: 12px;
        font-weight: 800;
    }

    .admin-documents-tabs .access-tab-list a.is-active span {
        background: var(--primary);
        color: #ffffff;
    }

    .admin-documents-workspace {
        display: grid;
        gap: 18px;
    }

    .documents-sidebar,
    .documents-main,
    .documents-folder-summary,
    .documents-results-card,
    .documents-create-card {
        min-width: 0;
    }

    .documents-panel-head,
    .documents-results-head,
    .documents-folder-summary header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
    }

    .documents-panel-head h2,
    .documents-results-head h2,
    .documents-folder-summary h2 {
        margin: 0;
        color: var(--text);
        font-size: 22px;
    }

    .documents-panel-head > span,
    .documents-folder-summary header > span {
        display: inline-grid;
        place-items: center;
        min-width: 34px;
        height: 34px;
        border-radius: 999px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-weight: 800;
    }

    .document-folder-form,
    .documents-upload-form {
        display: grid;
        gap: 14px;
        border: 1px solid #e4e7ec;
        border-radius: 8px;
        background: #f8fafc;
        padding: 16px;
    }

    .documents-create-card .document-folder-form .form-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }

    .documents-create-card .button-primary {
        justify-self: start;
        min-width: 180px;
    }

    .document-folder-form .button-primary,
    .documents-upload-form .button-primary,
    .documents-search-form .button-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .documents-folder-list {
        display: grid;
        gap: 8px;
    }

    .documents-folder-list a {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        border: 1px solid transparent;
        border-radius: 8px;
        padding: 12px;
        color: #344054;
        text-decoration: none;
    }

    .documents-folder-list a:hover,
    .documents-folder-list a.is-active {
        border-color: rgba(var(--primary-rgb), 0.18);
        background: rgba(var(--primary-rgb), 0.08);
    }

    .documents-folder-list strong,
    .documents-folder-list small {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .documents-folder-list small {
        margin-top: 2px;
        color: #667085;
        font-size: 12px;
    }

    .documents-folder-icon,
    .documents-empty-main > span {
        display: inline-grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 8px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 24px;
    }

    .documents-main {
        display: grid;
        gap: 18px;
    }

    .documents-folder-summary header p {
        margin: 6px 0 0;
        color: #667085;
    }

    .documents-upload-form .form-grid {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
    }

    .documents-results-head {
        align-items: center;
    }

    .documents-search-form {
        display: grid;
        grid-template-columns: minmax(220px, 1fr) auto auto;
        gap: 10px;
        align-items: center;
        width: min(100%, 560px);
    }

    .documents-search-form .button-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        border: 1px solid #d0d5dd;
        border-radius: 8px;
        padding: 0 14px;
        background: #ffffff;
        color: #344054;
    }

    .documents-empty,
    .documents-empty-main {
        display: grid;
        gap: 6px;
        border: 1px dashed #cbd5e1;
        border-radius: 8px;
        background: #f8fafc;
        padding: 18px;
        color: #475467;
    }

    .documents-empty-main {
        justify-items: center;
        padding: 42px 24px;
        text-align: center;
    }

    .documents-empty h2,
    .documents-empty-main h2,
    .documents-empty strong {
        margin: 0;
        color: #101828;
    }

    .documents-empty p,
    .documents-empty-main p {
        margin: 0;
    }

    .documents-table-wrap {
        overflow-x: auto;
    }

    .documents-table strong {
        color: var(--primary-dark);
    }

    .documents-table td {
        vertical-align: middle;
    }

    @media (max-width: 1100px) {
        .documents-layout {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 760px) {
        .documents-panel-head,
        .documents-results-head,
        .documents-folder-summary header {
            flex-direction: column;
        }

        .documents-upload-form .form-grid,
        .documents-search-form,
        .documents-create-card .document-folder-form .form-grid {
            grid-template-columns: 1fr;
            width: 100%;
        }

        .documents-create-card .button-primary {
            width: 100%;
        }
    }

    /* Member documents */
    .member-documents-page {
        display: grid;
        gap: 22px;
    }

    .member-documents-hero {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 8px;
        background: #ffffff;
        padding: clamp(22px, 4vw, 32px);
        box-shadow: var(--shadow-card);
    }

    .member-documents-hero h1 {
        margin: 0;
    }

    .member-documents-hero p:not(.eyebrow) {
        margin: 8px 0 0;
        color: #667085;
    }

    .member-documents-hero > span {
        flex: 0 0 auto;
        border-radius: 999px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        padding: 8px 13px;
        font-weight: 800;
    }

    .member-documents-tabs .access-tab-list {
        width: 100%;
        justify-content: flex-start;
        background: #ffffff;
    }

    .member-documents-tabs .access-tab-list a {
        gap: 8px;
    }

    .member-documents-tabs .access-tab-list span {
        display: inline-grid;
        place-items: center;
        min-width: 24px;
        height: 24px;
        border-radius: 999px;
        background: #eef2f6;
        color: #475467;
        font-size: 12px;
        font-weight: 800;
    }

    .member-documents-tabs .access-tab-list a.is-active span {
        background: var(--primary);
        color: #ffffff;
    }

    .member-documents-panel {
        border-radius: 8px;
    }

    .member-documents-panel .documents-results-head > div p:not(.eyebrow) {
        margin: 6px 0 0;
        color: #667085;
    }

    .member-document-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .member-document-card {
        display: grid;
        gap: 14px;
        min-width: 0;
        border: 1px solid #dbe7ef;
        border-radius: 8px;
        background: #ffffff;
        padding: 18px;
    }

    .member-document-icon {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 24px;
    }

    .member-document-card h3 {
        margin: 0;
        color: var(--text);
        font-size: 18px;
        overflow-wrap: anywhere;
    }

    .member-document-card p {
        margin: 5px 0 0;
        color: #667085;
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .member-document-card dl {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 0;
    }

    .member-document-card dt {
        margin-bottom: 3px;
        color: #667085;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .member-document-card dd {
        margin: 0;
        color: #101828;
        font-weight: 700;
    }

    .member-document-card .button-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    @media (max-width: 1100px) {
        .member-document-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 720px) {
        .member-documents-hero,
        .member-documents-panel .documents-results-head {
            align-items: stretch;
            flex-direction: column;
        }

        .member-documents-hero > span {
            width: fit-content;
        }

        .member-document-grid,
        .member-document-card dl {
            grid-template-columns: 1fr;
        }
    }

    /* Header avatar normalization */
    .client-avatar {
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        flex: 0 0 54px;
        height: 54px;
        line-height: 0;
        min-height: 54px;
        min-width: 54px;
        overflow: hidden;
        padding: 0;
        width: 54px;
    }

    .client-avatar .user-head-icon {
        aspect-ratio: 1 / 1;
        border-radius: inherit;
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: center;
        width: 100%;
    }

    .admin-user-mini-header .admin-user-avatar {
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        flex: 0 0 84px;
        height: 84px;
        overflow: hidden;
        width: 84px;
    }

    .admin-user-mini-header .admin-user-avatar img {
        aspect-ratio: 1 / 1;
        border-radius: inherit;
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: center;
        width: 100%;
    }

    @media (max-width: 680px) {
        .client-avatar {
            flex-basis: 40px;
            height: 40px;
            min-height: 40px;
            min-width: 40px;
            width: 40px;
        }

        .admin-user-mini-header .admin-user-avatar {
            flex-basis: 68px;
            height: 68px;
            width: 68px;
        }
    }

    @media (max-width: 420px) {
        .client-avatar {
            flex-basis: 36px;
            height: 36px;
            min-height: 36px;
            min-width: 36px;
            width: 36px;
        }
    }
    /* ==========================================================
    MODERN ADMIN SIDEBAR NAVIGATION
    ========================================================== */

    .admin-side-nav {
        padding: 18px 14px;
    }

    .admin-side-dropdown {
        margin-bottom: 14px;
    }

    .admin-side-dropdown-title {
        min-height: 42px;
        padding: 0 12px;
        border-radius: 12px;
        color: #7c8798;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .admin-side-group-heading {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .admin-side-group-icon {
        font-size: 18px;
        color: var(--primary-dark);
    }

    .admin-side-list {
        gap: 7px;
        margin-top: 8px;
    }

    .admin-side-link {
        min-height: 48px;
        padding: 0 14px;
        border-radius: 14px;
        color: #344054;
    }

    .admin-side-link:hover {
        background: rgba(var(--primary-rgb), 0.07);
        color: var(--primary-dark);
    }

    .admin-side-link.is-active {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: #ffffff;
        box-shadow: 0 14px 28px rgba(var(--primary-rgb), 0.22);
    }

    .admin-side-link.is-active .admin-side-icon {
        color: #ffffff;
    }

    .admin-side-count {
        min-width: 24px;
        height: 24px;
        margin-left: auto;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
    }

    .admin-side-link.is-active .admin-side-count {
        background: #ffffff;
        color: var(--primary-dark);
    }

    .table-action-menu {
        position: relative;
        display: inline-flex;
        justify-content: center;
    }

    .table-action-trigger {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(var(--primary-rgb), 0.14);
        border-radius: 12px;
        background: #ffffff;
        color: var(--primary-dark);
        cursor: pointer;
        font-size: 22px;
    }

    .table-action-trigger:hover {
        background: rgba(var(--primary-rgb), 0.08);
    }

    .table-action-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 100;
        display: none;
        min-width: 190px;
        padding: 8px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 22px 50px rgba(23, 33, 43, 0.16);
    }

    .table-action-menu:hover .table-action-dropdown,
    .table-action-menu:focus-within .table-action-dropdown {
        display: grid;
        gap: 4px;
    }

    .table-action-dropdown a {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 42px;
        padding: 0 12px;
        border-radius: 10px;
        color: #344054;
        font-size: 14px;
        font-weight: 700;
    }

    .table-action-dropdown a:hover {
        background: rgba(var(--primary-rgb), 0.08);
        color: var(--primary-dark);
    }

    .user-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 34px;
        padding: 0 12px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 800;
        white-space: nowrap;
    }

    .user-status-badge .ui-icon {
        font-size: 18px;
    }

    .user-status-badge.is-active {
        background: #ecfdf3;
        color: #087443;
    }

    .user-status-badge.is-suspended {
        background: #fff1f2;
        color: #be123c;
    }

    .user-status-badge.is-inactive {
        background: #f2f4f7;
        color: #475467;
    }

    .user-status-badge.is-pending {
        background: #fffbeb;
        color: #b54708;
    }

    .user-status-badge.is-unknown {
        background: #f2f4f7;
        color: #475467;
    }

    .admin-role-pill.role-member {
        background: #f3e8ff;
        color: #6b21a8;
    }

    .admin-role-pill.role-client {
        background: #e0f2fe;
        color: #075985;
    }

    .admin-role-pill.role-admin {
        background: #ecfdf3;
        color: #087443;
    }

    .admin-role-pill.role-root {
        background: #fff1f2;
        color: #be123c;
    }

    .admin-role-pill.role-shadow {
        background: #f2f4f7;
        color: #475467;
    }

    /* ==========================================================
    USERS TABLE ACTION DROPDOWN - BOTTOM ROW FIX
    ========================================================== */

    .admin-users-table tbody tr:nth-last-child(-n + 3) .table-action-dropdown {
        top: auto;
        bottom: calc(100% + 8px);
    }

    .admin-users-table-card {
        overflow: visible;
    }

    .admin-users-table {
        overflow: visible;
    }

    .table-action-dropdown {
        z-index: 9999;
    }

    /* ==========================================================
    MEMBER MEETINGS UI ENHANCEMENT
    ========================================================== */

    .meeting-member-modern {
        display: grid;
        gap: 28px;
    }

    .meeting-member-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 24px;
        padding: 34px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 28px;
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.08), transparent 220px),
            #ffffff;
        box-shadow: var(--shadow-card);
    }

    .meeting-member-hero h1 {
        margin: 6px 0 8px;
        font-size: clamp(34px, 4vw, 48px);
        letter-spacing: -0.04em;
    }

    .meeting-member-hero p {
        margin: 0;
        color: var(--muted);
    }

    .meeting-member-filter {
        display: flex;
        align-items: end;
        gap: 12px;
    }

    .meeting-member-filter label {
        display: grid;
        gap: 6px;
    }

    .meeting-member-filter label span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
    }

    .meeting-member-filter input,
    .meeting-member-filter select {
        min-height: 48px;
        min-width: 150px;
        border-radius: 14px;
    }

    .meeting-member-list {
        display: grid;
        gap: 18px;
    }

    .meeting-member-card {
        display: grid;
        gap: 20px;
        padding: 24px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 26px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .meeting-member-card-head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 18px;
    }

    .meeting-date-block {
        display: grid;
        place-items: center;
        width: 74px;
        height: 74px;
        border-radius: 22px;
        background: rgba(var(--primary-rgb), 0.09);
        color: var(--primary-dark);
    }

    .meeting-date-block span {
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .meeting-date-block strong {
        font-size: 30px;
        line-height: 1;
    }

    .meeting-title-block h2 {
        margin: 2px 0 6px;
        font-size: 24px;
    }

    .meeting-title-block p {
        margin: 0;
        color: var(--muted);
    }

    .meeting-member-info-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .meeting-info-card {
        display: grid;
        gap: 7px;
        padding: 18px;
        border-radius: 18px;
        background: #f8fbff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
    }

    .meeting-info-card .ui-icon {
        width: 42px;
        height: 42px;
        padding: 10px;
        border-radius: 14px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
    }

    .meeting-info-card span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 800;
    }

    .meeting-info-card strong {
        color: var(--text);
        font-size: 17px;
    }

    .meeting-info-card small {
        color: var(--muted);
    }

    .meeting-minutes-card {
        display: grid;
        gap: 10px;
        padding: 18px;
        border-radius: 18px;
        background: #fffbeb;
        border: 1px solid #fde68a;
    }

    .meeting-minutes-card > div {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #92400e;
    }

    .meeting-minutes-card p {
        margin: 0;
        color: #78350f;
    }

    @media (max-width: 900px) {
        .meeting-member-hero {
            flex-direction: column;
            align-items: stretch;
            padding: 24px;
        }

        .meeting-member-filter {
            display: grid;
            grid-template-columns: 1fr;
        }

        .meeting-member-info-grid {
            grid-template-columns: 1fr;
        }

        .meeting-member-card-head {
            grid-template-columns: 1fr;
            align-items: start;
        }
    }

    /* ==========================================================
    ACCOUNT BANKING PAGE UI ENHANCEMENT
    ========================================================== */

    .banking-page {
        max-width: 1080px;
        border-radius: 28px;
        padding: 30px;
        box-shadow: var(--shadow-card);
    }

    .banking-page-head {
        display: grid;
        gap: 8px;
        padding: 28px;
        border-radius: 24px;
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.10), transparent 240px),
            #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
    }

    .banking-head-icon,
    .banking-form-head > span,
    .banking-group-head > span {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        border-radius: 16px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 26px;
    }

    .banking-page-head h1 {
        font-size: clamp(32px, 4vw, 46px);
        letter-spacing: -0.04em;
    }

    .banking-section-head,
    .banking-group-head,
    .banking-form-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .banking-section-head span {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 0 12px;
        border-radius: 999px;
        background: rgba(var(--primary-rgb), 0.08);
        color: var(--primary-dark);
        font-weight: 800;
        font-size: 13px;
    }

    .banking-account-group,
    .banking-form-card {
        display: grid;
        gap: 18px;
        padding: 24px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 24px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .banking-account-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .banking-account-card {
        display: grid;
        gap: 18px;
        padding: 22px;
        border-radius: 22px;
        background: #f8fbff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
    }

    .banking-account-card header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .banking-account-card header span {
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(var(--primary-rgb), 0.08);
        color: var(--primary-dark);
        font-size: 12px;
        font-weight: 800;
    }

    .banking-account-card header strong {
        font-size: 18px;
        color: var(--text);
    }

    .banking-account-card dl {
        display: grid;
        gap: 10px;
        margin: 0;
    }

    .banking-account-card dl div {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding-top: 10px;
        border-top: 1px solid rgba(var(--primary-rgb), 0.08);
    }

    .banking-account-card dt {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
    }

    .banking-account-card dd {
        margin: 0;
        color: var(--primary-dark);
        font-weight: 800;
        text-align: right;
    }

    .banking-empty-state {
        padding: 20px;
        border-radius: 18px;
        background: #f8fbff;
        border: 1px dashed rgba(var(--primary-rgb), 0.22);
    }

    .banking-empty-state p {
        margin: 6px 0 0;
        color: var(--muted);
    }

    .banking-form-head {
        justify-content: flex-start;
    }

    .banking-form-card .button-primary {
        justify-self: start;
        min-width: 190px;
    }

    .user-bank-accounts .banking-group-head > strong,
    .user-mobile-accounts .banking-group-head > strong {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 0 12px;
        border-radius: 999px;
        background: rgba(var(--primary-rgb), 0.08);
        color: var(--primary-dark);
        font-size: 13px;
        font-weight: 800;
    }

    .user-bank-account-card,
    .user-mobile-account-card {
        background: #ffffff;
    }

    .mobile-account-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .banking-page .banking-account-grid.user-account-stack {
        grid-template-columns: 1fr;
    }

    .banking-page .banking-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start;
        margin-top: 16px;
    }

    .mobile-account-limit {
        background: #f8fafc;
    }

    @media (max-width: 768px) {
        .banking-page {
            padding: 18px;
            border-radius: 20px;
        }

        .banking-page-head,
        .banking-account-group,
        .banking-form-card {
            padding: 18px;
            border-radius: 18px;
        }

        .banking-account-grid,
        .banking-account-card dl div {
            grid-template-columns: 1fr;
        }

        .banking-account-grid {
            display: grid;
            grid-template-columns: 1fr;
        }

        .banking-account-card dl div {
            display: grid;
        }

        .banking-account-card dd {
            text-align: left;
        }

        .banking-section-head,
        .banking-group-head {
            align-items: flex-start;
            flex-direction: column;
        }

        .banking-form-card .button-primary {
            width: 100%;
        }

        .mobile-account-actions .button-secondary,
        .banking-form-card .settings-form-actions,
        .banking-form-card .settings-form-actions .button-primary,
        .banking-form-card .settings-form-actions .button-secondary {
            width: 100%;
        }
    }

    /* ==========================================================
    BANKING DETAILS RENDER FIX
    ========================================================== */

    .banking-account-group {
        display: grid;
        gap: 24px;
        padding: 28px;
        border-radius: 26px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        box-shadow: var(--shadow-card);
    }

    .banking-group-head {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .banking-group-head > span {
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border-radius: 18px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 28px;
    }

    .banking-account-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
        gap: 24px;
        align-items: stretch;
    }

    .banking-account-card {
        display: grid;
        gap: 22px;
        padding: 24px;
        border-radius: 22px;
        background: #f8fbff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
    }

    .banking-account-card header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(var(--primary-rgb), 0.12);
    }

    .banking-account-card header span {
        padding: 7px 12px;
        border-radius: 999px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .banking-account-card header strong {
        font-size: 22px;
        font-weight: 850;
        color: var(--text);
    }

    .banking-account-card dl {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        margin: 0;
    }

    .banking-account-card dl div {
        display: grid;
        gap: 8px;
        padding: 18px 16px;
        border-bottom: 1px solid rgba(var(--primary-rgb), 0.10);
    }

    .banking-account-card dt {
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .banking-account-card dd {
        margin: 0;
        color: var(--primary-dark);
        font-size: 18px;
        font-weight: 850;
        line-height: 1.25;
        word-break: break-word;
    }

    .banking-empty-state {
        display: grid;
        place-items: center;
        gap: 12px;
        min-height: 190px;
        padding: 28px;
        border: 1px dashed rgba(var(--primary-rgb), 0.24);
        border-radius: 22px;
        background: #fbfaff;
        text-align: center;
    }

    .banking-empty-state strong {
        color: var(--text);
        font-size: 18px;
    }

    .banking-empty-state p {
        margin: 0;
        color: var(--muted);
    }

    @media (max-width: 900px) {
        .banking-account-grid,
        .banking-account-card dl {
            grid-template-columns: 1fr;
        }

        .banking-account-group {
            padding: 20px;
        }

        .banking-account-card header {
            align-items: flex-start;
            flex-direction: column;
        }
    }

    .loan-guarantor-grid {
        display: grid;
        gap: 12px;
        margin-top: 18px;
    }

    .loan-guarantor-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 16px;
        padding: 16px 18px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 18px;
        background: #ffffff;
        text-decoration: none;
        box-shadow: 0 10px 24px rgba(23, 33, 43, 0.04);
    }

    .loan-guarantor-card:hover {
        border-color: rgba(var(--primary-rgb), 0.32);
        box-shadow: 0 16px 34px rgba(var(--primary-rgb), 0.10);
    }

    .loan-guarantor-avatar {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 999px;
        background: var(--primary);
        color: #ffffff;
        font-weight: 800;
    }

    .loan-guarantor-main {
        display: grid;
        gap: 4px;
    }

    .loan-guarantor-main strong {
        color: var(--text);
        font-size: 16px;
    }

    .loan-guarantor-main small {
        color: var(--muted);
        font-size: 14px;
    }

    .loan-guarantor-rating {
        display: grid;
        gap: 3px;
        text-align: right;
    }

    .loan-guarantor-rating small {
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
    }

    .loan-guarantor-rating strong {
        color: #d89b00;
        font-size: 17px;
    }

    @media (max-width: 768px) {
        .loan-guarantor-card {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .loan-guarantor-rating {
            grid-column: 2;
            text-align: left;
        }
    }

    /* ==========================================================
    MOBILE LOAN WIZARD SIMPLIFICATION
    ========================================================== */

    @media (max-width: 768px) {

        .loan-request-card {
            padding: 18px;
            border-radius: 22px;
        }

        .loan-section-head h2 {
            font-size: 24px;
        }

        .loan-section-head .muted {
            display: none;
        }

        .loan-stepper-modern {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        .loan-step-trigger {
            min-height: 54px;
            padding: 8px;
            justify-content: center;
            text-align: center;
        }

        .loan-step-trigger span {
            width: 30px;
            height: 30px;
            font-size: 14px;
        }

        .loan-step-trigger strong,
        .loan-step-trigger small {
            display: none;
        }

        .loan-panel-modern {
            min-height: auto;
            padding: 18px;
            border-radius: 20px;
        }

        .loan-step-head {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .loan-step-page-number {
            width: 46px;
            height: 46px;
            min-width: 46px;
            font-size: 20px;
        }

        .loan-step-head .eyebrow {
            display: none;
        }

        .loan-step-head h2 {
            font-size: 24px;
            margin: 0;
        }

        .loan-step-head .muted {
            font-size: 14px;
            margin-top: 4px;
        }

        .loan-search-label span {
            font-size: 13px;
        }

        .loan-search-wrapper input {
            height: 58px;
            padding-left: 48px;
            padding-right: 108px;
            font-size: 16px;
        }

        .loan-search-btn {
            right: 8px;
            height: 44px;
            padding: 0 16px;
            border-radius: 12px;
            font-size: 14px;
        }

        .loan-credit-note,
        .loan-credibility-note,
        .credibility-scale {
            font-size: 13px;
            padding: 14px;
        }
    }

    /* BANKING PAGE - SIMPLE CLEAN UI */

    .banking-page {
        display: grid;
        gap: 26px;
    }

    .banking-account-group {
        display: grid;
        gap: 22px;
        padding: 28px;
        border-radius: 28px;
        background: #fff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        box-shadow: var(--shadow-card);
    }

    .banking-group-head {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .banking-group-head h3,
    .banking-group-head h2 {
        margin: 0;
    }

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

    .banking-account-card {
        display: grid;
        gap: 18px;
        padding: 22px;
        border-radius: 22px;
        background: #f8fbff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
    }

    .banking-account-card header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(var(--primary-rgb), 0.12);
    }

    .banking-account-card header strong {
        font-size: 20px;
    }

    .banking-account-card dl {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin: 0;
    }

    .banking-account-card dl div {
        display: grid;
        gap: 6px;
        padding: 14px;
        border-radius: 14px;
        background: #fff;
    }

    .investment-page .js-investment-guarantor-search {
        padding-right: 48px;
    }

    .investment-page .js-investment-guarantor-search::-webkit-search-cancel-button {
        margin-right: 0;
    }

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

    .investment-proof-table td small {
        margin-top: 4px;
        color: var(--muted);
        font-size: 12px;
    }

    .investment-settings-page {
        display: grid;
        gap: 26px;
    }

    .investment-settings-layout {
        display: grid;
        grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.35fr);
        gap: 22px;
        align-items: start;
    }

    .investment-options-card {
        padding: 28px;
    }

    .investment-options-table td strong {
        color: var(--primary-dark);
    }

    @media (max-width: 980px) {
        .investment-settings-layout {
            grid-template-columns: 1fr;
        }
    }

    .banking-account-card dt {
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .banking-account-card dd {
        margin: 0;
        color: var(--primary-dark);
        font-size: 17px;
        font-weight: 800;
    }

    .banking-empty-state {
        display: grid;
        place-items: center;
        gap: 8px;
        min-height: 160px;
        padding: 24px;
        border-radius: 20px;
        border: 1px dashed rgba(var(--primary-rgb), 0.25);
        background: #fbfaff;
        text-align: center;
    }

    @media (max-width: 768px) {
        .banking-account-group {
            padding: 20px;
            border-radius: 22px;
        }

        .banking-account-grid,
        .banking-account-card dl {
            grid-template-columns: 1fr;
        }

        .banking-account-card header {
            align-items: flex-start;
            flex-direction: column;
        }
    }

    .annual-capital-list {
        display: grid;
        gap: 14px;
    }

    .annual-capital-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 14px 0 12px;
    }

    .annual-capital-toolbar > span {
        color: #667085;
        font-size: 14px;
        font-weight: 700;
    }

    .annual-capital-export-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    .annual-capital-row {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 18px;
        padding: 20px 24px;
        border-radius: 22px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        box-shadow: var(--shadow-card);
    }

    .annual-capital-select {
        display: inline-grid;
        place-items: center;
    }

    .annual-capital-select input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--primary);
    }

    .annual-capital-member {
        display: grid;
        gap: 6px;
        min-width: 0;
    }

    .annual-capital-member strong {
        color: var(--text);
        font-size: 20px;
        font-weight: 800;
    }

    .annual-capital-member span {
        color: var(--muted);
        font-size: 15px;
    }

    .annual-capital-actions {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .annual-capital-view-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 42px;
        padding: 0 14px;
        border-radius: 12px;
        border: 1px solid rgba(var(--primary-rgb), 0.14);
        background: #ffffff;
        color: var(--primary-dark);
        font-weight: 800;
        text-decoration: none;
    }

    .annual-capital-view-btn:hover {
        background: rgba(var(--primary-rgb), 0.08);
    }

    .annual-capital-review-menu {
        position: relative;
    }

    .annual-capital-review-menu summary {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(var(--primary-rgb), 0.14);
        border-radius: 12px;
        background: #ffffff;
        color: var(--primary-dark);
        cursor: pointer;
        list-style: none;
    }

    .annual-capital-review-menu summary::-webkit-details-marker {
        display: none;
    }

    .annual-capital-review-panel {
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        z-index: 50;
        display: grid;
        gap: 10px;
        min-width: 360px;
        padding: 14px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        box-shadow: 0 22px 50px rgba(23, 33, 43, 0.16);
    }

    .annual-capital-review-panel form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .annual-capital-review-panel input {
        min-height: 42px;
        border-radius: 12px;
    }

    @media (max-width: 768px) {
        .annual-capital-row {
            grid-template-columns: 1fr;
            align-items: start;
        }

        .annual-capital-toolbar {
            align-items: stretch;
            flex-direction: column;
        }

        .annual-capital-export-actions {
            justify-content: flex-start;
        }

        .annual-capital-actions {
            width: 100%;
            justify-content: space-between;
        }

        .annual-capital-view-btn {
            flex: 1;
        }

        .annual-capital-review-panel {
            position: static;
            min-width: 0;
            margin-top: 10px;
        }

        .annual-capital-review-panel form {
            grid-template-columns: 1fr;
        }
    }

    /* ==========================================================
    ADMIN WALLETS PAGE UI ENHANCEMENT
    ========================================================== */

    .banking-admin-page {
        display: grid;
        gap: 28px;
    }

    .banking-summary-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 22px;
    }

    .banking-stat-card {
        min-height: 120px;
        padding: 22px;
        border-radius: 22px;
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.08), transparent 140px),
            #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        box-shadow: var(--shadow-card);
    }

    .banking-stat-card span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 800;
    }

    .banking-stat-card strong {
        display: block;
        margin-top: 16px;
        color: var(--primary-dark);
        font-size: clamp(22px, 2.4vw, 30px);
        font-weight: 850;
    }

    .banking-form-card,
    .banking-account-group {
        display: grid;
        gap: 22px;
        padding: 26px;
        border-radius: 26px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        box-shadow: var(--shadow-card);
    }

    .banking-form-head,
    .banking-group-head {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .banking-form-head > span,
    .banking-group-head > span {
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border-radius: 18px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 28px;
    }

    .banking-form-head h2,
    .banking-group-head h3 {
        margin: 2px 0 0;
        font-size: 26px;
    }

    .banking-form-card summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 56px;
        cursor: pointer;
        list-style: none;
    }

    .banking-form-card summary::-webkit-details-marker {
        display: none;
    }

    .banking-account-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .banking-account-card {
        display: grid;
        gap: 18px;
        padding: 20px;
        border-radius: 22px;
        background: #f8fbff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
    }

    .banking-account-card header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(var(--primary-rgb), 0.10);
    }

    .banking-account-card header span {
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 12px;
        font-weight: 900;
    }

    .banking-account-card header strong {
        font-size: 18px;
    }

    .banking-account-card dl {
        display: grid;
        gap: 10px;
        margin: 0;
    }

    .banking-account-card dl div {
        display: grid;
        gap: 4px;
        padding: 12px;
        border-radius: 14px;
        background: #ffffff;
    }

    .banking-account-card dt {
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .banking-account-card dd {
        margin: 0;
        color: var(--primary-dark);
        font-size: 16px;
        font-weight: 850;
        word-break: break-word;
    }

    .banking-empty-state {
        display: grid;
        place-items: center;
        gap: 8px;
        min-height: 160px;
        padding: 24px;
        border-radius: 20px;
        border: 1px dashed rgba(var(--primary-rgb), 0.25);
        background: #fbfaff;
        text-align: center;
    }

    .banking-empty-state strong {
        color: var(--primary-dark);
        font-size: 24px;
    }

    .mobile-main-balance-card .banking-empty-state strong {
        font-size: clamp(28px, 4vw, 40px);
    }

    @media (max-width: 1100px) {
        .banking-summary-grid,
        .banking-account-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 768px) {
        .banking-summary-grid,
        .banking-account-grid {
            grid-template-columns: 1fr;
        }

        .banking-form-card,
        .banking-account-group {
            padding: 20px;
            border-radius: 22px;
        }

        .banking-form-head,
        .banking-group-head {
            align-items: flex-start;
        }
    }

    /* ==========================================================
    MEETING ATTENDANCE UI ENHANCEMENT
    ========================================================== */

    .meeting-attendance-list,
    .attendance-list {
        display: grid;
        gap: 14px;
    }

    .meeting-attendance-row,
    .attendance-row {
        display: grid;
        grid-template-columns: minmax(220px, 1fr) auto minmax(260px, 0.8fr) auto;
        align-items: center;
        gap: 14px;
        padding: 16px;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        border-radius: 18px;
        background: #ffffff;
    }

    .meeting-attendance-row:hover,
    .attendance-row:hover {
        border-color: rgba(var(--primary-rgb), 0.22);
        box-shadow: 0 12px 28px rgba(23, 33, 43, 0.06);
    }

    .meeting-attendance-member,
    .attendance-member {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .meeting-attendance-avatar,
    .attendance-avatar {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-weight: 900;
    }

    .meeting-attendance-member strong,
    .attendance-member strong {
        display: block;
        color: var(--text);
        font-size: 15px;
    }

    .meeting-attendance-member small,
    .attendance-member small {
        color: var(--muted);
    }

    .attendance-original-badge,
    .meeting-attendance-status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 38px;
        padding: 0 14px;
        border-radius: 999px;
        background: #ecfdf3;
        color: #087443;
        font-size: 13px;
        font-weight: 900;
        white-space: nowrap;
    }

    .attendance-original-badge.is-absent,
    .meeting-attendance-status.is-absent {
        background: #fff1f2;
        color: #be123c;
    }

    .attendance-correction-form {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .attendance-correction-form input {
        min-height: 44px;
        border-radius: 14px;
    }

    .attendance-correction-form button,
    .meeting-attendance-row button,
    .attendance-row button {
        min-height: 44px;
        padding: 0 14px;
        border-radius: 14px;
        white-space: nowrap;
    }

    @media (max-width: 900px) {
        .meeting-attendance-row,
        .attendance-row {
            grid-template-columns: 1fr;
            align-items: stretch;
        }

        .attendance-correction-form {
            flex-direction: column;
            align-items: stretch;
        }

        .attendance-correction-form button {
            width: 100%;
        }
    }

    .meeting-attendance-grid,
    .meeting-attendance-list {
        display: grid;
        gap: 14px;
    }

    .meeting-attendance-select-card,
    .meeting-attendance-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
        padding: 16px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 18px;
        background: #ffffff;
    }

    .meeting-attendance-row {
        grid-template-columns: minmax(220px, 1fr) auto minmax(320px, 1fr);
    }

    .meeting-attendance-select-card input {
        display: none;
    }

    .meeting-attendance-avatar {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 16px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-weight: 900;
    }

    .meeting-attendance-member {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .meeting-attendance-select-card strong,
    .meeting-attendance-member strong {
        display: block;
        color: var(--text);
    }

    .meeting-attendance-select-card small,
    .meeting-attendance-member small {
        color: var(--muted);
    }

    .meeting-attendance-check {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 999px;
        background: #f2f4f7;
        color: #98a2b3;
    }

    .meeting-attendance-select-card:has(input:checked) {
        border-color: #087443;
        background: #ecfdf3;
    }

    .meeting-attendance-select-card:has(input:checked) .meeting-attendance-check {
        background: #087443;
        color: #ffffff;
    }

    .meeting-attendance-status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 38px;
        padding: 0 14px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 900;
        white-space: nowrap;
    }

    .meeting-attendance-status.is-present {
        background: #ecfdf3;
        color: #087443;
    }

    .meeting-attendance-status.is-absent {
        background: #fff1f2;
        color: #be123c;
    }

    .meeting-attendance-status.is-correction {
        background: #fffbeb;
        color: #b54708;
    }

    .meeting-attendance-status.is-effective {
        background: #e0f2fe;
        color: #075985;
    }

    .attendance-correction-form {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .attendance-comment-input {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-height: 46px;
        padding: 0 12px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 14px;
        background: #ffffff;
    }

    .attendance-comment-input input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
    }

    @media (max-width: 900px) {
        .meeting-attendance-row,
        .meeting-attendance-select-card {
            grid-template-columns: 1fr;
            align-items: stretch;
        }

        .attendance-correction-form {
            flex-direction: column;
            align-items: stretch;
        }
    }

    /* MEETING ATTENDANCE CLEAN ACTION UI */

    .meeting-attendance-row {
        grid-template-columns: minmax(240px, 1fr) auto minmax(420px, 1.3fr) auto !important;
    }

    .meeting-attendance-status-icon {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 999px;
        font-size: 24px;
    }

    .meeting-attendance-status-icon.is-present {
        background: #ecfdf3;
        color: #087443;
    }

    .meeting-attendance-status-icon.is-absent {
        background: #fff1f2;
        color: #dc2626;
    }

    .attendance-correction-form {
        display: contents;
    }

    .attendance-comment-input {
        min-height: 56px;
        padding: 0 18px;
    }

    .attendance-comment-input input {
        font-size: 16px;
    }

    .attendance-notify-btn {
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        border: 1px solid #f5c16c;
        border-radius: 16px;
        background: #fffaf0;
        color: #d97706;
        cursor: pointer;
        font-size: 24px;
    }

    .attendance-notify-btn:hover {
        background: #fffbeb;
        transform: translateY(-1px);
    }

    @media (max-width: 900px) {
        .meeting-attendance-row {
            grid-template-columns: 1fr !important;
        }

        .attendance-correction-form {
            display: grid;
            gap: 12px;
        }

        .attendance-comment-input,
        .attendance-notify-btn {
            width: 100%;
        }
    }

    /* ==========================================================
    ATTENDANCE REPORT PAGE UI
    ========================================================== */

    .attendance-report-page {
        display: grid;
        gap: 26px;
    }

    .attendance-report-filter {
        padding: 22px;
    }

    .attendance-report-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .attendance-summary-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
        padding: 18px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 22px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .attendance-summary-avatar {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 16px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-weight: 900;
    }

    .attendance-summary-card strong {
        display: block;
        color: var(--text);
        font-size: 16px;
    }

    .attendance-summary-card span {
        color: var(--muted);
        font-size: 13px;
    }

    .attendance-summary-card b {
        display: grid;
        place-items: center;
        min-width: 62px;
        height: 42px;
        border-radius: 999px;
        background: #ecfdf3;
        color: #087443;
        font-size: 17px;
    }

    .attendance-report-table-card {
        overflow: hidden;
    }

    .attendance-report-table-head {
        margin-bottom: 18px;
    }

    .attendance-report-table-head h2 {
        margin: 4px 0 0;
    }

    .attendance-report-table td small {
        color: var(--muted);
    }

    .attendance-report-status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 34px;
        padding: 0 12px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 900;
        white-space: nowrap;
    }

    .attendance-report-status.is-present {
        background: #ecfdf3;
        color: #087443;
    }

    .attendance-report-status.is-absent {
        background: #fff1f2;
        color: #be123c;
    }

    .attendance-report-status.is-correction {
        background: #fffbeb;
        color: #b54708;
    }

    .attendance-report-muted {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
    }

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

    @media (max-width: 768px) {
        .attendance-report-summary {
            grid-template-columns: 1fr;
        }

        .attendance-summary-card {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .attendance-summary-card b {
            grid-column: 1 / -1;
            width: 100%;
        }
    }

    /* ==========================================================
    ADMIN MEETINGS PAGE UI
    ========================================================== */

    .admin-meetings-modern {
        display: grid;
        gap: 28px;
    }

    .admin-meetings-hero {
        padding: 34px;
        border-radius: 28px;
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.08), transparent 240px),
            #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        box-shadow: var(--shadow-card);
    }

    .admin-section-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 16px;
    }

    .admin-section-title h2 {
        margin: 4px 0 0;
        font-size: 30px;
    }

    .admin-meetings-filter {
        margin-bottom: 18px;
    }

    .meeting-list-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 14px 0 12px;
    }

    .meeting-list-toolbar > span {
        color: #667085;
        font-size: 14px;
        font-weight: 700;
    }

    .meeting-export-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    .admin-meeting-list {
        display: grid;
        gap: 14px;
    }

    .admin-meeting-card {
        display: grid;
        grid-template-columns: 22px auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 18px;
        padding: 20px;
        border-radius: 22px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        box-shadow: var(--shadow-card);
    }

    .meeting-record-select {
        display: inline-grid;
        place-items: center;
    }

    .meeting-record-select input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--primary);
    }

    .admin-meeting-date {
        display: grid;
        place-items: center;
        width: 72px;
        height: 72px;
        border-radius: 22px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
    }

    .admin-meeting-date span {
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .admin-meeting-date strong {
        font-size: 30px;
        line-height: 1;
    }

    .admin-meeting-main h3 {
        margin: 0 0 6px;
        color: var(--text);
        font-size: 20px;
    }

    .admin-meeting-main p {
        margin: 0;
        color: var(--muted);
    }

    .admin-meeting-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
    }

    .admin-meeting-meta span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        background: #f8fbff;
        color: #475569;
        font-size: 13px;
        font-weight: 700;
    }

    .admin-meeting-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .admin-meeting-create-panel {
        padding: 28px;
        border-radius: 26px;
    }

    .admin-meeting-form {
        gap: 18px;
    }

    .admin-meeting-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .admin-meeting-form .button-primary {
        justify-self: start;
        min-width: 190px;
    }

    @media (max-width: 900px) {
        .admin-meetings-hero {
            padding: 24px;
        }

        .admin-meeting-card {
            grid-template-columns: 1fr;
            align-items: start;
        }

        .meeting-list-toolbar {
            align-items: stretch;
            flex-direction: column;
        }

        .meeting-export-actions {
            justify-content: flex-start;
        }

        .admin-meeting-actions {
            width: 100%;
            justify-content: space-between;
        }

        .admin-meeting-form-grid {
            grid-template-columns: 1fr;
        }

        .admin-meeting-form .button-primary {
            width: 100%;
        }
    }

    .contribution-record-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:24px;
    }

    .contribution-member{
        display:flex;
        align-items:center;
        gap:14px;
    }

    .contribution-avatar{
        width:52px;
        height:52px;
        border-radius:16px;
        background:#f3e8f8;
        color:#6d1f7b;
        font-weight:800;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .contribution-member h3{
        margin:0;
        font-size:1.15rem;
    }

    .contribution-member span{
        color:#6b7280;
        font-size:.9rem;
    }

    .contribution-meta{
        display:flex;
        align-items:center;
        gap:12px;
        flex-wrap:wrap;
    }

    .record-chip{
        padding:8px 14px;
        border-radius:999px;
        background:#f5f5f5;
        font-size:.85rem;
        font-weight:600;
    }

    .record-chip.amount{
        background:#f3e8f8;
        color:#6d1f7b;
    }

    .proof-icon{
        width:42px;
        height:42px;
        border-radius:12px;
        border:1px solid #e5d8eb;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#6d1f7b;
        text-decoration:none;
    }

    .proof-icon:hover{
        background:#f8f1fb;
    }

    @media (max-width:768px){

        .contribution-record-header{
            flex-direction:column;
            align-items:flex-start;
        }

        .contribution-meta{
            width:100%;
        }

        .proof-icon{
            margin-left:auto;
        }
    }

    .notification-delete{
        width:36px;
        height:36px;
        border-radius:10px;
        border:1px solid #e5e7eb;
        background:#fff;
        color:#6b7280;
    }

    .notification-delete:hover{
        background:#f9fafb;
        color:#111827;
    }

    /* Shemsou */

    .action-with-count{
        display:flex;
        align-items:center;
        gap:8px;
    }

    .pending-count-badge{
        min-width:26px;
        height:26px;

        display:flex;
        align-items:center;
        justify-content:center;

        padding:0 8px;

        border-radius:999px;

        background:#ef4444;
        color:#fff;

        font-size:.75rem;
        font-weight:700;
    }

    .users-head-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .action-with-count {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .users-head-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .pending-count-badge {
        min-width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        border-radius: 999px;
        background: #ef4444;
        color: #ffffff;
        font-size: 12px;
        font-weight: 800;
    }

    @media (max-width: 768px) {
        .users-head-actions {
            width: 100%;
        }

        .action-with-count,
        .users-head-actions > a,
        .users-head-actions .request-count {
            width: 100%;
        }

        .users-head-link {
            width: 100%;
            justify-content: center;
        }
    }

    .users-head-actions {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    .users-action-btn {
        min-height: 48px;
        padding: 0 18px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-weight: 800;
    }

    .users-action-btn .ui-icon {
        font-size: 20px;
    }

    .request-count {
        min-height: 48px;
        padding: 0 20px;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
    }

    /* ==========================================================
    EXPENSE / BANK ADJUSTMENTS PAGE UI
    ========================================================== */

    .expense-admin-page {
        display: grid;
        gap: 26px;
    }

    .expense-admin-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
        padding: 32px;
        border-radius: 28px;
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.08), transparent 260px),
            #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        box-shadow: var(--shadow-card);
    }

    .expense-summary-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .expense-summary-card {
        display: grid;
        gap: 14px;
        padding: 22px;
        border-radius: 22px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        box-shadow: var(--shadow-card);
    }

    .expense-summary-card span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 900;
    }

    .expense-summary-card strong {
        color: var(--primary-dark);
        font-size: clamp(24px, 3vw, 34px);
        font-weight: 900;
    }

    .expense-summary-card.is-add strong {
        color: #087443;
    }

    .expense-summary-card.is-subtract strong {
        color: #be123c;
    }

    .expense-records-card {
        display: grid;
        gap: 18px;
        padding: 26px;
        border-radius: 26px;
    }

    .expense-records-head h2 {
        margin: 4px 0 0;
    }

    .expense-record-list {
        display: grid;
        gap: 12px;
    }

    .expense-record-row {
        display: grid;
        grid-template-columns: auto minmax(240px, 1fr) minmax(150px, auto) minmax(130px, auto) minmax(130px, auto) auto;
        align-items: center;
        gap: 16px;
        padding: 18px;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        border-radius: 20px;
        background: #ffffff;
    }

    .expense-record-icon {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 16px;
        background: rgba(var(--primary-rgb), 0.08);
        color: var(--primary-dark);
        font-size: 24px;
    }

    .expense-record-row.is-add .expense-record-icon {
        background: #ecfdf3;
        color: #087443;
    }

    .expense-record-row.is-subtract .expense-record-icon {
        background: #fff1f2;
        color: #be123c;
    }

    .expense-record-main {
        display: grid;
        gap: 4px;
    }

    .expense-record-main strong {
        color: var(--text);
        font-size: 16px;
    }

    .expense-record-main span,
    .expense-record-main p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
    }

    .expense-record-amount {
        display: grid;
        gap: 4px;
        text-align: right;
    }

    .expense-record-amount span,
    .expense-record-balance small {
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
    }

    .expense-record-amount strong {
        color: var(--primary-dark);
        font-size: 18px;
        font-weight: 900;
    }

    .expense-record-balance {
        display: grid;
        gap: 4px;
        text-align: right;
    }

    .expense-record-balance strong {
        color: var(--text);
        font-size: 15px;
        font-weight: 800;
    }

    .expense-record-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .expense-record-actions form {
        margin: 0;
    }

    @media (max-width: 1100px) {
        .expense-record-row {
            grid-template-columns: auto minmax(0, 1fr) auto;
        }

        .expense-record-balance,
        .expense-record-amount {
            text-align: left;
        }

        .expense-record-balance {
            grid-column: span 1;
        }
    }

    @media (max-width: 768px) {
        .expense-summary-grid {
            grid-template-columns: 1fr;
        }

        .expense-record-row {
            grid-template-columns: 1fr;
            align-items: start;
        }

        .expense-record-actions {
            justify-content: flex-end;
        }
    }

    @media (max-width: 768px) {
        .expense-admin-hero {
            flex-direction: column;
            align-items: stretch;
        }

        .expense-admin-hero .button-primary {
            width: 100%;
            justify-content: center;
        }
    }

    /* =====================================
    Expense Actions Dropdown
    ===================================== */

    .expense-dropdown {
        position: relative;
    }

    .expense-dropdown-toggle {
        width: 44px;
        height: 44px;
    }

    .expense-dropdown-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 180px;

        background: #fff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 18px;

        padding: 8px;
        box-shadow: 0 20px 50px rgba(0,0,0,.12);

        display: none;
        z-index: 50;
    }

    .expense-dropdown.is-open .expense-dropdown-menu {
        display: block;
    }

    .expense-dropdown-item {
        width: 100%;
        border: none;
        background: transparent;

        display: flex;
        align-items: center;
        gap: 10px;

        padding: 12px 14px;

        color: var(--text);
        text-decoration: none;

        border-radius: 12px;
        cursor: pointer;
    }

    .expense-dropdown-item:hover {
        background: rgba(var(--primary-rgb), 0.06);
    }

    .expense-dropdown-item.is-danger {
        color: #dc2626;
    }

    .expense-dropdown-item.is-danger:hover {
        background: #fef2f2;
    }

    /* ==========================================================
    BANK ADJUSTMENT FORM UI
    ========================================================== */

    .bank-adjustment-page {
        display: grid;
        gap: 28px;
    }

    .bank-adjustment-hero {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        padding: 32px;
        border-radius: 28px;
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.08), transparent 260px),
            #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        box-shadow: var(--shadow-card);
    }

    .bank-adjustment-card {
        display: grid;
        gap: 26px;
        padding: 30px;
        border-radius: 28px;
    }

    .bank-adjustment-form-head {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .bank-adjustment-form-head > span {
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border-radius: 18px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 28px;
    }

    .bank-adjustment-form-head h2 {
        margin: 4px 0 4px;
        font-size: 28px;
    }

    .bank-adjustment-form-head p:last-child {
        margin: 0;
        color: var(--muted);
    }

    .bank-adjustment-form {
        display: grid;
        gap: 20px;
    }

    .bank-adjustment-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .bank-adjustment-form label {
        display: grid;
        gap: 8px;
    }

    .bank-adjustment-form label span {
        color: var(--text);
        font-size: 13px;
        font-weight: 850;
    }

    .bank-adjustment-form input,
    .bank-adjustment-form select,
    .bank-adjustment-form textarea {
        width: 100%;
        min-height: 58px;
        border-radius: 16px;
    }

    .bank-adjustment-form textarea {
        min-height: 150px;
        padding-top: 16px;
    }

    .bank-adjustment-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .bank-adjustment-actions .button-primary,
    .bank-adjustment-hero .button-secondary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .bank-adjustment-actions .button-primary {
        min-width: 220px;
    }

    @media (max-width: 900px) {
        .bank-adjustment-hero {
            flex-direction: column;
            align-items: stretch;
            padding: 24px;
        }

        .bank-adjustment-grid {
            grid-template-columns: 1fr;
        }

        .bank-adjustment-card {
            padding: 22px;
        }

        .bank-adjustment-form-head {
            align-items: flex-start;
        }

        .bank-adjustment-actions .button-primary,
        .bank-adjustment-hero .button-secondary {
            width: 100%;
            justify-content: center;
        }
    }

    /* ==========================================================
    ADMIN TRANSFERS PAGE UI
    ========================================================== */

    .admin-transfers-page {
        display: grid;
        gap: 26px;
    }

    .admin-transfers-hero {
        padding: 32px;
        border-radius: 28px;
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.08), transparent 260px),
            #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        box-shadow: var(--shadow-card);
    }

    .admin-transfer-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .admin-transfer-actions .button-secondary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .admin-transfer-summary-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .admin-transfer-summary-card {
        display: grid;
        gap: 14px;
        padding: 22px;
        border-radius: 22px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        box-shadow: var(--shadow-card);
    }

    .admin-transfer-summary-card span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 900;
    }

    .admin-transfer-summary-card strong {
        color: var(--primary-dark);
        font-size: clamp(24px, 3vw, 34px);
        font-weight: 900;
    }

    .admin-transfer-summary-card.is-warning strong {
        color: #b54708;
    }

    .admin-transfer-records-card {
        display: grid;
        gap: 18px;
        padding: 26px;
        border-radius: 26px;
    }

    .admin-transfer-records-head h2 {
        margin: 4px 0 0;
    }

    .admin-transfer-list {
        display: grid;
        gap: 12px;
        overflow-x: auto;
    }

    .admin-transfer-row {
        display: grid;
        grid-template-columns:
            22px
            44px
            minmax(170px, 1.2fr)
            minmax(120px, 0.8fr)
            minmax(120px, 0.8fr)
            minmax(170px, 1fr)
            max-content
            max-content;
        align-items: center;
        gap: 12px;
        min-width: 980px;
        padding: 14px 16px;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        border-radius: 12px;
        background: #ffffff;
    }

    .admin-transfer-icon {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(var(--primary-rgb), 0.08);
        color: var(--primary-dark);
        font-size: 22px;
    }

    .admin-transfer-main,
    .admin-transfer-parties,
    .admin-transfer-amount {
        display: grid;
        gap: 4px;
    }

    .admin-transfer-main strong {
        color: var(--text);
        font-size: 15px;
    }

    .admin-transfer-main span,
    .admin-transfer-parties small,
    .admin-transfer-amount small {
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
    }

    .admin-transfer-parties strong,
    .admin-transfer-amount strong {
        color: var(--text);
        font-size: 14px;
        font-weight: 850;
    }

    .admin-transfer-amount strong {
        color: var(--primary-dark);
    }

    .admin-transfer-row > *,
    .admin-transfer-main > *,
    .admin-transfer-parties > *,
    .admin-transfer-amount > * {
        min-width: 0;
    }

    .admin-transfer-main strong,
    .admin-transfer-main span,
    .admin-transfer-parties strong,
    .admin-transfer-parties small,
    .admin-transfer-amount strong,
    .admin-transfer-amount small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    @media (max-width: 768px) {
        .admin-transfer-summary-grid {
            grid-template-columns: 1fr;
        }

        .admin-transfers-hero {
            padding: 24px;
        }

        .admin-transfer-actions {
            width: 100%;
        }

        .admin-transfer-actions > * {
            width: 100%;
            justify-content: center;
        }

        .admin-transfer-icon {
            width: 40px;
            height: 40px;
        }
    }

    /* ==========================================================
    TRANSFER SETTINGS PAGE UI
    ========================================================== */

    .transfer-settings-page {
        display: grid;
        gap: 26px;
    }

    .transfer-settings-hero {
        padding: 32px;
        border-radius: 28px;
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.08), transparent 260px),
            #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        box-shadow: var(--shadow-card);
    }

    .transfer-settings-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .transfer-settings-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .transfer-settings-rate-card {
        display: grid;
        gap: 14px;
        padding: 24px;
        border-radius: 24px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        box-shadow: var(--shadow-card);
    }

    .transfer-settings-rate-card span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 900;
    }

    .transfer-settings-rate-card strong {
        color: var(--primary-dark);
        font-size: clamp(30px, 4vw, 44px);
        font-weight: 900;
    }

    .transfer-settings-card {
        display: grid;
        gap: 24px;
        padding: 30px;
        border-radius: 28px;
    }

    .transfer-settings-card-head {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .transfer-settings-card-head > span {
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border-radius: 18px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 28px;
    }

    .transfer-settings-card-head h2 {
        margin: 4px 0;
        font-size: 28px;
    }

    .transfer-settings-card-head p:last-child {
        margin: 0;
        color: var(--muted);
    }

    .transfer-settings-form {
        display: grid;
        gap: 20px;
    }

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

    .transfer-settings-form label {
        display: grid;
        gap: 8px;
    }

    .transfer-settings-form label span {
        color: var(--text);
        font-size: 13px;
        font-weight: 850;
    }

    .transfer-settings-form input {
        min-height: 58px;
        border-radius: 16px;
        font-size: 18px;
        font-weight: 800;
    }

    .transfer-settings-form .button-primary {
        justify-self: start;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 190px;
    }

    @media (max-width: 768px) {
        .transfer-settings-hero,
        .transfer-settings-card {
            padding: 22px;
            border-radius: 22px;
        }

        .transfer-settings-summary,
        .transfer-settings-grid {
            grid-template-columns: 1fr;
        }

        .transfer-settings-card-head {
            align-items: flex-start;
        }

        .transfer-settings-back,
        .transfer-settings-form .button-primary {
            width: 100%;
            justify-content: center;
        }
    }

    /* ==========================================================
    ADMIN PERFORMANCE DASHBOARD
    ========================================================== */

    .admin-performance-dashboard {
        display: grid;
        gap: 28px;
    }

    .performance-hero {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        padding: 34px;
        border-radius: 30px;
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.10), transparent 280px),
            #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        box-shadow: var(--shadow-card);
    }

    .performance-hero h1 {
        margin: 6px 0 8px;
        font-size: clamp(36px, 4vw, 54px);
        letter-spacing: -0.05em;
    }

    .performance-hero p {
        margin: 0;
        color: var(--muted);
    }

    .performance-hero .admin-manage-button {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .performance-hero .admin-manage-button span {
        display: grid;
        place-items: center;
        min-width: 26px;
        height: 26px;
        padding: 0 8px;
        border-radius: 999px;
        background: #ef4444;
        color: #ffffff;
        font-size: 12px;
        font-weight: 900;
    }

    .action-centre-strip {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
    }

    .action-centre-strip a {
        display: grid;
        gap: 10px;
        padding: 20px;
        border-radius: 22px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        box-shadow: var(--shadow-card);
        text-decoration: none;
    }

    .action-centre-strip span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 850;
    }

    .action-centre-strip strong {
        color: var(--primary-dark);
        font-size: 30px;
        font-weight: 900;
    }

    .dashboard-command-grid {
        display: grid;
        grid-template-columns: 1.4fr repeat(3, 1fr);
        gap: 16px;
    }

    .dashboard-command-card {
        display: grid;
        gap: 10px;
        padding: 24px;
        border-radius: 26px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        box-shadow: var(--shadow-card);
    }

    .dashboard-command-card.is-primary {
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.18), transparent 220px),
            var(--primary-dark);
        color: #ffffff;
    }

    .dashboard-command-card span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 900;
    }

    .dashboard-command-card.is-primary span,
    .dashboard-command-card.is-primary p {
        color: rgba(255, 255, 255, 0.78);
    }

    .dashboard-money-value {
        color: var(--primary-dark);
        font-weight: 900;
        line-height: 1.05;

        font-size: clamp(
            1.6rem,
            1.4vw + 1rem,
            3.2rem
        );

        letter-spacing: -0.04em;
    }

    .dashboard-command-card.is-primary strong {
        color: #ffffff;
    }

    .dashboard-command-card p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
    }

    .dashboard-insight-layout {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr 1.1fr;
        gap: 18px;
    }

    .dashboard-insight-card {
        display: grid;
        gap: 20px;
        padding: 24px;
        border-radius: 26px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        box-shadow: var(--shadow-card);
    }

    .dashboard-insight-card.is-wide {
        min-height: 260px;
    }

    .finance-breakdown-list,
    .wealth-mini-list {
        display: grid;
        gap: 12px;
    }

    .finance-breakdown-list div,
    .wealth-mini-list div {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        padding: 14px;
        border-radius: 16px;
        background: #f8fbff;
    }

    .finance-breakdown-list span,
    .wealth-mini-list span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 800;
    }

    .finance-breakdown-list strong,
    .wealth-mini-list strong {
        color: var(--primary-dark);
        font-weight: 900;
    }

    .loan-health-bar {
        height: 14px;
        border-radius: 999px;
        background: rgba(var(--primary-rgb), 0.08);
        overflow: hidden;
    }

    .loan-health-bar i {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #087443, #22c55e);
    }

    @media (max-width: 1200px) {
        .dashboard-command-grid,
        .dashboard-insight-layout {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .action-centre-strip {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 768px) {
        .performance-hero {
            flex-direction: column;
            padding: 24px;
        }

        .performance-hero .admin-manage-button {
            width: 100%;
            justify-content: center;
        }

        .action-centre-strip,
        .dashboard-command-grid,
        .dashboard-insight-layout {
            grid-template-columns: 1fr;
        }
    }

    .dashboard-money-value {
        font-size: clamp(1.8rem, 2vw + 1rem, 3.4rem);
        line-height: 1.05;
        letter-spacing: -0.05em;
        overflow-wrap: anywhere;
    }

    .dashboard-money-value {
        font-size: clamp(1.4rem, 1vw + 0.8rem, 2.6rem);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.03em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dashboard-money-value.is-small {
        font-size: clamp(1.4rem, 1.2vw + 0.8rem, 2.2rem);
    }

    .dashboard-command-card strong {
        max-width: 100%;
    }

    .admin-manage-button {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
    }

    .admin-manage-button .ui-icon {
        font-size: 1.25rem;
    }

    .action-centre-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.75rem;
        height: 1.75rem;
        padding: 0 0.5rem;
        border-radius: 999px;
        background: rgba(255,255,255,0.2);
        font-size: 0.8rem;
        font-weight: 700;
    }

    .dashboard-action-pill {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        min-height: 64px;
        padding: 10px 16px 10px 12px;
        border-radius: 22px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.14);
        color: var(--text);
        text-decoration: none;
        box-shadow: 0 18px 40px rgba(var(--primary-rgb), 0.12);
    }

    .dashboard-action-icon {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 16px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 22px;
    }

    .dashboard-action-text {
        display: grid;
        gap: 2px;
    }

    .dashboard-action-text strong {
        color: var(--text);
        font-size: 14px;
        font-weight: 900;
    }

    .dashboard-action-text small {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
    }

    .dashboard-action-count {
        display: grid;
        place-items: center;
        min-width: 28px;
        height: 28px;
        padding: 0 8px;
        border-radius: 999px;
        background: #ef4444;
        color: #ffffff;
        font-size: 12px;
        font-weight: 900;
    }

    .dashboard-action-pill:hover {
        transform: translateY(-1px);
        border-color: rgba(var(--primary-rgb), 0.25);
    }

    @media (max-width: 768px) {
        .dashboard-action-pill {
            width: 100%;
            justify-content: center;
        }
    }

    /* ==========================================================
    ADMIN PROJECTS PAGE UI
    ========================================================== */

    .project-modern-page {
        display: grid;
        gap: 26px;
    }

    .project-hero {
        padding: 32px;
        border-radius: 28px;
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.08), transparent 260px),
            #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        box-shadow: var(--shadow-card);
    }

    .project-hero-action {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .project-summary-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .project-summary-card {
        display: grid;
        gap: 14px;
        padding: 22px;
        border-radius: 22px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        box-shadow: var(--shadow-card);
    }

    .project-summary-card span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 900;
    }

    .project-summary-card strong {
        color: var(--primary-dark);
        font-size: clamp(24px, 3vw, 34px);
        font-weight: 900;
    }

    .project-summary-card.is-active strong {
        color: #087443;
    }

    .project-summary-card.is-balance strong {
        font-size: clamp(20px, 2vw, 30px);
    }

    .project-section-head {
        margin-bottom: 16px;
    }

    .project-section-head h2 {
        margin: 4px 0;
        font-size: 30px;
    }

    .project-section-head p {
        margin: 0;
        color: var(--muted);
    }

    .project-filter-card {
        margin-bottom: 18px;
        padding: 22px;
    }

    .project-filter-form {
        align-items: end;
    }

    .project-filter-form .button-primary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .project-list-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 14px 0 12px;
    }

    .project-list-toolbar > span {
        color: #667085;
        font-size: 14px;
        font-weight: 700;
    }

    .project-export-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    .project-record-list {
        display: grid;
        gap: 12px;
    }

    .project-record-card {
        display: grid;
        grid-template-columns: 22px auto minmax(220px, 1fr) minmax(160px, auto) minmax(140px, auto) auto auto;
        align-items: center;
        gap: 16px;
        padding: 18px;
        border-radius: 20px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        box-shadow: var(--shadow-card);
    }

    .project-record-select {
        display: inline-grid;
        place-items: center;
    }

    .project-record-select input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--primary);
    }

    .project-record-icon {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 16px;
        background: rgba(var(--primary-rgb), 0.08);
        color: var(--primary-dark);
        font-size: 24px;
    }

    .project-record-main,
    .project-record-meta {
        display: grid;
        gap: 4px;
    }

    .project-record-main strong {
        color: var(--text);
        font-size: 16px;
    }

    .project-record-main span,
    .project-record-meta small {
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
    }

    .project-record-meta strong {
        color: var(--text);
        font-size: 14px;
        font-weight: 850;
    }

    .project-create-panel {
        padding: 28px;
        border-radius: 26px;
    }

    .project-manager-search-form {
        margin-bottom: 18px;
    }

    .project-manager-search-form label {
        display: grid;
        gap: 8px;
    }

    .project-manager-search-form label > span {
        color: var(--text);
        font-size: 13px;
        font-weight: 850;
    }

    .project-manager-search {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        min-height: 64px;
        padding: 8px 8px 8px 18px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 20px;
        background: #ffffff;
    }

    .project-manager-search input {
        border: 0;
        outline: 0;
        min-height: 46px;
        background: transparent;
    }

    .project-create-stepper {
        display: grid;
        gap: 18px;
    }

    .project-create-step {
        display: grid;
        gap: 18px;
        padding: 22px;
        border-radius: 24px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
    }

    .project-step-head {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .project-step-head > span {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        border-radius: 999px;
        background: var(--primary);
        color: #ffffff;
        font-size: 22px;
        font-weight: 900;
    }

    .project-step-head h3 {
        margin: 4px 0 0;
        font-size: 28px;
    }

    .project-manager-options {
        display: grid;
        gap: 12px;
    }

    .project-manager-option {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
        padding: 16px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 18px;
        background: #ffffff;
        cursor: pointer;
    }

    .project-manager-option input {
        display: none;
    }

    .project-manager-avatar {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 16px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-weight: 900;
    }

    .project-manager-option strong {
        display: block;
        color: var(--text);
    }

    .project-manager-option small {
        color: var(--muted);
    }

    .project-manager-check {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 999px;
        background: #f2f4f7;
        color: #98a2b3;
    }

    .project-manager-option:has(input:checked) {
        border-color: var(--primary);
        background: rgba(var(--primary-rgb), 0.05);
    }

    .project-manager-option:has(input:checked) .project-manager-check {
        background: var(--primary);
        color: #ffffff;
    }

    .project-search-result {
        display: grid;
        gap: 4px;
        padding: 16px;
        border-radius: 18px;
        background: rgba(var(--primary-rgb), 0.06);
        border: 1px solid rgba(var(--primary-rgb), 0.10);
    }

    .project-step-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
    }

    @media (max-width: 1100px) {
        .project-summary-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .project-record-card {
            grid-template-columns: 22px auto minmax(0, 1fr) auto;
        }
    }

    @media (max-width: 768px) {
        .project-hero {
            padding: 24px;
        }

        .project-summary-grid,
        .project-record-card,
        .project-manager-search {
            grid-template-columns: 1fr;
        }

        .project-list-toolbar {
            align-items: stretch;
            flex-direction: column;
        }

        .project-export-actions {
            justify-content: flex-start;
        }

        .project-hero-action,
        .project-manager-search .button-primary,
        .project-step-actions .button-primary,
        .project-step-actions .button-secondary {
            width: 100%;
            justify-content: center;
        }

        .project-step-actions {
            flex-direction: column-reverse;
        }
    }

    /* ==========================================================
    PROJECT CONTRIBUTIONS / PAYMENT VERIFICATION UI
    ========================================================== */

    .project-contributions-page {
        display: grid;
        gap: 26px;
    }

    .project-contributions-hero {
        padding: 32px;
        border-radius: 28px;
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.08), transparent 260px),
            #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        box-shadow: var(--shadow-card);
    }

    .project-contributions-filter-card {
        padding: 24px;
        border-radius: 26px;
    }

    .project-contributions-filter {
        align-items: end;
    }

    .project-contributions-filter .button-primary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .project-payment-list {
        display: grid;
        gap: 14px;
    }

    .project-payment-card {
        display: grid;
        grid-template-columns: minmax(260px, 1.3fr) minmax(360px, 1fr) auto;
        align-items: center;
        gap: 18px;
        padding: 20px;
        border-radius: 22px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        box-shadow: var(--shadow-card);
    }

    .project-payment-main {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

    .project-payment-icon {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 54px;
        height: 54px;
        border-radius: 18px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 24px;
    }

    .project-payment-main h3 {
        margin: 0 0 4px;
        font-size: 18px;
        color: var(--text);
    }

    .project-payment-main h3 small {
        margin-left: 6px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 800;
    }

    .project-payment-main p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
    }

    .project-payment-amounts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
        border-radius: 18px;
        background: #f8fbff;
    }

    .project-payment-amounts span {
        display: grid;
        gap: 4px;
    }

    .project-payment-amounts small {
        color: var(--muted);
        font-size: 12px;
        font-weight: 850;
    }

    .project-payment-amounts strong {
        color: var(--primary-dark);
        font-size: 16px;
        font-weight: 900;
    }

    .project-payment-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }

    .project-proof-icon {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        border: 1px solid rgba(var(--primary-rgb), 0.14);
        color: var(--primary-dark);
        background: #ffffff;
        text-decoration: none;
    }

    .project-proof-icon:hover {
        background: rgba(var(--primary-rgb), 0.06);
    }

    .project-payment-review-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding-top: 16px;
        border-top: 1px solid rgba(var(--primary-rgb), 0.08);
    }

    .project-payment-review-actions form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        margin: 0;
    }

    .project-payment-review-actions input {
        min-height: 48px;
        border-radius: 14px;
    }

    .project-payment-review-actions .button-primary,
    .project-payment-review-actions .request-reject {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
        padding: 0 18px;
        border-radius: 14px;
    }

    @media (max-width: 1100px) {
        .project-payment-card {
            grid-template-columns: 1fr;
            align-items: start;
        }

        .project-payment-actions {
            justify-content: space-between;
        }
    }

    @media (max-width: 768px) {
        .project-contributions-hero,
        .project-contributions-filter-card {
            padding: 22px;
            border-radius: 22px;
        }

        .project-payment-amounts,
        .project-payment-review-actions,
        .project-payment-review-actions form {
            grid-template-columns: 1fr;
        }

        .project-payment-review-actions .button-primary,
        .project-payment-review-actions .request-reject,
        .project-contributions-filter .button-primary {
            width: 100%;
            justify-content: center;
        }
    }

    .project-contribution-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .project-contribution-actions .button-secondary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 46px;
        padding: 0 18px;
        border-radius: 14px;
        font-weight: 700;
    }

    .project-contribution-actions .ui-icon {
        font-size: 18px;
    }

    @media (max-width: 768px) {
        .project-contribution-actions {
            width: 100%;
        }

        .project-contribution-actions .button-secondary {
            width: 100%;
            justify-content: center;
        }
    }

    /* ==========================================================
    PROJECT DETAIL PAGE UI
    ========================================================== */

    .project-detail-page {
        display: grid;
        gap: 26px;
    }

    .project-detail-hero {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        padding: 32px;
        border-radius: 28px;
        background:
            radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.08), transparent 260px),
            #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        box-shadow: var(--shadow-card);
    }

    .project-detail-hero-main {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .project-detail-hero-icon {
        display: grid;
        place-items: center;
        width: 62px;
        height: 62px;
        border-radius: 20px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 30px;
    }

    .project-detail-hero h1 {
        margin: 4px 0 6px;
        font-size: clamp(34px, 4vw, 52px);
        letter-spacing: -0.05em;
    }

    .project-detail-hero p {
        margin: 0;
        color: var(--muted);
    }

    .project-detail-hero-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .project-detail-hero-actions .button-secondary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .project-detail-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .project-detail-kpi-card {
        display: grid;
        gap: 14px;
        padding: 22px;
        border-radius: 22px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        box-shadow: var(--shadow-card);
    }

    .project-detail-kpi-card span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 900;
    }

    .project-detail-kpi-card strong {
        color: var(--primary-dark);
        font-size: clamp(24px, 3vw, 34px);
        font-weight: 900;
    }

    .project-detail-kpi-card.is-primary {
        background: var(--primary-dark);
    }

    .project-detail-kpi-card.is-primary span,
    .project-detail-kpi-card.is-primary strong {
        color: #ffffff;
    }

    .project-detail-content-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .project-detail-panel {
        display: grid;
        gap: 18px;
        padding: 26px;
        border-radius: 26px;
    }

    .project-detail-panel-head h2 {
        margin: 4px 0 0;
        font-size: 30px;
    }

    .project-mini-list {
        display: grid;
        gap: 12px;
    }

    .project-mini-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
        padding: 16px;
        border-radius: 18px;
        background: #f8fbff;
    }

    .project-mini-avatar {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 16px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-weight: 900;
    }

    .project-mini-avatar.is-asset {
        background: #eff6ff;
        color: #2563eb;
    }

    .project-mini-avatar.is-income {
        background: #ecfdf3;
        color: #087443;
    }

    .project-mini-main {
        display: grid;
        gap: 3px;
    }

    .project-mini-main strong {
        color: var(--text);
        font-size: 15px;
    }

    .project-mini-main span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
    }

    .project-credit-amount {
        color: #087443;
        font-weight: 900;
    }

    .project-asset-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(var(--primary-rgb), 0.04);
    }

    .project-asset-form label {
        display: grid;
        gap: 7px;
    }

    .project-asset-form label span {
        color: var(--text);
        font-size: 13px;
        font-weight: 850;
    }

    .project-asset-form select {
        min-height: 48px;
        border-radius: 14px;
    }

    .project-asset-form .button-primary {
        align-self: end;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
    }

    .project-ledger-timeline {
        display: grid;
        gap: 14px;
    }

    .project-timeline-item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 12px;
        align-items: start;
        padding: 15px;
        border-radius: 18px;
        background: #f8fbff;
    }

    .project-timeline-dot {
        width: 12px;
        height: 12px;
        margin-top: 6px;
        border-radius: 999px;
        background: var(--primary);
        box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.10);
    }

    .project-timeline-item strong {
        color: var(--text);
    }

    .project-timeline-item p {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 13px;
    }

    .project-timeline-item b.is-positive {
        color: #087443;
    }

    .project-timeline-item b.is-negative {
        color: #be123c;
    }

    @media (max-width: 1100px) {
        .project-detail-kpi-grid,
        .project-detail-content-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 768px) {
        .project-detail-hero,
        .project-detail-hero-main,
        .project-detail-hero-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .project-detail-hero,
        .project-detail-panel {
            padding: 22px;
            border-radius: 22px;
        }

        .project-detail-kpi-grid,
        .project-detail-content-grid,
        .project-mini-row,
        .project-asset-form,
        .project-timeline-item {
            grid-template-columns: 1fr;
        }

        .project-detail-hero-actions .button-secondary,
        .project-asset-form .button-primary {
            width: 100%;
            justify-content: center;
        }
    }

    /* Investment guarantees enhanced UI */

    .investment-guarantee-list {
        display: grid;
        gap: 14px;
    }

    .investment-guarantee-card {
        display: grid;
        grid-template-columns: minmax(260px, 1.4fr) minmax(420px, 1fr) auto;
        align-items: center;
        gap: 18px;
        padding: 18px;
        border-radius: 22px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.10);
        box-shadow: var(--shadow-card);
    }

    .investment-guarantee-main {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .investment-guarantee-icon {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        border-radius: 18px;
        background: rgba(var(--primary-rgb), 0.10);
        color: var(--primary-dark);
        font-size: 24px;
    }

    .investment-guarantee-main strong {
        display: block;
        color: var(--text);
        font-size: 16px;
        font-weight: 900;
    }

    .investment-guarantee-main span {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
    }

    .investment-guarantee-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
        border-radius: 18px;
        background: #f8fbff;
    }

    .investment-guarantee-metrics div {
        display: grid;
        gap: 4px;
    }

    .investment-guarantee-metrics span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 850;
    }

    .investment-guarantee-metrics strong {
        color: var(--primary-dark);
        font-size: 15px;
        font-weight: 900;
    }

    .investment-guarantee-view {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 15px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.14);
        color: var(--primary-dark);
        text-decoration: none;
    }

    .investment-guarantee-view:hover {
        background: rgba(var(--primary-rgb), 0.06);
    }

    @media (max-width: 900px) {
        .investment-guarantee-card {
            grid-template-columns: 1fr;
        }

        .investment-guarantee-metrics {
            grid-template-columns: 1fr;
        }

        .investment-guarantee-view {
            width: 100%;
        }
    }

    .investment-result-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        padding: 14px;
        border-radius: 20px;
        background: #f8fbff;
        border: 1px solid rgba(var(--primary-rgb), 0.08);
    }

    .investment-result-item {
        display: grid;
        gap: 6px;
        padding: 16px;
        border-radius: 16px;
        background: #ffffff;
    }

    .investment-result-item span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .investment-result-item strong {
        color: var(--primary-dark);
        font-size: clamp(18px, 2vw, 26px);
        font-weight: 900;
    }

    @media (max-width: 768px) {
        .investment-result-summary {
            grid-template-columns: 1fr;
        }
    }

    .investment-hero-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .investment-hero-actions .button-primary,
    .investment-hero-actions .button-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px; /* spacing between icon and text */
        min-width: 150px;
    }

    .investment-hero-actions .ui-icon {
        font-size: 18px;
        flex-shrink: 0;
    }

    @media (max-width: 768px) {
        .investment-hero-actions {
            display: grid;
            grid-template-columns: 1fr;
        }

        .investment-hero-actions .button-primary,
        .investment-hero-actions .button-secondary {
            width: 100%;
        }
    }

    .contribution-record-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 24px 28px;
        border-radius: 24px;
        background: #ffffff;
        border: 1px solid rgba(var(--primary-rgb), 0.08);
        box-shadow: var(--shadow-card);
    }

    .contribution-record-main {
        display: flex;
        align-items: baseline;
        gap: 18px;
        min-width: 0;
    }

    .contribution-record-main strong {
        font-size: 24px;
        color: var(--text);
    }

    .contribution-record-main span {
        font-size: 20px;
        color: var(--muted);
        font-weight: 700;
    }

    .contribution-record-actions {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .contribution-view-icon {
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        border-radius: 16px;
        border: 1px solid rgba(var(--primary-rgb), 0.15);
        color: var(--primary-dark);
        background: #ffffff;
        text-decoration: none;
    }

    .contribution-view-icon:hover {
        background: rgba(var(--primary-rgb), 0.06);
    }

    @media (max-width: 768px) {
        .contribution-record-row {
            padding: 18px;
        }

        .contribution-record-main {
            display: grid;
            gap: 4px;
        }

        .contribution-record-main strong {
            font-size: 20px;
        }

        .contribution-record-main span {
            font-size: 16px;
        }

        .contribution-view-icon {
            width: 46px;
            height: 46px;
        }
    }

    /* ==========================================================
    MOBILE SELECT / DROPDOWN FIX
    ========================================================== */

    @media (max-width: 768px) {
        select {
            width: 100%;
            max-width: 100%;
            min-height: 52px;
            padding: 0 42px 0 14px;
            border-radius: 14px;
            background-color: #ffffff;
            border: 1px solid rgba(var(--primary-rgb), 0.18);
            color: var(--text);
            font-size: 15px;
            line-height: 1.2;
            appearance: none;
            -webkit-appearance: none;
            background-image:
                linear-gradient(45deg, transparent 50%, var(--primary-dark) 50%),
                linear-gradient(135deg, var(--primary-dark) 50%, transparent 50%);
            background-position:
                calc(100% - 18px) 50%,
                calc(100% - 12px) 50%;
            background-size: 6px 6px, 6px 6px;
            background-repeat: no-repeat;
        }

        select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.12);
        }

        select option {
            font-size: 15px;
            padding: 10px;
            white-space: normal;
        }

        .kyc-page,
        .kyc-verification-page,
        .identity-verification-page {
            overflow-x: hidden;
        }

        .kyc-page form,
        .kyc-verification-page form,
        .identity-verification-page form {
            width: 100%;
            max-width: 100%;
        }
    }


    /* ShemsouStart */

    .kyc-upload-box {
        display: grid;
        gap: 10px;
        padding: 14px;
        border-radius: 16px;
        border: 1px dashed rgba(var(--primary-rgb), 0.18);
        background: #ffffff;
    }

    .custom-file-upload {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 54px;
        padding: 0 16px;
        border-radius: 14px;
        background: rgba(var(--primary-rgb), 0.08);
        color: var(--primary-dark);
        font-weight: 850;
        cursor: pointer;
    }

    .custom-file-upload input[type="file"] {
        display: none;
    }

    .custom-file-upload .ui-icon {
        font-size: 22px;
    }





    /* ==========================================================
    ADMIN LOANS MOBILE UI FIX
    ========================================================== */

    .loan-admin-actions .button-primary,
    .loan-admin-filter-form .button-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .loan-admin-filter-form {
        align-items: end;
    }

    @media (max-width: 768px) {
        .loan-admin-page {
            overflow-x: hidden;
        }

        .loan-admin-page .admin-overview-head,
        .loan-admin-hero {
            display: grid;
            gap: 18px;
        }

        .loan-admin-actions {
            display: grid;
            grid-template-columns: 1fr;
            width: 100%;
            gap: 10px;
        }

        .loan-admin-actions .button-primary,
        .loan-admin-actions .request-count {
            width: 100%;
            justify-content: center;
        }

        .loan-admin-filter-card {
            padding: 20px;
            border-radius: 22px;
        }

        .loan-admin-filter-form {
            display: grid;
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .loan-admin-filter-form label,
        .loan-admin-filter-form select,
        .loan-admin-filter-form input,
        .loan-admin-filter-form button {
            width: 100%;
        }

        .loan-mobile-table-card {
            padding: 0 !important;
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            overflow: visible !important;
        }

        .loan-responsive-table,
        .loan-responsive-table thead,
        .loan-responsive-table tbody,
        .loan-responsive-table tr,
        .loan-responsive-table th,
        .loan-responsive-table td {
            display: block !important;
            width: 100% !important;
        }

        .loan-responsive-table {
            border: 0 !important;
            overflow: visible !important;
            white-space: normal !important;
        }

        .loan-responsive-table thead {
            display: none !important;
        }

        .loan-responsive-table tbody tr {
            margin-bottom: 14px !important;
            padding: 16px !important;
            border-radius: 18px !important;
            background: #ffffff !important;
            border: 1px solid rgba(var(--primary-rgb), 0.10) !important;
            box-shadow: var(--shadow-card) !important;
        }

        .loan-responsive-table tbody td {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 14px !important;
            padding: 11px 0 !important;
            border-bottom: 1px solid rgba(var(--primary-rgb), 0.08) !important;
            text-align: right !important;
            white-space: normal !important;
            color: var(--text);
        }

        .loan-responsive-table tbody td:last-child {
            border-bottom: 0 !important;
        }

        .loan-responsive-table tbody td::before {
            content: attr(data-label);
            flex: 0 0 42%;
            text-align: left;
            color: var(--muted);
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .loan-responsive-table .table-action-icon {
            margin-left: auto;
        }
    }


    /* FINAL ADMIN LOANS MOBILE FIX */
    @media (max-width: 768px) {
        .loan-admin-page {
            width: 100%;
            max-width: 100%;
            padding: 16px 12px;
            overflow-x: hidden !important;
        }

        .loan-admin-page .admin-overview-head {
            display: grid;
            gap: 16px;
            padding: 22px 16px;
            border-radius: 22px;
        }

        .loan-admin-page .admin-overview-head h1 {
            font-size: 30px;
            line-height: 1.1;
        }

        .loan-admin-page .request-actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            width: 100%;
        }

        .loan-admin-page .request-actions .button-primary,
        .loan-admin-page .request-actions .request-count {
            width: 100%;
            justify-content: center;
            text-align: center;
        }

        .loan-admin-page .loan-filter-card {
            padding: 20px;
            border-radius: 22px;
            width: 100%;
            max-width: 100%;
            overflow: hidden;
        }

        .loan-admin-page .loan-filter-form {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 14px;
            width: 100%;
        }

        .loan-admin-page .loan-filter-form label,
        .loan-admin-page .loan-filter-form input,
        .loan-admin-page .loan-filter-form select,
        .loan-admin-page .loan-filter-form button {
            width: 100%;
            max-width: 100%;
        }

        .loan-admin-page .attendance-table-card {
            padding: 0 !important;
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            overflow: visible !important;
        }

        .loan-admin-page table,
        .loan-admin-page thead,
        .loan-admin-page tbody,
        .loan-admin-page tr,
        .loan-admin-page th,
        .loan-admin-page td {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        .loan-admin-page thead {
            display: none !important;
        }

        .loan-admin-page tbody tr {
            margin-bottom: 14px !important;
            padding: 16px !important;
            border-radius: 18px !important;
            background: #ffffff !important;
            border: 1px solid rgba(var(--primary-rgb), 0.10) !important;
            box-shadow: var(--shadow-card) !important;
        }

        .loan-admin-page tbody td {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 12px !important;
            padding: 11px 0 !important;
            border-bottom: 1px solid rgba(var(--primary-rgb), 0.08) !important;
            text-align: right !important;
            white-space: normal !important;
        }

        .loan-admin-page tbody td:last-child {
            border-bottom: 0 !important;
        }

        .loan-admin-page tbody td::before {
            content: attr(data-label);
            flex: 0 0 42%;
            text-align: left;
            color: var(--muted);
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .loan-admin-page .table-action-icon {
            margin-left: auto;
        }
    }

    @media (max-width: 768px) {
        .loan-admin-page {
            padding: 16px 12px !important;
            overflow-x: hidden !important;
        }

        .loan-admin-page .admin-overview-head {
            display: grid !important;
            gap: 14px;
            padding: 22px 16px !important;
        }

        .loan-admin-page .request-actions {
            display: grid !important;
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .loan-admin-page .request-actions > * {
            width: 100%;
            justify-content: center;
            text-align: center;
        }

        .loan-admin-page .loan-filter-form {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 14px;
        }

        .loan-admin-page .loan-filter-form label,
        .loan-admin-page .loan-filter-form input,
        .loan-admin-page .loan-filter-form select,
        .loan-admin-page .loan-filter-form button {
            width: 100% !important;
        }

        .loan-desktop-table {
            display: none !important;
        }

        .loan-mobile-list {
            display: grid;
            gap: 14px;
        }

        .loan-mobile-card {
            display: grid;
            gap: 14px;
            padding: 18px;
            border-radius: 20px;
            background: #fff;
            border: 1px solid rgba(var(--primary-rgb), .10);
            box-shadow: var(--shadow-card);
        }

        .loan-mobile-card small {
            display: block;
            color: var(--muted);
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .08em;
            margin-bottom: 4px;
        }

        .loan-mobile-card strong {
            color: var(--text);
        }

        .loan-mobile-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .loan-mobile-view {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 48px;
            border-radius: 14px;
            border: 1px solid rgba(var(--primary-rgb), .15);
            color: var(--primary-dark);
            font-weight: 850;
            text-decoration: none;
        }
    }

    @media (min-width: 769px) {
        .loan-mobile-list {
            display: none !important;
        }
    }

    /* ShemsouStop */

    /* ========================================================================== */
    /* UMOJA MOBILE-FIRST RESPONSIVE OVERRIDES                                    */
    /* Added to stabilize Android/iOS layouts without removing existing styling.   */
    /* ========================================================================== */

    :root {
        --mobile-safe-x: clamp(12px, 4vw, 20px);
        --touch-target: 48px;
        --bottom-nav-height: 74px;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-behavior: smooth;
    }

    body {
        min-width: 320px;
    }

    img,
    svg,
    video,
    canvas,
    iframe,
    table {
        max-width: 100%;
    }

    button,
    .button-primary,
    .button-secondary,
    .button-link,
    a[class*="button"],
    .admin-manage-button,
    .client-nav-pill,
    .membership-action-link,
    .settings-action-link,
    .loan-mobile-view,
    .table-action-icon {
        min-height: var(--touch-target);
        touch-action: manipulation;
    }

    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        min-height: auto;
    }

    .admin-content,
    .dashboard-shell,
    .auth-content,
    .role-header,
    .client-header,
    .client-footer {
        min-width: 0;
    }

    /* Generic responsive utilities for views that still use desktop tables/grids */
    .table-responsive,
    .admin-table-wrap,
    .permission-table-wrap,
    .loan-table-wrap,
    .transfer-table-wrap,
    .contribution-table-wrap,
    .capital-table-wrap,
    .investment-table-wrap,
    .meeting-table-wrap,
    .report-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table,
    .admin-table-wrap table,
    .permission-table,
    .loan-table-wrap table,
    .transfer-table-wrap table,
    .contribution-table-wrap table,
    .capital-table-wrap table,
    .investment-table-wrap table,
    .meeting-table-wrap table,
    .report-table-wrap table {
        min-width: 720px;
    }

    .admin-overview,
    .admin-requests,
    .transfer-page,
    .transfer-history,
    .capital-page,
    .capital-history,
    .loan-page,
    .loan-history,
    .user-profile-page,
    .settings-panel,
    .membership-panel,
    .request-card,
    .request-empty,
    .dashboard-hero,
    .client-dashboard-home,
    .coming-soon-hero {
        min-width: 0;
    }

    .admin-overview-head,
    .request-card-head,
    .dashboard-chart-head,
    .next-of-kin-card-head,
    .settings-actions,
    .agent-member-row,
    .recipient-option,
    .loan-mobile-row {
        min-width: 0;
    }

    .admin-overview-head h1,
    .client-dashboard-head h1,
    .dashboard-hero h1,
    .membership-head h1,
    .coming-soon-hero h1,
    .request-card h2,
    .settings-actions h2,
    .loan-step-head h2 {
        overflow-wrap: anywhere;
    }

    /* ========================= Tablet and small laptop ========================= */
    @media (max-width: 1180px) {
        .admin-page:not(.is-admin-sidebar-collapsed) {
            grid-template-columns: 300px minmax(0, 1fr);
        }

        .admin-sidebar {
            width: 300px;
        }

        .admin-stat-grid,
        .dashboard-visual-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .client-header {
            grid-template-columns: minmax(150px, 1fr) minmax(0, auto) auto;
            gap: 14px;
        }

        .client-nav-pill {
            min-width: auto;
            padding-inline: 18px;
        }
    }

    @media (max-width: 1024px) {
        .form-grid,
        .transfer-builder,
        .loan-builder,
        .membership-panel {
            grid-template-columns: 1fr;
        }

        .membership-visual {
            order: -1;
        }

        .membership-visual img {
            max-height: 340px;
            object-fit: cover;
        }

        .next-of-kin-details,
        .guarantor-summary,
        .loan-review-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .client-action-tiles {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    /* ================================ Mobile ================================== */
    @media (max-width: 768px) {
        body {
            background: var(--bg);
        }

        h1 {
            font-size: clamp(24px, 8vw, 34px);
            line-height: 1.12;
        }

        .eyebrow {
            font-size: 11px;
            letter-spacing: .06em;
        }

        .auth-shell {
            display: block;
            min-height: 100svh;
        }

        .auth-visual {
            display: none;
        }

        .auth-content {
            min-height: 100svh;
            padding: 22px var(--mobile-safe-x) 32px;
        }

        .auth-panel {
            width: 100%;
            padding-top: 26px;
        }

        .auth-heading {
            margin-bottom: 18px;
        }

        .auth-heading h1 {
            font-size: clamp(24px, 9vw, 32px);
        }

        .auth-nav-logo,
        .nav-logo {
            max-width: 150px;
            height: auto;
            max-height: 48px;
        }

        .form-grid,
        .phone-control,
        .pin-control {
            grid-template-columns: 1fr;
        }

        .pin-control {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            max-width: none;
        }

        .pin-box {
            min-height: 56px;
        }

        .toast-region {
            top: max(12px, env(safe-area-inset-top));
            width: calc(100% - 24px);
        }

        /* Admin becomes an off-canvas app shell on phones/tablets */
        .admin-page,
        .admin-page.is-admin-sidebar-collapsed {
            display: block;
            grid-template-columns: 1fr !important;
            min-height: 100svh;
        }

        .admin-sidebar,
        .admin-page.is-admin-sidebar-collapsed .admin-sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 80;
            width: min(86vw, 320px);
            height: 100svh;
            transform: translateX(-105%);
            transition: transform 220ms ease;
            box-shadow: 30px 0 80px rgba(23, 33, 43, .24);
        }

        .admin-page.is-admin-sidebar-open .admin-sidebar,
        body.is-admin-sidebar-open .admin-sidebar {
            transform: translateX(0);
        }

        .admin-page.is-admin-sidebar-collapsed .admin-logo,
        .admin-page.is-admin-sidebar-collapsed .admin-side-label,
        .admin-page.is-admin-sidebar-collapsed .admin-side-chevron,
        .admin-page.is-admin-sidebar-collapsed .admin-logout {
            display: initial;
        }

        .admin-page.is-admin-sidebar-collapsed .admin-side-link {
            justify-content: flex-start;
            min-height: 52px;
            padding: 0 18px;
            border-radius: 12px;
        }

        .admin-page.is-admin-sidebar-collapsed .admin-side-link::after {
            display: none;
        }

        .admin-shell {
            grid-column: auto;
            width: 100%;
            min-width: 0;
        }

        .admin-topbar {
            position: sticky;
            top: 0;
            z-index: 50;
            min-height: 66px;
            padding: 0 var(--mobile-safe-x);
        }

        .admin-content {
            width: 100%;
            padding: 20px var(--mobile-safe-x) 30px;
        }

        .admin-overview {
            gap: 18px;
        }

        .admin-overview-head {
            align-items: stretch;
            display: grid;
            gap: 14px;
        }

        .admin-overview-head h1 {
            font-size: clamp(25px, 8vw, 34px);
        }

        .admin-overview-head p {
            margin-top: 8px;
        }

        .admin-head-actions,
        .request-actions,
        .loan-step-actions,
        .settings-form-actions,
        .next-of-kin-actions,
        .avatar-upload-actions,
        .loan-export-actions,
        .contribution-export-actions,
        .investment-export-actions,
        .transfer-export-actions {
            display: grid;
            grid-template-columns: 1fr;
            justify-content: stretch;
            width: 100%;
        }

        .admin-head-actions > *,
        .request-actions > *,
        .loan-step-actions > *,
        .settings-form-actions > *,
        .next-of-kin-actions > *,
        .avatar-upload-actions > *,
        .loan-export-actions > *,
        .contribution-export-actions > *,
        .investment-export-actions > *,
        .transfer-export-actions > * {
            width: 100%;
            justify-content: center;
            text-align: center;
        }

        .admin-manage-button {
            min-width: 0;
            border-radius: 14px;
        }

        .admin-stat-grid,
        .dashboard-visual-grid {
            grid-template-columns: 1fr;
        }

        .admin-stat-card,
        .dashboard-chart-card,
        .request-card,
        .request-empty,
        .settings-panel,
        .membership-panel,
        .coming-soon-hero,
        .dashboard-hero {
            border-radius: 16px;
            padding: 18px;
        }

        .dashboard-bar-row {
            grid-template-columns: 1fr;
            gap: 6px;
        }

        .dashboard-bar-row strong {
            text-align: left;
        }

        .admin-welcome-card {
            min-height: 300px;
            border-radius: 22px 22px 0 0;
        }

        .admin-welcome-copy strong {
            margin-top: 20px;
        }

        /* Client/member app shell */
        .client-page {
            padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
        }

        .client-header,
        .role-header {
            position: sticky;
            top: 0;
            z-index: 50;
            display: flex;
            min-height: 66px;
            padding: 0 var(--mobile-safe-x);
            gap: 10px;
        }

        .client-brand,
        .brand-link {
            flex: 1 1 auto;
            min-width: 0;
        }

        .client-brand .nav-logo {
            max-width: 132px;
        }

        .client-main-nav {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 60;
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: minmax(68px, 1fr);
            gap: 4px;
            min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
            padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
            overflow-x: auto;
            background: #ffffff;
            border-top: 1px solid var(--line);
            box-shadow: 0 -14px 34px rgba(23, 33, 43, .12);
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .client-main-nav::-webkit-scrollbar {
            display: none;
        }

        .client-nav-pill {
            min-width: 0;
            min-height: 54px;
            padding: 6px 10px;
            border-radius: 14px;
            font-size: 12px;
            line-height: 1.15;
            text-align: center;
            white-space: normal;
        }

        .client-nav-badge,
        .client-nav-soon {
            top: -5px;
            right: 0;
            min-width: 20px;
            min-height: 18px;
            padding: 0 5px;
            font-size: 9px;
        }

        .client-userbar {
            gap: 8px;
            flex: 0 0 auto;
        }

        .client-user-summary {
            display: none;
        }

        .client-notification,
        .client-avatar {
            width: 44px;
            height: 44px;
        }

        .client-menu-panel {
            position: fixed;
            top: 72px;
            right: var(--mobile-safe-x);
            left: var(--mobile-safe-x);
            width: auto;
            max-height: calc(100svh - 92px);
            overflow-y: auto;
        }

        .dashboard-shell {
            width: 100%;
            padding: 18px var(--mobile-safe-x) 26px;
        }

        .dashboard-shell:has(.client-dashboard-home) {
            display: block;
            padding: 12px var(--mobile-safe-x) 24px;
        }

        .client-dashboard-home {
            padding: 14px;
            border-radius: 16px;
        }

        .client-dashboard-head {
            grid-template-columns: 1fr;
        }

        .client-dashboard-status {
            min-width: 0;
            width: 100%;
        }

        .client-action-tiles {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }

        .client-action-tile {
            min-height: 94px;
            aspect-ratio: auto;
            padding: 10px 6px;
        }

        .client-action-icon {
            width: 40px;
            height: 40px;
            font-size: 23px;
        }

        .client-action-tile strong {
            font-size: 13px;
            max-width: 86px;
        }

        .client-dashboard-summary {
            grid-template-columns: 1fr;
        }

        .client-summary-card {
            width: 100%;
        }

        .client-footer {
            display: grid;
            gap: 8px;
            min-height: auto;
            padding: 16px var(--mobile-safe-x);
            text-align: center;
        }

        .client-footer span {
            justify-self: center;
            margin-left: 0;
        }

        .membership-panel,
        .settings-panel,
        .next-of-kin-card {
            padding: 18px;
        }

        .membership-submit,
        .membership-action-link,
        .settings-action-link,
        .button-primary,
        .button-secondary {
            width: 100%;
            justify-content: center;
        }

        .next-of-kin-card-head,
        .settings-actions,
        .avatar-upload-row,
        .user-profile-hero,
        .agent-member-row,
        .recipient-option,
        .loan-step-head {
            align-items: stretch;
            flex-direction: column;
        }

        .next-of-kin-details,
        .guarantor-summary,
        .loan-review-grid {
            grid-template-columns: 1fr;
        }

        .profile-avatar-preview,
        .user-profile-avatar {
            width: 88px;
            height: 88px;
            flex-basis: 88px;
        }

        .loan-stepper {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 4px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .loan-stepper::-webkit-scrollbar {
            display: none;
        }

        .loan-step-trigger {
            flex: 0 0 78%;
            min-height: 54px;
        }

        .loan-step-panel {
            min-height: auto;
        }

        .transfer-secret strong {
            font-size: 22px;
            overflow-wrap: anywhere;
        }

        .access-tab-list {
            justify-content: flex-start;
            width: 100%;
        }

        .access-tab-list .js-tab-trigger {
            flex: 0 0 auto;
        }

        .permission-panel {
            width: 100%;
        }

        .loan-list-toolbar,
        .contribution-record-toolbar,
        .investment-list-toolbar,
        .admin-pagination {
            align-items: stretch;
            display: grid;
            gap: 10px;
        }

        .admin-pagination div {
            justify-content: stretch;
        }

        .admin-pagination a,
        .admin-pagination button {
            width: 100%;
            justify-content: center;
        }
    }

    /* ============================= Small phones =============================== */
    @media (max-width: 480px) {
        :root {
            --mobile-safe-x: 12px;
            --bottom-nav-height: 70px;
        }

        .auth-content,
        .dashboard-shell,
        .admin-content {
            padding-left: var(--mobile-safe-x);
            padding-right: var(--mobile-safe-x);
        }

        .admin-stat-card strong,
        .dashboard-donut span,
        .client-summary-card strong {
            font-size: clamp(22px, 9vw, 30px);
        }

        .client-action-tiles {
            grid-template-columns: 1fr;
        }

        .client-action-tile {
            grid-template-columns: auto 1fr;
            justify-items: start;
            min-height: 66px;
            text-align: left;
        }

        .client-action-tile strong {
            max-width: none;
            text-align: left;
        }

        .client-main-nav {
            grid-auto-columns: minmax(64px, 1fr);
            padding-inline: 6px;
        }

        .client-nav-pill {
            min-height: 52px;
            padding-inline: 6px;
            font-size: 11px;
        }

        .client-notification {
            display: none;
        }

        .admin-sidebar,
        .admin-page.is-admin-sidebar-collapsed .admin-sidebar {
            width: min(90vw, 304px);
        }

        .admin-sidebar-head {
            min-height: 72px;
            padding-inline: 14px;
        }

        .admin-logo .nav-logo {
            max-width: 130px;
            height: auto;
        }

        .admin-side-nav {
            padding: 10px;
        }

        .admin-side-link {
            min-height: 50px;
            padding-inline: 14px;
            font-size: 14px;
        }

        .pin-control {
            gap: 8px;
        }

        .pin-box {
            font-size: 20px;
        }

        .loan-step-trigger {
            flex-basis: 86%;
        }
    }

    /* Overlay support if the layout/JS already creates an overlay element */
    .admin-sidebar-backdrop,
    .admin-mobile-backdrop {
        position: fixed;
        inset: 0;
        z-index: 70;
        display: none;
        background: rgba(15, 23, 42, .42);
    }

    body.is-admin-sidebar-open .admin-sidebar-backdrop,
    body.is-admin-sidebar-open .admin-mobile-backdrop,
    .admin-page.is-admin-sidebar-open .admin-sidebar-backdrop,
    .admin-page.is-admin-sidebar-open .admin-mobile-backdrop {
        display: block;
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            scroll-behavior: auto !important;
            transition-duration: .01ms !important;
        }
    }

    /* =========================================================
    UMOJA FINAL MOBILE HEADER FIX
    Keeps logo + menu icons + notification + profile visible
    and prevents overlap on Android/iOS.
    Place this section at the very end of global.css.
    ========================================================= */
    @media (max-width: 768px) {
        .client-page {
            padding-bottom: 0 !important;
        }

        .client-header,
        .member-header {
            position: sticky !important;
            top: 0 !important;
            z-index: 80 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            width: 100% !important;
            min-height: 68px !important;
            height: 68px !important;
            gap: 4px !important;
            padding: 0 7px !important;
            overflow: hidden !important;
            background: var(--surface) !important;
            border-bottom: 1px solid var(--line) !important;
        }

        .client-brand,
        .member-brand,
        .brand-link {
            order: 1 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            flex: 0 0 78px !important;
            width: 78px !important;
            min-width: 78px !important;
            max-width: 78px !important;
            min-height: 44px !important;
            overflow: hidden !important;
            gap: 0 !important;
            justify-self: auto !important;
        }

        .client-brand .nav-logo,
        .member-brand .nav-logo,
        .brand-link .nav-logo,
        .nav-logo {
            display: block !important;
            width: 78px !important;
            max-width: 78px !important;
            height: auto !important;
            max-height: 38px !important;
            object-fit: contain !important;
            object-position: left center !important;
        }

        .client-main-nav,
        .member-main-nav {
            order: 2 !important;
            position: static !important;
            inset: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            top: auto !important;
            z-index: auto !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 1 1 auto !important;
            width: auto !important;
            min-width: 0 !important;
            max-width: none !important;
            min-height: 0 !important;
            height: 68px !important;
            gap: 3px !important;
            padding: 0 !important;
            overflow: visible !important;
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            transform: none !important;
            justify-self: auto !important;
        }

        .client-nav-pill,
        .member-nav-pill {
            position: relative !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 0 0 38px !important;
            width: 38px !important;
            min-width: 38px !important;
            max-width: 38px !important;
            height: 50px !important;
            min-height: 50px !important;
            padding: 0 !important;
            border-radius: 13px !important;
            white-space: nowrap !important;
            font-size: 0 !important;
        }

        .client-nav-pill iconify-icon,
        .member-nav-pill iconify-icon,
        .client-nav-pill .ui-icon,
        .member-nav-pill .ui-icon {
            font-size: 22px !important;
            width: 22px !important;
            height: 22px !important;
        }

        .client-nav-pill span:not(.client-nav-badge):not(.client-nav-soon),
        .member-nav-pill span:not(.member-nav-badge):not(.member-nav-soon) {
            display: none !important;
        }

        .client-nav-badge,
        .client-nav-soon,
        .member-nav-badge,
        .member-nav-soon {
            top: -4px !important;
            right: -4px !important;
            min-width: 18px !important;
            min-height: 18px !important;
            padding: 0 5px !important;
            font-size: 9px !important;
        }

        .client-userbar,
        .member-userbar {
            order: 3 !important;
            position: relative !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            flex: 0 0 76px !important;
            width: 76px !important;
            min-width: 76px !important;
            max-width: 76px !important;
            gap: 4px !important;
            justify-self: auto !important;
        }

        .client-user-summary,
        .member-user-summary {
            display: none !important;
        }

        .client-notification,
        .member-notification,
        .client-avatar,
        .member-avatar {
            display: inline-grid !important;
            place-items: center !important;
            flex: 0 0 36px !important;
            width: 36px !important;
            min-width: 36px !important;
            height: 36px !important;
            min-height: 36px !important;
            margin: 0 !important;
        }

        .client-notification span,
        .member-notification span {
            display: block !important;
        }

        .client-avatar img,
        .member-avatar img,
        .user-head-icon {
            display: block !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

        .client-menu-panel,
        .member-menu-panel {
            position: fixed !important;
            top: 74px !important;
            right: 8px !important;
            left: 8px !important;
            width: auto !important;
            max-height: calc(100svh - 90px) !important;
            overflow-y: auto !important;
        }
    }

    @media (max-width: 420px) {
        .client-header,
        .member-header {
            gap: 2px !important;
            padding-left: 5px !important;
            padding-right: 5px !important;
        }

        .client-brand,
        .member-brand,
        .brand-link {
            flex-basis: 70px !important;
            width: 70px !important;
            min-width: 70px !important;
            max-width: 70px !important;
        }

        .client-brand .nav-logo,
        .member-brand .nav-logo,
        .brand-link .nav-logo,
        .nav-logo {
            width: 70px !important;
            max-width: 70px !important;
            max-height: 34px !important;
        }

        .client-main-nav,
        .member-main-nav {
            gap: 2px !important;
        }

        .client-nav-pill,
        .member-nav-pill {
            flex-basis: 36px !important;
            width: 36px !important;
            min-width: 36px !important;
            max-width: 36px !important;
            height: 48px !important;
            min-height: 48px !important;
        }

        .client-userbar,
        .member-userbar {
            flex-basis: 70px !important;
            width: 70px !important;
            min-width: 70px !important;
            max-width: 70px !important;
            gap: 3px !important;
        }

        .client-notification,
        .member-notification,
        .client-avatar,
        .member-avatar {
            flex-basis: 33px !important;
            width: 33px !important;
            min-width: 33px !important;
            height: 33px !important;
            min-height: 33px !important;
        }
    }

    @media (max-width: 360px) {
        .client-brand,
        .member-brand,
        .brand-link {
            flex-basis: 62px !important;
            width: 62px !important;
            min-width: 62px !important;
            max-width: 62px !important;
        }

        .client-brand .nav-logo,
        .member-brand .nav-logo,
        .brand-link .nav-logo,
        .nav-logo {
            width: 62px !important;
            max-width: 62px !important;
        }

        .client-nav-pill,
        .member-nav-pill {
            flex-basis: 34px !important;
            width: 34px !important;
            min-width: 34px !important;
            max-width: 34px !important;
        }

        .client-userbar,
        .member-userbar {
            flex-basis: 66px !important;
            width: 66px !important;
            min-width: 66px !important;
            max-width: 66px !important;
        }

        .client-notification,
        .member-notification,
        .client-avatar,
        .member-avatar {
            flex-basis: 31px !important;
            width: 31px !important;
            min-width: 31px !important;
            height: 31px !important;
            min-height: 31px !important;
        }
    }

    /* =====================================================
    MOBILE MENU + ADMIN HEADER FINAL FIX
    ===================================================== */

    @media (max-width: 768px) {
        .client-menu-panel {
            position: fixed !important;
            top: 72px !important;
            right: 10px !important;
            left: auto !important;
            z-index: 9999 !important;
            width: min(280px, calc(100vw - 20px)) !important;
            max-height: calc(100vh - 90px);
            overflow-y: auto;
            border-radius: 16px;
        }

        .client-userbar,
        .admin-userbar {
            position: relative;
            display: flex !important;
            align-items: center;
            justify-content: flex-end;
        }

        .client-avatar,
        .client-notification {
            display: inline-grid !important;
        }

        .admin-page {
            display: block !important;
            grid-template-columns: none !important;
        }

        .admin-shell {
            width: 100%;
            min-width: 0;
        }

        .admin-topbar {
            display: flex !important;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            min-height: 68px;
            padding: 0 10px;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .admin-topbar-left {
            display: flex !important;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .admin-mobile-sidebar-toggle {
            display: inline-grid !important;
            place-items: center;
            width: 42px;
            height: 42px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #fff;
            color: var(--primary-dark);
            font-size: 24px;
        }

        .admin-mobile-brand {
            display: flex !important;
            align-items: center;
            max-width: 92px;
            overflow: hidden;
        }

        .admin-mobile-brand .nav-logo {
            display: block;
            max-width: 92px;
            height: 32px;
            object-fit: contain;
        }

        .admin-topbar-title {
            display: none;
        }

        .admin-sidebar {
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9998;
            width: min(86vw, 320px) !important;
            transform: translateX(-105%);
            transition: transform 180ms ease;
            box-shadow: 24px 0 60px rgba(23, 33, 43, 0.22);
        }

        .admin-page.is-admin-sidebar-open .admin-sidebar {
            transform: translateX(0);
        }

        .admin-sidebar-backdrop {
            position: fixed;
            inset: 0;
            z-index: 9997;
            border: 0;
            background: rgba(23, 33, 43, 0.45);
        }

        .admin-content {
            width: min(100% - 20px, 1330px);
            padding: 18px 0 34px;
        }

        .admin-userbar .client-user-summary {
            display: none !important;
        }

        .admin-userbar {
            gap: 6px;
            flex: 0 0 auto;
        }

        .admin-userbar .client-notification,
        .admin-userbar .client-avatar {
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
        }
    }

    @media (min-width: 769px) {
        .admin-mobile-sidebar-toggle,
        .admin-mobile-brand {
            display: none !important;
        }

        .admin-topbar-left {
            display: block;
        }
    }

    .client-userbar {
        position: relative;
    }

    .client-menu-panel {
        z-index: 99999 !important;
    }

    @media (max-width: 768px) {
        .client-menu-panel {
            position: fixed !important;
            top: 72px !important;
            right: 10px !important;
            left: auto !important;
            width: min(280px, calc(100vw - 20px)) !important;
            max-height: calc(100vh - 90px);
            overflow-y: auto;
        }

        .client-avatar,
        .client-notification {
            display: inline-grid !important;
            pointer-events: auto !important;
        }

        .client-userbar,
        .admin-userbar {
            display: flex !important;
            pointer-events: auto !important;
        }
    }

    /* ==========================================
    DESKTOP ADMIN SIDEBAR VISIBILITY FIX
    ========================================== */

    @media (min-width: 769px) {
        body.admin-page {
            display: grid !important;
            grid-template-columns: 350px minmax(0, 1fr) !important;
        }

        body.admin-page.is-admin-sidebar-collapsed {
            grid-template-columns: 108px minmax(0, 1fr) !important;
        }

        .admin-sidebar {
            display: flex !important;
            transform: none !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: 350px !important;
        }

        body.admin-page.is-admin-sidebar-collapsed .admin-sidebar {
            width: 108px !important;
        }

        .admin-shell {
            grid-column: 2 !important;
            min-width: 0;
        }

        .admin-side-nav,
        .admin-side-dropdown,
        .admin-side-list {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        .admin-side-list {
            display: grid !important;
            gap: 8px;
        }

        .admin-side-dropdown-title {
            display: flex !important;
        }

        .admin-side-link {
            display: flex !important;
        }

        .admin-side-label,
        .admin-side-group-heading span,
        .admin-side-dropdown-chevron,
        .admin-logout span {
            display: inline !important;
        }

        body.admin-page.is-admin-sidebar-collapsed .admin-side-label,
        body.admin-page.is-admin-sidebar-collapsed .admin-side-group-heading span,
        body.admin-page.is-admin-sidebar-collapsed .admin-side-dropdown-chevron,
        body.admin-page.is-admin-sidebar-collapsed .admin-logout span {
            display: none !important;
        }

        .admin-mobile-sidebar-toggle,
        .admin-mobile-brand {
            display: none !important;
        }
    }

    @media (max-width: 768px) {
        .client-menu-panel {
            position: fixed !important;
            top: 72px !important;
            right: 10px !important;
            left: auto !important;
            z-index: 99999 !important;
            width: min(280px, calc(100vw - 20px)) !important;
            max-height: calc(100vh - 90px);
            overflow-y: auto;
            display: block;
        }

        .client-menu-panel[hidden] {
            display: none !important;
        }

        .client-userbar,
        .member-userbar {
            position: relative;
            z-index: 9999;
            pointer-events: auto !important;
        }

        .client-avatar,
        .member-avatar {
            pointer-events: auto !important;
            cursor: pointer;
        }
    }

    .client-menu-panel {
        z-index: 999999 !important;
    }

    .client-menu-panel[hidden] {
        display: none !important;
    }

    .client-menu-panel:not([hidden]) {
        display: block !important;
    }

    @media (max-width: 768px) {
        .client-menu-panel {
            position: fixed !important;
            top: 72px !important;
            right: 8px !important;
            left: auto !important;
            width: min(280px, calc(100vw - 16px)) !important;
            max-height: calc(100vh - 86px);
            overflow-y: auto;
        }

        .client-userbar,
        .member-userbar,
        .client-avatar,
        .member-avatar {
            pointer-events: auto !important;
        }
    }

    /* =====================================================
    FINAL PROFILE MENU FIX - MEMBER / CLIENT / ADMIN
    ===================================================== */

    .client-header,
    .member-header,
    .admin-topbar,
    .client-userbar,
    .member-userbar,
    .admin-userbar {
        overflow: visible !important;
    }

    .client-userbar,
    .member-userbar,
    .admin-userbar,
    .js-client-menu {
        position: relative !important;
        z-index: 9998 !important;
    }

    .client-avatar,
    .member-avatar,
    .client-user-summary,
    .member-user-summary,
    .js-client-menu-toggle {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .client-menu-panel {
        z-index: 999999 !important;
        display: none;
    }

    .client-menu-panel[hidden] {
        display: none !important;
    }

    .client-menu-panel.is-open,
    .client-menu-panel:not([hidden]) {
        display: block !important;
    }

    @media (min-width: 769px) {
        .client-menu-panel {
            position: absolute !important;
            top: calc(100% + 14px) !important;
            right: 0 !important;
            left: auto !important;
            width: 280px !important;
        }
    }

    @media (max-width: 768px) {
        .client-menu-panel {
            position: fixed !important;
            top: 72px !important;
            right: 10px !important;
            left: auto !important;
            width: min(280px, calc(100vw - 20px)) !important;
            max-height: calc(100vh - 90px) !important;
            overflow-y: auto !important;
            border-radius: 16px !important;
            background: #ffffff !important;
            box-shadow: 0 20px 60px rgba(23, 33, 43, 0.22) !important;
        }

        .client-userbar,
        .member-userbar,
        .admin-userbar {
            display: flex !important;
            align-items: center !important;
        }

        .client-avatar,
        .member-avatar,
        .client-notification,
        .member-notification {
            display: inline-grid !important;
            pointer-events: auto !important;
        }
    }

    /* Admin dashboard mobile enhancement */
    .dashboard-section-title {
        color: #667085;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    @media (max-width: 768px) {
        .performance-hero {
            align-items: stretch;
            display: grid;
            gap: 14px;
        }

        .dashboard-action-pill {
            width: 100%;
        }

        .action-centre-strip,
        .dashboard-command-grid,
        .dashboard-insight-layout,
        .finance-breakdown-list,
        .wealth-mini-list {
            grid-template-columns: 1fr !important;
        }

        .dashboard-command-card,
        .dashboard-insight-card {
            min-width: 0;
        }

        .dashboard-money-value {
            font-size: clamp(22px, 7vw, 34px);
            overflow-wrap: anywhere;
        }
    }

    .admin-users-mobile-list {
        display: none;
    }

    .admin-users-list-toolbar {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

    .admin-users-select-all {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    @media (max-width: 768px) {
        .admin-users-table {
            display: none;
        }

        .admin-users-mobile-list {
            display: grid;
            gap: 14px;
        }

        .admin-user-mobile-card {
            display: grid;
            gap: 14px;
            padding: 16px;
            border: 1px solid var(--line);
            border-radius: 16px;
            background: #fff;
        }

        .admin-user-mobile-head {
            display: grid;
            grid-template-columns: auto 48px minmax(0, 1fr);
            align-items: center;
            gap: 12px;
        }

        .admin-user-mobile-head strong,
        .admin-user-mobile-head span {
            display: block;
            overflow-wrap: anywhere;
        }

        .admin-user-mobile-meta {
            display: grid;
            gap: 10px;
            grid-template-columns: 1fr 1fr;
        }

        .admin-user-mobile-meta span {
            display: block;
            color: var(--muted);
            font-size: 12px;
        }

        .admin-user-mobile-meta strong {
            font-size: 13px;
        }

        .admin-user-mobile-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
    }

    @media (max-width: 768px) {
        .admin-icon-btn {
            display: inline-grid !important;
            place-items: center;
            width: 46px;
            height: 46px;
            min-width: 46px;
            min-height: 46px;
            padding: 0 !important;
            border: 1px solid rgba(var(--primary-rgb), 0.22);
            border-radius: 14px;
            background: #fff;
            color: var(--primary-dark);
            font-size: 22px;
        }

        .admin-users-list-toolbar {
            align-items: center;
        }

        .admin-user-mobile-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }

        .admin-user-mobile-head {
            grid-template-columns: auto 52px minmax(0, 1fr);
        }

        .admin-user-mobile-head .admin-user-photo {
            width: 52px !important;
            height: 52px !important;
            min-width: 52px;
            border-radius: 50%;
            object-fit: cover;
            object-position: center;
            border: 2px solid rgba(var(--primary-rgb), 0.18);
            background: #fff;
        }
    }

    /* Admin loans mobile enhancement */
    .loan-mobile-list {
        display: none;
    }

    @media (max-width: 768px) {
        .loan-admin-hero,
        .loan-admin-actions,
        .loan-list-toolbar,
        .loan-export-actions {
            align-items: stretch;
            flex-direction: column;
        }

        .loan-admin-actions,
        .loan-export-actions {
            display: flex;
            gap: 8px;
        }

        .loan-desktop-table {
            display: none;
        }

        .loan-mobile-list {
            display: grid;
            gap: 14px;
        }

        .loan-mobile-card {
            display: grid;
            gap: 14px;
            padding: 16px;
            border: 1px solid var(--line);
            border-radius: 16px;
            background: #ffffff;
            box-shadow: var(--shadow-card);
        }

        .loan-mobile-card-head {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 12px;
        }

        .loan-mobile-reference {
            min-width: 0;
        }

        .loan-mobile-reference span,
        .loan-mobile-info-grid small {
            display: block;
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
        }

        .loan-mobile-reference strong,
        .loan-mobile-info-grid strong,
        .loan-mobile-info-grid span {
            display: block;
            overflow-wrap: anywhere;
        }

        .loan-mobile-info-grid {
            display: grid;
            gap: 12px;
            grid-template-columns: 1fr 1fr;
        }

        .loan-mobile-status-row {
            display: flex;
            justify-content: flex-start;
        }

        .loan-mobile-select {
            display: inline-grid;
            place-items: center;
            width: 40px;
            height: 40px;
            margin: 0;
        }

        .loan-mobile-select input {
            width: 18px;
            height: 18px;
            margin: 0;
            accent-color: var(--primary);
        }

        .loan-mobile-view,
        .loan-export-btn {
            width: 46px !important;
            height: 46px !important;
            min-width: 46px !important;
            min-height: 46px !important;
            padding: 0 !important;
        }

        .loan-export-btn span,
        .loan-filter-submit span,
        .loan-icon-action span {
            display: none;
        }

        .loan-filter-submit,
        .loan-icon-action {
            width: 46px;
            min-width: 46px;
            padding: 0;
            justify-self: start;
        }

        .loan-admin-filter-form {
            grid-template-columns: 1fr !important;
        }
    }

    /* =====================================================
    FINAL FIX: LOAN EXPORT ICONS SIDE-BY-SIDE ON MOBILE
    ===================================================== */

    @media (max-width: 768px) {
        .loan-list-toolbar {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            gap: 12px !important;
            width: 100% !important;
        }

        .loan-list-toolbar > span {
            flex: 1 1 auto !important;
            min-width: 0 !important;
            white-space: normal !important;
        }

        .loan-export-actions {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            gap: 8px !important;
            margin-left: auto !important;
            width: auto !important;
        }

        .loan-export-btn,
        .loan-export-actions .button-primary,
        .loan-export-actions .button-secondary {
            display: inline-grid !important;
            place-items: center !important;
            width: 46px !important;
            height: 46px !important;
            min-width: 46px !important;
            min-height: 46px !important;
            max-width: 46px !important;
            padding: 0 !important;
            border-radius: 14px !important;
            flex: 0 0 46px !important;
        }

        .loan-export-btn span,
        .loan-export-actions .button-primary span,
        .loan-export-actions .button-secondary span {
            display: none !important;
        }

        .loan-export-btn iconify-icon,
        .loan-export-actions iconify-icon {
            font-size: 22px !important;
        }
    }

    /* ==========================================
    NEXT OF KIN ICON ACTIONS
    ========================================== */

    .next-of-kin-icon-actions {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important; /* IMPORTANT */
        align-items: center !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
    }

    .next-of-kin-icon-actions form {
        margin: 0 !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .next-of-kin-icon-btn {
        display: inline-grid !important;
        place-items: center !important;

        width: 52px !important;
        height: 52px !important;

        min-width: 52px !important;
        min-height: 52px !important;

        padding: 0 !important;

        flex: 0 0 52px !important; /* prevents stretching */

        border-radius: 14px !important;
    }

    @media (max-width: 768px) {
        .next-of-kin-icon-actions {
            justify-content: center !important;
            gap: 12px !important;
        }
    }

    .banking-simple-page {
        max-width: 920px;
    }

    .banking-simple-section {
        display: grid;
        gap: 16px;
    }

    .banking-simple-title h2 {
        margin: 0 0 6px;
    }

    .banking-simple-title p {
        margin: 0;
        color: var(--muted);
    }

    .banking-simple-grid {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .banking-simple-card {
        display: grid;
        gap: 16px;
        min-width: 0;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
    }

    .banking-simple-card-head {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .banking-simple-card-head > .ui-icon {
        width: 44px;
        height: 44px;
        padding: 10px;
        border-radius: 14px;
        background: rgba(var(--primary-rgb), 0.08);
        color: var(--primary-dark);
    }

    .banking-simple-card-head span {
        display: block;
        color: var(--muted);
        font-size: 13px;
    }

    .banking-simple-card-head strong {
        display: block;
        font-size: 18px;
    }

    .banking-simple-card dl {
        display: grid;
        gap: 10px;
        margin: 0;
    }

    .banking-simple-card dl div {
        display: grid;
        gap: 2px;
    }

    .banking-simple-card dt {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .banking-simple-card dd {
        margin: 0;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .banking-saved-account {
        position: relative;
        display: grid;
        gap: 4px;
        padding: 14px 56px 14px 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface-soft);
    }

    .banking-saved-account span {
        color: var(--muted);
        overflow-wrap: anywhere;
    }

    .banking-icon-action {
        position: absolute;
        top: 50%;
        right: 12px;
        display: inline-grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(var(--primary-rgb), 0.22);
        border-radius: 12px;
        background: #fff;
        color: var(--primary-dark);
        transform: translateY(-50%);
    }

    .banking-add-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 46px;
        padding: 0 16px;
        border: 1px solid rgba(var(--primary-rgb), 0.22);
        border-radius: 14px;
        background: #fff;
    }

    @media (max-width: 768px) {
        .banking-simple-grid {
            grid-template-columns: 1fr;
        }

        .banking-simple-card {
            padding: 16px;
        }

        .banking-form-card .form-grid {
            grid-template-columns: 1fr;
        }
    }

    /* =====================================================
    TRANSFERS MOBILE UX ENHANCEMENT
    ===================================================== */

    @media (max-width: 768px) {
        .transfer-centre {
            gap: 18px;
        }

        .transfer-hero {
            display: grid;
            gap: 16px;
            padding: 22px 18px;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: #fff;
        }

        .transfer-hero h1 {
            font-size: 32px;
        }

        .transfer-hero-action {
            width: 48px;
            height: 48px;
            min-width: 48px;
            padding: 0 !important;
            border-radius: 14px;
            font-size: 0;
        }

        .transfer-hero-action::before {
            content: "+";
            font-size: 28px;
            line-height: 1;
        }

        .transfer-overview-grid {
            grid-template-columns: 1fr 1fr !important;
            gap: 10px;
        }

        .transfer-overview-card {
            min-height: 92px;
            padding: 14px;
            border-radius: 16px;
        }

        .transfer-overview-card strong {
            font-size: 20px;
            overflow-wrap: anywhere;
        }

        .transfer-tab-list {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr);
            width: 100%;
            gap: 6px;
            overflow: visible;
        }

        .transfer-tab-list .js-tab-trigger {
            min-width: 0;
            min-height: 44px;
            padding: 0 8px;
            font-size: 13px;
        }

        .transfer-create-card,
        .transfer-panel-modern {
            padding: 16px;
            border-radius: 18px;
        }

        .transfer-section-head {
            display: grid;
            gap: 6px;
        }

        .transfer-section-head h2 {
            font-size: 24px;
        }

        .transfer-stepper-modern {
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        .transfer-stepper-modern .loan-step-trigger {
            display: grid;
            justify-items: center;
            gap: 6px;
            min-height: 72px;
            padding: 10px 6px;
            text-align: center;
        }

        .transfer-stepper-modern .loan-step-trigger span {
            width: 30px;
            height: 30px;
        }

        .transfer-stepper-modern .loan-step-trigger strong {
            font-size: 12px;
        }

        .transfer-stepper-modern .loan-step-trigger small {
            display: none;
        }

        .loan-step-head {
            align-items: flex-start;
        }

        .loan-step-page-number {
            width: 42px;
            height: 42px;
            font-size: 18px;
        }

        .transfer-search-wrapper {
            display: grid !important;
            grid-template-columns: 42px minmax(0, 1fr) 46px;
            align-items: center;
            gap: 6px;
        }

        .transfer-search-btn {
            width: 46px;
            height: 46px;
            min-width: 46px;
            padding: 0;
            font-size: 0;
            border-radius: 14px;
        }

        .transfer-search-btn::before {
            content: "🔍";
            font-size: 18px;
        }

        .transfer-recipient-grid {
            grid-template-columns: 1fr !important;
        }

        .transfer-recipient-card {
            display: grid;
            grid-template-columns: 46px minmax(0, 1fr);
            gap: 12px;
            padding: 14px;
            border-radius: 16px;
        }

        .transfer-recipient-role {
            grid-column: 2;
            justify-self: start;
        }

        .transfer-selected-recipient {
            display: grid;
            grid-template-columns: 48px minmax(0, 1fr);
            gap: 12px;
            padding: 14px;
            border-radius: 16px;
        }

        .transfer-amount-form {
            display: grid;
            gap: 14px;
        }

        .transfer-simulator,
        .transfer-calculation {
            grid-template-columns: 1fr 1fr !important;
            gap: 10px;
        }

        .transfer-simulator div {
            min-width: 0;
            padding: 14px;
            border-radius: 14px;
        }

        .transfer-simulator strong {
            font-size: 18px;
            overflow-wrap: anywhere;
        }

        .loan-step-actions {
            display: grid;
            grid-template-columns: 48px 1fr;
            gap: 10px;
        }

        .loan-step-actions .button-secondary {
            width: 48px;
            min-width: 48px;
            padding: 0;
            font-size: 0;
            border: 1px solid var(--line);
            border-radius: 14px;
        }

        .loan-step-actions .button-secondary::before {
            content: "←";
            font-size: 24px;
        }

        .loan-step-actions .button-primary {
            width: 100%;
        }

        .transfer-review-card {
            display: grid;
            gap: 10px;
            padding: 14px;
            border: 1px solid var(--line);
            border-radius: 16px;
            background: #fff;
        }

        .transfer-review-row {
            display: flex;
            justify-content: space-between;
            gap: 14px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(217, 225, 231, 0.7);
        }

        .transfer-review-row:last-child {
            border-bottom: 0;
        }

        .transfer-review-row strong {
            text-align: right;
            overflow-wrap: anywhere;
        }

        .transfer-confirm-note {
            display: grid;
            grid-template-columns: 36px minmax(0, 1fr);
            gap: 10px;
            padding: 14px;
            border-radius: 14px;
            background: rgba(var(--primary-rgb), 0.06);
        }

        .transfer-card-list {
            display: grid;
            gap: 14px;
        }

        .transfer-record-card {
            padding: 16px;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: #fff;
            box-shadow: var(--shadow-card);
        }

        .transfer-record-card header {
            display: grid;
            gap: 10px;
        }

        .transfer-record-card h3 {
            margin: 0;
            font-size: 17px;
            overflow-wrap: anywhere;
        }

        .transfer-record-grid {
            grid-template-columns: 1fr !important;
            gap: 10px;
            margin-top: 14px;
        }

        .transfer-record-grid div {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px solid rgba(217, 225, 231, 0.7);
        }

        .transfer-record-grid div:last-child {
            border-bottom: 0;
        }

        .transfer-record-grid span {
            color: var(--muted);
            font-size: 13px;
        }

        .transfer-record-grid strong {
            text-align: right;
            overflow-wrap: anywhere;
        }

        .transfer-record-card .settings-action-link {
            width: 48px;
            height: 48px;
            min-width: 48px;
            padding: 0;
            margin-top: 12px;
            border-radius: 14px;
            font-size: 0;
        }

        .transfer-record-card .settings-action-link::before {
            content: "👁";
            font-size: 18px;
        }
    }

    /* Transfer recipient display fix */
    .transfer-recipient-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        margin-top: 14px;
    }

    .transfer-recipient-card {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
        color: var(--text);
    }

    .transfer-recipient-avatar {
        display: inline-grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-dark);
        font-weight: 800;
    }

    .transfer-recipient-main {
        display: grid;
        gap: 3px;
        min-width: 0;
    }

    .transfer-recipient-main strong,
    .transfer-recipient-main small {
        display: block;
        overflow-wrap: anywhere;
    }

    .transfer-recipient-role {
        justify-self: end;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(var(--primary-rgb), 0.08);
        color: var(--primary-dark);
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
    }

    .transfer-recipient-arrow {
        display: none;
    }

    @media (max-width: 768px) {
        .transfer-recipient-grid {
            grid-template-columns: 1fr;
        }

        .transfer-recipient-card {
            grid-template-columns: 46px minmax(0, 1fr) 28px;
        }

        .transfer-recipient-role {
            grid-column: 2;
            justify-self: start;
            width: max-content;
        }

        .transfer-recipient-arrow {
            display: block;
            grid-column: 3;
            grid-row: 1 / span 2;
            color: var(--muted);
            font-size: 24px;
        }
    }

    /* =====================================================
    FIX TRANSFER RECIPIENT SEARCH INPUT ON MOBILE
    ===================================================== */

    @media (max-width: 768px) {
        .transfer-search-form-inline {
            width: 100%;
        }

        .transfer-search-wrapper {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) 54px !important;
            gap: 10px !important;
            width: 100% !important;
            align-items: center !important;
        }

        .transfer-search-icon {
            display: none !important;
        }

        .transfer-search-wrapper input[type="search"],
        .js-transfer-recipient-query {
            display: block !important;
            width: 100% !important;
            min-width: 0 !important;
            height: 54px !important;
            padding: 0 16px !important;
            font-size: 18px !important;
            border: 1px solid var(--line) !important;
            border-radius: 16px !important;
            background: #ffffff !important;
            pointer-events: auto !important;
            opacity: 1 !important;
        }

        .transfer-search-btn {
        display: inline-grid !important;
        place-items: center !important;

        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
        min-height: 48px !important;

        padding: 0 !important;

        border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
        border-radius: 14px !important;

        background: #ffffff !important;
        color: var(--primary-dark) !important;

        box-shadow: none !important;
    }

    .transfer-search-btn::before {
        content: none !important;
    }

    .transfer-search-btn iconify-icon {
        font-size: 22px !important;
        color: inherit !important;
    }
    }

    .transfer-currency-input-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .transfer-currency-input-grid input {
        min-height: 60px;
        font-size: 22px;
        font-weight: 700;
    }

    @media (max-width: 768px) {
        .transfer-currency-input-grid {
            grid-template-columns: 1fr;
        }
    }

    .transfer-review-summary{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:1rem;
        margin-top:1rem;
    }

    .transfer-review-summary .transfer-review-row{
        min-height:120px;
    }

    .transfer-review-summary .is-total strong{
        font-size:2rem;
        color:var(--primary);
    }

    @media (max-width:768px){

        .transfer-review-summary{
            grid-template-columns:1fr;
        }

        .transfer-review-summary .transfer-review-row{
            min-height:auto;
        }

        .transfer-review-summary .is-total strong{
            font-size:1.75rem;
        }

    }

    /* ==================================================
    Hide transfer step tabs on mobile
    ================================================== */

    @media (max-width: 768px) {

        .transfer-steps,
        .transfer-progress,
        .transfer-process-steps {
            display: none !important;
        }

    }

    .transfer-mobile-progress{
        display:none;
    }

    @media (max-width:768px){

        .transfer-mobile-progress{
            display:inline-flex;
            align-items:center;
            padding:.4rem .8rem;
            border-radius:999px;
            background:#f4edf7;
            color:var(--primary);
            font-size:.8rem;
            font-weight:700;
            margin-bottom:1rem;
        }

    }

    /* Transfer steps: clean desktop and mobile UX */

    .transfer-mobile-progress {
        display: none;
    }

    .transfer-review-clean {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .transfer-review-summary {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    @media (max-width: 768px) {
        .transfer-stepper-modern {
            display: none !important;
        }

        .transfer-create-card {
            padding: 18px !important;
        }

        .transfer-section-head {
            gap: 8px;
        }

        .transfer-section-head h2 {
            font-size: 24px;
            line-height: 1.2;
        }

        .loan-step-head {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .loan-step-page-number {
            width: 42px;
            height: 42px;
            min-width: 42px;
        }

        .transfer-review-clean,
        .transfer-review-summary {
            grid-template-columns: 1fr;
        }

        .transfer-review-summary {
            gap: 12px;
        }
    }

    @media (max-width: 768px) {

        .loan-step-head {
            display: flex;
            align-items: center;   /* vertically align */
            gap: 14px;
            margin-bottom: 20px;
        }

        .loan-step-head > div {
            flex: 1;
        }

        .loan-step-page-number {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 50%;

            display: flex;
            align-items: center;
            justify-content: center;

            font-size: 1.1rem;
            font-weight: 700;

            background: var(--primary-color, #6b1f75);
            color: #fff;
        }

        .loan-step-head .eyebrow {
            display: none; /* hides "STEP 2 OF 3" */
        }

        .loan-step-head h2 {
            margin: 0;
            font-size: 2rem;
            line-height: 1.15;
        }

        .loan-step-head .muted {
            margin-top: 4px;
            margin-bottom: 0;
            font-size: 0.95rem;
            line-height: 1.4;
        }
    }

    @media (max-width: 768px) {
        .transfer-panel-modern .loan-step-head {
            display: grid !important;
            grid-template-columns: 44px minmax(0, 1fr) !important;
            align-items: center !important;
            column-gap: 12px !important;
            margin-bottom: 18px !important;
        }

        .transfer-panel-modern .loan-step-page-number {
            grid-column: 1 !important;
            grid-row: 1 / span 2 !important;
            align-self: start !important;
            margin: 0 !important;
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            transform: none !important;
        }

        .transfer-panel-modern .loan-step-head > div {
            grid-column: 2 !important;
            min-width: 0 !important;
        }

        .transfer-panel-modern .loan-step-head .eyebrow {
            display: none !important;
        }

        .transfer-panel-modern .loan-step-head h2 {
            margin: 0 0 4px !important;
            font-size: 24px !important;
            line-height: 1.15 !important;
        }

        .transfer-panel-modern .loan-step-head .muted {
            margin: 0 !important;
            font-size: 13px !important;
            line-height: 1.35 !important;
        }
    }

    .transfer-add-recipient{
        margin: 1rem 0 1.5rem;
    }

    .transfer-add-recipient-btn{
        display:inline-flex;
        align-items:center;
        gap:.6rem;
        padding:.75rem 1rem;
    }

    @media (max-width:768px){

        .transfer-add-recipient-btn{
            width:100%;
            justify-content:center;
        }

    }

    .transfer-add-recipient {
        margin: 14px 0 18px;
    }

    .transfer-add-recipient-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 46px;
        padding: 0 16px;
        border-radius: 14px;
    }

    .transfer-create-recipient-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    @media (max-width: 768px) {
        .transfer-add-recipient-btn,
        .transfer-create-recipient-actions .button-primary,
        .transfer-create-recipient-actions .button-secondary {
            width: 100%;
        }

        .transfer-add-recipient {
            margin: 12px 0 16px;
        }
    }

    .transfer-dual-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .transfer-currency-summary-title {
        grid-column: 1 / -1;
        font-weight: 800;
        color: var(--primary);
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: 12px;
    }

    @media (max-width: 768px) {
        .transfer-dual-summary {
            grid-template-columns: 1fr;
        }
    }

    .transfer-summary-title {
        color: #8b95a7;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .transfer-summary-card--payable {
        background: rgba(122, 39, 122, 0.08);
        border: 1px solid rgba(122, 39, 122, 0.18);
    }

    .transfer-summary-card--payable h4 {
        color: #5a6472;
    }

    .transfer-summary-card--payable strong {
        color: var(--color-primary);
    }

    .transfer-summary-card--payable strong {
        font-size: 2rem;
        font-weight: 800;
    }

    /* =====================================================
    TRANSFER DUAL CURRENCY SUMMARY
    Muted section labels + highlighted total cards
    ===================================================== */

    .transfer-dual-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        padding: 18px;
        border-radius: 22px;
        background: #f7fafc;
    }

    .transfer-dual-summary > div:not(.transfer-currency-summary-title) {
        min-width: 0;
        padding: 18px;
        border: 1px solid rgba(122, 39, 122, 0.10);
        border-radius: 18px;
        background: #ffffff;
    }

    .transfer-currency-summary-title {
        grid-column: 1 / -1;
        padding: 0 4px;
        margin: 8px 0 -2px;

        color: #8b95a7;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .transfer-dual-summary span {
        display: block;
        margin-bottom: 8px;
        color: #64748b;
        font-weight: 700;
    }

    .transfer-dual-summary strong {
        display: block;
        color: var(--primary, #6b1f75);
        font-size: 28px;
        font-weight: 900;
        line-height: 1.1;
        overflow-wrap: anywhere;
    }

    /* Highlight the amount the client must pay */
    .transfer-dual-summary .transfer-summary-card--payable {
        background: linear-gradient(135deg, rgba(122, 39, 122, 0.10), rgba(122, 39, 122, 0.04));
        border: 1px solid rgba(122, 39, 122, 0.24);
        box-shadow: 0 16px 34px rgba(122, 39, 122, 0.08);
    }

    .transfer-dual-summary .transfer-summary-card--payable span {
        color: #4b5563;
    }

    .transfer-dual-summary .transfer-summary-card--payable strong {
        color: #5b0f5f;
        font-size: 32px;
    }

    /* Optional: make the second summary visually separated */
    .transfer-dual-summary .transfer-currency-summary-title:nth-of-type(2) {
        margin-top: 18px;
    }

    @media (max-width: 768px) {
        .transfer-dual-summary {
            grid-template-columns: 1fr;
            gap: 12px;
            padding: 14px;
            border-radius: 18px;
        }

        .transfer-currency-summary-title {
            margin-top: 4px;
            font-size: 11px;
            letter-spacing: 0.12em;
        }

        .transfer-dual-summary > div:not(.transfer-currency-summary-title) {
            padding: 15px;
            border-radius: 16px;
        }

        .transfer-dual-summary strong {
            font-size: 24px;
        }

        .transfer-dual-summary .transfer-summary-card--payable strong {
            font-size: 28px;
        }
    }

    /* =====================================================
    TRANSFER STEP 2 MOBILE VALUE OVERLAP FIX
    ===================================================== */

    @media (max-width: 768px) {
        .transfer-dual-summary {
            grid-template-columns: 1fr !important;
            gap: 12px !important;
            padding: 12px !important;
            overflow: hidden !important;
        }

        .transfer-dual-summary > div:not(.transfer-currency-summary-title) {
            width: 100% !important;
            min-width: 0 !important;
            padding: 14px !important;
            overflow: hidden !important;
        }

        .transfer-dual-summary strong {
            display: block !important;
            max-width: 100% !important;
            font-size: clamp(20px, 6vw, 26px) !important;
            line-height: 1.15 !important;
            white-space: normal !important;
            overflow-wrap: anywhere !important;
            word-break: break-word !important;
        }

        .transfer-dual-summary span {
            font-size: 12px !important;
            line-height: 1.2 !important;
        }

        .transfer-summary-card--payable strong {
            font-size: clamp(21px, 6vw, 28px) !important;
        }
    }

    /* =====================================================
    TRANSFERS DESKTOP LAYOUT ALIGNMENT
    ===================================================== */

    @media (min-width: 1024px) {
        .transfer-page.transfer-centre {
            max-width: 1440px;
            margin: 0 auto;
            padding-inline: 32px;
        }

        .transfer-tabs-modern {
            max-width: 1080px;
            margin: 0 auto;
        }

        .transfer-tab-list {
            max-width: 1080px;
            margin: 0 auto 24px;
        }

        #transfer-create,
        #transfer-created,
        #transfer-incoming {
            max-width: 1080px;
            margin: 0 auto;
        }

        .transfer-create-card {
            width: 100%;
            max-width: 1080px;
            margin: 0 auto;
            padding: 36px;
            border-radius: 24px;
        }

        .transfer-panel-modern {
            padding: 32px;
            border-radius: 22px;
        }

        .transfer-stepper-modern {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
            margin-bottom: 24px;
        }

        .transfer-search-wrapper {
            max-width: 100%;
        }

        .transfer-recipient-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
    /* =====================================================
    TRANSFERS DESKTOP WIDTH ALIGNMENT
    Align tabs + process card with top cards
    ===================================================== */

    @media (min-width: 1024px) {
        .transfer-page.transfer-centre {
            max-width: 1540px !important;
            width: 100% !important;
            margin: 0 auto !important;
            padding-inline: 48px !important;
        }

        .transfer-overview-grid,
        .transfer-tabs-modern,
        .transfer-tab-list,
        #transfer-create,
        #transfer-created,
        #transfer-incoming,
        .transfer-create-card {
            width: 100% !important;
            max-width: none !important;
        }

        .transfer-tab-list {
            margin: 0 0 32px !important;
        }

        .transfer-create-card {
            margin: 0 !important;
            padding: 42px 48px !important;
            border-radius: 28px !important;
        }

        .transfer-panel-modern {
            width: 100% !important;
            padding: 38px 42px !important;
        }

        .transfer-stepper-modern {
            width: 100% !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
    }

    .transfer-record-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 18px;
    }

    .transfer-record-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .transfer-record-grid-modern {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    @media (max-width: 768px) {
        .transfer-record-head,
        .transfer-record-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .transfer-record-grid-modern {
            grid-template-columns: 1fr;
        }
    }

    .transfer-view-icon {
        width: 46px;
        height: 46px;
        border: 1px solid var(--border);
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        color: var(--primary);
        text-decoration: none;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .transfer-view-icon:hover {
        background: rgba(123, 31, 123, 0.08);
        border-color: var(--primary);
        transform: translateY(-2px);
    }

    .transfer-view-icon .iconify {
        font-size: 1.25rem;
    }

    .transfer-record-grid-modern span {
        display: block;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--muted);
        margin-bottom: 0.35rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .transfer-record-grid-modern strong {
        display: block;
        font-size: 1.15rem;
        font-weight: 700;
        line-height: 1.3;
        color: var(--text);
        word-break: break-word;
    }

    .transfer-record-grid-modern strong {
        font-size: clamp(1rem, 1.5vw, 1.25rem);
    }

    .transfer-view-icon {
        width: 46px;
        height: 46px;
        border: 1px solid var(--border);
        border-radius: 14px;
        display: inline-grid;
        place-items: center;
        background: #fff;
        color: var(--primary);
        text-decoration: none;
        flex-shrink: 0;
    }

    .transfer-view-icon iconify-icon {
        font-size: 22px;
    }

    .transfer-record-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* =====================================================
    TRANSFER RECORD MOBILE VIEW FIX
    ===================================================== */

    @media (max-width: 768px) {
        .transfer-record-card-modern,
        .transfer-record-card {
            padding: 18px !important;
            border-radius: 18px !important;
        }

        .transfer-record-head {
            display: grid !important;
            grid-template-columns: 1fr auto !important;
            gap: 12px !important;
            align-items: start !important;
        }

        .transfer-record-actions {
            align-items: flex-end !important;
            gap: 8px !important;
        }

        .transfer-view-icon {
            width: 40px !important;
            height: 40px !important;
            border-radius: 12px !important;
        }

        .transfer-record-grid-modern {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 10px !important;
            margin-top: 18px !important;
        }

        .transfer-record-grid-modern > div {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 4px !important;
            padding: 14px !important;
            border-radius: 14px !important;
            background: #f8fafc !important;
        }

        .transfer-record-grid-modern span {
            font-size: 11px !important;
            line-height: 1.2 !important;
            letter-spacing: .06em !important;
            text-transform: uppercase !important;
            color: #64748b !important;
        }

        .transfer-record-grid-modern strong {
            font-size: 17px !important;
            line-height: 1.25 !important;
            text-align: left !important;
            white-space: normal !important;
            overflow-wrap: anywhere !important;
        }
    }

    .transfer-show-page {
        display: grid;
        gap: 22px;
    }

    .transfer-show-hero {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: flex-start;
        padding: 28px;
        border-radius: 24px;
        background: #fff;
    }

    .transfer-show-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .transfer-show-summary-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .transfer-show-summary-grid > div {
        padding: 18px;
        border-radius: 16px;
        background: #f8fafc;
    }

    .transfer-show-summary-grid span {
        display: block;
        margin-bottom: 8px;
        color: #64748b;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .transfer-show-summary-grid strong {
        display: block;
        color: #0f172a;
        font-size: 18px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .transfer-show-summary-grid small {
        color: #64748b;
        font-weight: 700;
    }

    .transfer-show-summary-grid .is-money strong {
        color: #5b0f5f;
        font-size: 22px;
    }

    .transfer-show-summary-grid .is-total {
        background: linear-gradient(135deg, rgba(122, 39, 122, .10), rgba(122, 39, 122, .04));
        border: 1px solid rgba(122, 39, 122, .18);
    }

    .transfer-payment-actions {
        display: grid;
        gap: 14px;
    }

    .transfer-proof-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 54px;
        gap: 12px;
        align-items: end;
    }

    .transfer-file-control,
    .transfer-reference-control {
        display: grid;
        gap: 8px;
    }

    .transfer-file-control input,
    .transfer-reference-control input {
        width: 100%;
        min-height: 54px;
        padding: 0 16px;
        border: 1px solid #dbe3ec;
        border-radius: 16px;
        background: #fff;
    }

    .transfer-icon-submit {
        width: 54px;
        height: 54px;
        padding: 0;
        display: inline-grid;
        place-items: center;
        border-radius: 16px;
    }

    .transfer-icon-submit iconify-icon,
    .transfer-icon-button iconify-icon {
        font-size: 24px;
    }

    .transfer-icon-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    @media (max-width: 768px) {
        .transfer-show-hero {
            flex-direction: column;
            padding: 18px;
            border-radius: 18px;
        }

        .transfer-show-actions {
            width: 100%;
            justify-content: space-between;
        }

        .transfer-show-summary-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .transfer-show-summary-grid > div {
            padding: 14px;
        }

        .transfer-show-summary-grid strong,
        .transfer-show-summary-grid .is-money strong {
            font-size: 17px;
        }

        .transfer-proof-form {
            grid-template-columns: 1fr 48px;
            gap: 10px;
        }

        .transfer-file-control input,
        .transfer-reference-control input {
            min-height: 50px;
            border-radius: 14px;
        }

        .transfer-icon-submit {
            width: 48px;
            height: 50px;
            border-radius: 14px;
        }
    }

    /* Payment submissions mobile fix */
    @media (max-width: 768px) {
        .transfer-show-page .attendance-table-card {
            overflow: hidden !important;
        }

        .transfer-show-page .attendance-table-card .attendance-table {
            display: block !important;
            width: 100% !important;
            min-width: 0 !important;
        }

        .transfer-show-page .attendance-table-card .attendance-table thead {
            display: none !important;
        }

        .transfer-show-page .attendance-table-card .attendance-table tbody,
        .transfer-show-page .attendance-table-card .attendance-table tr,
        .transfer-show-page .attendance-table-card .attendance-table td {
            display: block !important;
            width: 100% !important;
        }

        .transfer-show-page .attendance-table-card .attendance-table tr {
            padding: 12px;
            border-radius: 14px;
            background: #f8fafc;
            margin-top: 12px;
        }

        .transfer-show-page .attendance-table-card .attendance-table td {
            padding: 10px 0 !important;
            border: 0 !important;
            font-size: 14px;
            color: #0f172a;
        }

        .transfer-show-page .attendance-table-card .attendance-table td::before {
            content: attr(data-label);
            display: block;
            margin-bottom: 4px;
            font-size: 11px;
            font-weight: 800;
            color: #8b95a7;
            text-transform: uppercase;
            letter-spacing: .08em;
        }

        .transfer-show-page .attendance-table-card .attendance-table tbody:empty::after {
            content: "No payment submission yet.";
            display: block;
            padding: 14px;
            border-radius: 14px;
            background: #f8fafc;
            color: #64748b;
            font-weight: 700;
        }
    }

    /* Payment submissions: desktop + mobile enhancement */

    .transfer-proof-icon {
        width: 42px;
        height: 42px;
        display: inline-grid;
        place-items: center;
        border-radius: 12px;
        border: 1px solid rgba(122, 39, 122, 0.18);
        background: #fff;
        color: var(--primary, #6b1f75);
        text-decoration: none;
    }

    .transfer-proof-icon iconify-icon {
        font-size: 22px;
    }

    .transfer-proof-icon:hover {
        background: rgba(122, 39, 122, 0.08);
    }

    @media (max-width: 768px) {
        .transfer-show-page .attendance-table-card {
            padding: 16px !important;
            border-radius: 18px !important;
        }

        .transfer-show-page .attendance-table-card .request-card-head {
            margin-bottom: 14px !important;
        }

        .transfer-show-page .attendance-table-card .attendance-table {
            display: block !important;
            width: 100% !important;
            min-width: 0 !important;
        }

        .transfer-show-page .attendance-table-card .attendance-table thead {
            display: none !important;
        }

        .transfer-show-page .attendance-table-card .attendance-table tbody,
        .transfer-show-page .attendance-table-card .attendance-table tr,
        .transfer-show-page .attendance-table-card .attendance-table td {
            display: block !important;
            width: 100% !important;
        }

        .transfer-show-page .attendance-table-card .attendance-table tr {
            padding: 14px;
            border-radius: 16px;
            background: #f8fafc;
            border: 1px solid #e5edf5;
        }

        .transfer-show-page .attendance-table-card .attendance-table td {
            padding: 10px 0 !important;
            border: 0 !important;
            font-size: 14px;
        }

        .transfer-show-page .attendance-table-card .attendance-table td::before {
            content: attr(data-label);
            display: block;
            margin-bottom: 5px;
            font-size: 11px;
            font-weight: 800;
            color: #8b95a7;
            text-transform: uppercase;
            letter-spacing: .08em;
        }
    }

    /* =====================================================
    LOANS STEP WIZARD — MATCH TRANSFER MOBILE LOGIC
    ===================================================== */

    @media (max-width: 768px) {
        .loan-page .loan-stepper-modern {
            display: none !important;
        }

        .loan-request-card {
            padding: 18px !important;
            border-radius: 20px !important;
        }

        .loan-panel-modern {
            padding: 18px !important;
            border-radius: 18px !important;
        }

        .loan-panel-modern .loan-step-head {
            display: grid !important;
            grid-template-columns: 44px minmax(0, 1fr) !important;
            gap: 12px !important;
            align-items: start !important;
            margin-bottom: 18px !important;
        }

        .loan-panel-modern .loan-step-page-number {
            grid-column: 1 !important;
            grid-row: 1 / span 2 !important;
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            margin: 0 !important;
            border-radius: 50% !important;
            display: grid !important;
            place-items: center !important;
            background: var(--primary, #7a277a) !important;
            color: #fff !important;
            font-weight: 800 !important;
        }

        .loan-panel-modern .loan-step-head > div {
            grid-column: 2 !important;
            min-width: 0 !important;
        }

        .loan-panel-modern .loan-step-head .eyebrow {
            display: none !important;
        }

        .loan-panel-modern .loan-step-head h2 {
            margin: 0 0 4px !important;
            font-size: 24px !important;
            line-height: 1.15 !important;
        }

        .loan-panel-modern .loan-step-head .muted {
            margin: 0 !important;
            font-size: 13px !important;
            line-height: 1.35 !important;
        }

        .loan-search-wrapper {
            display: grid !important;
            grid-template-columns: 1fr 52px !important;
            gap: 10px !important;
            align-items: center !important;
        }

        .loan-search-wrapper .loan-search-icon {
            display: none !important;
        }

        .loan-search-wrapper input {
            width: 100% !important;
            min-height: 52px !important;
            padding: 0 16px !important;
            font-size: 18px !important;
            border-radius: 16px !important;
        }

        .loan-search-btn {
            width: 52px !important;
            height: 52px !important;
            padding: 0 !important;
            border-radius: 16px !important;
            font-size: 0 !important;
            display: grid !important;
            place-items: center !important;
        }

        .loan-search-btn::before {
            content: "🔍";
            font-size: 20px;
        }
    }

    /* ======================================================
    SHOW LOAN DESCRIPTIONS ON MOBILE
    ====================================================== */
    @media (max-width: 768px) {

        /* Top section description */
        .loan-section-head .muted {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;

            margin-top: 8px !important;

            font-size: 14px !important;
            line-height: 1.5 !important;

            color: #667085 !important;

            height: auto !important;
            overflow: visible !important;
        }

        /* Step descriptions */
        .loan-step-head .muted {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;

            margin-top: 4px !important;

            font-size: 13px !important;
            line-height: 1.45 !important;

            color: #667085 !important;

            height: auto !important;
            overflow: visible !important;
        }

        /* Make sure the headings stack properly */
        .loan-section-head,
        .loan-step-head {
            overflow: visible !important;
        }
    }

    /* ======================================================
    LOAN SEARCH BUTTON
    Match Transfers UI
    ====================================================== */

    .loan-search-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .loan-search-wrapper input {
        width: 100%;
        padding: 0 84px 0 56px;
        height: 72px;
        border: 1px solid var(--border-color);
        border-radius: 24px;
        background: #fff;
    }

    .loan-search-icon {
        position: absolute;
        left: 20px;
        font-size: 24px;
        color: #6b7280;
        pointer-events: none;
    }

    .loan-search-btn {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);

        width: 56px;
        height: 56px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border: none;
        border-radius: 18px;

        background: var(--primary-color);
        color: #fff;

        cursor: pointer;

        transition: all 0.2s ease;
        box-shadow: 0 12px 24px rgba(121, 33, 123, 0.18);
    }

    .loan-search-btn:hover {
        transform: translateY(-50%) translateY(-2px);
        box-shadow: 0 16px 30px rgba(121, 33, 123, 0.25);
    }

    .loan-search-btn iconify-icon {
        font-size: 22px;
    }

    .loan-search-btn:active {
        transform: translateY(-50%);
    }

    /* Mobile */
    @media (max-width: 768px) {

        .loan-search-wrapper input {
            height: 64px;
            padding-right: 76px;
        }

        .loan-search-btn {
            width: 48px;
            height: 48px;
            right: 8px;
            border-radius: 16px;
        }

        .loan-search-btn iconify-icon {
            font-size: 20px;
        }
    }

    /* ======================================================
    LOANS SEARCH — MATCH TRANSFERS SEARCH UI
    ====================================================== */

    .loan-search-wrapper {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }

    .loan-search-wrapper .loan-search-icon {
        display: none !important;
    }

    .loan-search-wrapper input {
        width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 64px 0 16px !important;
        border: 1px solid #dbe3ec !important;
        border-radius: 14px !important;
        background: #fff !important;
        font-size: 16px !important;
    }

    .loan-search-btn {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;

        display: inline-grid !important;
        place-items: center !important;

        padding: 0 !important;
        border: 1px solid rgba(122, 39, 122, 0.18) !important;
        border-radius: 12px !important;

        background: #fff !important;
        color: var(--primary, #7a277a) !important;
        box-shadow: none !important;
    }

    .loan-search-btn iconify-icon {
        font-size: 20px !important;
    }

    .loan-search-btn:hover {
        background: rgba(122, 39, 122, 0.06) !important;
        border-color: rgba(122, 39, 122, 0.35) !important;
    }

    @media (max-width: 768px) {
        .loan-search-wrapper input {
            height: 50px !important;
            min-height: 50px !important;
            padding-right: 62px !important;
        }

        .loan-search-btn {
            width: 42px !important;
            height: 42px !important;
            right: 6px !important;
        }
    }

    /* Hide old floating icon */
    .loan-search-wrapper > .loan-search-icon,
    .loan-search-wrapper iconify-icon.loan-search-icon {
        display: none !important;
    }

    @media (max-width: 768px) {

        .loan-search-wrapper {
            position: relative;
        }

        .loan-search-wrapper input {
            width: 100%;
            height: 50px;
            padding: 0 60px 0 16px;
            border-radius: 14px;
            border: 1px solid #dbe3ec;
        }

        .loan-search-btn {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);

            width: 40px;
            height: 40px;

            display: flex;
            align-items: center;
            justify-content: center;

            border: 1px solid rgba(122,39,122,.15);
            border-radius: 12px;

            background: #ffffff;
            color: var(--primary-color);

            padding: 0;
            box-shadow: none;
        }

        .loan-search-btn iconify-icon {
            font-size: 18px;
        }
    }

    /* ======================================================
    LOANS SEARCH FIELD — MATCH TRANSFERS SEARCH UI
    Desktop + Mobile
    ====================================================== */

    .loan-search-form-inline {
        width: 100%;
    }

    .loan-search-form-inline label {
        display: block;
        width: 100%;
    }

    .loan-search-wrapper {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Hide any old/duplicate search icon if it still exists somewhere */
    .loan-search-wrapper > .loan-search-icon,
    .loan-search-wrapper iconify-icon.loan-search-icon {
        display: none !important;
    }

    .loan-search-wrapper input[type="search"] {
        width: 100% !important;
        height: 64px !important;
        min-height: 64px !important;

        padding: 0 78px 0 22px !important;

        border: 1px solid #dbe3ec !important;
        border-radius: 18px !important;

        background: #ffffff !important;
        color: #0f172a !important;

        font-size: 18px !important;
        font-weight: 600 !important;

        outline: none !important;
        box-shadow: none !important;
    }

    .loan-search-wrapper input[type="search"]::placeholder {
        color: #94a3b8 !important;
        font-weight: 500 !important;
    }

    .loan-search-wrapper input[type="search"]:focus {
        border-color: rgba(122, 39, 122, 0.45) !important;
        box-shadow: 0 0 0 4px rgba(122, 39, 122, 0.08) !important;
    }

    /* Search button exactly like Transfers */
    .loan-search-btn {
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;

        display: inline-grid !important;
        place-items: center !important;

        padding: 0 !important;

        border: 1px solid rgba(122, 39, 122, 0.18) !important;
        border-radius: 14px !important;

        background: #ffffff !important;
        color: var(--primary, #7a277a) !important;

        box-shadow: none !important;
        cursor: pointer !important;
    }

    .loan-search-btn iconify-icon {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        font-size: 22px !important;
        color: currentColor !important;
    }

    .loan-search-btn:hover {
        background: rgba(122, 39, 122, 0.06) !important;
        border-color: rgba(122, 39, 122, 0.36) !important;
    }

    .loan-search-btn:active {
        transform: translateY(-50%) scale(0.96) !important;
    }

    /* Mobile refinement */
    @media (max-width: 768px) {
        .loan-search-wrapper input[type="search"] {
            height: 50px !important;
            min-height: 50px !important;
            padding: 0 62px 0 14px !important;

            border-radius: 14px !important;

            font-size: 15px !important;
            font-weight: 500 !important;
        }

        .loan-search-btn {
            width: 42px !important;
            height: 42px !important;
            min-width: 42px !important;

            right: 6px !important;

            border-radius: 12px !important;
        }

        .loan-search-btn iconify-icon {
            width: 19px !important;
            height: 19px !important;
            font-size: 19px !important;
        }
    }

    /* FINAL FIX: Loans search button must match Transfers */
    .loan-search-btn::before,
    .loan-search-btn::after {
        content: none !important;
        display: none !important;
    }

    .loan-search-btn {
        font-size: 0 !important;
    }

    .loan-search-btn iconify-icon {
        display: block !important;
        font-size: 19px !important;
        width: 19px !important;
        height: 19px !important;
        color: var(--primary, #7a277a) !important;
    }

    @media (max-width: 768px) {
        .loan-search-wrapper {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            width: 100% !important;
        }

        .loan-search-wrapper input[type="search"] {
            width: 100% !important;
            height: 50px !important;
            min-height: 50px !important;
            padding: 0 62px 0 14px !important;
            border-radius: 14px !important;
        }

        .loan-search-btn {
            position: absolute !important;
            right: 6px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 42px !important;
            height: 42px !important;
            min-width: 42px !important;
            padding: 0 !important;
            border-radius: 12px !important;
            border: 1px solid rgba(122, 39, 122, 0.18) !important;
            background: #fff !important;
            box-shadow: none !important;
            display: grid !important;
            place-items: center !important;
        }
    }

    /* ==========================================
    LOANS SEARCH MOBILE = TRANSFERS STYLE
    ========================================== */

    @media (max-width: 768px) {

        .loan-search-wrapper {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            width: 100% !important;
            position: static !important;
        }

        .loan-search-wrapper input[type="search"] {
            flex: 1 !important;

            height: 50px !important;
            min-height: 50px !important;

            padding: 0 16px !important;

            border: 1px solid #dbe3ec !important;
            border-radius: 14px !important;

            background: #fff !important;

            font-size: 16px !important;
            font-weight: 500 !important;
        }

        .loan-search-btn {
            position: static !important;
            transform: none !important;

            width: 50px !important;
            height: 50px !important;
            min-width: 50px !important;

            display: flex !important;
            align-items: center !important;
            justify-content: center !important;

            border-radius: 14px !important;
            border: 1px solid rgba(122,39,122,.15) !important;

            background: #ffffff !important;
            color: var(--primary-color) !important;

            box-shadow: none !important;
            padding: 0 !important;
        }

        .loan-search-btn::before,
        .loan-search-btn::after {
            display: none !important;
            content: none !important;
        }

        .loan-search-btn iconify-icon {
            font-size: 20px !important;
            width: 20px !important;
            height: 20px !important;
            display: block !important;
        }
    }


    /* AUTH MOBILE-FIRST LOGIN */
    .auth-page {
        min-height: 100vh;
        background: #f4f7fb;
    }

    .auth-shell {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1fr;
    }

    .auth-content {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .auth-content-inner {
        width: 100%;
        max-width: 430px;
    }

    .auth-card {
        width: 100%;
        padding: 24px;
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
    }

    .auth-logo-link {
        display: inline-flex;
        margin-bottom: 28px;
    }

    .auth-nav-logo {
        width: 118px;
        height: auto;
    }

    .auth-heading {
        margin-bottom: 24px;
    }

    .auth-heading h1 {
        margin: 0;
        font-size: 34px;
        line-height: 1.1;
        color: #5b0f5f;
    }

    .auth-heading .muted {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.5;
    }

    .auth-submit-btn {
        width: 100%;
        min-height: 54px;
        border-radius: 14px;
        font-weight: 800;
    }

    .auth-visual {
        display: none;
    }

    /* Desktop enhancement */
    @media (min-width: 900px) {
        .auth-shell {
            grid-template-columns: 42% 58%;
        }

        .auth-content {
            padding: 48px;
        }

        .auth-content-inner {
            max-width: 480px;
        }

        .auth-card {
            padding: 34px;
        }

        .auth-visual {
            display: block;
            height: 100vh;
            overflow: hidden;
        }

        .auth-visual picture,
        .auth-visual img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .auth-visual img {
            object-fit: cover;
            object-position: center;
        }
    }

    /* FINAL AUTH LOGIN FIX */
    body.auth-page {
        margin: 0;
        min-height: 100vh;
        background: #f5f7fb;
    }

    .auth-shell {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1fr;
    }

    .auth-content {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 22px;
    }

    .auth-card {
        width: 100%;
        max-width: 420px;
        padding: 28px;
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 24px 60px rgba(15, 23, 42, .08);
    }

    .auth-logo-link {
        display: inline-flex;
        margin-bottom: 26px;
    }

    .auth-nav-logo {
        width: 120px;
        height: auto;
    }

    .auth-heading {
        margin-bottom: 24px;
    }

    .auth-heading h1 {
        margin: 0;
        color: #6b146d;
        font-size: 34px;
        line-height: 1.1;
    }

    .auth-heading .muted {
        margin-top: 8px;
        color: #667085;
        font-size: 14px;
        line-height: 1.45;
    }

    .auth-card .form-stack {
        width: 100%;
    }

    .auth-card .button-primary {
        width: 100%;
        min-height: 54px;
        border-radius: 14px;
    }

    .auth-visual {
        display: none;
    }

    @media (min-width: 900px) {
        .auth-shell {
            grid-template-columns: 42% 58%;
        }

        .auth-content {
            padding: 48px;
        }

        .auth-visual {
            display: block;
            height: 100vh;
            overflow: hidden;
        }

        .auth-visual picture,
        .auth-visual img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .auth-visual img {
            object-fit: cover;
            object-position: center;
        }
    }

    .admin-user-profile-card {
        display: grid;
        gap: 24px;
        padding: clamp(18px, 3vw, 28px);
        border: 1px solid #dde3ec;
        border-radius: 22px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .admin-user-profile-hero {
        display: flex;
        align-items: center;
        gap: 18px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eef2f6;
    }

    .admin-user-avatar {
        display: grid;
        place-items: center;
        width: 82px;
        height: 82px;
        flex: 0 0 82px;
        border-radius: 24px;
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-dark);
        font-size: 28px;
        font-weight: 800;
    }

    .admin-user-profile-title {
        display: grid;
        gap: 8px;
        min-width: 0;
    }

    .admin-user-profile-title h2 {
        margin: 0;
        font-size: clamp(24px, 3vw, 34px);
        line-height: 1.1;
    }

    .admin-user-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        color: #667085;
        font-size: 14px;
    }

    .status-pill {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 0 12px;
        border-radius: 999px;
        background: #f1f5f9;
        color: #475569;
        font-size: 13px;
        font-weight: 700;
    }

    .status-active,
    .status-approved {
        background: #ecfdf3;
        color: #087443;
    }

    .status-pending {
        background: #fffbeb;
        color: #925c00;
    }

    .status-suspended,
    .status-rejected,
    .status-inactive {
        background: #fff1f0;
        color: #b42318;
    }

    .admin-profile-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .admin-profile-actions .button-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 42px;
        padding: 0 14px;
        border: 1px solid #dde3ec;
        border-radius: 999px;
        background: #ffffff;
        color: var(--primary-dark);
        font-size: 14px;
        font-weight: 700;
    }

    .admin-profile-actions .button-secondary:hover {
        border-color: rgba(var(--primary-rgb), 0.32);
        background: rgba(var(--primary-rgb), 0.06);
    }

    .admin-user-info-section {
        display: grid;
        gap: 16px;
    }

    .admin-user-info-section h3 {
        margin: 0;
        font-size: 18px;
    }

    .admin-user-info-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin: 0;
    }

    .admin-user-info-grid > div {
        display: grid;
        gap: 6px;
        min-width: 0;
        padding: 16px;
        border: 1px solid #eef2f6;
        border-radius: 16px;
        background: #f8fafc;
    }

    .admin-user-info-grid dt {
        color: #667085;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .admin-user-info-grid dd {
        margin: 0;
        color: #101828;
        font-size: 15px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .member-credibility-stars {
        color: #d19100;
        font-size: 18px;
        letter-spacing: 1px;
    }

    @media (max-width: 768px) {
        .admin-user-profile-card {
            gap: 18px;
            padding: 16px;
            border-radius: 18px;
        }

        .admin-user-profile-hero {
            align-items: flex-start;
            gap: 14px;
        }

        .admin-user-avatar {
            width: 62px;
            height: 62px;
            flex-basis: 62px;
            border-radius: 18px;
            font-size: 22px;
        }

        .admin-user-profile-title h2 {
            font-size: 22px;
        }

        .admin-user-meta {
            font-size: 13px;
        }

        .admin-profile-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .admin-profile-actions .button-secondary {
            width: 100%;
            min-height: 44px;
            padding: 0 10px;
            border-radius: 14px;
            font-size: 13px;
        }

        .admin-user-info-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .admin-user-info-grid > div {
            padding: 14px;
            border-radius: 14px;
        }

        .admin-user-info-grid dd {
            font-size: 14px;
        }
    }

    .admin-dividend-card {
        display: grid;
        gap: 24px;
        padding: clamp(18px, 3vw, 28px);
        border: 1px solid #dde3ec;
        border-radius: 22px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .admin-dividend-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
    }

    .admin-dividend-head h2 {
        margin: 0;
        font-size: clamp(24px, 3vw, 34px);
    }

    .admin-dividend-head .muted {
        max-width: 620px;
        margin: 8px 0 0;
        color: #667085;
    }

    .admin-dividend-empty {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 18px;
        border: 1px solid #fde68a;
        border-radius: 18px;
        background: #fffbeb;
        color: #92400e;
    }

    .admin-dividend-empty-icon {
        display: inline-grid;
        place-items: center;
        width: 54px;
        height: 54px;
        flex: 0 0 54px;
        border-radius: 16px;
        background: #ffffff;
        font-size: 28px;
    }

    .admin-dividend-empty strong {
        display: block;
        font-size: 16px;
    }

    .admin-dividend-empty p {
        margin: 4px 0 0;
    }

    .admin-dividend-hero {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 18px;
        padding: clamp(20px, 4vw, 32px);
        border-radius: 24px;
        background:
            radial-gradient(circle at top right, rgba(255,255,255,0.22), transparent 180px),
            linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: #ffffff;
    }

    .admin-dividend-hero span {
        display: block;
        color: rgba(255,255,255,0.82);
        font-size: 14px;
        font-weight: 600;
    }

    .admin-dividend-hero strong {
        display: block;
        margin-top: 6px;
        font-size: clamp(34px, 6vw, 56px);
        line-height: 1;
        letter-spacing: -0.05em;
    }

    .admin-dividend-hero p {
        margin: 10px 0 0;
        color: rgba(255,255,255,0.82);
    }

    .admin-dividend-hero-icon {
        display: grid;
        place-items: center;
        width: 74px;
        height: 74px;
        flex: 0 0 74px;
        border-radius: 24px;
        background: rgba(255,255,255,0.14);
        color: #ffffff;
        font-size: 38px;
    }

    .admin-dividend-progress-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .admin-dividend-progress-card {
        display: grid;
        gap: 12px;
        padding: 18px;
        border: 1px solid #eef2f6;
        border-radius: 18px;
        background: #f8fafc;
    }

    .admin-dividend-progress-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .admin-dividend-progress-head span {
        color: #667085;
        font-size: 14px;
        font-weight: 700;
    }

    .admin-dividend-progress-head strong {
        color: var(--primary-dark);
        font-size: 20px;
    }

    .admin-progress-track {
        height: 10px;
        overflow: hidden;
        border-radius: 999px;
        background: #e5e7eb;
    }

    .admin-progress-track i {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--primary);
    }

    .admin-dividend-progress-card small {
        color: #667085;
        font-size: 13px;
    }

    .admin-dividend-section {
        display: grid;
        gap: 16px;
    }

    .admin-dividend-section h3 {
        margin: 0;
        font-size: 18px;
    }

    .admin-dividend-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin: 0;
    }

    .admin-dividend-grid > div {
        display: grid;
        gap: 6px;
        min-width: 0;
        padding: 16px;
        border: 1px solid #eef2f6;
        border-radius: 16px;
        background: #ffffff;
    }

    .admin-dividend-grid dt {
        color: #667085;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .admin-dividend-grid dd {
        margin: 0;
        color: #101828;
        font-size: 16px;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

    .admin-dividend-final {
        border-color: rgba(var(--primary-rgb), 0.28) !important;
        background: rgba(var(--primary-rgb), 0.06) !important;
    }

    .admin-dividend-final dd {
        color: var(--primary-dark);
    }

    @media (max-width: 768px) {
        .admin-dividend-card {
            gap: 18px;
            padding: 16px;
            border-radius: 18px;
        }

        .admin-dividend-head h2 {
            font-size: 22px;
        }

        .admin-dividend-hero {
            align-items: flex-start;
            flex-direction: column;
            border-radius: 20px;
        }

        .admin-dividend-hero strong {
            font-size: 34px;
            line-height: 1.05;
            overflow-wrap: anywhere;
        }

        .admin-dividend-hero-icon {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            font-size: 30px;
        }

        .admin-dividend-progress-grid {
            grid-template-columns: 1fr;
        }

        .admin-dividend-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .admin-dividend-grid > div {
            padding: 14px;
            border-radius: 14px;
        }

        .admin-dividend-grid dd {
            font-size: 15px;
        }

        .admin-dividend-empty {
            align-items: flex-start;
        }
    }

    .user-audit-overview-grid {
        display: grid;
        grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
        gap: 18px;
    }

    .user-audit-last-login,
    .user-audit-account-card,
    .user-audit-log-card {
        border: 1px solid #dde3ec;
        border-radius: 22px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .user-audit-last-login {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        padding: clamp(18px, 3vw, 28px);
        color: #ffffff;
        background:
            radial-gradient(circle at top right, rgba(255,255,255,0.22), transparent 180px),
            linear-gradient(135deg, var(--primary), var(--primary-dark));
    }

    .user-audit-last-login h2,
    .user-audit-last-login p,
    .user-audit-last-login .eyebrow {
        color: #ffffff;
    }

    .user-audit-last-login strong {
        display: block;
        margin-top: 12px;
        font-size: clamp(24px, 3vw, 34px);
        line-height: 1.1;
    }

    .user-audit-last-login p {
        margin: 10px 0 0;
        opacity: 0.82;
    }

    .user-audit-icon {
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        flex: 0 0 58px;
        border-radius: 18px;
        background: rgba(255,255,255,0.14);
        font-size: 30px;
    }

    .user-audit-account-card {
        display: grid;
        gap: 18px;
        padding: clamp(18px, 3vw, 28px);
    }

    .user-audit-account-card h2 {
        margin: 0;
        font-size: clamp(22px, 3vw, 30px);
    }

    .user-audit-info-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 0;
    }

    .user-audit-info-grid > div {
        display: grid;
        gap: 6px;
        min-width: 0;
        padding: 14px;
        border: 1px solid #eef2f6;
        border-radius: 16px;
        background: #f8fafc;
    }

    .user-audit-info-grid dt,
    .user-audit-timeline dl dt {
        color: #667085;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .user-audit-info-grid dd,
    .user-audit-timeline dl dd {
        margin: 0;
        color: #101828;
        font-size: 15px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .audit-status {
        display: inline-flex;
        align-items: center;
        width: max-content;
        min-height: 28px;
        padding: 0 11px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 800;
    }

    .audit-status.is-verified {
        background: #ecfdf3;
        color: #087443;
    }

    .audit-status.is-not-verified {
        background: #fff1f0;
        color: #b42318;
    }

    .audit-status.is-current {
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-dark);
    }

    .user-audit-log-card {
        display: grid;
        gap: 18px;
        padding: clamp(18px, 3vw, 28px);
    }

    .user-audit-log-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
    }

    .user-audit-log-head h2 {
        margin: 0;
        font-size: clamp(22px, 3vw, 30px);
    }

    .user-audit-log-head .muted {
        margin: 8px 0 0;
        color: #667085;
    }

    .audit-count {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 13px;
        border-radius: 999px;
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-dark);
        font-size: 13px;
        font-weight: 800;
        white-space: nowrap;
    }

    .user-audit-empty {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 18px;
        border: 1px dashed #d0d5dd;
        border-radius: 18px;
        background: #f8fafc;
    }

    .user-audit-empty span {
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        flex: 0 0 54px;
        border-radius: 16px;
        background: #ffffff;
        color: var(--primary-dark);
        font-size: 30px;
    }

    .user-audit-empty strong {
        display: block;
        font-size: 16px;
    }

    .user-audit-empty p {
        margin: 4px 0 0;
        color: #667085;
    }

    .user-audit-timeline {
        position: relative;
        display: grid;
        gap: 14px;
    }

    .user-audit-timeline::before {
        content: "";
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: 10px;
        width: 2px;
        border-radius: 999px;
        background: #e5e7eb;
    }

    .user-audit-timeline-item {
        position: relative;
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 14px;
    }

    .audit-timeline-dot {
        position: relative;
        z-index: 1;
        width: 22px;
        height: 22px;
        border: 4px solid #ffffff;
        border-radius: 50%;
        background: var(--primary);
        box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.2);
    }

    .audit-timeline-content {
        display: grid;
        gap: 14px;
        padding: 16px;
        border: 1px solid #eef2f6;
        border-radius: 18px;
        background: #ffffff;
    }

    .audit-timeline-content header {
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }

    .audit-timeline-content header strong {
        display: block;
        color: #101828;
        font-size: 16px;
    }

    .audit-timeline-content header span {
        display: block;
        margin-top: 4px;
        color: #667085;
        font-size: 13px;
    }

    .user-audit-timeline dl {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin: 0;
    }

    @media (max-width: 768px) {
        .user-audit-overview-grid {
            grid-template-columns: 1fr;
        }

        .user-audit-last-login,
        .user-audit-account-card,
        .user-audit-log-card {
            border-radius: 18px;
        }

        .user-audit-last-login,
        .user-audit-account-card,
        .user-audit-log-card {
            padding: 16px;
        }

        .user-audit-icon {
            display: none;
        }

        .user-audit-last-login strong {
            font-size: 24px;
        }

        .user-audit-info-grid {
            grid-template-columns: 1fr;
        }

        .user-audit-log-head {
            align-items: flex-start;
            flex-direction: column;
        }

        .user-audit-timeline::before {
            left: 9px;
        }

        .user-audit-timeline-item {
            grid-template-columns: 20px minmax(0, 1fr);
            gap: 10px;
        }

        .audit-timeline-dot {
            width: 20px;
            height: 20px;
        }

        .audit-timeline-content {
            padding: 14px;
            border-radius: 16px;
        }

        .user-audit-timeline dl {
            grid-template-columns: 1fr;
        }
    }


    /* ShemsouStart 25.06.2026 */

    .table-action-dropdown a,
    .table-action-dropdown button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 12px 16px;
        border: 0;
        background: transparent;
        color: #182033;
        font: inherit;
        font-weight: 700;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .table-action-dropdown a:hover,
    .table-action-dropdown button:hover {
        background: #f7eff8;
    }

    .table-action-dropdown .ui-icon {
        width: 20px;
        height: 20px;
        font-size: 20px;
        flex: 0 0 20px;
    }

    .dropdown-delete-btn {
        color: #c62828 !important;
    }

    .dropdown-delete-btn:hover {
        background: #fff0f0 !important;
    }

    .user-status-panel {
        display: grid;
        gap: 24px;
    }

    .user-status-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
    }

    .user-status-header h2 {
        margin-bottom: 6px;
    }

    .user-status-header p:not(.eyebrow) {
        color: #647084;
        margin: 0;
    }

    .status-preview {
        min-width: 130px;
        justify-content: center;
    }

    .status-option-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .status-option-card {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 18px;
        border: 1px solid #eadff0;
        border-radius: 18px;
        background: #fff;
        cursor: pointer;
        transition: 0.2s ease;
    }

    .status-option-card:hover,
    .status-option-card.is-selected {
        border-color: #7a197c;
        background: #fbf5fc;
        box-shadow: 0 14px 30px rgba(122, 25, 124, 0.12);
    }

    .status-option-card input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .status-option-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #f3e8f5;
        color: #7a197c;
        flex: 0 0 42px;
    }

    .status-option-icon .ui-icon {
        font-size: 22px;
    }

    .status-option-card strong {
        display: block;
        color: #182033;
        margin-bottom: 5px;
    }

    .status-option-card small {
        display: block;
        color: #647084;
        line-height: 1.4;
    }

    .status-form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
    }

    @media (max-width: 760px) {
        .user-status-header {
            flex-direction: column;
        }

        .status-option-grid {
            grid-template-columns: 1fr;
        }

        .status-form-actions {
            flex-direction: column-reverse;
        }

        .status-form-actions .button-primary,
        .status-form-actions .button-secondary {
            width: 100%;
            justify-content: center;
        }
    }

    /* =====================================================
    ADMIN LOAN DETAIL - RESPONSIVE FINAL
    ===================================================== */

    .loan-detail-page {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .loan-detail-card {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .loan-detail-list {
        display: grid;
        gap: 14px;
        width: 100%;
    }

    .loan-detail-item-card {
        display: grid;
        gap: 14px;
        width: 100%;
        padding: 16px;
        border: 1px solid #eee7f2;
        border-radius: 18px;
        background: #ffffff;
        color: #17212b;
        box-shadow: 0 10px 24px rgba(23, 33, 43, 0.06);
    }

    .loan-detail-item-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    .loan-detail-item-head strong {
        color: #111827;
        font-size: 15px;
    }

    .loan-detail-item-head small {
        color: #667085;
        font-size: 12px;
        font-weight: 700;
        text-align: right;
    }

    .loan-detail-data {
        display: grid;
        gap: 10px;
    }

    .loan-detail-data-row {
        display: grid;
        grid-template-columns: 140px minmax(0, 1fr);
        gap: 12px;
        padding-top: 10px;
        border-top: 1px solid #eee7f2;
    }

    .loan-detail-data-row span {
        color: #667085;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .loan-detail-data-row strong {
        color: #111827;
        font-size: 14px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .loan-detail-action-grid {
        display: grid;
        gap: 10px;
    }

    .loan-detail-action-grid form {
        display: grid;
        gap: 10px;
    }

    .loan-detail-action-grid input,
    .loan-detail-action-grid button {
        width: 100%;
    }

    @media (max-width: 768px) {
        .loan-detail-page {
            gap: 24px;
        }

        .loan-detail-hero,
        .loan-detail-actions,
        .loan-detail-form-actions,
        .loan-default-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .loan-detail-actions .button-secondary,
        .loan-detail-form-actions button,
        .loan-default-actions button {
            width: 100%;
            justify-content: center;
        }

        .loan-summary-grid {
            grid-template-columns: 1fr !important;
        }

        .loan-detail-data-row {
            grid-template-columns: 110px minmax(0, 1fr);
        }

        .loan-detail-item-head {
            flex-direction: column;
        }

        .loan-detail-item-head small {
            text-align: left;
        }
    }

    .loan-detail-pro .loan-section-head {
        display: flex;
        gap: 14px;
        align-items: flex-start;
    }

    .loan-detail-pro .loan-section-head > span,
    .loan-timeline-icon {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 14px;
        background: rgba(115, 31, 113, 0.1);
        color: var(--primary-dark);
        font-size: 24px;
    }

    .loan-summary-grid-pro {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin: 0;
    }

    .loan-summary-grid-pro > div,
    .loan-detail-item-card,
    .loan-timeline-card {
        border: 1px solid #eee7f2;
        border-radius: 18px;
        background: #fff;
        padding: 16px;
    }

    .loan-summary-grid-pro dt {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #667085;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .loan-summary-grid-pro dd {
        margin: 8px 0 0;
        color: #111827;
        font-size: 15px;
        font-weight: 800;
    }

    .loan-summary-grid-pro small {
        color: #667085;
    }

    .loan-icon-btn,
    .loan-icon-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 16px;
        border: 0;
        border-radius: 12px;
        background: #f7eff8;
        color: var(--primary-dark);
        font-weight: 800;
        cursor: pointer;
    }

    .loan-icon-action.is-approve {
        background: #ecfdf3;
        color: #087443;
    }

    .loan-icon-action.is-danger {
        background: #fff1f0;
        color: #b42318;
    }

    .loan-action-panel {
        display: grid;
        gap: 12px;
    }

    .loan-action-panel form {
        display: grid;
        gap: 10px;
    }

    .loan-detail-list,
    .loan-timeline-list {
        display: grid;
        gap: 14px;
    }

    .loan-detail-item-card {
        display: grid;
        gap: 14px;
    }

    .loan-detail-item-head {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
    }

    .loan-detail-item-head small {
        display: block;
        color: #667085;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .loan-detail-data {
        display: grid;
        gap: 10px;
    }

    .loan-detail-data-row {
        display: grid;
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 12px;
        padding-top: 10px;
        border-top: 1px solid #eee7f2;
    }

    .loan-detail-data-row span {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #667085;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .loan-detail-data-row strong {
        color: #111827;
        font-size: 14px;
        overflow-wrap: anywhere;
    }

    .loan-timeline-card {
        display: flex;
        gap: 14px;
    }

    .loan-timeline-body {
        display: grid;
        gap: 10px;
        width: 100%;
        min-width: 0;
    }

    .loan-timeline-head h3 {
        margin: 0;
        font-size: 16px;
    }

    .loan-timeline-head span,
    .loan-timeline-actor {
        color: #667085;
        font-size: 13px;
    }

    .loan-timeline-flow {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .loan-timeline-flow span,
    .loan-timeline-flow strong {
        padding: 6px 10px;
        border-radius: 999px;
        background: #f7eff8;
        color: var(--primary-dark);
        font-size: 12px;
        font-weight: 800;
    }

    .loan-timeline-actor {
        display: flex;
        gap: 6px;
        align-items: center;
        margin: 0;
    }

    @media (max-width: 768px) {
        .loan-summary-grid-pro {
            grid-template-columns: 1fr;
        }

        .loan-detail-data-row {
            grid-template-columns: 110px minmax(0, 1fr);
        }

        .loan-detail-item-head,
        .loan-timeline-card {
            flex-direction: column;
        }

        .loan-icon-btn,
        .loan-icon-action {
            width: 100%;
        }
    }

    .investment-detail-pro .investment-pro-actions,
    .investment-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .investment-card-actions {
        justify-content: flex-end;
        padding-top: 12px;
        border-top: 1px solid #eee7f2;
    }

    .investment-select-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 14px;
        border-radius: 12px;
        background: #f7eff8;
        color: var(--primary-dark);
        font-weight: 800;
    }

    .investment-select-pill input {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--primary);
    }

    @media (max-width: 768px) {
        .investment-detail-pro .investment-pro-actions,
        .investment-card-actions {
            flex-direction: column;
            align-items: stretch;
        }
    }

    /* Investment admin responsive cards */
    .investment-pro-page {
        display: grid;
        gap: 28px;
    }

    .investment-filter-card {
        padding: 22px;
    }

    .investment-filter-form {
        display: flex;
        align-items: end;
        gap: 14px;
    }

    .investment-filter-form label {
        flex: 1;
        max-width: 420px;
    }

    .investment-records-card {
        display: grid;
        gap: 24px;
    }

    .investment-records-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .investment-title-wrap {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .investment-section-icon,
    .investment-reference-icon,
    .investment-info-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background: rgba(115, 31, 113, 0.1);
        color: var(--primary-dark);
    }

    .investment-section-icon {
        width: 52px;
        height: 52px;
        font-size: 28px;
    }

    .investment-title-wrap h2 {
        margin: 0;
        font-size: clamp(26px, 3vw, 38px);
    }

    .investment-title-wrap p {
        margin: 6px 0 0;
        color: #667085;
    }

    .investment-pro-actions {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }

    .investment-card-list {
        display: grid;
        gap: 16px;
    }

    .investment-record-card {
        display: grid;
        gap: 18px;
        padding: 18px;
        border: 1px solid #eee7f2;
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(23, 33, 43, 0.05);
    }

    .investment-record-top {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 14px;
        align-items: center;
    }

    .investment-card-check {
        display: inline-grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid #eee7f2;
        border-radius: 14px;
        background: #ffffff;
    }

    .investment-card-check input {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--primary);
    }

    .investment-reference-block {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

    .investment-reference-icon {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        font-size: 26px;
    }

    .investment-reference-block small,
    .investment-info-item small {
        display: block;
        color: #667085;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .investment-reference-block strong {
        display: block;
        color: #111827;
        font-size: 18px;
        overflow-wrap: anywhere;
    }

    .investment-record-body {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
        gap: 16px;
        align-items: center;
        padding-top: 16px;
        border-top: 1px solid #eee7f2;
    }

    .investment-info-item {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .investment-info-icon {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        font-size: 22px;
    }

    .investment-info-item strong {
        display: block;
        color: #111827;
        font-size: 15px;
        overflow-wrap: anywhere;
    }

    .investment-info-item em {
        display: block;
        color: #667085;
        font-size: 13px;
        font-style: normal;
    }

    .investment-view-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 18px;
        border-radius: 12px;
        background: #f7eff8;
        color: var(--primary-dark);
        font-weight: 800;
    }

    .investment-review-panel {
        display: grid;
        gap: 10px;
        padding-top: 14px;
        border-top: 1px solid #eee7f2;
    }

    .investment-review-panel form {
        display: grid;
        gap: 10px;
    }

    @media (max-width: 980px) {
        .investment-record-body {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .investment-view-btn {
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        .investment-records-head,
        .investment-filter-form,
        .investment-pro-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .investment-filter-form label {
            max-width: none;
        }

        .investment-record-top {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .investment-record-top .request-status {
            grid-column: 1 / -1;
            justify-self: start;
        }

        .investment-record-body {
            grid-template-columns: 1fr;
        }

        .investment-title-wrap {
            align-items: flex-start;
        }

        .loan-icon-btn,
        .loan-icon-action,
        .investment-view-btn {
            width: 100%;
        }
    }

    /* =====================================================
    INVESTMENT PAGE - SOFTER DESKTOP ICONS FIX
    ===================================================== */

    .investment-pro-page .investment-reference-icon {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        border-radius: 12px !important;
        background: #faf7fd !important;
        border: 1px solid #efe8f5 !important;
        color: #8d63b2 !important;
        font-size: 19px !important;
        box-shadow: none !important;
    }

    .investment-pro-page .investment-info-icon {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        border-radius: 10px !important;
        background: #faf7fd !important;
        border: 1px solid #efe8f5 !important;
        color: #8d63b2 !important;
        font-size: 17px !important;
        box-shadow: none !important;
    }

    .investment-pro-page .investment-info-item {
        gap: 10px !important;
    }

    .investment-pro-page .investment-info-item small,
    .investment-pro-page .investment-reference-block small {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #7b8794 !important;
        letter-spacing: 0.04em !important;
    }

    .investment-pro-page .investment-info-item strong {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #182230 !important;
    }

    .investment-pro-page .investment-info-item em {
        font-size: 13px !important;
        color: #7b8794 !important;
    }

    .investment-pro-page .investment-card-check {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

    .investment-pro-page .investment-card-check input {
        width: 16px !important;
        height: 16px !important;
    }

    .investment-pro-page .investment-record-body {
        gap: 14px !important;
    }

    .investment-pro-page .investment-view-btn {
        min-height: 40px !important;
        padding: 0 14px !important;
        border-radius: 10px !important;
    }

    .investment-detail-pro-page {
        display: grid;
        gap: 28px;
    }

    .investment-detail-hero {
        align-items: flex-end;
    }

    .investment-summary-grid-pro {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .investment-summary-grid-pro article {
        display: grid;
        gap: 8px;
        padding: 18px;
        border: 1px solid #eee7f2;
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(23, 33, 43, 0.05);
    }

    .investment-summary-grid-pro article > span {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: #faf7fd;
        border: 1px solid #efe8f5;
        color: #8d63b2;
        font-size: 20px;
    }

    .investment-summary-grid-pro small {
        color: #667085;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .investment-summary-grid-pro strong {
        color: #111827;
        font-size: 20px;
        font-weight: 800;
    }

    .investment-warning-note {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        margin: 0;
        padding: 12px 14px;
        border-radius: 12px;
        background: #fff7ed;
        color: #9a3412;
    }

    @media (max-width: 900px) {
        .investment-summary-grid-pro {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 640px) {
        .investment-summary-grid-pro {
            grid-template-columns: 1fr;
        }

        .investment-detail-hero {
            align-items: stretch;
        }
    }

    /* Transfer admin responsive mobile/pro cards */
    .transfer-pro-page {
        display: grid;
        gap: 28px;
    }

    .transfer-records-card-pro {
        display: grid;
        gap: 22px;
    }

    .transfer-records-head-pro {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .transfer-title-wrap {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .transfer-section-icon,
    .transfer-reference-icon,
    .transfer-info-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: #faf7fd;
        border: 1px solid #efe8f5;
        color: #8d63b2;
        box-shadow: none;
    }

    .transfer-section-icon {
        width: 52px;
        height: 52px;
        font-size: 26px;
    }

    .transfer-title-wrap h2 {
        margin: 0;
        font-size: clamp(26px, 3vw, 38px);
    }

    .transfer-title-wrap p:not(.eyebrow) {
        margin: 6px 0 0;
        color: #667085;
    }

    .transfer-pro-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }

    .transfer-card-list-pro {
        display: grid;
        gap: 16px;
    }

    .transfer-record-card-pro {
        display: grid;
        gap: 16px;
        padding: 18px;
        border: 1px solid #eee7f2;
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(23, 33, 43, 0.05);
    }

    .transfer-record-top-pro {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 14px;
        align-items: center;
    }

    .transfer-card-check {
        display: inline-grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border: 1px solid #eee7f2;
        border-radius: 10px;
        background: #ffffff;
    }

    .transfer-card-check input {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--primary);
    }

    .transfer-reference-block {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .transfer-reference-icon {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        font-size: 20px;
    }

    .transfer-reference-block small,
    .transfer-info-item small {
        display: block;
        color: #7b8794;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .transfer-reference-block strong {
        display: block;
        color: #111827;
        font-size: 17px;
        overflow-wrap: anywhere;
    }

    .transfer-reference-block em {
        display: block;
        margin-top: 2px;
        color: #667085;
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
    }

    .transfer-record-body-pro {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
        gap: 14px;
        align-items: center;
        padding-top: 14px;
        border-top: 1px solid #eee7f2;
    }

    .transfer-info-item {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .transfer-info-icon {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        font-size: 17px;
    }

    .transfer-info-item strong {
        display: block;
        color: #182230;
        font-size: 15px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .transfer-view-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 40px;
        padding: 0 14px;
        border-radius: 10px;
        background: #f7eff8;
        color: var(--primary-dark);
        font-weight: 800;
    }

    @media (max-width: 980px) {
        .transfer-record-body-pro {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .transfer-view-btn {
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        .transfer-records-head-pro,
        .transfer-pro-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .transfer-record-top-pro {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .transfer-record-top-pro .request-status {
            grid-column: 1 / -1;
            justify-self: start;
        }

        .transfer-record-body-pro {
            grid-template-columns: 1fr;
        }

        .transfer-title-wrap {
            align-items: flex-start;
        }

        .loan-icon-btn,
        .loan-icon-action,
        .transfer-view-btn {
            width: 100%;
        }
    }

    /* =====================================================
    LOAN DETAIL MOBILE UI FIX
    ===================================================== */

    @media (max-width: 768px) {
        .loan-detail-pro {
            gap: 22px;
            padding-bottom: 30px;
        }

        .loan-detail-hero {
            display: grid !important;
            gap: 18px;
            align-items: start !important;
        }

        .loan-detail-hero h1 {
            font-size: 30px !important;
            line-height: 1.1;
            word-break: break-word;
        }

        .loan-detail-actions {
            display: grid !important;
            grid-template-columns: 1fr;
            gap: 10px;
            width: 100%;
        }

        .loan-detail-actions .request-status,
        .loan-detail-actions .loan-icon-btn {
            width: 100%;
            justify-content: center;
        }

        .loan-detail-card {
            padding: 22px !important;
            border-radius: 20px !important;
            overflow: visible !important;
        }

        .loan-section-head {
            display: flex !important;
            align-items: flex-start !important;
            gap: 14px !important;
            margin-bottom: 18px;
        }

        .loan-section-head > span {
            display: grid !important;
            place-items: center !important;
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            border-radius: 14px !important;
            background: #faf7fd !important;
            border: 1px solid #efe8f5 !important;
            color: #8d63b2 !important;
            font-size: 22px !important;
        }

        .loan-section-head h2 {
            margin: 0;
            font-size: 26px !important;
            line-height: 1.15;
        }

        .loan-section-head p {
            margin: 6px 0 0;
            color: #667085;
            font-size: 14px;
        }

        .loan-summary-grid-pro {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 12px !important;
            margin: 0 !important;
        }

        .loan-summary-grid-pro > div {
            display: grid !important;
            gap: 6px;
            padding: 14px !important;
            border: 1px solid #eee7f2 !important;
            border-radius: 16px !important;
            background: #ffffff !important;
        }

        .loan-summary-grid-pro dt {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            color: #667085 !important;
            font-size: 12px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
        }

        .loan-summary-grid-pro dt iconify-icon {
            color: #8d63b2;
            font-size: 17px;
        }

        .loan-summary-grid-pro dd {
            margin: 0 !important;
            padding-left: 25px;
            color: #111827 !important;
            font-size: 16px !important;
            font-weight: 750 !important;
            line-height: 1.35;
        }

        .loan-summary-grid-pro small {
            color: #667085;
            font-size: 13px;
            font-weight: 600;
        }

        .loan-detail-list,
        .loan-timeline-list {
            display: grid;
            gap: 14px;
        }

        .loan-detail-item-card,
        .loan-timeline-card {
            border-radius: 18px !important;
            padding: 16px !important;
            box-shadow: 0 10px 24px rgba(23, 33, 43, 0.05);
        }

        .loan-detail-data-row {
            grid-template-columns: 120px minmax(0, 1fr) !important;
        }

        .loan-icon-btn,
        .loan-icon-action {
            width: 100%;
            min-height: 46px;
        }
    }

    .admin-profile-switch {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid #eee7f2;
        border-radius: 50%;
        background: #ffffff;
        color: var(--primary-dark);
        font-size: 24px;
        box-shadow: 0 8px 20px rgba(23, 33, 43, 0.06);
    }

    .admin-profile-switch:hover {
        background: #faf7fd;
        border-color: rgba(115, 31, 113, 0.22);
    }

    @media (max-width: 768px) {
        .admin-profile-switch {
            width: 40px;
            height: 40px;
            font-size: 22px;
        }
    }


    .account-switch-mini-form {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        flex: 0 0 auto;
    }

    .account-switch-mini-btn {
        appearance: none;
        -webkit-appearance: none;

        width: 52px;
        height: 52px;

        min-width: 52px;
        min-height: 52px;
        max-width: 52px;
        max-height: 52px;

        padding: 0;
        margin: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 52px;

        border: 1px solid #e8ddec;
        border-radius: 50%;

        background: #fff;

        box-sizing: border-box;

        color: var(--primary-dark);

        cursor: pointer;

        transition: all .2s ease;
    }

    .account-switch-mini-btn iconify-icon{
        font-size:22px;
        width:22px;
        height:22px;
    }

    .account-switch-mini-btn:hover{
        background:#faf7fd;
        border-color:#731f71;
    }


    /* Disable state for Root account */
    .account-switch-mini-btn:disabled {
        opacity: 0.35;
        cursor: not-allowed;
        pointer-events: none;
        background: #f5f5f5;
        color: #999;
        border-color: #ddd;
        box-shadow: none;
    }







    @media (max-width:768px){

        .account-switch-mini-btn{

            width:44px;
            height:44px;

            min-width:44px;
            min-height:44px;
            max-width:44px;
            max-height:44px;

            flex:0 0 44px;
        }

        .account-switch-mini-btn iconify-icon{
            width:20px;
            height:20px;
        }
    }

    /* Account management mobile UX */
    .access-management-page {
        display: grid;
        gap: 28px;
    }

    .access-management-hero p {
        max-width: 760px;
    }

    .access-tab-list-pro {
        width: 100%;
        justify-content: flex-start;
    }

    .access-tab-list-pro .js-tab-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .access-panel-pro {
        max-width: 100%;
    }

    .access-form-pro,
    .access-search-form {
        max-width: 760px;
    }

    .access-search-form {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .access-user-list,
    .permission-card-list {
        display: grid;
        gap: 12px;
    }

    .access-user-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 14px;
        align-items: center;
        padding: 16px;
        border: 1px solid #eee7f2;
        border-radius: 18px;
        background: #fff;
    }

    .access-user-icon {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: #faf7fd;
        border: 1px solid #efe8f5;
        color: #8d63b2;
        font-size: 20px;
    }

    .access-user-main {
        min-width: 0;
    }

    .access-user-main strong {
        display: block;
        color: #111827;
        font-size: 15px;
        overflow-wrap: anywhere;
    }

    .access-user-main span {
        display: block;
        color: #667085;
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .permission-group-card {
        display: grid;
        gap: 10px;
        padding: 16px;
        border: 1px solid #eee7f2;
        border-radius: 18px;
        background: #fff;
    }

    .permission-group-card h3 {
        margin: 0;
        color: var(--primary-dark);
        font-size: 16px;
    }

    .permission-mobile-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        padding: 12px 0;
        border-top: 1px solid #eee7f2;
    }

    .permission-mobile-row strong {
        display: block;
        color: #111827;
        font-size: 14px;
    }

    .permission-mobile-row span {
        display: block;
        color: #667085;
        font-size: 12px;
    }

    .permission-mobile-row input[type="checkbox"] {
        width: 20px;
        height: 20px;
        accent-color: var(--primary);
    }

    @media (max-width: 768px) {
        .access-management-hero {
            align-items: flex-start;
        }

        .access-tab-list-pro {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            overflow: visible;
        }

        .access-tab-list-pro .js-tab-trigger {
            min-height: 48px;
            justify-content: flex-start;
            padding: 0 12px;
        }

        .access-form-grid,
        .access-search-form {
            grid-template-columns: 1fr !important;
        }

        .access-user-card {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .access-user-card form,
        .access-user-card .request-status {
            grid-column: 1 / -1;
            width: 100%;
        }

        .access-user-card .loan-icon-action,
        .access-form-pro .loan-icon-action,
        .access-search-form .loan-icon-action {
            width: 100%;
        }

        .access-panel-pro {
            padding: 20px !important;
        }

        .phone-control {
            grid-template-columns: 120px minmax(0, 1fr);
        }
    }

    @media (max-width: 420px) {
        .access-tab-list-pro {
            grid-template-columns: 1fr;
        }
    }

    .membership-reason-box,
    .membership-admin-note {
        display: grid;
        gap: 8px;
        padding: 14px 16px;
        border-radius: 14px;
        border: 1px solid #eee7f2;
        background: #faf7fd;
    }

    .membership-reason-box span,
    .membership-admin-note span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--primary-dark);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .membership-reason-box p,
    .membership-admin-note p {
        margin: 0;
        color: #344054;
        line-height: 1.5;
    }

    .membership-admin-note {
        background: #ecfdf3;
        border-color: #a7e5c4;
    }

    .verify-email-panel {
        gap: 24px;
    }

    .verify-email-head {
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }

    .verify-email-icon {
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        flex: 0 0 54px;
        border-radius: 16px;
        background: #faf7fd;
        border: 1px solid #efe8f5;
        color: var(--primary-dark);
        font-size: 28px;
    }

    @media (max-width: 640px) {
        .verify-email-head {
            flex-direction: column;
        }
    }

    .settings-pro-page {
        display: grid;
        gap: 24px;
    }

    .settings-pro-hero,
    .settings-card-head {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .settings-pro-icon,
    .settings-card-head > span {
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        flex: 0 0 54px;
        border-radius: 16px;
        background: #faf7fd;
        border: 1px solid #efe8f5;
        color: var(--primary-dark);
        font-size: 28px;
    }

    .settings-card-pro {
        padding: 24px;
        border: 1px solid #eee7f2;
        border-radius: 22px;
        background: #fff;
    }

    .settings-card-head h2 {
        margin: 0;
    }

    .settings-status-line {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-weight: 700;
    }

    .settings-status-line.is-ok {
        color: #087443;
    }

    .settings-status-line.is-warning {
        color: #b54708;
    }

    @media (max-width: 640px) {
        .settings-pro-hero,
        .settings-card-head {
            flex-direction: column;
        }

        .settings-card-pro {
            padding: 20px;
        }
    }

    /* LOANS PAGE - MOBILE FIX */
    @media (max-width: 768px) {
        .loan-page {
            gap: 22px;
        }

        .loan-page .loan-records-head,
        .loan-page .loan-history-head,
        .loan-page .loan-section-head,
        .loan-page .request-card-head {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 8px !important;
            text-align: left !important;
            align-items: start !important;
        }

        .loan-page .loan-records-head h2,
        .loan-page .loan-history-head h2,
        .loan-page .request-card-head h2 {
            font-size: 28px !important;
            line-height: 1.1 !important;
            margin: 0 !important;
        }

        .loan-page .loan-records-head p,
        .loan-page .loan-history-head p,
        .loan-page .request-card-head p {
            font-size: 15px !important;
            line-height: 1.45 !important;
            margin: 0 !important;
            max-width: 100% !important;
        }

        .loan-page .request-card {
            padding: 22px !important;
            border-radius: 22px !important;
        }

        .loan-page .loan-step-card {
            padding: 18px !important;
            border-radius: 18px !important;
        }

        .loan-page .loan-step-card header {
            display: flex !important;
            gap: 14px !important;
            align-items: flex-start !important;
        }

        .loan-page .loan-step-card header h3 {
            font-size: 26px !important;
            line-height: 1.1 !important;
            margin: 0 !important;
        }

        .loan-page .loan-step-number {
            width: 52px !important;
            height: 52px !important;
            min-width: 52px !important;
            font-size: 20px !important;
        }

        .loan-page .loan-search-row,
        .loan-page .loan-step-card .search-row {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) 58px !important;
            gap: 10px !important;
        }

        .loan-page .loan-search-row input,
        .loan-page .loan-step-card input {
            min-width: 0 !important;
        }

        .loan-page .loan-empty,
        .loan-page .request-empty {
            text-align: left !important;
            line-height: 1.45 !important;
        }
    }

    /* =====================================================
    Transfer Tabs
    ===================================================== */

    .transfer-tab-list{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        margin-bottom:24px;
    }

    .transfer-tab-list .js-tab-trigger{
        flex:1;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;

        padding:14px 18px;

        border:1px solid #ebe4f1;
        border-radius:14px;

        background:#fff;

        color:#5f6674;
        font-weight:600;
        text-decoration:none;

        transition:.25s ease;
    }

    .transfer-tab-list .js-tab-trigger:hover{
        background:#f8f3fb;
        color:#682b73;
    }

    .transfer-tab-list .js-tab-trigger.is-active{
        background:#682b73;
        color:#fff;
        border-color:#682b73;
        box-shadow:0 10px 25px rgba(104,43,115,.18);
    }

    .transfer-tab-list .tab-icon{
        font-size:20px;
        flex-shrink:0;
    }

    .transfer-tab-list .js-tab-trigger.is-active .tab-icon{
        color:#682b73;
    }

    @media (max-width:768px){

        .transfer-tab-list{
            gap:6px;
        }

        .transfer-tab-list .js-tab-trigger{

            padding:10px 8px;

            font-size:.88rem;

            border-radius:12px;

            gap:6px;
        }

        .transfer-tab-list .tab-icon{
            font-size:16px;
        }

    }

    .quick-action-card {
        position: relative;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
        padding: 18px;
        border: 1px solid #eee7f2;
        border-radius: 20px;
        background: #fff;
        text-decoration: none;
        transition: 0.2s ease;
    }

    .quick-action-card:hover {
        transform: translateY(-2px);
        border-color: rgba(115, 31, 113, 0.25);
        box-shadow: 0 12px 28px rgba(23, 33, 43, 0.08);
    }

    .quick-action-icon {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 14px;
        background: #faf7fd;
        color: var(--primary-dark);
        font-size: 24px;
    }

    .quick-action-content {
        min-width: 0;
    }

    .quick-action-content strong {
        display: block;
        color: #111827;
        font-size: 16px;
    }

    .quick-action-content small {
        display: block;
        margin-top: 4px;
        color: #667085;
        line-height: 1.4;
    }

    .quick-action-open {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--primary-dark);
        font-weight: 800;
        font-size: 13px;
    }

    .quick-action-open iconify-icon {
        font-size: 18px;
    }

    @media (max-width: 768px) {
        .quick-action-card {
            grid-template-columns: auto minmax(0, 1fr);
            padding: 16px;
        }

        .quick-action-open {
            grid-column: 2;
            justify-content: flex-start;
            margin-top: 4px;
        }

        .quick-action-open span {
            display: inline;
        }
    }

    .quick-action-card{
        position:relative;
    }

    .quick-action-arrow{
        position:absolute;
        right:18px;
        top:50%;
        transform:translateY(-50%);
        color:var(--primary-dark);
        font-size:24px;
        opacity:.65;
        transition:.2s;
    }

    .quick-action-card:hover .quick-action-arrow,
    .quick-action-card:active .quick-action-arrow{
        transform:translateY(-50%) translateX(4px);
        opacity:1;
    }


    .member-finance-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px;
        margin-top: 42px;
    }

    .member-finance-kpi-card {
        display: grid;
        overflow: hidden;
        border: 1px solid #eee7f2;
        border-radius: 24px;
        background: #fff;
        text-decoration: none;
        box-shadow: 0 12px 28px rgba(23, 33, 43, 0.05);
    }

    .member-finance-kpi-main {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 24px;
    }

    .member-finance-kpi-main span:not(.member-card-icon) {
        display: block;
        color: #667085;
        font-weight: 800;
    }

    .member-finance-kpi-main strong {
        display: block;
        max-width: 100%;
        color: var(--primary-dark);
        font-size: clamp(20px, 1.7vw, 26px);
        font-weight: 900;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .member-finance-kpi-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 28px;
        border-top: 1px solid #eee7f2;
        background: #fbf7fc;
    }

    .member-finance-kpi-footer span {
        color: #667085;
        font-weight: 800;
    }

    .member-finance-kpi-footer strong {
        color: var(--primary-dark);
        font-size: 22px;
        font-weight: 900;
    }

    @media (max-width: 1024px) {
        .member-finance-kpi-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 640px) {
        .member-finance-kpi-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .member-finance-kpi-main {
            padding: 22px;
        }

        .member-finance-kpi-main strong {
            font-size: 24px;
        }

        .member-finance-kpi-footer {
            padding: 14px 22px;
        }
    }

    .client-home-pro {
        display: grid;
        gap: 22px;
    }

    .client-hero-pro {
        align-items: stretch;
    }

    .client-trust-card {
        display: grid;
        gap: 6px;
        min-width: 230px;
        padding: 18px;
        border: 1px solid #eee7f2;
        border-radius: 18px;
        background: #fff;
    }

    .client-trust-card span,
    .client-summary-card span {
        color: #667085;
        font-weight: 800;
    }

    .client-trust-card small {
        color: #667085;
    }

    .client-action-tiles-pro {
        display: grid;
        gap: 14px;
    }

    .client-action-tiles-pro .client-action-tile {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
        text-align: left;
    }

    .client-action-arrow {
        font-size: 24px;
        color: var(--primary-dark);
        opacity: .65;
    }

    .client-summary-pro .client-summary-card {
        text-decoration: none;
    }

    @media (max-width: 768px) {
        .client-hero-pro {
            grid-template-columns: 1fr;
        }

        .client-action-tiles-pro {
            grid-template-columns: 1fr;
        }

        .client-summary-pro {
            grid-template-columns: 1fr;
        }
    }

    /* MEMBER DOCUMENTS PRO UI */
    .documents-pro-page {
        display: grid;
        gap: 24px;
    }

    .documents-pro-hero {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px;
    }

    .documents-hero-stats {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .documents-hero-stats span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        padding: 0 14px;
        border: 1px solid #eee7f2;
        border-radius: 999px;
        background: #fff;
        color: var(--primary-dark);
        font-weight: 800;
    }

    .documents-layout {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 22px;
    }

    .documents-folder-sidebar,
    .documents-panel-pro {
        border: 1px solid #eee7f2;
        border-radius: 24px;
        background: #fff;
    }

    .documents-folder-sidebar {
        align-self: start;
        padding: 18px;
    }

    .documents-folder-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        color: var(--primary-dark);
    }

    .documents-folder-list {
        display: grid;
        gap: 8px;
    }

    .documents-folder-list a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 48px;
        padding: 0 12px;
        border-radius: 14px;
        color: #344054;
        text-decoration: none;
        font-weight: 750;
    }

    .documents-folder-list a span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .documents-folder-list a strong {
        display: inline-grid;
        place-items: center;
        min-width: 28px;
        height: 28px;
        padding: 0 8px;
        border-radius: 999px;
        background: #faf7fd;
        color: var(--primary-dark);
        font-size: 12px;
    }

    .documents-folder-list a:hover,
    .documents-folder-list a.is-active {
        background: #faf7fd;
        color: var(--primary-dark);
    }

    .documents-panel-pro {
        padding: 24px !important;
    }

    .documents-results-head-pro {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
        gap: 20px;
        align-items: end;
        margin-bottom: 22px;
    }

    .documents-search-pro {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 10px;
    }

    .documents-search-pro input {
        min-height: 48px;
    }

    .documents-search-pro button,
    .documents-search-pro a {
        min-height: 48px;
        border-radius: 14px;
    }

    .documents-grid-pro {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .document-card-pro {
        display: grid;
        gap: 16px;
        padding: 18px;
        border: 1px solid #eee7f2;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 10px 24px rgba(23, 33, 43, 0.04);
    }

    .document-card-top {
        display: flex;
        gap: 14px;
        align-items: flex-start;
    }

    .document-card-top h3 {
        margin: 0;
        color: #111827;
        font-size: 17px;
    }

    .document-card-top p {
        margin: 4px 0 0;
        color: #667085;
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .member-document-icon {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        border-radius: 14px;
        background: #faf7fd;
        color: var(--primary-dark);
        font-size: 24px;
    }

    .document-card-pro dl {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 0;
    }

    .document-card-pro dl div {
        padding: 12px;
        border-radius: 14px;
        background: #fbf7fc;
    }

    .document-card-pro dt {
        color: #667085;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .document-card-pro dd {
        margin: 4px 0 0;
        color: #111827;
        font-weight: 800;
    }

    .document-download-btn {
        width: 100%;
        justify-content: center;
    }

    .documents-empty {
        display: grid;
        place-items: center;
        gap: 8px;
        min-height: 180px;
        text-align: center;
        color: #667085;
    }

    .documents-empty iconify-icon {
        font-size: 42px;
        color: var(--primary-dark);
    }

    @media (max-width: 980px) {
        .documents-layout {
            grid-template-columns: 1fr;
        }

        .documents-folder-sidebar {
            position: static;
        }

        .documents-folder-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .documents-results-head-pro {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 640px) {
        .documents-pro-hero {
            align-items: flex-start;
            flex-direction: column;
        }

        .documents-folder-list {
            grid-template-columns: 1fr;
        }

        .documents-search-pro {
            grid-template-columns: 1fr;
        }

        .documents-search-pro button,
        .documents-search-pro a {
            width: 100%;
            justify-content: center;
        }

        .documents-grid-pro {
            grid-template-columns: 1fr;
        }

        .document-card-pro dl {
            grid-template-columns: 1fr;
        }
    }

    /* ADMIN DOCUMENTS PRO UI */
    .admin-documents-pro {
        display: grid;
        gap: 26px;
    }

    .document-hero-pro {
        align-items: flex-end;
    }

    .document-header-stats {
        display: flex;
        gap: 12px;
    }

    .document-header-stats article {
        display: grid;
        grid-template-columns: auto auto;
        gap: 2px 10px;
        align-items: center;
        min-width: 130px;
        padding: 14px 16px;
        border: 1px solid #eee7f2;
        border-radius: 18px;
        background: #fff;
    }

    .document-header-stats iconify-icon {
        grid-row: span 2;
        color: var(--primary-dark);
        font-size: 28px;
    }

    .document-header-stats strong {
        color: #111827;
        font-size: 22px;
        line-height: 1;
    }

    .document-header-stats span {
        color: #667085;
        font-size: 12px;
        font-weight: 800;
    }

    .admin-documents-layout-pro {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 22px;
    }

    .documents-folder-sidebar-pro,
    .documents-folder-summary-pro,
    .documents-results-card-pro {
        border: 1px solid #eee7f2;
        border-radius: 24px;
        background: #fff;
    }

    .documents-folder-sidebar-pro {
        align-self: start;
        display: grid;
        gap: 18px;
        padding: 18px;
    }

    .documents-sidebar-head {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .documents-sidebar-head > span {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 14px;
        background: #faf7fd;
        color: var(--primary-dark);
        font-size: 24px;
    }

    .documents-sidebar-head strong {
        display: block;
        color: #111827;
    }

    .documents-sidebar-head small {
        color: #667085;
    }

    .documents-folder-list-pro {
        display: grid;
        gap: 8px;
    }

    .documents-folder-list-pro a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 48px;
        padding: 0 12px;
        border-radius: 14px;
        color: #344054;
        text-decoration: none;
        font-weight: 800;
    }

    .documents-folder-list-pro a span {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .documents-folder-list-pro a strong {
        display: grid;
        place-items: center;
        min-width: 28px;
        height: 28px;
        padding: 0 8px;
        border-radius: 999px;
        background: #faf7fd;
        color: var(--primary-dark);
        font-size: 12px;
    }

    .documents-folder-list-pro a:hover,
    .documents-folder-list-pro a.is-active {
        background: #faf7fd;
        color: var(--primary-dark);
    }

    .documents-folder-create-pro {
        display: grid;
        gap: 12px;
        padding-top: 16px;
        border-top: 1px solid #eee7f2;
    }

    .documents-folder-create-pro h3 {
        margin: 0;
        color: #111827;
    }

    .documents-main-pro {
        display: grid;
        gap: 20px;
        min-width: 0;
    }

    .documents-folder-summary-pro,
    .documents-results-card-pro {
        padding: 24px !important;
    }

    .documents-folder-summary-pro header,
    .documents-results-head-pro {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 20px;
    }

    .documents-upload-form-pro {
        display: grid;
        grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr) auto;
        gap: 14px;
        align-items: end;
    }

    .documents-upload-drop {
        display: grid;
        place-items: center;
        gap: 6px;
        min-height: 118px;
        padding: 16px;
        border: 1px dashed #d8c7df;
        border-radius: 18px;
        background: #faf7fd;
        text-align: center;
        cursor: pointer;
    }

    .documents-upload-drop input {
        display: none;
    }

    .documents-upload-drop iconify-icon {
        color: var(--primary-dark);
        font-size: 34px;
    }

    .documents-upload-drop strong {
        color: var(--primary-dark);
    }

    .documents-upload-drop small {
        color: #667085;
    }

    .documents-search-form-pro {
        display: grid;
        grid-template-columns: minmax(240px, 1fr) auto auto;
        gap: 10px;
    }

    .documents-search-form-pro input,
    .documents-search-form-pro button,
    .documents-search-form-pro a {
        min-height: 48px;
        border-radius: 14px;
    }

    .admin-document-grid-pro {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .admin-document-card-pro {
        display: grid;
        gap: 16px;
        padding: 18px;
        border: 1px solid #eee7f2;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 10px 24px rgba(23, 33, 43, 0.04);
    }

    .admin-document-card-top {
        display: flex;
        gap: 14px;
        align-items: flex-start;
    }

    .admin-document-file-icon {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        border-radius: 14px;
        background: #faf7fd;
        color: var(--primary-dark);
        font-size: 26px;
    }

    .admin-document-card-top h3 {
        margin: 0;
        color: #111827;
        font-size: 17px;
    }

    .admin-document-card-top p {
        margin: 4px 0 0;
        color: #667085;
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .admin-document-card-pro dl {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 0;
    }

    .admin-document-card-pro dl div {
        padding: 12px;
        border-radius: 14px;
        background: #fbf7fc;
    }

    .admin-document-card-pro dt {
        color: #667085;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .admin-document-card-pro dd {
        margin: 4px 0 0;
        color: #111827;
        font-weight: 800;
    }

    .admin-document-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .admin-document-actions a {
        justify-content: center;
    }

    .documents-empty-pro {
        display: grid;
        place-items: center;
        gap: 10px;
        min-height: 220px;
        text-align: center;
    }

    .documents-empty-pro > span,
    .documents-empty-pro > span iconify-icon {
        color: var(--primary-dark);
        font-size: 54px;
    }

    @media (max-width: 1100px) {
        .admin-documents-layout-pro {
            grid-template-columns: 1fr;
        }

        .documents-folder-list-pro {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .documents-upload-form-pro {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 720px) {
        .document-hero-pro {
            align-items: flex-start;
        }

        .document-header-stats {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .documents-folder-list-pro,
        .admin-document-grid-pro,
        .documents-search-form-pro,
        .admin-document-card-pro dl,
        .admin-document-actions {
            grid-template-columns: 1fr;
        }

        .documents-folder-summary-pro header,
        .documents-results-head-pro {
            align-items: flex-start;
            flex-direction: column;
        }

        .documents-search-form-pro button,
        .documents-search-form-pro a {
            width: 100%;
            justify-content: center;
        }
    }

    .documents-folder-actions-pro {
        display: grid;
        gap: 14px;
        margin: 18px 0;
        padding: 16px;
        border: 1px solid #eee7f2;
        border-radius: 18px;
        background: #fbf7fc;
    }

    .documents-folder-actions-pro form:first-child {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) auto;
        gap: 12px;
        align-items: end;
    }

    .documents-folder-actions-pro form:last-child {
        display: flex;
        justify-content: flex-end;
    }

    .document-danger-btn {
        color: #b42318 !important;
        border-color: #fecdca !important;
        background: #fff5f5 !important;
    }

    @media (max-width: 720px) {
        .documents-folder-actions-pro form:first-child {
            grid-template-columns: 1fr;
        }

        .documents-folder-actions-pro form:last-child,
        .documents-folder-actions-pro button {
            width: 100%;
        }
    }

    .folder-actions{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:12px;
        flex-wrap:nowrap;
    }

    .folder-actions form{
        margin:0;
    }

    .folder-actions button{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;

        min-width:120px;
        height:52px;

        padding:0 18px;

        border-radius:14px;

        white-space:nowrap;
    }

    .folder-edit-btn iconify-icon,
    .folder-delete-btn iconify-icon{
        font-size:20px;
    }

    .folder-delete-btn{
        color:#c62828;
        border:1px solid #ffd2d2;
        background:#fff8f8;
    }

    .folder-delete-btn:hover{
        background:#ffecec;
    }

    @media (max-width:768px){

        .folder-actions{
            justify-content:stretch;
            width:100%;
            margin-top:15px;
        }

        .folder-actions form{
            flex:1;
        }

        .folder-actions button{
            width:100%;
            min-width:unset;
        }

    }

    .documents-folder-management-card {
        display: grid;
        gap: 14px;
        margin-top: 20px;
        padding: 18px;
        border: 1px solid #eee7f2;
        border-radius: 20px;
        background: #fbf7fc;
    }

    .folder-edit-form {
        display: grid;
        gap: 14px;
    }

    .folder-inline-actions {
        display: flex;
        justify-content: flex-end;
    }

    .folder-delete-form {
        display: flex;
        justify-content: flex-end;
    }

    .documents-upload-card-pro {
        padding: 24px !important;
    }

    .documents-upload-head {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 20px;
    }

    .documents-upload-head > span {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        flex: 0 0 52px;
        border-radius: 16px;
        background: #faf7fd;
        color: var(--primary-dark);
        font-size: 28px;
    }

    @media (max-width: 720px) {
        .folder-inline-actions,
        .folder-delete-form {
            justify-content: stretch;
        }

        .folder-inline-actions button,
        .folder-delete-form button {
            width: 100%;
            justify-content: center;
        }
    }

    .transfer-payment-action-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .transfer-payment-action-card .button-primary {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    @media (max-width: 768px) {
        .transfer-payment-action-card {
            display: grid;
            gap: 16px;
        }

        .transfer-payment-action-card .button-primary {
            width: 100%;
            justify-content: center;
        }
    }

    .transfer-create-simple .transfer-section-head,
    .transfer-create-simple .loan-stepper {
        display: none !important;
    }

    .transfer-create-simple {
        padding-top: 0 !important;
    }

    .transfer-create-simple .loan-step-panels {
        display: grid;
        gap: 22px;
    }

    .transfer-create-simple .loan-step-head .eyebrow {
        display: none !important;
    }

    .transfer-create-simple .loan-step-actions {
        justify-content: flex-end;
    }

    .transfer-create-simple .loan-step-actions .button-secondary {
        display: none !important;
    }

    .transfer-simple-flow {
        display: grid;
        gap: 22px;
    }

    .transfer-simple-flow .loan-step-head {
        align-items: flex-start;
    }

    .transfer-simple-flow .loan-step-page-number {
        flex: 0 0 48px;
    }

    .transfer-simple-flow .loan-step-actions {
        justify-content: flex-end;
    }

    .transfer-simple-flow .request-card {
        margin: 0;
    }

    .loan-step-page-number {
        width: 64px;
        height: 64px;
        min-width: 64px;
        min-height: 64px;
        flex: 0 0 64px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;
        background: var(--primary-color);
        color: #fff;

        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1;

        aspect-ratio: 1 / 1;
    }

    .loan-step-head {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .loan-step-head > div {
        flex: 1;
        min-width: 0;
    }

    .transfer-simple-flow .loan-step-page-number {
        flex-shrink: 0;
    }

    /* ===========================================
    Transfer section header
    =========================================== */

    .transfer-section-head{
        display:flex;
        align-items:center;
        gap:20px;
        margin-bottom:24px;
    }

    .transfer-section-icon{
        width:72px;
        height:72px;
        min-width:72px;
        min-height:72px;

        display:flex;
        align-items:center;
        justify-content:center;

        border-radius:50%;
        background:#6c2d7c;
        color:#fff;

        flex-shrink:0;
    }

    .transfer-section-icon iconify-icon{
        font-size:34px;
    }

    .transfer-section-title{
        flex:1;
        min-width:0;
    }

    .transfer-section-title h2{
        margin:0;
        font-size:2rem;
        font-weight:700;
    }

    .transfer-section-title p{
        margin-top:6px;
    }

    @media (max-width:768px){

    .transfer-section-head{
        gap:14px;
    }

    .transfer-section-icon{
        width:56px;
        height:56px;
        min-width:56px;
        min-height:56px;
    }

    .transfer-section-icon iconify-icon{
        font-size:26px;
    }

    .transfer-section-title h2{
        font-size:1.45rem;
    }

    }

    .transfer-confirmation-card {
        display: grid;
        gap: 22px;
    }

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

    .transfer-confirmation-item {
        padding: 18px;
        border: 1px solid #eee7f2;
        border-radius: 18px;
        background: #fbf7fc;
    }

    .transfer-confirmation-item span {
        display: block;
        color: #667085;
        font-weight: 800;
        font-size: 13px;
    }

    .transfer-confirmation-item strong {
        display: block;
        margin-top: 6px;
        color: #111827;
        font-size: 20px;
    }

    .transfer-confirmation-item.is-total strong {
        color: var(--primary-dark);
        font-size: 24px;
    }

    .transfer-confirmation-note {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        border-radius: 18px;
        background: #f8fbff;
        color: #344054;
    }

    .transfer-confirmation-note iconify-icon {
        margin-top: 3px;
        color: var(--primary-dark);
        font-size: 22px;
        flex-shrink: 0;
    }

    .transfer-confirmation-note p {
        margin: 0;
        line-height: 1.5;
    }

    .transfer-confirmation-actions {
        display: flex;
        justify-content: flex-end;
    }

    .transfer-confirmation-actions .button-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 56px;
        padding: 0 28px;
        border-radius: 16px;
    }

    @media (max-width: 768px) {
        .transfer-confirmation-grid {
            grid-template-columns: 1fr;
        }

        .transfer-confirmation-actions {
            justify-content: stretch;
        }

        .transfer-confirmation-actions .button-primary {
            width: 100%;
        }
    }


    .loan-request-workflow {
        display: grid;
        gap: 22px;
    }

    .loan-step-head {
        display: flex;
        align-items: center;
        gap: 22px;
        margin-bottom: 24px;
    }

    .loan-step-icon {
        width: 76px;
        height: 76px;
        min-width: 76px;
        min-height: 76px;
        flex: 0 0 76px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--primary-dark);
        color: #fff;
    }

    .loan-step-icon iconify-icon {
        font-size: 36px;
    }

    .loan-step-head h2 {
        margin: 0;
    }

    .loan-step-head p {
        margin-top: 6px;
    }

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

    .loan-confirmation-item {
        padding: 18px;
        border: 1px solid #eee7f2;
        border-radius: 18px;
        background: #fbf7fc;
    }

    .loan-confirmation-item span {
        display: block;
        color: #667085;
        font-weight: 800;
        font-size: 13px;
    }

    .loan-confirmation-item strong {
        display: block;
        margin-top: 6px;
        color: #111827;
        font-size: 20px;
    }

    .loan-confirmation-item.is-total strong {
        color: var(--primary-dark);
        font-size: 24px;
    }

    .loan-confirmation-note {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-top: 18px;
        padding: 16px;
        border-radius: 18px;
        background: #f8fbff;
    }

    .loan-confirmation-note iconify-icon {
        margin-top: 3px;
        color: var(--primary-dark);
        font-size: 22px;
        flex-shrink: 0;
    }

    .loan-confirmation-note p {
        margin: 0;
        line-height: 1.5;
    }

    .loan-confirmation-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }

    .loan-confirmation-actions .button-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 56px;
        padding: 0 28px;
        border-radius: 16px;
    }

    @media (max-width: 768px) {
        .loan-step-head {
            align-items: flex-start;
            gap: 14px;
        }

        .loan-step-icon {
            width: 58px;
            height: 58px;
            min-width: 58px;
            min-height: 58px;
            flex-basis: 58px;
        }

        .loan-step-icon iconify-icon {
            font-size: 28px;
        }

        .loan-confirmation-grid {
            grid-template-columns: 1fr;
        }

        .loan-confirmation-actions {
            justify-content: stretch;
        }

        .loan-confirmation-actions .button-primary {
            width: 100%;
        }
    }

    .loan-details-card {
        display: grid;
        gap: 22px;
    }

    .loan-guarantor-selected-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 16px;
        padding: 18px;
        border: 1px solid #eee7f2;
        border-radius: 20px;
        background: #fbf7fc;
    }

    .loan-guarantor-selected-icon {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        border-radius: 16px;
        background: #f1e7f4;
        color: var(--primary-dark);
        font-size: 26px;
    }

    .loan-guarantor-selected-card span {
        color: #667085;
        font-weight: 800;
    }

    .loan-guarantor-selected-card strong {
        display: block;
        margin-top: 4px;
        color: #111827;
    }

    .loan-guarantor-selected-card small {
        display: block;
        margin-top: 3px;
        color: #667085;
    }

    .loan-guarantor-selected-rating {
        text-align: right;
    }

    .loan-guarantor-selected-rating strong {
        color: #b9821f;
        letter-spacing: 1px;
    }

    .loan-details-form {
        display: grid;
        gap: 20px;
    }

    .loan-details-input-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 16px;
    }

    .loan-details-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .loan-details-kpi-card {
        padding: 18px;
        border: 1px solid #eee7f2;
        border-radius: 18px;
        background: #fff;
    }

    .loan-details-kpi-card span {
        display: block;
        color: #667085;
        font-weight: 800;
        font-size: 13px;
    }

    .loan-details-kpi-card strong {
        display: block;
        margin-top: 8px;
        color: #111827;
        font-size: 22px;
        font-weight: 900;
    }

    .loan-details-kpi-card.is-primary {
        background: #fbf7fc;
    }

    .loan-details-kpi-card.is-primary strong {
        color: var(--primary-dark);
    }

    .loan-details-schedule-card {
        display: grid;
        gap: 14px;
        padding: 18px;
        border: 1px solid #eee7f2;
        border-radius: 20px;
        background: #fbf7fc;
    }

    .loan-details-schedule-card h3 {
        margin: 0;
    }

    .loan-details-schedule-card .loan-preview-schedule {
        display: grid;
        gap: 10px;
    }

    .loan-details-schedule-card .loan-preview-schedule > * {
        padding: 12px 14px;
        border-radius: 14px;
        background: #fff;
    }

    @media (max-width: 900px) {
        .loan-details-input-grid,
        .loan-details-kpi-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 640px) {
        .loan-guarantor-selected-card {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .loan-guarantor-selected-rating {
            grid-column: 1 / -1;
            text-align: left;
        }

        .loan-details-input-grid,
        .loan-details-kpi-grid {
            grid-template-columns: 1fr;
        }
    }


    .loan-modern-page .loan-request-workflow {
        display: grid;
        gap: 24px;
    }

    .loan-transfer-style-head {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-bottom: 24px;
    }

    .loan-transfer-style-head .transfer-section-icon {
        width: 82px;
        height: 82px;
        min-width: 82px;
        min-height: 82px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--primary-dark);
        color: #fff;
        flex: 0 0 82px;
    }

    .loan-transfer-style-head .transfer-section-icon iconify-icon {
        font-size: 38px;
    }

    .loan-transfer-style-head .transfer-section-title {
        min-width: 0;
    }

    .loan-transfer-style-head .transfer-section-title h2 {
        margin: 0;
        font-size: clamp(30px, 3vw, 42px);
        line-height: 1.05;
    }

    .loan-transfer-style-head .transfer-section-title p {
        margin: 8px 0 0;
    }

    .loan-report-card {
        display: grid;
        gap: 0;
        overflow: hidden;
        border: 1px solid #dde3ec;
        border-radius: 24px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .loan-report-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 22px;
        padding: clamp(22px, 3vw, 32px);
        border-bottom: 1px solid #eef2f6;
        background: linear-gradient(180deg, #ffffff, #fbf7fc);
    }

    .loan-report-head h2 {
        margin: 0;
        font-size: clamp(28px, 3vw, 38px);
    }

    .loan-report-icon {
        display: grid;
        place-items: center;
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
        border-radius: 18px;
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-dark);
        font-size: 34px;
    }

    .loan-report-body {
        display: grid;
        gap: 0;
    }

    .loan-report-section {
        display: grid;
        gap: 18px;
        padding: clamp(20px, 3vw, 28px);
        border-bottom: 1px solid #eef2f6;
    }

    .loan-report-section h3 {
        margin: 0;
        color: #111827;
        font-size: 18px;
    }

    .loan-report-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .loan-report-grid > div {
        padding: 16px;
        border: 1px solid #eee7f2;
        border-radius: 16px;
        background: #ffffff;
    }

    .loan-report-grid > div.is-highlight {
        background: #fbf7fc;
    }

    .loan-report-grid span {
        display: block;
        color: #667085;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .loan-report-grid strong {
        display: block;
        margin-top: 8px;
        color: #111827;
        font-size: 20px;
        font-weight: 900;
        overflow-wrap: anywhere;
    }

    .loan-report-grid .is-highlight strong {
        color: var(--primary-dark);
        font-size: 24px;
    }

    .loan-report-note {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        border-radius: 18px;
        background: #f8fbff;
        color: #344054;
    }

    .loan-report-note iconify-icon {
        margin-top: 3px;
        color: var(--primary-dark);
        font-size: 22px;
        flex-shrink: 0;
    }

    .loan-report-note p {
        margin: 0;
        line-height: 1.5;
    }

    .loan-report-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: clamp(20px, 3vw, 28px);
        background: #ffffff;
    }

    .loan-report-footer p {
        margin: 0;
        color: #667085;
    }

    .loan-report-footer .button-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 56px;
        padding: 0 28px;
        border-radius: 16px;
        flex: 0 0 auto;
    }

    @media (max-width: 900px) {
        .loan-report-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .loan-report-footer {
            align-items: stretch;
            flex-direction: column;
        }

        .loan-report-footer .button-primary {
            width: 100%;
        }
    }

    @media (max-width: 640px) {
        .loan-transfer-style-head {
            align-items: flex-start;
            gap: 16px;
        }

        .loan-transfer-style-head .transfer-section-icon {
            width: 60px;
            height: 60px;
            min-width: 60px;
            min-height: 60px;
            flex-basis: 60px;
        }

        .loan-transfer-style-head .transfer-section-icon iconify-icon {
            font-size: 28px;
        }

        .loan-transfer-style-head .transfer-section-title h2 {
            font-size: 28px;
        }

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

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

    /* =========================================================
    UMOJA DESIGN SYSTEM V2 OVERRIDES
    Purpose: lighter typography, consistent icons, calmer cards,
    and unified Loans / Transfers / Documents / Investments styling.
    Keep this section at the END of global.css so it overrides older rules.
    ========================================================= */

    :root {
        --umoja-page-title: clamp(30px, 2.8vw, 42px);
        --umoja-section-title: clamp(24px, 2vw, 32px);
        --umoja-card-title: clamp(18px, 1.4vw, 22px);
        --umoja-body: 15px;
        --umoja-small: 13px;
        --umoja-radius-xl: 26px;
        --umoja-radius-lg: 20px;
        --umoja-radius-md: 16px;
        --umoja-card-pad: clamp(20px, 2.4vw, 28px);
        --umoja-section-icon: 64px;
        --umoja-section-icon-mobile: 54px;
        --umoja-soft-purple: rgba(var(--primary-rgb), 0.08);
        --umoja-soft-purple-border: rgba(var(--primary-rgb), 0.14);
    }

    /* ---------- Global typography moderation ---------- */
    h1,
    .admin-overview-head h1,
    .membership-head h1,
    .client-home-hero h1,
    .transfer-hero h1,
    .loan-hero h1,
    .member-documents-hero h1,
    .document-hero h1,
    .dashboard-hero h1,
    .settings-panel h1 {
        font-size: var(--umoja-page-title) !important;
        line-height: 1.08 !important;
        font-weight: 800 !important;
        letter-spacing: -0.035em;
    }

    h2,
    .request-card h2,
    .transfer-section-title h2,
    .loan-transfer-style-head .transfer-section-title h2,
    .loan-report-head h2,
    .loan-section-head h2,
    .transfer-section-head h2,
    .documents-results-head h2,
    .documents-results-head-pro h2,
    .membership-head h2,
    .settings-actions h2,
    .account-mode-card h2 {
        font-size: var(--umoja-section-title) !important;
        line-height: 1.14 !important;
        font-weight: 750 !important;
        letter-spacing: -0.03em;
    }

    h3,
    .request-card h3,
    .loan-report-section h3,
    .loan-details-schedule-card h3,
    .member-document-card h3,
    .admin-document-card-pro h3,
    .settings-more-item h3 {
        font-size: var(--umoja-card-title) !important;
        line-height: 1.22 !important;
        font-weight: 750 !important;
        letter-spacing: -0.02em;
    }

    p,
    .muted,
    .request-card p,
    .transfer-section-title p,
    .loan-transfer-style-head .transfer-section-title p,
    .loan-report-head p,
    .loan-section-head p {
        font-size: var(--umoja-body);
    }

    .eyebrow {
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.14em;
    }

    /* ---------- Unified buttons ---------- */
    .button-primary,
    .button-secondary,
    .settings-action-link,
    .membership-action-link,
    .admin-manage-button,
    .loan-hero-action,
    .transfer-hero-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 16px;
        font-weight: 750;
        line-height: 1;
        white-space: nowrap;
    }

    .button-primary {
        min-height: 50px;
        padding: 0 22px;
        box-shadow: 0 14px 28px rgba(var(--primary-rgb), 0.18);
    }

    .button-secondary,
    .settings-action-link {
        min-height: 48px;
        padding: 0 18px;
        border: 1px solid rgba(var(--primary-rgb), 0.14);
        background: #fff;
        color: var(--primary-dark);
    }

    /* ---------- Unified card rhythm ---------- */
    .request-card,
    .request-empty,
    .transfer-secret,
    .loan-hero,
    .transfer-hero,
    .dashboard-hero,
    .client-home-hero,
    .settings-panel,
    .loan-overview-card,
    .transfer-overview-card,
    .client-summary-card,
    .member-finance-card,
    .quick-action-card,
    .loan-report-card {
        border-radius: var(--umoja-radius-xl);
    }

    .request-card,
    .transfer-panel-modern,
    .loan-panel-modern,
    .loan-details-card,
    .documents-results-card-pro,
    .documents-upload-card-pro,
    .loan-report-card {
        padding: var(--umoja-card-pad) !important;
    }

    .transfer-page,
    .loan-page,
    .admin-requests,
    .member-documents-page,
    .admin-documents-page,
    .dashboard-quick-actions,
    .loan-request-workflow,
    .transfer-simple-flow {
        gap: 22px !important;
    }

    /* ---------- Hero cards: calmer ---------- */
    .loan-hero,
    .transfer-hero,
    .client-home-hero,
    .dashboard-hero,
    .member-documents-hero,
    .document-hero {
        padding: clamp(22px, 3vw, 34px) !important;
    }

    .loan-hero p,
    .transfer-hero p,
    .client-home-hero p,
    .dashboard-hero p {
        max-width: 720px;
        line-height: 1.45;
    }

    /* ---------- Unified section icon header, used by Transfers and Loans ---------- */
    .transfer-section-head,
    .loan-transfer-style-head,
    .loan-step-head {
        display: flex !important;
        align-items: center !important;
        gap: 20px !important;
        margin-bottom: 22px !important;
    }

    .transfer-section-icon,
    .loan-transfer-style-head .transfer-section-icon,
    .loan-step-icon {
        display: grid !important;
        place-items: center !important;
        width: var(--umoja-section-icon) !important;
        height: var(--umoja-section-icon) !important;
        min-width: var(--umoja-section-icon) !important;
        min-height: var(--umoja-section-icon) !important;
        flex: 0 0 var(--umoja-section-icon) !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        background: var(--primary-dark) !important;
        color: #fff !important;
        line-height: 1 !important;
        box-shadow: 0 16px 36px rgba(var(--primary-rgb), 0.16);
    }

    .transfer-section-icon iconify-icon,
    .loan-transfer-style-head .transfer-section-icon iconify-icon,
    .loan-step-icon iconify-icon {
        display: block !important;
        width: 1em !important;
        height: 1em !important;
        font-size: 30px !important;
    }

    .transfer-section-title,
    .loan-transfer-style-head .transfer-section-title,
    .loan-step-head > div {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-left: 2px;
    }

    .transfer-section-title h2,
    .loan-transfer-style-head .transfer-section-title h2,
    .loan-step-head h2 {
        margin: 0 !important;
    }

    .transfer-section-title p,
    .loan-transfer-style-head .transfer-section-title p,
    .loan-step-head p {
        margin: 7px 0 0 !important;
        color: var(--muted) !important;
    }

    /* Stop old numbered circles from becoming oval if older pages still use them */
    .loan-step-page-number {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        flex: 0 0 54px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
    }

    /* ---------- Loans: modern system ---------- */
    .loan-modern-page .loan-request-workflow,
    .loan-request-workflow {
        display: grid;
        gap: 22px !important;
    }

    .loan-overview-grid,
    .transfer-overview-grid,
    .admin-transfer-summary-grid,
    .loan-dashboard-summary {
        gap: 16px !important;
    }

    .loan-overview-card,
    .transfer-overview-card,
    .admin-transfer-summary-card,
    .client-summary-card,
    .member-finance-card {
        min-height: 96px;
        padding: 18px 20px !important;
    }

    .loan-overview-card strong,
    .transfer-overview-card strong,
    .admin-transfer-summary-card strong,
    .client-summary-card strong,
    .member-finance-card strong {
        font-size: clamp(20px, 1.9vw, 28px) !important;
        line-height: 1.05 !important;
        overflow-wrap: anywhere;
    }

    .loan-overview-icon,
    .transfer-overview-icon,
    .client-summary-icon,
    .member-card-icon,
    .loan-guarantor-selected-icon {
        display: grid !important;
        place-items: center !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        border-radius: 15px !important;
        background: var(--umoja-soft-purple) !important;
        color: var(--primary-dark) !important;
        font-size: 24px !important;
    }

    .loan-guarantor-selected-card,
    .selected-guarantor-card,
    .transfer-selected-recipient {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 16px;
        padding: 18px;
        border: 1px solid var(--umoja-soft-purple-border);
        border-radius: var(--umoja-radius-lg);
        background: #fbf7fc;
    }

    .loan-guarantor-selected-card strong,
    .selected-guarantor-card strong,
    .transfer-selected-recipient strong {
        overflow-wrap: anywhere;
    }

    .loan-details-input-grid,
    .transfer-currency-input-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
        gap: 16px;
    }

    .loan-details-kpi-grid,
    .transfer-dual-summary,
    .loan-report-grid,
    .loan-history-metrics,
    .transfer-record-grid-modern {
        gap: 14px !important;
    }

    .loan-details-kpi-card,
    .transfer-summary-card,
    .loan-report-grid > div,
    .loan-confirmation-item,
    .transfer-confirmation-item {
        padding: 16px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: var(--umoja-radius-md);
        background: #fff;
    }

    .loan-details-kpi-card span,
    .loan-report-grid span,
    .loan-confirmation-item span,
    .transfer-confirmation-item span {
        display: block;
        color: #667085;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .loan-details-kpi-card strong,
    .loan-report-grid strong,
    .loan-confirmation-item strong,
    .transfer-confirmation-item strong {
        display: block;
        margin-top: 7px;
        color: #111827;
        font-size: clamp(18px, 1.6vw, 23px);
        font-weight: 900;
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

    .loan-details-kpi-card.is-primary,
    .loan-report-grid .is-highlight,
    .loan-confirmation-item.is-total,
    .transfer-confirmation-item.is-total {
        background: #fbf7fc;
    }

    .loan-details-kpi-card.is-primary strong,
    .loan-report-grid .is-highlight strong,
    .loan-confirmation-item.is-total strong,
    .transfer-confirmation-item.is-total strong {
        color: var(--primary-dark);
    }

    .loan-details-schedule-card {
        padding: 18px;
        border: 1px solid var(--umoja-soft-purple-border);
        border-radius: var(--umoja-radius-lg);
        background: #fbf7fc;
    }

    .loan-details-schedule-card .loan-preview-schedule > * {
        padding: 12px 14px;
        border-radius: 14px;
        background: #fff;
    }

    /* Loan confirmation report */
    .loan-report-card {
        display: grid;
        overflow: hidden;
        padding: 0 !important;
        border: 1px solid #dde3ec;
        background: #fff;
        box-shadow: var(--shadow-card);
    }

    .loan-report-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        padding: clamp(20px, 2.6vw, 28px);
        border-bottom: 1px solid #eef2f6;
        background: linear-gradient(180deg, #fff, #fbf7fc);
    }

    .loan-report-head h2 {
        margin: 0 !important;
    }

    .loan-report-icon {
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        min-width: 56px;
        border-radius: 18px;
        background: var(--umoja-soft-purple);
        color: var(--primary-dark);
        font-size: 30px;
    }

    .loan-report-body {
        display: grid;
    }

    .loan-report-section {
        display: grid;
        gap: 16px;
        padding: clamp(18px, 2.4vw, 26px);
        border-bottom: 1px solid #eef2f6;
    }

    .loan-report-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .loan-report-note,
    .loan-confirmation-note,
    .transfer-confirmation-note,
    .transfer-confirm-note {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        border-radius: var(--umoja-radius-md);
        background: #f8fbff;
        color: #344054;
    }

    .loan-report-note p,
    .loan-confirmation-note p,
    .transfer-confirmation-note p,
    .transfer-confirm-note p {
        margin: 0;
    }

    .loan-report-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: clamp(18px, 2.4vw, 26px);
        background: #fff;
    }

    .loan-report-footer p {
        margin: 0;
        color: var(--muted);
    }

    .loan-report-footer .button-primary,
    .loan-confirmation-actions .button-primary,
    .transfer-confirmation-actions .button-primary {
        min-height: 54px;
        padding: 0 26px;
        border-radius: 16px;
    }

    /* ---------- Transfers: keep consistent with Loans ---------- */
    .transfer-payment-action-card,
    .transfer-confirmation-card {
        display: grid;
        gap: 18px;
    }

    @media (min-width: 769px) {
        .transfer-payment-action-card {
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
        }
    }

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

    .transfer-confirmation-actions,
    .loan-confirmation-actions {
        display: flex;
        justify-content: flex-end;
    }

    /* ---------- Tabs: lighter ---------- */
    .access-tab-list,
    .transfer-tab-list,
    .admin-user-tabs {
        border-radius: 18px !important;
        box-shadow: var(--shadow-card);
    }

    .access-tab-list .js-tab-trigger,
    .transfer-tab-list .js-tab-trigger,
    .admin-user-tabs a {
        border-radius: 13px !important;
        font-weight: 700 !important;
    }

    /* ---------- Documents / admin cards: lighter headings ---------- */
    .documents-folder-summary-pro h2,
    .documents-upload-head h2,
    .documents-results-head-pro h2,
    .documents-empty-pro h2 {
        font-size: var(--umoja-section-title) !important;
    }

    /* ---------- Mobile normalization ---------- */
    @media (max-width: 900px) {
        .loan-details-input-grid,
        .transfer-currency-input-grid,
        .loan-details-kpi-grid,
        .loan-report-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .loan-report-footer {
            align-items: stretch;
            flex-direction: column;
        }

        .loan-report-footer .button-primary {
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        :root {
            --umoja-page-title: clamp(28px, 8vw, 38px);
            --umoja-section-title: clamp(24px, 7vw, 31px);
            --umoja-card-pad: 20px;
        }

        .dashboard-shell {
            width: min(100% - 24px, 1120px);
            padding: clamp(22px, 5vw, 36px) 0;
        }

        .transfer-section-head,
        .loan-transfer-style-head,
        .loan-step-head {
            align-items: flex-start !important;
            gap: 15px !important;
            margin-bottom: 18px !important;
        }

        .transfer-section-icon,
        .loan-transfer-style-head .transfer-section-icon,
        .loan-step-icon {
            width: var(--umoja-section-icon-mobile) !important;
            height: var(--umoja-section-icon-mobile) !important;
            min-width: var(--umoja-section-icon-mobile) !important;
            min-height: var(--umoja-section-icon-mobile) !important;
            flex-basis: var(--umoja-section-icon-mobile) !important;
        }

        .transfer-section-icon iconify-icon,
        .loan-transfer-style-head .transfer-section-icon iconify-icon,
        .loan-step-icon iconify-icon {
            font-size: 25px !important;
        }

        .loan-guarantor-selected-card,
        .selected-guarantor-card,
        .transfer-selected-recipient {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .loan-guarantor-selected-rating,
        .selected-guarantor-rating {
            grid-column: 1 / -1;
            text-align: left !important;
        }

        .loan-details-input-grid,
        .transfer-currency-input-grid,
        .loan-details-kpi-grid,
        .loan-report-grid,
        .transfer-confirmation-grid,
        .loan-confirmation-grid {
            grid-template-columns: 1fr !important;
        }

        .transfer-confirmation-actions,
        .loan-confirmation-actions {
            justify-content: stretch;
        }

        .transfer-confirmation-actions .button-primary,
        .loan-confirmation-actions .button-primary,
        .transfer-payment-action-card .button-primary {
            width: 100%;
        }

        .loan-hero,
        .transfer-hero,
        .dashboard-hero,
        .client-home-hero,
        .request-card,
        .transfer-panel-modern,
        .loan-panel-modern {
            border-radius: 22px;
        }
    }

    @media (max-width: 480px) {
        .button-primary,
        .button-secondary,
        .settings-action-link,
        .membership-action-link {
            width: 100%;
            min-height: 50px;
        }

        .loan-overview-card,
        .transfer-overview-card,
        .admin-transfer-summary-card,
        .client-summary-card,
        .member-finance-card {
            min-height: 86px;
        }

        .eyebrow {
            font-size: 11px;
        }
    }


    /* ==========================================================
    UMOJA PLATFORM TYPOGRAPHY STANDARDIZATION
    Purpose: create one consistent font scale across admin,
    member, client, and agent interfaces.
    Add this section at the very bottom of global.css.
    ========================================================== */

    :root {
        --font-xs: 0.75rem;     /* 12px */
        --font-sm: 0.8125rem;   /* 13px */
        --font-base: 0.875rem;  /* 14px */
        --font-md: 0.9375rem;   /* 15px */
        --font-lg: 1rem;        /* 16px */
        --font-xl: 1.125rem;    /* 18px */
        --font-2xl: 1.375rem;   /* 22px */
        --font-3xl: 1.75rem;    /* 28px */
        --font-4xl: 2.25rem;    /* 36px */

        --line-tight: 1.15;
        --line-heading: 1.2;
        --line-body: 1.5;
    }

    html {
        font-size: 16px;
    }

    body {
        font-size: var(--font-md) !important;
        line-height: var(--line-body);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    /* Page titles */
    h1,
    .admin-overview-head h1,
    .client-dashboard-head h1,
    .dashboard-hero h1,
    .membership-head h1,
    .coming-soon-hero h1,
    .user-profile-hero h1,
    .loan-step-head h2 {
        font-size: clamp(1.625rem, 2.4vw, 2rem) !important;
        line-height: var(--line-tight) !important;
        font-weight: 800 !important;
        letter-spacing: -0.025em;
    }

    /* Section headings */
    h2,
    .card h2,
    .panel h2,
    .admin-card h2,
    .settings-actions h2,
    .next-of-kin-card-head h2,
    .account-mode-card h2,
    .loan-builder h2,
    .loan-history h2,
    .loan-filter-card h2,
    .transfer-builder h2,
    .transfer-history h2,
    .transfer-secret h2 {
        font-size: var(--font-2xl) !important;
        line-height: var(--line-heading) !important;
        font-weight: 700 !important;
        letter-spacing: -0.015em;
    }

    /* Smaller block headings */
    h3,
    .card h3,
    .panel h3,
    .admin-card h3,
    .dashboard-chart-head strong,
    .client-action-tile strong,
    .client-summary-card strong {
        font-size: var(--font-xl) !important;
        line-height: var(--line-heading) !important;
        font-weight: 700 !important;
    }

    /* Body copy */
    p,
    li,
    td,
    dd,
    label,
    input,
    select,
    textarea,
    button,
    .button-primary,
    .button-secondary,
    .button-link,
    .admin-side-link,
    .client-menu-item,
    .client-nav-pill {
        font-size: var(--font-md) !important;
        line-height: var(--line-body);
    }

    /* Supporting / muted text */
    small,
    .muted,
    .eyebrow,
    .field-error,
    .toast p,
    .admin-stat-card span,
    .client-dashboard-status span,
    .client-summary-card span,
    .recipient-option span,
    .transfer-selection span,
    .guarantor-summary span,
    .loan-review-grid span,
    .secure-file-field small,
    .next-of-kin-details dt,
    .client-menu-head span,
    .client-user-role,
    .loan-mobile-select,
    .contribution-record-select,
    .loan-list-toolbar > span,
    .contribution-record-toolbar > span,
    .investment-list-toolbar > span {
        font-size: var(--font-sm) !important;
        line-height: 1.4 !important;
    }

    /* Tiny badges and counters */
    .badge,
    .status-badge,
    .client-nav-badge,
    .client-nav-soon,
    .admin-side-count,
    .permission-table thead th,
    .permission-group-row th {
        font-size: var(--font-xs) !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    /* Dashboard numbers: readable but not oversized */
    .admin-stat-card strong,
    .dashboard-donut span,
    .transfer-secret strong {
        font-size: clamp(1.375rem, 2.1vw, 1.875rem) !important;
        line-height: 1 !important;
        font-weight: 800 !important;
    }

    .client-user-name {
        font-size: var(--font-lg) !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    label > span:not(.password-control) {
        font-size: var(--font-sm) !important;
        font-weight: 600;
    }

    /* Admin sidebar should not look oversized */
    .admin-logo {
        font-size: var(--font-2xl) !important;
    }

    .admin-side-link {
        font-size: var(--font-md) !important;
    }

    /* Header/topbar typography */
    .admin-topbar,
    .client-header,
    .role-header {
        font-size: var(--font-md) !important;
    }

    .admin-topbar strong,
    .client-header strong,
    .role-header strong {
        font-size: var(--font-lg) !important;
    }

    /* Prevent old huge welcome typography from affecting real app screens */
    .admin-welcome-copy span {
        font-size: clamp(3.75rem, 8vw, 6rem) !important;
    }

    .admin-welcome-copy em {
        font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    }

    .admin-welcome-copy strong {
        font-size: clamp(2rem, 5vw, 3.5rem) !important;
    }

    /* Mobile typography */
    @media (max-width: 768px) {
        body {
            font-size: var(--font-base) !important;
        }

        h1,
        .admin-overview-head h1,
        .client-dashboard-head h1,
        .dashboard-hero h1,
        .membership-head h1,
        .coming-soon-hero h1,
        .user-profile-hero h1 {
            font-size: clamp(1.5rem, 7vw, 1.75rem) !important;
        }

        h2,
        .card h2,
        .panel h2,
        .admin-card h2,
        .loan-builder h2,
        .loan-history h2,
        .transfer-builder h2,
        .transfer-history h2 {
            font-size: var(--font-xl) !important;
        }

        h3,
        .card h3,
        .panel h3,
        .admin-card h3 {
            font-size: var(--font-lg) !important;
        }

        p,
        li,
        td,
        dd,
        label,
        input,
        select,
        textarea,
        button,
        .button-primary,
        .button-secondary,
        .button-link,
        .admin-side-link,
        .client-menu-item,
        .client-nav-pill {
            font-size: var(--font-base) !important;
        }

        small,
        .muted,
        .eyebrow,
        .field-error,
        .toast p,
        .client-dashboard-status span,
        .client-summary-card span {
            font-size: var(--font-xs) !important;
        }

        .admin-stat-card strong,
        .dashboard-donut span,
        .transfer-secret strong {
            font-size: var(--font-2xl) !important;
        }
    }

    /* Keep header icons/profile images circular after typography reset */
    .admin-topbar-actions,
    .header-actions,
    .topbar-actions,
    .client-userbar {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .admin-topbar-actions > *,
    .header-actions > *,
    .topbar-actions > * {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 50% !important;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .admin-topbar-actions img,
    .header-actions img,
    .topbar-actions img,
    .admin-avatar img,
    .profile-avatar img,
    .client-avatar img,
    .user-head-icon {
        width: 52px;
        height: 52px;
        border-radius: 50% !important;
        object-fit: cover;
        display: block;
    }

    .investment-guarantee-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin-top: 16px;
    }

    .investment-guarantee-actions form {
    margin: 0;
    width: 100%;
    }

    .investment-action-btn {
    width: 100%;
    min-width: 0;
    height: 46px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    cursor: pointer;
    }

    .investment-action-accept {
    border: 0;
    background: var(--primary);
    color: #fff;
    }

    .investment-action-decline {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--primary-dark);
    }

    @media (max-width: 640px) {
    .investment-guarantee-actions {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .investment-action-btn {
        height: 44px;
        border-radius: 12px;
        font-size: 13px;
    }
    }

    /* =========================================================
    UMOJA FINANCE DESIGN SYSTEM
    Applies to:
    Bank Balance, Expenses, Loans, Investments, Transfers,
    Capital, Contributions
    ========================================================= */

    .finance-page,
    .expense-admin-page,
    .loan-page,
    .transfer-page,
    .capital-page,
    .contribution-page,
    .investment-page,
    .bank-balance-page {
    --finance-radius: 16px;
    --finance-radius-sm: 12px;
    --finance-gap: 14px;
    --finance-card-padding: 18px;
    --finance-border: 1px solid rgba(115, 31, 113, 0.12);
    }

    /* Page rhythm */
    .finance-page,
    .expense-admin-page,
    .loan-page,
    .transfer-page,
    .capital-page,
    .contribution-page,
    .investment-page,
    .bank-balance-page {
    display: grid;
    gap: 18px;
    }

    /* Compact hero */
    .finance-hero,
    .expense-admin-hero,
    .membership-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 26px 30px;
    border: var(--finance-border);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
    }

    .finance-hero h1,
    .expense-admin-hero h1,
    .membership-head h1 {
    margin: 0;
    font-size: clamp(26px, 2.3vw, 34px);
    line-height: 1.05;
    }

    .finance-hero p,
    .expense-admin-hero p,
    .membership-head p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.35;
    }

    .finance-page .eyebrow,
    .expense-admin-page .eyebrow,
    .loan-page .eyebrow,
    .transfer-page .eyebrow,
    .capital-page .eyebrow,
    .contribution-page .eyebrow,
    .investment-page .eyebrow,
    .bank-balance-page .eyebrow {
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: 0.14em;
    }

    /* Compact action button */
    .finance-hero .button-primary,
    .expense-admin-hero .button-primary,
    .finance-action-button {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    }

    /* Summary cards */
    .finance-summary-grid,
    .expense-summary-grid,
    .admin-stat-grid,
    .loan-summary-grid,
    .transfer-summary-grid,
    .capital-summary-grid,
    .contribution-summary-grid,
    .investment-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    }

    .finance-summary-card,
    .expense-summary-card,
    .admin-stat-card {
    min-height: 104px;
    padding: 18px 20px;
    border: var(--finance-border);
    border-radius: var(--finance-radius);
    background: #ffffff;
    box-shadow: var(--shadow-card);
    }

    .finance-summary-card span,
    .expense-summary-card span,
    .admin-stat-card span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #536276;
    font-size: 13px;
    font-weight: 700;
    }

    .finance-summary-card strong,
    .expense-summary-card strong,
    .admin-stat-card strong {
    margin-top: 16px;
    display: block;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1;
    }

    /* Record container */
    .finance-records-card,
    .expense-records-card,
    .request-card {
    padding: 20px;
    border: var(--finance-border);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
    }

    .finance-records-head h2,
    .expense-records-head h2,
    .request-card h2 {
    margin: 0;
    font-size: clamp(24px, 2vw, 30px);
    line-height: 1.1;
    }

    /* Dense record rows */
    .finance-record-list,
    .expense-record-list,
    .loan-history-list {
    display: grid;
    gap: 10px;
    }

    .finance-record-row,
    .expense-record-row,
    .loan-history-card {
    display: grid;
    grid-template-columns: 44px minmax(260px, 1fr) 130px 120px 120px 44px;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    padding: 14px 18px;
    border: var(--finance-border);
    border-radius: var(--finance-radius);
    background: #ffffff;
    }

    .expense-record-icon,
    .finance-record-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 20px;
    }

    .expense-record-main strong,
    .finance-record-main strong,
    .loan-history-card h2 {
    display: block;
    margin: 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.25;
    }

    .expense-record-main span,
    .finance-record-main span,
    .loan-history-card p {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.25;
    }

    .expense-record-main p,
    .finance-record-main p {
    margin: 6px 0 0;
    color: #536276;
    font-size: 13px;
    line-height: 1.35;
    }

    .expense-record-amount span,
    .expense-record-balance small,
    .finance-record-amount span,
    .finance-record-balance small {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    }

    .expense-record-amount strong,
    .expense-record-balance strong,
    .finance-record-amount strong,
    .finance-record-balance strong {
    display: block;
    margin-top: 5px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.1;
    white-space: nowrap;
    }

    /* Dropdown action */
    .expense-dropdown,
    .finance-dropdown {
    position: relative;
    justify-self: end;
    }

    .expense-dropdown-toggle,
    .finance-dropdown-toggle,
    .table-action-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    font-size: 18px;
    }

    /* Tables used in finance pages */
    .finance-table,
    .loan-desktop-table,
    .contribution-table,
    .investment-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    }

    .finance-table th,
    .finance-table td,
    .loan-desktop-table th,
    .loan-desktop-table td,
    .contribution-table th,
    .contribution-table td,
    .investment-table th,
    .investment-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef2f6;
    text-align: left;
    }

    .finance-table th,
    .loan-desktop-table th,
    .contribution-table th,
    .investment-table th {
    color: #64748b;
    background: #f8fafc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    }

    /* Forms */
    .finance-page input,
    .finance-page select,
    .finance-page textarea,
    .expense-admin-page input,
    .expense-admin-page select,
    .expense-admin-page textarea {
    min-height: 42px;
    font-size: 13px;
    }

    .finance-page label > span,
    .expense-admin-page label > span {
    font-size: 13px;
    font-weight: 700;
    }

    /* Mobile */
    @media (max-width: 900px) {
    .finance-summary-grid,
    .expense-summary-grid,
    .admin-stat-grid,
    .loan-summary-grid,
    .transfer-summary-grid,
    .capital-summary-grid,
    .contribution-summary-grid,
    .investment-summary-grid {
        grid-template-columns: 1fr;
    }

    .finance-record-row,
    .expense-record-row,
    .loan-history-card {
        grid-template-columns: 38px minmax(0, 1fr) 36px;
        gap: 12px;
        padding: 14px;
    }

    .expense-record-amount,
    .expense-record-balance,
    .finance-record-amount,
    .finance-record-balance {
        grid-column: 2 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .expense-dropdown,
    .finance-dropdown {
        grid-column: 3;
        grid-row: 1;
    }

    .finance-hero,
    .expense-admin-hero,
    .membership-head {
        align-items: stretch;
        flex-direction: column;
        padding: 22px;
    }

    .finance-hero .button-primary,
    .expense-admin-hero .button-primary {
        width: 100%;
    }
    }

    @media (max-width: 640px) {
    .finance-hero h1,
    .expense-admin-hero h1,
    .membership-head h1 {
        font-size: 25px;
    }

    .finance-record-row,
    .expense-record-row,
    .loan-history-card {
        min-height: auto;
    }

    .expense-record-main p,
    .finance-record-main p {
        font-size: 12px;
    }
    }

    /* =========================================================
    UMOJA DESIGN SYSTEM v2
    Purpose: one reusable visual language for Admin, Member,
    Client and Agent modules.
    Load this AFTER global.css.
    ========================================================= */

    :root {
    --ds-bg: #f7f4fb;
    --ds-surface: #ffffff;
    --ds-surface-soft: #f8fafc;
    --ds-text: #071527;
    --ds-muted: #5f6f84;
    --ds-line: rgba(115, 31, 113, 0.14);
    --ds-line-strong: rgba(115, 31, 113, 0.22);
    --ds-primary: var(--primary, #731f71);
    --ds-primary-dark: var(--primary-dark, #5a1857);
    --ds-success: #087443;
    --ds-danger: #b42318;
    --ds-warning: #9a5b00;
    --ds-radius-xs: 8px;
    --ds-radius-sm: 12px;
    --ds-radius-md: 16px;
    --ds-radius-lg: 22px;
    --ds-shadow: 0 16px 42px rgba(23, 33, 43, 0.08);
    --ds-shadow-soft: 0 10px 26px rgba(23, 33, 43, 0.06);
    --ds-page-gap: 18px;
    --ds-card-pad: 20px;
    --ds-font-xs: 11px;
    --ds-font-sm: 12px;
    --ds-font-body: 13px;
    --ds-font-md: 14px;
    --ds-font-lg: 16px;
    --ds-font-xl: 20px;
    --ds-font-2xl: 26px;
    --ds-font-3xl: 34px;
    }

    /* Universal page architecture */
    .ds-page,
    .admin-requests,
    .admin-overview,
    .dashboard-hero,
    .settings-panel,
    .loan-page,
    .transfer-page,
    .capital-page,
    .contribution-page,
    .investment-page,
    .bank-balance-page,
    .expense-admin-page {
    gap: var(--ds-page-gap) !important;
    }

    .ds-page h1,
    .admin-requests h1,
    .admin-overview h1,
    .dashboard-hero h1,
    .settings-panel h1,
    .loan-page h1,
    .transfer-page h1,
    .capital-page h1,
    .contribution-page h1,
    .investment-page h1 {
    font-size: clamp(26px, 2.3vw, var(--ds-font-3xl)) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em;
    }

    .ds-page h2,
    .request-card h2,
    .loan-section-head h2,
    .expense-records-head h2,
    .membership-head h2 {
    font-size: clamp(20px, 1.8vw, 28px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em;
    }

    .ds-page h3,
    .request-card h3,
    .permission-group-card h3 {
    font-size: var(--ds-font-lg) !important;
    line-height: 1.25 !important;
    }

    .ds-page p,
    .ds-page span,
    .ds-page label,
    .ds-page input,
    .ds-page select,
    .ds-page textarea,
    .ds-page button,
    .ds-page a {
    font-size: var(--ds-font-body);
    }

    .ds-page .eyebrow,
    .eyebrow {
    font-size: var(--ds-font-xs) !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    }

    .muted,
    .ds-muted {
    color: var(--ds-muted) !important;
    }

    /* Reusable page header / hero */
    .ds-page-hero,
    .admin-overview-head,
    .membership-head,
    .expense-admin-hero,
    .loan-admin-hero,
    .transfer-admin-hero,
    .investment-admin-hero,
    .capital-admin-hero,
    .project-admin-hero,
    .user-admin-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 24px 30px !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-radius-lg) !important;
    background: var(--ds-surface) !important;
    box-shadow: var(--ds-shadow-soft) !important;
    }

    .ds-page-hero p,
    .admin-overview-head p,
    .membership-head p,
    .expense-admin-hero p {
    margin-top: 6px !important;
    color: var(--ds-muted);
    font-size: var(--ds-font-body) !important;
    line-height: 1.35 !important;
    }

    /* Action bars */
    .ds-action-bar,
    .admin-head-actions,
    .loan-list-toolbar,
    .contribution-record-toolbar,
    .investment-list-toolbar,
    .transfer-export-actions,
    .expense-records-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    }

    /* Buttons */
    .ds-btn,
    .button-primary,
    .button-secondary,
    .loan-icon-action,
    .admin-manage-button,
    .membership-action-link,
    .settings-action-link {
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    font-size: var(--ds-font-body) !important;
    font-weight: 750 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1 !important;
    }

    .button-primary,
    .ds-btn-primary,
    .loan-icon-action.is-approve {
    background: var(--ds-primary) !important;
    color: #fff !important;
    border: 1px solid var(--ds-primary) !important;
    box-shadow: 0 12px 24px rgba(115, 31, 113, 0.16);
    }

    .button-secondary,
    .ds-btn-secondary {
    background: #fff !important;
    color: var(--ds-primary-dark) !important;
    border: 1px solid var(--ds-line-strong) !important;
    }

    .ds-btn-danger,
    .button-danger,
    .expense-dropdown-item.is-danger {
    color: var(--ds-danger) !important;
    }

    /* Cards */
    .ds-card,
    .request-card,
    .dashboard-chart-card,
    .permission-group-card,
    .access-user-card,
    .loan-history-card,
    .expense-record-row,
    .finance-record-row,
    .settings-panel,
    .next-of-kin-card,
    .membership-panel,
    .coming-soon-hero {
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-radius-md) !important;
    background: var(--ds-surface) !important;
    box-shadow: var(--ds-shadow-soft) !important;
    }

    .request-card,
    .ds-card {
    padding: var(--ds-card-pad) !important;
    }

    /* Statistics */
    .ds-stat-grid,
    .admin-stat-grid,
    .expense-summary-grid,
    .finance-summary-grid,
    .loan-summary-grid,
    .transfer-summary-grid,
    .capital-summary-grid,
    .contribution-summary-grid,
    .investment-summary-grid,
    .project-summary-grid,
    .project-detail-kpi-grid,
    .attendance-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    }

    .ds-stat-card,
    .admin-stat-card,
    .expense-summary-card,
    .finance-summary-card,
    .client-summary-card,
    .project-summary-card,
    .project-detail-kpi-card {
    min-height: 96px !important;
    padding: 18px 20px !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-radius-md) !important;
    background: #fff !important;
    box-shadow: var(--ds-shadow-soft) !important;
    }

    .ds-stat-card span,
    .admin-stat-card span,
    .expense-summary-card span,
    .finance-summary-card span,
    .project-summary-card span,
    .project-detail-kpi-card span {
    color: var(--ds-muted) !important;
    font-size: var(--ds-font-body) !important;
    font-weight: 800 !important;
    }

    .ds-stat-card strong,
    .admin-stat-card strong,
    .expense-summary-card strong,
    .finance-summary-card strong,
    .project-summary-card strong,
    .project-detail-kpi-card strong {
    margin-top: 14px !important;
    display: block !important;
    font-size: clamp(24px, 2.2vw, 32px) !important;
    line-height: 1 !important;
    letter-spacing: -0.025em;
    }

    /* Tables */
    .ds-table-wrap,
    .permission-table-wrap,
    .table-responsive,
    .loan-table-wrap,
    .contribution-table-wrap,
    .investment-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-radius-md) !important;
    background: #fff !important;
    }

    .ds-table,
    .permission-table,
    .finance-table,
    .loan-desktop-table,
    .contribution-table,
    .investment-table,
    table {
    width: 100%;
    border-collapse: collapse;
    }

    .ds-table th,
    .ds-table td,
    .permission-table th,
    .permission-table td,
    .finance-table th,
    .finance-table td,
    .loan-desktop-table th,
    .loan-desktop-table td,
    .contribution-table th,
    .contribution-table td,
    .investment-table th,
    .investment-table td {
    padding: 10px 12px !important;
    border-bottom: 1px solid #eef2f6 !important;
    font-size: var(--ds-font-body) !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
    }

    .ds-table th,
    .permission-table thead th,
    .finance-table th,
    .loan-desktop-table th,
    .contribution-table th,
    .investment-table th {
    background: #f8fafc !important;
    color: var(--ds-muted) !important;
    font-size: var(--ds-font-xs) !important;
    font-weight: 850 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    }

    /* Forms */
    .ds-form,
    .form-stack {
    gap: 14px !important;
    }

    .ds-form-grid,
    .form-grid {
    gap: 14px !important;
    }

    .ds-page label > span,
    .form-stack label > span:not(.password-control) {
    color: var(--ds-text) !important;
    font-size: var(--ds-font-body) !important;
    font-weight: 750 !important;
    }

    .ds-page input:not([type="checkbox"]):not([type="radio"]),
    .ds-page select,
    .ds-page textarea,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
    min-height: 42px;
    border-radius: 10px !important;
    font-size: var(--ds-font-body) !important;
    }

    /* Compact finance/ledger mode */
    .ds-finance-page .request-card,
    .finance-page .request-card,
    .expense-records-card {
    padding: 18px !important;
    }

    .ds-finance-page .expense-record-list,
    .finance-page .expense-record-list,
    .loan-history-list {
    display: grid;
    gap: 10px !important;
    }

    .ds-finance-page .expense-record-row,
    .finance-page .expense-record-row {
    display: grid !important;
    grid-template-columns: 44px minmax(260px, 1fr) 130px 120px 120px 44px !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 76px !important;
    padding: 14px 18px !important;
    }

    .expense-record-main strong,
    .finance-record-main strong,
    .loan-history-card h2 {
    font-size: 15px !important;
    line-height: 1.2 !important;
    }

    .expense-record-main span,
    .expense-record-main p,
    .finance-record-main span,
    .finance-record-main p,
    .loan-history-card p {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    }

    .expense-record-amount strong,
    .expense-record-balance strong,
    .finance-record-amount strong,
    .finance-record-balance strong {
    font-size: 15px !important;
    white-space: nowrap;
    }

    .expense-dropdown-toggle,
    .table-action-icon,
    .finance-dropdown-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    }

    /* Management pages */
    .ds-management-page .access-tab-list,
    .ds-management-page .admin-user-tabs {
    width: 100% !important;
    justify-content: flex-start !important;
    }

    .ds-management-page .access-tab-list .js-tab-trigger {
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: var(--ds-font-body) !important;
    }

    .access-user-card {
    padding: 14px !important;
    }

    /* Dashboard pages remain more open but standardized */
    .ds-dashboard-page .dashboard-command-grid,
    .ds-dashboard-page .admin-stat-grid {
    gap: 14px !important;
    }

    .ds-dashboard-page .admin-welcome-card {
    border-radius: var(--ds-radius-lg) !important;
    }

    /* Topbar icon shape protection */
    .admin-topbar-actions,
    .header-actions,
    .topbar-actions,
    .client-userbar {
    display: flex;
    align-items: center;
    gap: 12px;
    }

    .admin-topbar-actions > a,
    .admin-topbar-actions > button,
    .header-actions > a,
    .header-actions > button,
    .topbar-actions > a,
    .topbar-actions > button,
    .client-notification,
    .client-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    }

    .admin-topbar-actions img,
    .header-actions img,
    .topbar-actions img,
    .client-avatar img,
    .user-head-icon {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    }

    /* Empty states */
    .ds-empty,
    .request-empty {
    padding: 18px 20px !important;
    border: 1px dashed var(--ds-line-strong) !important;
    border-radius: var(--ds-radius-md) !important;
    background: #fff !important;
    color: var(--ds-muted) !important;
    }

    .request-empty strong,
    .ds-empty strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ds-text);
    font-size: var(--ds-font-md);
    }

    /* Status pills */
    .request-status,
    .ds-status {
    min-height: 26px;
    padding: 0 10px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--ds-font-xs) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    }

    /* Responsive */
    @media (max-width: 1100px) {
    .ds-stat-grid,
    .admin-stat-grid,
    .expense-summary-grid,
    .finance-summary-grid,
    .loan-summary-grid,
    .transfer-summary-grid,
    .capital-summary-grid,
    .contribution-summary-grid,
    .investment-summary-grid,
    .project-summary-grid,
    .project-detail-kpi-grid,
    .attendance-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    }

    @media (max-width: 900px) {
    .ds-page-hero,
    .admin-overview-head,
    .membership-head,
    .expense-admin-hero,
    .loan-admin-hero,
    .transfer-admin-hero,
    .investment-admin-hero,
    .capital-admin-hero,
    .project-admin-hero,
    .user-admin-hero {
        align-items: stretch !important;
        flex-direction: column !important;
        padding: 20px !important;
    }

    .ds-finance-page .expense-record-row,
    .finance-page .expense-record-row {
        grid-template-columns: 38px minmax(0, 1fr) 36px !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    .expense-record-amount,
    .expense-record-balance,
    .finance-record-amount,
    .finance-record-balance {
        grid-column: 2 / -1;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .expense-dropdown,
    .finance-dropdown {
        grid-column: 3;
        grid-row: 1;
    }
    }

    @media (max-width: 640px) {
    .ds-stat-grid,
    .admin-stat-grid,
    .expense-summary-grid,
    .finance-summary-grid,
    .loan-summary-grid,
    .transfer-summary-grid,
    .capital-summary-grid,
    .contribution-summary-grid,
    .investment-summary-grid,
    .project-summary-grid,
    .project-detail-kpi-grid,
    .attendance-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .ds-page h1,
    .admin-requests h1,
    .admin-overview h1,
    .dashboard-hero h1,
    .settings-panel h1,
    .loan-page h1,
    .transfer-page h1,
    .capital-page h1,
    .contribution-page h1,
    .investment-page h1 {
        font-size: 25px !important;
    }

    .request-card,
    .ds-card {
        padding: 16px !important;
    }

    .ds-btn,
    .button-primary,
    .button-secondary,
    .loan-icon-action,
    .admin-manage-button,
    .membership-action-link,
    .settings-action-link {
        width: 100%;
    }
    }

    .access-permission-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 18px;
    }

    .access-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    }

    .access-action-primary {
    background: var(--primary);
    color: #fff;
    }

    .access-action-danger {
    border: 1px solid rgba(180, 35, 24, 0.28);
    background: #fff1f0;
    color: #b42318;
    }

    .access-action-danger:hover {
    background: #ffe4e1;
    }

    @media (max-width: 640px) {
    .access-permission-actions,
    .access-user-card form {
        width: 100%;
    }

    .access-action-btn {
        width: 100%;
    }
    }
    .access-permission-actions,
    .access-user-card form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    }

    .access-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    }

    .access-action-primary {
    background: var(--primary);
    color: #fff;
    }

    .access-action-danger {
    border: 1px solid rgba(180, 35, 24, 0.28);
    background: #fff1f0;
    color: #b42318;
    }

    @media (max-width: 640px) {
    .access-user-card {
        align-items: stretch;
    }

    .access-user-card form,
    .access-action-btn {
        width: 100%;
    }
    }

    /* Stop admin menu icons from spinning/animating */
    .admin-sidebar iconify-icon,
    .admin-side-nav iconify-icon,
    .admin-topbar iconify-icon,
    .ui-icon {
    animation: none !important;
    transform: none;
    }

    .admin-side-dropdown[open] .admin-side-dropdown-chevron {
    transform: rotate(180deg);
    transition: transform 0.18s ease;
    }

    /* =========================================================
    UMOJA DS v2 - Admin Topbar + Static Sidebar Icons Fix
    Purpose: clearer Role/Page title and no spinning menu icons
    ========================================================= */

    .admin-topbar-title {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    }

    .admin-topbar-section {
    display: block;
    color: var(--muted, #667085);
    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    }

    .admin-topbar-page {
    display: block;
    color: var(--text, #162033);
    font-size: clamp(15px, 1.1vw, 18px) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(48vw, 520px);
    }

    .admin-title-separator {
    color: var(--muted, #667085);
    margin: 0 6px;
    font-weight: 700;
    }

    .admin-sidebar iconify-icon,
    .admin-side-nav iconify-icon,
    .admin-topbar iconify-icon,
    .admin-side-icon,
    .admin-side-group-icon,
    .admin-side-dropdown-chevron,
    .ui-icon {
    animation: none !important;
    animation-name: none !important;
    }

    .admin-side-icon,
    .admin-side-group-icon,
    .admin-topbar .ui-icon {
    transform: none !important;
    }

    .admin-side-dropdown-chevron {
    transform: rotate(0deg) !important;
    transition: transform 0.18s ease;
    }

    .admin-side-dropdown[open] .admin-side-dropdown-chevron {
    transform: rotate(180deg) !important;
    }

    .admin-side-link,
    .admin-side-dropdown-title {
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }

    @media (max-width: 768px) {
    .admin-topbar-title {
        display: none !important;
    }
    }

    /* Fix notification badge position */
    .client-notification,
    .admin-userbar .client-notification {
    position: relative;
    overflow: visible !important;
    }

    .client-notification > span,
    .admin-userbar .client-notification > span {
    position: absolute !important;
    top: -6px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    }


    /* Admin Users enhanced table, sorting, softer badges */
    .admin-users-page .admin-overview-head {
    align-items: center;
    }

    .admin-users-page .admin-users-filter-card,
    .admin-users-page .admin-users-table-card {
    border: 1px solid rgba(115,31,113,.10);
    }

    .table-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    }

    .table-sort-btn iconify-icon {
    width: 14px;
    height: 14px;
    opacity: .55;
    }

    .table-sort-btn.is-sorted-asc,
    .table-sort-btn.is-sorted-desc {
    color: var(--primary);
    }

    .table-sort-btn.is-sorted-asc iconify-icon {
    transform: rotate(180deg);
    }

    .user-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
    border: 1px solid transparent;
    white-space: nowrap;
    }

    .user-status-badge .ui-icon {
    width: 15px;
    height: 15px;
    }

    .user-status-badge.is-active {
    background: #ecfdf3;
    color: #027a48;
    border-color: #abefc6;
    }

    .user-status-badge.is-suspended {
    background: #fff8e6;
    color: #946200;
    border-color: #fedf89;
    }

    .user-status-badge.is-deactivated,
    .user-status-badge.is-inactive {
    background: #fff1f3;
    color: #b42318;
    border-color: #fecdca;
    }

    .user-status-badge.is-pending,
    .user-status-badge.is-unverified {
    background: #eef4ff;
    color: #3538cd;
    border-color: #c7d7fe;
    }

    .admin-role-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    }

    .admin-role-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f8f5fb;
    color: #6e1e70;
    border: 1px solid rgba(110,30,112,.10);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: capitalize;
    }

    .admin-role-pill.is-client {
    background: #f0f9ff;
    color: #026aa2;
    border-color: #b9e6fe;
    }

    .admin-role-pill.is-member {
    background: #fdf4ff;
    color: #86198f;
    border-color: #f5d0fe;
    }

    .admin-role-pill.is-agent {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
    }

    .admin-role-pill.is-admin {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
    }

    .admin-users-table td {
    vertical-align: middle;
    }

    .admin-users-table tbody tr:hover {
    background: rgba(110,30,112,.025);
    }

    @media (max-width: 760px) {
    .admin-directory-toolbar {
        grid-template-columns: 1fr;
    }

    .admin-users-page .admin-head-actions {
        width: 100%;
    }

    .admin-users-page .users-head-link,
    .admin-users-page .users-action-btn,
    .admin-users-page .request-count {
        width: 100%;
        justify-content: center;
    }
    }


    .dashboard-kpi-strip a {
    position: relative;
    padding: 18px 20px 18px 64px;
    }

    .dashboard-kpi-icon {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(110, 30, 112, 0.09);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    }

    .dashboard-kpi-strip span:not(.dashboard-kpi-icon) {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    }

    .dashboard-kpi-strip strong {
    margin-top: 8px;
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1;
    }

    .dashboard-money-compact {
    font-size: clamp(26px, 2.3vw, 36px) !important;
    line-height: 1.05;
    word-break: keep-all;
    white-space: nowrap;
    }

    .dashboard-command-card:not(.is-primary) {
    overflow: hidden;
    }

    .dashboard-command-card:not(.is-primary) p {
    font-size: 14px;
    line-height: 1.35;
    }

    @media (max-width: 1200px) {
    .dashboard-money-compact {
        font-size: 28px !important;
    }
    }

    @media (max-width: 760px) {
    .dashboard-kpi-strip a {
        padding: 16px 18px 16px 58px;
    }

    .dashboard-money-compact {
        white-space: normal;
        font-size: 25px !important;
    }
    }

    .dashboard-command-card {
    min-width: 0;
    overflow: hidden;
    }

    .dashboard-command-card .dashboard-money-value {
    font-size: clamp(24px, 2vw, 32px) !important;
    line-height: 1.05;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    }

    .dashboard-command-card:not(.is-primary) .dashboard-money-value {
    font-size: clamp(22px, 1.8vw, 30px) !important;
    }

    .dashboard-command-card p {
    max-width: 100%;
    font-size: 14px !important;
    line-height: 1.35;
    white-space: normal !important;
    overflow-wrap: anywhere;
    }

    .dashboard-kpi-strip strong {
    font-size: clamp(24px, 1.8vw, 30px) !important;
    }

    .dashboard-kpi-strip a {
    min-width: 0;
    }
    /* =========================================================
    UMOJA DASHBOARD V3
    Executive dashboard layout, compact financial cards,
    wrapping-safe values and softer KPI styling.
    ========================================================= */
    .admin-dashboard-v3 {
    --dash-v3-radius: 22px;
    --dash-v3-radius-sm: 16px;
    --dash-v3-border: 1px solid rgba(110, 30, 112, 0.12);
    --dash-v3-muted: #64748b;
    --dash-v3-soft: rgba(110, 30, 112, 0.08);
    display: grid;
    gap: 18px;
    }

    .dashboard-v3-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: clamp(26px, 3vw, 42px);
    border: var(--dash-v3-border);
    border-radius: var(--dash-v3-radius);
    background: #fff;
    box-shadow: var(--shadow-card);
    }

    .dashboard-v3-hero h1 {
    margin: 0;
    font-size: clamp(32px, 3vw, 48px);
    line-height: 1;
    }

    .dashboard-v3-hero p:not(.eyebrow) {
    max-width: 780px;
    margin: 10px 0 0;
    color: var(--dash-v3-muted);
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.45;
    }

    .dashboard-v3-action {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 230px;
    padding: 16px 18px;
    border: var(--dash-v3-border);
    border-radius: 20px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    box-shadow: 0 18px 40px rgba(39, 15, 58, 0.08);
    }

    .dashboard-v3-action-icon,
    .dashboard-v3-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dash-v3-soft);
    color: var(--primary);
    flex: 0 0 auto;
    }

    .dashboard-v3-action strong,
    .dashboard-v3-action small {
    display: block;
    }

    .dashboard-v3-action small {
    margin-top: 3px;
    color: var(--dash-v3-muted);
    font-weight: 700;
    }

    .dashboard-v3-action b {
    min-width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    }

    .dashboard-v3-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    }

    .dashboard-v3-kpi-card {
    min-width: 0;
    min-height: 136px;
    padding: 20px;
    border: var(--dash-v3-border);
    border-radius: var(--dash-v3-radius-sm);
    background: #fff;
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow-card);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    }

    .dashboard-v3-kpi-card .dashboard-v3-icon {
    grid-row: span 3;
    }

    .dashboard-v3-kpi-label {
    color: #536276;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    }

    .dashboard-v3-kpi-card strong {
    margin-top: 7px;
    color: var(--primary-dark, #4b124c);
    font-size: clamp(28px, 2.2vw, 38px);
    line-height: 1;
    white-space: nowrap;
    }

    .dashboard-v3-kpi-card small {
    margin-top: 6px;
    color: var(--dash-v3-muted);
    font-size: 12px;
    line-height: 1.25;
    }

    .dashboard-v3-money-grid {
    display: grid;
    grid-template-columns: 1.45fr repeat(3, minmax(0, 1fr));
    gap: 14px;
    }

    .dashboard-v3-money-card {
    min-width: 0;
    overflow: hidden;
    padding: 24px;
    border: var(--dash-v3-border);
    border-radius: var(--dash-v3-radius-sm);
    background: #fff;
    box-shadow: var(--shadow-card);
    }

    .dashboard-v3-money-card.is-primary {
    background: linear-gradient(135deg, var(--primary), #4b124c);
    color: #fff;
    }

    .dashboard-v3-money-label {
    display: block;
    color: #536276;
    font-size: 13px;
    font-weight: 800;
    }

    .dashboard-v3-money-card.is-primary .dashboard-v3-money-label,
    .dashboard-v3-money-card.is-primary p {
    color: rgba(255,255,255,0.82);
    }

    .dashboard-v3-money-card strong {
    display: block;
    max-width: 100%;
    margin-top: 14px;
    color: var(--primary-dark, #4b124c);
    font-size: clamp(26px, 2vw, 34px);
    line-height: 1.05;
    white-space: normal;
    overflow-wrap: anywhere;
    }

    .dashboard-v3-money-card.is-primary strong {
    color: #fff;
    font-size: clamp(30px, 2.6vw, 42px);
    }

    .dashboard-v3-money-card p {
    max-width: 100%;
    margin: 12px 0 0;
    color: var(--dash-v3-muted);
    font-size: 14px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    }

    .dashboard-v3-section-title {
    margin-top: 2px;
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    }

    .dashboard-v3-insight-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr 1fr;
    gap: 14px;
    align-items: stretch;
    }

    .dashboard-v3-panel {
    min-width: 0;
    padding: 22px;
    border: var(--dash-v3-border);
    border-radius: var(--dash-v3-radius-sm);
    background: #fff;
    box-shadow: var(--shadow-card);
    }

    .dashboard-v3-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    }

    .dashboard-v3-panel-head span {
    display: block;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    }

    .dashboard-v3-panel-head strong {
    display: block;
    max-width: 100%;
    margin-top: 6px;
    color: var(--text);
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 1.1;
    overflow-wrap: anywhere;
    }

    .dashboard-v3-donut {
    width: 170px;
    height: 170px;
    margin: 28px auto 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--primary) calc(var(--chart-value) * 1%), #e8edf3 0);
    position: relative;
    }

    .dashboard-v3-donut::before {
    content: '';
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    background: #fff;
    }

    .dashboard-v3-donut span {
    position: relative;
    color: var(--primary-dark, #4b124c);
    font-size: 28px;
    font-weight: 900;
    }

    .dashboard-v3-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    color: var(--dash-v3-muted);
    font-size: 12px;
    font-weight: 800;
    }

    .dashboard-v3-legend i {
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border-radius: 50%;
    display: inline-block;
    background: var(--primary);
    }

    .dashboard-v3-legend i.is-muted {
    background: #cbd5e1;
    }

    .dashboard-v3-progress {
    height: 14px;
    margin: 24px 0 18px;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
    }

    .dashboard-v3-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2f7d4b, #6bc36d);
    }

    .dashboard-v3-breakdown-list {
    display: grid;
    gap: 12px;
    }

    .dashboard-v3-breakdown-list div {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 14px;
    background: #f8fafc;
    }

    .dashboard-v3-breakdown-list span {
    color: var(--dash-v3-muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    }

    .dashboard-v3-breakdown-list strong {
    color: var(--primary-dark, #4b124c);
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.1;
    text-align: right;
    overflow-wrap: anywhere;
    }

    .dashboard-v3-alert-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    }

    .dashboard-v3-alert-grid a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border: var(--dash-v3-border);
    border-radius: 16px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow-card);
    }

    .dashboard-v3-alert-grid span {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    }

    .dashboard-v3-alert-grid strong {
    color: var(--primary-dark, #4b124c);
    font-size: 22px;
    }

    @media (max-width: 1320px) {
    .dashboard-v3-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-v3-money-grid,
    .dashboard-v3-insight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    }

    @media (max-width: 900px) {
    .dashboard-v3-hero,
    .dashboard-v3-money-grid,
    .dashboard-v3-insight-grid,
    .dashboard-v3-alert-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-v3-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-v3-kpi-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-v3-action {
        width: 100%;
    }
    }


    .logo-mobile {
    display: none;
    }

    @media (max-width: 768px) {
    .client-brand .logo-desktop {
        display: none !important;
    }

    .client-brand .logo-mobile {
        display: block !important;
        width: 38px;
        height: 38px;
        object-fit: contain;
        border-radius: 12px;
    }

    .client-header {
        gap: 8px;
        padding-inline: 10px;
    }

    .client-main-nav {
        gap: 4px;
    }

    .client-nav-pill,
    .client-notification,
    .client-avatar {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .client-userbar {
        gap: 4px;
    }
    }

    /* =====================================================
    FINAL MEMBER/CLIENT MOBILE HEADER FIX
    ===================================================== */

    @media (max-width: 768px) {
    .client-header {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) auto !important;
        grid-template-areas: "brand nav user" !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 64px !important;
        padding: 8px 10px !important;
    }

    .client-brand {
        grid-area: brand !important;
        justify-self: start !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }

    .client-brand .logo-desktop {
        display: none !important;
    }

    .client-brand .logo-mobile {
        display: block !important;
        width: 38px !important;
        height: 38px !important;
        object-fit: contain !important;
    }

    .client-main-nav {
        grid-area: nav !important;
        display: flex !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        padding: 4px !important;
        border-radius: 18px !important;
        background: #f7f2f8 !important;
    }

    .client-nav-pill {
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border-radius: 14px !important;
    }

    .client-nav-pill .nav-label {
        display: none !important;
    }

    .client-userbar {
        grid-area: user !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        width: auto !important;
        min-width: auto !important;
        padding: 4px !important;
        border: 1px solid rgba(115, 31, 113, 0.12) !important;
        border-radius: 20px !important;
        background: #ffffff !important;
    }

    .client-notification,
    .client-avatar,
    .client-userbar > a,
    .client-userbar > button {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 50% !important;
    }

    .client-avatar {
        overflow: hidden !important;
    }
    }

    @media (max-width: 768px) {
    .client-main-nav {
        max-width: 260px !important;
        justify-self: center !important;
        background: rgba(115, 31, 113, 0.055) !important;
        box-shadow: none !important;
    }

    .client-nav-pill {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    .client-nav-pill.is-active::after {
        content: "";
        position: absolute;
        bottom: -8px;
        width: 22px;
        height: 4px;
        border-radius: 999px;
        background: var(--primary);
    }

    .client-userbar {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .client-notification,
    .client-userbar > a,
    .client-userbar > button {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    .client-avatar {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
    }
    }

    @media (max-width:768px){

        .client-utilities{
            display:flex;
            align-items:center;
            gap:6px;

            padding:3px 4px;

            background:#fff;

            border-radius:999px;

            border:1px solid rgba(115,31,113,.10);

            box-shadow:
                0 4px 12px rgba(0,0,0,.04);
        }

        .client-userbar{
            background:transparent !important;
            border:none !important;
            padding:0 !important;
            gap:0 !important;
        }

    }

    .client-notification{
        width:36px !important;
        height:36px !important;
    }

    .client-notification span{

        top:-5px;
        right:-5px;

        min-width:18px;
        height:18px;

        font-size:.65rem;

        border:2px solid #fff;
    }


    @media (max-width: 768px) {
    .client-quick-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        max-width: 252px !important;
        padding: 5px !important;
        border-radius: 22px !important;
        background: rgba(115, 31, 113, 0.06) !important;
    }

    .client-quick-action {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 16px;
        color: #64748b;
        background: transparent;
    }

    .client-quick-action span {
        display: none;
    }

    .client-quick-action.is-active {
        background: var(--primary);
        color: #fff;
        box-shadow: 0 12px 24px rgba(115, 31, 113, 0.25);
    }

    .client-quick-action.is-active::after {
        content: "";
        position: absolute;
        bottom: -9px;
        width: 22px;
        height: 4px;
        border-radius: 999px;
        background: var(--primary);
    }
    }

    .client-quick-actions{
        background: rgba(115,31,113,.035);
        border:1px solid rgba(115,31,113,.06);
        box-shadow:none;
    }

    .client-quick-action{
        width:40px;
        height:40px;
    }

    .client-quick-action.is-active{
        transform:translateY(-1px);
    }

    .client-main-nav{
        margin-right:12px;
    }

    .client-avatar{

        border:2px solid #fff;

        box-shadow:
            0 4px 16px rgba(0,0,0,.12);
    }

    .access-create-account-form {
    gap: 20px;
    }

    .access-create-account-form .access-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    }

    .access-upload-wrap {
    min-width: 0;
    }

    .access-upload-card {
    display: grid;
    place-items: center;
    min-height: 64px;
    padding: 12px 16px;
    border: 1.5px dashed rgba(115, 31, 113, 0.25);
    border-radius: 14px;
    background: rgba(115, 31, 113, 0.035);
    color: var(--primary-dark);
    cursor: pointer;
    text-align: center;
    }

    .access-upload-card:hover {
    border-color: var(--primary);
    background: rgba(115, 31, 113, 0.07);
    }

    .access-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    }

    .access-upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 4px;
    border-radius: 12px;
    background: #fff;
    font-size: 22px;
    }

    .access-upload-title {
    font-size: 13px;
    font-weight: 800;
    }

    .access-upload-help,
    .access-upload-filename {
    color: #667085;
    font-size: 11px;
    }

    .access-pin-submit-row {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(220px, 280px);
    gap: 18px;
    align-items: end;
    }

    .access-pin-wrap {
    min-width: 0;
    }

    .access-create-user-btn {
    width: 100%;
    min-height: 56px;
    }

    @media (max-width: 760px) {
    .access-create-account-form .access-form-grid,
    .access-pin-submit-row {
        grid-template-columns: 1fr;
    }

    .access-create-user-btn {
        width: 100%;
    }
    }



    /* MEMBER/CLIENT DESKTOP HEADER FIX */
    @media (min-width: 769px) {
    .client-header {
        display: grid !important;
        grid-template-columns: minmax(180px, 1fr) auto minmax(240px, 1fr) !important;
        align-items: center !important;
        min-height: 84px !important;
        padding: 0 clamp(28px, 5vw, 64px) !important;
    }

    .client-brand {
        justify-self: start !important;
    }

    .client-brand .logo-desktop {
        display: block !important;
    }

    .client-brand .logo-mobile {
        display: none !important;
    }

    .client-main-nav,
    .client-quick-actions {
        justify-self: center !important;
        display: flex !important;
        gap: 14px !important;
        max-width: none !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .client-quick-action,
    .client-nav-pill {
        width: auto !important;
        min-width: 132px !important;
        height: 46px !important;
        padding: 0 22px !important;
        border-radius: 999px !important;
        background: #f1f4f8 !important;
    }

    .client-quick-action span,
    .client-nav-pill .nav-label {
        display: inline !important;
    }

    .client-quick-action.is-active,
    .client-nav-pill.is-active {
        background: var(--primary) !important;
        color: #fff !important;
    }

    .client-userbar {
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    .client-utilities {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
    }
    }

    /* Final desktop header alignment fix */
    @media (min-width: 769px) {
    .client-quick-action,
    .client-nav-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        line-height: 1 !important;
    }

    .client-quick-action iconify-icon,
    .client-nav-pill iconify-icon {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
    }

    .client-quick-action span,
    .client-nav-pill .nav-label {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    .client-notification,
    .client-avatar {
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        aspect-ratio: 1 / 1 !important;
    }
    }

    .loan-repayment-card {
    background: #ecfdf3;
    border-color: #b7e4c7;
    }

    /* Loan active request card - same style as transfer reference card */
    .loan-repayment-card {
    display: grid;
    gap: 14px;
    padding: 26px 24px;
    border: 1px solid #bfe8ce;
    border-radius: 24px;
    background: #ecfdf3;
    box-shadow: 0 18px 40px rgba(15, 118, 75, 0.08);
    }

    .loan-repayment-card h2 {
    margin: 0;
    color: #071626;
    font-size: clamp(24px, 5vw, 34px);
    line-height: 1.05;
    }

    .loan-repayment-card p {
    margin: 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.45;
    }

    .loan-repayment-card p strong {
    color: #071626;
    font-weight: 800;
    }

    .loan-repayment-card .button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    margin-top: 8px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    }

    @media (max-width: 640px) {
    .loan-repayment-card {
        padding: 24px 18px;
        border-radius: 22px;
    }

    .loan-repayment-card .button-primary {
        width: 100%;
    }
    }

    .loan-empty-state-card,
    .loan-current-card {
    display: grid;
    gap: 18px;
    padding: 26px 24px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(115, 31, 113, 0.12);
    box-shadow: 0 18px 40px rgba(23, 33, 43, 0.06);
    }

    .loan-empty-state-card {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    }

    .loan-empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: rgba(115, 31, 113, 0.08);
    color: var(--primary);
    font-size: 26px;
    }

    .loan-empty-state-card h2,
    .loan-current-card h2 {
    margin: 0;
    font-size: clamp(22px, 4vw, 32px);
    line-height: 1.1;
    }

    .loan-current-card {
    background: #ecfdf3;
    border-color: #bfe8ce;
    box-shadow: 0 18px 40px rgba(15, 118, 75, 0.08);
    }

    .loan-current-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    }

    .loan-current-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    }

    .loan-current-grid > div {
    display: grid;
    gap: 5px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    }

    .loan-current-grid span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    }

    .loan-current-grid strong {
    color: #071626;
    font-size: 18px;
    line-height: 1.15;
    }

    .loan-current-progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 118, 75, 0.14);
    }

    .loan-current-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #0f766e;
    }

    .loan-current-proof {
    display: grid;
    gap: 12px;
    }

    .loan-current-proof .button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    border-radius: 14px;
    font-weight: 800;
    }

    @media (max-width: 760px) {
    .loan-empty-state-card {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .loan-current-head {
        flex-direction: column;
    }

    .loan-current-grid {
        grid-template-columns: 1fr;
    }

    .loan-empty-state-card .button-primary,
    .loan-current-proof .button-primary {
        width: 100%;
    }
    }

    .loan-history-section{
        margin-top:32px;
    }

    .loan-history-header{
        display:flex;
        justify-content:space-between;
        align-items:flex-end;
        margin-bottom:20px;
    }

    .loan-history-count{
        background:#F6F1FA;
        color:#682C73;
        font-weight:700;
        border-radius:30px;
        padding:10px 18px;
    }

    .loan-history-list{
        display:flex;
        flex-direction:column;
        gap:18px;
    }

    .loan-history-card{

        background:#fff;

        border:1px solid #ECE6F2;

        border-radius:24px;

        padding:24px;

        box-shadow:0 10px 30px rgba(34,18,61,.05);

    }

    .loan-history-top{

        display:flex;

        align-items:center;

        gap:18px;

        margin-bottom:18px;

    }

    .loan-history-icon{

        width:58px;

        height:58px;

        border-radius:18px;

        display:flex;

        align-items:center;

        justify-content:center;

        background:#F4ECF8;

        color:#682C73;

        font-size:26px;

    }

    .loan-history-main{

        flex:1;

    }

    .loan-history-main strong{

        display:block;

        font-size:20px;

    }

    .loan-history-main small{

        color:#7C8594;

    }

    .loan-history-grid{

        display:grid;

        grid-template-columns:repeat(4,1fr);

        gap:24px;

    }

    .loan-history-grid span{

        display:block;

        color:#7C8594;

        font-size:.8rem;

        margin-bottom:6px;

    }

    .loan-history-grid strong{

        font-size:1rem;

    }

    .loan-progress-bar{

        margin-top:20px;

        height:8px;

        background:#EFE8F4;

        border-radius:20px;

        overflow:hidden;

    }

    .loan-progress-bar span{

        display:block;

        height:100%;

        background:#682C73;

    }

    .status-pill{

        padding:6px 14px;

        border-radius:30px;

        font-size:.82rem;

        font-weight:700;

    }

    .status-success{

        background:#E8F8EE;

        color:#18794E;

    }

    .status-paid{

        background:#EAF8F2;

        color:#0A7A50;

    }

    .status-warning{

        background:#FFF5DD;

        color:#A86900;

    }

    .status-pending{

        background:#EEF2FF;

        color:#4254D0;

    }

    .status-approved{

        background:#E8F7FF;

        color:#1B6CCF;

    }

    .status-danger{

        background:#FFE9E9;

        color:#D63B3B;

    }

    .status-neutral{

        background:#F4F4F4;

        color:#666;

    }

    @media(max-width:768px){

    .loan-history-grid{

    grid-template-columns:1fr 1fr;

    }

    .loan-history-header{

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

    }

    }

    .loan-history-card-clean {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(115, 31, 113, 0.12);
    box-shadow: 0 16px 34px rgba(23, 33, 43, 0.06);
    }

    .loan-history-clean-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: start;
    }

    .loan-history-clean-head h3 {
    margin: 2px 0 4px;
    font-size: clamp(20px, 5vw, 28px);
    line-height: 1.05;
    word-break: break-word;
    }

    .loan-history-clean-head small {
    color: #64748b;
    font-weight: 600;
    }

    .loan-history-clean-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    }

    .loan-history-clean-grid > div {
    padding: 14px;
    border-radius: 16px;
    background: #faf7fb;
    }

    .loan-history-clean-grid span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 6px;
    }

    .loan-history-clean-grid strong {
    color: #071626;
    font-size: 16px;
    line-height: 1.2;
    word-break: break-word;
    }

    @media (max-width: 640px) {
    .loan-history-clean-head {
        grid-template-columns: auto 1fr;
    }

    .loan-history-clean-head .request-status {
        grid-column: 2;
        justify-self: start;
    }

    .loan-history-clean-grid {
        grid-template-columns: 1fr;
    }
    }

    .loan-history-compact-card {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(115, 31, 113, 0.12);
    box-shadow: 0 14px 30px rgba(23, 33, 43, 0.05);
    }

    .loan-history-compact-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(115, 31, 113, 0.08);
    color: var(--primary);
    font-size: 26px;
    }

    .loan-history-compact-main {
    min-width: 0;
    }

    .loan-history-compact-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    }

    .loan-history-compact-top h3 {
    margin: 2px 0 0;
    font-size: 20px;
    line-height: 1.1;
    word-break: break-word;
    }

    .loan-history-compact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    }

    .loan-history-compact-meta span {
    padding: 7px 10px;
    border-radius: 999px;
    background: #faf7fb;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    }

    @media (max-width: 640px) {
    .loan-history-compact-card {
        grid-template-columns: 44px 1fr;
        padding: 16px;
    }

    .loan-history-compact-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 22px;
    }

    .loan-history-compact-top {
        flex-direction: column;
    }

    .loan-history-compact-meta {
        gap: 6px;
    }

    .loan-history-compact-meta span {
        font-size: 11px;
    }
    }

    .upload-input{
        display:none;
    }

    .upload-dropzone{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:10px;

        padding:28px;

        border:2px dashed #d9cce5;
        border-radius:18px;

        background:#fff;

        cursor:pointer;

        transition:.2s;
    }

    .upload-dropzone:hover{
        border-color:var(--primary);
        background:#faf7fd;
    }

    .upload-icon{
        font-size:42px;
        color:var(--primary);
    }

    .upload-filename{
        margin-top:12px;
        font-size:.9rem;
        color:#667085;
    }

    .loan-report-compact {
    padding: 22px;
    border-radius: 24px;
    }

    .loan-report-compact-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
    }

    .loan-confirm-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    }

    .loan-confirm-summary > div {
    padding: 14px;
    border-radius: 16px;
    background: #faf7fb;
    }

    .loan-confirm-summary span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 5px;
    }

    .loan-confirm-summary strong {
    font-size: 16px;
    line-height: 1.2;
    }

    .loan-confirm-summary .is-total {
    grid-column: 1 / -1;
    background: rgba(115, 31, 113, 0.08);
    }

    .loan-confirm-summary .is-total strong {
    color: var(--primary);
    font-size: 22px;
    }

    .loan-report-note.compact {
    margin: 14px 0;
    padding: 12px;
    border-radius: 14px;
    }

    @media (max-width: 640px) {
    .loan-confirm-summary {
        grid-template-columns: 1fr;
    }
    }

    .loan-confirm-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(115, 31, 113, 0.12);
    box-shadow: 0 18px 38px rgba(23, 33, 43, 0.06);
    }

    .loan-confirm-head h2 {
    margin: 4px 0;
    font-size: clamp(24px, 5vw, 34px);
    line-height: 1.05;
    }

    .loan-confirm-guarantor {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(115, 31, 113, 0.055);
    }

    .loan-confirm-guarantor span,
    .loan-confirm-totals span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 5px;
    }

    .loan-confirm-guarantor strong {
    display: block;
    font-size: 18px;
    color: #071626;
    }

    .loan-confirm-guarantor small {
    color: #64748b;
    font-weight: 700;
    }

    .loan-confirm-totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    }

    .loan-confirm-totals > div {
    padding: 14px;
    border-radius: 16px;
    background: #faf7fb;
    }

    .loan-confirm-totals strong {
    display: block;
    font-size: 17px;
    color: #071626;
    line-height: 1.15;
    }

    .loan-confirm-totals .is-total {
    grid-column: 1 / -1;
    background: var(--primary);
    color: #fff;
    }

    .loan-confirm-totals .is-total span,
    .loan-confirm-totals .is-total strong {
    color: #fff;
    }

    .loan-confirm-totals .is-total strong {
    font-size: 26px;
    }

    .loan-confirm-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 16px;
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    }

    .loan-confirm-submit {
    width: 100%;
    min-height: 56px;
    border-radius: 16px;
    }

    @media (max-width: 640px) {
    .loan-confirm-guarantor,
    .loan-confirm-totals {
        grid-template-columns: 1fr;
    }

    .loan-confirm-totals .is-total {
        grid-column: auto;
    }
    }

    .loan-confirm-card-v2 {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(115, 31, 113, 0.12);
    box-shadow: 0 18px 38px rgba(23, 33, 43, 0.06);
    }

    .loan-confirm-v2-head {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 14px;
    align-items: center;
    }

    .loan-confirm-v2-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(115, 31, 113, 0.08);
    color: var(--primary);
    font-size: 28px;
    }

    .loan-confirm-v2-head h2 {
    margin: 2px 0;
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.05;
    }

    .loan-confirm-v2-guarantor {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: #faf7fb;
    }

    .loan-confirm-v2-guarantor span,
    .loan-confirm-v2-grid span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 5px;
    }

    .loan-confirm-v2-guarantor strong,
    .loan-confirm-v2-grid strong {
    display: block;
    color: #071626;
    font-size: 17px;
    line-height: 1.15;
    }

    .loan-confirm-v2-guarantor small {
    color: #64748b;
    font-weight: 700;
    }

    .loan-confirm-v2-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    }

    .loan-confirm-v2-grid > div {
    padding: 14px;
    border-radius: 16px;
    background: #faf7fb;
    }

    .loan-confirm-v2-total {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--primary), #4c174f) !important;
    }

    .loan-confirm-v2-total span,
    .loan-confirm-v2-total strong {
    color: #fff;
    }

    .loan-confirm-v2-total strong {
    font-size: clamp(24px, 5vw, 34px);
    }

    .loan-confirm-v2-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px 14px;
    border-radius: 16px;
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    }

    .loan-confirm-v2-submit {
    width: 100%;
    min-height: 56px;
    border-radius: 16px;
    }

    @media (max-width: 760px) {
    .loan-confirm-card-v2 {
        padding: 18px;
    }

    .loan-confirm-v2-head {
        grid-template-columns: 48px 1fr;
    }

    .loan-confirm-v2-icon {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        font-size: 24px;
    }

    .loan-confirm-v2-guarantor {
        grid-template-columns: 1fr;
    }

    .loan-confirm-v2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loan-confirm-v2-total {
        grid-column: 1 / -1;
    }
    }

    /* Loan confirmation section spacing fix */
    .loan-confirm-card-v2 {
    padding: 26px !important;
    gap: 22px !important;
    }

    .loan-confirm-v2-grid {
    gap: 14px !important;
    }

    .loan-confirm-v2-grid > div,
    .loan-confirm-v2-guarantor {
    padding: 20px !important;
    border-radius: 20px !important;
    }

    .loan-confirm-v2-grid span,
    .loan-confirm-v2-guarantor span {
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
    }

    .loan-confirm-v2-grid strong,
    .loan-confirm-v2-guarantor strong {
    line-height: 1.2 !important;
    }

    .loan-confirm-v2-total {
    padding: 22px !important;
    }

    .loan-confirm-v2-total strong {
    margin-top: 8px !important;
    }

    .loan-confirm-v2-note {
    padding: 18px !important;
    line-height: 1.5 !important;
    }

    .loan-confirm-v2-submit {
    margin-top: 4px !important;
    }

    @media (max-width: 640px) {
    .loan-confirm-card-v2 {
        padding: 22px 18px !important;
    }

    .loan-confirm-v2-grid {
        gap: 12px !important;
    }

    .loan-confirm-v2-grid > div,
    .loan-confirm-v2-guarantor {
        padding: 18px !important;
    }

    .loan-confirm-v2-total {
        padding: 20px !important;
    }
    }

    .investment-v3-page {
    display: grid;
    gap: 28px;
    }

    .investment-current-card {
    display: grid;
    gap: 18px;
    padding: 26px 24px;
    border-radius: 26px;
    background: #ecfdf3;
    border: 1px solid #bfe8ce;
    box-shadow: 0 18px 40px rgba(15, 118, 75, 0.08);
    }

    .investment-manager-summary {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    }

    .investment-manager-summary .ui-icon {
    color: var(--primary);
    font-size: 28px;
    }

    .investment-manager-summary span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    }

    .investment-manager-summary strong {
    display: block;
    color: #071626;
    font-size: 17px;
    }

    .investment-request-card,
    .investment-manager-card {
    display: grid;
    gap: 18px;
    }

    .investment-manager-card {
    padding: 18px;
    border-radius: 20px;
    background: #faf7fb;
    }

    .investment-confirm-card {
    margin-top: 0;
    }

    @media (max-width: 640px) {
    .investment-current-card {
        padding: 24px 18px;
    }
    }

    .investment-guarantee-v3-list {
    display: grid;
    gap: 18px;
    }

    .investment-guarantee-v3-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(115, 31, 113, 0.12);
    box-shadow: 0 18px 38px rgba(23, 33, 43, 0.06);
    }

    .investment-guarantee-v3-head {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    gap: 14px;
    align-items: start;
    }

    .investment-guarantee-v3-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: rgba(115, 31, 113, 0.08);
    color: var(--primary);
    font-size: 26px;
    }

    .investment-guarantee-v3-head h2 {
    margin: 2px 0 4px;
    font-size: clamp(20px, 5vw, 28px);
    line-height: 1.05;
    word-break: break-word;
    }

    .investment-guarantee-v3-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    }

    .investment-guarantee-v3-grid > div {
    padding: 16px;
    border-radius: 18px;
    background: #faf7fb;
    }

    .investment-guarantee-v3-grid span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    }

    .investment-guarantee-v3-grid strong {
    display: block;
    color: #071626;
    font-size: 18px;
    line-height: 1.15;
    }

    .investment-guarantee-v3-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    }

    .investment-guarantee-v3-actions form {
    margin: 0;
    }

    .investment-guarantee-v3-actions button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    border-radius: 16px;
    font-weight: 800;
    }

    .investment-action-decline {
    border: 1px solid rgba(180, 35, 24, 0.22);
    color: #b42318;
    background: #fff;
    }

    .investment-action-decline:hover {
    background: #fff1f0;
    }

    @media (max-width: 760px) {
    .investment-guarantee-v3-card {
        padding: 18px;
    }

    .investment-guarantee-v3-head {
        grid-template-columns: 48px 1fr;
    }

    .investment-guarantee-v3-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    .investment-guarantee-v3-head .request-status {
        grid-column: 2;
        justify-self: start;
    }

    .investment-guarantee-v3-grid {
        grid-template-columns: 1fr 1fr;
    }

    .investment-guarantee-v3-actions {
        grid-template-columns: 1fr;
    }
    }

    /* =====================================================
    INVESTMENT REQUEST (v3)
    ===================================================== */

    .investment-request-card,
    .investment-form-card,
    .investment-page .loan-request-card {
        padding: 2rem;
        border-radius: 28px;
    }

    .investment-request-card > * + *,
    .investment-form-card > * + *,
    .investment-page .loan-request-card > * + * {
        margin-top: 1.5rem;
    }

    /* Information cards */
    .investment-summary-card,
    .investment-manager-card {
        padding: 1.5rem;
        border-radius: 22px;
    }

    /* Gain / Payout / Duration cards */
    .investment-summary-grid {
        gap: 1rem;
    }

    .investment-summary-grid > div {
        padding: 1.35rem;
        border-radius: 18px;
    }

    /* Manager search section */
    .investment-manager-card input,
    .investment-manager-card .search-input {
        margin-top: .85rem;
    }

    .investment-manager-selected {
        margin-top: 1.25rem;
        padding: 1.4rem;
        border-radius: 18px;
    }

    /* Mobile */
    @media (max-width:768px){

        .investment-request-card,
        .investment-form-card,
        .investment-page .loan-request-card{
            padding:1.4rem;
        }

        .investment-summary-card,
        .investment-manager-card{
            padding:1.25rem;
        }

        .investment-summary-grid>div{
            padding:1.15rem;
        }
    }

    /* Investment request compact result cards */
    .investment-result-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    background: #f8fafc !important;
    }

    .investment-result-item {
    min-height: 96px !important;
    padding: 16px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    }

    .investment-result-item span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    }

    .investment-result-item strong {
    color: var(--primary);
    font-size: clamp(22px, 5vw, 28px);
    line-height: 1.1;
    }

    .investment-result-item:nth-child(3) {
    grid-column: 1 / -1;
    min-height: 86px !important;
    }

    .investment-guarantee-detail-page {
    display: grid;
    gap: 28px;
    }

    .investment-guarantee-detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    }

    .investment-guarantee-detail-actions form {
    margin: 0;
    }

    .investment-guarantee-detail-actions button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    border-radius: 16px;
    font-weight: 800;
    }

    @media (max-width: 640px) {
    .investment-guarantee-detail-actions {
        grid-template-columns: 1fr;
    }
    }

    .admin-assets-v3-page {
    display: grid;
    gap: 28px;
    }

    .admin-asset-form-card,
    .asset-v3-card {
    display: grid;
    gap: 20px;
    padding: 24px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(115, 31, 113, 0.12);
    box-shadow: 0 18px 38px rgba(23, 33, 43, 0.06);
    }

    .asset-v3-section-head,
    .asset-v3-card-head {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    gap: 14px;
    align-items: start;
    }

    .asset-v3-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(115, 31, 113, 0.08);
    color: var(--primary);
    font-size: 28px;
    }

    .asset-v3-section-head h2,
    .asset-v3-card-head h3 {
    margin: 2px 0 4px;
    color: #071626;
    font-size: clamp(22px, 4vw, 32px);
    line-height: 1.08;
    }

    .asset-v3-card-head small {
    color: #64748b;
    font-weight: 700;
    }

    .asset-v3-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    }

    .asset-v3-check {
    padding: 16px;
    border-radius: 18px;
    background: #faf7fb;
    }

    .asset-v3-submit,
    .asset-v3-allocate-form button,
    .asset-v3-review-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    border-radius: 16px;
    font-weight: 800;
    }

    .asset-v3-list-section,
    .asset-v3-list {
    display: grid;
    gap: 18px;
    }

    .asset-v3-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    }

    .asset-v3-meta-grid > div {
    padding: 16px;
    border-radius: 18px;
    background: #faf7fb;
    }

    .asset-v3-meta-grid span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    }

    .asset-v3-meta-grid strong {
    display: block;
    color: #071626;
    font-size: 17px;
    line-height: 1.2;
    }

    .asset-v3-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    }

    .asset-v3-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    background: #faf7fb;
    color: var(--primary);
    font-weight: 800;
    }

    .asset-v3-allocate-form {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    background: #f8fafc;
    }

    .asset-v3-review-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    }

    .asset-v3-review-actions form {
    display: grid;
    gap: 10px;
    margin: 0;
    }

    .asset-v3-reject {
    border: 1px solid rgba(180, 35, 24, 0.22);
    color: #b42318;
    background: #fff;
    }

    .asset-v3-reject:hover {
    background: #fff1f0;
    }

    @media (max-width: 760px) {
    .admin-asset-form-card,
    .asset-v3-card {
        padding: 18px;
    }

    .asset-v3-section-head,
    .asset-v3-card-head {
        grid-template-columns: 48px 1fr;
    }

    .asset-v3-card-head .request-status {
        grid-column: 2;
        justify-self: start;
    }

    .asset-v3-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        font-size: 24px;
    }

    .asset-v3-upload-grid,
    .asset-v3-meta-grid,
    .asset-v3-review-actions {
        grid-template-columns: 1fr;
    }
    }

    .asset-v3-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    }

    .asset-v3-action-bar form {
    margin: 0;
    }

    .asset-v3-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(115, 31, 113, 0.14);
    border-radius: 999px;
    background: #fff;
    color: var(--primary);
    font-weight: 800;
    cursor: pointer;
    }

    .asset-v3-action-btn.is-danger {
    border-color: rgba(180, 35, 24, 0.22);
    color: #b42318;
    }

    .asset-v3-action-btn:hover {
    background: #faf7fb;
    }

    .asset-v3-action-btn.is-danger:hover {
    background: #fff1f0;
    }

    /* =====================================================
    ASSET REGISTER SECTION
    ===================================================== */

    .asset-v3-list-section{
        margin-top:56px;
        padding-top:8px;
    }

    .asset-v3-list-section .loan-history-header{
        margin-bottom:28px;
    }

    .asset-v3-list-section .loan-history-header h2{
        margin:10px 0 8px;
    }

    .asset-v3-list-section .loan-history-header .muted{
        margin:0;
        max-width:620px;
    }

    .asset-v3-list{
        display:grid;
        gap:24px;
    }

    .section-actions{
        margin-top:32px;
        margin-bottom:56px;
        padding-bottom:8px;
        border-bottom:1px solid var(--border-color,#ece7f3);
    }

    .project-v3-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    }

    .project-v3-actions form {
    margin: 0;
    }

    .project-v3-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(115, 31, 113, 0.14);
    background: #fff;
    color: var(--primary);
    font-weight: 800;
    cursor: pointer;
    }

    .project-v3-action-btn.is-danger {
    border-color: rgba(180, 35, 24, 0.22);
    color: #b42318;
    }

    .project-v3-action-btn:hover {
    background: #faf7fb;
    }

    .admin-projects-v3-page {
    display: grid;
    gap: 28px;
    }

    .project-v3-form-card,
    .project-v3-card {
    display: grid;
    gap: 20px;
    padding: 24px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(115, 31, 113, 0.12);
    box-shadow: 0 18px 38px rgba(23, 33, 43, 0.06);
    }

    .project-v3-form-head,
    .project-v3-card-main {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 14px;
    align-items: start;
    }

    .project-v3-form-icon,
    .project-v3-card-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(115, 31, 113, 0.08);
    color: var(--primary);
    font-size: 28px;
    }

    .project-v3-form-head h2,
    .project-v3-card h3 {
    margin: 2px 0 4px;
    color: #071626;
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.08;
    }

    .project-v3-manager-box {
    display: grid;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    background: #faf7fb;
    }

    .project-v3-manager-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    }

    .project-v3-manager-option {
    display: grid;
    grid-template-columns: 48px 1fr 28px;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(115, 31, 113, 0.1);
    cursor: pointer;
    }

    .project-v3-manager-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    }

    .project-v3-manager-avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(115, 31, 113, 0.08);
    color: var(--primary);
    font-weight: 900;
    }

    .project-v3-manager-option strong,
    .project-v3-manager-option small {
    display: block;
    }

    .project-v3-manager-option small {
    color: #64748b;
    font-weight: 700;
    }

    .project-v3-manager-option i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #f1e8f4;
    color: var(--primary);
    opacity: 0;
    }

    .project-v3-manager-option:has(input:checked) {
    border-color: rgba(115, 31, 113, 0.35);
    background: rgba(115, 31, 113, 0.06);
    }

    .project-v3-manager-option:has(input:checked) i {
    opacity: 1;
    }

    .project-v3-form-actions,
    .project-v3-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    }

    .project-v3-form-actions {
    margin-top: 8px;
    }

    .project-v3-records-section,
    .project-v3-list {
    display: grid;
    gap: 20px;
    }

    .project-v3-records-section {
    margin-top: 18px;
    }

    .project-v3-card {
    position: relative;
    }

    .project-v3-select {
    position: absolute;
    top: 18px;
    right: 18px;
    }

    .project-v3-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    }

    .project-v3-meta-grid > div {
    padding: 16px;
    border-radius: 18px;
    background: #faf7fb;
    }

    .project-v3-meta-grid span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    }

    .project-v3-meta-grid strong {
    display: block;
    color: #071626;
    font-size: 17px;
    line-height: 1.2;
    }

    .project-v3-actions form {
    margin: 0;
    }

    .project-v3-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(115, 31, 113, 0.14);
    background: #fff;
    color: var(--primary);
    font-weight: 800;
    cursor: pointer;
    }

    .project-v3-action-btn.is-danger {
    border-color: rgba(180, 35, 24, 0.22);
    color: #b42318;
    }

    .project-v3-action-btn:hover {
    background: #faf7fb;
    }

    @media (max-width: 760px) {
    .project-v3-form-card,
    .project-v3-card {
        padding: 18px;
    }

    .project-v3-form-head,
    .project-v3-card-main {
        grid-template-columns: 48px 1fr;
    }

    .project-v3-form-icon,
    .project-v3-card-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        font-size: 24px;
    }

    .project-v3-manager-grid,
    .project-v3-meta-grid {
        grid-template-columns: 1fr;
    }

    .project-v3-select {
        position: static;
    }
    }

    .project-v3-select {
        position: absolute;
        top: 22px;
        right: 22px;
        width: 22px;
        height: 22px;
    }

    .project-v3-select input {
        width: 22px;
        height: 22px;
        cursor: pointer;
    }

    @media (max-width: 760px) {
        .project-v3-card {
            position: relative;
            padding-top: 24px;
        }

        .project-v3-select {
            top: 24px;
            right: 24px;
        }
    }

    .project-v3-inline-form {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        align-items: end;
        padding: 16px;
        margin: 18px 0;
        border-radius: 20px;
        background: #faf7fb;
    }

    .project-v3-inline-form button {
        min-height: 54px;
        white-space: nowrap;
    }

    @media (max-width: 760px) {
        .project-v3-inline-form {
            grid-template-columns: 1fr;
        }
    }

    .project-v3-person-card {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-radius: 22px;
    background: #f8fafc;
    }

    .project-v3-person-card form {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(115,31,113,.1);
    }

    .project-v3-remove-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(180,35,24,.18);
    background: #fff;
    color: #b42318;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    }

    .project-v3-remove-btn:hover {
    background: #fff1f0;
    }

    @media (max-width: 760px) {
    .project-v3-person-card {
        grid-template-columns: 48px 1fr;
    }

    .project-v3-person-card .request-status {
        grid-column: 2;
        justify-self: start;
    }
    }

    .manager-search-results{
        margin-top:12px;
        border:1px solid #ebe5f1;
        border-radius:16px;
        overflow:hidden;
        background:#fff;
        max-height:260px;
        overflow-y:auto;
    }

    .manager-search-item{
        padding:14px 18px;
        cursor:pointer;
        transition:.2s;
    }

    .manager-search-item:hover{
        background:#f7f4fb;
    }

    .manager-search-results {
        margin-top: 14px;
        display: grid;
        gap: 12px;
        background: transparent;
        border: 0;
        max-height: 320px;
        overflow-y: auto;
    }

    .manager-search-item {
        width: 100%;
        display: grid;
        grid-template-columns: 52px 1fr auto;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        border: 1px solid rgba(115, 31, 113, .12);
        border-radius: 18px;
        background: #fff;
        color: #071626;
        text-align: left;
        cursor: pointer;
    }

    .manager-search-item::before {
        content: "M";
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        border-radius: 16px;
        background: rgba(115, 31, 113, .08);
        color: var(--primary);
        font-weight: 900;
    }

    .manager-search-item::after {
        content: "Select";
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(115, 31, 113, .08);
        color: var(--primary);
        font-size: 13px;
        font-weight: 900;
    }

    .manager-search-item strong {
        display: block;
        font-size: 16px;
        line-height: 1.2;
    }

    .manager-search-item small {
        display: block;
        margin-top: 4px;
        color: #64748b;
        font-weight: 700;
    }

    .manager-search-item:hover {
        border-color: rgba(115, 31, 113, .32);
        background: #faf7fb;
    }

    .manager-search-item{
        display:grid;
        grid-template-columns:60px 1fr auto;
        align-items:center;
        gap:18px;
    }

    .manager-result-avatar{
        width:56px;
        height:56px;
        border-radius:16px;
        background:#f5eff8;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:22px;
        font-weight:800;
        color:var(--primary);
    }

    .manager-result-info strong{
        display:block;
        font-size:18px;
        font-weight:700;
    }

    .manager-result-info small{
        display:block;
        color:#64748b;
        margin-top:4px;
    }

    .manager-select-btn{
        width:42px;
        height:42px;
        border:none;
        border-radius:50%;
        background:rgba(115,31,113,.08);
        color:var(--primary);
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        transition:.2s;
    }

    .manager-select-btn iconify-icon{
        font-size:22px;
    }

    .manager-select-btn:hover{
        background:var(--primary);
        color:#fff;
        transform:scale(1.08);
    }

    .umoja-picker {
        display: grid;
        gap: 12px;
    }

    .umoja-picker-label span {
        display: block;
        margin-bottom: 8px;
        font-weight: 800;
    }

    .umoja-picker-input {
        width: 100%;
    }

    .umoja-picker-results {
        display: grid;
        gap: 6px;
        padding: 8px;
        border: 1px solid #ebe5f1;
        border-radius: 18px;
        background: #fff;
    }

    .umoja-picker-result {
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 12px;
        align-items: center;
        padding: 12px;
        border: 0;
        border-radius: 14px;
        background: #fff;
        text-align: left;
        cursor: pointer;
    }

    .umoja-picker-result:hover {
        background: #faf7fb;
    }

    .umoja-picker-result-avatar,
    .umoja-picker-avatar {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: rgba(115,31,113,.08);
        color: var(--primary);
        font-weight: 900;
    }

    .umoja-picker-result strong,
    .umoja-picker-result small {
        display: block;
    }

    .umoja-picker-result small,
    .umoja-picker-selected-meta {
        color: #64748b;
        font-weight: 700;
    }

    .umoja-picker-selected {
        display: grid;
        grid-template-columns: 44px 1fr auto;
        gap: 12px;
        align-items: center;
        padding: 14px;
        border-radius: 18px;
        background: #faf7fb;
    }

    .umoja-picker-clear {
        border: 0;
        border-radius: 999px;
        padding: 10px 16px;
        background: #fff;
        color: var(--primary);
        font-weight: 800;
        cursor: pointer;
    }

    .umoja-picker-empty {
        padding: 14px;
        color: #64748b;
        font-weight: 700;
    }

    .investment-v3-reject-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.investment-v3-reject-form input {
    min-width: 220px;
}

.project-v3-action-btn.is-approve {
    border-color: rgba(16, 185, 129, .22);
    color: #087443;
}

/* =========================================================
   UMOJA V3 — ADMIN INVESTMENT SUMMARY
   ========================================================= */

.investment-v3-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 24px 0;
}

.investment-v3-summary-card {
    display: grid;
    align-content: space-between;
    gap: 28px;
    min-width: 0;
    min-height: 150px;
    padding: 22px 24px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.investment-v3-summary-label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #667085;
    font-size: 14px;
    font-weight: 700;
}

.investment-v3-summary-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    background: rgba(var(--primary-rgb), 0.07);
    color: var(--primary);
    font-size: 18px;
}

.investment-v3-summary-card > strong {
    min-width: 0;
    color: var(--primary-dark);
    font-size: clamp(26px, 2.25vw, 38px);
    font-weight: 800;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.investment-v3-summary-card.is-success .investment-v3-summary-icon {
    background: #ecfdf3;
    color: #087443;
}

.investment-v3-summary-card.is-success > strong {
    color: #087443;
}

.investment-v3-summary-card.is-warning .investment-v3-summary-icon {
    background: #fff8e7;
    color: #9a6700;
}

.investment-v3-summary-card.is-average {
    grid-column: span 1;
}

.investment-v3-filter-card {
    margin-top: 6px;
}

.investment-v3-filter-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: end;
    gap: 14px;
}

.investment-v3-filter-form .button-primary {
    min-width: 180px;
    padding: 0 24px;
}

/* Wide desktop: balance the seven cards cleanly */
@media (min-width: 1280px) {
    .investment-v3-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .investment-v3-summary-card {
        min-height: 145px;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .investment-v3-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 640px) {
    .investment-v3-summary-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin: 18px 0;
    }

    .investment-v3-summary-card {
        min-height: 118px;
        gap: 20px;
        padding: 18px;
        border-radius: 18px;
    }

    .investment-v3-summary-card > strong {
        font-size: 27px;
    }

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

    .investment-v3-filter-form .button-primary {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   UMOJA V3 — ADMIN INVESTMENTS
   ========================================================= */

.investment-v3-page {
    display: grid;
    gap: 26px;
}

.investment-v3-hero {
    align-items: center;
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.investment-v3-hero h1 {
    font-size: clamp(28px, 3vw, 42px);
}

.investment-v3-hero p:not(.eyebrow) {
    max-width: 760px;
}

.investment-v3-hero .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 14px;
    background: #ffffff;
}

.investment-v3-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.investment-v3-summary-card {
    display: grid;
    align-content: space-between;
    gap: 28px;
    min-width: 0;
    min-height: 148px;
    padding: 22px 24px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.investment-v3-summary-label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #667085;
    font-size: 14px;
    font-weight: 700;
}

.investment-v3-summary-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 11px;
    background: rgba(var(--primary-rgb), 0.07);
    color: var(--primary);
    font-size: 19px;
}

.investment-v3-summary-card > strong {
    min-width: 0;
    color: var(--primary-dark);
    font-size: clamp(26px, 2.15vw, 38px);
    font-weight: 800;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.investment-v3-summary-card.is-success .investment-v3-summary-icon {
    background: #ecfdf3;
    color: #087443;
}

.investment-v3-summary-card.is-success > strong {
    color: #087443;
}

.investment-v3-summary-card.is-warning .investment-v3-summary-icon {
    background: #fff8e7;
    color: #9a6700;
}

.investment-v3-summary-card.is-gain .investment-v3-summary-icon {
    background: #eef8ff;
    color: #175cd3;
}

.investment-v3-summary-card.is-payout .investment-v3-summary-icon {
    background: #f4f0ff;
    color: #6941c6;
}

.investment-v3-summary-card.is-average .investment-v3-summary-icon {
    background: #f2f4f7;
    color: #475467;
}

.investment-v3-filter-card {
    margin: 0;
    padding: 20px;
    border-radius: 22px;
}

.investment-v3-filter-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    align-items: end;
    gap: 14px;
}

.investment-v3-filter-form .button-primary,
.investment-v3-clear-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 12px;
    white-space: nowrap;
}

.investment-v3-clear-filter {
    border: 1px solid rgba(var(--primary-rgb), 0.16);
    background: #ffffff;
}

.investment-v3-records {
    display: grid;
    gap: 18px;
}

.investment-v3-toolbar {
    margin: 0;
}

.investment-v3-export-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.investment-v3-export-actions .button-primary,
.investment-v3-export-actions .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
}

.investment-v3-list {
    display: grid;
    gap: 18px;
}

.investment-v3-card {
    position: relative;
    display: grid;
    gap: 20px;
}

.investment-v3-meta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.investment-v3-meta-grid > div {
    min-height: 108px;
}

.investment-v3-meta-grid small {
    display: block;
    margin-top: 5px;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.investment-v3-actions form {
    margin: 0;
}

.investment-v3-reject-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.investment-v3-reject-form input {
    width: min(320px, 100%);
    min-height: 44px;
}

.project-v3-action-btn.is-approve {
    border-color: rgba(8, 116, 67, 0.2);
    background: #ffffff;
    color: #087443;
}

.project-v3-action-btn.is-approve:hover {
    background: #ecfdf3;
}

@media (min-width: 1280px) {
    .investment-v3-summary-card.is-payout,
    .investment-v3-summary-card.is-average {
        grid-column: span 1;
    }
}

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

    .investment-v3-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .investment-v3-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .investment-v3-filter-form .button-primary,
    .investment-v3-clear-filter {
        width: 100%;
    }

    .investment-v3-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .investment-v3-export-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .investment-v3-page {
        gap: 20px;
    }

    .investment-v3-hero {
        align-items: stretch;
        padding: 22px 18px;
        border-radius: 22px;
    }

    .investment-v3-hero .admin-head-actions {
        justify-content: flex-start;
    }

    .investment-v3-summary-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .investment-v3-summary-card {
        min-height: 118px;
        gap: 20px;
        padding: 18px;
        border-radius: 18px;
    }

    .investment-v3-summary-card > strong {
        font-size: 27px;
    }

    .investment-v3-meta-grid {
        grid-template-columns: 1fr;
    }

    .investment-v3-meta-grid > div {
        min-height: auto;
    }

    .investment-v3-export-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .investment-v3-export-actions .button-primary,
    .investment-v3-export-actions .button-secondary {
        width: 100%;
    }

    .investment-v3-reject-form {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .investment-v3-reject-form input,
    .investment-v3-reject-form button {
        width: 100%;
    }
}
/* ========================================================================== 
   UMOJA DESIGN SYSTEM V3.1 — CROSS-ROLE STANDARDIZATION LAYER
   Applied to Admin, Member, Client and Agent portals.
   ========================================================================== */

:root {
    --umoja-page-max: 1480px;
    --umoja-content-pad: clamp(16px, 2.2vw, 32px);
    --umoja-section-gap: clamp(18px, 2vw, 28px);
    --umoja-card-radius: 24px;
    --umoja-control-radius: 14px;
    --umoja-pill-radius: 999px;
    --umoja-card-border: rgba(var(--primary-rgb), .10);
    --umoja-soft: #f8f6fa;
    --umoja-soft-2: #f3eff6;
    --umoja-text: #101828;
    --umoja-muted: #667085;
    --umoja-success: #087443;
    --umoja-warning: #9a6700;
    --umoja-danger: #b42318;
    --umoja-shadow: 0 16px 44px rgba(16, 24, 40, .07);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.portal-page {
    min-height: 100vh;
    margin: 0;
    color: var(--umoja-text);
    background:
        radial-gradient(circle at top left, rgba(var(--primary-rgb), .065), transparent 360px),
        #f7f6fa;
}

body.portal-page :where(h1, h2, h3, p) { margin-top: 0; }
body.portal-page :where(img, svg) { max-width: 100%; }
body.portal-page :where(button, input, select, textarea) { font: inherit; }

/* Shared content shells */
.portal-main,
.dashboard-shell,
.admin-content {
    min-width: 0;
}

.portal-page:not(.admin-page) .portal-main {
    width: min(calc(100% - (var(--umoja-content-pad) * 2)), var(--umoja-page-max));
    margin-inline: auto;
    padding-block: var(--umoja-section-gap) 42px;
}

.portal-page:not(.admin-page) .portal-main > :where(section, article, div):first-child {
    min-width: 0;
}

.admin-page .admin-content {
    padding: var(--umoja-content-pad);
}

/* Shared portal header */
.portal-header.client-header {
    position: sticky;
    top: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: minmax(92px, 180px) minmax(260px, 1fr) auto;
    align-items: center;
    gap: 18px;
    width: 100%;
    min-height: 78px;
    padding: 10px max(16px, calc((100vw - var(--umoja-page-max)) / 2));
    border-bottom: 1px solid rgba(var(--primary-rgb), .09);
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 28px rgba(16,24,40,.055);
    backdrop-filter: blur(18px);
}

.portal-brand.client-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.portal-brand .nav-logo { width: 118px; height: 46px; object-fit: contain; }
.portal-brand .logo-mobile { display: none; }

.portal-nav.client-quick-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.portal-nav .client-quick-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 88px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: #667085;
    font-weight: 800;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}

.portal-nav .client-quick-action:hover {
    border-color: rgba(var(--primary-rgb), .12);
    background: rgba(var(--primary-rgb), .055);
    color: var(--primary-dark);
    transform: translateY(-1px);
}

.portal-nav .client-quick-action.is-active {
    border-color: rgba(var(--primary-rgb), .16);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 12px 26px rgba(var(--primary-rgb), .19);
}

.portal-nav .client-quick-action .ui-icon { font-size: 21px; }

.portal-userbar.client-userbar,
.portal-userbar .client-utilities {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.client-notification,
.client-avatar,
.account-mode-switch-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
}

.client-notification {
    position: relative;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(var(--primary-rgb), .14);
    background: #fff;
    color: var(--primary-dark);
    text-decoration: none;
}

.client-notification > span {
    position: absolute;
    top: -5px;
    right: -4px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.client-avatar {
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    padding: 0;
    border: 2px solid rgba(var(--primary-rgb), .15);
    background: #fff;
    cursor: pointer;
}

.client-avatar :where(img, .header-avatar, .header-avatar img) {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.client-menu-panel {
    top: calc(100% + 10px);
    right: 0;
    width: min(310px, calc(100vw - 24px));
    padding: 10px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(16,24,40,.16);
}

.client-menu-panel[hidden] { display: none !important; }
.client-menu-head { padding: 12px 14px 14px; border-bottom: 1px solid #eee8f1; }
.client-menu-head strong, .client-menu-head span { display: block; }
.client-menu-head span { margin-top: 4px; color: var(--umoja-muted); font-size: 13px; }
.client-menu-item { min-height: 44px; border-radius: 12px; }

.portal-footer.client-footer {
    width: min(calc(100% - (var(--umoja-content-pad) * 2)), var(--umoja-page-max));
    margin: 0 auto 18px;
    padding: 18px 22px;
    border-radius: 18px;
    background: #201f21;
    color: rgba(255,255,255,.82);
    text-align: center;
}

.portal-footer p { margin: 0; }

/* Shared page rhythm */
.ds-page,
.finance-page,
.admin-requests,
.loan-page,
.investment-page,
.membership-page,
.project-admin-page,
.asset-admin-page {
    display: grid;
    gap: var(--umoja-section-gap);
    min-width: 0;
}

.admin-overview-head,
.membership-head,
.ds-page-hero,
.project-detail-hero,
.investment-v3-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-width: 0;
    padding: clamp(22px, 3vw, 38px);
    border: 1px solid var(--umoja-card-border);
    border-radius: 28px;
    background: #fff;
    box-shadow: var(--umoja-shadow);
}

:where(.admin-overview-head, .membership-head, .ds-page-hero, .project-detail-hero, .investment-v3-hero) h1 {
    margin-bottom: 6px;
    color: var(--umoja-text);
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

:where(.admin-overview-head, .membership-head, .ds-page-hero, .project-detail-hero, .investment-v3-hero) p:not(.eyebrow) {
    max-width: 780px;
    margin-bottom: 0;
    color: var(--umoja-muted);
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.55;
}

.eyebrow {
    margin-bottom: 8px;
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.muted { color: var(--umoja-muted); }

/* Shared cards */
.request-card,
.ds-card,
.project-v3-card,
.loan-history-card,
.investment-record-card,
.asset-record-card,
.project-detail-panel {
    min-width: 0;
    border: 1px solid var(--umoja-card-border);
    border-radius: var(--umoja-card-radius);
    background: #fff;
    box-shadow: var(--umoja-shadow);
}

.request-card,
.ds-card,
.project-detail-panel { padding: clamp(18px, 2.2vw, 28px); }

.request-list,
.loan-history-list,
.project-v3-list,
.investment-card-list,
.project-mini-list {
    display: grid;
    gap: 16px;
    min-width: 0;
}

/* Shared stats */
.project-summary-grid,
.loan-dashboard-summary,
.ds-stat-grid,
.investment-v3-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    min-width: 0;
}

.project-summary-card,
.request-card.ds-stat-card,
.ds-stat-card,
.loan-dashboard-summary > article,
.investment-v3-summary-card {
    display: grid;
    align-content: space-between;
    gap: 24px;
    min-width: 0;
    min-height: 138px;
    padding: 20px 22px;
    border: 1px solid var(--umoja-card-border);
    border-radius: 21px;
    background: #fff;
    box-shadow: var(--umoja-shadow);
}

:where(.project-summary-card, .ds-stat-card, .loan-dashboard-summary > article, .investment-v3-summary-card) > span,
.investment-v3-summary-label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--umoja-muted);
    font-size: 13px;
    font-weight: 800;
}

:where(.project-summary-card, .ds-stat-card, .loan-dashboard-summary > article, .investment-v3-summary-card) > strong {
    min-width: 0;
    color: var(--primary-dark);
    font-size: clamp(25px, 2.1vw, 36px);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

/* Shared forms */
.form-stack { display: grid; gap: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }

:where(.form-stack, .form-grid, .loan-filter-form, .project-filter-form, .investment-filter-form) label {
    display: grid;
    gap: 8px;
    min-width: 0;
}

:where(.form-stack, .form-grid, .loan-filter-form, .project-filter-form, .investment-filter-form) label > span {
    color: var(--umoja-text);
    font-size: 13px;
    font-weight: 800;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 12px 15px;
    border: 1px solid #dfe3ea;
    border-radius: var(--umoja-control-radius);
    background: #fff;
    color: var(--umoja-text);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

textarea { min-height: 112px; resize: vertical; }

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: rgba(var(--primary-rgb), .48);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .10);
}

/* Shared buttons */
.button-primary,
.button-secondary,
.request-action,
.request-reject,
.project-v3-action-btn,
.investment-action-btn,
.loan-icon-action,
.loan-icon-btn {
    min-height: 44px;
    border-radius: 13px;
    font-weight: 850;
}

.button-primary {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
}

.button-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.button-secondary {
    border: 1px solid rgba(var(--primary-rgb), .16);
    background: #fff;
    color: var(--primary-dark);
}

.button-secondary:hover { background: rgba(var(--primary-rgb), .055); }

.project-v3-actions,
.request-actions,
.loan-step-actions,
.investment-guarantee-actions,
.ds-action-bar,
.admin-head-actions,
.project-export-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Statuses */
.request-status,
.ds-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}

.request-status:is(.is-active,.is-approved,.is-paid,.is-completed,.is-accepted,.is-verified) {
    background: #ecfdf3;
    color: var(--umoja-success);
}
.request-status:is(.is-pending,.is-pending-review,.is-awaiting-verification,.is-awaiting-payment-verification,.is-pending-guarantor-consent) {
    background: #fff8e7;
    color: var(--umoja-warning);
}
.request-status:is(.is-rejected,.is-cancelled,.is-defaulted,.is-payment-rejected,.is-late) {
    background: #fff1f0;
    color: var(--umoja-danger);
}

/* Tables */
.ds-table-wrap,
.table-responsive,
.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--umoja-card-border);
    border-radius: 20px;
    background: #fff;
}

:where(.ds-table, .admin-table, table.data-table) {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

:where(.ds-table, .admin-table, table.data-table) th,
:where(.ds-table, .admin-table, table.data-table) td {
    padding: 14px 16px;
    border-bottom: 1px solid #edf0f4;
    text-align: left;
    vertical-align: middle;
}

:where(.ds-table, .admin-table, table.data-table) th {
    background: #faf9fb;
    color: var(--umoja-muted);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Empty states */
.request-empty,
.ds-empty {
    display: grid;
    gap: 7px;
    min-height: 120px;
    align-content: center;
    padding: 22px 26px;
    border: 1px dashed rgba(var(--primary-rgb), .18);
    border-radius: 20px;
    background: rgba(255,255,255,.78);
}
.request-empty strong, .ds-empty strong { color: var(--umoja-text); }
.request-empty span, .ds-empty span { color: var(--umoja-muted); }

/* Shared picker */
.umoja-picker { position: relative; display: grid; gap: 10px; }
.umoja-picker-results {
    position: absolute;
    z-index: 80;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: grid;
    max-height: 300px;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid var(--umoja-card-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(16,24,40,.17);
}
.umoja-picker-results[hidden] { display: none !important; }
.umoja-picker-result {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--umoja-text);
    text-align: left;
    cursor: pointer;
}
.umoja-picker-result:hover { background: var(--umoja-soft); }
.umoja-picker-result-avatar,
.umoja-picker-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(var(--primary-rgb), .08);
    color: var(--primary-dark);
    font-weight: 900;
}
.umoja-picker-result strong,
.umoja-picker-result small { display: block; }
.umoja-picker-result small,
.umoja-picker-selected-meta { margin-top: 3px; color: var(--umoja-muted); font-size: 12px; }
.umoja-picker-selected {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--umoja-card-border);
    border-radius: 16px;
    background: var(--umoja-soft);
}
.umoja-picker-selected[hidden] { display: none !important; }
.umoja-picker-clear {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 999px;
    background: #fff;
    color: var(--primary-dark);
    font-weight: 800;
    cursor: pointer;
}

/* Desktop record cards */
.project-v3-meta-grid,
.investment-v3-meta-grid,
.loan-history-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

:where(.project-v3-meta-grid, .investment-v3-meta-grid, .loan-history-metrics) > div {
    min-width: 0;
    padding: 16px;
    border-radius: 18px;
    background: var(--umoja-soft);
}

:where(.project-v3-meta-grid, .investment-v3-meta-grid, .loan-history-metrics) span {
    display: block;
    margin-bottom: 6px;
    color: var(--umoja-muted);
    font-size: 12px;
    font-weight: 800;
}

:where(.project-v3-meta-grid, .investment-v3-meta-grid, .loan-history-metrics) strong {
    display: block;
    min-width: 0;
    color: var(--umoja-text);
    font-size: 16px;
    overflow-wrap: anywhere;
}

/* Responsive rules */
@media (max-width: 1180px) {
    .project-summary-grid,
    .loan-dashboard-summary,
    .ds-stat-grid,
    .investment-v3-summary-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }

    .project-v3-meta-grid,
    .investment-v3-meta-grid,
    .loan-history-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px) {
    .portal-header.client-header {
        grid-template-columns: 76px minmax(0,1fr) auto;
        gap: 8px;
        min-height: 68px;
        padding: 7px 10px;
    }

    .portal-brand .logo-desktop { display: none; }
    .portal-brand .logo-mobile { display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: contain; }

    .portal-nav.client-quick-actions { gap: 4px; }
    .portal-nav .client-quick-action { min-width: 46px; width: 46px; height: 48px; padding: 0; border-radius: 14px; }
    .portal-nav .client-quick-action span { display: none; }

    .admin-overview-head,
    .membership-head,
    .ds-page-hero,
    .project-detail-hero,
    .investment-v3-hero { align-items: flex-start; flex-direction: column; }

    .project-summary-grid,
    .loan-dashboard-summary,
    .ds-stat-grid,
    .investment-v3-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
    :root { --umoja-content-pad: 14px; --umoja-section-gap: 18px; }

    .client-notification,
    .client-avatar,
    .account-mode-switch-button { width: 38px; height: 38px; min-width: 38px; }

    .portal-userbar.client-userbar,
    .portal-userbar .client-utilities { gap: 4px; }

    .portal-footer.client-footer { padding: 15px; border-radius: 14px; font-size: 12px; }

    .admin-overview-head,
    .membership-head,
    .ds-page-hero,
    .project-detail-hero,
    .investment-v3-hero { padding: 20px 18px; border-radius: 22px; }

    :where(.admin-overview-head, .membership-head, .ds-page-hero, .project-detail-hero, .investment-v3-hero) h1 {
        font-size: clamp(27px, 8vw, 34px);
    }

    .project-summary-grid,
    .loan-dashboard-summary,
    .ds-stat-grid,
    .investment-v3-summary-grid,
    .form-grid,
    .project-v3-meta-grid,
    .investment-v3-meta-grid,
    .loan-history-metrics { grid-template-columns: 1fr; }

    .project-summary-card,
    .ds-stat-card,
    .loan-dashboard-summary > article,
    .investment-v3-summary-card { min-height: 112px; padding: 18px; }

    .project-v3-actions,
    .request-actions,
    .loan-step-actions,
    .investment-guarantee-actions,
    .admin-head-actions,
    .project-export-actions { align-items: stretch; }

    .project-v3-actions > *,
    .request-actions > *,
    .loan-step-actions > *,
    .investment-guarantee-actions > * { flex: 1 1 100%; }

    .project-v3-actions :where(a, button),
    .request-actions :where(a, button),
    .loan-step-actions :where(a, button) { width: 100%; justify-content: center; }

    .umoja-picker-selected { grid-template-columns: 42px 1fr; }
    .umoja-picker-clear { grid-column: 1 / -1; width: 100%; }
}


/* =========================================================
   USD-FIRST TRANSFER CALCULATION
   ========================================================= */

.transfer-usd-input-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
    gap: 18px;
    margin-top: 20px;
}

.transfer-usd-input-grid label {
    display: grid;
    align-content: start;
    gap: 9px;
}

.transfer-usd-input-grid label > span {
    color: #111827;
    font-weight: 800;
}

.transfer-usd-input-grid label > small {
    color: #667085;
    font-size: 13px;
    line-height: 1.45;
}

.transfer-currency-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-height: 58px;
    overflow: hidden;
    border: 1px solid #d9dfe8;
    border-radius: 16px;
    background: #fff;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.transfer-currency-control:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.09);
}

.transfer-currency-control.is-readonly {
    background: #f8fafc;
}

.transfer-currency-prefix {
    display: grid;
    place-items: center;
    min-width: 54px;
    align-self: stretch;
    background: rgba(var(--primary-rgb), 0.07);
    color: var(--primary);
    font-size: 18px;
    font-weight: 900;
}

.transfer-currency-control input {
    width: 100%;
    min-width: 0;
    height: 56px;
    padding: 0 16px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #101828;
    font-size: 18px;
    font-weight: 800;
}

.transfer-currency-control input[readonly] {
    color: #475467;
    cursor: default;
}

.transfer-usd-summary {
    display: grid;
    gap: 18px;
    margin-top: 26px;
    padding: 22px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 22px;
    background: #f8fafc;
}

.transfer-usd-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.transfer-usd-summary-head h3 {
    margin: 4px 0 0;
}

.transfer-rate-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    color: #475467;
    font-size: 13px;
    font-weight: 800;
}

.transfer-usd-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.transfer-usd-summary-item {
    display: grid;
    align-content: space-between;
    gap: 18px;
    min-height: 116px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), 0.09);
    border-radius: 18px;
    background: #fff;
}

.transfer-usd-summary-item span {
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

.transfer-usd-summary-item strong {
    color: var(--primary-dark);
    font-size: clamp(20px, 1.8vw, 28px);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.transfer-usd-summary-item.is-receiver {
    background: #ecfdf3;
}

.transfer-usd-summary-item.is-receiver strong {
    color: #087443;
}

.transfer-usd-summary-item.is-payable,
.transfer-usd-summary-item.is-zar {
    background: rgba(var(--primary-rgb), 0.06);
}

.transfer-calculation-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    border-radius: 15px;
    background: #fff;
    color: #475467;
}

.transfer-calculation-note .ui-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--primary);
    font-size: 20px;
}

.transfer-calculation-note p {
    margin: 0;
}

.transfer-confirmation-total-values {
    display: grid;
    gap: 5px;
}

.transfer-confirmation-total-values small {
    color: #667085;
    font-size: 14px;
    font-weight: 800;
}

.transfer-confirmation-item.is-highlight {
    background: #ecfdf3;
}

.transfer-confirmation-item.is-highlight strong {
    color: #087443;
}

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

@media (max-width: 820px) {
    .transfer-usd-input-grid {
        grid-template-columns: 1fr;
    }

    .transfer-usd-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .transfer-usd-summary {
        padding: 16px;
        border-radius: 18px;
    }

    .transfer-usd-summary-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .transfer-usd-summary-grid {
        grid-template-columns: 1fr;
    }

    .transfer-usd-summary-item {
        min-height: 100px;
    }
}
/* =========================================================
   UMOJA V3 DESIGN SYSTEM — SHARED COMPONENTS
   ========================================================= */
:root {
  --umoja-v3-surface: #ffffff;
  --umoja-v3-soft: #faf7fb;
  --umoja-v3-soft-2: #f7f8fb;
  --umoja-v3-border: rgba(115, 31, 113, .13);
  --umoja-v3-text: #101828;
  --umoja-v3-muted: #667085;
  --umoja-v3-positive: #087443;
  --umoja-v3-positive-bg: #ecfdf3;
  --umoja-v3-warning: #9a6700;
  --umoja-v3-warning-bg: #fff8e7;
  --umoja-v3-danger: #b42318;
  --umoja-v3-danger-bg: #fff1f0;
  --umoja-v3-radius-lg: 26px;
  --umoja-v3-radius-md: 18px;
  --umoja-v3-shadow: 0 18px 44px rgba(33, 18, 46, .07);
}

.umoja-v3-page-header,
.umoja-v3-filter-bar,
.umoja-v3-transaction-summary,
.umoja-v3-confirmation,
.umoja-v3-audit,
.umoja-v3-data-card {
  border: 1px solid var(--umoja-v3-border);
  border-radius: var(--umoja-v3-radius-lg);
  background: var(--umoja-v3-surface);
  box-shadow: var(--umoja-v3-shadow);
}

.umoja-v3-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 3vw, 38px);
}

.umoja-v3-page-header__main,
.umoja-v3-page-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.umoja-v3-page-header__icon,
.umoja-v3-transaction-summary__icon,
.umoja-v3-confirmation__icon,
.umoja-v3-data-card__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 18px;
  background: rgba(var(--primary-rgb), .08);
  color: var(--primary);
  font-size: 27px;
}

.umoja-v3-page-header h1,
.umoja-v3-transaction-summary h2,
.umoja-v3-confirmation h2,
.umoja-v3-audit h2 {
  margin: 0;
}

.umoja-v3-page-header p,
.umoja-v3-transaction-summary p,
.umoja-v3-confirmation p,
.umoja-v3-audit p {
  margin: 5px 0 0;
}

.umoja-v3-stat-grid {
  display: grid;
  grid-template-columns: repeat(var(--umoja-stat-columns), minmax(0, 1fr));
  gap: 16px;
}

.umoja-v3-stat-card {
  display: grid;
  align-content: space-between;
  gap: 22px;
  min-width: 0;
  min-height: 132px;
  padding: 20px;
  border: 1px solid var(--umoja-v3-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(33, 18, 46, .05);
}

.umoja-v3-stat-card__label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--umoja-v3-muted);
  font-size: 14px;
  font-weight: 800;
}

.umoja-v3-stat-card__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(var(--primary-rgb), .07);
  color: var(--primary);
  font-size: 18px;
}

.umoja-v3-stat-card > strong {
  color: var(--primary-dark, #4f1755);
  font-size: clamp(25px, 2.2vw, 37px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.umoja-v3-stat-card > small { color: var(--umoja-v3-muted); font-weight: 700; }
.umoja-v3-stat-card.is-positive > strong { color: var(--umoja-v3-positive); }
.umoja-v3-stat-card.is-warning > strong { color: var(--umoja-v3-warning); }
.umoja-v3-stat-card.is-danger > strong { color: var(--umoja-v3-danger); }

.umoja-v3-filter-bar { padding: 18px; }
.umoja-v3-filter-bar form { display: flex; align-items: end; gap: 14px; }
.umoja-v3-filter-bar__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; flex: 1; }
.umoja-v3-filter-bar__fields label { display: grid; gap: 8px; }
.umoja-v3-filter-bar__fields label > span { font-weight: 800; }
.umoja-v3-filter-bar__actions { display: flex; gap: 10px; }

.umoja-v3-transaction-summary,
.umoja-v3-confirmation {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2.5vw, 28px);
}

.umoja-v3-transaction-summary__head,
.umoja-v3-confirmation__head,
.umoja-v3-data-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.umoja-v3-person-summary {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 17px;
  background: var(--umoja-v3-soft);
}

.umoja-v3-person-summary__avatar,
.umoja-v3-picker__avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 15px;
  background: rgba(var(--primary-rgb), .09);
  color: var(--primary);
  font-weight: 900;
}

.umoja-v3-person-summary div { display: grid; gap: 2px; }
.umoja-v3-person-summary span,
.umoja-v3-person-summary small { color: var(--umoja-v3-muted); font-size: 13px; font-weight: 700; }
.umoja-v3-person-summary strong { font-size: 17px; }

.umoja-v3-summary-rows {
  margin: 0;
  padding: 2px 0;
}

.umoja-v3-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 2px;
  border-bottom: 1px solid rgba(115, 31, 113, .08);
}

.umoja-v3-summary-row:last-child { border-bottom: 0; }
.umoja-v3-summary-row dt { color: var(--umoja-v3-muted); font-weight: 700; }
.umoja-v3-summary-row dd { margin: 0; color: var(--umoja-v3-text); font-size: 17px; font-weight: 850; text-align: right; }
.umoja-v3-summary-row.is-positive dd { color: var(--umoja-v3-positive); }
.umoja-v3-summary-row.is-warning dd { color: var(--umoja-v3-warning); }
.umoja-v3-summary-row.is-danger dd { color: var(--umoja-v3-danger); }

.umoja-v3-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .10), rgba(var(--primary-rgb), .05));
}

.umoja-v3-summary-total > span { color: var(--primary); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
.umoja-v3-summary-total > div { display: grid; justify-items: end; gap: 4px; }
.umoja-v3-summary-total strong { color: var(--primary-dark, #4f1755); font-size: clamp(24px, 2.4vw, 34px); line-height: 1; }
.umoja-v3-summary-total small { color: var(--umoja-v3-muted); font-weight: 800; }

.umoja-v3-inline-notice,
.umoja-v3-banner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border-radius: 15px;
  background: #f8fafc;
  color: #475467;
}

.umoja-v3-inline-notice iconify-icon,
.umoja-v3-banner > span { flex: 0 0 auto; color: var(--primary); font-size: 20px; }
.umoja-v3-inline-notice p,
.umoja-v3-banner p { margin: 0; }
.umoja-v3-inline-notice.is-success,
.umoja-v3-banner.is-success { background: var(--umoja-v3-positive-bg); color: var(--umoja-v3-positive); }
.umoja-v3-inline-notice.is-warning,
.umoja-v3-banner.is-warning { background: var(--umoja-v3-warning-bg); color: var(--umoja-v3-warning); }
.umoja-v3-inline-notice.is-error,
.umoja-v3-banner.is-error { background: var(--umoja-v3-danger-bg); color: var(--umoja-v3-danger); }

.umoja-v3-banner { border: 1px solid currentColor; }
.umoja-v3-banner > div { display: grid; gap: 3px; }

.umoja-v3-action-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}
.umoja-v3-action-bar.is-inline { justify-content: flex-start; }
.umoja-v3-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}
.umoja-v3-action.primary { background: var(--primary); color: #fff; }
.umoja-v3-action.secondary { background: #fff; color: var(--primary); border-color: var(--umoja-v3-border); }
.umoja-v3-action.destructive { background: #fff; color: var(--umoja-v3-danger); border-color: rgba(180,35,24,.2); }
.umoja-v3-action.success { background: #fff; color: var(--umoja-v3-positive); border-color: rgba(8,116,67,.2); }

.umoja-v3-picker { position: relative; display: grid; gap: 10px; }
.umoja-v3-picker label { display: grid; gap: 8px; }
.umoja-v3-picker label > span { font-weight: 800; }
.umoja-v3-picker__control { display: grid; grid-template-columns: 40px 1fr; align-items: center; border: 1px solid #d9dfe8; border-radius: 15px; background: #fff; }
.umoja-v3-picker__control:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .08); }
.umoja-v3-picker__control iconify-icon { justify-self: center; color: var(--umoja-v3-muted); }
.umoja-v3-picker__control input { height: 52px; border: 0; outline: 0; background: transparent; }
.umoja-v3-picker__results { position: absolute; z-index: 50; top: calc(100% - 2px); left: 0; right: 0; display: grid; max-height: 300px; overflow: auto; padding: 8px; border: 1px solid var(--umoja-v3-border); border-radius: 16px; background: #fff; box-shadow: var(--umoja-v3-shadow); }
.umoja-v3-picker__result { display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; }
.umoja-v3-picker__result:hover { background: var(--umoja-v3-soft); }
.umoja-v3-picker__result span:first-child { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(var(--primary-rgb), .08); color: var(--primary); font-weight: 900; }
.umoja-v3-picker__result strong,
.umoja-v3-picker__result small { display: block; }
.umoja-v3-picker__result small { margin-top: 3px; color: var(--umoja-v3-muted); }
.umoja-v3-picker__selected { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 13px; border-radius: 16px; background: var(--umoja-v3-soft); }
.umoja-v3-picker__selected div { display: grid; gap: 3px; }
.umoja-v3-picker__selected small { color: var(--umoja-v3-muted); }
.umoja-v3-picker__clear { border: 0; border-radius: 999px; padding: 9px 14px; background: #fff; color: var(--primary); font-weight: 800; cursor: pointer; }

.umoja-v3-data-card { display: grid; gap: 18px; padding: 20px; }
.umoja-v3-data-card__head { position: relative; }
.umoja-v3-data-card__head > div { flex: 1; }
.umoja-v3-data-card__head .request-status { margin-left: auto; }
.umoja-v3-data-card__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.umoja-v3-data-card__metrics > div { display: grid; gap: 7px; min-height: 92px; padding: 15px; border-radius: 16px; background: var(--umoja-v3-soft-2); }
.umoja-v3-data-card__metrics span,
.umoja-v3-data-card__metrics small { color: var(--umoja-v3-muted); font-weight: 700; }
.umoja-v3-data-card__metrics strong { font-size: 18px; }

.umoja-v3-audit { display: grid; gap: 18px; padding: 22px; }
.umoja-v3-audit__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.umoja-v3-audit__list li { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding-bottom: 20px; }
.umoja-v3-audit__list li:not(:last-child)::after { content: ''; position: absolute; left: 18px; top: 34px; bottom: 0; width: 2px; background: rgba(var(--primary-rgb), .12); }
.umoja-v3-audit__dot { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(var(--primary-rgb), .08); color: var(--primary); }
.umoja-v3-audit__list p { color: var(--umoja-v3-muted); }
.umoja-v3-audit__list small { color: #98a2b3; font-weight: 700; }

.umoja-v3-empty { display: grid; justify-items: center; gap: 10px; padding: 32px 20px; border: 1px dashed rgba(var(--primary-rgb), .18); border-radius: 20px; background: #fff; text-align: center; }
.umoja-v3-empty__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: rgba(var(--primary-rgb), .08); color: var(--primary); font-size: 27px; }
.umoja-v3-empty p { max-width: 520px; margin: 0; color: var(--umoja-v3-muted); }

/* Standardized confirmation treatment for legacy module markup */
.transfer-confirmation-card,
.loan-confirm-card-v2,
.investment-confirm-card {
  border: 1px solid var(--umoja-v3-border) !important;
  border-radius: var(--umoja-v3-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--umoja-v3-shadow) !important;
}
.transfer-confirmation-grid,
.loan-confirm-v2-grid {
  display: block !important;
  padding: 0 2px;
}
.transfer-confirmation-item,
.loan-confirm-v2-grid > div {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 20px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 2px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(115,31,113,.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.transfer-confirmation-item:last-child,
.loan-confirm-v2-grid > div:last-child { border-bottom: 0 !important; }
.transfer-confirmation-item > span,
.loan-confirm-v2-grid > div > span { color: var(--umoja-v3-muted) !important; font-weight: 700 !important; }
.transfer-confirmation-item > strong,
.loan-confirm-v2-grid > div > strong { margin: 0 !important; color: var(--umoja-v3-text) !important; font-size: 17px !important; text-align: right; }
.transfer-confirmation-item.is-highlight > strong { color: var(--umoja-v3-positive) !important; }
.transfer-confirmation-item.is-total,
.loan-confirm-v2-total {
  margin-top: 8px !important;
  padding: 18px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .10), rgba(var(--primary-rgb), .05)) !important;
}
.transfer-confirmation-total-values { display: grid; justify-items: end; gap: 4px; }
.transfer-confirmation-item.is-total strong,
.loan-confirm-v2-total strong { color: var(--primary-dark, #4f1755) !important; font-size: 26px !important; }
.loan-confirm-v2-guarantor { padding: 14px 16px !important; border: 0 !important; border-radius: 17px !important; background: var(--umoja-v3-soft) !important; }
.loan-confirm-v2-note,
.transfer-confirmation-note { border: 0 !important; border-radius: 15px !important; background: #f8fafc !important; }
.loan-confirm-v2-submit,
.transfer-confirmation-actions .button-primary { min-height: 48px; border-radius: 14px; }

@media (max-width: 1100px) {
  .umoja-v3-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .umoja-v3-page-header { align-items: stretch; flex-direction: column; }
  .umoja-v3-page-header__actions { flex-wrap: wrap; }
  .umoja-v3-filter-bar form { align-items: stretch; flex-direction: column; }
  .umoja-v3-filter-bar__actions { display: grid; grid-template-columns: 1fr; }
  .umoja-v3-action-bar { display: grid; grid-template-columns: 1fr; }
  .umoja-v3-action { width: 100%; }
  .umoja-v3-summary-row { gap: 12px; }
}
@media (max-width: 560px) {
  .umoja-v3-stat-grid { grid-template-columns: 1fr; }
  .umoja-v3-page-header__icon,
  .umoja-v3-transaction-summary__icon,
  .umoja-v3-confirmation__icon,
  .umoja-v3-data-card__icon { width: 50px; height: 50px; flex-basis: 50px; border-radius: 15px; }
  .umoja-v3-picker__selected { grid-template-columns: 44px 1fr; }
  .umoja-v3-picker__clear { grid-column: 1 / -1; width: 100%; }
  .umoja-v3-summary-total { align-items: flex-start; flex-direction: column; }
  .umoja-v3-summary-total > div { justify-items: start; }
}

.transfer-payable-display {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.transfer-payable-display strong {
    color: #087443;
    font-size: clamp(20px, 4.8vw, 30px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.transfer-payable-display small {
    color: #667085;
    font-size: 12px;
    font-weight: 750;
}

.transfer-overview-values strong {
    display: block;
    max-width: 100%;
    color: var(--primary-dark);
    font-size: clamp(19px, 4.2vw, 27px);
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.transfer-overview-values small {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 11px;
    font-weight: 750;
}

@media (max-width: 480px) {
    .transfer-payable-display strong {
        font-size: clamp(18px, 6vw, 25px);
    }

    .transfer-overview-values strong {
        font-size: clamp(18px, 5.5vw, 24px);
    }
}

/* =========================================================
   TRANSFER QUICK PAYMENT — UMOJA V3
   ========================================================= */

.transfer-payment-action-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
}

.transfer-payment-action-content {
    min-width: 0;
}

.transfer-quick-payment {
    position: relative;
}

.transfer-quick-payment > summary {
    list-style: none;
}

.transfer-quick-payment > summary::-webkit-details-marker {
    display: none;
}

.transfer-quick-payment-trigger {
    cursor: pointer;
    white-space: nowrap;
}

.transfer-quick-payment-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 12px);
    right: 0;
    width: min(680px, calc(100vw - 48px));
    padding: 22px;
    border: 1px solid rgba(var(--primary-rgb), 0.14);
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 24px 60px rgba(16, 24, 40, 0.16),
        0 8px 20px rgba(16, 24, 40, 0.08);
}

.transfer-quick-payment-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.transfer-quick-payment-head h3 {
    margin: 4px 0 0;
}

.transfer-quick-details-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.transfer-quick-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.transfer-quick-payment-form {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 16px;
    background: #f8fafc;
}

.transfer-quick-payment-form label:not(.transfer-quick-upload) {
    display: grid;
    gap: 8px;
}

.transfer-quick-payment-form label > span {
    font-size: 13px;
    font-weight: 800;
}

.transfer-quick-payment-form input[type="text"] {
    width: 100%;
    min-height: 48px;
}

.transfer-quick-payment-form .button-primary,
.transfer-quick-payment-form .button-secondary {
    width: 100%;
    min-height: 46px;
}

.transfer-quick-upload {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 100px;
    padding: 16px;
    border: 1.5px dashed rgba(var(--primary-rgb), 0.28);
    border-radius: 15px;
    background: #ffffff;
    cursor: pointer;
}

.transfer-quick-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.transfer-quick-upload-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 13px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    font-size: 23px;
}

.transfer-quick-upload-copy {
    display: grid;
    gap: 4px;
}

.transfer-quick-upload-copy strong {
    color: #101828;
}

.transfer-quick-upload-copy small {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.transfer-quick-payment[open] .transfer-quick-payment-trigger {
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.09);
}

@media (max-width: 760px) {
    .transfer-payment-action-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .transfer-quick-payment,
    .transfer-quick-payment-trigger {
        width: 100%;
    }

    .transfer-quick-payment-panel {
        position: static;
        width: 100%;
        margin-top: 12px;
        padding: 16px;
        border-radius: 17px;
        box-shadow: none;
    }

    .transfer-quick-payment-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .transfer-quick-payment-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   UMOJA V3 — TRANSFER DETAIL PAGE
   ========================================================= */

.transfer-show-v3 {
    display: grid;
    gap: 22px;
}

.transfer-detail-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 26px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.transfer-detail-hero__identity {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.transfer-detail-hero__icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-radius: 20px;
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary);
    font-size: 32px;
}

.transfer-detail-hero h1 {
    margin: 4px 0;
    font-size: clamp(27px, 3vw, 40px);
    overflow-wrap: anywhere;
}

.transfer-detail-hero__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.transfer-detail-hero__actions .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
}

.transfer-detail-parties {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.transfer-party-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.transfer-party-card__avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 16px;
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary);
    font-size: 20px;
    font-weight: 900;
}

.transfer-party-card > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.transfer-party-card span:not(.transfer-party-card__avatar) {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.transfer-party-card strong,
.transfer-party-card small {
    overflow-wrap: anywhere;
}

.transfer-party-card small {
    color: #667085;
    font-weight: 650;
}

.transfer-party-arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    font-size: 22px;
}

.transfer-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
    gap: 20px;
    align-items: stretch;
}

.transfer-detail-summary-card,
.transfer-detail-status-card,
.transfer-payment-v3-card,
.transfer-submissions-card {
    margin: 0;
    padding: clamp(20px, 2.5vw, 28px);
    border-radius: 24px;
}

.transfer-detail-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.transfer-detail-section-head h2 {
    margin: 4px 0 5px;
}

.transfer-detail-summary-rows {
    margin: 0;
}

.transfer-detail-summary-rows dd {
    display: grid;
    justify-items: end;
    gap: 3px;
}

.transfer-detail-summary-rows dd small {
    color: #667085;
    font-size: 12px;
    font-weight: 750;
}

.transfer-detail-total {
    margin-top: 18px;
}

.transfer-detail-total strong {
    font-size: clamp(28px, 3vw, 40px);
}

.transfer-detail-total small {
    font-size: 14px;
}

.transfer-detail-facts {
    display: grid;
    gap: 0;
    margin: 0;
}

.transfer-detail-facts > div {
    display: grid;
    gap: 5px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.09);
}

.transfer-detail-facts > div:first-child {
    padding-top: 0;
}

.transfer-detail-facts > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.transfer-detail-facts dt {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.transfer-detail-facts dd {
    margin: 0;
    color: #101828;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.transfer-unlock-panel {
    display: grid;
    gap: 10px;
    margin-top: 22px;
    padding: 18px;
    border-radius: 17px;
    background: rgba(var(--primary-rgb), 0.06);
}

.transfer-unlock-panel > span {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.transfer-unlock-panel > strong {
    color: var(--primary-dark);
    font-size: 26px;
    letter-spacing: 0.08em;
}

.transfer-unlock-panel form,
.transfer-unlock-panel button {
    width: 100%;
}

.transfer-payment-v3-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
}

.transfer-payment-v3-form {
    display: grid;
    align-content: start;
    gap: 15px;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 18px;
    background: #f8fafc;
}

.transfer-payment-v3-form > label:not(.transfer-payment-upload) {
    display: grid;
    gap: 8px;
}

.transfer-payment-v3-form > label > span {
    font-weight: 800;
}

.transfer-payment-v3-form input[type="text"] {
    width: 100%;
    min-height: 50px;
}

.transfer-payment-v3-form .button-primary,
.transfer-payment-v3-form .button-secondary {
    width: 100%;
    min-height: 48px;
}

.transfer-payment-upload {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 118px;
    padding: 18px;
    border: 1.5px dashed rgba(var(--primary-rgb), 0.28);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
}

.transfer-payment-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.transfer-payment-upload__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary);
    font-size: 25px;
}

.transfer-payment-upload > span:last-child {
    display: grid;
    gap: 4px;
}

.transfer-payment-upload small {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.transfer-payment-divider {
    display: grid;
    place-items: center;
}

.transfer-payment-divider span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.transfer-submissions-head {
    align-items: center;
}

.transfer-submission-list {
    display: grid;
    gap: 12px;
}

.transfer-submission-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 17px;
    border: 1px solid rgba(var(--primary-rgb), 0.09);
    border-radius: 17px;
    background: #f8fafc;
}

.transfer-submission-card__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    font-size: 24px;
}

.transfer-submission-card__main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    min-width: 0;
}

.transfer-submission-card__main > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.transfer-submission-card__main span {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.transfer-submission-card__main strong {
    font-size: 14px;
    overflow-wrap: anywhere;
}

.transfer-submission-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.transfer-proof-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 14px;
}

.transfer-submissions-empty {
    min-height: 180px;
}

.transfer-submissions-empty .ui-icon {
    font-size: 34px;
    color: var(--primary);
}

@media (max-width: 980px) {
    .transfer-detail-grid {
        grid-template-columns: 1fr;
    }

    .transfer-submission-card__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .transfer-detail-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .transfer-detail-hero__actions {
        justify-content: flex-start;
    }

    .transfer-detail-parties {
        grid-template-columns: 1fr;
    }

    .transfer-party-arrow {
        transform: rotate(90deg);
        justify-self: center;
    }

    .transfer-payment-v3-grid {
        grid-template-columns: 1fr;
    }

    .transfer-payment-divider span {
        width: auto;
        height: auto;
        padding: 5px 12px;
        border-radius: 999px;
    }

    .transfer-submission-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .transfer-submission-card__main {
        grid-template-columns: 1fr;
    }

    .transfer-submission-card__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .transfer-detail-hero__identity {
        align-items: flex-start;
    }

    .transfer-detail-hero__icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border-radius: 16px;
        font-size: 26px;
    }

    .transfer-detail-hero__actions,
    .transfer-detail-hero__actions .button-secondary {
        width: 100%;
    }

    .transfer-detail-summary-card,
    .transfer-detail-status-card,
    .transfer-payment-v3-card,
    .transfer-submissions-card {
        padding: 18px;
        border-radius: 20px;
    }

    .transfer-detail-section-head,
    .transfer-submissions-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .transfer-submission-card {
        grid-template-columns: 1fr;
    }

    .transfer-submission-card__icon {
        width: 42px;
        height: 42px;
    }

    .transfer-submission-card__actions {
        grid-column: auto;
    }

    .transfer-proof-link {
        width: 100%;
        justify-content: center;
    }
}

/* ===========================================
   UMOJA V3 - Transfer Payment Upload
   =========================================== */

/* "Choose payment proof" */
.transfer-payment-upload strong,
.transfer-payment-upload__title,
.transfer-payment-upload .upload-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Accepted file types */
.transfer-payment-upload small,
.transfer-payment-upload__meta,
.transfer-payment-upload .upload-meta {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 500;
    letter-spacing: .02em;
}

/* Mobile */
@media (max-width:768px){

    .transfer-payment-upload strong,
    .transfer-payment-upload__title,
    .transfer-payment-upload .upload-title{
        font-size:.88rem;
    }

    .transfer-payment-upload small,
    .transfer-payment-upload__meta,
    .transfer-payment-upload .upload-meta{
        font-size:.68rem;
    }

}

.transfer-payment-upload{
    display:block;
    cursor:pointer;
}

.transfer-payment-upload__content{
    display:flex;
    align-items:center;
    gap:16px;

    padding:20px;
    border:1px dashed #e5d7ef;
    border-radius:18px;

    transition:.2s;
}

.transfer-payment-upload__content:hover{
    border-color:var(--primary);
    background:#fcf9fe;
}

.transfer-payment-upload__icon{
    width:54px;
    height:54px;

    border-radius:16px;

    background:#f6eef8;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;
}

.transfer-payment-upload__icon iconify-icon{
    font-size:22px;
    color:var(--primary);
}

.transfer-payment-upload__text{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.transfer-payment-upload__title{
    font-size:15px;
    font-weight:700;
    color:#1f2937;
}

.transfer-payment-upload__meta{
    margin-top:3px;
    font-size:12px;
    color:#6b7280;
}

/* =========================================================
   UMOJA V3 — ADMIN USERS MOBILE CARDS
   ========================================================= */

.admin-users-mobile-list {
    display: none;
}

.admin-user-card {
    position: relative;
    display: grid;
    gap: 16px;
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.admin-user-select {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
}

.admin-user-select input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
}

.admin-user-identity {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding-right: 40px;
}

.admin-user-avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    overflow: hidden;
    border: 2px solid rgba(var(--primary-rgb), 0.24);
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
}

.admin-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-user-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.admin-user-main strong {
    color: #101828;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.admin-user-main span {
    color: #667085;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.admin-user-meta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 12px;
    padding: 14px;
    border-radius: 15px;
    background: #f8fafc;
}

.admin-user-meta-grid > div {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
}

.admin-user-meta-grid > div > span {
    color: #667085;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.admin-user-meta-grid > div > strong:not(.request-status) {
    color: #101828;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
}

.admin-user-meta-grid .user-status-badge {
    width: fit-content;
    max-width: 100%;
    min-height: 26px;
    padding: 4px 11px;
    font-size: 11px;
}

.admin-user-role-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.admin-user-role {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 11px;
    border: 1px solid rgba(var(--primary-rgb), 0.16);
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.06);
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
}

.admin-user-role.is-client {
    border-color: #b9e6fe;
    background: #f0f9ff;
    color: #026aa2;
}

.admin-user-role.is-member {
    border-color: #c7eed8;
    background: #ecfdf3;
    color: #087443;
}

.admin-user-role.is-admin,
.admin-user-role.is-super-admin {
    border-color: #e9d7fe;
    background: #f9f5ff;
    color: #6941c6;
}

.admin-user-role.is-agent {
    border-color: #fedf89;
    background: #fffaeb;
    color: #b54708;
}

.admin-user-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--primary-rgb), 0.1);
}

.admin-user-actions form {
    min-width: 0;
    margin: 0;
}

.admin-user-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid rgba(var(--primary-rgb), 0.16);
    border-radius: 13px;
    background: #ffffff;
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.admin-user-action iconify-icon {
    font-size: 18px;
}

.admin-user-action:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
    background: rgba(var(--primary-rgb), 0.05);
}

.admin-user-action.is-danger {
    border-color: #fecdca;
    color: #b42318;
}

.admin-user-action.is-danger:hover {
    background: #fff5f4;
}

.admin-user-mobile-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-user-mobile-toolbar .admin-users-select-all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 750;
}

.admin-user-mobile-toolbar .admin-users-select-all input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
}

@media (max-width: 760px) {
    .admin-users-table {
        display: none;
    }

    .admin-users-mobile-list {
        display: grid;
        gap: 14px;
    }

    .admin-users-table-card {
        padding: 14px;
    }

    .admin-users-list-toolbar {
        margin-bottom: 14px;
        padding: 12px 14px;
        border: 1px solid rgba(var(--primary-rgb), 0.1);
        border-radius: 15px;
        background: #ffffff;
    }

    .admin-user-card {
        gap: 13px;
        padding: 17px;
        border-radius: 18px;
    }

    .admin-user-select {
        top: 17px;
        right: 17px;
    }

    .admin-user-avatar {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .admin-user-main strong {
        font-size: 15px;
    }

    .admin-user-meta-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 12px;
    }

    .admin-user-actions {
        gap: 7px;
    }

    .admin-user-action {
        min-height: 42px;
        padding: 0;
    }

    .admin-user-action span {
        display: none;
    }

    .admin-user-action iconify-icon {
        font-size: 19px;
    }
}

@media (max-width: 380px) {
    .admin-user-meta-grid {
        grid-template-columns: 1fr;
    }

    .admin-user-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-user-action span {
        display: inline;
    }
}

/* =========================================================
   UMOJA V3 — AGENT DASHBOARD
   ========================================================= */

.agent-dashboard-v3 {
    display: grid;
    gap: 24px;
}

.agent-dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.agent-dashboard-hero__identity {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.agent-dashboard-hero__icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-radius: 20px;
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary);
    font-size: 32px;
}

.agent-dashboard-hero h1 {
    margin: 4px 0;
    font-size: clamp(29px, 3vw, 42px);
}

.agent-dashboard-user {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

.agent-dashboard-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 20px;
    white-space: nowrap;
}

.agent-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.agent-dashboard-kpi {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    min-height: 140px;
    padding: 22px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.agent-dashboard-kpi__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 16px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    font-size: 25px;
}

.agent-dashboard-kpi > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.agent-dashboard-kpi span:not(.agent-dashboard-kpi__icon) {
    color: #667085;
    font-size: 13px;
    font-weight: 750;
}

.agent-dashboard-kpi strong {
    color: var(--primary-dark);
    font-size: clamp(25px, 2.3vw, 36px);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.agent-dashboard-kpi small {
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

.agent-dashboard-kpi.is-money .agent-dashboard-kpi__icon {
    background: #ecfdf3;
    color: #087443;
}

.agent-dashboard-kpi.is-action {
    background: rgba(var(--primary-rgb), 0.045);
}

.agent-dashboard-kpi.is-action strong {
    font-size: clamp(20px, 2vw, 28px);
}

.agent-dashboard-kpi.is-action strong a {
    color: var(--primary);
    text-decoration: none;
}

.agent-payout-history {
    display: grid;
    gap: 18px;
}

.agent-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.agent-section-head h2 {
    margin: 4px 0;
    font-size: clamp(25px, 2.5vw, 34px);
}

.agent-payout-list {
    display: grid;
    gap: 16px;
}

.agent-payout-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.agent-payout-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.agent-payout-card__identity {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.agent-payout-avatar {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 15px;
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary);
    font-size: 18px;
    font-weight: 900;
}

.agent-payout-card__identity h3 {
    margin: 3px 0;
    font-size: 19px;
    overflow-wrap: anywhere;
}

.agent-payout-card__identity small {
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

.agent-payout-card__body {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, 0.8fr)
        minmax(0, 0.8fr);
    gap: 14px;
}

.agent-payout-card__body > div {
    display: grid;
    align-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 100px;
    padding: 17px;
    border-radius: 17px;
    background: #f8fafc;
}

.agent-payout-card__body span {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.agent-payout-card__body strong {
    color: #101828;
    font-size: 17px;
    overflow-wrap: anywhere;
}

.agent-payout-card__body small {
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

.agent-payout-value {
    background: #ecfdf3 !important;
}

.agent-payout-value strong {
    color: #087443 !important;
    font-size: clamp(22px, 2vw, 30px) !important;
}

.agent-payout-card__footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 15px;
    border-top: 1px solid rgba(var(--primary-rgb), 0.09);
}

.agent-payout-card__footer .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
}

.agent-payout-empty {
    min-height: 260px;
}

.agent-payout-empty__icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 19px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    font-size: 31px;
}

.agent-payout-empty .button-primary {
    margin-top: 8px;
}

@media (max-width: 980px) {
    .agent-dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-payout-card__body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .agent-dashboard-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 22px 18px;
        border-radius: 22px;
    }

    .agent-dashboard-primary-action {
        width: 100%;
    }

    .agent-dashboard-kpis {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .agent-dashboard-kpi {
        min-height: 112px;
        padding: 18px;
        border-radius: 18px;
    }

    .agent-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .agent-payout-card__body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .agent-dashboard-hero__identity {
        align-items: flex-start;
    }

    .agent-dashboard-hero__icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border-radius: 16px;
        font-size: 26px;
    }

    .agent-payout-card {
        padding: 17px;
        border-radius: 19px;
    }

    .agent-payout-card__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .agent-payout-card__footer,
    .agent-payout-card__footer .button-secondary {
        width: 100%;
    }
}

/* =========================================================
   UMOJA V3 — AGENT TRANSFER VERIFICATION AND PAYOUTS
   ========================================================= */

.agent-payout-v3 {
    display: grid;
    gap: 24px;
}

.agent-payout-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.agent-payout-hero__identity {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.agent-payout-hero__icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-radius: 20px;
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary);
    font-size: 32px;
}

.agent-payout-hero h1 {
    margin: 4px 0;
    font-size: clamp(28px, 3vw, 40px);
}

.agent-payout-history-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    white-space: nowrap;
}

.agent-payout-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.agent-payout-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    min-height: 128px;
    padding: 20px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 21px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.agent-payout-kpi__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 15px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    font-size: 24px;
}

.agent-payout-kpi > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.agent-payout-kpi span:not(.agent-payout-kpi__icon) {
    color: #667085;
    font-size: 12px;
    font-weight: 750;
}

.agent-payout-kpi strong {
    color: var(--primary-dark);
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.agent-payout-kpi small {
    color: #667085;
    font-size: 11px;
    font-weight: 650;
}

.agent-payout-kpi.is-warning .agent-payout-kpi__icon {
    background: #fff8e7;
    color: #9a6700;
}

.agent-payout-kpi.is-ready .agent-payout-kpi__icon {
    background: #eef4ff;
    color: #175cd3;
}

.agent-payout-kpi.is-money .agent-payout-kpi__icon,
.agent-payout-kpi.is-completed .agent-payout-kpi__icon {
    background: #ecfdf3;
    color: #087443;
}

.agent-payout-queue {
    display: grid;
    gap: 18px;
}

.agent-payout-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.agent-payout-section-head h2 {
    margin: 4px 0;
    font-size: clamp(25px, 2.5vw, 34px);
}

.agent-payout-list {
    display: grid;
    gap: 18px;
}

.agent-payout-card {
    display: grid;
    gap: 20px;
    padding: clamp(20px, 2.5vw, 28px);
    border: 1px solid rgba(var(--primary-rgb), 0.11);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.agent-payout-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.agent-payout-card__reference {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.agent-payout-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 16px;
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary);
    font-size: 25px;
}

.agent-payout-card__reference h3 {
    margin: 3px 0;
    font-size: 20px;
    overflow-wrap: anywhere;
}

.agent-payout-card__reference small {
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

.agent-payout-parties {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.agent-payout-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border-radius: 17px;
    background: #f8fafc;
}

.agent-payout-person__avatar {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 14px;
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary);
    font-weight: 900;
}

.agent-payout-person > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.agent-payout-person > div > span {
    color: #667085;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.agent-payout-person strong,
.agent-payout-person small {
    overflow-wrap: anywhere;
}

.agent-payout-person small {
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

.agent-payout-party-arrow {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    font-size: 20px;
}

.agent-payout-financial-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.agent-payout-financial-grid > div {
    display: grid;
    align-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 105px;
    padding: 16px;
    border-radius: 17px;
    background: #f8fafc;
}

.agent-payout-financial-grid span {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.agent-payout-financial-grid strong {
    color: #101828;
    font-size: clamp(18px, 1.7vw, 25px);
    overflow-wrap: anywhere;
}

.agent-payout-financial-grid small {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.agent-payout-financial-grid .is-receiver {
    background: #ecfdf3;
}

.agent-payout-financial-grid .is-receiver strong {
    color: #087443;
}

.agent-payout-financial-grid .is-payable {
    background: rgba(var(--primary-rgb), 0.06);
}

.agent-payout-rate-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    border-radius: 14px;
    background: #f8fafc;
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

.agent-payout-rate-note iconify-icon {
    color: var(--primary);
    font-size: 19px;
}

.agent-payout-review-panel,
.agent-payout-code-panel {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 20px;
    background: #f8fafc;
}

.agent-payout-code-panel {
    border-color: #b2ddff;
    background: #f5fbff;
}

.agent-payout-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.agent-payout-panel-head h4 {
    margin: 4px 0;
    font-size: 19px;
}

.agent-payout-panel-head .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 15px;
    white-space: nowrap;
}

.agent-payout-evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.agent-payout-evidence-item {
    display: grid;
    align-content: center;
    gap: 7px;
    min-height: 92px;
    padding: 15px;
    border-radius: 15px;
    background: #ffffff;
}

.agent-payout-evidence-item > span {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.agent-proof-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: var(--primary);
    font-weight: 800;
    text-decoration: none;
}

.agent-payout-review-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 14px;
}

.agent-payout-review-actions form {
    margin: 0;
}

.agent-payout-review-actions .button-primary,
.agent-payout-review-actions .button-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
}

.agent-payout-reject-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: end;
    gap: 12px;
}

.agent-payout-reject-form label {
    display: grid;
    gap: 7px;
}

.agent-payout-reject-form label > span {
    font-size: 12px;
    font-weight: 800;
}

.agent-payout-reject-form input {
    width: 100%;
    min-height: 48px;
}

.agent-unlock-form {
    display: grid;
    gap: 16px;
}

.agent-unlock-form > label {
    display: grid;
    gap: 8px;
}

.agent-unlock-form > label > span {
    font-size: 12px;
    font-weight: 800;
}

.agent-unlock-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid #d0d5dd;
    border-radius: 15px;
    background: #ffffff;
}

.agent-unlock-control > span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.07);
    font-size: 21px;
}

.agent-unlock-control input {
    width: 100%;
    height: 52px;
    padding: 0 15px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.agent-unlock-control:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.09);
}

.agent-payout-confirmation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.agent-payout-confirmation .button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
}

.agent-payout-completed-panel {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px;
    border: 1px solid #abefc6;
    border-radius: 17px;
    background: #ecfdf3;
}

.agent-payout-completed-panel__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 14px;
    background: #d1fadf;
    color: #087443;
    font-size: 24px;
}

.agent-payout-completed-panel > div {
    display: grid;
    gap: 3px;
}

.agent-payout-completed-panel strong {
    color: #087443;
}

.agent-payout-completed-panel span {
    color: #475467;
    font-size: 12px;
}

.agent-payout-empty {
    min-height: 240px;
}

.agent-payout-empty__icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    font-size: 30px;
}

@media (max-width: 1100px) {
    .agent-payout-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-payout-financial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-payout-review-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .agent-payout-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 22px 18px;
        border-radius: 22px;
    }

    .agent-payout-history-link {
        width: 100%;
    }

    .agent-payout-kpis {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .agent-payout-kpi {
        min-height: 108px;
        padding: 17px;
    }

    .agent-payout-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .agent-payout-card__head,
    .agent-payout-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .agent-payout-parties {
        grid-template-columns: 1fr;
    }

    .agent-payout-party-arrow {
        justify-self: center;
        transform: rotate(90deg);
    }

    .agent-payout-evidence-grid {
        grid-template-columns: 1fr;
    }

    .agent-payout-reject-form {
        grid-template-columns: 1fr;
    }

    .agent-payout-review-actions .button-primary,
    .agent-payout-review-actions .button-danger {
        width: 100%;
    }

    .agent-payout-confirmation {
        align-items: stretch;
        flex-direction: column;
    }

    .agent-payout-confirmation .button-primary {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .agent-payout-hero__identity {
        align-items: flex-start;
    }

    .agent-payout-hero__icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border-radius: 16px;
        font-size: 26px;
    }

    .agent-payout-card {
        padding: 17px;
        border-radius: 19px;
    }

    .agent-payout-financial-grid {
        grid-template-columns: 1fr;
    }

    .agent-payout-review-panel,
    .agent-payout-code-panel {
        padding: 16px;
        border-radius: 17px;
    }
}

.agent-payout-checks {
    display: grid;
    gap: 10px;
}

.agent-unlock-form small {
    color: #667085;
    font-size: 12px;
    line-height: 1.45;
}

/* =========================================================
   UMOJA V3 — AGENT CLIENT DIRECTORY
   ========================================================= */

.agent-clients-v3 {
    display: grid;
    gap: 22px;
}

.agent-clients-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.agent-clients-hero__identity {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.agent-clients-hero__icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-radius: 20px;
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary);
    font-size: 32px;
}

.agent-clients-hero h1 {
    margin: 4px 0;
    font-size: clamp(29px, 3vw, 42px);
}

.agent-clients-hero .button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    white-space: nowrap;
}

.agent-client-filter-card {
    padding: 20px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.agent-client-filter-form {
    display: grid;
    grid-template-columns:
        minmax(280px, 1.5fr)
        minmax(180px, 0.6fr)
        auto
        auto;
    align-items: end;
    gap: 14px;
}

.agent-client-filter-form label {
    display: grid;
    gap: 8px;
}

.agent-client-filter-form label > span {
    color: #344054;
    font-size: 12px;
    font-weight: 800;
}

.agent-client-filter-form select,
.agent-client-filter-form input {
    width: 100%;
    min-height: 50px;
}

.agent-client-search-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid #d0d5dd;
    border-radius: 15px;
    background: #ffffff;
}

.agent-client-search-control > span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    color: #667085;
    font-size: 21px;
}

.agent-client-search-control input {
    min-width: 0;
    padding: 0 14px 0 0;
    border: 0;
    outline: 0;
}

.agent-client-search-control:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.08);
}

.agent-client-filter-form .button-primary,
.agent-client-filter-form .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
}

.agent-client-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.agent-client-section-head h2 {
    margin: 4px 0;
    font-size: clamp(25px, 2.5vw, 34px);
}

.agent-client-list {
    display: grid;
    gap: 16px;
}

.agent-client-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.agent-client-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.agent-client-card__identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.agent-client-avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    overflow: hidden;
    border-radius: 17px;
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary);
    font-size: 20px;
    font-weight: 900;
}

.agent-client-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agent-client-card__identity h3 {
    margin: 3px 0;
    font-size: 20px;
    overflow-wrap: anywhere;
}

.agent-client-card__identity span:not(.agent-client-avatar) {
    color: #667085;
    font-size: 13px;
    font-weight: 650;
}

.agent-client-card__details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.agent-client-card__details > div {
    display: grid;
    align-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 90px;
    padding: 15px;
    border-radius: 16px;
    background: #f8fafc;
}

.agent-client-card__details span {
    color: #667085;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.agent-client-card__details strong {
    color: #101828;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.agent-client-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
    padding-top: 15px;
    border-top: 1px solid rgba(var(--primary-rgb), 0.09);
}

.agent-client-card__actions .button-primary,
.agent-client-card__actions .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 45px;
    padding: 0 16px;
}

.agent-client-empty {
    min-height: 260px;
}

.agent-client-empty__icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 19px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    font-size: 31px;
}

@media (max-width: 1050px) {
    .agent-client-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-client-card__details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .agent-clients-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 22px 18px;
        border-radius: 22px;
    }

    .agent-clients-hero .button-primary {
        width: 100%;
    }

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

    .agent-client-filter-form .button-primary,
    .agent-client-filter-form .button-secondary {
        width: 100%;
    }

    .agent-client-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .agent-client-card__details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .agent-clients-hero__identity {
        align-items: flex-start;
    }

    .agent-clients-hero__icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border-radius: 16px;
        font-size: 26px;
    }

    .agent-client-card {
        padding: 17px;
        border-radius: 19px;
    }

    .agent-client-card__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .agent-client-card__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .agent-client-card__actions .button-primary,
    .agent-client-card__actions .button-secondary {
        width: 100%;
    }
}

/* =========================================================
   UMOJA V3 — INTERNATIONAL PHONE INPUT
   ========================================================= */

.agent-client-phone-field {
    display: grid;
    gap: 8px;
}

.agent-client-phone-field > span {
    color: #101828;
    font-size: 13px;
    font-weight: 800;
}

.agent-client-phone-control {
    display: grid;
    grid-template-columns: minmax(190px, 0.7fr) minmax(0, 1.3fr);
    overflow: hidden;
    min-height: 50px;
    border: 1px solid #d0d5dd;
    border-radius: 14px;
    background: #ffffff;
}

.agent-client-phone-control:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.08);
}

.agent-client-country-code,
.agent-client-phone-control input {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    border: 0;
    outline: 0;
    background: transparent;
}

.agent-client-country-code {
    padding: 0 14px;
    border-right: 1px solid #e4e7ec;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.agent-client-phone-control input {
    padding: 0 16px;
    color: #101828;
    font-size: 14px;
    font-weight: 700;
}

.agent-client-phone-field small {
    color: #667085;
    font-size: 11px;
    font-weight: 600;
}

@media (max-width: 640px) {
    .agent-client-phone-control {
        grid-template-columns: minmax(145px, 0.9fr) minmax(0, 1.1fr);
    }

    .agent-client-country-code {
        padding: 0 10px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .agent-client-phone-control {
        grid-template-columns: 1fr;
        overflow: visible;
        border: 0;
        background: transparent;
        gap: 9px;
    }

    .agent-client-country-code,
    .agent-client-phone-control input {
        border: 1px solid #d0d5dd;
        border-radius: 13px;
        background: #ffffff;
    }

    .agent-client-country-code {
        border-right: 1px solid #d0d5dd;
    }
}

/* =========================================================
   UMOJA V3 — AGENT CLIENT CREATION
   ========================================================= */

.agent-client-create-page {
    display: grid;
    gap: 20px;
}

.agent-client-create-card {
    padding: clamp(20px, 2.5vw, 30px);
}

.agent-client-form-section {
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 20px;
    background: #f8fafc;
}

.agent-client-form-section + .agent-client-form-section {
    margin-top: 4px;
}

.agent-client-form-section__head {
    display: grid;
    gap: 4px;
}

.agent-client-form-section__head h2 {
    margin: 0;
    font-size: clamp(20px, 2vw, 26px);
}

.agent-client-form-section .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.agent-client-form-section label {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.agent-client-form-section label > span {
    color: #101828;
    font-size: 13px;
    font-weight: 800;
}

.agent-client-form-section label > span small {
    margin-left: 4px;
    color: #667085;
    font-size: 11px;
    font-weight: 650;
}

.agent-client-form-section input,
.agent-client-form-section select {
    width: 100%;
    min-height: 50px;
}

.agent-client-phone-field {
    display: grid;
    gap: 8px;
}

.agent-client-phone-control {
    display: grid;
    grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.2fr);
    overflow: hidden;
    min-height: 50px;
    border: 1px solid #d0d5dd;
    border-radius: 14px;
    background: #ffffff;
}

.agent-client-phone-control:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.08);
}

.agent-client-country-code,
.agent-client-phone-control input {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    border: 0;
    outline: 0;
    background: transparent;
}

.agent-client-country-code {
    padding: 0 14px;
    border-right: 1px solid #e4e7ec;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.agent-client-phone-control input {
    padding: 0 16px;
    color: #101828;
    font-size: 14px;
    font-weight: 700;
}

.agent-client-phone-field > small {
    color: #667085;
    font-size: 11px;
    font-weight: 600;
}

.agent-client-create-page .ds-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 18px;
}

.agent-client-create-page .ds-action-bar .button-primary,
.agent-client-create-page .ds-action-bar .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
}

@media (max-width: 820px) {
    .agent-client-form-section .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .agent-client-create-card {
        padding: 17px;
    }

    .agent-client-form-section {
        padding: 17px;
        border-radius: 17px;
    }

    .agent-client-phone-control {
        grid-template-columns: minmax(145px, 0.9fr) minmax(0, 1.1fr);
    }

    .agent-client-country-code {
        padding: 0 10px;
        font-size: 12px;
    }

    .agent-client-create-page .ds-action-bar {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .agent-client-create-page .ds-action-bar .button-primary,
    .agent-client-create-page .ds-action-bar .button-secondary {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .agent-client-phone-control {
        grid-template-columns: 1fr;
        overflow: visible;
        border: 0;
        background: transparent;
        gap: 9px;
    }

    .agent-client-country-code,
    .agent-client-phone-control input {
        border: 1px solid #d0d5dd;
        border-radius: 13px;
        background: #ffffff;
    }

    .agent-client-country-code {
        border-right: 1px solid #d0d5dd;
    }
}

/* =========================================================
   UMOJA V3 — AGENT ASSISTED TRANSFER
   ========================================================= */

.agent-transfer-create-v3 {
    display: grid;
    gap: 22px;
}

.agent-transfer-create-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.agent-transfer-create-hero__identity {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.agent-transfer-create-hero__icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-radius: 20px;
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary);
    font-size: 32px;
}

.agent-transfer-create-hero h1 {
    margin: 4px 0;
    font-size: clamp(28px, 3vw, 40px);
}

.agent-transfer-create-hero__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 17px;
    white-space: nowrap;
}

.agent-transfer-owner-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.agent-transfer-owner-card__identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.agent-transfer-owner-avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 17px;
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary);
    font-size: 20px;
    font-weight: 900;
}

.agent-transfer-owner-card h2 {
    margin: 3px 0;
    font-size: 21px;
}

.agent-transfer-owner-card p:last-child {
    margin: 0;
    color: #667085;
    font-size: 13px;
    font-weight: 650;
}

.agent-transfer-create-form {
    display: grid;
    gap: 18px;
}

.agent-transfer-step-card {
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.agent-transfer-step-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
}

.agent-transfer-step-number {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 13px;
    background: var(--primary);
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
}

.agent-transfer-step-head h2 {
    margin: 4px 0;
    font-size: clamp(21px, 2vw, 27px);
}

.agent-transfer-step-body {
    display: grid;
    gap: 20px;
    padding: 24px;
}

.agent-transfer-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.agent-transfer-field > span {
    color: #101828;
    font-size: 13px;
    font-weight: 800;
}

.agent-transfer-field > small {
    color: #667085;
    font-size: 11px;
    font-weight: 600;
}

.agent-transfer-select-control,
.agent-transfer-money-control,
.agent-transfer-pin-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    min-height: 52px;
    border: 1px solid #d0d5dd;
    border-radius: 15px;
    background: #ffffff;
}

.agent-transfer-select-control:focus-within,
.agent-transfer-money-control:focus-within,
.agent-transfer-pin-control:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.08);
}

.agent-transfer-select-control > span,
.agent-transfer-money-control > span,
.agent-transfer-pin-control > span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    background: rgba(var(--primary-rgb), 0.07);
    color: var(--primary);
    font-size: 19px;
    font-weight: 800;
}

.agent-transfer-select-control select,
.agent-transfer-money-control input,
.agent-transfer-pin-control input {
    width: 100%;
    min-width: 0;
    height: 52px;
    padding: 0 15px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #101828;
    font-size: 14px;
    font-weight: 700;
}

.agent-transfer-money-control.is-readonly {
    background: #f8fafc;
}

.agent-transfer-money-control.is-readonly input {
    color: #475467;
}

.agent-transfer-amount-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.agent-transfer-summary {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 20px;
    background: #f8fafc;
}

.agent-transfer-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.agent-transfer-summary-head h3 {
    margin: 3px 0 0;
    font-size: 20px;
}

.agent-transfer-rate-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: #475467;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

button.agent-transfer-rate-badge {
    color: var(--primary);
    cursor: pointer;
}

.agent-transfer-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.agent-transfer-summary-grid article {
    display: grid;
    align-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 108px;
    padding: 16px;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    border-radius: 17px;
    background: #ffffff;
}

.agent-transfer-summary-grid article > span {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.agent-transfer-summary-grid article strong {
    color: var(--primary-dark);
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.agent-transfer-summary-grid article small {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.agent-transfer-summary-grid article.is-positive {
    border-color: #abefc6;
    background: #ecfdf3;
}

.agent-transfer-summary-grid article.is-positive strong {
    color: #087443;
}

.agent-transfer-summary-grid article.is-payable {
    background: rgba(var(--primary-rgb), 0.06);
}

.agent-transfer-summary-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 13px 15px;
    border-radius: 14px;
    background: #ffffff;
    color: #667085;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
}

.agent-transfer-summary-note iconify-icon {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--primary);
    font-size: 19px;
}

.agent-transfer-authorisation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
    align-items: start;
    gap: 18px;
}

.agent-transfer-consent {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-height: 110px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 17px;
    background: #f8fafc;
    cursor: pointer;
}

.agent-transfer-consent input {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    margin: 2px 0 0;
    accent-color: var(--primary);
}

.agent-transfer-consent > span {
    display: grid;
    gap: 5px;
}

.agent-transfer-consent strong {
    color: #101828;
    font-size: 14px;
}

.agent-transfer-consent small {
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}

.agent-transfer-action-bar {
    position: sticky;
    bottom: 14px;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 16px 40px rgba(16, 24, 40, 0.12),
        0 4px 12px rgba(16, 24, 40, 0.06);
    backdrop-filter: blur(12px);
}

.agent-transfer-action-bar .button-primary,
.agent-transfer-action-bar .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
}

.agent-transfer-action-bar .button-primary:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

@media (max-width: 1050px) {
    .agent-transfer-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-transfer-authorisation {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .agent-transfer-create-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 22px 18px;
        border-radius: 22px;
    }

    .agent-transfer-create-hero__back {
        width: 100%;
    }

    .agent-transfer-owner-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
        border-radius: 19px;
    }

    .agent-transfer-step-head {
        padding: 19px 18px;
    }

    .agent-transfer-step-body {
        padding: 18px;
    }

    .agent-transfer-amount-grid {
        grid-template-columns: 1fr;
    }

    .agent-transfer-summary-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .agent-transfer-create-hero__identity {
        align-items: flex-start;
    }

    .agent-transfer-create-hero__icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border-radius: 16px;
        font-size: 26px;
    }

    .agent-transfer-step-number {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
        border-radius: 11px;
    }

    .agent-transfer-step-card {
        border-radius: 19px;
    }

    .agent-transfer-summary {
        padding: 15px;
        border-radius: 17px;
    }

    .agent-transfer-summary-grid {
        grid-template-columns: 1fr;
    }

    .agent-transfer-summary-grid article {
        min-height: 92px;
    }

    .agent-transfer-action-bar {
        position: static;
        align-items: stretch;
        flex-direction: column-reverse;
        padding: 14px;
    }

    .agent-transfer-action-bar .button-primary,
    .agent-transfer-action-bar .button-secondary {
        width: 100%;
    }
}

/* UMOJA Agent Module V3.1 */
.agent-payout-v31,.agent-payout-history-v31{display:grid;gap:22px}.agent-payout-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:8px;border:1px solid rgba(var(--primary-rgb),.1);border-radius:18px;background:#fff;box-shadow:var(--shadow-card)}.agent-payout-tabs a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 14px;border-radius:13px;color:#475467;font-size:13px;font-weight:800;text-decoration:none}.agent-payout-tabs a span{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#f2f4f7;color:#344054;font-size:11px}.agent-payout-tabs a.is-active{background:var(--primary);color:#fff}.agent-payout-tabs a.is-active span{background:rgba(255,255,255,.18);color:#fff}.agent-payout-recent,.agent-payout-history-card,.agent-payout-history-filter{padding:22px;border:1px solid rgba(var(--primary-rgb),.1);border-radius:22px;background:#fff;box-shadow:var(--shadow-card)}.agent-payout-recent-list{display:grid;gap:10px;margin-top:16px}.agent-payout-recent-list article{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 17px;border-radius:15px;background:#f8fafc}.agent-payout-recent-list article>div{display:grid;gap:4px}.agent-payout-recent-list article>div:last-child{justify-items:end}.agent-payout-recent-list span:not(.request-status){color:#667085;font-size:12px}.agent-payout-history-filter form{display:grid;grid-template-columns:minmax(260px,1.5fr) repeat(2,minmax(150px,.5fr)) auto auto;align-items:end;gap:12px}.agent-payout-history-filter label{display:grid;gap:7px}.agent-payout-history-filter label>span{color:#344054;font-size:12px;font-weight:800}.agent-payout-history-filter input{min-height:48px}.agent-payout-history-table-wrap{overflow-x:auto;margin-top:18px}.agent-payout-history-table{width:100%;min-width:980px;border-collapse:collapse}.agent-payout-history-table th,.agent-payout-history-table td{padding:14px 13px;border-bottom:1px solid #eaecf0;text-align:left;vertical-align:middle}.agent-payout-history-table th{color:#667085;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.agent-payout-history-table td{color:#101828;font-size:13px}.agent-payout-history-table td small{display:block;margin-top:3px;color:#667085}.agent-payout-pagination{display:flex;justify-content:center;margin-top:20px}@media(max-width:980px){.agent-payout-history-filter form{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.agent-payout-tabs{grid-template-columns:1fr}.agent-payout-history-filter form{grid-template-columns:1fr}.agent-payout-recent-list article{align-items:flex-start;flex-direction:column}.agent-payout-recent-list article>div:last-child{justify-items:start}}


/* Integrated History additions for Agent Payouts V3.1 */

.agent-payout-history-filter,
.agent-payout-history-card {
    padding: 22px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.agent-payout-history-filter form {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.5fr)
        minmax(150px, 0.5fr)
        minmax(150px, 0.5fr)
        auto
        auto;
    align-items: end;
    gap: 12px;
}

.agent-payout-history-filter label {
    display: grid;
    gap: 7px;
}

.agent-payout-history-filter label > span {
    color: #344054;
    font-size: 12px;
    font-weight: 800;
}

.agent-payout-history-table-wrap {
    overflow-x: auto;
    margin-top: 18px;
}

.agent-payout-history-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.agent-payout-history-table th,
.agent-payout-history-table td {
    padding: 14px 13px;
    border-bottom: 1px solid #eaecf0;
    text-align: left;
    vertical-align: middle;
}

.agent-payout-history-table th {
    color: #667085;
    font-size: 11px;
    text-transform: uppercase;
}

.agent-payout-history-table td small {
    display: block;
    margin-top: 3px;
    color: #667085;
}

.agent-payout-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

@media (max-width: 980px) {
    .agent-payout-history-filter form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .agent-payout-history-filter form {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   UMOJA V3.1 — AGENT RECIPIENT SEARCH PICKER
   ========================================================= */

.umoja-recipient-picker {
    position: relative;
    display: grid;
    gap: 12px;
}

.agent-recipient-search-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    min-height: 52px;
    border: 1px solid #d0d5dd;
    border-radius: 15px;
    background: #ffffff;
}

.agent-recipient-search-control:focus-within {
    border-color: var(--primary);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), 0.08);
}

.agent-recipient-search-control > span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    background: rgba(var(--primary-rgb), 0.07);
    color: var(--primary);
    font-size: 20px;
}

.agent-recipient-search-control input {
    width: 100%;
    min-width: 0;
    height: 52px;
    padding: 0 15px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #101828;
    font-size: 14px;
    font-weight: 700;
}

.agent-recipient-results {
    position: absolute;
    top: calc(100% - 2px);
    right: 0;
    left: 0;
    z-index: 40;
    overflow-y: auto;
    max-height: 330px;
    padding: 8px;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    background: #ffffff;
    box-shadow:
        0 18px 45px rgba(16, 24, 40, 0.16),
        0 4px 12px rgba(16, 24, 40, 0.08);
}

.agent-recipient-result {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.agent-recipient-result:hover,
.agent-recipient-result:focus-visible {
    background: rgba(var(--primary-rgb), 0.06);
    outline: none;
}

.agent-recipient-result__avatar,
.agent-recipient-selected__avatar {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 13px;
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary);
    font-weight: 900;
}

.agent-recipient-result__content {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.agent-recipient-result__content strong {
    color: #101828;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.agent-recipient-result__content small {
    color: #667085;
    font-size: 12px;
}

.agent-recipient-selected {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid #abefc6;
    border-radius: 16px;
    background: #ecfdf3;
}

.agent-recipient-selected[hidden] {
    display: none;
}

.agent-recipient-selected > div {
    display: grid;
    gap: 3px;
}

.agent-recipient-selected > div > span {
    color: #087443;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.agent-recipient-selected strong {
    color: #101828;
    font-size: 15px;
}

.agent-recipient-selected small {
    color: #667085;
    font-size: 12px;
}

.agent-recipient-selected button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 11px;
    background: #ffffff;
    color: var(--primary);
    cursor: pointer;
}

.agent-recipient-loading,
.agent-recipient-no-results {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    color: #667085;
    font-size: 13px;
    font-weight: 650;
}

.agent-recipient-no-results.is-error {
    color: #b42318;
}

.agent-recipient-loading__icon {
    animation: agent-recipient-spin 0.8s linear infinite;
}

@keyframes agent-recipient-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 520px) {
    .agent-recipient-results {
        max-height: 270px;
    }

    .agent-recipient-result {
        padding: 10px;
    }

    .agent-recipient-result__avatar,
    .agent-recipient-selected__avatar {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }
}

/* =========================================================
   FIX — RECIPIENT SEARCH RESULTS OVERLAP
   ========================================================= */

/*
 * Allow the recipient results dropdown to extend outside
 * the first step card.
 */
.agent-transfer-step-card {
    overflow: visible;
}

/*
 * Keep normal rounded-card clipping only where it is needed.
 */
.agent-transfer-step-head {
    border-radius: 24px 24px 0 0;
}

.agent-transfer-step-body {
    position: relative;
    overflow: visible;
}

/*
 * The recipient step must sit above the following amount card
 * while the search results are open.
 */
.agent-transfer-create-form
.agent-transfer-step-card:first-of-type {
    position: relative;
    z-index: 30;
}

/*
 * Keep subsequent cards below the search dropdown.
 */
.agent-transfer-create-form
.agent-transfer-step-card:nth-of-type(n + 2) {
    position: relative;
    z-index: 1;
}

.umoja-recipient-picker {
    position: relative;
    z-index: 50;
}

.agent-recipient-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 999;
    overflow-y: auto;
    max-height: 320px;
    padding: 8px;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    background: #ffffff;
    box-shadow:
        0 20px 45px rgba(16, 24, 40, 0.18),
        0 6px 14px rgba(16, 24, 40, 0.08);
}

/*
 * Add temporary breathing room under the picker so the
 * dropdown does not visually collide with the next card.
 */
.umoja-recipient-picker:has(
    .agent-recipient-results:not([hidden])
) {
    margin-bottom: 18px;
}

.umoja-recipient-picker.has-open-results {
    z-index: 100;
    margin-bottom: 18px;
}

@media (max-width: 520px) {
    .agent-recipient-results {
        top: calc(100% + 6px);
        max-height: 260px;
    }
}

/* =========================================================
   UMOJA AGENT PAYOUTS V3.1 — MOBILE FIX
   ========================================================= */

@media (max-width: 720px) {

    /* Prevent the entire page from exceeding the viewport */
    .agent-page,
    .agent-page .portal-main,
    .agent-page .dashboard-shell,
    .agent-payout-v31,
    .agent-payout-history-v31 {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .agent-payout-v31,
    .agent-payout-history-v31 {
        gap: 14px;
    }

    /* Page header */
    .agent-payout-hero {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        max-width: 100%;
        padding: 18px;
        border-radius: 20px;
        overflow: hidden;
    }

    .agent-payout-hero__identity {
        align-items: flex-start;
        width: 100%;
        min-width: 0;
        gap: 12px;
    }

    .agent-payout-hero__icon {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        border-radius: 15px;
        font-size: 23px;
    }

    .agent-payout-hero__identity > div {
        min-width: 0;
        width: 100%;
    }

    .agent-payout-hero h1 {
        margin: 3px 0 5px;
        font-size: 22px;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .agent-payout-hero .muted {
        font-size: 12px;
        line-height: 1.45;
    }

    .agent-payout-hero .button-secondary {
        width: 100%;
    }

    /* KPI cards */
    .agent-payout-kpis {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
    }

    .agent-payout-kpi {
        width: 100%;
        min-width: 0;
        padding: 16px;
        border-radius: 18px;
    }

    .agent-payout-kpi > div {
        min-width: 0;
    }

    .agent-payout-kpi strong {
        font-size: 24px;
        line-height: 1.05;
        overflow-wrap: anywhere;
    }

    .agent-payout-kpi small {
        line-height: 1.35;
    }

    /* Workflow tabs */
    .agent-payout-tabs {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        width: 100%;
        padding: 7px;
        border-radius: 16px;
    }

    .agent-payout-tabs a {
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0 12px;
        text-align: left;
    }

    .agent-payout-tabs a span {
        margin-left: auto;
    }

    /* Queue and history containers */
    .agent-payout-queue,
    .agent-payout-history-card,
    .agent-payout-history-filter,
    .agent-payout-recent {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 16px;
        border-radius: 19px;
        overflow: hidden;
    }

    .agent-payout-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .agent-payout-section-head h2 {
        font-size: 21px;
        line-height: 1.2;
    }

    /* Payout cards */
    .agent-payout-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 16px;
        border-radius: 18px;
        overflow: hidden;
    }

    .agent-payout-card__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .agent-payout-card__reference {
        width: 100%;
        min-width: 0;
    }

    .agent-payout-card__reference > div {
        min-width: 0;
    }

    .agent-payout-card__reference h3 {
        font-size: 18px;
        overflow-wrap: anywhere;
    }

    /* Sender and receiver */
    .agent-payout-parties {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

    .agent-payout-person {
        width: 100%;
        min-width: 0;
        padding: 13px;
    }

    .agent-payout-person > div {
        min-width: 0;
    }

    .agent-payout-person strong,
    .agent-payout-person small {
        overflow-wrap: anywhere;
    }

    .agent-payout-party-arrow {
        transform: rotate(90deg);
        justify-self: center;
    }

    /* Financial values */
    .agent-payout-financial-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

    .agent-payout-financial-grid > div {
        min-width: 0;
        min-height: 86px;
        padding: 14px;
    }

    .agent-payout-financial-grid strong {
        font-size: 21px;
        overflow-wrap: anywhere;
    }

    /* Payment review */
    .agent-payout-review-panel,
    .agent-payout-code-panel {
        width: 100%;
        min-width: 0;
        padding: 14px;
        border-radius: 16px;
    }

    .agent-payout-evidence-grid {
        grid-template-columns: 1fr;
    }

    .agent-payout-review-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .agent-payout-review-actions form,
    .agent-payout-reject-form,
    .agent-unlock-form {
        width: 100%;
        min-width: 0;
    }

    .agent-payout-review-actions button,
    .agent-payout-reject-form button,
    .agent-unlock-form button {
        width: 100%;
    }

    /* History filter */
    .agent-payout-history-filter form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
    }

    .agent-payout-history-filter label,
    .agent-payout-history-filter input,
    .agent-payout-history-filter .button-primary,
    .agent-payout-history-filter .button-secondary {
        width: 100%;
        min-width: 0;
    }

    /* History table becomes stacked cards */
    .agent-payout-history-table-wrap {
        width: 100%;
        overflow: visible;
    }

    .agent-payout-history-table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .agent-payout-history-table thead {
        display: none;
    }

    .agent-payout-history-table tbody,
    .agent-payout-history-table tr,
    .agent-payout-history-table td {
        display: block;
        width: 100%;
    }

    .agent-payout-history-table tr {
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid #eaecf0;
        border-radius: 16px;
        background: #f8fafc;
    }

    .agent-payout-history-table td {
        display: grid;
        grid-template-columns: minmax(105px, 0.8fr) minmax(0, 1.2fr);
        gap: 10px;
        padding: 8px 0;
        border: 0;
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .agent-payout-history-table td::before {
        color: #667085;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .agent-payout-history-table td:nth-child(1)::before {
        content: "Date";
    }

    .agent-payout-history-table td:nth-child(2)::before {
        content: "Reference";
    }

    .agent-payout-history-table td:nth-child(3)::before {
        content: "Sender";
    }

    .agent-payout-history-table td:nth-child(4)::before {
        content: "Receiver";
    }

    .agent-payout-history-table td:nth-child(5)::before {
        content: "Receiver gets";
    }

    .agent-payout-history-table td:nth-child(6)::before {
        content: "ZAR equivalent";
    }

    .agent-payout-history-table td:nth-child(7)::before {
        content: "Status";
    }

    /* Pager */
    .agent-payout-pagination {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 4px;
    }

    .agent-payout-pagination .pagination {
        flex-wrap: nowrap;
        min-width: max-content;
    }
}

/* =========================================================
   UMOJA ADMIN PORTAL — FINAL DESKTOP LAYOUT OVERRIDE
   The Admin v3.1 sidebar is fixed, so the body must NOT also
   reserve a CSS Grid sidebar column.
   ========================================================= */

@media (min-width: 861px) {
    /*
     * Critical correction:
     * global.css previously made body.admin-page a two-column grid.
     * The new layout also offsets .admin-shell, causing a second
     * sidebar-width blank column.
     */
    html body.admin-page.admin-portal-page {
        display: block !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
        min-height: 100vh;
    }

    /*
     * Use the same sidebar dimensions as the Admin v3.1 layout.
     */
    html body.admin-portal-page {
        --admin-sidebar-width: 272px;
        --admin-sidebar-collapsed: 82px;
    }

    html body.admin-portal-page .admin-sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: var(--admin-sidebar-width) !important;
        max-width: none !important;
        height: 100vh !important;
        transform: none !important;
    }

    /*
     * The shell receives one offset only: the width of the fixed sidebar.
     */
    html body.admin-portal-page .admin-shell {
        display: block !important;
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;

        width: calc(100% - var(--admin-sidebar-width)) !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 0 0 var(--admin-sidebar-width) !important;
        padding: 0 !important;

        transform: none !important;
        translate: none !important;
    }

    html body.admin-portal-page .admin-shell > .admin-topbar,
    html body.admin-portal-page .admin-shell > .admin-content {
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;

        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;
        translate: none !important;
    }

    html body.admin-portal-page .admin-topbar {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    html body.admin-portal-page .admin-content,
    html body.admin-portal-page .portal-main {
        position: relative !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 24px 28px !important;

        transform: none !important;
        translate: none !important;
    }

    /*
     * Ensure the first page wrapper fills the corrected content area.
     */
    html body.admin-portal-page .admin-content > .ds-page,
    html body.admin-portal-page .admin-content > .portal-page,
    html body.admin-portal-page .admin-content > section:first-child {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /*
     * The v3.1 JavaScript applies admin-sidebar-collapsed directly
     * to the body, rather than is-admin-sidebar-collapsed.
     */
    html body.admin-portal-page.admin-sidebar-collapsed .admin-sidebar {
        width: var(--admin-sidebar-collapsed) !important;
    }

    html body.admin-portal-page.admin-sidebar-collapsed .admin-shell {
        width: calc(100% - var(--admin-sidebar-collapsed)) !important;
        margin-left: var(--admin-sidebar-collapsed) !important;
    }
}


/* =========================================================
   ADMIN NAVIGATION — CLEARER ACTIVE ITEM
   ========================================================= */

.admin-portal-page .admin-side-link {
    border: 1px solid transparent;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.admin-portal-page .admin-side-link:hover {
    border-color: rgba(var(--primary-rgb), 0.12);
    background: rgba(var(--primary-rgb), 0.07);
    color: var(--primary-dark);
}

.admin-portal-page .admin-side-link.is-active {
    border-color: rgba(var(--primary-rgb), 0.20) !important;
    background: linear-gradient(
        90deg,
        rgba(var(--primary-rgb), 0.18) 0%,
        rgba(var(--primary-rgb), 0.10) 72%,
        rgba(var(--primary-rgb), 0.05) 100%
    ) !important;
    color: var(--primary-dark) !important;
    font-weight: 800 !important;
    box-shadow:
        0 8px 22px rgba(var(--primary-rgb), 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.36);
}

.admin-portal-page .admin-side-link.is-active::before {
    content: "";
    position: absolute;
    top: 7px !important;
    bottom: 7px !important;
    left: 0;
    width: 4px !important;
    border-radius: 0 6px 6px 0 !important;
    background: var(--primary) !important;
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.28);
}

.admin-portal-page .admin-side-link.is-active .admin-side-icon,
.admin-portal-page .admin-side-link.is-active .admin-side-label {
    color: var(--primary-dark) !important;
    opacity: 1 !important;
}

.admin-portal-page .admin-side-link.is-active .admin-side-count {
    border: 1px solid rgba(var(--primary-rgb), 0.14);
    background: #ffffff !important;
    color: var(--primary-dark) !important;
}


/* =========================================================
   MOBILE RESET
   ========================================================= */

@media (max-width: 860px) {
    html body.admin-page.admin-portal-page {
        display: block !important;
        grid-template-columns: none !important;
    }

    html body.admin-portal-page .admin-shell,
    html body.admin-portal-page.admin-sidebar-collapsed .admin-shell {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 0 !important;
    }

    html body.admin-portal-page .admin-content,
    html body.admin-portal-page .portal-main {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 18px 14px 88px !important;
    }
}

/* ==========================================================
   MOBILE SIDEBAR
   Always show menu names
   ========================================================== */

@media (max-width: 860px) {

    /* Never collapse the mobile sidebar */
    body.admin-sidebar-collapsed .admin-side-group-heading span,
    body.admin-sidebar-collapsed .admin-side-label,
    body.admin-sidebar-collapsed .admin-side-count,
    body.admin-sidebar-collapsed .admin-side-dropdown-chevron {
        display: initial !important;
    }

    body.admin-sidebar-collapsed .admin-side-link {
        justify-content: flex-start !important;
        padding: 0 16px !important;
        gap: 14px !important;
    }

    body.admin-sidebar-collapsed .admin-side-dropdown-title {
        justify-content: space-between !important;
    }

    body.admin-sidebar-collapsed .admin-sidebar-footer span {
        display: inline !important;
    }
}

@media (max-width: 860px) {

    .admin-side-link {
        min-height: 50px;
        padding: 0 16px;
        gap: 14px;
    }

    .admin-side-label {
        display: block;
        font-size: 0.92rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .admin-side-icon {
        width: 22px;
        text-align: center;
        flex-shrink: 0;
    }
}

/* =========================================================
   ADMIN PROJECT CARDS
   ========================================================= */

.project-card-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.project-card-metric {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 6px;
    min-height: 82px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(var(--primary-rgb), 0.045);
}

.project-card-metric > span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.project-card-metric > strong {
    color: #111827;
    font-size: 16px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.project-card-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--primary-rgb), 0.1);
}

.project-card-actions > a,
.project-card-actions > form {
    min-width: 0;
    flex: 1 1 0;
}

.project-delete-form {
    margin: 0;
}

.project-icon-action {
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid rgba(var(--primary-rgb), 0.14);
    border-radius: 11px;
    background: #fff;
    color: var(--primary-dark);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.project-icon-action iconify-icon {
    font-size: 18px;
}

.project-icon-action:hover {
    border-color: rgba(var(--primary-rgb), 0.28);
    background: rgba(var(--primary-rgb), 0.06);
    transform: translateY(-1px);
}

.project-icon-action.is-danger {
    border-color: rgba(180, 35, 24, 0.18);
    color: #b42318;
}

.project-icon-action.is-danger:hover {
    border-color: rgba(180, 35, 24, 0.3);
    background: #fff1f0;
}

@media (max-width: 640px) {
    .project-card {
        gap: 14px;
        padding: 16px;
        border-radius: 16px;
    }

    .project-card-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .project-card-metric {
        min-height: 74px;
        padding: 12px;
        border-radius: 12px;
    }

    .project-card-metric > strong {
        font-size: 15px;
    }

    .project-card-actions {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        padding-top: 10px;
    }

    .project-card-actions > a,
    .project-card-actions > form {
        width: 100%;
    }

    .project-icon-action {
        min-width: 0;
        min-height: 48px;
        padding: 7px 4px;
        border-radius: 10px;
    }

    .project-icon-action iconify-icon {
        font-size: 20px;
    }

    /* Keep labels for accessibility but show only icons visually */
    .project-icon-action span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        clip-path: inset(50%);
    }
}

/* ==========================================================
   UMOJA DESIGN SYSTEM V3
   GLOBAL NATIVE CHECKBOX / RADIO RESET
   Keep this section at the very end of global.css.
   ========================================================== */

/* Checkboxes must never inherit text-input sizing. */
input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    appearance: auto !important;

    inline-size: 16px !important;
    block-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    min-inline-size: 16px !important;
    min-block-size: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;

    flex: 0 0 16px !important;
    margin: 0 !important;
    padding: 0 !important;

    border-radius: 3px !important;
    background: initial !important;
    box-shadow: none !important;
    outline-offset: 2px;

    accent-color: var(--primary, #731f71);
    cursor: pointer;
    vertical-align: middle;
}

input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(var(--primary-rgb), .28) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: .55;
}

/* Radio buttons use the same compact native-control strategy. */
input[type="radio"] {
    -webkit-appearance: radio !important;
    appearance: auto !important;
    inline-size: 16px !important;
    block-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex: 0 0 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: var(--primary, #731f71);
    cursor: pointer;
}

/* Keep selection controls centered without changing the entire first column. */
:where(
    table,
    .admin-table,
    .attendance-table,
    .finance-table,
    .ds-table,
    .loan-desktop-table,
    .contribution-table,
    .investment-table
) input[type="checkbox"] {
    display: block !important;
    margin-inline: auto !important;
}

/* Labels containing a checkbox should not become full-size form fields. */
label:has(input[type="checkbox"]),
.inline-check,
.permission-check,
.loan-mobile-select,
.contribution-record-select,
.transfer-record-select,
.annual-capital-select,
.meeting-record-select,
.project-record-select {
    align-items: center;
}

/* ==========================================================
   UMOJA DS v3
   Transfer Hero Button Fix
   ========================================================== */

.transfer-hero-action,
.transfer-hero-action:link,
.transfer-hero-action:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: auto;
    min-width: 160px;
    min-height: 46px;

    padding: 0 18px;

    border-radius: 12px;

    background: var(--primary);
    color: #fff !important;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;
    white-space: nowrap;

    transition: all .2s ease;
}

.transfer-hero-action:hover{
    background: var(--primary-dark);
    color:#fff;
}

.transfer-hero-action iconify-icon,
.transfer-hero-action i{
    flex:0 0 auto;
    font-size:16px;
    line-height:1;
}

.transfer-hero-action span{
    display:inline-flex;
    align-items:center;
    line-height:1;
}

/* Remove any pseudo-elements injected by global styles */

.transfer-hero-action::before,
.transfer-hero-action::after,
.transfer-hero-action span::before,
.transfer-hero-action span::after,
.transfer-hero-action i::before,
.transfer-hero-action i::after{
    content:none !important;
}

/* Mobile */

@media (max-width:768px){

    .transfer-hero-action{

        width:100%;
        min-width:0;

        justify-content:center;

        padding:12px 18px;

        border-radius:14px;

        font-size:15px;
    }

    .transfer-hero-action iconify-icon,
    .transfer-hero-action i{
        font-size:18px;
    }
}

/* ==========================================================
   UMOJA DS V3
   Account mode switch inside member profile menu
   Add this block to the END of assets/css/global.css
   ========================================================== */

.client-menu-mode {
    display: grid;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid #eaecf0;
    border-bottom: 1px solid #eaecf0;
    background: #fafbfc;
}

.client-menu-mode-label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.client-menu-mode-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary-dark);
    font-size: 18px;
}

.client-menu-mode-label > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.client-menu-mode-label strong {
    color: #344054;
    font-size: 12px;
    font-weight: 800;
}

.client-menu-mode-label small {
    color: #667085;
    font-size: 9px;
    font-weight: 650;
}

.client-menu-mode-control {
    min-width: 0;
}

/*
 * Reset the original header presentation of the account switch when
 * the same component is rendered inside the profile menu.
 */
.client-menu-mode-control .account-mode-switch,
.client-menu-mode-control .mode-switch,
.client-menu-mode-control form {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.client-menu-mode-control select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 36px 0 12px !important;
    border: 1px solid #dfe3e8 !important;
    border-radius: 9px !important;
    background-color: #fff !important;
    color: #344054 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

/*
 * Hide icon-only presentation inside the dropdown when the component
 * uses a button/list rather than a select.
 */
.client-menu-mode-control button,
.client-menu-mode-control a {
    width: 100%;
    min-height: 40px;
    justify-content: flex-start;
    border-radius: 9px;
}

/*
 * Safety rule: the account switch must not appear again in the member
 * header utilities.
 */
.member-page .client-utilities > .account-mode-switch,
.member-page .client-utilities > .mode-switch,
.member-page .client-utilities > form[action*="mode"] {
    display: none !important;
}

.client-menu-links {
    display: grid;
}

.client-menu-item > span {
    min-width: 0;
}

@media (max-width: 760px) {
    .client-menu-mode {
        padding: 12px 16px;
    }

    .client-menu-mode-control select {
        min-height: 42px !important;
        font-size: 13px !important;
    }
}

/* ==========================================================
   UMOJA DS V3
   Shared Workspace Switcher
   Use in Member, Agent and Admin profile menus.
   Add this block at the END of global.css.
   ========================================================== */

.workspace-switcher-v3 {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid #eaecf0;
    border-bottom: 1px solid #eaecf0;
    background: #fafbfc;
}

.workspace-switcher-v3__head {
    display: flex;
    align-items: center;
    gap: 9px;
}

.workspace-switcher-v3__head-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 9px;
    background: rgba(var(--primary-rgb), .09);
    color: var(--primary-dark);
    font-size: 17px;
}

.workspace-switcher-v3__head > div {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.workspace-switcher-v3__head strong {
    color: #344054;
    font-size: 12px;
    font-weight: 800;
}

.workspace-switcher-v3__head small {
    color: #667085;
    font-size: 9px;
    line-height: 1.3;
}

.workspace-switcher-v3__current {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 11px;
    border: 1px solid #dfe3e8;
    border-radius: 12px;
    background: #fff;
}

.workspace-switcher-v3__current.is-member {
    border-color: rgba(47, 128, 237, .18);
    background: rgba(47, 128, 237, .05);
}

.workspace-switcher-v3__current.is-client {
    border-color: rgba(36, 153, 239, .18);
    background: rgba(36, 153, 239, .05);
}

.workspace-switcher-v3__current.is-agent {
    border-color: rgba(24, 169, 87, .18);
    background: rgba(24, 169, 87, .05);
}

.workspace-switcher-v3__current.is-admin,
.workspace-switcher-v3__current.is-root {
    border-color: rgba(var(--primary-rgb), .18);
    background: rgba(var(--primary-rgb), .06);
}

.workspace-switcher-v3__workspace-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 10px;
    background: #fff;
    color: var(--primary-dark);
    font-size: 19px;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .05);
}

.workspace-switcher-v3__current > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.workspace-switcher-v3__current > div > span,
.workspace-switcher-v3__change-copy > span {
    color: #667085;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.workspace-switcher-v3__current > div > strong {
    overflow: hidden;
    color: #1d2939;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-switcher-v3__current > div > small,
.workspace-switcher-v3__change-copy > small {
    color: #667085;
    font-size: 8px;
    line-height: 1.35;
}

.workspace-switcher-v3__current-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(24, 169, 87, .10);
    color: #087443;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.workspace-switcher-v3__change {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding-top: 2px;
}

.workspace-switcher-v3__change-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

/*
 * Reset the old icon-only account switch presentation.
 * The existing component keeps its routes, CSRF and role logic.
 */
.workspace-switcher-v3__control {
    min-width: 0;
}

.workspace-switcher-v3__control .account-mode-switch,
.workspace-switcher-v3__control .mode-switch,
.workspace-switcher-v3__control form {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.workspace-switcher-v3__control button,
.workspace-switcher-v3__control a {
    width: auto !important;
    min-width: 112px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 11px !important;
    border: 1px solid rgba(var(--primary-rgb), .18) !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: var(--primary-dark) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.workspace-switcher-v3__control button::before,
.workspace-switcher-v3__control button::after,
.workspace-switcher-v3__control a::before,
.workspace-switcher-v3__control a::after {
    content: none !important;
    display: none !important;
}

.workspace-switcher-v3__control select {
    width: 100% !important;
    min-width: 132px !important;
    min-height: 38px !important;
    padding: 0 32px 0 10px !important;
    border: 1px solid rgba(var(--primary-rgb), .18) !important;
    border-radius: 9px !important;
    background-color: #fff !important;
    color: var(--primary-dark) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
}

/*
 * Prevent the switch from being rendered in any top navigation after
 * this shared profile-menu pattern is adopted.
 */
.client-utilities > .account-mode-switch,
.client-utilities > .mode-switch,
.client-utilities > form[action*="mode"],
.agent-header-actions > .account-mode-switch,
.admin-header-actions > .account-mode-switch {
    display: none !important;
}

@media (max-width: 520px) {
    .workspace-switcher-v3 {
        padding: 12px 14px;
    }

    .workspace-switcher-v3__current {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .workspace-switcher-v3__current-badge {
        grid-column: 2;
        justify-self: start;
    }

    .workspace-switcher-v3__change {
        grid-template-columns: 1fr;
    }

    .workspace-switcher-v3__control,
    .workspace-switcher-v3__control form,
    .workspace-switcher-v3__control button,
    .workspace-switcher-v3__control a,
    .workspace-switcher-v3__control select {
        width: 100% !important;
    }
}


/* ==========================================================
   UMOJA V3 — Shared Workspace Switch Buttons
   ========================================================== */

.account-workspace-switcher {
    display: grid;
    gap: 7px;
    width: 100%;
}

.account-switch-mini-form {
    width: 100%;
    margin: 0;
}

.account-switch-mini-btn {
    width: 100%;
    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

    padding: 8px 11px;

    border: 1px solid rgba(var(--primary-rgb), 0.16);
    border-radius: 9px;

    background: #fff;
    color: var(--primary-dark);

    font: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;

    cursor: pointer;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.account-switch-mini-btn:hover {
    border-color: rgba(var(--primary-rgb), 0.35);
    background: rgba(var(--primary-rgb), 0.06);
    transform: translateY(-1px);
}

.account-switch-mini-btn iconify-icon {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;
    flex: 0 0 28px;

    border-radius: 8px;

    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary-dark);

    font-size: 16px;
}

.account-switch-mini-btn span {
    min-width: 0;
    text-align: left;
}

.account-switch-mini-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.account-switch-mini-btn::before,
.account-switch-mini-btn::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================
   UMOJA V3 — Permission-based workspace switcher
   ========================================================== */

.account-workspace-switcher {
    display: grid;
    gap: 8px;
    width: 100%;
}

.account-switch-mini-form {
    width: 100%;
    margin: 0;
}

.account-switch-mini-btn {
    width: 100%;
    min-height: 58px;

    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 9px;

    padding: 9px 10px;

    border: 1px solid #e4e7ec;
    border-radius: 11px;

    background: #fff;
    color: #344054;

    font: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.account-switch-mini-btn:hover {
    border-color: rgba(var(--primary-rgb), 0.28);
    background: rgba(var(--primary-rgb), 0.04);
    box-shadow: 0 7px 18px rgba(16, 24, 40, 0.07);
    transform: translateY(-1px);
}

.account-switch-mini-btn__icon {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary-dark);

    font-size: 18px;
}

.account-switch-mini-btn.is-member
.account-switch-mini-btn__icon {
    background: rgba(47, 128, 237, 0.09);
    color: #175cd3;
}

.account-switch-mini-btn.is-agent
.account-switch-mini-btn__icon {
    background: rgba(24, 169, 87, 0.10);
    color: #087443;
}

.account-switch-mini-btn.is-admin
.account-switch-mini-btn__icon {
    background: rgba(var(--primary-rgb), 0.10);
    color: var(--primary-dark);
}

.account-switch-mini-btn__content {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.account-switch-mini-btn__content strong {
    color: #344054;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
}

.account-switch-mini-btn__content small {
    overflow: hidden;
    color: #667085;
    font-size: 8px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-switch-mini-btn__arrow {
    color: #98a2b3;
    font-size: 16px;
}

.account-switch-mini-btn:hover
.account-switch-mini-btn__arrow {
    color: var(--primary-dark);
}

.account-switch-mini-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.account-switch-mini-btn::before,
.account-switch-mini-btn::after,
.account-switch-mini-btn span::before,
.account-switch-mini-btn span::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 520px) {
    .account-switch-mini-btn {
        min-height: 56px;
        grid-template-columns: 34px minmax(0, 1fr) 16px;
        gap: 8px;
        padding: 8px 9px;
    }

    .account-switch-mini-btn__icon {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }

    .account-switch-mini-btn__content strong {
        font-size: 10px;
    }

    .account-switch-mini-btn__content small {
        font-size: 7.5px;
    }
}

/* ==========================================================
   UMOJA V3 — Workspace switch cards
   Add at the END of global.css
   ========================================================== */

.account-workspace-switcher {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.account-switch-workspace-form {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.account-switch-workspace-card {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;

    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;

    margin: 0 !important;
    padding: 11px !important;

    border: 1px solid #e4e7ec !important;
    border-radius: 12px !important;

    background: #fff !important;
    color: #344054 !important;

    font: inherit !important;
    text-align: left !important;

    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
    overflow: hidden !important;

    transition:
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

.account-switch-workspace-card:hover {
    border-color: rgba(var(--primary-rgb), .28) !important;
    background: rgba(var(--primary-rgb), .035) !important;
    box-shadow: 0 8px 18px rgba(16, 24, 40, .07) !important;
    transform: translateY(-1px) !important;
}

.account-switch-workspace-card__icon {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 42px !important;

    border-radius: 11px !important;
    background: rgba(var(--primary-rgb), .09) !important;
    color: var(--primary-dark) !important;
    font-size: 20px !important;
}

.account-switch-workspace-card.is-member
.account-switch-workspace-card__icon {
    background: rgba(47, 128, 237, .09) !important;
    color: #175cd3 !important;
}

.account-switch-workspace-card.is-agent
.account-switch-workspace-card__icon {
    background: rgba(24, 169, 87, .10) !important;
    color: #087443 !important;
}

.account-switch-workspace-card.is-admin
.account-switch-workspace-card__icon {
    background: rgba(var(--primary-rgb), .10) !important;
    color: var(--primary-dark) !important;
}

.account-switch-workspace-card__body {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
}

.account-switch-workspace-card__eyebrow {
    color: #98a2b3 !important;
    font-size: 7px !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.account-switch-workspace-card__body strong {
    color: #344054 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

.account-switch-workspace-card__body small {
    color: #667085 !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
}

.account-switch-workspace-card__action {
    min-width: 68px !important;
    min-height: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    padding: 0 9px !important;

    border: 1px solid rgba(var(--primary-rgb), .16) !important;
    border-radius: 9px !important;

    background: #fff !important;
    color: var(--primary-dark) !important;

    font-size: 8px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.account-switch-workspace-card__action iconify-icon {
    font-size: 14px !important;
}

.account-switch-workspace-card:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.account-switch-workspace-card::before,
.account-switch-workspace-card::after,
.account-switch-workspace-card span::before,
.account-switch-workspace-card span::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 520px) {
    .account-switch-workspace-card {
        min-height: 88px !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 9px !important;
        padding: 10px !important;
    }

    .account-switch-workspace-card__icon {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
        font-size: 18px !important;
    }

    .account-switch-workspace-card__body strong {
        font-size: 10px !important;
    }

    .account-switch-workspace-card__body small {
        font-size: 7.5px !important;
    }

    .account-switch-workspace-card__action {
        grid-column: 2 !important;
        justify-self: start !important;
        min-width: 82px !important;
        min-height: 32px !important;
    }
}

/* ==========================================================
   UMOJA V3 — Workspace switch cards
   Add at the END of global.css
   ========================================================== */

.account-workspace-switcher {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.account-switch-workspace-form {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.account-switch-workspace-card {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;

    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;

    margin: 0 !important;
    padding: 11px !important;

    border: 1px solid #e4e7ec !important;
    border-radius: 12px !important;

    background: #fff !important;
    color: #344054 !important;

    font: inherit !important;
    text-align: left !important;

    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
    overflow: hidden !important;

    transition:
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

.account-switch-workspace-card:hover {
    border-color: rgba(var(--primary-rgb), .28) !important;
    background: rgba(var(--primary-rgb), .035) !important;
    box-shadow: 0 8px 18px rgba(16, 24, 40, .07) !important;
    transform: translateY(-1px) !important;
}

.account-switch-workspace-card__icon {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 42px !important;

    border-radius: 11px !important;
    background: rgba(var(--primary-rgb), .09) !important;
    color: var(--primary-dark) !important;
    font-size: 20px !important;
}

.account-switch-workspace-card.is-member
.account-switch-workspace-card__icon {
    background: rgba(47, 128, 237, .09) !important;
    color: #175cd3 !important;
}

.account-switch-workspace-card.is-agent
.account-switch-workspace-card__icon {
    background: rgba(24, 169, 87, .10) !important;
    color: #087443 !important;
}

.account-switch-workspace-card.is-admin
.account-switch-workspace-card__icon {
    background: rgba(var(--primary-rgb), .10) !important;
    color: var(--primary-dark) !important;
}

.account-switch-workspace-card__body {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
}

.account-switch-workspace-card__eyebrow {
    color: #98a2b3 !important;
    font-size: 7px !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.account-switch-workspace-card__body strong {
    color: #344054 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

.account-switch-workspace-card__body small {
    color: #667085 !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
}

.account-switch-workspace-card__action {
    min-width: 68px !important;
    min-height: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    padding: 0 9px !important;

    border: 1px solid rgba(var(--primary-rgb), .16) !important;
    border-radius: 9px !important;

    background: #fff !important;
    color: var(--primary-dark) !important;

    font-size: 8px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.account-switch-workspace-card__action iconify-icon {
    font-size: 14px !important;
}

.account-switch-workspace-card:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.account-switch-workspace-card::before,
.account-switch-workspace-card::after,
.account-switch-workspace-card span::before,
.account-switch-workspace-card span::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 520px) {
    .account-switch-workspace-card {
        min-height: 88px !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 9px !important;
        padding: 10px !important;
    }

    .account-switch-workspace-card__icon {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
        font-size: 18px !important;
    }

    .account-switch-workspace-card__body strong {
        font-size: 10px !important;
    }

    .account-switch-workspace-card__body small {
        font-size: 7.5px !important;
    }

    .account-switch-workspace-card__action {
        grid-column: 2 !important;
        justify-self: start !important;
        min-width: 82px !important;
        min-height: 32px !important;
    }
}


/* ==========================================================
   Shared workspace switcher container adjustments
   ========================================================== */

.workspace-switcher-v3__control,
.workspace-switcher-v3__control .account-workspace-switcher {
    width: 100% !important;
    min-width: 0 !important;
}

.workspace-switcher-v3__change {
    grid-template-columns: 1fr !important;
}

.admin-workspace-switcher {
    margin: 0 0 6px;
    border-radius: 11px;
}

.admin-user-menu .workspace-switcher-v3 {
    padding: 12px;
}

@media (max-width: 520px) {
    .workspace-switcher-v3__change {
        grid-template-columns: 1fr !important;
    }
}


/* UMOJA DESIGN SYSTEM V3.1 — STANDARDISED UPLOADS */

.ds-upload-v31 {
    --upload-border: #d8dce4;
    --upload-muted: #667085;
    display: grid;
    gap: 6px;
    width: 100%;
}

.ds-upload-v31__input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ds-upload-v31__dropzone {
    min-height: 54px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--upload-border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.ds-upload-v31__dropzone:hover,
.ds-upload-v31.is-dragging .ds-upload-v31__dropzone,
.ds-upload-v31:focus-within .ds-upload-v31__dropzone {
    border-color: rgba(var(--primary-rgb), .48);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .06);
}
.ds-upload-v31__icon {
    width: 34px; height: 34px; display:grid; place-items:center;
    border-radius: 8px; background: rgba(var(--primary-rgb), .07);
    color: var(--primary-dark); font-size: 18px;
}
.ds-upload-v31__copy { min-width:0; display:grid; gap:2px; }
.ds-upload-v31__copy strong { color:#1d2939; font-size:11px; font-weight:700; }
.ds-upload-v31__copy small { color:var(--upload-muted); font-size:9px; line-height:1.35; }
.ds-upload-v31__browse {
    min-height:34px; display:inline-flex; align-items:center; justify-content:center;
    padding:0 11px; border:1px solid rgba(var(--primary-rgb), .18); border-radius:8px;
    background:#fff; color:var(--primary-dark); font-size:9px; font-weight:750; white-space:nowrap;
}
.ds-upload-v31__selection {
    display:grid; grid-template-columns:minmax(0,1fr) auto 30px; align-items:center; gap:8px;
    min-height:44px; padding:7px 8px 7px 10px; border:1px solid rgba(24,169,87,.18);
    border-radius:9px; background:rgba(24,169,87,.04);
}
.ds-upload-v31__selection[hidden] { display:none !important; }
.ds-upload-v31__preview { display:none; }
.ds-upload-v31__file { min-width:0; display:grid; gap:1px; }
.ds-upload-v31__file strong { overflow:hidden; color:#344054; font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.ds-upload-v31__file small { color:#667085; font-size:8px; }
.ds-upload-v31__replace,.ds-upload-v31__remove { border:0; background:transparent; cursor:pointer; }
.ds-upload-v31__replace { color:var(--primary-dark); font-size:9px; font-weight:750; }
.ds-upload-v31__remove { width:30px; height:30px; display:grid; place-items:center; border-radius:7px; color:#b42318; font-size:16px; }
.ds-upload-v31__remove:hover { background:rgba(180,35,24,.07); }
.ds-upload-v31__footer { display:flex; justify-content:space-between; gap:8px; color:#667085; font-size:8px; }
.ds-upload-v31__footer span { display:inline-flex; align-items:center; gap:4px; }
.ds-upload-v31__error { margin:0; color:#b42318; font-size:9px; font-weight:700; }
.ds-upload-v31.has-error .ds-upload-v31__dropzone,.ds-upload-v31.is-invalid .ds-upload-v31__dropzone { border-color:rgba(180,35,24,.55); }
.ds-upload-v31.is-compact .ds-upload-v31__dropzone { min-height:48px; padding:7px 9px; }
.ds-upload-v31.is-auto-generated { margin-top:4px; }
.transfer-payment-upload,.transfer-payment-upload-v3,.upload-zone,.aav3-upload-card,.acv3-upload-card,.documents-upload-drop,.secure-file-field:has(input[type="file"]) { border-radius:10px !important; }
@media (max-width:640px) {
    .ds-upload-v31__dropzone { min-height:52px; grid-template-columns:32px minmax(0,1fr) auto; gap:8px; padding:8px; }
    .ds-upload-v31__icon { width:32px; height:32px; font-size:17px; }
    .ds-upload-v31__browse { min-height:32px; padding:0 9px; }
    .ds-upload-v31__selection { grid-template-columns:minmax(0,1fr) auto 30px; }
    .ds-upload-v31__footer { flex-direction:row; align-items:center; }
}

/* ========================================================================== */
/* UMOJA V3.1 STABLE — ANNUAL CAPITAL VERIFY MENU FIX                         */
/* Keeps the View and Verify actions aligned and raises the open menu above    */
/* neighbouring table rows instead of allowing it to render underneath them.   */
/* ========================================================================== */

.annual-capital-admin-v3 .acv3-col-action {
    width: 118px !important;
}

.annual-capital-admin-v3 .acv3-table th:last-child,
.annual-capital-admin-v3 .acv3-table td:last-child {
    overflow: visible !important;
    text-align: center !important;
}

.annual-capital-admin-v3 .acv3-table tbody tr {
    position: relative;
    z-index: 0;
}

.annual-capital-admin-v3 .acv3-table tbody tr:hover {
    z-index: 2;
}

.annual-capital-admin-v3 .acv3-table tbody tr:has(.acv3-action-menu[open]) {
    z-index: 500;
}

.annual-capital-admin-v3 .acv3-table tbody tr:has(.acv3-action-menu[open]) td {
    position: relative;
    overflow: visible !important;
    z-index: 500;
}

.annual-capital-admin-v3 .acv3-row-actions {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    overflow: visible;
    white-space: nowrap;
}

.annual-capital-admin-v3 .acv3-row-actions > * {
    flex: 0 0 auto;
}

.annual-capital-admin-v3 .acv3-proof-action,
.annual-capital-admin-v3 .acv3-view-action,
.annual-capital-admin-v3 .acv3-action-menu > summary {
    position: relative;
    z-index: 1;
}

.annual-capital-admin-v3 .acv3-action-menu {
    position: relative;
    z-index: 10;
    overflow: visible;
}

.annual-capital-admin-v3 .acv3-action-menu[open] {
    z-index: 1000;
}

.annual-capital-admin-v3 .acv3-action-menu > summary {
    list-style: none;
}

.annual-capital-admin-v3 .acv3-action-menu > summary::-webkit-details-marker {
    display: none;
}

.annual-capital-admin-v3 .acv3-action-menu > div {
    position: absolute !important;
    top: auto !important;
    right: 0 !important;
    bottom: calc(100% + 8px) !important;
    left: auto !important;
    z-index: 2000 !important;
    min-width: 170px;
    max-width: min(220px, calc(100vw - 32px));
    padding: 7px;
    overflow: visible;
    border: 1px solid rgba(var(--primary-rgb), 0.14);
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(23, 33, 43, 0.18);
    isolation: isolate;
}

.annual-capital-admin-v3 .acv3-action-menu > div::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: -5px;
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(var(--primary-rgb), 0.14);
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.14);
    background: #ffffff;
    transform: rotate(45deg);
}

.annual-capital-admin-v3 .acv3-action-menu button,
.annual-capital-admin-v3 .acv3-action-menu a {
    position: relative;
    z-index: 1;
    width: 100%;
    justify-content: flex-start;
    white-space: nowrap;
}

/* Legacy Annual Capital action menu compatibility. */
.annual-capital-admin-v3 .annual-capital-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    overflow: visible;
    white-space: nowrap;
}

.annual-capital-admin-v3 .annual-capital-review-menu {
    position: relative;
    z-index: 10;
    overflow: visible;
}

.annual-capital-admin-v3 .annual-capital-review-menu[open] {
    z-index: 1000;
}

.annual-capital-admin-v3 .annual-capital-review-panel {
    top: auto !important;
    right: 0 !important;
    bottom: calc(100% + 8px) !important;
    z-index: 2000 !important;
}

@media (max-width: 760px) {
    .annual-capital-admin-v3 .acv3-row-actions,
    .annual-capital-admin-v3 .annual-capital-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .annual-capital-admin-v3 .acv3-action-menu > div,
    .annual-capital-admin-v3 .annual-capital-review-panel {
        position: static !important;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin-top: 8px;
        box-shadow: 0 12px 28px rgba(23, 33, 43, 0.12);
    }

    .annual-capital-admin-v3 .acv3-action-menu > div::after {
        display: none;
    }
}


/* ==========================================================
   UMOJA v3.1 — Annual Capital action menu
   ========================================================== */

.annual-capital-admin-v3 .acv3-col-action {
    width: 74px !important;
}

.annual-capital-admin-v3 .acv3-table th:last-child,
.annual-capital-admin-v3 .acv3-table td:last-child {
    overflow: visible !important;
    text-align: center;
}

.annual-capital-admin-v3 .acv3-row-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: visible;
}

.annual-capital-admin-v3 .acv3-action-menu {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.annual-capital-admin-v3 .acv3-action-menu[open] {
    z-index: 1000;
}

.annual-capital-admin-v3 .acv3-action-menu > summary {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 9px;
    background: #fff;
    color: var(--primary-dark);
    cursor: pointer;
    list-style: none;
}

.annual-capital-admin-v3
.acv3-action-menu > summary::-webkit-details-marker {
    display: none;
}

.annual-capital-admin-v3
.acv3-action-menu > summary iconify-icon {
    font-size: 18px;
}

.annual-capital-admin-v3
.acv3-action-menu__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 9999;
    width: 190px;
    display: grid;
    gap: 4px;
    padding: 7px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(16, 24, 40, .16);
}

.annual-capital-admin-v3
.acv3-action-menu__panel a,
.annual-capital-admin-v3
.acv3-action-menu__panel button {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #344054;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.annual-capital-admin-v3
.acv3-action-menu__panel a:hover,
.annual-capital-admin-v3
.acv3-action-menu__panel button:hover {
    background: rgba(var(--primary-rgb), .07);
}

.annual-capital-admin-v3
.acv3-action-menu__panel .is-approve {
    color: #067647;
}

.annual-capital-admin-v3
.acv3-action-menu__panel .is-danger {
    color: #b42318;
}

.annual-capital-admin-v3
.acv3-table tbody tr:has(.acv3-action-menu[open]) {
    position: relative;
    z-index: 500;
}

.annual-capital-admin-v3
.acv3-table tbody tr:has(.acv3-action-menu[open]) td {
    overflow: visible !important;
}

/* =========================================================
   UMOJA GLOBAL NOTIFICATION BADGE
   Member, Client, Agent and Admin
   ========================================================= */

.notification-link,
.client-notification.notification-link,
.admin-notification-link.notification-link {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    align-self: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 50%;
    line-height: 1 !important;
    text-decoration: none;
}

.notification-link__icon {
    position: relative;
    z-index: 1;
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    font-size: 23px !important;
    line-height: 1 !important;
    transform: none !important;
}

.notification-link__badge,
.client-notification .notification-link__badge,
.admin-notification-link .notification-link__badge {
    position: absolute !important;
    top: -4px !important;
    right: -5px !important;
    z-index: 20 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 19px !important;
    width: auto !important;
    height: 19px !important;
    min-height: 19px !important;
    margin: 0 !important;
    padding: 0 5px !important;

    border: 2px solid #ffffff !important;
    border-radius: 999px !important;
    background: var(--primary, #731f71) !important;
    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;

    box-shadow: 0 4px 10px rgba(115, 31, 113, 0.24);
    pointer-events: none;
    transform: none !important;
}

.notification-link__badge::before,
.notification-link__badge::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 768px) {
    .notification-link,
    .client-notification.notification-link,
    .admin-notification-link.notification-link {
        flex-basis: 40px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .notification-link__icon {
        width: 22px !important;
        height: 22px !important;
        font-size: 22px !important;
    }

    .notification-link__badge,
    .client-notification .notification-link__badge,
    .admin-notification-link .notification-link__badge {
        top: -3px !important;
        right: -4px !important;
        min-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        padding-inline: 4px !important;
        font-size: 9px !important;
    }
}

/* ==========================================================================\n   LOAN UI v3.2 — RESPONSIVE REPAYMENT SCHEDULE\n   ========================================================================== */
.loan-v4__schedule .js-loan-schedule {
    display: grid;
    gap: 0;
    margin-top: 10px;
}

.loan-v4__schedule-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.loan-v4__schedule-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.loan-v4__schedule-details {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.loan-v4__schedule .loan-v4__schedule-meta,
.loan-v4__schedule .loan-v4__schedule-due {
    display: block;
    color: #101828;
    font-size: 14px;
    line-height: 1.35;
    text-transform: none;
}

.loan-v4__schedule .loan-v4__schedule-meta {
    font-weight: 750;
}

.loan-v4__schedule .loan-v4__schedule-due {
    color: #667085;
    font-size: 13px;
    font-weight: 500;
}

.loan-v4__schedule-amount {
    justify-self: end;
    color: #101828;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .loan-v4__schedule-row {
        gap: 10px;
        padding: 12px 0;
    }

    .loan-v4__schedule .loan-v4__schedule-meta {
        font-size: 13px;
    }

    .loan-v4__schedule .loan-v4__schedule-due {
        font-size: 12px;
    }

    .loan-v4__schedule-amount {
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    .loan-v4__schedule-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .loan-v4__schedule-amount {
        justify-self: start;
    }
}


/* =========================================================
   DS4 MEMBER GUARANTEES + QUIET FOOTER — 2026-08
   ========================================================= */
.member-guarantees-page { max-width: 100%; }
.member-guarantee-list { display: grid; gap: 16px; }
.member-guarantee-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--umoja-card-border);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--umoja-shadow-sm);
}
.member-guarantee-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.member-guarantee-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 14px;
}
.member-guarantee-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(var(--primary-rgb), .07);
    color: var(--primary);
    font-size: 25px;
}
.member-guarantee-ref {
    display: block;
    margin-bottom: 3px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
}
.member-guarantee-title h2 {
    margin: 0;
    color: var(--umoja-text);
    font-size: clamp(20px, 2vw, 25px);
    overflow-wrap: anywhere;
}
.member-guarantee-title p { margin: 4px 0 0; color: var(--umoja-muted); }
.member-guarantee-profile {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin-top: 16px;
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}
.member-guarantee-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
    margin-top: 20px;
}
.member-guarantee-metrics > div {
    min-width: 0;
    padding: 14px;
    border-radius: 16px;
    background: var(--umoja-soft);
}
.member-guarantee-metrics span {
    display: block;
    margin-bottom: 5px;
    color: var(--umoja-muted);
    font-size: 12px;
    font-weight: 800;
}
.member-guarantee-metrics strong {
    display: block;
    color: var(--umoja-text);
    font-size: 16px;
    overflow-wrap: anywhere;
}
.member-guarantee-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--umoja-card-border);
}
.member-guarantee-actions form { margin: 0; }
.member-guarantee-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 13px;
    font-weight: 850;
}
.member-guarantee-decline {
    border: 1px solid #efc9c3;
    background: #fff;
    color: #a73729;
}
.member-guarantee-installments { margin-top: 18px; }
.member-guarantees-empty {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 38px 20px;
    text-align: center;
}
.member-guarantees-empty iconify-icon { font-size: 34px; color: var(--primary); }
.member-guarantees-empty span { color: var(--umoja-muted); }

/* Footer should be supporting metadata, not a visual feature. */
.portal-footer.client-footer.ds4-app-footer {
    padding: 11px 16px;
    background: #27262a;
    color: rgba(255,255,255,.58);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}
.portal-footer.client-footer.ds4-app-footer p {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.portal-footer.client-footer.ds4-app-footer strong { font-weight: 600; }
.ds4-footer-version { color: rgba(255,255,255,.42); }

@media (max-width: 760px) {
    .member-guarantee-card { padding: 18px; border-radius: 22px; }
    .member-guarantee-head { flex-direction: column; }
    .member-guarantee-head .request-status { margin-left: 66px; }
    .member-guarantee-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .member-guarantee-actions { align-items: stretch; flex-direction: column; }
    .member-guarantee-actions form,
    .member-guarantee-actions button { width: 100%; }
    .portal-footer.client-footer.ds4-app-footer {
        padding: 9px 12px;
        border-radius: 12px;
        font-size: 10px;
    }
}

@media (max-width: 390px) {
    .member-guarantee-title { align-items: flex-start; }
    .member-guarantee-icon { flex-basis: 46px; width: 46px; height: 46px; }
    .member-guarantee-head .request-status { margin-left: 0; }
    .member-guarantee-metrics { grid-template-columns: 1fr; }
}


/* =========================================================
   DS4 QUIET FOOTER — final override
   Neutral supporting metadata; explicitly cancels legacy orange pills.
   ========================================================= */
.portal-footer.client-footer.ds4-app-footer {
    width: min(calc(100% - (var(--umoja-content-pad) * 2)), var(--umoja-page-max)) !important;
    min-height: 0 !important;
    margin: 8px auto 18px !important;
    padding: 8px 4px !important;
    border: 0 !important;
    border-top: 1px solid rgba(102,112,133,.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #98a2b3 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

.portal-footer.client-footer.ds4-app-footer p {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 3px 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Cancel the old .client-footer span orange-pill treatment. */
.portal-footer.client-footer.ds4-app-footer p > span {
    display: inline !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

.portal-footer.client-footer.ds4-app-footer .ds4-footer-version {
    color: #b0b7c3 !important;
    font-size: 9px !important;
}

@media (max-width: 760px) {
    .portal-footer.client-footer.ds4-app-footer {
        width: calc(100% - 28px) !important;
        margin: 4px auto calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 7px 2px !important;
        font-size: 9px !important;
    }

    .portal-footer.client-footer.ds4-app-footer p {
        gap: 2px 8px !important;
    }

    .portal-footer.client-footer.ds4-app-footer .ds4-footer-version {
        flex-basis: 100%;
        margin-top: 1px !important;
        font-size: 8px !important;
    }
}


/* DS4 footer typography alignment */
.portal-footer.client-footer.ds4-app-footer,
.portal-footer.client-footer.ds4-app-footer p,
.portal-footer.client-footer.ds4-app-footer p > span,
.portal-footer.client-footer.ds4-app-footer .ds4-footer-version,
.portal-footer.client-footer.ds4-app-footer .ds4-footer-separator {
    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
}

.portal-footer.client-footer.ds4-app-footer .ds4-footer-version,
.portal-footer.client-footer.ds4-app-footer .ds4-footer-separator {
    color: inherit !important;
}

.portal-footer.client-footer.ds4-app-footer .ds4-footer-separator {
    margin-inline: 2px !important;
}

@media (max-width: 760px) {
    .portal-footer.client-footer.ds4-app-footer,
    .portal-footer.client-footer.ds4-app-footer p,
    .portal-footer.client-footer.ds4-app-footer p > span,
    .portal-footer.client-footer.ds4-app-footer .ds4-footer-version,
    .portal-footer.client-footer.ds4-app-footer .ds4-footer-separator {
        font-size: 9px !important;
    }

    .portal-footer.client-footer.ds4-app-footer .ds4-footer-version {
        flex-basis: auto !important;
        margin-top: 0 !important;
    }
}


/* =========================================================
   DS4 TRANSFER SUMMARY MOBILE REGRESSION FIX
   Shared by MEMBER and CLIENT transfer creation.
   ========================================================= */
#transfer-create,
#transfer-create .transfer-simple-flow,
#transfer-create .transfer-panel-modern,
#transfer-create .transfer-panel-modern form,
#transfer-create .transfer-usd-summary,
#transfer-create .transfer-usd-summary-head,
#transfer-create .transfer-usd-summary-grid,
#transfer-create .transfer-usd-summary-item,
#transfer-create .transfer-calculation-note {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 560px) {
    #transfer-create .transfer-panel-modern {
        overflow: hidden;
    }

    #transfer-create .transfer-usd-summary {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 18px !important;
        padding: 14px !important;
        gap: 12px !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    #transfer-create .transfer-usd-summary-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    #transfer-create .transfer-usd-summary-head > div {
        min-width: 0 !important;
    }

    #transfer-create .transfer-usd-summary-head h3 {
        margin: 3px 0 0 !important;
        font-size: 1.05rem !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere !important;
    }

    #transfer-create .transfer-rate-badge {
        justify-self: start !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 30px !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /*
     * Keep the first two short metrics side by side.
     * The remaining financial totals use the full width.
     */
    #transfer-create .transfer-usd-summary-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #transfer-create .transfer-usd-summary-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 78px !important;
        padding: 11px !important;
        gap: 7px !important;
        overflow: hidden !important;
        border-radius: 13px !important;
    }

    #transfer-create .transfer-usd-summary-item span {
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    #transfer-create .transfer-usd-summary-item strong {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: clamp(15px, 4.8vw, 19px) !important;
        line-height: 1.12 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        font-variant-numeric: tabular-nums !important;
    }

    #transfer-create .transfer-usd-summary-item.is-receiver,
    #transfer-create .transfer-usd-summary-item.is-payable,
    #transfer-create .transfer-usd-summary-item.is-zar {
        grid-column: 1 / -1 !important;
        min-height: 70px !important;
    }

    #transfer-create .transfer-calculation-note {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 11px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        overflow: hidden !important;
    }

    #transfer-create .transfer-calculation-note .ui-icon {
        font-size: 18px !important;
    }

    #transfer-create .transfer-calculation-note p {
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 340px) {
    #transfer-create .transfer-usd-summary-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #transfer-create .transfer-usd-summary-item {
        grid-column: 1 / -1 !important;
    }
}


/* =========================================================
   AGENT PAYOUTS MOBILE RESPONSIVENESS CORRECTION
   ========================================================= */
@media (max-width: 767px) {
    .agent-payout-v31,
    .agent-payout-v31 > *,
    .agent-payout-hero,
    .agent-payout-kpis,
    .agent-payout-tabs,
    .agent-payout-queue,
    .agent-payout-list,
    .agent-payout-card,
    .agent-payout-card__head,
    .agent-payout-card__reference,
    .agent-payout-parties,
    .agent-payout-financial-grid,
    .agent-payout-review-panel,
    .agent-payout-evidence-grid {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* KPI strip must never become wider than the viewport. */
    .agent-payout-kpis {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .agent-payout-kpi {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 104px !important;
        padding: 13px 11px !important;
        gap: 10px !important;
        overflow: hidden !important;
    }

    .agent-payout-kpi__icon {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
    }

    .agent-payout-kpi > div {
        min-width: 0 !important;
        width: 100% !important;
    }

    .agent-payout-kpi strong {
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 20px !important;
        line-height: 1.05 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .agent-payout-kpi span,
    .agent-payout-kpi small {
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Workflow navigation fits inside the phone instead of producing x-overflow. */
    .agent-payout-tabs {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .agent-payout-tabs a {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Queue cards and their financial data stack safely. */
    .agent-payout-card {
        width: 100% !important;
        padding: 15px !important;
        overflow: hidden !important;
    }

    .agent-payout-card__head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .agent-payout-card__reference {
        min-width: 0 !important;
    }

    .agent-payout-card__reference h3,
    .agent-payout-card__reference strong {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .agent-payout-parties,
    .agent-payout-financial-grid,
    .agent-payout-financial-grid.is-compact,
    .agent-payout-evidence-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }

    .agent-payout-person,
    .agent-payout-financial-grid > div,
    .agent-payout-evidence-item {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .agent-payout-party-arrow {
        transform: rotate(90deg);
        justify-self: center;
    }

    .payout-v34-actions,
    .payout-v34-approve,
    .payout-v34-reject,
    .payout-v34-reject__form,
    .payout-v34-reject__actions {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .payout-v34-reject__actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .payout-v34-approve__button,
    .payout-v34-cancel,
    .payout-v34-confirm-reject {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* History already becomes cards on mobile; explicitly remove residual scrollers. */
    .agent-payout-history-card,
    .agent-payout-history-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .agent-payout-history-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    .agent-payout-history-table td {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .agent-payout-pagination {
        overflow-x: visible !important;
        flex-wrap: wrap !important;
    }

    .agent-payout-pagination .pagination {
        min-width: 0 !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 360px) {
    .agent-payout-kpis {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* =========================================================
   DS3 USD-FIRST TRANSFER WORKFLOW RESTORE
   ZAR is always a calculated display value, never user input.
   ========================================================= */
.transfer-currency-control.is-readonly,
.agent-transfer-money-control.is-readonly {
    background: #f5f3f7;
    border-color: #e5dce8;
}

.transfer-currency-control.is-readonly input,
.agent-transfer-money-control.is-readonly input {
    cursor: default !important;
    background: transparent !important;
    color: #667085 !important;
    user-select: none;
}

.transfer-reference-amount-field,
.agent-transfer-field:has(.agent-transfer-money-control.is-readonly) {
    opacity: .94;
}


/* =========================================================
   AGENT TRANSFER SUMMARY — HARD MOBILE CONTAINMENT
   Ensures /agent/transfers/create never overflows on phones.
   ========================================================= */
@media (max-width: 760px) {
    .agent-transfer-create-page,
    .agent-transfer-create-page > *,
    .agent-transfer-step-card,
    .agent-transfer-step-body,
    .agent-transfer-summary,
    .agent-transfer-summary-head,
    .agent-transfer-summary-grid,
    .agent-transfer-summary-grid > article,
    .agent-transfer-summary-note {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .agent-transfer-create-page,
    .agent-transfer-step-card,
    .agent-transfer-step-body {
        width: 100% !important;
        overflow-x: clip !important;
    }

    .agent-transfer-summary {
        width: 100% !important;
        padding: 14px !important;
        gap: 12px !important;
        overflow: hidden !important;
    }

    .agent-transfer-summary-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .agent-transfer-summary-head > div {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .agent-transfer-summary-head h3 {
        max-width: 100% !important;
        font-size: 18px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .agent-transfer-rate-badge {
        justify-self: start !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 30px !important;
        padding: 5px 10px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /*
     * Mobile rule: one summary metric per row.
     * This is intentionally stronger than the desktop/two-column rule so
     * Amount, Commission, Receiver gets and Total payable can never overflow.
     */
    .agent-transfer-summary-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .agent-transfer-summary-grid > article,
    .agent-transfer-summary-grid > article.is-receiver,
    .agent-transfer-summary-grid > article.is-payable {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 76px !important;
        padding: 12px !important;
        overflow: hidden !important;
    }

    .agent-transfer-summary-grid > article > span,
    .agent-transfer-summary-grid > article > strong,
    .agent-transfer-summary-grid > article > small {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
    }

    .agent-transfer-summary-grid > article > strong {
        font-size: clamp(18px, 5.5vw, 22px) !important;
        line-height: 1.1 !important;
        font-variant-numeric: tabular-nums !important;
    }

    .agent-transfer-summary-grid > article > small {
        margin-top: 2px !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .agent-transfer-summary-note {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: start !important;
        width: 100% !important;
        padding: 11px !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    .agent-transfer-summary-note > span {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}


/* Agent client registration — contact/referral UI refinement. */
.agent-client-contact-grid {
    align-items: start;
}
.agent-client-contact-grid > label {
    min-width: 0;
}
.agent-client-contact-grid input[type="email"] {
    min-height: 50px;
    background: #fff;
}
.agent-client-country-wrap {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
}
.agent-client-country-flag {
    position: absolute;
    left: 14px;
    z-index: 1;
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    pointer-events: none;
}
.agent-client-country-wrap .agent-client-country-code {
    padding-left: 48px;
}
.agent-client-form-section #agentClientReferralSearch {
    background: #fff;
}
.recipient-directory-v31__referral {
    display: block;
    max-width: 220px;
    color: #344054;
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
@media (max-width: 820px) {
    .agent-client-contact-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .agent-client-phone-control {
        grid-template-columns: minmax(150px, .9fr) minmax(0, 1.1fr);
    }
}
@media (max-width: 480px) {
    .agent-client-phone-control {
        grid-template-columns: 1fr;
        gap: 8px;
        overflow: visible;
        border: 0;
        background: transparent;
    }
    .agent-client-country-wrap,
    .agent-client-phone-control > input {
        min-height: 50px;
        border: 1px solid #d0d5dd;
        border-radius: 13px;
        background: #fff;
    }
    .agent-client-country-wrap .agent-client-country-code {
        border: 0;
    }
}


/* 2026-09-13: user role/status consolidated beside telephone */
.admin-user-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem .45rem;
}

.admin-user-meta .admin-user-state {
    display: inline-flex;
    margin: 0;
    white-space: nowrap;
}
\n\n/* 2026-09-13: compact user identity metadata and admin user directory controls */\n.admin-user-mini-header .admin-user-mini-top {\n    align-items: flex-start;\n}\n.admin-user-mini-header .admin-user-identity {\n    justify-content: flex-start;\n    align-items: flex-start;\n    width: 100%;\n    padding-right: 0;\n    text-align: left;\n}\n.admin-user-mini-header .admin-user-avatar {\n    align-self: flex-start;\n}\n.admin-user-mini-header .admin-user-meta {\n    gap: 8px;\n}\n.admin-user-mini-header .admin-user-meta > span + span::before {\n    content: none;\n    margin: 0;\n}\n.admin-user-role-icons {\n    display: inline-flex !important;\n    align-items: center;\n    gap: 5px;\n}\n.admin-user-meta-icon,\n.auv3-role-icon,\n.user-status-icon {\n    display: inline-grid;\n    place-items: center;\n    width: 30px;\n    height: 30px;\n    flex: 0 0 30px;\n    border-radius: 999px;\n    background: rgba(var(--primary-rgb), .08);\n    color: var(--primary-dark);\n    font-size: 18px;\n    line-height: 1;\n}\n.admin-user-state-icon.is-active,\n.user-status-icon.is-active {\n    background: #ecfdf3;\n    color: #087443;\n}\n.admin-user-state-icon.is-pending,\n.user-status-icon.is-pending {\n    background: #fffbeb;\n    color: #925c00;\n}\n.admin-user-state-icon.is-suspended,\n.admin-user-state-icon.is-inactive,\n.admin-user-state-icon.is-deactivated,\n.user-status-icon.is-suspended,\n.user-status-icon.is-inactive,\n.user-status-icon.is-deactivated {\n    background: #fff1f0;\n    color: #b42318;\n}\n.auv3-role-list,\n.auv3-mobile-card__identity-meta {\n    align-items: center;\n}\n.auv3-mobile-card__identity-meta {\n    gap: 6px;\n}\n@media (max-width: 768px) {\n    .admin-user-mini-header .admin-user-mini-top,\n    .admin-user-mini-header .admin-user-identity {\n        align-items: flex-start !important;\n        justify-content: flex-start !important;\n        text-align: left !important;\n    }\n    .admin-user-mini-header .admin-user-identity {\n        flex-direction: row !important;\n    }\n    .admin-user-mini-header .admin-user-avatar {\n        margin: 0 !important;\n    }\n}\n

/* 2026-09-13: stronger role/status icon semantics + intuitive user-status selection */
.admin-user-meta-icon,
.auv3-role-icon,
.user-status-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    font-size: 21px !important;
    border: 1px solid transparent;
}

/* Role colors */
.admin-user-role-icon.is-client,
.auv3-role-icon.is-client {
    background: #f2f4f7 !important;
    color: #475467 !important;
    border-color: #e4e7ec !important;
}
.admin-user-role-icon.is-member,
.auv3-role-icon.is-member {
    background: #fff7e6 !important;
    color: #9a6700 !important;
    border-color: #f9df9a !important;
}
.admin-user-role-icon.is-agent,
.auv3-role-icon.is-agent {
    background: #e7f8f5 !important;
    color: #067a6f !important;
    border-color: #b7e9df !important;
}
.admin-user-role-icon.is-admin,
.auv3-role-icon.is-admin {
    background: #eef4ff !important;
    color: #3157a4 !important;
    border-color: #cddcff !important;
}
.admin-user-role-icon.is-root,
.auv3-role-icon.is-root {
    background: #f6ecf7 !important;
    color: #731f71 !important;
    border-color: #dfc5df !important;
}

/* Status colors */
.admin-user-state-icon.is-active,
.user-status-icon.is-active {
    background: #ecfdf3 !important;
    color: #067647 !important;
    border-color: #abefc6 !important;
}
.admin-user-state-icon.is-pending,
.user-status-icon.is-pending {
    background: #fffaeb !important;
    color: #b54708 !important;
    border-color: #fedf89 !important;
}
.admin-user-state-icon.is-suspended,
.user-status-icon.is-suspended {
    background: #fff4ed !important;
    color: #c4320a !important;
    border-color: #ffd6ae !important;
}
.admin-user-state-icon.is-inactive,
.admin-user-state-icon.is-deactivated,
.user-status-icon.is-inactive,
.user-status-icon.is-deactivated {
    background: #fef3f2 !important;
    color: #b42318 !important;
    border-color: #fecdca !important;
}

/* Make status selection visually explicit. */
.status-option-card {
    min-height: 116px;
    align-items: center !important;
    border-width: 2px !important;
    box-shadow: none !important;
    overflow: hidden;
}
.status-option-card:hover {
    transform: translateY(-1px);
}
.status-option-card .status-option-copy {
    min-width: 0;
    padding-right: 36px;
}
.status-option-selected {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 2px solid #d0d5dd;
    background: #fff;
    color: transparent;
    font-size: 17px;
}
.status-option-card input:checked ~ .status-option-selected,
.status-option-card.is-selected .status-option-selected {
    color: #fff;
}
.status-option-card.is-active .status-option-icon {
    background: #ecfdf3;
    color: #067647;
}
.status-option-card.is-suspended .status-option-icon {
    background: #fff4ed;
    color: #c4320a;
}
.status-option-card.is-deactivated .status-option-icon {
    background: #fef3f2;
    color: #b42318;
}
.status-option-card.is-active:has(input:checked),
.status-option-card.is-active.is-selected {
    border-color: #12b76a !important;
    background: #f6fef9 !important;
    box-shadow: 0 12px 26px rgba(18, 183, 106, .12) !important;
}
.status-option-card.is-active input:checked ~ .status-option-selected,
.status-option-card.is-active.is-selected .status-option-selected {
    background: #12b76a;
    border-color: #12b76a;
}
.status-option-card.is-suspended:has(input:checked),
.status-option-card.is-suspended.is-selected {
    border-color: #f79009 !important;
    background: #fffcf5 !important;
    box-shadow: 0 12px 26px rgba(247, 144, 9, .12) !important;
}
.status-option-card.is-suspended input:checked ~ .status-option-selected,
.status-option-card.is-suspended.is-selected .status-option-selected {
    background: #f79009;
    border-color: #f79009;
}
.status-option-card.is-deactivated:has(input:checked),
.status-option-card.is-deactivated.is-selected {
    border-color: #d92d20 !important;
    background: #fff8f7 !important;
    box-shadow: 0 12px 26px rgba(217, 45, 32, .12) !important;
}
.status-option-card.is-deactivated input:checked ~ .status-option-selected,
.status-option-card.is-deactivated.is-selected .status-option-selected {
    background: #d92d20;
    border-color: #d92d20;
}
.status-option-card input:focus-visible ~ .status-option-selected {
    outline: 3px solid rgba(115, 31, 113, .18);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .admin-user-meta-icon,
    .auv3-role-icon,
    .user-status-icon {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
        font-size: 20px !important;
    }
    .status-option-card {
        min-height: 104px;
    }
}

/* 2026-09-13: icon system cleanup + clearer admin navigation hierarchy */
.admin-user-mini-header .admin-user-meta > span + span::before,
.admin-user-mini-header .admin-user-meta span + span::before {
    content: none !important;
    display: none !important;
    margin: 0 !important;
}

/* Role/status icons: consistent circular semantic markers instead of square tiles. */
.admin-user-meta-icon,
.auv3-role-icon,
.user-status-icon {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 50% !important;
    border: 1px solid currentColor !important;
    font-size: 19px !important;
    line-height: 1 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    vertical-align: middle;
}
.admin-user-meta-icon iconify-icon,
.auv3-role-icon iconify-icon,
.user-status-icon iconify-icon {
    font-size: 19px !important;
}
.auv3-role-list {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Accessible role palette. */
.admin-user-role-icon.is-client,
.auv3-role-icon.is-client {
    background: #f8fafc !important;
    color: #475467 !important;
    border-color: #98a2b3 !important;
}
.admin-user-role-icon.is-member,
.auv3-role-icon.is-member {
    background: #fffaeb !important;
    color: #b54708 !important;
    border-color: #f79009 !important;
}
.admin-user-role-icon.is-agent,
.auv3-role-icon.is-agent {
    background: #f0fdf9 !important;
    color: #067647 !important;
    border-color: #17b26a !important;
}
.admin-user-role-icon.is-admin,
.auv3-role-icon.is-admin {
    background: #eff4ff !important;
    color: #3538cd !important;
    border-color: #6172f3 !important;
}
.admin-user-role-icon.is-root,
.auv3-role-icon.is-root {
    background: #f9f5ff !important;
    color: #6938ef !important;
    border-color: #9b8afb !important;
}

/* Status palette remains independent from role palette. */
.admin-user-state-icon.is-active,
.user-status-icon.is-active {
    background: #ecfdf3 !important;
    color: #067647 !important;
    border-color: #17b26a !important;
}
.admin-user-state-icon.is-pending,
.user-status-icon.is-pending {
    background: #fffaeb !important;
    color: #b54708 !important;
    border-color: #f79009 !important;
}
.admin-user-state-icon.is-suspended,
.user-status-icon.is-suspended {
    background: #fff4ed !important;
    color: #c4320a !important;
    border-color: #f97066 !important;
}
.admin-user-state-icon.is-inactive,
.admin-user-state-icon.is-deactivated,
.user-status-icon.is-inactive,
.user-status-icon.is-deactivated {
    background: #fef3f2 !important;
    color: #b42318 !important;
    border-color: #f04438 !important;
}

/* Admin sidebar: stronger distinction between level 1 section and level 2 page. */
.admin-side-dropdown {
    margin: 8px 0 !important;
}
.admin-side-dropdown-title {
    min-height: 44px !important;
    padding: 10px 11px !important;
    border-radius: 12px !important;
}
.admin-side-dropdown[open] > .admin-side-dropdown-title {
    background: #f8f7fa;
    color: #344054;
}
.admin-side-group-heading {
    gap: 10px !important;
    font-size: .75rem !important;
    letter-spacing: .065em !important;
}
.admin-side-group-icon {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    font-size: 1.15rem !important;
    color: var(--admin-accent);
}
.admin-side-list {
    position: relative;
    gap: 2px !important;
    margin: 5px 0 12px 18px !important;
    padding-left: 13px !important;
    border-left: 1px solid #e4e7ec;
}
.admin-side-link {
    min-height: 40px !important;
    padding: 8px 9px !important;
    gap: 10px !important;
    border-radius: 9px !important;
}
.admin-side-link .admin-side-icon {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    font-size: 1.08rem !important;
    color: #667085;
}
.admin-side-link.is-active .admin-side-icon {
    color: var(--admin-accent);
}
.admin-side-link.is-active::before {
    left: -14px !important;
    inset-block: 7px !important;
    width: 3px !important;
}
.admin-side-label {
    font-size: .88rem !important;
}
.admin-side-count {
    min-width: 21px !important;
    height: 21px !important;
    padding: 0 6px !important;
}

@media (max-width: 768px) {
    .admin-user-meta-icon,
    .auv3-role-icon,
    .user-status-icon {
        width: 30px !important;
        height: 30px !important;
        flex-basis: 30px !important;
        font-size: 18px !important;
    }
    .admin-user-meta-icon iconify-icon,
    .auv3-role-icon iconify-icon,
    .user-status-icon iconify-icon {
        font-size: 18px !important;
    }
}

/* DS3: Admin member dividend referral history — mobile card layout */
@media (max-width: 768px) {
    .admin-dividend-section .table-scroll {
        overflow: visible;
        width: 100%;
    }
    .admin-dividend-section .table-scroll table {
        display: block;
        width: 100%;
        min-width: 0;
    }
    .admin-dividend-section .table-scroll thead {
        display: none;
    }
    .admin-dividend-section .table-scroll tbody,
    .admin-dividend-section .table-scroll tr,
    .admin-dividend-section .table-scroll td {
        display: block;
        width: 100%;
    }
    .admin-dividend-section .table-scroll tr {
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid #eef2f6;
        border-radius: 16px;
        background: #fff;
    }
    .admin-dividend-section .table-scroll td {
        display: grid;
        grid-template-columns: minmax(100px, 0.42fr) minmax(0, 0.58fr);
        gap: 10px;
        align-items: start;
        padding: 8px 0;
        border: 0;
        overflow-wrap: anywhere;
        text-align: right;
    }
    .admin-dividend-section .table-scroll td::before {
        color: #667085;
        font-size: 11px;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
    }
    .admin-dividend-section .table-scroll td:nth-child(1)::before { content: "Transfer"; }
    .admin-dividend-section .table-scroll td:nth-child(2)::before { content: "Client"; }
    .admin-dividend-section .table-scroll td:nth-child(3)::before { content: "Commission"; }
    .admin-dividend-section .table-scroll td:nth-child(4)::before { content: "Referral dividend"; }
    .admin-dividend-section .table-scroll td:nth-child(5)::before { content: "Allocated"; }
    .admin-dividend-section .table-scroll td small {
        display: block;
        margin-top: 3px;
    }
    .admin-dividend-section > .muted {
        line-height: 1.6;
        overflow-wrap: anywhere;
    }
}

/* UMOJA 2026-09-27: compact mobile workspace switch */
@media (max-width: 520px) {
    .workspace-switcher-v3 { gap: 8px; padding: 10px 12px; }
    .workspace-switcher-v3__head { gap: 7px; }
    .workspace-switcher-v3__head-icon { width: 30px; height: 30px; flex-basis: 30px; }
    .workspace-switcher-v3__current {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 7px; padding: 8px; border-radius: 10px;
    }
    .workspace-switcher-v3__workspace-icon { width: 32px; height: 32px; flex-basis: 32px; font-size: 16px; }
    .workspace-switcher-v3__current-badge { grid-column: auto; justify-self: end; padding: 4px 6px; }
    .workspace-switcher-v3__change { grid-template-columns: 1fr; gap: 5px; }
    .workspace-switcher-v3__control .account-workspace-switcher { gap: 5px; width: 100%; }
    .workspace-switcher-v3__control .account-switch-workspace-form { width: 100% !important; }
    .workspace-switcher-v3__control .account-switch-workspace-card {
        display: grid !important;
        grid-template-columns: 30px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 6px 8px !important;
        border-radius: 9px !important;
        text-align: left !important;
    }
    .account-switch-workspace-card__icon {
        width: 30px !important; height: 30px !important;
        display: grid !important; place-items: center !important;
        border-radius: 8px !important; font-size: 15px !important;
    }
    .account-switch-workspace-card__body { min-width: 0; }
    .account-switch-workspace-card__body strong { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .account-switch-workspace-card__action {
        display: inline-flex !important; align-items: center !important; gap: 3px !important;
        min-width: 0 !important; font-size: 8px !important; white-space: nowrap !important;
    }
}

/* 2026-09-27: DS4 icon centering normalization */
.admin-user-meta-icon,
.auv3-role-icon,
.user-status-icon,
.agent-report-summary-card__icon {
    align-items: center !important;
    justify-items: center !important;
    align-content: center !important;
    justify-content: center !important;
}
.admin-user-meta-icon > iconify-icon,
.auv3-role-icon > iconify-icon,
.user-status-icon > iconify-icon,
.agent-report-summary-card__icon > iconify-icon {
    display: block !important;
    width: 1em !important;
    height: 1em !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    position: static !important;
    transform: none !important;
}
.auv3-mobile-card__identity-meta .auv3-role-icon,
.auv3-mobile-card__identity-meta .user-status-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
}


/* UMOJA 2026-09-27: workspace switch role/action alignment */
.workspace-switcher-v3__control .account-switch-workspace-card {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    min-height: 48px !important;
}
.workspace-switcher-v3__control .account-switch-workspace-card__body {
    align-self: center !important;
}
.workspace-switcher-v3__control .account-switch-workspace-card__action {
    justify-self: end !important;
    align-self: center !important;
    margin-left: auto !important;
}
@media (max-width: 520px) {
    .workspace-switcher-v3__control .account-switch-workspace-card {
        grid-template-columns: 30px minmax(0, 1fr) auto !important;
    }
    .workspace-switcher-v3__control .account-switch-workspace-card__action {
        min-height: 30px !important;
        padding: 0 8px !important;
    }
}

/* 2026-09-27: workspace alignment + profile/commissions mobile cleanup */
.workspace-switcher-v3__control .account-switch-workspace-card {
    display:grid !important; grid-template-columns:36px minmax(0,1fr) auto !important;
    align-items:center !important; gap:10px !important; width:100% !important;
}
.workspace-switcher-v3__control .account-switch-workspace-card__icon { grid-column:1; }
.workspace-switcher-v3__control .account-switch-workspace-card__body { grid-column:2; align-self:center; }
.workspace-switcher-v3__control .account-switch-workspace-card__action { grid-column:3; justify-self:end; align-self:center; margin:0 !important; }
.settings-panel.ds-form-page { max-width:920px; margin-inline:auto; }
.settings-panel.ds-form-page > div:first-child { margin-bottom:14px; }
.settings-panel.ds-form-page .request-card { overflow:hidden; }
.referral-share-code { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:10px; background:var(--surface-subtle,#f7f5f8); }
.referral-share-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.member-commissions-page { max-width:920px; margin-inline:auto; display:grid; gap:14px; }
.commissions-hero,.commissions-activity { padding:20px; }
.commissions-total { margin-top:16px; display:flex; align-items:end; justify-content:space-between; gap:12px; padding:16px; border-radius:14px; background:#f7f2f8; }
.commissions-total span { color:#667085; font-size:13px; }
.commissions-total strong { font-size:24px; }
.commission-list { display:grid; margin-top:10px; }
.commission-row { display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid #ececf0; }
.commission-row:last-child { border-bottom:0; }
.commission-row small { display:block; margin-top:3px; color:#667085; }
.commission-row__amount { text-align:right; }
.ds4-snapshot-item[href] { text-decoration:none; color:inherit; cursor:pointer; }
@media (max-width:520px) {
  .settings-panel.ds-form-page { padding-inline:10px; }
  .settings-panel.ds-form-page > div:first-child .muted { max-width:28ch; }
  .settings-panel.ds-form-page .form-grid { grid-template-columns:1fr !important; }
  .settings-panel.ds-form-page .avatar-upload-row { align-items:center; }
  .referral-share-actions { grid-template-columns:1fr; }
  .member-commissions-page { padding-inline:10px; }
  .commissions-hero,.commissions-activity { padding:14px; }
  .commissions-total strong { font-size:20px; }
  .commission-row { align-items:flex-start; }
  .commission-row > div:first-child { min-width:0; }
  .commission-row strong,.commission-row small { overflow-wrap:anywhere; }
}


/* UMOJA 2026-09-27: keep workspace role rows on one line on mobile. */
@media (max-width: 520px) {
    .workspace-switcher-v3__control .account-switch-workspace-card {
        display: grid !important;
        grid-template-columns: 30px minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 8px !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 6px 8px !important;
    }
    .workspace-switcher-v3__control .account-switch-workspace-card__icon {
        grid-column: 1 !important;
        align-self: center !important;
        justify-self: center !important;
        margin: 0 !important;
    }
    .workspace-switcher-v3__control .account-switch-workspace-card__body {
        grid-column: 2 !important;
        align-self: center !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    .workspace-switcher-v3__control .account-switch-workspace-card__action {
        grid-column: 3 !important;
        align-self: center !important;
        justify-self: end !important;
        margin: 0 !important;
        width: auto !important;
    }
}

/* DS3.1 upload refinement — compact, consistent platform-wide */
.ds-upload-v31__dropzone{min-height:46px;padding:7px 9px;gap:8px;grid-template-columns:30px minmax(0,1fr) auto}
.ds-upload-v31__icon{width:30px;height:30px;font-size:15px}
.ds-upload-v31__copy strong{font-size:10px;line-height:1.2}
.ds-upload-v31__copy small{font-size:8px;line-height:1.25}
.ds-upload-v31__browse{min-height:28px;padding:0 8px;font-size:8px}
.ds-upload-v31.is-compact .ds-upload-v31__dropzone{min-height:44px;padding:6px 8px}
@media(max-width:640px){.ds-upload-v31__dropzone{min-height:44px;grid-template-columns:28px minmax(0,1fr) auto;padding:6px 8px;gap:7px}.ds-upload-v31__icon{width:28px;height:28px;font-size:14px}.ds-upload-v31__browse{min-height:28px;padding:0 7px;font-size:8px}}