:root {

    /* PRIMARY */

    --pui-primary: #0F8A43;
    --pui-primary-dark: #05652F;
    --pui-primary-light: #34C86F;


    /* SECONDARY */

    --pui-secondary: #E4C437;
    --pui-secondary-light: #F7D85A;


    /* BACKGROUND */

    --pui-bg: #F4F7FA;
    --pui-surface: #FFFFFF;
    --pui-surface-soft: #FBFCFD;


    /* TEXT */

    --pui-text: #22303C;
    --pui-text-soft: #7A8796;
    --pui-text-light: #A7B0BC;


    /* BORDER */
    --pui-border: #E7EDF3;


    /* STATUS */
    --pui-success: #16A34A;
    --pui-warning: #F59E0B;
    --pui-danger: #EF4444;
    --pui-info: #3B82F6;


    /* GLASS */
    --pui-glass:
        rgba(255, 255, 255, .60);

    /* SHADOW */
    --pui-shadow-sm:
        0 4px 12px rgba(0, 0, 0, .05);
    --pui-shadow:
        0 12px 30px rgba(0, 0, 0, .08);
    --pui-shadow-lg:
        0 20px 48px rgba(0, 0, 0, .12);


    /* RADIUS */
    --pui-radius-xs: 10px;
    --pui-radius-sm: 14px;
    --pui-radius-md: 18px;
    --pui-radius-lg: 24px;
    --pui-radius-xl: 30px;

    /* SPACING */
    --pui-space-xs: 6px;
    --pui-space-sm: 10px;
    --pui-space-md: 16px;
    --pui-space-lg: 24px;
    --pui-space-xl: 36px;


    /* ANIMATION */
    --pui-speed: .28s;

}

.d-none {
    display: none;
}

body {

    font-family:
        Inter,
        "Segoe UI",
        sans-serif;

    background:
        var(--pui-bg);

    color:
        var(--pui-text);

    font-size: 14px;

    line-height: 1.5;

}

.pui-glass {

    background:
        var(--pui-glass);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    border:
        1px solid rgba(255, 255, 255, .45);

}

.pui-card {

    background:
        var(--pui-surface);

    border-radius:
        var(--pui-radius-lg);

    padding:
        18px;

    box-shadow:
        var(--pui-shadow-sm);

    transition:
        all var(--pui-speed);

}

.pui-btn {

    height: 48px;

    border-radius: 16px;

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .25s;

}

.pui-btn-primary {

    background:

        linear-gradient(180deg,
            var(--pui-primary-light),
            var(--pui-primary));

    color: white;

}

.pui-section-title {

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 14px;

}

.pui-subtitle {

    color:
        var(--pui-text-soft);

    font-size: 13px;

}

.pui-radius {

    border-radius:
        var(--pui-radius-lg);

}

.pui-shadow {

    box-shadow:
        var(--pui-shadow);

}

.pui-glass-shadow {

    box-shadow:

        0 10px 28px rgba(255, 255, 255, .25),

        0 10px 30px rgba(0, 0, 0, .08);

}

/* Page */
.page {
    background: var(--pui-bg);
    color: var(--pui-text);
}

/* Navbar */
.navbar {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .45);
    box-shadow: 0 2px 16px rgba(0, 0, 0, .04);
}

/* Content Block */
.block {
    margin: 16px;
}

/* List */
.list ul {
    border-radius: var(--pui-radius-md);
    overflow: hidden;
    background: var(--pui-surface);
    box-shadow: var(--pui-shadow-sm);
}

/* Buttons */
.button {
    border-radius: 16px;
    font-weight: 600;
    transition: all .25s ease;
}

/* FAB */
.fab a {
    border-radius: 18px;
}

/*==================================================
VERSION 1.1.0
HOME PAGE
==================================================*/

.pui-home {

    background:
        linear-gradient(180deg,
            #F4F8F5 0%,
            #F7F8FC 45%,
            #F4F7FA 100%);

    min-height: 100vh;

}

.pui-home-header {

    padding:

        18px 18px 10px;

    position: relative;

}

.pui-greeting {
    font-size: 13px;
    color: var(--pui-text-soft);
    margin-bottom: 2px;
}

.pui-username {
    font-size: 24px;
    font-weight: 700;
    color: var(--pui-text);
}

.pui-wallet {

    position: relative;

    overflow: hidden;

    padding: 22px;

    border-radius: 28px;

    background:

        linear-gradient(135deg,
            var(--pui-primary),
            var(--pui-primary-light));

    color: white;

    box-shadow:
        0 20px 40px rgba(15, 138, 67, .25);

    margin-top: 18px;

}

.pui-wallet:before {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    right: -60px;

    top: -90px;

    border-radius: 50%;

    background:

        rgba(255, 255, 255, .15);

}

.pui-wallet:after {

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    left: -20px;

    bottom: -40px;

    background:

        rgba(255, 255, 255, .08);

    border-radius: 50%;

}

.pui-wallet-title {

    font-size: 13px;

    opacity: .85;

}

.pui-wallet-balance {

    font-size: 34px;

    font-weight: 700;

    margin-top: 8px;

    letter-spacing: .5px;

}

.pui-wallet-info {

    display: flex;

    justify-content: space-between;

    margin-top: 18px;

    font-size: 13px;

    opacity: .92;

}

.pui-menu-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

    margin-top: 28px;

}

.pui-menu {

    text-align: center;

    cursor: pointer;

    transition: .25s;

}

.pui-menu:hover {

    transform: translateY(-4px);

}

.pui-menu-icon {

    width: 64px;

    height: 64px;

    margin: auto;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        rgba(255, 255, 255, .7);

    backdrop-filter: blur(20px);

    box-shadow:

        0 12px 28px rgba(0, 0, 0, .08);

    font-size: 28px;

    color: var(--pui-primary);

    transition: .25s;

}

.pui-menu:hover .pui-menu-icon {

    background: white;

    transform: scale(1.08);

}

.pui-menu-title {

    margin-top: 10px;

    font-size: 12px;

    font-weight: 600;

    color: var(--pui-text);

}

.pui-section {

    margin-top: 34px;

}

.pui-section-title {

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 16px;

    padding-left: 2px;

}

.pui-news {

    padding: 18px;

    background: white;

    border-radius: 22px;

    box-shadow: var(--pui-shadow-sm);

    display: flex;

    align-items: flex-start;

    gap: 16px;

    transition: .25s;

}

.pui-news:hover {

    transform: translateY(-3px);

    box-shadow: var(--pui-shadow);

}

.pui-news-icon {

    width: 48px;

    height: 48px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        rgba(15, 138, 67, .10);

    color: var(--pui-primary);

    font-size: 22px;

    flex-shrink: 0;

}

.pui-news-title {

    font-weight: 700;

    margin-bottom: 5px;

}

.pui-news-desc {

    font-size: 13px;

    color: var(--pui-text-soft);

    line-height: 1.6;

}

.pui-transaction {

    display: flex;

    align-items: center;

    padding: 16px;

    background: white;

    border-radius: 18px;

    margin-bottom: 12px;

    box-shadow: var(--pui-shadow-sm);

    transition: .25s;

}

.pui-transaction:hover {

    transform: translateY(-2px);

}

.pui-transaction-icon {

    width: 48px;

    height: 48px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        rgba(15, 138, 67, .10);

    color: var(--pui-primary);

    font-size: 20px;

    margin-right: 14px;

}

.pui-transaction-title {

    font-weight: 600;

    margin-bottom: 3px;

}

.pui-transaction-date {

    font-size: 12px;

    color: var(--pui-text-soft);

}

.pui-transaction-amount {

    margin-left: auto;

    font-weight: 700;

    color: var(--pui-primary);

}

.pui-menu,
.pui-news,
.pui-transaction,
.pui-wallet {

    -webkit-tap-highlight-color: transparent;

    transition: all .25s ease;

}

.pui-menu:active,
.pui-news:active,
.pui-transaction:active {

    transform: scale(.98);

}

/* ===========================================================
   PUI Finance UI
   Version : 1.1.0
   Section : Home Dashboard
   Description :
   Hero Area, Banner Slider, Running Bill,
   Quick Menu, Floating Bottom Navigation
=========================================================== */

/* ---------- HOME ---------- */

.pui-home {
    background: #f4f8f6;
}

/* ---------- HERO ---------- */

.pui-hero {
    background: linear-gradient(135deg, var(--pui-primary), #22b35d);
    padding: 20px 18px 120px;
    border-radius: 0 0 36px 36px;
    position: relative;
    overflow: hidden;
}

.pui-hero:before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -80px;
    top: -100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}

.pui-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.pui-logo {
    height: 42px;
}

.pui-notification {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: relative;
}

.pui-badge-dot {
    width: 8px;
    height: 8px;
    background: #ff3b30;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    right: 10px;
}

.pui-greeting small {
    color: #dff7e8;
    display: block;
    font-size: 13px;
}

.pui-greeting h2 {
    color: #fff;
    margin: 6px 0 4px;
    /* font-size: 28px; */
    font-size: 20px;
}

.pui-greeting span {
    color: #ecfff4;
    font-size: 14px;
}

/* ---------- BANNER ---------- */

.pui-banner {
    margin-top: 22px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .15);
}

.pui-banner img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
}

/* ---------- BILL ---------- */

.pui-bill {
    margin: -90px 18px 0;
    background: #fff;
    border-radius: 24px;
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
    position: relative;
    z-index: 10;
}

.pui-pay-btn {
    background: linear-gradient(135deg, var(--pui-primary), #22b35d);
    color: #fff;
    padding: 10px 18px;
    border-radius: 14px;
    font-weight: 600;
}

/* ---------- MENU ---------- */

.pui-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 26px;
}

.pui-menu {
    text-align: center;
    color: #444;
}

.pui-menu-icon {
    width: 66px;
    height: 66px;
    margin: auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(14px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--pui-primary);
    font-size: 26px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
    transition: .25s;
}

.pui-menu:active .pui-menu-icon {
    transform: scale(.94);
}

.pui-menu span {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
}

/* ---------- SECTION ---------- */

.pui-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.pui-section-header h3 {
    margin: 0;
    font-size: 18px;
}

.pui-section-header a {
    color: var(--pui-primary);
    font-size: 13px;
}

/* ---------- NEWS ---------- */

.pui-news {
    display: flex;
    gap: 16px;
    align-items: center;
}

.pui-news-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #eef9f2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--pui-primary);
}

/* ---------- FLOATING NAV ---------- */

.pui-bottom-nav {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 18px;
    height: 72px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .68);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .12);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 999;
}

.pui-bottom-nav a {
    width: 68px;
    height: 56px;
    border-radius: 18px;
    color: #888;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    transition: .25s;
}

.pui-bottom-nav a i {
    font-size: 22px;
    margin-bottom: 4px;
}

.pui-bottom-nav a.active {
    background: linear-gradient(135deg, var(--pui-primary), #22b35d);
    color: #fff;
    box-shadow: 0 10px 20px rgba(15, 138, 67, .30);
}

.pui-last-space {
    padding-bottom: 110px;
    /* padding-bottom: 70px; */
}

.pui-banner {
    overflow: hidden;
    border-radius: 26px;
    box-shadow: 0 18px 35px rgba(0, 0, 0, .15);
}

.pui-banner .swiper-slide {
    transform: scale(.96);
    transition: .35s;
}

.pui-banner .swiper-slide-active {
    transform: scale(1);
}

/* ==========================================================
   PUI Finance UI
   Version : 1.1.2
   Section : News Card
========================================================== */

.pui-news-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    margin-bottom: 14px;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
    color: inherit;
    transition: .25s;
}

.pui-news-card:active {
    transform: scale(.98);
}

.pui-news-image {
    width: 82px;
    height: 82px;
    border-radius: 16px;
    object-fit: cover;
    flex-shrink: 0;
}

.pui-news-content {
    flex: 1;
    min-width: 0;
}

.pui-news-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--pui-text);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pui-news-date {
    font-size: 12px;
    color: var(--pui-text-soft);
}

.pui-news-card i {
    color: #bbb;
    font-size: 18px;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.1.3
   Section : Running Bill Card
========================================================== */

.pui-bill-card {
    margin: -90px 18px 0;
    padding: 22px;
    border-radius: 26px;
    background: linear-gradient(135deg, #ffffff, #f7fbf8);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .10);
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.pui-bill-card:before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -70px;
    right: -60px;
    border-radius: 50%;
    background: rgba(34, 179, 93, .08);
}

.pui-bill-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.pui-bill-top small {
    color: var(--pui-text-soft);
    display: block;
}

.pui-bill-top h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.pui-bill-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(34, 179, 93, .12);
    color: var(--pui-primary);
    font-size: 24px;
}

.pui-bill-price {
    font-size: 34px;
    font-weight: 700;
    color: var(--pui-primary);
    margin-bottom: 18px;
}

.pui-bill-deadline {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--pui-text-soft);
    margin-bottom: 10px;
}

.pui-progress {
    height: 8px;
    background: #ebeff2;
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 20px;
}

.pui-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--pui-primary), #45d97f);
    border-radius: 100px;
}

.pui-pay-button {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--pui-primary), #22b35d);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(15, 138, 67, .25);
}

/* ==========================================================
   PUI Finance UI
   Version : 1.1.4
   Section : Payment History Card
   Description : Riwayat pembayaran pada halaman Beranda
========================================================== */

.pui-payment-card {
    display: block;
    background: #fff;
    border-radius: 24px;
    padding: 18px;
    margin-bottom: 16px;
    color: inherit;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
    transition: .25s;
}

.pui-payment-card:active {
    transform: scale(.98);
}

.pui-payment-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.pui-payment-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pui-text);
    margin-bottom: 6px;
}

.pui-payment-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--pui-text-soft);
}

.pui-payment-date i {
    font-size: 14px;
    color: var(--pui-primary);
}

.pui-payment-status {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pui-payment-status.success {
    background: rgba(34, 197, 94, .12);
    color: #16a34a;
}

.pui-payment-total {
    font-size: 30px;
    font-weight: 700;
    color: var(--pui-primary);
    margin-bottom: 18px;
}

.pui-payment-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(0, 0, 0, .08);
}

.pui-payment-info small {
    display: block;
    font-size: 11px;
    color: var(--pui-text-soft);
    margin-bottom: 4px;
}

.pui-payment-info strong {
    font-size: 14px;
    color: var(--pui-text);
}

/* ==========================================================
   PUI Finance UI
   Version : 1.1.5
   Section : Compact Payment History
   Description : Ringkasan transaksi untuk halaman Beranda
========================================================== */

.pui-payment-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fff;
    border-radius: 20px;
    color: inherit;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
    transition: .25s;
}

.pui-payment-item:active {
    transform: scale(.98);
}

.pui-payment-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(15, 138, 67, .08);
    color: var(--pui-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.pui-payment-body {
    flex: 1;
    min-width: 0;
}

.pui-payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.pui-payment-title {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pui-payment-amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--pui-primary);
    white-space: nowrap;
}

.pui-payment-meta {
    font-size: 12px;
    color: var(--pui-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pui-arrow {
    color: #c8c8c8;
    font-size: 18px;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.2.0
   Section : Transaction List Page
   Description : Riwayat transaksi, search, filter, summary
========================================================== */

.pui-page-header {
    display: flex;
    align-items: center;
    padding: 18px 18px 10px;
}

.pui-back {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pui-primary);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .05);
    margin-right: 14px;
}

.pui-page-header h2 {
    margin: 0;
    font-size: 22px;
}

.pui-page-header span {
    font-size: 12px;
    color: var(--pui-text-soft);
}

.pui-search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 18px;
    padding: 0 16px;
    height: 52px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .05);
}

.pui-search-box i {
    color: #999;
    margin-right: 10px;
}

.pui-search-box input {
    border: 0;
    background: none;
    width: 100%;
    font-size: 14px;
}

.pui-filter-scroll {
    display: flex;
    gap: 10px;
    overflow: auto;
    padding: 18px 0;
}

.pui-filter-scroll a {
    padding: 10px 18px;
    border-radius: 999px;
    background: #fff;
    color: #666;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .05);
}

.pui-filter-scroll a.active {
    background: linear-gradient(135deg, var(--pui-primary), #22b35d);
    color: #fff;
}

.pui-summary-card {
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--pui-primary), #22b35d);
    color: #fff;
    box-shadow: 0 18px 40px rgba(15, 138, 67, .25);
}

.pui-summary-card small {
    opacity: .85;
}

.pui-summary-card h2 {
    margin: 6px 0 20px;
    font-size: 34px;
}

.pui-summary-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.pui-summary-footer strong {
    display: block;
    font-size: 20px;
}

.pui-summary-footer span {
    font-size: 12px;
    opacity: .85;
}

.pui-list-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--pui-text-soft);
    margin: 26px 4px 12px;
}

.pui-history-item {
    display: flex;
    gap: 14px;
    align-items: center;
    background: #fff;
    padding: 16px;
    border-radius: 20px;
    margin-bottom: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
    color: inherit;
}

.pui-history-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: rgba(15, 138, 67, .10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pui-primary);
    font-size: 22px;
    flex-shrink: 0;
}

.pui-history-icon.blue {
    background: rgba(59, 130, 246, .10);
    color: #3b82f6;
}

.pui-history-body {
    flex: 1;
    min-width: 0;
}

.pui-history-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.pui-history-title {
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pui-history-amount {
    font-weight: 700;
    color: var(--pui-primary);
    white-space: nowrap;
}

.pui-history-meta {
    font-size: 12px;
    color: var(--pui-text-soft);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.2.1
   Section : Transaction Filter
   Description : Filter tahun pelajaran & pengurutan
========================================================== */

.pui-filter-bar {
    display: flex;
    gap: 12px;
    margin: 18px 0;
}

.pui-filter-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    background: #fff;
    border-radius: 16px;
    color: var(--pui-text);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
    font-size: 13px;
    font-weight: 600;
}

.pui-filter-btn i {
    color: var(--pui-primary);
    font-size: 18px;
}

.pui-filter-btn select {
    display: none;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.2.2
   Section : Page Header
   Description : Header halaman dengan identitas tema
========================================================== */

.pui-page-header {
    position: relative;
    margin-bottom: 18px;
    padding: 28px 22px 70px;
    background: linear-gradient(135deg, var(--pui-primary), #22b35d);
    border-radius: 0 0 34px 34px;
    overflow: hidden;
}

.pui-page-header:before {
    content: "";
    position: absolute;
    top: -90px;
    right: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}

.pui-page-header:after {
    content: "";
    position: absolute;
    left: -60px;
    bottom: -80px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.pui-page-title {
    position: relative;
    z-index: 2;
}

.pui-page-title h2 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

.pui-page-title span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
}

.pui-page-header+.block {
    margin-top: -44px;
    position: relative;
    z-index: 10;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.3.0
   Section : Transaction Detail
   Description : Ringkasan transaksi, rincian pembayaran,
                 informasi transaksi dan invoice
========================================================== */

.pui-transaction-summary {
    background: linear-gradient(135deg, #fff, #f9fcfa);
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
}

.pui-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .12);
    color: #16a34a;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 18px;
}

.pui-summary-label {
    color: var(--pui-text-soft);
    font-size: 13px;
}

.pui-summary-total {
    /* font-size:36px; */
    font-size: 30px;
    font-weight: 700;
    color: var(--pui-primary);
    margin: 6px 0 20px;
}

.pui-summary-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    padding-top: 18px;
    border-top: 1px dashed rgba(0, 0, 0, .08);
}

.pui-summary-meta small {
    display: block;
    color: var(--pui-text-soft);
    margin-bottom: 4px;
}

.pui-summary-meta strong {
    font-size: 13px;
}

.pui-card-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 18px;
}

.pui-payment-detail-item,
.pui-payment-detail-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.pui-payment-detail-item {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.pui-payment-detail-item span {
    color: var(--pui-text-soft);
}

.pui-payment-detail-total {
    padding-top: 18px;
    font-size: 16px;
    font-weight: 700;
}

.pui-payment-detail-total strong {
    color: var(--pui-primary);
}

.pui-invoice-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    margin-top: 18px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
}

.pui-invoice-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(15, 138, 67, .10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pui-primary);
    font-size: 26px;
}

.pui-invoice-body {
    flex: 1;
}

.pui-invoice-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.pui-invoice-file {
    font-size: 12px;
    color: var(--pui-text-soft);
}

.pui-invoice-card .pui-btn {
    min-width: 120px;
    height: 42px;
    border-radius: 14px;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.4.0
   Section : Announcement List
   Description : Daftar pengumuman
========================================================== */

.pui-news-list {
    display: flex;
    gap: 14px;
    padding: 12px;
    margin-bottom: 14px;
    background: #fff;
    border-radius: 22px;
    color: inherit;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
    transition: .25s;
}

.pui-news-list:active {
    transform: scale(.985);
}

.pui-news-thumb {
    width: 92px;
    height: 92px;
    border-radius: 18px;
    object-fit: cover;
    flex-shrink: 0;
}

.pui-news-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pui-news-category {
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 10px;
}

.pui-news-category.finance {
    background: rgba(15, 138, 67, .10);
    color: var(--pui-primary);
}

.pui-news-category.academic {
    background: rgba(59, 130, 246, .10);
    color: #2563eb;
}

.pui-news-category.event {
    background: rgba(245, 158, 11, .12);
    color: #d97706;
}

.pui-news-heading {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--pui-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pui-news-meta {
    margin-top: auto;
    font-size: 12px;
    color: var(--pui-text-soft);
}

/* ==========================================================
   PUI Finance UI
   Version : 1.5.0
   Section : Announcement Detail
   Description : Detail pengumuman
========================================================== */

.pui-article-hero {
    margin: -42px 18px 0;
    position: relative;
    z-index: 10;
}

.pui-article-hero img {
    width: 100%;
    height: 220px;
    border-radius: 26px;
    object-fit: cover;
    display: block;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .12);
}

.pui-article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 26px 0 18px;
}

.pui-article-date {
    font-size: 12px;
    color: var(--pui-text-soft);
}

.pui-article-title {
    font-size: 28px;
    line-height: 1.35;
    margin: 0 0 24px;
    color: var(--pui-text);
}

.pui-article-content {
    font-size: 15px;
    line-height: 1.9;
    color: var(--pui-text);
}

.pui-article-content p {
    margin: 0 0 18px;
}

.pui-attachment {
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
}

.pui-attachment-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(15, 138, 67, .10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pui-primary);
    font-size: 22px;
}

.pui-attachment-body {
    flex: 1;
}

.pui-attachment-body strong {
    display: block;
    margin-bottom: 4px;
}

.pui-attachment-body small {
    color: var(--pui-text-soft);
}

.pui-related-news {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 10px 0;
    color: inherit;
}

.pui-related-news:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.pui-related-news img {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    object-fit: cover;
}

.pui-related-news strong {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 6px;
}

.pui-related-news small {
    color: var(--pui-text-soft);
}

/* ==========================================================
   PUI Finance UI
   Version : 1.6.0
   Section : Splash Screen
   Description : Splash screen modern
========================================================== */

.pui-splash {
    background: linear-gradient(180deg, var(--pui-primary), #22b35d);
    overflow: hidden;
}

.pui-splash-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.pui-splash-bg:before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    top: -120px;
    right: -120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.pui-splash-bg:after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    left: -70px;
    bottom: -70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.pui-splash-content {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 30px;
    text-align: center;
    z-index: 2;
}

.pui-splash-logo {
    width: 130px;
    height: 130px;
    margin: auto;
    border-radius: 34px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(18px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .15);
}

.pui-splash-logo img {
    width: 72%;
}

.pui-splash-title {
    margin-top: 28px;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .5px;
}

.pui-splash-subtitle {
    margin-top: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, .88);
}

.pui-splash-loading {
    position: absolute;
    left: 50%;
    bottom: 140px;
    transform: translateX(-50%);
    width: 180px;
}

.pui-loader {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
    overflow: hidden;
}

.pui-loader span {
    display: block;
    width: 45%;
    height: 100%;
    background: #fff;
    border-radius: 999px;
    animation: pui-loading 1.2s ease infinite;
}

@keyframes pui-loading {
    0% {
        margin-left: -45%;
    }

    100% {
        margin-left: 100%;
    }
}

.pui-splash-footer {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    z-index: 2;
}

.pui-school {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

.pui-version {
    font-size: 12px;
    margin-bottom: 4px;
}

.pui-developer {
    font-size: 11px;
    opacity: .9;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.6.1
   Section : Splash Animation & Background
   Description : Floating Bubble, Pattern, Logo Animation
========================================================== */

/* ---------- Pattern ---------- */

.pui-splash::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .04;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, .8) 2px, transparent 2px),
        linear-gradient(-45deg, rgba(255, 255, 255, .8) 2px, transparent 2px);
    background-size: 42px 42px;
    z-index: 0;
}

/* ---------- Floating Bubble ---------- */

.pui-splash::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -140px;
    top: 20%;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(255, 255, 255, .12),
            rgba(255, 255, 255, 0));
    animation: puiBubble 9s ease-in-out infinite alternate;
}

@keyframes puiBubble {

    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(40px, -35px) scale(1.15);
    }

}

/* ---------- Logo ---------- */

.pui-splash-logo {

    animation:
        puiLogo .9s ease,
        puiFloat 4s ease-in-out infinite;

}

@keyframes puiLogo {

    0% {

        opacity: 0;
        transform: scale(.6);

    }

    100% {

        opacity: 1;
        transform: scale(1);

    }

}

@keyframes puiFloat {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-8px);

    }

    100% {

        transform: translateY(0px);

    }

}

/* ---------- Title ---------- */

.pui-splash-title {

    animation: puiFadeUp .9s .25s both;

}

.pui-splash-subtitle {

    animation: puiFadeUp .9s .4s both;

}

@keyframes puiFadeUp {

    from {

        opacity: 0;
        transform: translateY(16px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}

/* ---------- Footer ---------- */

.pui-splash-footer {

    animation: puiFooter .8s .8s both;

}

@keyframes puiFooter {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

/* ---------- Loader ---------- */

.pui-loader {

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, .15);

}

.pui-loader span {

    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, .35),
            #fff,
            rgba(255, 255, 255, .35));

}

/* ==========================================================
   PUI Finance UI
   Version : 1.7.0
   Section : Login Page
   Description : Modern Login Screen
========================================================== */

.pui-login-page {
    background: #f4f8f6;
}

.pui-login-hero {
    position: relative;
    padding: 20px 24px 120px;
    text-align: center;
    background: linear-gradient(135deg, var(--pui-primary), #22b35d);
    border-radius: 0 0 36px 36px;
    overflow: hidden;
}

.pui-login-hero:before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -80px;
    top: -80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}

.pui-login-hero:after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    left: -50px;
    bottom: -50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.pui-login-logo {
    width: 120px;
    height: 120px;
    margin: auto;
    border-radius: 30px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(18px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 35px rgba(0, 0, 0, .15);
}

.pui-login-logo img {
    width: 70%;
}

.pui-login-title {
    margin-top: 22px;
    color: #fff;
    /* font-size:30px; */
    font-size: 24px;
    font-weight: 700;
}

.pui-login-subtitle {
    margin-top: 6px;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
}

.pui-login-card {
    margin: -90px 18px 24px;
    padding: 22px;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .10);
    position: relative;
    z-index: 10;
}

.pui-login-text {
    margin-top: 6px;
    margin-bottom: 20px;
    color: var(--pui-text-soft);
    font-size: 13px;
}

.pui-login-card .list {
    margin: 0 0 18px;
}

.pui-login-card .list ul {
    background: transparent;
    box-shadow: none;
}

.pui-login-card .item-content {
    background: #f7f9fb;
    border-radius: 18px;
    margin-bottom: 14px;
}

.pui-login-card .item-inner {
    padding: 10px 14px;
}

.pui-login-card .item-input-wrap input {
    font-size: 15px;
}

.pui-login-card .button {
    margin-top: 10px;
}

.pui-login-footer {
    margin-top: 22px;
    text-align: center;
    color: var(--pui-text-soft);
    font-size: 12px;
    line-height: 1.8;
}

/* ==========================================================
   Version : 1.7.1
   Section : Login Fullscreen Fix
========================================================== */

.pui-login-page,
.pui-login-page .page-content {
    padding: 0;
    margin: 0;
    height: 100%;
    background: #f4f8f6;
}

.pui-login-page .page-content {
    display: flex;
    flex-direction: column;
}

.pui-login-hero {
    margin: 0;
    padding-top: calc(env(safe-area-inset-top, 0px) + 36px);
}

.pui-login {
    position: absolute;
    inset: 0;
    overflow: auto;
    background: #f4f8f6;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.8.0
   Section : Profile Page
   Description : Profil pengguna dan pengaturan
========================================================== */

.pui-profile-card {
    margin-top: -42px;
    margin-bottom: 18px;
    padding: 28px 22px;
    text-align: center;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
    position: relative;
    z-index: 10;
}

.pui-profile-avatar {
    width: 92px;
    height: 92px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pui-primary), #22b35d);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 42px;
    box-shadow: 0 15px 35px rgba(15, 138, 67, .25);
}

.pui-profile-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--pui-text);
}

.pui-profile-id {
    margin-top: 6px;
    font-size: 13px;
    color: var(--pui-text-soft);
}

.pui-profile-school {
    margin-top: 10px;
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(15, 138, 67, .08);
    color: var(--pui-primary);
    font-size: 13px;
    font-weight: 600;
}

.pui-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.pui-info-row:last-child {
    border-bottom: 0;
}

.pui-info-row span {
    color: var(--pui-text-soft);
}

.pui-setting-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    color: inherit;
}

.pui-setting-item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.pui-setting-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: rgba(15, 138, 67, .10);
    color: var(--pui-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.pui-setting-body {
    flex: 1;
}

.pui-setting-body strong {
    display: block;
    margin-bottom: 4px;
}

.pui-setting-body small {
    color: var(--pui-text-soft);
    font-size: 12px;
}

.pui-btn-danger {
    margin-top: 18px;
    background: #fff;
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, .18);
    box-shadow: 0 8px 20px rgba(220, 38, 38, .08);
}

/* ==========================================================
   PUI Finance UI
   Version : 1.8.1
   Section : Digital Student Card
========================================================== */

.pui-student-card {
    position: relative;
    overflow: hidden;
    margin-top: -40px;
    margin-bottom: 18px;
    padding: 24px;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--pui-primary), #22b35d);
    color: #fff;
    box-shadow: 0 18px 40px rgba(15, 138, 67, .25);
}

.pui-card-pattern {
    position: absolute;
    inset: 0;
    opacity: .06;
    background-image:
        radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
    background-size: 18px 18px;
}

.pui-student-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.pui-student-logo {
    width: 42px;
}

.pui-student-school {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.pui-student-avatar {
    width: 88px;
    height: 88px;
    margin: 20px auto 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(15px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 42px;
}

.pui-student-name {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
}

.pui-student-id {
    text-align: center;
    margin-top: 6px;
    opacity: .9;
}

.pui-student-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 24px;
}

.pui-student-info small {
    display: block;
    opacity: .8;
    margin-bottom: 4px;
}

.pui-student-info strong {
    font-size: 14px;
    line-height: 1.5;
}

.pui-student-qr {
    width: 96px;
    height: 96px;
    margin: 24px auto 0;
    padding: 8px;
    border-radius: 18px;
    background: #fff;
}

.pui-student-qr canvas {
    width: 100%;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.9.0
   Section : WhatsApp Notification
   Description : Update nomor WhatsApp
========================================================== */

.pui-form-card {
    margin-top: -42px;
    margin-bottom: 18px;
    padding: 24px;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 16px 35px rgba(0, 0, 0, .08);
    position: relative;
    z-index: 10;
}

.pui-form-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--pui-primary), #22b35d);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    box-shadow: 0 12px 30px rgba(15, 138, 67, .25);
}

.pui-form-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.pui-form-subtitle {
    text-align: center;
    font-size: 13px;
    color: var(--pui-text-soft);
    line-height: 1.7;
    margin-bottom: 22px;
}

.pui-form-card .list {
    margin: 0;
}

.pui-form-card .list ul {
    background: none;
    box-shadow: none;
}

.pui-form-card .item-content {
    background: #f7f9fb;
    border-radius: 18px;
}

.pui-form-card .item-inner {
    padding: 10px 14px;
}

.pui-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    margin-bottom: 20px;
    background: rgba(15, 138, 67, .08);
    border-radius: 18px;
    color: var(--pui-primary);
}

.pui-info-box i {
    font-size: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

.pui-info-box span {
    font-size: 13px;
    line-height: 1.6;
}

/* ==========================================================
   PUI Finance UI
   Version : 2.0.0
   Section : Change Password
   Description : Halaman ganti password
========================================================== */

.password-old-toggle,
.password-new-toggle {
    cursor: pointer;
    color: var(--pui-text-soft);
    transition: .25s;
}

.password-old-toggle:active,
.password-new-toggle:active {
    color: var(--pui-primary);
}

.pui-form-card .item-input-wrap input[type=password],
.pui-form-card .item-input-wrap input[type=text] {
    letter-spacing: .3px;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.6.0
   Section : Finance Dashboard
   Description : Menu keuangan
========================================================== */

.pui-finance-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 18px 0 30px;
}

.pui-finance-item {
    display: block;
    background: #fff;
    border-radius: 22px;
    padding: 18px;
    color: inherit;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .05);
    transition: .25s;
}

.pui-finance-item:active {
    transform: scale(.98);
}

.pui-finance-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.pui-finance-icon.green {
    background: rgba(15, 138, 67, .10);
    color: var(--pui-primary);
}

.pui-finance-icon.red {
    background: rgba(239, 68, 68, .10);
    color: #ef4444;
}

.pui-finance-icon.orange {
    background: rgba(245, 158, 11, .12);
    color: #d97706;
}

.pui-finance-icon.blue {
    background: rgba(59, 130, 246, .10);
    color: #2563eb;
}

.pui-finance-item strong {
    display: block;
    font-size: 15px;
    margin-bottom: 6px;
}

.pui-finance-item small {
    display: block;
    color: var(--pui-text-soft);
    line-height: 1.5;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.7.0
   Section : Rekap SPP
========================================================== */

.pui-progress-card {
    background: #fff;
    border-radius: 24px;
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
}

.pui-progress-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--pui-primary);
    margin: 8px 0 18px;
}

.pui-progress-info {
    display: flex;
    justify-content: space-around;
    margin-top: 18px;
    text-align: center;
}

.pui-progress-info strong {
    display: block;
    font-size: 22px;
}

.pui-progress-info small {
    color: var(--pui-text-soft);
}

.pui-spp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}

.pui-spp-row:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.pui-spp-row small {
    color: var(--pui-text-soft);
}

.pui-status-dot {
    padding: 6px 12px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 12px;
    font-weight: 700;
}

.pui-status-dot.success {
    background: rgba(22, 163, 74, .12);
    color: #16a34a;
}

.pui-status-dot.danger {
    background: rgba(239, 68, 68, .12);
    color: #ef4444;
}

.pui-spp-row.danger strong:last-child {
    color: #ef4444;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.7.1
   Section : SPP Timeline
   Description : Timeline pembayaran SPP
========================================================== */

.pui-old-bill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
}

.pui-old-bill:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.pui-old-bill small {
    display: block;
    margin-top: 4px;
    color: var(--pui-text-soft);
}

.pui-old-bill strong:last-child {
    color: #ef4444;
}

.pui-spp-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    position: relative;
}

.pui-spp-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 38px;
    bottom: -8px;
    width: 2px;
    background: #e5e7eb;
}

.pui-spp-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.pui-spp-item.success .pui-spp-dot {
    background: var(--pui-primary);
}

.pui-spp-content {
    flex: 1;
}

.pui-spp-content strong {
    display: block;
    font-size: 15px;
}

.pui-spp-content small {
    display: block;
    margin-top: 4px;
    color: var(--pui-text-soft);
}

.pui-spp-price {
    font-weight: 700;
    color: var(--pui-primary);
    white-space: nowrap;
}

.pui-spp-item:not(.success) .pui-spp-price {
    color: #9ca3af;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.7.2
   Section : Previous School Year Arrears
   Description : Informasi tunggakan TP sebelumnya
========================================================== */

.pui-overdue-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #fff, #fffaf5);
    border: 1px solid rgba(245, 158, 11, .18);
    border-radius: 22px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
}

.pui-overdue-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: rgba(245, 158, 11, .12);
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.pui-overdue-body {
    flex: 1;
}

.pui-overdue-body strong {
    display: block;
    font-size: 15px;
    margin-bottom: 6px;
}

.pui-overdue-body small {
    display: block;
    line-height: 1.5;
    color: var(--pui-text-soft);
}

.pui-overdue-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--pui-primary);
    font-weight: 600;
    white-space: nowrap;
}

.pui-overdue-card.success {
    background: linear-gradient(135deg, #fff, #f6fcf8);
    border-color: rgba(34, 197, 94, .15);
}

.pui-overdue-card.success .pui-overdue-icon {
    background: rgba(34, 197, 94, .12);
    color: #16a34a;
}

.pui-overdue-card.success .pui-overdue-link {
    display: none;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.8.0
   Section : Overdue Page
========================================================== */

.pui-overdue-summary {
    padding: 24px;
    margin-bottom: 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, #fff, #fffaf6);
    border: 1px solid rgba(245, 158, 11, .18);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .05);
}

.pui-overdue-summary small {
    color: var(--pui-text-soft);
}

.pui-overdue-total {
    margin: 6px 0 18px;
    font-size: 34px;
    font-weight: 700;
    color: #d97706;
}

.pui-overdue-meta {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px dashed rgba(0, 0, 0, .08);
}

.pui-overdue-meta strong {
    display: block;
    font-size: 18px;
}

.pui-overdue-meta small {
    font-size: 12px;
}

.pui-overdue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    color: inherit;
}

.pui-overdue-item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.pui-overdue-item small {
    display: block;
    margin-top: 4px;
    color: var(--pui-text-soft);
}

.pui-overdue-price {
    font-size: 16px;
    font-weight: 700;
    color: #d97706;
    text-align: right;
}

.pui-overdue-status {
    margin-top: 6px;
    font-size: 11px;
    color: #ef4444;
    text-align: right;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.8.1
   Section : Information Card
   Description : Generic information / alert card
========================================================== */

.pui-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    margin-bottom: 18px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
}

.pui-info-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.pui-info-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    color: var(--pui-text);
}

.pui-info-card small {
    display: block;
    line-height: 1.6;
    font-size: 13px;
    color: var(--pui-text-soft);
}

/* Warning */

.pui-info-card.warning {
    background: linear-gradient(135deg, #fffdf8, #fff7ed);
    border-color: rgba(245, 158, 11, .18);
}

.pui-info-card.warning .pui-info-icon {
    background: rgba(245, 158, 11, .12);
    color: #d97706;
}

/* Success */

.pui-info-card.success {
    background: linear-gradient(135deg, #ffffff, #f6fcf8);
    border-color: rgba(34, 197, 94, .18);
}

.pui-info-card.success .pui-info-icon {
    background: rgba(34, 197, 94, .12);
    color: #16a34a;
}

/* Info */

.pui-info-card.info {
    background: linear-gradient(135deg, #ffffff, #f5f9ff);
    border-color: rgba(59, 130, 246, .18);
}

.pui-info-card.info .pui-info-icon {
    background: rgba(59, 130, 246, .12);
    color: #2563eb;
}

/* Primary */

.pui-info-card.primary {
    background: linear-gradient(135deg, #ffffff, #f4fbf6);
    border-color: rgba(15, 138, 67, .18);
}

.pui-info-card.primary .pui-info-icon {
    background: rgba(15, 138, 67, .10);
    color: var(--pui-primary);
}

/* ==========================================================
   PUI Finance UI
   Version : 1.9.0
   Section : Infaq Pembangunan
========================================================== */

.pui-infaq-card {
    padding: 24px;
    margin-bottom: 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, #ffffff, #f8fbff);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .05);
}

.pui-infaq-card small {
    color: var(--pui-text-soft);
}

.pui-infaq-target {
    margin: 8px 0 18px;
    font-size: 34px;
    font-weight: 700;
    color: var(--pui-primary);
}

.pui-infaq-summary {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed rgba(0, 0, 0, .08);
}

.pui-infaq-summary strong {
    display: block;
    font-size: 18px;
}

.pui-infaq-summary small {
    margin-top: 4px;
    display: block;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.9.1
   Section : Infaq Payment History
   Description : Riwayat pembayaran infaq pembangunan
========================================================== */

.pui-infaq-history-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    color: inherit;
}

.pui-infaq-history-item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.pui-infaq-history-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(15, 138, 67, .10);
    color: var(--pui-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.pui-infaq-history-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pui-infaq-history-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--pui-text);
}

.pui-infaq-history-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--pui-primary);
}

/* ==========================================================
   PUI Finance UI
   Version : 1.9.2
   Section : Vertical Payment History
   Description : Riwayat pembayaran (Infaq, Tunggakan, dll)
========================================================== */

.pui-history-vertical {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    color: inherit;
    transition: .25s;
}

.pui-history-vertical:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.pui-history-vertical:active {
    transform: scale(.985);
}

.pui-history-vertical-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(15, 138, 67, .10);
    color: var(--pui-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.pui-history-vertical-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pui-history-vertical-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--pui-text);
}

.pui-history-vertical-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--pui-primary);
}

/* ==========================================================
   PUI Finance UI
   Version : 1.10.0
   Section : 404 Not Found
   Description : Halaman konten tidak ditemukan
========================================================== */

.pui-404-page{
    background:linear-gradient(145deg,#f4f8f6,#edf7f1);
}

.pui-404-content{
    min-height:100%;
    /* padding:40px 28px; */
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.pui-404-content:before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    top:10%;
    right:-120px;
    border-radius:50%;
    background:rgba(34,179,93,.08);
}

.pui-404-content:after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    bottom:8%;
    left:-110px;
    border-radius:50%;
    background:rgba(15,138,67,.06);
}

.pui-404-logo{
    width:110px;
    height:110px;
    padding:20px;
    margin-bottom:22px;
    border-radius:32px;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:2;
}

.pui-404-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.pui-404-code{
    font-size:72px;
    line-height:1;
    font-weight:800;
    letter-spacing:-3px;
    color:var(--pui-primary);
    opacity:.14;
    margin-bottom:-12px;
    position:relative;
    z-index:2;
}

.pui-404-content h2{
    margin:0 0 10px;
    font-size:22px;
    font-weight:700;
    color:var(--pui-text);
    position:relative;
    z-index:2;
}

.pui-404-content p{
    max-width:300px;
    margin:0 auto 26px;
    font-size:14px;
    line-height:1.7;
    color:var(--pui-text-soft);
    position:relative;
    z-index:2;
}

.pui-404-button{
    min-height:46px;
    padding:0 20px;
    border-radius:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:linear-gradient(135deg,var(--pui-primary),#22b35d);
    color:#fff;
    font-size:14px;
    font-weight:700;
    box-shadow:0 12px 24px rgba(15,138,67,.22);
    position:relative;
    z-index:2;
    transition:.25s;
}

.pui-404-button:active{
    transform:scale(.97);
}

.pui-404-button i{
    font-size:18px;
}