:root{--primary: #1267d9;--primary-dark: #0753b8;--primary-light: #eaf3ff;--success: #16b364;--success-light: #eafaf2;--warning: #f59e0b;--warning-light: #fff7e6;--danger: #ef4444;--text: #172033;--text-secondary: #667085;--text-light: #98a2b3;--background: #f5f8fc;--card: #ffffff;--border: #e6ebf2;--radius-sm: 12px;--radius-md: 18px;--radius-lg: 24px;--shadow-sm: 0 4px 14px rgba(16, 24, 40, .06);--shadow-md: 0 10px 30px rgba(16, 24, 40, .09);--shadow-lg: 0 18px 45px rgba(16, 24, 40, .12)}*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at top left,rgba(18,103,217,.08),transparent 32%),var(--background);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}#app{width:100%;max-width:520px;min-height:100vh;margin:0 auto;padding:20px 16px 32px}.login-container{min-height:calc(100vh - 52px);display:flex;align-items:center;justify-content:center;padding:20px 0}.login-card{width:100%;padding:34px 24px 26px;background:#fffffff5;border:1px solid rgba(255,255,255,.8);border-radius:30px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.login-card:before{content:"";position:absolute;width:190px;height:190px;top:-100px;right:-90px;background:#1267d914;border-radius:50%}.login-card h1{position:relative;margin:0;text-align:center;font-size:34px;font-weight:800;letter-spacing:-1px;color:var(--primary)}.subtitle{position:relative;margin:8px 0 30px;text-align:center;color:var(--text-secondary);font-size:15px}#loginForm{position:relative}#loginForm label{display:block;margin:18px 0 8px;font-size:13px;font-weight:700;color:var(--text)}#loginForm input{width:100%;height:54px;padding:0 16px;border:1px solid var(--border);border-radius:15px;outline:none;background:#f9fbfd;color:var(--text);font-size:15px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}#loginForm input::placeholder{color:#a6afbd}#loginForm input:focus{background:#fff;border-color:var(--primary);box-shadow:0 0 0 4px #1267d91a}#loginButton{width:100%;height:56px;margin-top:28px;border:0;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 10px 22px #1267d93d;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}#loginButton:active{transform:scale(.98)}#loginButton:hover{box-shadow:0 14px 28px #1267d94d}#loginButton:disabled{opacity:.65;cursor:not-allowed}.status{min-height:20px;margin:14px 0 0;text-align:center;color:var(--danger);font-size:13px}.dashboard{width:100%}.dashboard>h1{margin:8px 4px 22px;font-size:28px;font-weight:800;letter-spacing:-.7px;color:var(--text)}.welcome-card{position:relative;padding:24px;margin-bottom:18px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#1168dc,#0754bb);color:#fff;overflow:hidden;box-shadow:0 15px 35px #1267d93b}.welcome-card:after{content:"";position:absolute;width:190px;height:190px;right:-90px;top:-90px;border-radius:50%;background:#ffffff1a}.welcome-card h2{position:relative;z-index:1;margin:0 0 8px;font-size:21px;font-weight:750}.welcome-card p{position:relative;z-index:1;margin:0;color:#ffffffd1;font-size:14px}.menu-card{padding:20px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.menu-card h3{margin:0 0 15px;font-size:17px;font-weight:750}.menu-card button{width:100%;min-height:56px;margin-top:10px;padding:0 18px;border:1px solid var(--border);border-radius:15px;background:#fff;color:var(--text);text-align:left;font-weight:650;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}.menu-card button:hover{background:var(--primary-light);border-color:#1267d933}.menu-card button:active{transform:scale(.985)}#logoutButton{color:var(--danger);background:#fff7f7;border-color:#fee2e2}.profile-card{padding:22px;margin-bottom:18px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.profile-card p{display:flex;justify-content:space-between;gap:18px;padding:15px 0;margin:0;border-bottom:1px solid #edf0f4;font-size:14px}.profile-card p:last-child{border-bottom:0}.profile-card strong{color:var(--text-secondary);font-weight:600}.profile-card p{color:var(--text);line-height:1.5}.payment-card{padding:22px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.payment-card>p{margin:0 0 7px;color:var(--text-secondary);font-size:13px}#paymentNominal{margin:0 0 22px;font-size:31px;font-weight:800;letter-spacing:-1px;color:var(--primary)}.payment-card hr{margin:20px 0;border:0;border-top:1px solid var(--border)}#vaBca,#vaPermata{min-height:48px;display:flex;align-items:center;padding:0 15px;margin-bottom:18px;border-radius:13px;background:#f5f8fc;color:var(--text);font-size:16px;font-weight:700;letter-spacing:.3px}#paidButton{width:100%;min-height:56px;margin-top:12px;border:0;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-size:15px;font-weight:750;cursor:pointer;box-shadow:0 10px 22px #1267d938;transition:transform .15s ease,opacity .15s ease}#paidButton:active{transform:scale(.98)}#paidButton:disabled{opacity:.65;cursor:not-allowed;box-shadow:none}#paymentStatus{margin-top:15px;padding:12px 14px;border-radius:12px;background:var(--warning-light);color:#b45309;font-weight:700}#backButton{width:100%;min-height:52px;margin-top:18px;border:1px solid var(--border);border-radius:15px;background:#fff;color:var(--primary);font-weight:700;cursor:pointer;box-shadow:var(--shadow-sm);transition:background .15s ease,transform .15s ease}#backButton:active{transform:scale(.98)}button:disabled{cursor:not-allowed}@media(min-width:600px){#app{padding-top:40px;padding-bottom:50px}.login-card{padding:42px 32px 32px}}@media(max-width:380px){#app{padding-left:12px;padding-right:12px}.login-card{padding:28px 19px 24px}.login-card h1{font-size:30px}#paymentNominal{font-size:27px}}