:root{--font-family:"Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-main:#0a0f0d;--bg-header:#0a0f0dd9;--bg-card:#141c18;--bg-card-elevated:#1c2820;--bg-card-hover:#1e2b24;--bg-input:#0e1612;--border-color:#ffffff17;--border-focus:#059669;--text-primary:#ecf5ee;--text-secondary:#8ba898;--text-muted:#64748b;--brand-seed:#059669;--brand-start:#047857;--brand-end:#10b981;--brand-accent:#34d399;--accent-emerald-glow:#10b98138;--gold-display:#d4a72c;--gold-text:#f59e0b;--gold-glow:#f59e0b40;--hero-gradient:linear-gradient(135deg, #012818 0%, #023d26 50%, #035c40 100%);--income:#10b981;--expense:#ef4444;--warning:#f59e0b;--owner-suami:#2563eb;--owner-suami-bg:#2563eb2e;--owner-istri:#db2777;--owner-istri-bg:#db27772e;--owner-shared:#0e9f6e;--owner-shared-bg:#0e9f6e2e;--card-shadow:0 12px 30px -10px #00000080;--glass-border:1px solid #ffffff14;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px}[data-theme=light]{--bg-main:#f0f4f1;--bg-header:#f0f4f1e0;--bg-card:#fff;--bg-card-elevated:#f8faf8;--bg-card-hover:#e8f0ea;--bg-input:#e2e8e5;--border-color:#0b2a2014;--border-focus:#059669;--text-primary:#0b2a20;--text-secondary:#475569;--text-muted:#64748b;--accent-emerald-glow:#0596691f;--hero-gradient:linear-gradient(135deg, #035c40 0%, #047857 50%, #059669 100%);--card-shadow:0 10px 25px -5px #0596690f;--glass-border:1px solid #0b2a2014}[data-theme-variant=rose][data-theme=dark]{--bg-main:#1e0c16;--bg-card:#2c1322;--bg-card-elevated:#3a192d;--bg-input:#180912;--brand-seed:#ec4899;--brand-start:#db2777;--brand-end:#f472b6;--brand-accent:#f472b6;--border-focus:#ec4899;--hero-gradient:linear-gradient(135deg, #500724 0%, #831843 50%, #be185d 100%)}[data-theme-variant=rose][data-theme=light]{--bg-main:#fff5f7;--bg-card:#fff;--bg-card-elevated:#fff0f4;--bg-input:#fce7f3;--brand-seed:#db2777;--brand-start:#be185d;--brand-end:#ec4899;--border-focus:#db2777;--hero-gradient:linear-gradient(135deg, #db2777 0%, #ec4899 50%, #f472b6 100%)}[data-theme-variant=midnight][data-theme=dark]{--bg-main:#0b0d1b;--bg-card:#15182d;--bg-card-elevated:#1e223f;--bg-input:#080914;--brand-seed:#6366f1;--brand-start:#4338ca;--brand-end:#818cf8;--brand-accent:#a5b4fc;--border-focus:#6366f1;--hero-gradient:linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%)}[data-theme-variant=midnight][data-theme=light]{--bg-main:#f4f4fd;--bg-card:#fff;--bg-card-elevated:#eef2ff;--bg-input:#e0e7ff;--brand-seed:#4338ca;--brand-start:#3730a3;--brand-end:#6366f1;--border-focus:#4338ca;--hero-gradient:linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #818cf8 100%)}[data-theme-variant=amber][data-theme=dark]{--bg-main:#1a120b;--bg-card:#261c12;--bg-card-elevated:#332619;--bg-input:#120c07;--brand-seed:#d97706;--brand-start:#b45309;--brand-end:#f59e0b;--brand-accent:#fbbf24;--border-focus:#d97706;--hero-gradient:linear-gradient(135deg, #451a03 0%, #78350f 50%, #b45309 100%)}[data-theme-variant=amber][data-theme=light]{--bg-main:#fffbeb;--bg-card:#fff;--bg-card-elevated:#fef3c7;--bg-input:#fde68a;--brand-seed:#b45309;--brand-start:#92400e;--brand-end:#d97706;--border-focus:#b45309;--hero-gradient:linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%)}[data-theme-variant=ocean][data-theme=dark]{--bg-main:#0a141d;--bg-card:#13212e;--bg-card-elevated:#1b2d3e;--bg-input:#060d14;--brand-seed:#0ea5e9;--brand-start:#0369a1;--brand-end:#38bdf8;--brand-accent:#7dd3fc;--border-focus:#0ea5e9;--hero-gradient:linear-gradient(135deg, #0c4a6e 0%, #075985 50%, #0369a1 100%)}[data-theme-variant=ocean][data-theme=light]{--bg-main:#f0f9ff;--bg-card:#fff;--bg-card-elevated:#e0f2fe;--bg-input:#bae6fd;--brand-seed:#0369a1;--brand-start:#075985;--brand-end:#0ea5e9;--border-focus:#0369a1;--hero-gradient:linear-gradient(135deg, #0369a1 0%, #0ea5e9 50%, #38bdf8 100%)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-primary);font-family:var(--font-family);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5;transition:background-color .3s,color .3s}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.container{max-width:1080px;margin:0 auto;padding:1.25rem 1rem 3rem}.glass-card{background:var(--bg-card);border:var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--card-shadow);padding:1.25rem;transition:transform .2s,box-shadow .2s,border-color .2s}.glass-card-interactive:hover{border-color:var(--brand-end);box-shadow:0 12px 32px -8px var(--accent-emerald-glow);transform:translateY(-2px)}.section-container{margin-top:1.5rem}.section-header{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.section-title{letter-spacing:-.01em;font-size:1.1rem;font-weight:800}.flex-wrap{flex-wrap:wrap}.metrics-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem;display:grid}.metric-card{flex-direction:column;justify-content:space-between;gap:.5rem;display:flex}.metric-header{justify-content:space-between;align-items:center;display:flex}.metric-label{color:var(--text-muted);font-size:.8rem;font-weight:600}.metric-icon{font-size:1.2rem}.metric-value{letter-spacing:-.02em;font-size:1.35rem;font-weight:800}.metric-subtext{color:var(--text-muted);font-size:.75rem}.gold-metric{background:linear-gradient(135deg, var(--bg-card) 0%, #f59e0b0d 100%);border-color:#f59e0b4d}.gold-text{color:var(--gold-text)}.text-income{color:var(--income)}.text-expense{color:var(--expense)}.wallets-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;display:grid}.wallet-card{flex-direction:column;gap:.75rem;display:flex}.wallet-top{align-items:center;gap:.75rem;display:flex}.wallet-icon-badge{border-radius:var(--radius-md);background:var(--bg-input);border:var(--glass-border);justify-content:center;align-items:center;width:40px;height:40px;font-size:1.25rem;display:flex}.wallet-info{flex-direction:column;display:flex}.wallet-name{font-size:.9rem;font-weight:700}.wallet-share{color:var(--text-muted);font-size:.75rem}.wallet-balance{font-size:1.25rem;font-weight:800}.progress-bar-bg{background:var(--bg-input);border-radius:9999px;width:100%;height:6px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--brand-end) 0%, var(--brand-start) 100%);border-radius:9999px;height:100%;transition:width .3s}.tx-table-card{padding:0;overflow:hidden}.tx-list{flex-direction:column;display:flex}.tx-item{border-bottom:var(--glass-border);justify-content:space-between;align-items:center;padding:.85rem 1.25rem;transition:background .15s;display:flex}.tx-item:last-child{border-bottom:none}.tx-item:hover{background:var(--bg-card-hover)}.tx-left{align-items:center;gap:.85rem;display:flex}.tx-right{flex-direction:column;align-items:flex-end;gap:.2rem;display:flex}.tx-type-icon{border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:.95rem;font-weight:800;display:flex}.tx-type-icon.type-income{color:var(--income);background:#10b98126}.tx-type-icon.type-expense{color:var(--expense);background:#ef444426}.tx-type-icon.type-transfer{color:#3b82f6;background:#3b82f626}.tx-details{flex-direction:column;display:flex}.tx-title{font-size:.875rem;font-weight:700}.tx-date{color:var(--text-muted);font-size:.75rem}.tx-amount{font-size:.95rem;font-weight:800}.tx-amount.type-income{color:var(--income)}.tx-amount.type-expense{color:var(--expense)}.filter-controls{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.search-box{align-items:center;display:flex;position:relative}.search-icon{color:var(--text-muted);font-size:.85rem;position:absolute;left:.75rem}.search-input{background:var(--bg-input);border:var(--glass-border);border-radius:var(--radius-md);color:var(--text-primary);outline:none;padding:.45rem .85rem .45rem 2.2rem;font-size:.825rem}.search-input:focus{border-color:var(--border-focus)}.filter-pills{background:var(--bg-input);border-radius:var(--radius-md);border:var(--glass-border);gap:.35rem;padding:.2rem;display:flex}.filter-pill{color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;padding:.3rem .75rem;font-size:.775rem;font-weight:600;transition:all .15s}.filter-pill.active{background:var(--bg-card-hover);color:var(--text-primary);font-weight:700}.zakat-hub-header{margin-bottom:1.25rem}.zakat-hub-header h2{font-size:1.35rem;font-weight:800}.zakat-hub-header p{color:var(--text-muted);font-size:.85rem}.zakat-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;display:grid}.zakat-card{flex-direction:column;gap:.85rem;display:flex}.zakat-card-header{align-items:center;gap:.5rem;display:flex}.zakat-icon{font-size:1.35rem}.zakat-card-header h3{font-size:.95rem;font-weight:700}.zakat-desc{color:var(--text-muted);font-size:.775rem}.zakat-result-box{background:var(--bg-input);border:var(--glass-border);border-radius:var(--radius-md);flex-direction:column;gap:.35rem;padding:.85rem 1rem;display:flex}.zakat-result-box.wajib{background:#f59e0b0f;border-color:#f59e0b66}.result-status{color:var(--text-secondary);font-size:.8rem}.result-amount{font-size:.9rem;font-weight:700}.result-amount span{color:var(--gold-text);font-size:1.1rem;font-weight:800}.pockets-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;display:grid}.pocket-card{flex-direction:column;gap:.75rem;display:flex}.pocket-top{align-items:center;gap:.75rem;display:flex}.pocket-icon{font-size:1.75rem}.pocket-title{font-size:.95rem;font-weight:700}.pocket-target{color:var(--text-muted);font-size:.75rem}.pocket-amount{color:var(--brand-end);font-size:1.25rem;font-weight:800}.pocket-progress-wrap{flex-direction:column;gap:.3rem;display:flex}.pocket-pct{color:var(--text-muted);font-size:.725rem;font-weight:700}.household-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;display:grid}.owner-summary-card{flex-direction:column;gap:.75rem;display:flex}.owner-head{justify-content:space-between;align-items:center;display:flex}.owner-head h3{font-size:.95rem;font-weight:700}.owner-amount{font-size:1.4rem;font-weight:800}.owner-legend{gap:.5rem;display:flex}.hero-section{max-width:680px;margin:2rem auto}.hero-card{text-align:center;padding:2.5rem 2rem}.hero-icon-wrapper{background:var(--accent-emerald-glow);border-radius:var(--radius-xl);border:1px solid var(--brand-end);justify-content:center;align-items:center;width:72px;height:72px;margin:0 auto 1.25rem;display:flex}.hero-logo{width:46px;height:46px}.hero-title{margin-bottom:.75rem;font-size:1.85rem;font-weight:800}.hero-subtitle{color:var(--text-secondary);margin-bottom:2rem;font-size:.975rem}.hero-action{margin-bottom:2.5rem}.btn-lg{border-radius:var(--radius-lg);padding:.85rem 1.75rem;font-size:1rem}.features-grid{text-align:left;border-top:var(--glass-border);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;padding-top:1.75rem;display:grid}.feature-item{background:var(--bg-input);border-radius:var(--radius-md);border:var(--glass-border);padding:1rem}.feature-icon{margin-bottom:.35rem;font-size:1.5rem;display:block}.feature-item h3{margin-bottom:.25rem;font-size:.85rem;font-weight:700}.feature-item p{color:var(--text-muted);font-size:.775rem}.auth-section{max-width:440px;margin:3rem auto}.lock-card{padding:2rem}.lock-header{text-align:center;margin-bottom:1.5rem}.lock-icon{margin-bottom:.5rem;font-size:2.5rem}.user-id-text{color:var(--text-muted);margin-top:.25rem;font-size:.8rem}.password-input-wrapper{align-items:center;display:flex;position:relative}.pass-toggle-btn{cursor:pointer;opacity:.7;background:0 0;border:none;font-size:1.1rem;position:absolute;right:.75rem}.btn-full{width:100%;margin-top:.5rem}.lock-footer{text-align:center;margin-top:1.5rem}.alert-banner{color:var(--expense);border-radius:var(--radius-md);background:#ef444426;border:1px solid #ef44444d;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:.85rem 1.25rem;display:flex}.alert-content{align-items:center;gap:.65rem;font-size:.9rem;display:flex}.alert-close{color:currentColor;cursor:pointer;background:0 0;border:none;font-size:1.4rem}.empty-state{text-align:center;color:var(--text-secondary);padding:2.5rem 1.5rem}.empty-icon{margin-bottom:.5rem;font-size:2.5rem}.btn{border-radius:var(--radius-md);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.65rem 1.25rem;font-family:inherit;font-size:.9rem;font-weight:600;transition:all .2s;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg, var(--brand-end) 0%, var(--brand-start) 100%);color:#fff;box-shadow:0 4px 14px var(--accent-emerald-glow)}.btn-primary:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.btn-secondary{background:var(--bg-input);color:var(--text-primary);border:var(--glass-border)}.btn-secondary:hover:not(:disabled){background:var(--bg-card-hover)}.btn-outline{color:var(--brand-end);border:1px solid var(--brand-end);background:0 0}.btn-sm{border-radius:var(--radius-sm);padding:.4rem .85rem;font-size:.825rem}.input-group{flex-direction:column;gap:.4rem;margin-bottom:1rem;display:flex}.input-label{color:var(--text-secondary);font-size:.85rem;font-weight:500}.input-field{background-color:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);width:100%;color:var(--text-primary);outline:none;padding:.75rem 1rem;font-family:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.input-field:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-emerald-glow)}.badge{border-radius:9999px;align-items:center;gap:.35rem;padding:.25rem .65rem;font-size:.75rem;font-weight:600;display:inline-flex}.badge-emerald{background:var(--accent-emerald-glow);color:var(--brand-end);border:1px solid #10b9814d}.badge-gold{background:var(--gold-glow);color:var(--gold-text);border:1px solid #f59e0b4d}.badge-rose{color:var(--expense);background:#ef444426;border:1px solid #ef44444d}.badge-suami{background:var(--owner-suami-bg);color:#60a5fa;border:1px solid #2563eb59}.badge-istri{background:var(--owner-istri-bg);color:#f472b6;border:1px solid #db277759}.badge-shared{background:var(--owner-shared-bg);color:#34d399;border:1px solid #0e9f6e59}.nav-tabs-wrapper{background:var(--bg-card);border-radius:var(--radius-lg);border:var(--glass-border);gap:.35rem;margin-bottom:1.25rem;padding:.35rem;display:flex;overflow-x:auto}.tab-item{color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;background:0 0;border:none;align-items:center;gap:.5rem;padding:.6rem 1.1rem;font-size:.875rem;font-weight:600;transition:all .2s;display:flex}.tab-item:hover{color:var(--text-primary);background:var(--bg-card-hover)}.tab-item.active{background:linear-gradient(135deg, var(--brand-end) 0%, var(--brand-start) 100%);color:#fff;box-shadow:0 4px 12px var(--accent-emerald-glow)}.dashboard-wrapper{flex-direction:column;gap:1.25rem;display:flex}.sync-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;display:flex}.sync-info{align-items:center;gap:.75rem;display:flex}.sync-title{font-size:.9rem;font-weight:700}.sync-time{color:var(--text-muted);font-size:.775rem}.sync-actions{flex-wrap:wrap;gap:.5rem;display:flex}@keyframes spin{to{transform:rotate(360deg)}}.spinner{animation:1s linear infinite spin}@keyframes pulse-glow{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.95)}}.pulse-dot{background-color:var(--brand-end);width:8px;height:8px;box-shadow:0 0 8px var(--brand-end);border-radius:50%;animation:2s ease-in-out infinite pulse-glow}