:root,:root[data-theme=dark]{--bg-dark:#0f0f0f;--bg-card:#1a1a1a;--bg-primary:#0a0a0a;--bg-secondary:#0f0f0f;--gold-primary:#d4af37;--gold-secondary:#c5a028;--gold-color:#d4af37;--gold-gradient:linear-gradient(135deg,#bf953f,#fcf6ba,#b38728,#fbf5b7,#aa771c);--text-light:#f5f5f5;--text-gray:#a0a0a0;--text-primary:#fff;--text-secondary:#e5e5e5;--text-color:#e5e5e5;--text-hover:#d4af37;--danger:#ef4444;--success:#00b894;--border-color:#ffffff1a;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 6px #0006;--shadow-lg:0 10px 15px #00000080;--header-bg:#0f0f0ff2;--header-border:#d4af371a;--user-button-bg:#ffffff0d;--user-button-hover:#d4af371a;--logout-border:#ffffff1a;--mobile-divider:#ffffff1a;--mobile-menu-border:#ffffff1a;--footer-bg:#000;--footer-border:#d4af374d;--footer-tagline:#666;--footer-social:#666;--footer-social-border:#ffffff1a;--footer-social-hover-bg:#d4af371a;--footer-link:#888;--footer-bottom-border:#ffffff0d;--footer-copyright:#444;--hero-gradient-1:#d4af3714;--hero-gradient-2:#d4af370d;--stats-bg:#121212;--feature-bg:#ffffff08;--feature-border:#d4af371a;--feature-hover-bg:#ffffff0d;--feature-hover-border:#d4af3766;--input-bg:#1c1c1e;--input-border:#333;--card-bg:#111;--otp-box-bg:#1c1c1e;--otp-box-border:#333;--option-btn-bg:#ebe4e4;--option-btn-color:#000;--keypad-key-bg:#2a2a2a;--stat-collect-bg:#299f1114;--stat-collect-border:#299f11;--stat-pay-bg:#d4373a1a;--stat-pay-border:#d4373a;--feature-icon-bg:#252525;--page-bg:#222;--shimmer-base:#2a2a2a;--shimmer-shine:#3a3a3a;--divider-color:#222;--gold-btn-text:#000;--theme-transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}:root[data-theme=light]{--bg-dark:#fdfbf7;--bg-card:#fff;--bg-primary:#fdfbf7;--bg-secondary:#f4f1ea;--gold-primary:#b8860b;--gold-secondary:#996515;--gold-color:#b8860b;--gold-gradient:linear-gradient(135deg,#c5a028 0%,#e6c200 40%,#b8860b 100%);--text-light:#2d2d2d;--text-gray:#5a5a5a;--text-primary:#1c1c1c;--text-secondary:#4a4a4a;--text-color:#2d2d2d;--text-hover:#996515;--danger:#d32f2f;--success:#2e7d32;--border-color:#b8860b26;--shadow-sm:0 2px 4px #b8860b0d;--shadow-md:0 6px 12px #b8860b14;--shadow-lg:0 15px 25px #b8860b1f;--header-bg:#fdfbf7f2;--header-border:#b8860b26;--user-button-bg:#b8860b14;--user-button-hover:#b8860b26;--logout-border:#b8860b33;--mobile-divider:#b8860b1a;--mobile-menu-border:#b8860b1a;--footer-bg:#f4f1ea;--footer-border:#b8860b33;--footer-tagline:#4a4a4a;--footer-social:#996515;--footer-social-border:#b8860b33;--footer-social-hover-bg:#b8860b26;--footer-link:#5a5a5a;--footer-bottom-border:#b8860b14;--footer-copyright:#888;--hero-gradient-1:#b8860b14;--hero-gradient-2:#b8860b08;--stats-bg:#fff;--feature-bg:#fff;--feature-border:#b8860b1a;--feature-hover-bg:#fffefa;--feature-hover-border:#b8860b66;--input-bg:#fff;--input-border:#b8860b40;--card-bg:#fff;--otp-box-bg:#fdfbf7;--otp-box-border:#b8860b40;--option-btn-bg:#f4f1ea;--option-btn-color:#1c1c1c;--keypad-key-bg:#f4f1ea;--stat-collect-bg:#2e7d3212;--stat-collect-border:#2e7d32;--stat-pay-bg:#d32f2f12;--stat-pay-border:#d32f2f;--feature-icon-bg:#f4f1ea;--page-bg:#fdfbf7;--shimmer-base:#f0ede6;--shimmer-shine:#e8e4dc;--divider-color:#b8860b1f;--gold-btn-text:#1c1c1c;--theme-transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;height:100%}body{background-color:var(--bg-primary);height:100%;color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:var(--theme-transition);font-family:DM Sans,sans-serif;line-height:1.5}button{cursor:pointer;font-family:inherit}input,textarea,select{font-family:inherit}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}input::placeholder,textarea::placeholder{color:var(--text-gray);opacity:1}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#d4af374d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#d4af378c}:focus-visible{outline:2px solid var(--gold-primary);outline-offset:2px;border-radius:4px}.gold-text{background:var(--gold-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.page-wrapper{background:var(--bg-primary);min-height:100dvh;color:var(--text-primary);transition:var(--theme-transition)}.container{width:100%;max-width:480px;margin:0 auto;padding:0 16px}.card{background:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-md);transition:var(--theme-transition);border-radius:16px}.gold-border-box{border:2px solid var(--gold-primary);background:var(--card-bg);border-radius:12px}.themed-input{background:var(--input-bg);border:1.5px solid var(--input-border);color:var(--text-primary);border-radius:10px;outline:none;width:100%;padding:12px 14px;font-size:15px;transition:border-color .2s}.themed-input:focus{border-color:var(--gold-primary);box-shadow:0 0 0 3px #d4af371f}.btn-gold{background:var(--gold-primary);color:var(--gold-btn-text);border:none;border-radius:10px;width:100%;padding:13px 24px;font-size:15px;font-weight:700;transition:opacity .2s,transform .1s}.btn-gold:hover{opacity:.9}.btn-gold:active{transform:scale(.98)}.btn-gold:disabled{opacity:.6;cursor:not-allowed}.btn-option{background:var(--option-btn-bg);color:var(--option-btn-color);border:none;border-radius:10px;justify-content:center;align-items:center;gap:10px;width:100%;padding:13px 20px;font-size:15px;font-weight:600;transition:opacity .2s;display:flex}.btn-option:hover{opacity:.85}.theme-toggle{background:var(--user-button-bg);border:1px solid var(--border-color);color:var(--text-primary);transition:var(--theme-transition);border-radius:20px;align-items:center;gap:6px;padding:6px 14px;font-size:14px;font-weight:500;display:flex}.theme-toggle:hover{background:var(--user-button-hover);border-color:var(--gold-primary)}.banner-error{color:var(--danger);background:#d32f2f1a;border:1px solid #d32f2f59;border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.4}.banner-success{color:var(--success);background:#2e7d321a;border:1px solid #2e7d324d;border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.4}.divider{align-items:center;gap:12px;margin:20px 0;display:flex}.divider-line{background:var(--divider-color);flex:1;height:1px}.divider-text{color:var(--text-gray);font-size:12px}.otp-box{text-align:center;background:var(--otp-box-bg);border:2px solid var(--otp-box-border);width:44px;height:52px;color:var(--text-primary);caret-color:var(--gold-primary);border-radius:10px;outline:none;font-size:22px;font-weight:700;transition:border-color .2s,box-shadow .2s}.otp-box.filled{border-color:var(--gold-primary)}.otp-box:focus{border-color:var(--gold-primary);box-shadow:0 0 0 3px #d4af3726}.modal-overlay{z-index:1000;background:#0009;justify-content:center;align-items:flex-end;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-sheet{background:var(--bg-card);border-top:1px solid var(--border-color);border-top-left-radius:24px;border-top-right-radius:24px;flex-direction:column;width:100%;max-width:520px;max-height:70vh;padding:24px 20px;animation:.3s fadeInUp;display:flex}.spinner{border:2.5px solid #0003;border-top-color:currentColor;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin;display:inline-block}.shimmer{background:linear-gradient(90deg,var(--shimmer-base)25%,var(--shimmer-shine)50%,var(--shimmer-base)75%);background-size:600px 100%;border-radius:6px;animation:1.4s infinite shimmer;display:inline-block}.pin-key{background:var(--keypad-key-bg);border:1px solid var(--border-color);width:80px;height:80px;color:var(--text-primary);box-shadow:var(--shadow-md);border-radius:50%;justify-content:center;align-items:center;font-size:28px;font-weight:600;transition:background .1s,transform .1s,opacity .1s;display:flex}.pin-key:active{opacity:.75;transform:scale(.92)}.pin-dot{border:2px solid var(--border-color);background:0 0;border-radius:50%;width:18px;height:18px;transition:all .15s}.pin-dot.active{border-color:var(--gold-primary);background:var(--gold-primary);box-shadow:0 0 8px #d4af3773}.stat-collect{background:var(--stat-collect-bg);border:2px solid var(--stat-collect-border)}.stat-pay{background:var(--stat-pay-bg);border:2px solid var(--stat-pay-border)}.feature-icon-wrap{background:var(--feature-icon-bg);border-radius:16px;justify-content:center;align-items:center;width:72px;height:65px;transition:background .2s;display:flex}.gold-gradient-border{background:linear-gradient(#d4af37,#d4af372b,#d4af3703,#d4af372b,#d4af37);border-radius:12px;margin-bottom:18px;padding:2.5px}.gold-gradient-border-inner{background:var(--stats-bg);border-radius:10px;justify-content:space-between;align-items:center;height:149px;padding:18px 12px;display:flex}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes shimmer{0%{background-position:-300px 0}to{background-position:300px 0}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.animate-fade-in-up{animation:.4s forwards fadeInUp}.animate-fade-in{animation:.3s forwards fadeIn}.animate-shake{animation:.5s ease-in-out shake}.stagger>*{opacity:0;animation:.4s forwards fadeInUp}.stagger>:first-child{animation-delay:50ms}.stagger>:nth-child(2){animation-delay:.1s}.stagger>:nth-child(3){animation-delay:.15s}.stagger>:nth-child(4){animation-delay:.2s}.stagger>:nth-child(5){animation-delay:.25s}.stagger>:nth-child(6){animation-delay:.3s}@media (max-width:480px){.container{padding:0 12px}.pin-key{width:72px;height:72px;font-size:24px}.otp-box{width:40px;height:48px;font-size:20px}}