body {
       	background: #eef3f8;
       	font-family: 'Poppins', system-ui;
       	display: flex;
       	justify-content: center;
       }

       /* frame */
       .app {
       	width: 390px;
       	min-height: 100vh;
       	background: #f8fafc;
       	overflow: hidden;
       	position: relative;
       	box-shadow: 0 25px 60px rgba(0, 0, 0, .08);
       }

       /* header */
       .header {
       	background: linear-gradient(135deg, #0d6efd, #3b82f6 60%, #60a5fa);
       	padding: 22px 18px 80px;
       	color: white;
       	border-bottom-left-radius: 30px;
       	border-bottom-right-radius: 30px;
       	box-shadow: 0 10px 30px rgba(37, 99, 235, .25);
       	position: relative;
       }

       .greeting {
       	font-size: 15px;
       	font-weight: 600;
       }

       .subtitle {
       	font-size: 12px;
       	opacity: .9;
       }

       .avatar {
       	width: 40px;
       	height: 40px;
       	border-radius: 50%;
       	background: rgba(255, 255, 255, .25);
       	display: flex;
       	align-items: center;
       	justify-content: center;
       	font-weight: 600;
       	backdrop-filter: blur(6px);
       }

       /* search */
       .search-wrapper {
       	position: relative;
       	margin-top: 14px;
       }

       .search-input {
       	border-radius: 30px;
       	border: none;
       	padding: 10px 16px 10px 38px;
       	font-size: 13px;
       	box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
       }

       .search-icon {
       	position: absolute;
       	left: 12px;
       	top: 50%;
       	transform: translateY(-50%);
       	font-size: 14px;
       	opacity: .6;
       }

       /* welcome */
       .welcome-card {
       	position: absolute;
       	bottom: -38px;
       	left: 50%;
       	transform: translateX(-50%);
       	width: 88%;
       	background: white;
       	border-radius: 20px;
       	padding: 15px;
       	box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
       }

       .welcome-title {
       	font-size: 13px;
       	font-weight: 600;
       	margin-bottom: 3px;
       }

       .welcome-desc {
       	font-size: 12px;
       	color: #64748b;
       }

       /* content */
       .content {
       	padding: 65px 14px 95px;
       }

       /* card */
       .menu-category {
       	background: white;
       	padding: 14px;
       	border-radius: 20px;
       	margin-bottom: 14px;
       	box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
       }

       .menu-category h6 {
       	font-size: 12px;
       	font-weight: 600;
       	margin-bottom: 10px;
       	color: #0f172a;
       }

       /* grid */
       .row.g-3 {
       	--bs-gutter-x: .6rem;
       	--bs-gutter-y: .6rem;
       }

       /* menu */
       .menu-bank {
       	padding: 12px 6px;
       	border-radius: 14px;
       	transition: .2s;
       	text-align: center;
       }

       .menu-bank:hover {
       	background: #f1f5f9;
       }

       .menu-bank:active {
       	transform: scale(.95);
       }

       /* icon premium */
       .icon-circle {
       	width: 46px;
       	height: 46px;
       	border-radius: 16px;
       	background: linear-gradient(145deg, #eff6ff, #dbeafe);
       	display: flex;
       	align-items: center;
       	justify-content: center;
       	margin: auto;
       	font-size: 20px;
       	color: #1d4ed8;

       	box-shadow:
       		0 4px 10px rgba(0, 0, 0, .05),
       		inset 0 1px 0 rgba(255, 255, 255, .6);
       }

       /* label */
       .menu-label {
       	font-size: 11px;
       	margin-top: 6px;
       	color: #334155;
       	font-weight: 500;
       }

       /* bottom nav */
       .bottom-nav {
       	position: fixed;
       	bottom: 0;
       	width: 390px;
       	background: white;
       	padding: 10px 4px 12px;
       	box-shadow: 0 -15px 40px rgba(0, 0, 0, .08);
       	border-top-left-radius: 24px;
       	border-top-right-radius: 24px;
       	z-index: 1050;
       	/* penting */
       }



       .nav-icon {
       	font-size: 21px;
       	display: block;
       	margin-bottom: 2px;
       }

       .nav-item.active {
       	color: #2563eb;
       	font-weight: 600;
       }

       .nav-item {
       	text-align: center;
       	font-size: 11px;
       	color: #94a3b8;
       	cursor: pointer;
       }