:root{--bg:#f5f7fb;--ink:#16283f;--muted:#7e8a9d;--accent:#087f71;--accent2:#13aa92;--line:#e4eaf1;--white:#fff;--shadow:0 12px 40px rgba(19,39,63,.045)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--bg);font-family:Inter,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px}button,input,select{font:inherit}button{cursor:pointer}input,select{outline:none}input:focus,select:focus{border-color:#48b8a6!important;box-shadow:0 0 0 4px rgba(8,127,113,.1)}button:focus-visible{outline:3px solid #66c9b8;outline-offset:3px}.hidden{display:none!important}.identity{display:flex;align-items:center;gap:12px}.identity b{display:block;font-size:18px;letter-spacing:.6px;font-weight:900}.identity small{font-size:9px;letter-spacing:2.6px;font-weight:800;display:block;color:#8393a7;margin-top:2px}.brand-square{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(140deg,#087e70,#13b39d);font-size:26px;font-weight:900;color:white;box-shadow:0 8px 18px #087f7130}
.eyebrow{font-size:10px;font-weight:900;letter-spacing:2px;color:var(--accent);text-transform:uppercase}.button{display:inline-flex;gap:14px;justify-content:center;align-items:center;border:0;border-radius:12px;padding:14px 18px;text-decoration:none;font-weight:800;font-size:13px;transition:transform .16s,background .16s;cursor:pointer}.button:hover{transform:translateY(-1px)}.button:disabled{opacity:.55;cursor:not-allowed;transform:none}.button.primary{background:var(--accent);color:white}.button.primary:hover{background:#07695e}.button.soft{background:#e8f6f2;color:#076d63}.button.full{width:100%}.button span{font-size:18px;font-weight:500}.form{display:flex;flex-direction:column;gap:0}.form label{font-size:12px;font-weight:850;margin:17px 0 8px}.form input,.form select{background:#fff;border:1px solid #dce4ec;border-radius:11px;min-height:48px;width:100%;padding:12px 14px;color:var(--ink);font-size:13px}.form input::placeholder{color:#a0acb9}.form .button{margin-top:21px}.form-message{font-size:12px;line-height:1.5;margin-top:11px;min-height:0}.form-message.error{color:#ae342c}.form-message.success{color:#057862}.form-message:empty{display:none}.help{font-size:11px;color:#8290a2;margin:7px 0 1px}.pass-wrap{position:relative}.pass-wrap input{padding-right:70px}.pass-wrap button{position:absolute;right:8px;top:7px;background:#eff5f5;border:0;border-radius:8px;color:#087f71;font-size:11px;font-weight:850;padding:9px 10px}
.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#fff}.login-feature{background:linear-gradient(145deg,#0b233a 5%,#084c51 65%,#086e66 100%);color:#fff;padding:42px clamp(28px,5vw,88px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}.login-feature:after{content:"";position:absolute;right:-200px;top:15%;width:580px;height:580px;border-radius:50%;background:radial-gradient(circle,#18af9555,transparent 67%);pointer-events:none}.login-feature .identity{position:relative;z-index:1}.login-feature .identity small{color:#a7d9d2}.login-hero{position:relative;z-index:1;max-width:560px}.login-hero .eyebrow{color:#81d8c8}.login-hero h1{font-size:clamp(32px,3.5vw,58px);letter-spacing:-2px;line-height:1.16;font-weight:850;margin:18px 0 21px}.login-hero p{font-size:15px;line-height:1.9;color:#bad1d7;max-width:440px}.feature-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}.feature-pills span{padding:8px 11px;color:#d0f3ec;border:1px solid #9bd2c440;border-radius:99px;font-size:11px;font-weight:750}.login-foot{color:#95bac3;font-size:12px;position:relative;z-index:1}.login-form-panel{display:grid;place-items:center;background:#f8fafc;padding:30px}.login-card{width:min(100%,418px)}.login-lock{width:48px;height:48px;display:grid;place-items:center;background:#e6f6f2;border-radius:14px;color:var(--accent);font-size:27px;font-weight:900;margin-bottom:24px}.login-card h2{font-size:30px;margin:10px 0 7px;letter-spacing:-.8px}.login-card>p{color:var(--muted);font-size:13px;line-height:1.8;margin:0 0 28px}.login-card .form input{min-height:52px}.login-note{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;color:#97a3b2;font-size:11px}
.topbar{background:#fff;border-bottom:1px solid var(--line)}.header-inner{max-width:1220px;min-height:78px;margin:auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between}.top-right{display:flex;gap:20px;align-items:center}.account-chip{background:#eaf8f4;border:1px solid #d0ece4;border-radius:99px;color:#14796b;padding:8px 12px;font-size:11px;font-weight:800}.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#15b58f;margin-right:6px}.header-user{font-weight:850;font-size:12px}.logout{border:1px solid #dce5ed;color:#5d7187;border-radius:9px;background:white;padding:9px 13px;font-weight:800;font-size:11px}.page{max-width:1220px;margin:0 auto;padding:32px 24px 38px}.welcome{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:25px}.welcome h1{font-size:clamp(26px,3vw,35px);font-weight:850;letter-spacing:-1px;margin:7px 0 3px}.welcome p{margin:0;color:var(--muted);font-size:13px}.today{color:#8795a8;font-size:12px}.tabs{display:flex;gap:7px;border-bottom:1px solid var(--line);margin-bottom:24px}.tab{appearance:none;background:transparent;border:0;border-bottom:3px solid transparent;color:#8694a5;padding:14px 22px;font-size:13px;font-weight:850;display:flex;align-items:center;gap:9px}.tab:hover{color:var(--accent)}.tab.active{border-bottom-color:var(--accent);color:var(--accent)}.tab-ico{font-size:18px;font-weight:800}.dashboard-grid{display:grid;grid-template-columns:1.07fr 1fr;align-items:start;gap:20px}.stack{display:flex;flex-direction:column;gap:20px;min-width:0}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow);min-width:0}.card-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:20px}.card h2{font-size:16px;font-weight:850;letter-spacing:-.2px;margin:0 0 4px}.card-head p{color:#8c98aa;margin:0;font-size:11px;line-height:1.7}.pill{white-space:nowrap;border-radius:999px;font-size:10px;font-weight:850;padding:6px 10px}.pill.neutral{color:#697a8f;background:#f0f3f7}.pill.amber{color:#a66b17;background:#fff3d9}.pill.green{color:#087f71;background:#e6f7f0}.wallet{position:relative;overflow:hidden;min-height:223px;padding:27px 29px;border-radius:20px;background:linear-gradient(119deg,#086e68,#0b997d 70%,#27b69a);color:#fff;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 14px 30px #09806e32}.wallet-glow{position:absolute;right:-70px;top:-110px;width:320px;height:320px;border:46px solid #ffffff1a;border-radius:50%;transform:rotate(20deg)}.wallet-top,.wallet-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;z-index:1}.wallet-top>span:first-child{color:#d1f3e9;font-size:12px}.wallet-badge{font-size:9px;font-weight:900;letter-spacing:1.2px;border:1px solid #baf8dc70;border-radius:99px;padding:7px 9px}.balance{position:relative;z-index:1;font-size:clamp(29px,4vw,42px);font-weight:880;letter-spacing:-1.4px}.wallet-bottom{font-size:11px;font-weight:800;color:#d9f5ed}.wallet-bottom>span:last-child{letter-spacing:2px}.pair{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:11px 0;color:#7b8ba0;font-size:12px}.pair b,.pair strong{color:#223950;font-size:12px;text-align:right;white-space:nowrap}.pair.total{border-top:1px dashed #d9e2e9;margin-top:4px;font-weight:800;color:#334b63}.pair.total b,.pair.total strong{font-size:14px;color:var(--accent)}.pair.missing strong{color:#c27c1b}.progress-track{background:#eef2f6;border-radius:99px;height:9px;overflow:hidden;margin-top:15px}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#079681,#43d3b8);border-radius:inherit;transition:width .3s}.progress-caption{display:flex;justify-content:space-between;font-size:11px;color:#9aa6b5;margin:9px 0 17px}.progress-caption strong{color:var(--accent)}.callout{padding:14px 15px;border-radius:11px;background:#fff9ec;border:1px solid #faebc9;font-size:12px;color:#8a672c;line-height:1.7;margin-bottom:17px}.callout.success{background:#eefaf3;border-color:#d5efdf;color:#23795c}.round-icon{background:#edf7f4;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--accent);font-size:23px}.profile-line{display:grid;grid-template-columns:35% 65%;gap:10px;border-bottom:1px solid #edf0f4;padding:15px 0;line-height:1.5}.profile-line:last-child{border-bottom:0;padding-bottom:1px}.profile-line span{font-size:11px;color:#8c99aa}.profile-line strong{font-size:12px;text-align:right;overflow-wrap:anywhere}.text-link{border:0;background:none;color:var(--accent);font-size:11px;font-weight:850;cursor:pointer;white-space:nowrap}.history-list{display:flex;flex-direction:column;gap:9px}.history-mini{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border:1px solid #edf1f5;border-radius:10px}.history-mini b{display:block;font-size:12px}.history-mini small{font-size:10px;color:#9cabb8}.history-mini>div:last-child{text-align:right}.empty{padding:27px 10px;text-align:center;color:#9eabb9;background:#f8fafc;border:1px dashed #e4ebf1;border-radius:12px;font-size:12px;line-height:1.7}.hint{color:#9aa8b7;font-size:10px;margin:18px 0}
.two-column{display:grid;grid-template-columns:minmax(0,1.23fr) minmax(280px,.77fr);gap:20px;align-items:start}.input-prefix{position:relative}.input-prefix span{position:absolute;top:15px;left:14px;font-weight:850;color:#66788a}.input-prefix input{padding-left:40px}.breakdown{background:#f7f9fc;border:1px solid #e9eef4;border-radius:12px;padding:12px 16px;margin-top:24px}.breakdown .pair{padding:9px 0}.breakdown .pair.total strong{font-size:15px}.balance-mini>span{color:#92a0ad;font-size:11px}.balance-mini>b{font-size:27px;display:block;letter-spacing:-1px;margin:10px 0 8px}.balance-mini>p{color:#8190a2;line-height:1.75;font-size:11px;margin-bottom:20px}.info-point{display:flex;align-items:start;gap:12px;margin-top:19px;color:#7b8da1;font-size:12px;line-height:1.8}.info-point i{flex:0 0 25px;height:25px;display:grid;place-items:center;font-style:normal;background:#eaf6f2;color:#078978;border-radius:9px;font-weight:900;font-size:11px}.safety-note{line-height:1.7;font-size:11px;color:#8a98a6;margin:13px 0 0}.history-card{margin-top:20px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;min-width:660px}th{font-size:11px;color:#8794a6;background:#f7f9fb;padding:13px 14px;font-weight:800}td{border-bottom:1px solid #eef1f5;padding:15px 14px;font-size:12px;color:#44586d;vertical-align:middle}tbody tr:last-child td{border-bottom:none}td strong{display:block;font-size:11px;color:#34485f}td small{display:block;color:#a3adbb;font-size:10px;margin-top:4px}.status{display:inline-block;white-space:nowrap;padding:6px 9px;border-radius:40px;font-size:10px;font-weight:850}.status.processing,.status.pending{color:#936817;background:#fff2d9}.status.completed,.status.approved{color:#137958;background:#eaf8ef}.status.rejected{color:#b34a48;background:#fff0ee}.qris-area{text-align:center}.qris-box{margin:8px auto 14px;max-width:268px;padding:17px;border-radius:15px;background:white;border:1px solid #e4eaf0;box-shadow:0 10px 35px #163c5b0a}.qris-box img{width:100%;height:auto;image-rendering:auto;display:block}.qris-area h3{margin:4px 0;font-size:16px}.qris-area p{color:#8c99a8;font-size:12px;margin:6px 0}.qris-static{display:inline-block;color:#098471;background:#eaf8f4;border-radius:50px;font-size:10px;font-weight:850;padding:8px 12px;margin:10px 0}.topup-layout .card:first-child .button{margin-top:18px}.quick-amounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.quick-amounts button{padding:10px 5px;border:1px solid #dce7eb;background:#f9fcfb;border-radius:9px;color:#17786d;font-size:11px;font-weight:850}.quick-amounts button:hover{background:#e6f5f0}.footer{text-align:center;border-top:1px solid #e8edf2;padding:24px 0 0;margin-top:35px;font-size:11px;color:#9aa6b5}.toast{display:none;position:fixed;bottom:24px;right:24px;z-index:100;background:#143f3a;color:#fff;border-radius:12px;padding:14px 20px;max-width:380px;box-shadow:0 16px 48px #123b4c3b;font-size:12px;line-height:1.6}.toast.visible{display:block}.toast.error{background:#7e332f}.mobile-nav{display:none}
@media(max-width:850px){.page{padding:25px 16px 36px}.header-inner{padding:12px 17px}.dashboard-grid,.two-column{grid-template-columns:1fr}.login-feature{padding:35px}.login-page{grid-template-columns:.95fr 1.05fr}.login-hero h1{font-size:36px}.today{display:none}}
@media(max-width:640px){.login-page{display:block;background:#f8fafc}.login-feature{min-height:230px;padding:22px 23px 35px;display:block;border-radius:0 0 26px 26px}.login-hero{margin-top:36px}.login-hero h1{font-size:25px;letter-spacing:-.6px;line-height:1.28;margin:8px 0}.login-hero p{font-size:11px;line-height:1.65;margin:0}.feature-pills,.login-foot{display:none}.login-form-panel{padding:27px 21px 50px}.login-card{width:100%}.login-lock{display:none}.login-card h2{font-size:25px}.login-card>p{margin-bottom:15px}.topbar .header-user,.account-chip{display:none}.header-inner{min-height:66px}.brand-square{width:37px;height:37px;border-radius:11px;font-size:23px}.identity b{font-size:16px}.identity small{font-size:8px;letter-spacing:2px}.page{padding:25px 14px 95px}.welcome h1{font-size:28px}.welcome p{font-size:12px}.tabs{display:none}.wallet{min-height:195px;padding:24px}.balance{font-size:34px}.card{padding:20px 17px;border-radius:16px}.profile-line{grid-template-columns:36% 64%}.profile-line strong{font-size:11px}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;justify-content:space-around;background:white;padding:7px 10px max(7px,env(safe-area-inset-bottom));border-top:1px solid #e3ebf1;box-shadow:0 -5px 20px #233a510e}.mobile-nav button{display:flex;flex-direction:column;align-items:center;gap:1px;border:0;background:transparent;color:#91a0ac;font-weight:800;font-size:10px;min-width:75px;padding:3px}.mobile-nav button b{font-size:22px;line-height:1.25}.mobile-nav button.active{color:#087f71}.toast{left:15px;right:15px;bottom:75px}.history-card{margin-top:15px}.topup-layout .card:first-child{order:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}