body.floating-chat-open {
            overflow: hidden !important;
            touch-action: none;
        }

        /* Utility Classes Warna Custom */
        .text-pp-green {
            color: var(--pp-green) !important;
        }

        .text-pp-orange {
            color: var(--pp-orange) !important;
        }

        .text-pp-grey {
            color: var(--pp-grey) !important;
        }

        .bg-pp-green {
            background-color: var(--pp-green) !important;
        }

        .bg-pp-orange {
            background-color: var(--pp-orange) !important;
        }

        .mobile-card-list {
            display: none;
        }

        .mobile-table-card {
            border: 0;
            border-left: 4px solid var(--pp-orange);
            box-shadow: 0 0.2rem 0.75rem rgba(19, 76, 67, 0.08);
        }

        .mobile-table-card .mobile-card-preview {
            min-width: 0;
        }

        .mobile-table-card .mobile-card-preview > * {
            max-width: 100%;
        }

        .navbar-custom {
            transition: all 0.3s ease;
        }

        .navbar-transparent-home {
            background-color: rgba(19, 76, 67, 0.85) !important;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .navbar-solid-dark {
            background-color: var(--pp-green) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .navbar-dark .navbar-brand {
            color: #ffffff !important;
            font-size: 1.4rem;
            letter-spacing: -0.5px;
        }

        .navbar-dark .nav-link {
            font-weight: 500;
            color: #d1d5db !important;
            transition: color 0.3s ease;
            position: relative;
            padding-bottom: 5px;
        }

        .navbar-dark .nav-link:hover,
        .navbar-dark .nav-link.active {
            color: #ffffff !important;
        }

        @media (min-width: 992px) {
            .navbar-dark .nav-link::after {
                content: '';
                position: absolute;
                width: 0;
                height: 2px;
                bottom: 0;
                left: 50%;
                background-color: var(--pp-orange);
                transition: all 0.3s ease;
                transform: translateX(-50%);
                border-radius: 2px;
            }

            .navbar-dark .nav-link:hover::after,
            .navbar-dark .nav-link.active::after {
                width: 70%;
            }

            .navbar-nav .dropdown-menu {
                margin-top: 15px !important;
            }
        }

        @media (max-width: 991.98px) {
            .navbar-dark .navbar-nav {
                padding-top: 1rem;
                padding-bottom: 1rem;
                border-top: 1px solid rgba(255, 255, 255, 0.1);
                margin-top: 10px;
            }

            .navbar-dark .nav-item {
                margin-bottom: 8px;
            }

            .navbar-toggler:focus {
                box-shadow: none;
                outline: none;
            }

            .navbar-transparent-home {
                background-color: rgba(19, 76, 67, 0.98) !important;
            }
        }

        @media (max-width: 767.98px) {
            .mobile-card-table-wrapper {
                display: none !important;
            }

            .mobile-card-list {
                display: flex;
                flex-direction: column;
                gap: 0.75rem;
            }

            .mobile-table-card .btn {
                min-height: 40px;
            }
        }

        .btn-nav-primary {
            background-color: var(--pp-orange);
            border-color: var(--pp-orange);
            color: #ffffff !important;
            transition: all 0.2s ease;
        }

        .navbar-dark .nav-link.btn-nav-primary {
            color: #ffffff !important;
        }

        .btn-nav-primary:hover {
            background-color: #f26322;
            border-color: #f26322;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(242, 99, 34, 0.3);
        }

        .btn-nav-outline {
            color: #f8fafc !important;
            border-color: #f8fafc;
            transition: all 0.2s ease;
        }

        .btn-nav-outline:hover {
            color: var(--pp-green) !important;
            background-color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
        }

        .brand-logo-img {
            display: block;
            height: 38px;
            width: auto;
            object-fit: contain;
        }

        .brand-logo-surface {
            display: inline-flex;
            align-items: center;
            padding: 3px 8px;
            background-color: #ffffff;
            border-radius: 0.45rem;
        }

        /* Header homepage mengikuti komposisi terang pada rancangan baru. */
        .navbar-home-reference {
            background: #fbf7f2;
            border-bottom: 1px solid rgba(230, 239, 234, .28);
            box-shadow: none;
            min-height: 86px;
        }

        .navbar-home-reference .brand-logo-surface {
            background: transparent;
            padding: 0;
        }

        .navbar-home-reference .brand-logo-img {
            height: 50px;
        }

        .navbar-home-reference .nav-link {
            color: #134c43 !important;
            font-size: .78rem;
            font-weight: 500;
            padding-bottom: .35rem;
        }

        .navbar-home-reference .nav-link:hover,
        .navbar-home-reference .nav-link.active {
            color: #d9521b !important;
        }

        .navbar-home-reference .nav-link::after {
            background-color: #f26322 !important;
        }

        .btn-header-donate {
            background: #f26322;
            border: 0;
            border-radius: 999px;
            box-shadow: 0 8px 16px rgba(242, 99, 34, .18);
            color: #fff !important;
            font-size: .8rem;
            font-weight: 600;
            padding: .75rem 1.5rem;
        }

        .btn-header-donate:hover {
            background: #d9521b;
            color: #fff !important;
            transform: translateY(-1px);
        }

        .navbar-home-reference .btn-nav-outline {
            border-color: #134c43;
            color: #134c43 !important;
        }

        .navbar-home-reference .btn-nav-outline:hover {
            background: #134c43;
            border-color: #134c43;
            color: #fff !important;
        }

        @media (min-width: 992px) {
            .navbar-home-reference .nav-link {
                font-size: .84rem;
            }

            .btn-header-donate {
                font-size: .86rem;
            }
        }

        @media (max-width: 991.98px) {
            .navbar-home-reference .navbar-nav {
                border-top-color: rgba(19, 76, 67, .12);
            }

            .navbar-home-reference .navbar-toggler {
                color: #134c43;
            }
        }

        @media (max-width: 575.98px) {
            .navbar-home-reference {
                min-height: 70px;
            }

            .navbar-home-reference .brand-logo-img {
                height: 42px;
            }

            .navbar-home-reference .nav-link {
                font-size: .88rem;
                padding-bottom: .55rem;
                padding-top: .55rem;
            }

            .navbar-home-reference .btn-header-donate {
                display: block;
                margin: .35rem .75rem 0;
                width: auto !important;
            }

            .navbar-home-reference .mobile-user-summary {
                background: rgba(230, 239, 234, .16) !important;
            }

            .navbar-home-reference .mobile-user-name {
                color: #134c43 !important;
            }

            .navbar-home-reference .mobile-user-role {
                color: #222222 !important;
                opacity: 1;
            }
        }

    :root {
        --pp-green: #134c43;
        --pp-orange: #f26322;
        --pp-grey: #222222;
    }

    /* Footer publik mengikuti komposisi terang pada rancangan homepage. */
    .footer-custom {
        background: #fbf7f2;
        border-top: 1px solid rgba(230, 239, 234, .42);
        color: #222222;
    }

    .footer-custom h5 {
        color: #134c43;
        font-weight: 700;
        font-size: .75rem;
        letter-spacing: .03em;
    }

    .footer-logo-surface {
        display: inline-flex;
        align-items: center;
        padding: 0;
        background: transparent;
    }

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

    .footer-link {
        color: #222222;
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-block;
    }

    .footer-link:hover {
        color: #f26322;
        transform: translateX(5px);
    }

    .social-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: transparent;
        color: #134c43;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .social-icon:hover {
        background-color: #f26322;
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(242, 99, 34, 0.3);
    }

    .text-pp-orange {
        color: var(--pp-orange) !important;
    }

    .footer-custom .text-white-50 {
        color: #222222 !important;
        opacity: 1;
    }

    .footer-custom .text-pp-orange {
        color: #f26322 !important;
    }

    .footer-custom hr {
        border-color: rgba(230, 239, 234, .6) !important;
        opacity: 1;
    }

    @media (min-width: 992px) {
        .footer-custom h5 {
            font-size: .84rem;
        }

        .footer-custom .small,
        .footer-custom .footer-link {
            font-size: .8rem;
        }
    }

    .footer-contact-item span {
        min-width: 0;
        line-height: 1.6;
        overflow-wrap: anywhere;
    }

    @media (max-width: 767.98px) {
        .footer-contact-item {
            align-items: center !important;
            justify-content: center !important;
            flex-direction: column;
        }

        .footer-contact-item i {
            flex: 0 0 auto;
            margin-right: 0 !important;
            margin-bottom: 0.5rem;
        }

        .footer-contact-item span {
            text-align: center !important;
        }
    }

    /* Kontrol password dan validasi input umum */
    .password-toggle-wrapper .form-control {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .password-toggle-btn {
        min-width: 46px;
        border: 1px solid #dee2e6;
        border-left: 0;
        background: #ffffff;
        color: #64748b;
        border-top-right-radius: .5rem;
        border-bottom-right-radius: .5rem;
        transition: color .2s ease, background-color .2s ease;
    }

    .password-toggle-btn:hover,
    .password-toggle-btn:focus {
        color: var(--pp-green);
        background: #f8fafc;
    }

    .floating-chat-fab {
        position: fixed;
        bottom: 24px;
        right: 24px;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background-color: var(--pp-green);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 20px rgba(19, 76, 67, 0.35);
        cursor: pointer;
        z-index: 1045;
        border: none;
        transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .floating-chat-fab:hover {
        transform: scale(1.08);
        background-color: #134c43;
        color: #fff;
    }
    .floating-chat-widget {
        position: fixed;
        bottom: 92px;
        right: 24px;
        width: 390px;
        max-width: calc(100vw - 28px);
        height: 530px;
        max-height: calc(100vh - 110px);
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 12px 36px rgba(0,0,0,0.22);
        border: 1px solid #e2e8f0;
        z-index: 1045;
        display: none;
        flex-direction: column;
        overflow: hidden;
        animation: floatSlideUp 0.25s ease-out;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
    }
    @keyframes floatSlideUp {
        from { opacity: 0; transform: translateY(16px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .floating-chat-header {
        background: var(--pp-green);
        color: #fff;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .floating-chat-body {
        flex: 1 1 0%;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        background: #f8fafc;
        width: 100%;
        box-sizing: border-box;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
    .float-bubble {
        max-width: 82%;
        padding: 8px 12px;
        border-radius: 14px;
        font-size: 0.86rem;
        line-height: 1.45;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        box-sizing: border-box;
    }
    .float-bubble.sent {
        align-self: flex-end;
        background: var(--pp-green);
        color: #fff;
        border-bottom-right-radius: 3px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    }
    .float-bubble.received {
        align-self: flex-start;
        background: #fff;
        color: #1e293b;
        border-bottom-left-radius: 3px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .float-bubble.admin-mediasi {
        align-self: center !important;
        background: #f0fdf4 !important;
        color: #1e293b !important;
        border: 2px solid var(--pp-green) !important;
        border-radius: 14px !important;
        max-width: 92% !important;
        box-shadow: 0 2px 8px rgba(19, 76, 67, 0.12) !important;
    }
    .float-room-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-bottom: 1px solid #f1f5f9;
        cursor: pointer;
        transition: background 0.15s;
        width: 100%;
        box-sizing: border-box;
        overscroll-behavior: contain !important;
    }
    .float-room-item:hover {
        background: #f1f5f9;
    }
    .float-input-area {
        padding: 10px 12px;
        background: #fff;
        border-top: 1px solid #e2e8f0;
        flex-shrink: 0;
        width: 100%;
        box-sizing: border-box;
    }
    #floatChatBackdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1040;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }