.app-wraper{max-width:100%;margin:0 auto;background:#fff;min-height:100vh;display:flex;flex-direction:column;box-shadow:0 0 20px #0000001a;position:relative}.app-header{background:linear-gradient(135deg,#06c,#049,#002766);padding:24px 20px 28px;color:#fff;position:relative;overflow:hidden}.app-header:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="white" opacity="0.1"/><circle cx="80" cy="30" r="1.5" fill="white" opacity="0.1"/><circle cx="60" cy="70" r="1" fill="white" opacity="0.1"/></svg>');pointer-events:none}.app-info{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}.app-brand{display:flex;align-items:center;gap:12px}.app-icon{width:48px;height:48px;background:linear-gradient(45deg,#fff,#f0f7ff);border-radius:14px;display:flex;align-items:center;justify-content:center;color:#06c;font-weight:700;font-size:16px;box-shadow:0 4px 12px #00000026}.app-title{font-size:18px;font-weight:600;letter-spacing:-.5px}.menu-button{width:40px;height:40px;border-radius:10px;background:#ffffff26;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.menu-button:hover{background:#ffffff40}.menu-dots{display:flex;flex-direction:column;gap:3px}.dot{width:4px;height:4px;background:#fff;border-radius:50%}.welcome-section{margin-top:20px;position:relative;z-index:1}.greeting{font-size:14px;opacity:.9;margin-bottom:4px}.user-name{font-size:18px;font-weight:600;letter-spacing:-.3px}.main-content{flex:1;padding:28px 20px 100px;background:#fff}.balance-card{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;padding:24px;color:#fff;margin-bottom:32px;position:relative;overflow:hidden}.balance-card:before{content:"";position:absolute;top:-50%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);border-radius:50%}.balance-label{font-size:14px;opacity:.8;margin-bottom:8px}.balance-amount{font-size:28px;font-weight:700;letter-spacing:-1px}.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px}.menu-item{text-align:center;text-decoration:none;color:#374151;transition:all .3s ease;padding:16px 12px;border-radius:16px;background:#fff;box-shadow:0 2px 8px #0000000f;border:1px solid #f1f5f9}.menu-item:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a;border-color:#e2e8f0}.menu-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;margin:0 auto 12px;position:relative;overflow:hidden}.menu-icon:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,rgba(255,255,255,.2),transparent);opacity:0;transition:opacity .3s ease}.menu-item:hover .menu-icon:before{opacity:1}.transfer{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.pembayaran{background:linear-gradient(135deg,#ef4444,#dc2626)}.topup{background:linear-gradient(135deg,#10b981,#059669)}.cardless{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.investasi{background:linear-gradient(135deg,#f59e0b,#d97706)}.lifestyle{background:linear-gradient(135deg,#06b6d4,#0891b2)}.menu-label{font-size:13px;font-weight:500;color:#000}.section-title{font-size:18px;font-weight:600;color:#1f2937;margin-bottom:20px;letter-spacing:-.3px}.quick-access{background:#fff;border-radius:16px;padding:4px;box-shadow:0 2px 8px #0000000f;border:1px solid #f1f5f9}.quick-item{display:flex;align-items:center;padding:16px;border-radius:12px;transition:all .2s ease;cursor:pointer;text-decoration:none;color:#374151}.quick-item:hover{background:#f8fafc}.quick-icon{width:44px;height:44px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;margin-right:16px;font-size:20px}.quick-text{font-size:15px;font-weight:500}.info-saldo{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.mutasi{background:linear-gradient(135deg,#10b981,#059669)}.buka-rekening{background:linear-gradient(135deg,#ef4444,#dc2626)}.cari-atm{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}@media (max-width: 375px){.app-wraper{max-width:100%}.menu-grid{grid-template-columns:repeat(3,1fr);gap:16px}.menu-icon{width:48px;height:48px;font-size:20px}.main-content{padding:24px 16px 100px}.app-header{padding:20px 16px 24px}}@media (min-width: 431px) and (max-width: 768px){.app-wraper{max-width:100%}.menu-grid{grid-template-columns:repeat(3,1fr);gap:24px}}@media (min-width: 769px){.app-wraper{max-width:100%}}@media (prefers-color-scheme: dark){body{background:#0f172a}.app-wraper{background:#1e293b;box-shadow:0 0 20px #0000004d}.main-content{background:#1e293b}.menu-item{background:#334155;border-color:#475569;color:#e2e8f0}.menu-label{color:#fff}.menu-item:hover{background:#3f4b5f;border-color:#64748b}.quick-access{background:#334155;border-color:#475569}.quick-item{color:#e2e8f0}.quick-item:hover{background:#3f4b5f}.section-title{color:#f1f5f9}.bottom-nav{background:#1e293bf2;border-top-color:#475569}}.menu-item{animation:fadeInUp .6s ease forwards}.menu-item:nth-child(1){animation-delay:.1s}.menu-item:nth-child(2){animation-delay:.2s}.menu-item:nth-child(3){animation-delay:.3s}.menu-item:nth-child(4){animation-delay:.4s}.menu-item:nth-child(5){animation-delay:.5s}.menu-item:nth-child(6){animation-delay:.6s}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:#f8fafc;overflow-x:hidden;line-height:1.6}.container{max-width:430px;margin:0 auto;background:#fff;min-height:100vh;display:flex;flex-direction:column;box-shadow:0 0 20px #0000001a;position:relative}.app-header{background:linear-gradient(135deg,#06c,#049,#002766);padding:24px 20px 20px;color:#fff;position:relative;overflow:hidden}.app-header:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="white" opacity="0.1"/><circle cx="80" cy="30" r="1.5" fill="white" opacity="0.1"/><circle cx="60" cy="70" r="1" fill="white" opacity="0.1"/></svg>');pointer-events:none}.status-bar{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:500;margin-bottom:16px;position:relative;z-index:1}.time{font-weight:600}.battery-signal{display:flex;align-items:center;gap:8px}.header-nav{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}.back-button{width:40px;height:40px;border-radius:10px;background:#ffffff26;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;border:none;color:#fff}.back-button:hover{background:#ffffff40}.page-title{font-size:18px;font-weight:600;letter-spacing:-.3px}.header-actions{display:flex;gap:8px}.header-button{width:40px;height:40px;border-radius:10px;background:#ffffff26;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;border:none;color:#fff}.header-button:hover{background:#ffffff40}.main-content{flex:1;padding:24px 20px 100px;background:#f8fafc}.filter-tabs{display:flex;background:#fff;border-radius:16px;padding:4px;margin-bottom:24px;box-shadow:0 2px 8px #0000000f;border:1px solid #f1f5f9}.filter-tab{flex:1;padding:12px 16px;text-align:center;border-radius:12px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;color:#6b7280;background:transparent;border:none}.filter-tab.active{background:#06c;color:#fff;box-shadow:0 2px 8px #0066cc4d}.date-filter{display:flex;gap:12px;margin-bottom:24px}.date-button{flex:1;padding:12px 16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;font-size:14px;font-weight:500;color:#374151;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.date-button:hover{border-color:#06c;background:#f0f7ff}.transaction-summary{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;padding:24px;color:#fff;margin-bottom:24px;position:relative;overflow:hidden}.transaction-summary:before{content:"";position:absolute;top:-50%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);border-radius:50%}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;position:relative;z-index:1}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;opacity:.9}.summary-amount{font-size:16px;font-weight:600}.transaction-list{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 8px #0000000f;border:1px solid #f1f5f9}.transaction-item{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid #f1f5f9;transition:all .2s ease;cursor:pointer;text-decoration:none;color:inherit}.transaction-item:last-child{border-bottom:none}.transaction-item:hover{background:#f8fafc}.transaction-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;margin-right:16px;position:relative;overflow:hidden}.transaction-icon:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,rgba(255,255,255,.2),transparent)}.icon-transfer-out{background:linear-gradient(135deg,#ef4444,#dc2626)}.icon-transfer-in{background:linear-gradient(135deg,#10b981,#059669)}.icon-payment{background:linear-gradient(135deg,#f59e0b,#d97706)}.icon-topup{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.icon-investment{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.transaction-details{flex:1;min-width:0}.transaction-title{font-size:15px;font-weight:600;color:#1f2937;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transaction-subtitle{font-size:13px;color:#6b7280;margin-bottom:4px}.transaction-date{font-size:12px;color:#9ca3af}.transaction-amount{text-align:right}.amount-value{font-size:15px;font-weight:600;margin-bottom:4px}.amount-positive{color:#10b981}.amount-negative{color:#ef4444}.transaction-status{font-size:11px;padding:4px 8px;border-radius:6px;font-weight:500}.status-success{background:#10b9811a;color:#059669}.status-pending{background:#f59e0b1a;color:#d97706}.status-failed{background:#ef44441a;color:#dc2626}.load-more{text-align:center;padding:20px;color:#6b7280;font-size:14px;cursor:pointer;transition:color .2s ease}.load-more:hover{color:#06c}.empty-state{text-align:center;padding:60px 20px;color:#6b7280}.empty-icon{font-size:64px;color:#d1d5db;margin-bottom:16px}.empty-title{font-size:18px;font-weight:600;color:#374151;margin-bottom:8px}.empty-subtitle{font-size:14px;color:#6b7280}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);max-width:430px;width:100%;display:flex;justify-content:space-around;background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid #e5e7eb;padding:12px 0 24px;z-index:1000}.nav-item{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#9ca3af;transition:all .3s ease;padding:8px 16px;border-radius:12px;min-width:60px}.nav-item.active{color:#06c;background:#0066cc1a}.nav-item:hover{color:#06c}.nav-item .material-icons{font-size:22px;margin-bottom:4px}.nav-item div{font-size:11px;font-weight:500}@media (max-width: 375px){.container{max-width:100%}.main-content{padding:20px 16px 100px}.app-header{padding:20px 16px 16px}.filter-tabs{margin-bottom:20px}.transaction-item{padding:14px 16px}}@media (prefers-color-scheme: dark){body{background:#0f172a}.container{background:#1e293b;box-shadow:0 0 20px #0000004d}.main-content{background:#0f172a}.filter-tabs,.transaction-list{background:#334155;border-color:#475569}.filter-tab{color:#cbd5e1}.date-button{background:#334155;border-color:#475569;color:#e2e8f0}.transaction-item{border-bottom-color:#475569}.transaction-item:hover{background:#3f4b5f}.transaction-title{color:#f1f5f9}.transaction-subtitle{color:#94a3b8}.transaction-date{color:#64748b}.bottom-nav{background:#1e293bf2;border-top-color:#475569}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.transaction-item{animation:fadeInUp .4s ease forwards}.transaction-item:nth-child(1){animation-delay:.1s}.transaction-item:nth-child(2){animation-delay:.15s}.transaction-item:nth-child(3){animation-delay:.2s}.transaction-item:nth-child(4){animation-delay:.25s}.transaction-item:nth-child(5){animation-delay:.3s}._container_5t0j5_1{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:300px 1fr;min-height:100vh;gap:0}._sidebar_5t0j5_10{background:var(--surface);border-right:1px solid var(--border);padding:24px 0;overflow-y:auto;position:sticky;top:0;height:100vh}._sidebarHeader_5t0j5_20{padding:0 24px 24px;border-bottom:1px solid var(--border);margin-bottom:24px}._logo_5t0j5_26{display:flex;align-items:center;gap:12px;margin-bottom:16px}._logoIcon_5t0j5_33{width:40px;height:40px;background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px}._logoText_5t0j5_46{font-size:18px;font-weight:600;color:var(--text-primary)}._apiVersion_5t0j5_52{background:#3b82f61a;color:var(--info-color);padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500}._themeToggle_5t0j5_61{margin-top:16px;display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 12px;border-radius:8px;transition:background .2s ease}._themeToggle_5t0j5_61:hover{background:var(--code-bg)}._navSection_5t0j5_76{margin-bottom:24px}._navTitle_5t0j5_80{padding:0 24px 12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary)}._navItem_5t0j5_89{display:flex;align-items:center;padding:12px 24px;cursor:pointer;transition:all .2s ease;color:var(--text-primary);text-decoration:none;border-left:3px solid transparent}._navItem_5t0j5_89:hover{background:var(--code-bg);border-left-color:var(--primary-color)}._navItemActive_5t0j5_105{background:#0066cc1a;border-left-color:var(--primary-color);color:var(--primary-color)}._navItem_5t0j5_89 ._material-icons_5t0j5_111{margin-right:12px;font-size:20px}._methodBadge_5t0j5_116{padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;margin-left:auto}._methodGet_5t0j5_125{background:#10b98133;color:var(--success-color)}._methodPost_5t0j5_126{background:#3b82f633;color:var(--info-color)}._methodPut_5t0j5_127{background:#f59e0b33;color:var(--warning-color)}._methodDelete_5t0j5_128{background:#ef444433;color:var(--error-color)}._mainContent_5t0j5_130{padding:24px 32px;overflow-y:auto;background:var(--background)}._contentHeader_5t0j5_136{margin-bottom:24px}._pageTitle_5t0j5_140{font-size:32px;font-weight:700;color:var(--text-primary);margin-bottom:8px}._pageSubtitle_5t0j5_147{font-size:16px;color:var(--text-secondary)}body{margin:0;font-family:Segoe UI,sans-serif;background:linear-gradient(to bottom right,#929292,#71757a);color:#fff}.login-container{width:90%;max-width:400px;margin:50px auto}.header{display:flex;align-items:center;margin-bottom:2rem}.avatar{width:60px;height:60px;background:#fff;color:#0039a6;font-weight:700;border-radius:16px;display:flex;justify-content:center;align-items:center;font-size:20px;margin-right:1rem}.info h2{margin:0;font-size:24px}.info p{margin:0;font-size:14px;color:#fff}.info h3{font-size:20px;font-weight:700;margin-top:4px}.login-card{background:#ffffff1a;padding:2rem;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center}.login-card h2{margin-bottom:1.5rem;font-size:22px;text-align:center;color:#fff}form{display:flex;flex-direction:column;gap:1rem}input{padding:.75rem;border:none;border-radius:12px;font-size:16px;background:#fff;color:#0039a6}button{padding:.75rem;border:none;border-radius:12px;background-color:#0151cc;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:background .3s}button:hover{background-color:#013ca0}@media (prefers-color-scheme: dark){body{background:#0e1525;color:#e2e8f0}.login-card{background:#ffffff0d}.info p{color:#cbd5e1}input{background:#fff;color:#000}button{background-color:#2563eb}button:hover{background-color:#1d4ed8}}.menu-service{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:32px}.menu-icon-service{text-align:center;text-decoration:none;color:#374151;transition:all .3s ease;padding:12px;border-radius:16px;background:#fff;box-shadow:0 2px 8px #00000014;border:1px solid #f1f5f9}.menu-icon-service img{width:80px;height:80px;object-fit:cover;border-radius:50%;display:block;margin:0 auto 8px}.menu-icon-service .menu-label{font-size:14px;margin-top:4px;font-weight:500}._container_fqccs_2{min-height:100vh;background:#fff;color:var(--text-primary);padding:16px}._app-header_fqccs_10 ._app-brand_fqccs_10{display:flex;align-items:center}._app-header_fqccs_10{background:linear-gradient(135deg,#06c,#049,#002766);padding:24px 20px 28px;color:#fff;position:relative;overflow:hidden}._app-header_fqccs_10:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="white" opacity="0.1"/><circle cx="80" cy="30" r="1.5" fill="white" opacity="0.1"/><circle cx="60" cy="70" r="1" fill="white" opacity="0.1"/></svg>');pointer-events:none}._app-icon_fqccs_34{width:48px;height:48px;background:linear-gradient(45deg,#fff,#f0f7ff);color:#06c;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700}._app-title_fqccs_46{margin-left:8px;font-size:20px;font-weight:600;color:#fff}._balance-card_fqccs_56{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;padding:24px;color:#fff;margin-bottom:32px;position:relative;overflow:hidden;box-shadow:0 10px 25px #00000026;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}._topup-input_fqccs_69{width:100%;padding:12px 14px;background-color:#f1f5f9;border:1px solid #d1d5db;border-radius:10px;color:#1f2937;font-size:15px;transition:all .25s ease}._topup-input_fqccs_69:focus{outline:none;border-color:#667eea;background-color:#fff;box-shadow:0 0 0 4px #667eea33}._menu-grid_fqccs_88{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}._menu-item_fqccs_94{background:#ffffff0f;border-radius:12px;padding:16px;text-align:center;display:flex;flex-direction:column;justify-content:center;transition:background .2s}._menu-item_fqccs_94._active_fqccs_107{background:var(--primary-color);color:var(--surface)}._menu-price_fqccs_112{color:#000;margin-top:4px}@media (prefers-color-scheme: dark){body{background:#0f172a;color:#f1f5f9}._balance-card_fqccs_56{background:linear-gradient(135deg,#1e3a8a,#3b82f6);color:#fff}._container_fqccs_2,._main-content_fqccs_129{background:#161d29}._menu-item_fqccs_94{background:#334155;border-color:#475569;color:#e2e8f0;box-shadow:none}._menu-item_fqccs_94:hover{background:#475569}._menu-price_fqccs_112{color:#fff}._section-title_fqccs_148{color:#f1f5f9}}