@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-color:#f7f8fa;--surface-color:#fff;--text-primary:#111827;--text-secondary:#6b7280;--border-color:#e5e7eb;--primary-color:#2563eb;--primary-hover:#1d4ed8;--success-color:#10b981;--warning-color:#f59e0b;--danger-color:#ef4444;--radius-sm:.5rem;--radius-md:1rem;--radius-lg:1.5rem;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a}:root.dark{--bg-color:#09090b;--surface-color:#18181b;--text-primary:#f9fafb;--text-secondary:#a1a1aa;--border-color:#27272a;--primary-color:#3b82f6;--primary-hover:#60a5fa;--success-color:#34d399;--warning-color:#fbbf24;--danger-color:#f87171}@media (prefers-color-scheme:dark){:root:not(.light){--bg-color:#09090b;--surface-color:#18181b;--text-primary:#f9fafb;--text-secondary:#a1a1aa;--border-color:#27272a;--primary-color:#3b82f6;--primary-hover:#60a5fa;--success-color:#34d399;--warning-color:#fbbf24;--danger-color:#f87171}}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;padding-bottom:80px;font-family:Inter,system-ui,-apple-system,sans-serif}a{color:inherit;text-decoration:none}ul{list-style:none}button{font-family:inherit}.auth-container{background-color:var(--bg-color);justify-content:center;align-items:center;min-height:100vh;padding:1.5rem;display:flex}.auth-card{background-color:var(--surface-color);border-radius:var(--radius-lg);width:100%;max-width:400px;box-shadow:var(--shadow-md);border:1px solid var(--border-color);padding:2rem}.auth-title{color:var(--text-primary);text-align:center;margin-bottom:.5rem;font-size:1.5rem;font-weight:700}.auth-subtitle{color:var(--text-secondary);text-align:center;margin-bottom:2rem;font-size:.9rem}.auth-form{flex-direction:column;gap:1.25rem;display:flex}.auth-message{color:var(--primary-color);border-radius:var(--radius-md);text-align:center;background-color:#3b82f61a;margin-bottom:1.5rem;padding:12px;font-size:.85rem}.input-group input{border-radius:var(--radius-md);border:1px solid var(--border-color);background-color:var(--bg-color);width:100%;color:var(--text-primary);padding:12px;font-size:1rem}.input-group input:focus{border-color:var(--primary-color);outline:none}.auth-btn{background-color:var(--primary-color);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;width:100%;margin-top:.5rem;padding:14px;font-size:1rem;font-weight:600;transition:background-color .2s}.auth-btn:hover{background-color:var(--primary-hover)}.auth-btn:disabled{opacity:.7;cursor:not-allowed}.auth-toggle{text-align:center;color:var(--text-secondary);margin-top:1.5rem;font-size:.9rem}.toggle-btn{color:var(--primary-color);cursor:pointer;background:0 0;border:none;margin-left:6px;font-weight:600}.toggle-btn:hover{text-decoration:underline}.debt-summary-card{background-color:var(--surface-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);margin-bottom:1.5rem;padding:1.5rem}.debt-subtitle{color:var(--text-secondary);letter-spacing:.05em;margin-bottom:.5rem;font-size:.85rem;font-weight:600}.debt-amount{color:var(--text-primary);letter-spacing:-.02em;margin-bottom:.75rem;font-size:2.5rem;font-weight:700}.debt-diff{color:var(--success-color);border-radius:var(--radius-md);background-color:#10b9811a;align-items:center;gap:6px;padding:6px 12px;font-size:.85rem;font-weight:600;display:inline-flex}.progress-card{background-color:var(--surface-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);margin-bottom:1.5rem;padding:1.5rem}.progress-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.progress-header h3{font-size:1.1rem;font-weight:600}.percentage{color:var(--primary-color);border-radius:var(--radius-sm);background-color:#2563eb1a;padding:4px 8px;font-size:.9rem;font-weight:700}.progress-bar-container{background-color:var(--border-color);border-radius:var(--radius-md);height:12px;margin-bottom:1.25rem;overflow:hidden}.progress-bar-fill{background-color:var(--primary-color);border-radius:var(--radius-md);height:100%;transition:width 1s ease-in-out}.progress-stats{justify-content:space-between;display:flex}.stat{flex-direction:column;gap:4px;display:flex}.stat:nth-child(2){text-align:center}.stat:last-child{text-align:right}.stat-label{color:var(--text-secondary);font-size:.75rem;font-weight:500}.stat-value{font-size:.95rem;font-weight:600}.stat-value.paid{color:var(--success-color)}.stat-value.pending{color:var(--warning-color)}.card-wallet{color:#fff;cursor:pointer;border-radius:1.25rem;margin-bottom:1rem;padding:1.5rem;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.card-wallet:before{content:"";background:radial-gradient(circle,#ffffff26 0%,#fff0 70%);border-radius:50%;width:250px;height:250px;position:absolute;top:-50%;right:-20%}.card-wallet:active{transform:scale(.98)}.theme-blue{background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%)}.theme-purple{background:linear-gradient(135deg,#4c1d95 0%,#8b5cf6 100%)}.theme-black{background:linear-gradient(135deg,#111827 0%,#374151 100%)}.theme-green{background:linear-gradient(135deg,#064e3b 0%,#10b981 100%)}.theme-red{background:linear-gradient(135deg,#7f1d1d 0%,#ef4444 100%)}.theme-orange{background:linear-gradient(135deg,#9a3412 0%,#f97316 100%)}.theme-teal{background:linear-gradient(135deg,#134e4a 0%,#14b8a6 100%)}.theme-pink{background:linear-gradient(135deg,#831843 0%,#db2777 100%)}.theme-gold{background:linear-gradient(135deg,#854d0e 0%,#eab308 100%)}.theme-cyan{background:linear-gradient(135deg,#164e63 0%,#06b6d4 100%)}.theme-indigo{background:linear-gradient(135deg,#312e81 0%,#6366f1 100%)}.theme-slate{background:linear-gradient(135deg,#334155 0%,#94a3b8 100%)}.theme-coral{background:linear-gradient(135deg,#be123c 0%,#f43f5e 100%)}.theme-emerald{background:linear-gradient(135deg,#047857 0%,#34d399 100%)}.theme-fuchsia{background:linear-gradient(135deg,#86198f 0%,#e879f9 100%)}.theme-lime{background:linear-gradient(135deg,#4d7c0f 0%,#a3e635 100%)}.theme-sky{background:linear-gradient(135deg,#0369a1 0%,#38bdf8 100%)}.theme-rose{background:linear-gradient(135deg,#9f1239 0%,#fb7185 100%)}.card-top{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.bank-name{letter-spacing:1px;font-size:1.1rem;font-weight:700}.card-middle{flex-direction:column;margin-bottom:1.5rem;display:flex}.card-name{opacity:.9;margin-bottom:4px;font-size:.9rem}.card-digits{letter-spacing:2px;font-family:monospace;font-size:1.25rem}.card-bottom{justify-content:space-between;align-items:flex-end;display:flex}.card-debt{flex-direction:column;display:flex}.debt-label{opacity:.8;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;font-size:.75rem}.debt-value{font-size:1.5rem;font-weight:700}.card-dates{opacity:.9;flex-direction:column;align-items:flex-end;gap:4px;font-size:.75rem;display:flex}.modal-overlay{z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#0006;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.modal-content{background-color:var(--surface-color);width:100%;max-width:480px;padding:1.5rem;padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,16px));border-radius:1.5rem 1.5rem 0 0;animation:.3s cubic-bezier(.16,1,.3,1) slideUp;box-shadow:0 -10px 25px #0000001a}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.modal-header h3{font-size:1.25rem;font-weight:600}.close-btn{color:var(--text-secondary);cursor:pointer;background:0 0;background-color:var(--bg-color);border:none;border-radius:50%;justify-content:center;align-items:center;padding:4px;display:flex}.modal-subtitle{color:var(--text-secondary);margin-bottom:1.5rem;font-size:.9rem}.payment-options{flex-direction:column;gap:12px;margin-bottom:1.5rem;display:flex}.payment-radio{border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;align-items:flex-start;gap:12px;padding:14px;transition:all .2s;display:flex}.payment-radio input[type=radio]{accent-color:var(--primary-color);margin-top:2px}.payment-radio:has(input:checked){border-color:var(--primary-color);background-color:#2563eb0d}.radio-content{flex-direction:column;width:100%;display:flex}.radio-content span:first-child{color:var(--text-primary);font-size:.95rem;font-weight:500}.radio-amount{color:var(--text-secondary);margin-top:4px;font-size:.85rem}.input-group{margin-bottom:1.5rem}.input-group label{color:var(--text-secondary);margin-bottom:8px;font-size:.85rem;font-weight:600;display:block}.currency-input{align-items:center;display:flex;position:relative}.currency-symbol{color:var(--text-secondary);font-size:1.25rem;position:absolute;left:12px}.currency-input input{border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-color);width:100%;color:var(--text-primary);outline:none;padding:12px 12px 12px 30px;font-family:inherit;font-size:1.25rem;font-weight:600}.currency-input input:focus{border-color:var(--primary-color)}.submit-payment-btn{background-color:var(--primary-color);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;width:100%;padding:14px;font-size:1rem;font-weight:600;transition:background-color .2s}.submit-payment-btn:hover{background-color:var(--primary-hover)}.calendar-container{padding:1.5rem 1.25rem 100px}.calendar-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.calendar-header h1{text-align:center;margin:0;font-size:1.25rem;font-weight:600}.month-nav-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:background-color .2s,color .2s;display:flex}.month-nav-btn:active{background-color:var(--bg-color);color:var(--primary-color)}.calendar-grid{background-color:var(--surface-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);grid-template-columns:repeat(7,1fr);gap:8px;padding:1rem;display:grid}.weekday{text-align:center;color:var(--text-secondary);margin-bottom:8px;font-size:.85rem;font-weight:600}.day{aspect-ratio:1;border-radius:var(--radius-sm);background-color:var(--bg-color);flex-direction:column;justify-content:flex-start;align-items:center;padding-top:4px;font-size:.9rem;font-weight:500;display:flex;position:relative;overflow:hidden}.day.empty{background-color:#0000}.day.today{color:var(--primary-color);border:1px solid var(--primary-color);background-color:#2563eb1a}.day.clickable{cursor:pointer;transition:transform .1s,background-color .2s}.day.clickable:active{background-color:var(--border-color);transform:scale(.95)}.event-dot{color:#fff;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;border-radius:4px;width:100%;max-width:100%;margin-top:4px;padding:2px 4px;font-size:.55rem;font-weight:700;overflow:hidden}.event-card{background-color:var(--danger-color)}.event-service{background-color:var(--warning-color)}.event-paid{background-color:var(--success-color)}.calendar-legend{justify-content:center;gap:1.5rem;margin-top:1.5rem;display:flex}.legend-item{color:var(--text-secondary);align-items:center;gap:6px;font-size:.85rem;font-weight:500;display:flex}.legend-dot{color:#0000;border-radius:50%;width:12px;height:12px;margin-top:0;padding:0}.calendar-modal-overlay{z-index:1000;background-color:#00000080;flex-direction:column;justify-content:flex-end;width:100vw;height:100vh;animation:.2s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}.calendar-modal{background-color:var(--surface-color);border-top-left-radius:20px;border-top-right-radius:20px;width:100%;max-width:480px;margin:0 auto;padding:1.5rem 1.5rem calc(1.5rem + 80px);animation:.3s cubic-bezier(.16,1,.3,1) slideUp;box-shadow:0 -4px 20px #00000026}.calendar-modal-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.calendar-modal-header h3{color:var(--text-primary);margin:0;font-size:1.1rem;font-weight:600}.calendar-modal-close{background:var(--bg-color);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.calendar-modal-content{flex-direction:column;gap:1rem;max-height:50vh;display:flex;overflow-y:auto}.calendar-modal-item{background-color:var(--bg-color);border-radius:var(--radius-md);border:1px solid var(--border-color);align-items:center;gap:1rem;padding:1rem;display:flex}.calendar-modal-icon{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.calendar-modal-info{flex-grow:1}.calendar-modal-info h4{color:var(--text-primary);margin:0 0 2px;font-size:.95rem;font-weight:600}.calendar-modal-info p{color:var(--text-secondary);margin:0;font-size:.8rem}.calendar-modal-amount{text-align:right;flex-direction:column;align-items:flex-end;gap:4px;display:flex}.calendar-modal-amount .amount{color:var(--text-primary);font-size:1rem;font-weight:700}.status-badge{border-radius:12px;padding:2px 6px;font-size:.7rem;font-weight:600}.status-badge.paid{color:var(--success-color);background-color:#10b9811a}.status-badge.pending{color:var(--warning-color);background-color:#f59e0b1a}.service-item{background-color:var(--surface-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);align-items:center;margin-bottom:.75rem;padding:1rem;transition:opacity .2s,transform .2s,box-shadow .2s;display:flex}.service-item:active{transform:scale(.99)}.service-item.paid{opacity:.6}.service-item.paid .service-name{color:var(--text-secondary);text-decoration:line-through}.service-icon{background-color:var(--bg-color);border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;margin-right:12px;font-size:1.25rem;display:flex}.service-details{flex-direction:column;flex:1;display:flex}.service-name{color:var(--text-primary);margin-bottom:4px;font-size:.95rem;font-weight:600}.service-meta{color:var(--text-secondary);font-size:.75rem}.service-amount-action{flex-direction:column;justify-content:center;align-items:flex-end;gap:8px;display:flex}.service-amount{font-size:1rem;font-weight:700}.toggle-btn{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex}.settings-container{padding:1.5rem 1.25rem 100px}.settings-title{margin-bottom:1.5rem;font-size:1.5rem;font-weight:600}.settings-profile{background-color:var(--surface-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);align-items:center;gap:1rem;margin-bottom:2rem;padding:1.25rem;display:flex}.profile-avatar{background-color:#2563eb1a;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;display:flex}.profile-info h3{margin-bottom:2px;font-size:1.1rem}.profile-info p{color:var(--text-secondary);font-size:.85rem}.settings-section{margin-bottom:2rem}.settings-section h3{text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:.75rem;padding-left:4px;font-size:.85rem}.settings-item{background-color:var(--surface-color);border-bottom:1px solid var(--border-color);cursor:pointer;justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}.settings-item:first-of-type{border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}.settings-item:last-of-type{border-bottom-left-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);border-bottom:none}.settings-item-left{align-items:center;gap:12px;font-weight:500;display:flex}.settings-icon{color:var(--text-secondary)}.settings-value{color:var(--text-secondary);align-items:center;font-size:.9rem;display:flex}.toggle-switch{background-color:var(--border-color);border-radius:12px;width:44px;height:24px;transition:background-color .2s;position:relative}.toggle-switch.active{background-color:var(--success-color)}.toggle-knob{background-color:#fff;border-radius:50%;width:20px;height:20px;transition:transform .2s;position:absolute;top:2px;left:2px;box-shadow:0 2px 4px #0003}.toggle-switch.active .toggle-knob{transform:translate(20px)}.logout-btn{width:100%;color:var(--danger-color);border:1px solid var(--danger-color);border-radius:var(--radius-md);cursor:pointer;background-color:#0000;justify-content:center;align-items:center;gap:8px;margin-top:1rem;padding:14px;font-size:1rem;font-weight:600;display:flex}.lock-container{background-color:var(--bg-color);min-height:100dvh;color:var(--text-primary);flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:flex}.lock-icon-wrapper{width:72px;height:72px;color:var(--primary-color);background-color:#3b82f61a;border-radius:50%;justify-content:center;align-items:center;margin-bottom:2rem;display:flex}.lock-title{margin-bottom:.5rem;font-size:1.5rem;font-weight:700}.lock-subtitle{color:var(--text-secondary);text-align:center;margin-bottom:3rem;font-size:.95rem}.pin-display{gap:16px;margin-bottom:3rem;display:flex}.pin-dot{background-color:var(--surface-color);border:2px solid var(--border-color);border-radius:50%;width:20px;height:20px;transition:all .2s}.pin-dot.filled{background-color:var(--primary-color);border-color:var(--primary-color)}.keypad{grid-template-columns:repeat(3,1fr);gap:20px;width:100%;max-width:300px;display:grid}.keypad-btn{background-color:var(--surface-color);border:1px solid var(--border-color);width:70px;height:70px;color:var(--text-primary);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;margin:0 auto;font-size:1.5rem;font-weight:600;transition:background-color .1s;display:flex}.keypad-btn:active{background-color:var(--border-color)}.keypad-btn.action{background-color:#0000;border:none;font-size:1rem}.biometric-btn{color:var(--primary-color)}.error-shake{animation:.4s cubic-bezier(.36,.07,.19,.97) both shake}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.bottom-nav{background-color:var(--surface-color);border-top:1px solid var(--border-color);width:100%;max-width:480px;height:80px;padding-bottom:env(safe-area-inset-bottom,16px);z-index:50;justify-content:space-around;align-items:center;margin:0 auto;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 6px -1px #0000000d}.nav-item{color:var(--text-secondary);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:20%;transition:color .2s;display:flex}.nav-item span{font-size:.7rem;font-weight:500}.nav-item:hover,.nav-item.active{color:var(--primary-color)}.add-button{transform:translateY(-15px)}.add-btn-circle{background-color:var(--primary-color);color:#fff;width:50px;height:50px;box-shadow:var(--shadow-md);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;transition:transform .2s,background-color .2s;display:flex}.add-btn-circle:hover{background-color:var(--primary-hover);transform:scale(1.05)}.fab-overlay{z-index:1000;background-color:#00000080;flex-direction:column;justify-content:flex-end;width:100vw;height:100vh;animation:.2s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}.fab-menu{background-color:var(--surface-color);border-top-left-radius:20px;border-top-right-radius:20px;width:100%;max-width:480px;margin:0 auto;padding:1.5rem 1.5rem calc(1.5rem + 80px);animation:.3s cubic-bezier(.16,1,.3,1) slideUp;box-shadow:0 -4px 20px #00000026}.fab-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.fab-header h3{color:var(--text-primary);font-size:1.1rem;font-weight:600}.fab-close{background:var(--bg-color);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.fab-actions{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}.fab-action-btn{cursor:pointer;color:var(--text-primary);background:0 0;border:none;flex-direction:column;align-items:center;gap:8px;font-size:.85rem;font-weight:500;display:flex}.fab-icon-wrapper{border-radius:16px;justify-content:center;align-items:center;width:56px;height:56px;transition:transform .2s;display:flex}.fab-action-btn:active .fab-icon-wrapper{transform:scale(.92)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}