/* ================================
   NUHA 5 — GREEN PRIMARY
   Yayasan Nurul Hayah 5 Pancalang
   ================================ */
:root {
	/* PRIMARY — HIJAU IDENTITAS */
	--pui-primary: #3F9270;
	--pui-primary-dark: #2E6F55;
	--pui-primary-light: #70B697;

	/* SECONDARY — MERAH LOGO */
	--pui-secondary: #C62828;
	--pui-secondary-dark: #981D1D;
	--pui-secondary-light: #E76A6A;

	/* BACKGROUND */
	--pui-bg: #F6F9F7;
	--pui-surface: #FFFFFF;
	--pui-surface-soft: #EEF6F1;

	/* GRADIENT */
	--pui-gradient: #55A580;

	/* TEXT */
	--pui-text: #292D2B;
	--pui-text-soft: #68716D;
	--pui-text-light: #A2AAA6;

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

	/* STATUS */
	--pui-success: #32805F;
	--pui-warning: #D39A20;
	--pui-danger: #C62828;
	--pui-info: #3B82F6;
}

.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), var(--pui-gradient));
	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), var(--pui-gradient));
	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), var(--pui-gradient));
	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), var(--pui-gradient));
	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), var(--pui-gradient));
	color: #fff;
}

.pui-summary-card {
	padding: 22px;
	border-radius: 24px;
	background: linear-gradient(135deg, var(--pui-primary), var(--pui-gradient));
	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), var(--pui-gradient));
	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), var(--pui-gradient));
	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), var(--pui-gradient));
	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), var(--pui-gradient));
	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), var(--pui-gradient));
	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), var(--pui-gradient));
	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), var(--pui-gradient));
	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;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.11.0
   Section : Wallet / Tabungan
   Description : Dashboard tabungan santri
========================================================== */

.pui-wallet-card {
	position: relative;
	overflow: hidden;
	padding: 24px;
	margin-bottom: 18px;
	border-radius: 26px;
	background: linear-gradient(135deg, var(--pui-primary), #22a85c);
	color: #fff;
	box-shadow: 0 16px 34px rgba(15, 138, 67, .22);
}

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

.pui-wallet-card:after {
	content: "";
	position: absolute;
	width: 130px;
	height: 130px;
	right: 30px;
	bottom: -90px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
}

.pui-wallet-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 2;
	font-size: 13px;
	opacity: .9;
}

.pui-wallet-top i {
	font-size: 23px;
}

.pui-wallet-balance {
	position: relative;
	z-index: 2;
	margin: 18px 0 8px;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -.5px;
}

.pui-wallet-number {
	position: relative;
	z-index: 2;
	font-size: 12px;
	opacity: .75;
}

.pui-wallet-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 18px;
}

.pui-wallet-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 8px;
	border-radius: 20px;
	background: rgba(255, 255, 255, .72);
	color: var(--pui-text);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .04);
}

.pui-wallet-action:active {
	transform: scale(.97);
}

.pui-wallet-action-icon {
	width: 42px;
	height: 42px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 138, 67, .10);
	color: var(--pui-primary);
	font-size: 20px;
}

.pui-wallet-action span {
	font-size: 12px;
	font-weight: 600;
}

.pui-wallet-summary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 28px;
}

.pui-wallet-summary>div {
	padding: 17px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .04);
}

.pui-wallet-summary small {
	display: block;
	margin-bottom: 7px;
	color: var(--pui-text-soft);
	font-size: 12px;
}

.pui-wallet-summary strong {
	font-size: 16px;
}

.pui-wallet-summary .income {
	color: #16a34a;
}

.pui-wallet-summary .expense {
	color: #ef4444;
}

.pui-wallet-history {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 15px 0;
	color: inherit;
}

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

.pui-wallet-history-icon {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 19px;
}

.pui-wallet-history-icon.income {
	background: rgba(22, 163, 74, .10);
	color: #16a34a;
}

.pui-wallet-history-icon.expense {
	background: rgba(239, 68, 68, .10);
	color: #ef4444;
}

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

.pui-wallet-history-body strong {
	display: block;
	font-size: 14px;
}

.pui-wallet-history-body small {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--pui-text-soft);
}

.pui-wallet-history-amount {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.pui-wallet-history-amount.income {
	color: #16a34a;
}

.pui-wallet-history-amount.expense {
	color: #ef4444;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.11.1
   Section : Wallet Activity
   Description : Aktivitas periode, saldo, dan highlight wallet
========================================================== */

.pui-wallet-updated {
	position: relative;
	z-index: 2;
	display: block;
	margin-top: 12px;
	font-size: 10px;
	opacity: .65;
}

.pui-wallet-activity {
	padding: 20px;
	margin-bottom: 16px;
	border-radius: 24px;
	background: rgba(255, 255, 255, .78);
	border: 1px solid rgba(0, 0, 0, .05);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .045);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.pui-wallet-activity-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.pui-wallet-activity-header strong {
	display: block;
	font-size: 16px;
}

.pui-wallet-activity-header small {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	color: var(--pui-text-soft);
}

.pui-wallet-period {
	display: flex;
	padding: 3px;
	border-radius: 12px;
	background: rgba(0, 0, 0, .045);
}

.pui-wallet-period button {
	border: 0;
	padding: 7px 11px;
	border-radius: 9px;
	background: transparent;
	color: var(--pui-text-soft);
	font-size: 11px;
	font-family: inherit;
	cursor: pointer;
}

.pui-wallet-period button.active {
	background: #fff;
	color: var(--pui-primary);
	font-weight: 700;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .07);
}

.pui-wallet-flow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.pui-wallet-flow-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 13px;
	border-radius: 18px;
	background: rgba(0, 0, 0, .025);
}

.pui-wallet-flow-icon {
	width: 36px;
	height: 36px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 17px;
}

.pui-wallet-flow-icon.income {
	background: rgba(22, 163, 74, .10);
	color: #16a34a;
}

.pui-wallet-flow-icon.expense {
	background: rgba(239, 68, 68, .10);
	color: #ef4444;
}

.pui-wallet-flow-item small {
	display: block;
	margin-bottom: 3px;
	color: var(--pui-text-soft);
	font-size: 10px;
}

.pui-wallet-flow-item strong {
	display: block;
	font-size: 14px;
	line-height: 1.3;
}

.pui-wallet-flow-item span {
	display: block;
	margin-top: 3px;
	font-size: 10px;
	color: var(--pui-text-soft);
}

.pui-wallet-balance-info {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
	padding-top: 15px;
	border-top: 1px dashed rgba(0, 0, 0, .08);
}

.pui-wallet-balance-info div {
	flex: 1;
}

.pui-wallet-balance-info div:last-child {
	text-align: right;
}

.pui-wallet-balance-info span {
	display: block;
	margin-bottom: 4px;
	font-size: 10px;
	color: var(--pui-text-soft);
}

.pui-wallet-balance-info strong {
	font-size: 13px;
}

.pui-wallet-highlight {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 17px;
	margin-bottom: 26px;
	border-radius: 20px;
	background: linear-gradient(135deg, #fff, #f8fbf9);
	border: 1px solid rgba(15, 138, 67, .10);
}

.pui-wallet-highlight-icon {
	width: 42px;
	height: 42px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 138, 67, .09);
	color: var(--pui-primary);
	font-size: 19px;
	flex-shrink: 0;
}

.pui-wallet-highlight div:nth-child(2) {
	flex: 1;
	min-width: 0;
}

.pui-wallet-highlight small {
	display: block;
	margin-bottom: 3px;
	color: var(--pui-text-soft);
	font-size: 10px;
}

.pui-wallet-highlight div:nth-child(2) strong {
	display: block;
	font-size: 14px;
}

.pui-wallet-highlight-amount {
	color: var(--pui-primary);
	font-size: 14px;
	white-space: nowrap;
}

@media(max-width:360px) {
	.pui-wallet-flow {
		grid-template-columns: 1fr;
	}

	.pui-wallet-period button {
		padding: 7px 9px;
	}

	.pui-wallet-balance {
		font-size: 28px;
	}
}

/* ==========================================================
   PUI Finance UI
   Version : 1.11.2
   Section : Wallet Period Animation
========================================================== */

.pui-wallet-period-content {
	transition: opacity .22s ease, transform .22s ease;
	opacity: 1;
	transform: translateY(0);
}

.pui-wallet-period-content.is-changing {
	opacity: 0;
	transform: translateY(8px);
}

.pui-wallet-period button {
	transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .15s ease;
}

.pui-wallet-period button:active {
	transform: scale(.94);
}

/* ==========================================================
   PUI Finance UI
   Version : 1.12.0
   Section : Wallet Transaction History
   Description : Daftar transaksi wallet berdasarkan arah
========================================================== */

.pui-wallet-history-group {
	margin-bottom: 26px;
}

.pui-wallet-history-month {
	margin-bottom: 7px;
	padding-left: 2px;
	font-size: 12px;
	font-weight: 700;
	color: var(--pui-text-soft);
}

.pui-wallet-transaction {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	color: inherit;
}

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

.pui-wallet-transaction-icon {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 19px;
}

.pui-wallet-transaction-icon.topup,
.pui-wallet-transaction-icon.transfer {
	background: rgba(22, 163, 74, .10);
	color: #16a34a;
}

.pui-wallet-transaction-icon.withdrawal,
.pui-wallet-transaction-icon.payment,
.pui-wallet-transaction-icon.adminfee {
	background: rgba(239, 68, 68, .09);
	color: #ef4444;
}

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

.pui-wallet-transaction-body strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
}

.pui-wallet-transaction-body span {
	display: block;
	margin-top: 4px;
	color: var(--pui-text-soft);
	font-size: 11px;
}

.pui-wallet-transaction-amount {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.pui-wallet-transaction-amount.credit {
	color: #16a34a;
}

.pui-wallet-transaction-amount.debit {
	color: #ef4444;
}

.pui-wallet-empty {
	padding: 50px 25px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.pui-wallet-empty-icon {
	width: 64px;
	height: 64px;
	margin-bottom: 15px;
	border-radius: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 138, 67, .08);
	color: var(--pui-primary);
	font-size: 28px;
}

.pui-wallet-empty strong {
	font-size: 15px;
}

.pui-wallet-empty span {
	max-width: 260px;
	margin-top: 6px;
	color: var(--pui-text-soft);
	font-size: 12px;
	line-height: 1.5;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.12.1
   Section : Wallet Transaction Filter Animation
========================================================== */

.pui-wallet-history-group {
	transition: opacity .2s ease, transform .2s ease;
}

.pui-wallet-transaction {
	transition: opacity .2s ease, transform .2s ease;
}

.pui-wallet-transaction:active {
	transform: scale(.985);
}

.pui-wallet-empty {
	animation: puiWalletEmptyIn .25s ease;
}

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

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

/* ==========================================================
   PUI Finance UI
   Version : 1.12.3
   Section : Wallet Transaction Filters
========================================================== */

.pui-wallet-filter {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	padding: 5px;
	margin-bottom: 12px;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 18px;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 5px 16px rgba(0, 0, 0, .035);
}

.pui-wallet-filter button {
	min-height: 38px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: 13px;
	background: #fff;
	color: var(--pui-text-soft);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .035);
	transition: all .22s ease;
}

.pui-wallet-filter button:not(.active):active {
	transform: scale(.97);
	background: #f8faf9;
}

.pui-wallet-filter button.active {
	background: var(--pui-primary);
	border-color: var(--pui-primary);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 6px 15px rgba(15, 138, 67, .22);
}

.pui-wallet-period-filter {
	position: relative;
	margin-bottom: 24px;
}

.pui-period-trigger {
	width: 100%;
	min-height: 44px;
	padding: 0 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 15px;
	background: #fff;
	color: var(--pui-text);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	box-shadow: 0 5px 16px rgba(0, 0, 0, .035);
	transition: all .2s ease;
}

.pui-period-trigger:active {
	transform: scale(.985);
}

.pui-period-trigger i {
	font-size: 13px;
	color: var(--pui-text-soft);
	transition: transform .22s ease;
}

.pui-period-trigger.open i {
	transform: rotate(180deg);
}

.pui-period-dropdown {
	position: absolute;
	z-index: 100;
	top: calc(100% + 7px);
	left: 0;
	right: 0;
	padding: 6px;
	border: 1px solid rgba(0, 0, 0, .07);
	border-radius: 18px;
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 14px 35px rgba(0, 0, 0, .12);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(.98);
	transform-origin: top center;
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.pui-period-dropdown.open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.pui-period-dropdown button {
	width: 100%;
	min-height: 40px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--pui-text);
	font-family: inherit;
	font-size: 12px;
	text-align: left;
}

.pui-period-dropdown button:active {
	background: rgba(15, 138, 67, .06);
}

.pui-period-dropdown button.active {
	background: rgba(15, 138, 67, .09);
	color: var(--pui-primary);
	font-weight: 700;
}

.pui-period-dropdown button.active:after {
	content: "checkmark";
	font-family: "Framework7 Icons";
	font-size: 14px;
}

.pui-wallet-history-group.pui-filter-hidden {
	display: none;
}

/* ==========================================================
   PUI Finance UI
   Version : 1.13.0
   Section : Jajan Siswa
   Description : Riwayat pembelian jajanan siswa
========================================================== */

.pui-snack-summary {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 18px;
	padding: 16px 17px;
	border: 1px solid rgba(15, 138, 67, .09);
	border-radius: 20px;
	background: linear-gradient(135deg, #fff, #f7fbf8);
	box-shadow: 0 7px 20px rgba(0, 0, 0, .04);
}

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

.pui-snack-summary-info {
	min-width: 0;
	flex: 1;
}

.pui-snack-summary-info span {
	display: block;
	margin-bottom: 3px;
	color: var(--pui-text-soft);
	font-size: 10px;
}

.pui-snack-summary-info strong {
	display: block;
	font-size: 18px;
	line-height: 1.2;
}

.pui-snack-summary-info small {
	display: block;
	margin-top: 4px;
	color: var(--pui-text-soft);
	font-size: 10px;
}

.pui-snack-filter {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 25px;
}

.pui-snack-filter-item {
	position: relative;
}

.pui-snack-filter-item label {
	display: block;
	margin: 0 0 6px 3px;
	color: var(--pui-text-soft);
	font-size: 10px;
	font-weight: 600;
}

.pui-snack-filter-item select {
	width: 100%;
	height: 42px;
	padding: 0 34px 0 12px;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 14px;
	background: #fff;
	color: var(--pui-text);
	font-family: inherit;
	font-size: 12px;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .035);
}

.pui-snack-filter-item i {
	position: absolute;
	right: 12px;
	bottom: 13px;
	color: var(--pui-text-soft);
	font-size: 12px;
	pointer-events: none;
}

.pui-snack-list {
	margin-bottom: 20px;
}

.pui-snack-date-group {
	margin-bottom: 23px;
}

.pui-snack-date {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
	padding: 0 2px;
}

.pui-snack-date span {
	font-size: 12px;
	font-weight: 700;
	color: var(--pui-text);
}

.pui-snack-date small {
	font-size: 10px;
	color: var(--pui-text-soft);
}

.pui-snack-item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 2px;
	color: inherit;
}

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

.pui-snack-item:active {
	opacity: .7;
}

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

.pui-snack-info {
	flex: 1;
	min-width: 0;
}

.pui-snack-info strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
}

.pui-snack-info span {
	display: block;
	margin-top: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--pui-text-soft);
	font-size: 10px;
}

.pui-snack-info small {
	display: block;
	margin-top: 3px;
	color: var(--pui-text-soft);
	font-size: 9px;
}

.pui-snack-amount {
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--pui-text);
}

.pui-snack-empty {
	padding: 50px 25px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.pui-snack-empty-icon {
	width: 62px;
	height: 62px;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 21px;
	background: rgba(15, 138, 67, .08);
	color: var(--pui-primary);
	font-size: 27px;
}

.pui-snack-empty strong {
	font-size: 15px;
}

.pui-snack-empty span {
	max-width: 260px;
	margin-top: 6px;
	color: var(--pui-text-soft);
	font-size: 11px;
	line-height: 1.5;
}

@media(max-width:360px) {
	.pui-snack-filter {
		gap: 7px;
	}

	.pui-snack-item {
		gap: 9px;
	}

	.pui-snack-amount {
		font-size: 11px;
	}
}

/* ==========================================================
   PUI Family Account
   Version : 1.14.0
   Section : Akun Keluarga
   Description : Daftar akun siswa dalam satu keluarga
========================================================== */

.pui-family-list{display:flex;flex-direction:column;gap:12px;}

.pui-family-account{position:relative;display:block;padding:16px;border:1px solid rgba(0,0,0,.055);border-radius:21px;background:rgba(255,255,255,.92);color:var(--pui-text);box-shadow:0 6px 20px rgba(0,0,0,.045);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.pui-family-account:active{transform:scale(.985);}
.pui-family-account.active{border-color:rgba(15,138,67,.20);box-shadow:0 8px 24px rgba(15,138,67,.09);}
.pui-family-account.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pui-primary);border-radius:0 4px 4px 0;}

.pui-family-active-badge{position:absolute;right:13px;top:13px;display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:10px;background:rgba(15,138,67,.09);color:var(--pui-primary);font-size:9px;font-weight:700;}
.pui-family-active-badge i{font-size:12px;}

.pui-family-top{display:flex;align-items:center;gap:11px;min-width:0;}
.pui-family-avatar{width:48px;height:48px;flex-shrink:0;object-fit:cover;border-radius:16px;background:#f4f7f5;border:1px solid rgba(0,0,0,.05);}
.pui-family-identity{min-width:0;flex:1;padding-right:55px;}
.pui-family-identity strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;}
.pui-family-identity span{display:block;margin-top:4px;color:var(--pui-text-soft);font-size:10px;}
.pui-family-chevron{flex-shrink:0;color:var(--pui-text-soft);font-size:15px;}

.pui-family-school{display:flex;align-items:center;gap:9px;margin-top:14px;padding:10px 11px;border-radius:14px;background:rgba(0,0,0,.025);}
.pui-family-school>i{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(15,138,67,.08);color:var(--pui-primary);font-size:14px;}
.pui-family-school div{min-width:0;}
.pui-family-school strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600;}
.pui-family-school span{display:block;margin-top:2px;color:var(--pui-text-soft);font-size:9px;}

.pui-family-finance{display:flex;align-items:center;margin-top:13px;}
.pui-family-finance-item{flex:1;min-width:0;}
.pui-family-finance-item span{display:block;margin-bottom:4px;color:var(--pui-text-soft);font-size:9px;}
.pui-family-finance-item strong{display:block;font-size:13px;font-weight:700;}
.pui-family-finance-item strong.warning{color:#d97706;}
.pui-family-finance-item strong.safe{color:var(--pui-primary);}
.pui-family-finance-divider{width:1px;height:27px;margin:0 14px;background:rgba(0,0,0,.07);}

.pui-family-note{display:flex;align-items:flex-start;gap:8px;margin:17px 3px 0;color:var(--pui-text-soft);font-size:10px;line-height:1.5;}
.pui-family-note i{margin-top:1px;color:var(--pui-primary);font-size:13px;}

@media(max-width:360px){
    .pui-family-account{padding:14px;}
    .pui-family-avatar{width:44px;height:44px;border-radius:14px;}
    .pui-family-identity strong{font-size:13px;}
    .pui-family-finance-item strong{font-size:12px;}
}