.login-container{width:100%;max-width:420px;padding:calc(var(--s-4) + 2px)}.login-card{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:calc(var(--s-4) * 2 + 1px);box-shadow:var(--shadow-lg);border:1px solid hsl(220,15%,22%)}.login-title{font-size:32px;font-weight:600;margin-bottom:var(--s-2);color:var(--text-primary);letter-spacing:-.02em;text-align:center}.login-subtitle{font-size:14px;color:var(--text-secondary);margin-bottom:calc(var(--s-4) * 2 - 1px);text-align:center;letter-spacing:-.02em}.login-form{display:flex;flex-direction:column;gap:calc(var(--s-4) - 2px)}.input-group{position:relative}.login-input{width:100%;padding:calc(var(--s-4) - 1px) calc(var(--s-4) + 2px);background:var(--bg-tertiary);border:1px solid hsl(220,15%,25%);border-radius:var(--radius-md);color:var(--text-primary);font-size:16px;transition:all .2s ease;letter-spacing:-.02em}.login-input:focus{outline:none;border-color:var(--accent);background:var(--bg-hover);box-shadow:0 0 0 3px #497bdf1a}.login-input::placeholder{color:var(--text-muted)}.login-button{width:100%;padding:calc(var(--s-4) + 1px) var(--s-4);background:var(--accent);color:#fff;border-radius:var(--radius-md);font-size:16px;font-weight:500;transition:all .2s ease;letter-spacing:-.02em}.login-button:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px #497bdf4d}.login-button:active{transform:translateY(0)}.login-button:disabled{opacity:.6;cursor:not-allowed}.login-error{color:var(--danger);font-size:13px;text-align:center;padding:calc(var(--s-2) + 1px);background:#dd493c1a;border-radius:var(--radius-sm);letter-spacing:-.02em}.tracker{width:100%}.tracker-header{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--s-4) + 1px);margin-bottom:calc(var(--s-4) * 2 - 2px);flex-wrap:wrap}.tracker-stats{display:flex;gap:calc(var(--s-4) - 1px);flex-wrap:wrap}.stat-card{background:var(--bg-secondary);padding:calc(var(--s-4) + 3px) calc(var(--s-4) * 1.5 + 1px);border-radius:12px 8px 16px 12px;border:1px solid hsl(220,15%,22%);min-width:140px;transition:all .25s ease;position:relative}.stat-card:nth-child(2n){border-radius:8px 16px 12px 12px}.stat-card:nth-child(3n){border-radius:16px 12px 8px 16px}.stat-card:hover{transform:translateY(-2px);border-color:#383f4c;box-shadow:0 4px 12px #0003}.stat-label{font-size:12px;color:var(--text-secondary);margin-bottom:calc(var(--s-2) + 2px);letter-spacing:-.02em;font-variant-numeric:tabular-nums}.stat-value{font-size:24px;font-weight:600;color:var(--text-primary);letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px hsla(0,0%,0%,.1)}.add-button{padding:calc(var(--s-4) - 1px) calc(var(--s-4) + 2px);background:var(--accent);color:#fff;border-radius:var(--radius-md);font-size:15px;font-weight:500;transition:all .2s ease;letter-spacing:-.02em;white-space:nowrap}.add-button:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px #497bdf4d}.tracker-form{background:var(--bg-secondary);padding:calc(var(--s-4) * 1.5 + 1px);border-radius:var(--radius-md);margin-bottom:calc(var(--s-4) * 2 - 1px);border:1px solid hsl(220,15%,22%);display:flex;flex-direction:column;gap:calc(var(--s-4) - 2px)}.form-input,.form-textarea{padding:calc(var(--s-4) - 1px) calc(var(--s-4) + 2px);background:var(--bg-tertiary);border:1px solid hsl(220,15%,25%);border-radius:var(--radius-sm);color:var(--text-primary);font-size:15px;transition:all .2s ease;letter-spacing:-.02em;font-family:inherit}.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--accent);background:var(--bg-hover);box-shadow:0 0 0 3px #497bdf1a}.form-textarea{resize:vertical;min-height:80px}.form-submit{padding:calc(var(--s-4) - 1px) var(--s-4);background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-size:15px;font-weight:500;transition:all .2s ease;letter-spacing:-.02em;margin-top:var(--s-2)}.form-submit:hover{background:var(--accent-hover)}.tracker-list{display:flex;flex-direction:column;gap:calc(var(--s-4) - 1px)}.tracker-item{background:var(--bg-secondary);border:1px solid hsl(220,15%,22%);border-radius:var(--radius-md);padding:calc(var(--s-4) + 2px) calc(var(--s-4) * 1.5 + 1px);display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--s-4) + 1px);transition:all .2s ease}.tracker-item:hover{border-color:#3d4452;background:var(--bg-tertiary)}.tracker-item.paid,.tracker-item.inactive{opacity:.6}.item-content{flex:1}.item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(var(--s-2) + 1px);gap:var(--s-4);flex-wrap:wrap}.item-name{font-size:18px;font-weight:600;color:var(--text-primary);letter-spacing:-.02em}.item-amount{font-size:18px;font-weight:600;color:var(--accent);letter-spacing:-.02em}.item-description{font-size:14px;color:var(--text-secondary);margin-top:calc(var(--s-2) + 1px);letter-spacing:-.02em}.item-meta{font-size:13px;color:var(--text-muted);margin-top:calc(var(--s-2) + 1px);letter-spacing:-.02em}.item-details{display:flex;gap:calc(var(--s-4) - 1px);flex-wrap:wrap;margin-top:calc(var(--s-2) + 1px);font-size:13px;color:var(--text-secondary);letter-spacing:-.02em}.item-details .interest{color:var(--warning)}.item-actions{display:flex;gap:calc(var(--s-2) + 1px);flex-shrink:0}.toggle-button,.delete-button,.edit-button{padding:calc(var(--s-2) + 1px) calc(var(--s-4) - 1px);border-radius:var(--radius-sm);font-size:13px;transition:all .2s ease;letter-spacing:-.02em;white-space:nowrap;border:none;cursor:pointer}.toggle-button{background:var(--bg-tertiary);color:var(--text-primary)}.toggle-button:hover{background:var(--bg-hover)}.toggle-button.paid{background:#37be6f26;color:var(--success)}.toggle-button.inactive{background:var(--bg-tertiary);color:var(--text-muted)}.delete-button{background:#dd493c26;color:var(--danger)}.delete-button:hover{background:#dd493c40}.edit-button{background:#497bdf26;color:var(--accent)}.edit-button:hover{background:#497bdf40}.empty-state{text-align:center;padding:calc(var(--s-4) * 3);color:var(--text-secondary);font-size:15px;letter-spacing:-.02em}.debts-overview{display:flex;flex-direction:column;gap:calc(var(--s-4) * 2 - 1px)}.debt-group{background:var(--bg-secondary);border:1px solid hsl(220,15%,22%);border-radius:var(--radius-md);padding:calc(var(--s-4) + 2px) calc(var(--s-4) * 1.5 + 1px);overflow:hidden}.debt-group-header{border-left:3px solid var(--accent);padding-left:calc(var(--s-4) - 1px);margin-bottom:calc(var(--s-4) + 1px);padding-bottom:calc(var(--s-4) - 2px);border-bottom:1px solid hsl(220,15%,22%);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-4)}.debt-group-title{font-size:20px;font-weight:600;color:var(--text-primary);letter-spacing:-.02em}.debt-group-stats{display:flex;align-items:center;gap:calc(var(--s-4) + 2px);flex-wrap:wrap}.debt-group-count{font-size:14px;color:var(--text-secondary);letter-spacing:-.02em}.debt-group-total{font-size:18px;font-weight:600;letter-spacing:-.02em}.debt-group-list{display:flex;flex-direction:column;gap:calc(var(--s-4) - 1px);margin-top:calc(var(--s-4) + 1px)}@media (max-width: 768px){.tracker-header,.tracker-item{flex-direction:column}.item-actions{width:100%;justify-content:stretch}.toggle-button,.delete-button,.edit-button{flex:1}.debt-group-header{flex-direction:column;align-items:flex-start}}.statistics{width:100%}.statistics-header{margin-bottom:calc(var(--s-4) * 2 + 2px)}.charts-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:calc(var(--s-4) + 3px) calc(var(--s-4) - 1px);margin-bottom:calc(var(--s-4) * 2 - 2px)}.chart-card{background:var(--bg-secondary);border:1px solid hsl(220,15%,22%);border-radius:12px 16px 8px 12px;padding:calc(var(--s-4) * 1.5 + 2px) calc(var(--s-4) * 1.5 - 1px);position:relative;transition:all .3s ease}.chart-card:hover{border-color:#383f4c;transform:translateY(-2px);box-shadow:0 6px 16px #00000040}.chart-card:nth-child(2n){border-radius:16px 8px 12px 12px}.chart-title{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:calc(var(--s-4) + 3px);margin-left:calc(var(--s-2) - 1px);letter-spacing:-.02em;font-variant-numeric:oldstyle-nums}.chart-container{display:flex;flex-direction:column;align-items:center;gap:calc(var(--s-4) - 2px);position:relative}.pie-chart,.bar-chart{width:100%;max-width:300px;height:auto;filter:drop-shadow(0 2px 4px hsla(0,0%,0%,.15))}.bar-chart{max-width:100%;min-height:140px;padding:0 calc(var(--s-2) + 1px)}.chart-empty{padding:calc(var(--s-4) * 2 + 1px);text-align:center;color:var(--text-secondary);font-size:14px;letter-spacing:-.02em;font-style:italic}.chart-legend{display:flex;flex-direction:column;gap:calc(var(--s-2) + 2px);margin-top:calc(var(--s-4) + 1px);width:100%;padding-left:calc(var(--s-2) - 1px)}.legend-item{display:flex;align-items:center;gap:calc(var(--s-2) + 2px);font-size:13px;color:var(--text-secondary);letter-spacing:-.02em;transition:transform .2s ease}.legend-item:hover{transform:translate(2px)}.legend-color{width:14px;height:14px;border-radius:8px 12px;flex-shrink:0;box-shadow:0 1px 3px #0003}.legend-item:nth-child(2n) .legend-color{border-radius:12px 8px}.payments-section{margin-top:calc(var(--s-4) * 2 + 1px)}.section-title{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:calc(var(--s-4) + 3px);margin-left:calc(var(--s-1) + 1px);letter-spacing:-.02em;font-variant-numeric:oldstyle-nums}.payments-list{display:flex;flex-direction:column;gap:calc(var(--s-4) + 1px)}.payment-item{background:var(--bg-secondary);border:1px solid hsl(220,15%,22%);border-radius:12px 8px 16px 12px;padding:calc(var(--s-4) + 3px) calc(var(--s-4) * 1.5 - 1px);transition:all .25s ease;position:relative}.payment-item:nth-child(2n){border-radius:8px 16px 12px 12px}.payment-item:nth-child(3n){border-radius:16px 12px 8px 16px}.payment-item:hover{border-color:#3d4452;background:var(--bg-tertiary);transform:translate(3px);box-shadow:0 4px 12px #0003}.payment-item.paid{opacity:.65}.payment-content{display:flex;flex-direction:column;gap:calc(var(--s-2) + 2px)}.payment-header{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--s-4) + 1px);flex-wrap:wrap}.payment-info{display:flex;flex-direction:column;gap:calc(var(--s-2) + 1px)}.payment-category{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:500;font-variant-numeric:tabular-nums}.payment-name{font-size:16px;font-weight:600;color:var(--text-primary);letter-spacing:-.02em;margin:0;font-variant-numeric:oldstyle-nums}.payment-amount{font-size:18px;font-weight:600;color:var(--accent);letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px hsla(220,70%,58%,.2)}.payment-date{font-size:13px;color:var(--text-secondary);letter-spacing:-.02em;font-style:italic}.payment-footer{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--s-4) - 2px);flex-wrap:wrap;margin-top:calc(var(--s-1) + 1px)}.payment-status{display:inline-block;padding:calc(var(--s-2) + 1px) calc(var(--s-4) + 1px);border-radius:8px 12px;font-size:12px;font-weight:500;letter-spacing:-.02em;width:fit-content;transition:all .2s ease}.payment-status:nth-child(2n){border-radius:12px 8px}.status-paid{background:#41c3772e;color:#3bba70}.status-unpaid{background:#dc584c2e;color:#d94c3f}.payment-checkbox{display:flex;align-items:center;gap:calc(var(--s-2) + 2px);cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .2s ease}.payment-checkbox:hover{transform:scale(1.05)}.payment-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--accent);border-radius:8px 12px}.checkbox-label{font-size:13px;color:var(--text-secondary);letter-spacing:-.02em}@media (max-width: 768px){.charts-section{grid-template-columns:1fr;gap:calc(var(--s-4) + 2px)}.chart-card{border-radius:12px 16px 8px 12px}.payment-header{flex-direction:column;align-items:flex-start}.payment-amount{align-self:flex-end}.payment-item{border-radius:12px 8px 16px 12px}}.dashboard{width:100%;max-width:1200px;min-height:100vh;padding:calc(var(--s-4) + 3px)}.dashboard-header{margin-bottom:calc(var(--s-4) * 2 - 1px)}.header-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-4)}.dashboard-title{font-size:28px;font-weight:600;color:var(--text-primary);letter-spacing:-.02em}.header-actions{display:flex;align-items:center;gap:calc(var(--s-4) - 2px)}.user-name{color:var(--text-secondary);font-size:14px;padding:calc(var(--s-2) + 1px) calc(var(--s-4) - 1px);background:var(--bg-tertiary);border-radius:var(--radius-sm);letter-spacing:-.02em}.logout-button{padding:calc(var(--s-2) + 1px) calc(var(--s-4) - 1px);background:var(--bg-tertiary);color:var(--text-primary);border-radius:var(--radius-sm);font-size:14px;transition:all .2s ease;letter-spacing:-.02em}.logout-button:hover{background:var(--bg-hover)}.dashboard-nav{display:flex;gap:calc(var(--s-2) + 2px);margin-bottom:calc(var(--s-4) * 2 + 1px);border-bottom:1px solid hsl(220,15%,22%);padding-bottom:var(--s-2)}.nav-button{padding:calc(var(--s-3) + 1px) calc(var(--s-4) + 2px);background:transparent;color:var(--text-secondary);border-radius:var(--radius-sm);font-size:15px;transition:all .2s ease;letter-spacing:-.02em;position:relative}.nav-button:hover{color:var(--text-primary);background:var(--bg-tertiary)}.nav-button.active{color:var(--accent);font-weight:500}.nav-button.active:after{content:"";position:absolute;bottom:calc(-1 * var(--s-2) - 1px);left:calc(var(--s-4) + 2px);right:calc(var(--s-4) + 2px);height:2px;background:var(--accent);border-radius:2px 2px 0 0}.dashboard-content{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.loading{text-align:center;padding:calc(var(--s-4) * 3);color:var(--text-secondary)}:root{--s-4: 16px;--s-3: 12px;--s-2: 8px;--s-1: 4px;--bg-primary: hsl(220, 15%, 12%);--bg-secondary: hsl(220, 15%, 16%);--bg-tertiary: hsl(220, 15%, 20%);--bg-hover: hsl(220, 15%, 24%);--text-primary: hsl(220, 10%, 88%);--text-secondary: hsl(220, 8%, 68%);--text-muted: hsl(220, 8%, 48%);--accent: hsl(220, 70%, 58%);--accent-hover: hsl(220, 70%, 63%);--accent-light: hsl(220, 70%, 65%);--success: hsl(145, 55%, 48%);--warning: hsl(35, 75%, 52%);--danger: hsl(5, 70%, 55%);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--shadow: 0 4px 12px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);color:var(--text-primary);letter-spacing:-.02em;line-height:1.6}#root{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s-4)}button{font-family:inherit;letter-spacing:-.02em;cursor:pointer;border:none;transition:all .2s ease}input,textarea,select{font-family:inherit;letter-spacing:-.02em}