:root{font-family:'Manrope',sans-serif;color:#10182d;background:#dfe3ea;--navy:#0a1022;--lime:#baff29;--muted:#6f788c}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}.app-shell{width:100%;max-width:430px;min-height:100vh;margin:auto;background:#f7f8fa;position:relative;overflow:hidden;box-shadow:0 0 60px #17203828}.brand{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:800;letter-spacing:-.7px}.brand span span{color:#729b00}.brand__logo{width:33px;height:33px;object-fit:contain}.brand--light{position:relative;color:white;padding:22px 22px 0}.brand--light span span{color:var(--lime)}
.login-screen{min-height:100vh;background:var(--navy);position:relative;display:flex;flex-direction:column;color:white}.login-glow{position:absolute;width:250px;height:250px;border-radius:50%;background:#aaff151e;right:-110px;top:35px}.login-copy{padding:46px 24px 28px;position:relative}.eyebrow{display:inline-flex;gap:6px;align-items:center;color:#c8ff5e;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.login-copy h1{font-size:36px;line-height:1.12;letter-spacing:-1.8px;margin:13px 0}.login-copy h1 em{font-style:normal;color:var(--lime)}.login-copy p{color:#aeb5c6;font-size:14px;line-height:1.7;margin:0}.login-card{background:#fff;color:#131a2e;border-radius:28px 28px 0 0;padding:26px 24px 20px;flex:1}.login-card__heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}.login-card__heading h2{font-size:22px;letter-spacing:-.7px;margin:0 0 5px}.login-card__heading p{font-size:12px;color:var(--muted);margin:0}.login-card__heading>span{font-size:25px}.login-card>label{font-size:12px;font-weight:700;display:block;margin-bottom:16px}.input-wrap{margin-top:8px;border:1.5px solid #e5e8ee;border-radius:14px;height:52px;display:flex;align-items:center;padding:0 14px;gap:10px;color:#9ca3b1}.input-wrap:focus-within{border-color:#91c900;box-shadow:0 0 0 4px #baff291b}.input-wrap input{border:0;outline:0;width:100%;font-size:13px;background:transparent}.input-wrap button,.form-meta button,.signup button{border:0;background:none;color:inherit;padding:3px;cursor:pointer}.form-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#667085;margin:-2px 0 19px}.form-meta>button,.signup button{color:#557800;font-weight:700}.remember{display:flex;align-items:center;gap:6px}.primary-button{border:0;width:100%;height:52px;border-radius:15px;background:var(--lime);color:#111827;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;box-shadow:0 9px 22px #92cf1f35}.form-error{color:#c93b3b;background:#fff0f0;padding:9px 11px;border-radius:9px;font-size:11px}.signup{text-align:center;font-size:11px;color:#71798a;margin:18px 0 0}.secure-note{text-align:center;color:#6e778a;font-size:10px;background:#fff;margin:0;padding:0 0 17px;display:flex;justify-content:center;align-items:center;gap:5px}
.dashboard{padding:0 20px 105px;min-height:100vh}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between}.topbar__actions{display:flex;gap:9px}.topbar__actions button{border:0}.notification,.avatar{width:38px;height:38px;border-radius:12px;background:white;display:grid;place-items:center;position:relative;box-shadow:0 5px 15px #15203a0d}.notification i{width:7px;height:7px;background:#ff6b4a;border-radius:50%;position:absolute;right:8px;top:7px;border:2px solid white}.avatar{background:#17203a!important;color:white;font-size:13px;font-weight:800;cursor:pointer}.greeting{display:flex;align-items:flex-end;justify-content:space-between;margin:7px 1px 19px}.greeting p{text-transform:capitalize;font-size:10px;color:#8b93a2;margin:0 0 5px}.greeting h1{font-size:23px;letter-spacing:-.9px;margin:0}.streak{background:#fff0e8;color:#e45d29;padding:6px 9px;border-radius:9px;font-size:10px;font-weight:800;display:flex;gap:4px;align-items:center}.hero-card{background:#10182d;color:white;border-radius:22px;overflow:hidden;box-shadow:0 15px 35px #0f193129}.hero-card__top{padding:20px 21px 16px;display:flex;justify-content:space-between;align-items:center}.hero-card__top span{font-size:11px;color:#aeb6c8}.hero-card__top strong{display:block;font-size:37px;letter-spacing:-2px;margin-top:5px}.hero-card__top strong small{font-size:17px;color:var(--lime)}.score-ring{width:70px;height:70px;border-radius:50%;background:conic-gradient(var(--lime) var(--score),#32394c 0);display:grid;place-items:center;position:relative}.score-ring:after{content:'';position:absolute;inset:7px;background:#10182d;border-radius:50%}.score-ring span{position:relative;z-index:1;color:white;font-size:12px;font-weight:800}.hero-card__bottom{background:#182239;padding:10px 18px}.hero-card__bottom p{margin:0;font-size:10px;color:#cbd0da;display:flex;gap:6px;align-items:center}.hero-card__bottom svg{color:var(--lime)}
.section{margin-top:25px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-heading h2{font-size:15px;letter-spacing:-.4px;margin:0}.section-heading p{font-size:9px;color:#98a0ae;margin:4px 0 0}.section-heading button{border:0;background:none;color:#7b8495;font-size:9px;display:flex;align-items:center}.category-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.category{border:0;background:white;border-radius:16px;padding:12px;text-align:left;box-shadow:0 6px 18px #1720380b;cursor:pointer}.category>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:14px}.category strong,.category small{display:block}.category strong{font-size:11px}.category small{font-size:8px;color:#929aa8;margin-top:3px}.category--lime>span{background:#efffd1;color:#6f9900}.category--orange>span{background:#fff0dc;color:#e47920}.category--purple>span{background:#f0eaff;color:#7c5cc9}
.task-list{display:flex;flex-direction:column;gap:8px}.task{border:0;width:100%;background:white;border-radius:14px;padding:13px 12px;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;box-shadow:0 4px 12px #1b27410a}.task__check{width:24px;height:24px;display:grid;place-items:center;color:#c2c7d0}.task--done .task__check{border-radius:8px;background:#dcffa0;color:#567a00}.task__body{flex:1}.task__body strong,.task__body small{display:block}.task__body strong{font-size:10px}.task__body small{font-size:8px;color:#a0a6b2;margin-top:4px}.task--done .task__body strong{text-decoration:line-through;color:#939aa8}.pill{font-size:7px;font-weight:800;border-radius:6px;padding:5px 7px}.pill--penting{background:#ffe8e4;color:#df573f}.pill--cepat{background:#fff2d9;color:#d88717}.pill--santai{background:#e7f7ff;color:#2985ab}.add-inline{width:100%;border:1px dashed #cad0d9;border-radius:13px;background:transparent;padding:11px;color:#7d8695;font-size:9px;font-weight:700;margin-top:9px;display:flex;justify-content:center;gap:5px}.insight{margin-top:20px;padding:13px;background:#f0f9dc;border-radius:15px;display:flex;align-items:center;gap:10px}.insight__icon{width:34px;height:34px;border-radius:10px;background:var(--lime);display:grid;place-items:center}.insight div:nth-child(2){flex:1}.insight strong{font-size:9px}.insight p{font-size:8px;color:#748065;margin:3px 0 0}
.bottom-nav{position:absolute;bottom:0;left:0;right:0;height:78px;padding:8px 13px 10px;background:#fff;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;border-top:1px solid #edf0f4}.bottom-nav button{border:0;background:none;color:#9aa1af;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:7px}.bottom-nav button.active{color:#10182d;font-weight:800}.bottom-nav__add{width:48px;height:48px;background:#10182d!important;color:var(--lime)!important;border-radius:16px;margin:auto;display:grid!important;place-items:center;box-shadow:0 7px 16px #121a3133}.loading-screen,.state-screen{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center;padding:30px}.loading-screen img{width:65px;animation:pulse 1.2s infinite}.loading-screen span,.state-screen p{font-size:12px;color:#7c8494}.state-screen button{border:0;background:#10182d;color:#fff;border-radius:12px;padding:11px 16px}.modal-backdrop{position:absolute;z-index:10;inset:0;background:#091024b5;display:flex;align-items:flex-end;padding:14px}.quick-modal{background:white;border-radius:25px;padding:28px 22px 22px;width:100%;text-align:center;position:relative;animation:slide .25s ease}.modal-close{position:absolute;right:15px;top:15px;border:0;background:#f2f4f6;border-radius:10px;width:34px;height:34px}.modal-icon{display:grid;place-items:center;background:#efffcf;color:#668e00;width:48px;height:48px;border-radius:15px;margin:4px auto 13px;font-size:22px}.quick-modal h2{margin:0}.quick-modal p{font-size:11px;color:#737c8e;line-height:1.6;margin:8px 15px 20px}@keyframes pulse{50%{transform:scale(.92);opacity:.65}}@keyframes slide{from{transform:translateY(30px);opacity:0}}@media(min-width:600px){body{padding:25px 0}.app-shell{min-height:calc(100vh - 50px);border-radius:28px}.login-screen,.dashboard{min-height:calc(100vh - 50px)}.bottom-nav{border-radius:0 0 28px 28px}.modal-backdrop{border-radius:28px}}

/* PPOB mobile experience */
.dashboard{padding:0;min-height:100vh;background:#f6f8fc}.page-content{padding:0 20px 110px;min-height:100vh}.app-header{height:72px;display:flex;align-items:center;justify-content:space-between}.app-header--compact{height:88px}.app-header--compact p{font-size:10px;font-weight:800;color:#7e8799;margin:0 0 3px}.app-header--compact h1{font-size:22px;margin:0;letter-spacing:-.7px}.header-avatar{border:0;width:38px;height:38px;border-radius:13px;background:#111a32;color:#fff;font-weight:800}.hello{display:flex;align-items:flex-end;justify-content:space-between;margin:10px 0 18px}.hello p{font-size:11px;color:#858fa1;margin:0 0 4px}.hello h1{font-size:24px;margin:0;letter-spacing:-.8px}.hello h1 span{font-size:19px}.bell{border:0;width:42px;height:42px;border-radius:13px;background:#fff;box-shadow:0 6px 20px #13203b0d;position:relative}.bell i{position:absolute;width:7px;height:7px;border-radius:50%;background:#ff6148;border:2px solid #fff;right:9px;top:8px}.quick-search{width:100%;height:46px;border:1px solid #e8ebf1;border-radius:14px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 14px;color:#9aa3b3}.quick-search span{font-size:11px}.hero-ppob{height:175px;border-radius:22px;background:linear-gradient(135deg,#111a33,#19294d);margin-top:16px;color:#fff;padding:20px;position:relative;overflow:hidden}.hero-ppob:before{content:'';position:absolute;width:160px;height:160px;border-radius:50%;background:#baff2920;right:-50px;top:-60px}.hero-copy{position:relative;z-index:2;width:65%}.safe-badge{display:inline-flex;align-items:center;gap:5px;background:#ffffff12;color:#caff68;border:1px solid #ffffff16;border-radius:20px;padding:5px 8px;font-size:8px;font-weight:800}.hero-copy h2{font-size:21px;line-height:1.18;letter-spacing:-.8px;margin:10px 0 8px}.hero-copy p{font-size:8px;line-height:1.55;color:#b6bfd1;margin:0}.hero-art{position:absolute;right:-20px;bottom:-8px;width:150px;height:150px}.float-coin{position:absolute;right:30px;top:15px;width:36px;height:36px;border-radius:50%;background:#baff29;border:4px solid #d8ff82;color:#19213a;font-weight:900;font-size:10px;display:grid;place-items:center;box-shadow:0 8px 16px #02081755}.section-title{margin:25px 0 14px}.section-title h2{font-size:16px;margin:0 0 4px}.section-title p{font-size:9px;color:#8e97a8;margin:0}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 7px}.service-grid button{border:0;background:#fff;border-radius:16px;padding:9px 4px 11px;min-width:0;box-shadow:0 5px 15px #1b29400a}.service-grid strong,.service-grid small{display:block}.service-grid strong{font-size:8px;margin-top:5px;white-space:nowrap}.service-grid small{font-size:6.5px;color:#929baa;margin-top:2px;white-space:nowrap}.service-3d{display:block;width:58px;height:58px;margin:auto;background-image:url('/service-icons.png');background-size:400% 200%;background-position:var(--x) var(--y);background-repeat:no-repeat;filter:drop-shadow(0 5px 5px #16213a18)}.service-3d--hero{width:145px;height:145px;filter:drop-shadow(0 12px 12px #03081855)}.service-3d--large{width:95px;height:95px}.info-card{margin-top:20px;background:#eaf4ff;border:1px solid #dcecff;border-radius:16px;padding:13px;display:flex;align-items:center;gap:11px}.info-card>span{width:36px;height:36px;border-radius:11px;background:#1977e8;color:#fff;display:grid;place-items:center}.info-card>span svg{width:19px}.info-card div{flex:1}.info-card strong{font-size:9px}.info-card p{font-size:7.5px;color:#718096;margin:3px 0 0;line-height:1.45}.info-card>svg{color:#8492a7}
.bottom-nav{position:absolute;z-index:8;bottom:0;left:0;right:0;height:82px;padding:9px 21px 12px;background:#fff;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #edf0f4;box-shadow:0 -10px 30px #15213a0b}.bottom-nav button{border:0;background:none;color:#a1a9b7;display:flex;flex-direction:column;align-items:center;gap:3px}.bottom-nav small{font-size:7px;font-weight:700}.nav-icon{width:38px;height:34px;border-radius:12px;display:grid;place-items:center}.bottom-nav button.active{color:#111a32}.bottom-nav button.active .nav-icon{background:#ecffd0;color:#608800}.filter-row{display:flex;gap:7px;overflow:auto;padding:5px 0 15px}.filter-row button{border:1px solid #e7eaf0;background:#fff;border-radius:20px;padding:8px 13px;font-size:9px;color:#788295}.filter-row button.active{background:#111a32;color:#fff;border-color:#111a32}.empty-state{text-align:center;padding:65px 25px 0}.empty-visual{width:96px;height:96px;border-radius:30px;background:#eefbdc;color:#74a000;display:grid;place-items:center;margin:0 auto 22px;position:relative}.empty-visual i{position:absolute;right:-4px;bottom:7px;width:29px;height:29px;border-radius:50%;background:#baff29;color:#243400;border:4px solid #f6f8fc;font-style:normal;font-weight:900;display:grid;place-items:center}.empty-state h2{font-size:18px;margin:0 0 8px}.empty-state p{font-size:10px;line-height:1.7;color:#828c9f;margin:0}.empty-state>button{margin-top:20px;border:0;background:#111a32;color:#fff;border-radius:13px;padding:12px 16px;font-size:10px;font-weight:800;display:inline-flex;align-items:center;gap:8px}.support-hero{background:linear-gradient(135deg,#eaffc8,#f3ffe4);border:1px solid #dff7b8;border-radius:20px;padding:24px;text-align:center}.support-hero>span{width:54px;height:54px;border-radius:17px;background:#baff29;display:grid;place-items:center;margin:auto}.support-hero h2{font-size:17px;margin:13px 0 5px}.support-hero p{font-size:9px;color:#6f7b6b;margin:0}.mini-title{font-size:11px;margin:23px 2px 10px}.menu-list{background:#fff;border-radius:18px;padding:3px 14px}.menu-list button{width:100%;border:0;background:none;display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #f0f2f5;text-align:left}.menu-list button:last-child{border:0}.menu-list button>div{flex:1}.menu-list strong,.menu-list small{display:block}.menu-list strong{font-size:9px}.menu-list small{font-size:7.5px;color:#9099a9;margin-top:3px}.menu-list button>svg{width:16px;color:#a5adba}.menu-icon{width:37px;height:37px;border-radius:11px;display:grid;place-items:center}.menu-icon svg{width:18px}.menu-icon.green{background:#ecffd4;color:#699600}.menu-icon.blue{background:#e5f1ff;color:#1977e8}.menu-icon.amber{background:#fff1d9;color:#df8615}.faq-list{background:#fff;border-radius:18px;padding:3px 14px}.faq-list button{border:0;background:none;width:100%;display:flex;justify-content:space-between;padding:14px 0;font-size:9px;border-bottom:1px solid #f0f2f5}.faq-list button:last-child{border:0}.profile-card{background:#111a32;color:#fff;border-radius:20px;padding:19px;display:flex;align-items:center;gap:14px}.profile-avatar{width:57px;height:57px;border-radius:18px;background:#baff29;color:#152000;font-size:20px;font-weight:900;display:grid;place-items:center}.profile-card h2{font-size:16px;margin:0 0 3px}.profile-card p{font-size:8px;color:#aeb7c9;margin:0 0 7px}.profile-card span{display:inline-flex;align-items:center;gap:4px;color:#caff68;font-size:7px}.logout-button{width:100%;margin-top:24px;border:1px solid #ffd9d5;background:#fff5f3;color:#d84a3e;border-radius:14px;padding:13px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:9px;font-weight:800}.version{text-align:center;font-size:7px;color:#a2a9b5;margin-top:17px}.sheet-backdrop{position:absolute;z-index:20;inset:0;background:#091124a8;display:flex;align-items:flex-end}.service-sheet{width:100%;background:#fff;border-radius:28px 28px 0 0;padding:10px 24px 28px;text-align:center;animation:slide .25s ease}.sheet-handle{width:40px;height:4px;border-radius:4px;background:#d9dde4;margin:0 auto 10px}.service-sheet h2{font-size:20px;margin:5px 0}.service-sheet>p{font-size:9px;color:#7f899a;line-height:1.6;margin:0 20px 19px}.service-sheet label{display:block;text-align:left;font-size:9px;font-weight:800}.service-sheet input{display:block;width:100%;height:49px;border:1.5px solid #e5e8ee;border-radius:13px;padding:0 13px;margin:8px 0 13px;outline:0}.service-sheet input:focus{border-color:#8dbd18}.continue-button{width:100%;height:49px;border:0;border-radius:13px;background:#111a32;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;font-weight:800}.service-sheet>small{display:block;color:#9aa2af;font-size:7px;margin-top:10px}