:root{--bg-main: #090d16;--bg-gradient: radial-gradient(circle at 15% 15%, rgba(99, 102, 241, .12) 0%, transparent 40%), radial-gradient(circle at 85% 20%, rgba(16, 185, 129, .12) 0%, transparent 45%), radial-gradient(circle at 50% 80%, rgba(245, 158, 11, .08) 0%, transparent 50%), #080c14;--card-bg: rgba(17, 24, 39, .75);--card-bg-elevated: rgba(26, 35, 54, .85);--card-border: rgba(255, 255, 255, .08);--card-border-hover: rgba(255, 255, 255, .18);--card-glow: 0 8px 32px 0 rgba(0, 0, 0, .37);--text-primary: #f9fafb;--text-secondary: #9ca3af;--text-muted: #6b7280;--text-dim: #4b5563;--accent-green: #10b981;--accent-green-glow: rgba(16, 185, 129, .25);--accent-green-dark: #064e3b;--accent-green-light: #34d399;--accent-indigo: #6366f1;--accent-indigo-glow: rgba(99, 102, 241, .25);--accent-indigo-light: #818cf8;--accent-amber: #f59e0b;--accent-amber-glow: rgba(245, 158, 11, .25);--accent-rose: #ef4444;--accent-rose-glow: rgba(239, 68, 68, .25);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display: "Outfit", var(--font-sans);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 18px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .25s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg-gradient);background-attachment:fixed;color:var(--text-primary);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select,textarea{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0f172a99}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff47}.app-container{max-width:1560px;margin:0 auto;padding:24px 28px 80px}.glass-panel{background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);box-shadow:var(--card-glow);border-radius:var(--radius-lg);transition:border-color var(--transition-normal),box-shadow var(--transition-normal)}.glass-panel:hover{border-color:var(--card-border-hover)}.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;margin-bottom:28px;border-radius:var(--radius-lg)}.brand{display:flex;align-items:center;gap:14px}.brand-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#10b981,#059669);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 18px var(--accent-green-glow)}.brand-title{font-family:var(--font-display);font-size:1.45rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#fff 40%,#9ca3af);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.brand-subtitle{font-size:.8rem;color:var(--text-secondary);font-weight:400}.header-user-section{display:flex;align-items:center;gap:16px}.user-pill{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-full)}.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#fff;box-shadow:0 2px 8px var(--accent-indigo-glow)}.user-info{display:flex;flex-direction:column}.user-name{font-size:.9rem;font-weight:600;color:#fff}.role-badge{font-size:.65rem;padding:1px 6px;border-radius:4px;text-transform:uppercase;font-weight:700;letter-spacing:.05em;display:inline-block;width:fit-content}.role-admin{background:#f59e0b2e;color:#fbbf24;border:1px solid rgba(245,158,11,.35)}.role-user{background:#6366f12e;color:#a5b4fc;border:1px solid rgba(99,102,241,.35)}.btn-logout{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#ef44441a;border:1px solid rgba(239,68,68,.25);color:#fca5a5;border-radius:var(--radius-md);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.btn-logout:hover{background:#ef444433;border-color:#ef444473;color:#fff;transform:translateY(-1px)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:28px}.stat-card{padding:20px 22px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.stat-card:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%}.stat-card.blue:before{background:var(--accent-indigo)}.stat-card.emerald:before{background:var(--accent-green)}.stat-card.amber:before{background:var(--accent-amber)}.stat-card.rose:before{background:var(--accent-rose)}.stat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.stat-label{font-size:.82rem;color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.04em}.stat-icon-wrap{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center}.stat-card.blue .stat-icon-wrap{background:var(--accent-indigo-glow);color:var(--accent-indigo-light)}.stat-card.emerald .stat-icon-wrap{background:var(--accent-green-glow);color:var(--accent-green-light)}.stat-card.amber .stat-icon-wrap{background:var(--accent-amber-glow);color:#fbbf24}.stat-card.rose .stat-icon-wrap{background:var(--accent-rose-glow);color:#f87171}.stat-value{font-family:var(--font-display);font-size:1.75rem;font-weight:700;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-bottom:6px}.stat-subtext{font-size:.8rem;color:var(--text-muted);display:flex;align-items:center;gap:6px}.stat-progress-bar{width:100%;height:6px;background:#ffffff14;border-radius:3px;margin-top:10px;overflow:hidden}.stat-progress-fill{height:100%;border-radius:3px;transition:width .6s cubic-bezier(.4,0,.2,1)}.stat-card.emerald .stat-progress-fill{background:linear-gradient(90deg,#059669,#10b981)}.stat-card.rose .stat-progress-fill{background:linear-gradient(90deg,#b91c1c,#ef4444)}.form-card{padding:24px 28px;margin-bottom:28px}.form-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.form-title{display:flex;align-items:center;gap:10px;font-size:1.15rem;font-weight:700;color:#fff}.form-badge{font-size:.75rem;padding:3px 8px;background:#10b98126;color:var(--accent-green-light);border-radius:6px;border:1px solid rgba(16,185,129,.3)}.installment-form-grid{display:grid;grid-template-columns:repeat(3,1fr) 1.2fr;gap:18px}.form-group{display:flex;flex-direction:column;gap:7px}.form-group.full-width{grid-column:1 / -1}.form-label{font-size:.82rem;font-weight:500;color:var(--text-secondary)}.form-label span.req{color:var(--accent-rose)}.input-field{width:100%;background:#0f172a99;border:1px solid rgba(255,255,255,.1);color:#fff;padding:10px 14px;border-radius:var(--radius-md);font-size:.92rem;outline:none;transition:all var(--transition-fast)}.input-field:focus{border-color:var(--accent-green);box-shadow:0 0 0 3px var(--accent-green-glow);background:#0f172ad9}.input-field::placeholder{color:var(--text-dim)}.form-preview-card{background:#ffffff08;border:1px dashed rgba(255,255,255,.12);border-radius:var(--radius-md);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;margin-top:14px}.preview-item{display:flex;flex-direction:column;gap:2px}.preview-label{font-size:.75rem;color:var(--text-muted)}.preview-val{font-size:.95rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}.preview-val.highlight{color:var(--accent-green-light)}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.btn-primary{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:11px 22px;border-radius:var(--radius-md);font-size:.92rem;font-weight:600;cursor:pointer;box-shadow:0 4px 14px var(--accent-green-glow);transition:all var(--transition-fast)}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 20px var(--accent-green-glow)}.btn-primary:active{transform:translateY(0)}.btn-secondary{display:flex;align-items:center;gap:8px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:var(--text-primary);padding:10px 18px;border-radius:var(--radius-md);font-size:.9rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.btn-secondary:hover{background:#ffffff1f}.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;margin-bottom:20px;flex-wrap:wrap}.filter-left{display:flex;align-items:center;gap:14px;flex:1;min-width:320px}.client-select-wrap{position:relative;min-width:240px}.search-input-wrap{position:relative;flex:1;max-width:320px}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}.input-with-icon{padding-left:38px}.filter-right{display:flex;align-items:center;gap:12px}.btn-export{display:flex;align-items:center;gap:8px;padding:9px 18px;background:#6366f11f;border:1px solid rgba(99,102,241,.3);color:#a5b4fc;border-radius:var(--radius-md);font-size:.88rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-export:hover{background:#6366f138;border-color:#6366f180;color:#fff;transform:translateY(-1px)}.table-card{padding:0;overflow:hidden}.table-responsive{width:100%;overflow-x:auto;border-radius:var(--radius-lg)}.installments-table{width:100%;border-collapse:collapse;text-align:left;font-size:.88rem}.installments-table th{background:#0f172ae6;color:var(--text-secondary);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap}.installments-table td{padding:16px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}.installments-table tbody tr{transition:background var(--transition-fast)}.installments-table tbody tr:hover{background:#ffffff05}.client-cell{min-width:180px}.client-name-title{font-weight:700;color:#fff;font-size:.95rem;margin-bottom:2px}.client-date{font-size:.75rem;color:var(--text-muted)}.service-cell{min-width:160px;color:#e5e7eb}.amount-cell{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}.months-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-full);font-size:.8rem;font-weight:600;color:#d1d5db}.months-columns-container{display:flex;align-items:center;gap:8px}.month-cell-box{display:flex;flex-direction:column;align-items:center;padding:6px 10px;border-radius:var(--radius-sm);min-width:78px;text-align:center;-webkit-user-select:none;user-select:none;border:1px solid transparent;transition:all var(--transition-fast);position:relative}.month-cell-box.unpaid{background:#ffffff08;border-color:#ffffff0f;color:#9ca3af}.month-cell-box.unpaid:hover{background:#ffffff0f;border-color:#ffffff26}.month-cell-box.unpaid .month-amount{color:#9ca3af;font-weight:600}.month-cell-box.paid{background:linear-gradient(135deg,#10b98138,#05966947);border-color:#10b98180;box-shadow:0 2px 10px #10b98133;color:#34d399}.month-cell-box.paid:hover{background:linear-gradient(135deg,#10b9814d,#0596695c);border-color:#10b981b3}.month-cell-box.paid .month-amount{color:#6ee7b7;font-weight:700;text-shadow:0 0 10px rgba(16,185,129,.3)}.month-title{font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;opacity:.8;margin-bottom:2px}.month-amount{font-size:.82rem;font-variant-numeric:tabular-nums;margin-bottom:4px}.month-toggle-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:2px;border-radius:4px;transition:transform var(--transition-fast)}.month-toggle-btn:hover{transform:scale(1.15)}.checkbox-visual{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.unpaid .checkbox-visual{border:1.5px solid rgba(255,255,255,.3);background:#0003}.unpaid .checkbox-visual:hover{border-color:var(--accent-green-light)}.paid .checkbox-visual{background:var(--accent-green);border:1.5px solid var(--accent-green);color:#fff;box-shadow:0 0 8px var(--accent-green-glow)}.status-pill{display:flex;flex-direction:column;gap:2px;min-width:140px}.status-paid-text{font-size:.82rem;font-weight:600;color:var(--accent-green-light);font-variant-numeric:tabular-nums}.status-remain-text{font-size:.82rem;font-weight:600;color:#f87171;font-variant-numeric:tabular-nums}.comment-badge{font-size:.78rem;color:var(--text-muted);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-actions{display:flex;align-items:center;gap:8px}.btn-icon-action{width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.btn-icon-action.edit:hover{background:#6366f12e;border-color:#6366f166;color:#818cf8;transform:translateY(-1px)}.btn-icon-action.delete:hover{background:#ef44442e;border-color:#ef444466;color:#f87171;transform:translateY(-1px)}.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}.empty-state-icon{width:56px;height:56px;margin:0 auto 16px;color:var(--text-dim)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#030712bf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .2s ease-out}.modal-content{background:#0f172a;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);box-shadow:0 20px 50px #0009;width:100%;max-width:540px;padding:28px;animation:scaleUp .25s cubic-bezier(.16,1,.3,1)}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.modal-title{font-size:1.25rem;font-weight:700;color:#fff}.modal-close-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:6px}.modal-close-btn:hover{color:#fff;background:#ffffff1a}.modal-body{margin-bottom:24px}.modal-footer{display:flex;justify-content:flex-end;gap:12px}.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;padding:10px 20px;border-radius:var(--radius-md);font-weight:600;cursor:pointer;box-shadow:0 4px 14px var(--accent-rose-glow);transition:all var(--transition-fast)}.btn-danger:hover{filter:brightness(1.1);transform:translateY(-1px)}.login-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.login-card{width:100%;max-width:440px;padding:36px 32px;text-align:center}.login-icon-box{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,#10b981,#059669);display:flex;align-items:center;justify-content:center;color:#fff;margin:0 auto 18px;box-shadow:0 8px 24px var(--accent-green-glow)}.login-title{font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:#fff;margin-bottom:6px}.login-desc{font-size:.88rem;color:var(--text-secondary);margin-bottom:24px}.quick-user-select{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}.quick-user-btn{padding:12px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.1);background:#ffffff08;color:var(--text-primary);font-weight:600;font-size:.95rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all var(--transition-fast)}.quick-user-btn:hover{background:#ffffff14;border-color:#fff3}.quick-user-btn.active{background:#10b9811f;border-color:var(--accent-green);color:var(--accent-green-light)}.quick-user-role{font-size:.72rem;color:var(--text-muted);font-weight:400}.login-form{display:flex;flex-direction:column;gap:16px;text-align:left}.login-error{padding:10px 14px;background:#ef444426;border:1px solid rgba(239,68,68,.35);border-radius:var(--radius-md);color:#fca5a5;font-size:.84rem;display:flex;align-items:center;gap:8px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(max-width:1080px){.stats-grid,.installment-form-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){.app-container{padding:16px 14px 60px}.stats-grid,.installment-form-grid{grid-template-columns:1fr}.filter-bar{flex-direction:column;align-items:stretch}.filter-left{flex-direction:column}.filter-right{justify-content:space-between}}