:root{--navy: #03182D;--navy-2: #1a3a5c;--gold: #f5b300;--gold-soft: #ffd773;--surface: #f5f7fb;--surface-2: #ffffff;--surface-3: #e9eef6;--text: #0b1f33;--muted: #516679;--success: #1f9d55;--warning: #e08a00;--danger: #d64545;--info: #1f6feb;--border: #cbd3de;--radius: 16px;--radius-lg: 22px;--shadow: 0 6px 18px rgba(3, 24, 45, .08)}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;background:var(--surface);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:var(--info);text-decoration:none}button{font:inherit}.app{display:flex;flex-direction:column;min-height:100vh;padding-bottom:72px}.app-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--navy);color:#fff;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:12px}.brand-logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--navy),var(--gold));display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:18px}.brand h1{margin:0;font-size:16px}.brand p{margin:0;font-size:11px;color:#ffffffb3}.brand-lg h1{font-size:22px}.brand-lg p{font-size:13px}.header-actions{display:flex;gap:8px}.icon-btn{position:relative;background:rgba(255,255,255,.1);border:none;border-radius:12px;width:40px;height:40px;color:#fff;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}.icon-btn:hover{background:rgba(255,255,255,.18)}.badge-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--gold);border-radius:50%}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(6,1fr);background:var(--surface-2);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);z-index:10}.bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer}.bottom-nav button small{font-size:10px;font-weight:600}.bottom-nav button.active{color:var(--navy)}.app-main{padding:16px;flex:1}.view{display:flex;flex-direction:column;gap:16px}.hero-balance{background:linear-gradient(135deg,var(--navy),var(--navy-2));border-radius:var(--radius-lg);padding:22px;color:#fff;box-shadow:var(--shadow)}.balance-head{display:flex;justify-content:space-between;align-items:center}.balance-label{margin:0;font-size:13px;opacity:.8}.balance-sub{margin:0;font-size:12px;opacity:.7}.balance-amount{display:flex;align-items:baseline;gap:8px;margin:16px 0 12px}.balance-amount strong{font-size:30px;font-weight:800}.currency-pill{background:var(--gold);color:var(--navy);padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700}.balance-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.balance-grid small{display:block;opacity:.7;font-size:11px}.balance-grid p{margin:4px 0 0;font-weight:700;font-size:16px}.balance-sync{margin:0;font-size:11px;opacity:.7}.action-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.action-tile{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 8px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:8px;transition:transform .15s ease}.action-tile:hover{transform:translateY(-2px)}.action-tile p{margin:0;font-size:12px;font-weight:700;color:var(--text)}.action-icon{width:36px;height:36px;border-radius:10px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-size:18px}.section-block{background:var(--surface-2);border-radius:var(--radius-lg);padding:18px;border:1px solid var(--border)}.section-block.surface{background:var(--surface-2)}.section-block.alert{background:#fff7e6;border-color:var(--warning)}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-head h3{margin:0;font-size:18px}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.metric{text-align:center}.metric small{color:var(--muted);font-size:11px;display:block}.metric strong{display:block;font-size:22px;margin:4px 0}.ppob-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.ppob-tile{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:6px;transition:transform .15s ease}.ppob-tile:hover{transform:translateY(-2px)}.ppob-tile strong{font-size:14px}.ppob-tile small{color:var(--muted);font-size:11px}.ppob-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px}.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.product-tile{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;min-height:120px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:6px;justify-content:space-between}.product-tile strong{font-size:18px}.product-tile span{color:var(--muted);font-size:12px}.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;width:fit-content}.badge.info{background:#e8f0fe;color:var(--info)}.badge.warn{background:#fff3e0;color:var(--warning)}.list{display:flex;flex-direction:column;gap:8px}.list-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface-3);border-radius:12px;padding:12px 14px;cursor:pointer;border:none;text-align:left;width:100%}.list-row strong{display:block;font-size:14px}.list-row small{color:var(--muted);font-size:11px}.row-end{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.status-pill{padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;text-transform:capitalize}.badge-pill{background:var(--gold);color:var(--navy);padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700}.empty-state{padding:32px 16px;text-align:center;color:var(--muted);background:var(--surface-3);border-radius:var(--radius)}.pagination{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--surface-2);border-radius:var(--radius);border:1px solid var(--border)}.btn-primary,.btn-danger{width:100%;padding:14px;border:none;border-radius:var(--radius);font-weight:700;cursor:pointer;font-size:14px;margin-top:8px}.btn-primary{background:var(--navy);color:#fff}.btn-primary:hover{background:var(--navy-2)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-danger{background:var(--danger);color:#fff}.link{background:none;border:none;color:var(--info);cursor:pointer;font-weight:600;text-decoration:none;padding:6px}.section-block label{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;text-align:left}.section-block label span{font-size:12px;color:var(--muted);font-weight:600}.section-block input{padding:12px;border:1px solid var(--border);border-radius:12px;font-size:14px;background:var(--surface)}.section-block input:focus{outline:none;border-color:var(--navy)}.hint{color:var(--muted);font-size:11px;margin:6px 0}.ppob-header{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;border-radius:var(--radius-lg);padding:18px}.ppob-header h2{margin:0 0 4px}.ppob-header p{margin:0 0 12px;opacity:.8;font-size:12px}.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.step{background:rgba(255,255,255,.2);border-radius:4px;padding:6px 8px;font-size:10px;text-align:center;color:#ffffffb3}.step.active{background:var(--gold);color:var(--navy);font-weight:700}.center{text-align:center}.avatar{width:72px;height:72px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;margin:0 auto 12px}.success-icon{width:64px;height:64px;border-radius:50%;background:var(--success);color:#fff;font-size:32px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}.global-info,.global-error{margin:0 16px 8px;padding:12px 16px;border-radius:12px;font-size:12px;cursor:pointer}.global-info{background:var(--success);color:#fff}.global-error{background:var(--danger);color:#fff}.auth-screen{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.auth-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,var(--surface),var(--surface-3));z-index:0}.auth-card{position:relative;z-index:1;width:100%;max-width:420px;background:var(--surface-2);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow)}.auth-title{margin:24px 0 8px;font-size:22px}.auth-desc{color:var(--muted);margin:0 0 16px;font-size:13px}.auth-card label{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;text-align:left}.auth-card label span{font-size:12px;color:var(--muted);font-weight:600}.auth-card input{padding:12px;border:1px solid var(--border);border-radius:12px;font-size:14px}.auth-card input:focus{outline:none;border-color:var(--navy)}.auth-actions{display:flex;justify-content:space-between;margin-top:12px}.info-pill,.error-pill{padding:10px 12px;border-radius:10px;font-size:12px;margin-bottom:12px}.info-pill{background:#e6f4ea;color:var(--success)}.error-pill{background:#fde8e8;color:var(--danger)}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(3,24,45,.5);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}.dialog{background:var(--surface-2);border-radius:var(--radius-lg);max-width:420px;width:100%;padding:20px}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.dialog-head h3{margin:0}.dialog-body label{display:flex;flex-direction:column;gap:6px}.dialog-body input{padding:10px;border:1px solid var(--border);border-radius:10px}@media (max-width: 480px){.balance-amount strong{font-size:24px}.metric-grid{grid-template-columns:repeat(2,1fr)}.action-panel{grid-template-columns:repeat(4,1fr)}.ppob-grid{grid-template-columns:1fr 1fr}}