:root{--primary: #2563eb;--primary-dark: #1d4ed8;--bg: #f8fafc;--card: #ffffff;--text-main: #1e293b;--text-muted: #64748b;--error: #dc2626;--success: #16a34a;--nav-height: 70px}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg);color:var(--text-main);line-height:1.5}.layout-wrapper{min-height:100vh;display:flex;flex-direction:column}.navbar{position:fixed;top:0;left:0;right:0;height:var(--nav-height);background:#fff;box-shadow:0 1px 3px #0000001a;z-index:1000;display:flex;align-items:center}.nav-container{max-width:1200px;margin:0 auto;width:100%;padding:0 1.5rem;display:flex;justify-content:space-between;align-items:center}.nav-brand{display:flex;align-items:center;gap:.5rem}.logo-text{font-size:1.25rem;font-weight:700;margin:0;color:var(--text-main)}.nav-links{display:flex;align-items:center;gap:1.5rem}.nav-item{text-decoration:none;color:var(--text-muted);font-weight:500;font-size:.95rem;transition:color .2s}.nav-item:hover{color:var(--primary)}.nav-item.active{color:var(--primary);position:relative}.nav-item.active:after{content:"";position:absolute;bottom:-5px;left:0;right:0;height:2px;background:var(--primary);border-radius:2px}.main-content{margin-top:var(--nav-height);padding:2rem 1.5rem;max-width:1600px;margin-left:auto;margin-right:auto;width:100%}.container{padding:2rem 1.5rem}.loading{text-align:center;padding:3rem;color:var(--text-muted)}.empty{color:var(--text-muted);text-align:center;padding:2rem}.section{background:#fff;padding:1.5rem;border-radius:1rem;box-shadow:0 1px 3px #0000001a;margin-bottom:2rem}.dashboard h1,.contracts h1,.analytics h1{margin-bottom:2rem;font-size:1.875rem}.cards,.stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:3rem}.card,.stat-card{background:#fff;padding:1.5rem;border-radius:1rem;box-shadow:0 1px 3px #0000001a}.card.highlight{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff}.amount,.stat-value{font-size:2rem;font-weight:700;margin:.5rem 0}.accounts-list,.transactions-list{display:flex;flex-direction:column;gap:1rem}.account-item,.transaction-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#f8fafc;border-radius:.5rem}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,#1d4ed8 100%);color:#fff;border:none;padding:.875rem 1.75rem;border-radius:.625rem;font-weight:700;cursor:pointer;transition:all .3s;font-size:.95rem;letter-spacing:.5px}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px #2563eb4d}.btn-primary:active{transform:translateY(0)}.btn-logout{background:#fee2e2;color:#991b1b;border:none;padding:.5rem 1rem;border-radius:.5rem;font-weight:600;cursor:pointer;font-size:.875rem}.btn-logout:hover{background:#fecaca}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:1rem;position:relative;overflow:hidden}.login-container:before{content:"";position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:float 20s ease-in-out infinite}.login-container:after{content:"";position:absolute;bottom:-50%;left:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(255,255,255,.05) 0%,transparent 70%);animation:float 25s ease-in-out infinite reverse}@keyframes float{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(30px,-30px) rotate(120deg)}66%{transform:translate(-20px,20px) rotate(240deg)}}.login-card{background:#fff;padding:3rem;border-radius:1.5rem;width:100%;max-width:420px;box-shadow:0 20px 60px #0000004d;position:relative;z-index:1;animation:slideUp .5s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.login-card h1{text-align:center;margin-bottom:.5rem;font-size:2rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-subtitle{color:var(--text-muted);margin-bottom:2rem;text-align:center;font-size:.95rem}.form-group{margin-bottom:1.25rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;font-size:.875rem;color:var(--text-main)}.form-group input{width:100%;padding:.875rem 1rem;border:2px solid #e2e8f0;border-radius:.75rem;font-size:.95rem;transition:all .2s;background:#f8fafc}.form-group input:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.message{padding:.875rem 1rem;border-radius:.75rem;margin-bottom:1rem;font-size:.875rem;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.message.success{background:#dcfce7;color:#166534;border:1px solid #86efac}.message.error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}.login-card .btn-primary{width:100%;padding:1rem;font-size:1rem;margin-top:.5rem;background:linear-gradient(135deg,#667eea,#764ba2);border:none;transition:all .3s;position:relative;overflow:hidden}.login-card .btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.login-card .btn-primary:hover:before{left:100%}.login-card .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px #667eea66}.login-card .btn-primary:active{transform:translateY(0)}.btn-link{background:none;border:none;color:#667eea;cursor:pointer;font-size:.875rem;margin-top:1.5rem;width:100%;padding:.75rem;transition:all .2s;border-radius:.5rem}.btn-link:hover{background:#f8fafc;color:#764ba2}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.btn-primary:disabled:hover{box-shadow:none}.category-bar{height:8px;background:#f1f5f9;border-radius:4px;overflow:hidden}.category-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary) 0%,#3b82f6 100%)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem;margin-bottom:2rem}.stat-amount{font-size:2rem;font-weight:700;margin:.5rem 0}.stat-amount.negative{color:var(--error)}.subtitle{font-size:.875rem;color:#fffc}.card.highlight .subtitle{color:#fffc}.card h3{margin:0 0 .5rem;font-size:.95rem;font-weight:600;opacity:.9}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.section-header h2{margin:0;font-size:1.25rem}.add-form{background:linear-gradient(135deg,#f8fafc,#f1f5f9);padding:2rem;border-radius:1rem;margin-bottom:2rem;display:grid;gap:1.25rem;border:1px solid #e2e8f0}.add-form input,.add-form select{width:100%;padding:.875rem 1rem;border:1.5px solid #e2e8f0;border-radius:.625rem;font-size:.95rem;background:#fff;transition:all .2s;font-family:inherit}.add-form input:focus,.add-form select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a;background:#fff}.add-form input::placeholder{color:var(--text-muted)}.add-form label{display:block;margin-bottom:.5rem;font-weight:600;font-size:.875rem;color:var(--text-main);text-transform:uppercase;letter-spacing:.05em}.btn-save{background:linear-gradient(135deg,var(--success) 0%,#15803d 100%);color:#fff;border:none;padding:.875rem 1.75rem;border-radius:.625rem;font-weight:700;cursor:pointer;transition:all .3s;font-size:.95rem;letter-spacing:.5px}.btn-save:hover{transform:translateY(-2px);box-shadow:0 8px 16px #16a34a4d}.btn-save:active{transform:translateY(0)}.account-info h4{margin:0 0 .25rem;font-size:1rem}.bank-label{margin:0;font-size:.875rem;color:var(--text-muted)}.account-actions{display:flex;align-items:center;gap:1rem}.account-balance{font-size:1.125rem;font-weight:600;margin:0;cursor:pointer;display:flex;align-items:center;gap:.5rem}.account-balance span{opacity:0;transition:opacity .2s}.account-balance:hover span{opacity:1}.edit-box{display:flex;gap:.5rem;align-items:center}.edit-box input{width:100px;padding:.625rem .75rem;border:1.5px solid var(--primary);border-radius:.5rem;font-weight:600;background:#fff;transition:all .2s}.edit-box input:focus{outline:none;box-shadow:0 0 0 3px #2563eb1a}.edit-box button{background:none;border:none;cursor:pointer;font-size:1.25rem;padding:.375rem .5rem;transition:all .2s;border-radius:.375rem}.edit-box button:hover{background:#f0f9ff;transform:scale(1.15)}.btn-delete-icon{background:none;border:none;cursor:pointer;font-size:1.25rem;opacity:.6;transition:opacity .2s}.btn-delete-icon:hover{opacity:1}.empty-msg{color:var(--text-muted);text-align:center;padding:2rem;margin:0}.categories-list{display:flex;flex-direction:column;gap:1.5rem}.category-item{display:flex;flex-direction:column;gap:.5rem}.category-info{display:flex;justify-content:space-between;font-weight:500}.progress-bar-bg{height:8px;background:#f1f5f9;border-radius:4px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary) 0%,#3b82f6 100%);transition:width .3s ease}.transaction-row{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#f8fafc;border-radius:.5rem}.transaction-details{flex:1}.transaction-desc{margin:0 0 .25rem;font-weight:500}.transaction-date{margin:0;font-size:.875rem;color:var(--text-muted)}.transaction-amount{font-weight:600;font-size:1.125rem;margin:0}.transaction-amount.positive{color:var(--success)}.transaction-amount.negative{color:var(--error)}.btn-sort{background:#fff;border:1.5px solid #e2e8f0;padding:.625rem 1rem;border-radius:.625rem;cursor:pointer;font-size:.875rem;font-weight:600;transition:all .2s}.btn-sort:hover{background:#f8fafc;border-color:var(--primary);color:var(--primary)}.btn-sort.active{background:var(--primary);color:#fff;border-color:var(--primary)}.container table{width:100%;border-collapse:collapse;background:#fff;border-radius:.75rem;overflow:hidden}.container thead tr{border-bottom:2px solid #e2e8f0;text-align:left}.container th{padding:1rem;font-weight:600;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.container tbody tr{border-bottom:1px solid #f1f5f9;transition:background .2s}.container td{padding:1rem}.container tbody tr[style*="opacity: 0.5"]{opacity:.5}.container button[style*="border: none"]{border:none;background:none;cursor:pointer;font-size:1.25rem;padding:.25rem .5rem;transition:transform .2s;min-width:2rem;display:inline-flex;align-items:center;justify-content:center}.container button[style*="border: none"]:hover{transform:scale(1.2)}.container td button{border:none;background:none;cursor:pointer;font-size:1.25rem;padding:.25rem .5rem;transition:transform .2s;min-width:2rem;display:inline-flex;align-items:center;justify-content:center}.container td button:hover{transform:scale(1.2)}.logo-icon{font-size:1.5rem}@media (max-width: 768px){.nav-links{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;width:100%}.nav-link{white-space:nowrap;padding:.5rem .75rem;font-size:.875rem}.cards,.stats-cards,.stats-grid,.dashboard-grid,.add-form{grid-template-columns:1fr!important;display:flex;flex-direction:column}.container table{font-size:.8rem;display:block;overflow-x:auto}.container th,.container td{padding:.75rem .4rem}input,select,button{min-height:44px;font-size:16px!important}.card{padding:1rem;margin-bottom:1rem}}@media (max-width: 400px){.transaction-amount{font-size:.9rem}h1,h2{font-size:1.2rem}}.account-category{margin-bottom:2.5rem}.category-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:1rem 1rem 0 0;border-bottom:2px solid #e2e8f0;margin-bottom:0}.category-header h3{margin:0;font-size:1.25rem;font-weight:700;color:var(--text-main);letter-spacing:-.5px}.category-balance{font-weight:700;font-size:1.375rem;background:linear-gradient(135deg,var(--primary) 0%,#3b82f6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.account-drop-zone{min-height:120px;padding:1.5rem;background:#fff;border-radius:0 0 1rem 1rem;transition:all .3s ease;display:flex;flex-direction:column;gap:1rem}.account-drop-zone.dragging-over{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:2px dashed var(--primary);border-radius:0 0 1rem 1rem}.empty-category{text-align:center;color:var(--text-muted);padding:3rem 1rem;margin:0;font-size:.95rem}.account-card{background:linear-gradient(135deg,#fff,#f8fafc);border:1.5px solid #e2e8f0;border-radius:.875rem;padding:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:grab;position:relative;overflow:hidden}.account-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary) 0%,#3b82f6 100%);opacity:0;transition:opacity .3s}.account-card:hover{border-color:var(--primary);box-shadow:0 8px 24px #2563eb1f;transform:translateY(-4px)}.account-card:hover:before{opacity:1}.account-card.dragging{opacity:.6;cursor:grabbing;box-shadow:0 12px 32px #2563eb40;transform:scale(1.02) rotate(2deg)}.account-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid #f1f5f9}.account-card-header h4{margin:0 0 .375rem;font-size:1.125rem;font-weight:700;color:var(--text-main);letter-spacing:-.3px}.account-card-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1.25rem}.stat-item{display:flex;flex-direction:column;gap:.5rem}.stat-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}.stat-value{font-size:1.125rem;font-weight:700;color:var(--text-main);letter-spacing:-.3px}.stat-value.clickable{cursor:pointer;transition:all .2s;padding:.25rem .5rem;border-radius:.375rem}.stat-value.clickable:hover{color:var(--primary);background:#f0f9ff}.stat-value.positive{color:var(--success)}.stat-value.negative{color:var(--error)}.container table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 4px 14px #0000000f;table-layout:fixed}.container thead{position:sticky;top:0;z-index:5}.container thead tr{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-bottom:2px solid #e2e8f0}.container th{padding:1rem 1.25rem;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.container tbody tr{border-bottom:1px solid #f1f5f9;transition:all .15s ease}.container tbody tr:last-child{border-bottom:none}.container tbody tr:hover{background:#f8fafc}.container td{padding:1rem 1.25rem;vertical-align:middle;font-size:.95rem}.container td strong{font-weight:700;letter-spacing:-.2px}.container tbody tr[style*="opacity: 0.5"]{opacity:.55}.btn-icon{background:transparent;border:none;cursor:pointer;font-size:1.15rem;padding:.45rem;border-radius:.4rem;transition:all .15s ease;opacity:.65;flex-shrink:0}.btn-icon:hover{opacity:1;background:#f1f5f9;transform:scale(1.12)}.container td input,.container td select{padding:.4rem .55rem;border-radius:.45rem;border:1px solid #e2e8f0;font-size:.9rem;background:#fff;transition:all .15s ease}.container td input:focus,.container td select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #2563eb1a}.contract-savings{font-size:.75rem;color:var(--success);font-weight:600;margin-top:2px}.contract-savings-muted{font-size:.75rem;color:var(--text-muted);margin-top:2px}.main-content{max-width:1700px}.add-form{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:end}.add-form button{align-self:end}.section.card{box-shadow:0 6px 20px #0000000f}.card{transition:all .2s ease}.card:hover{box-shadow:0 10px 28px #00000014}.edit-stack{display:grid;gap:.35rem;min-width:0}.edit-stack.amount-stack{justify-items:end}.edit-stack.amount-stack input{width:100%;max-width:120px;text-align:right}.edit-stack.cycle-stack select{width:100%}.container tbody td input,.container tbody td select{width:100%;min-width:0;max-width:100%;height:40px}.container tbody td input[type=text]{text-overflow:ellipsis}.container tbody td:nth-child(8){white-space:nowrap}.container tbody td:nth-child(8) .actions-inline{display:flex;align-items:center;justify-content:center;gap:.2rem;flex-wrap:nowrap}.container tbody td:nth-child(8) .btn-icon{padding:.35rem;font-size:1.1rem}.yearly-input{font-size:.8rem;opacity:.9}@media (max-width: 1200px){.container table{table-layout:auto}}.savings-banner{background:#ecfdf5;border:1px solid #16a34a;color:#065f46;padding:12px 16px;border-radius:10px;margin-bottom:16px;font-weight:500}.topbar--mobile{position:fixed;top:0;left:0;right:0;height:var(--nav-height);display:flex;align-items:center;gap:12px;padding:0 16px;background:#fff;border-bottom:1px solid #e5e7eb;z-index:1100;transform:translateY(0);transition:transform .25s ease}.topbar--mobile.topbar--hidden{transform:translateY(-100%)}.mobile-pagebar{position:fixed;top:0;left:0;right:0;height:var(--mobile-pagebar-height);display:flex;align-items:center;justify-content:center;background:#fffffff5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #e5e7eb;z-index:1090;transform:translateY(-100%);transition:transform .25s ease;font-weight:700}.mobile-pagebar--visible{transform:translateY(0)}.mobile-pagebar__title{font-size:.95rem;color:var(--text-main)}.content{padding:2px;padding-top:calc(var(--nav-height) + 0)}@media (max-width: 1023px){.content{padding-top:calc(var(--nav-height) + 0)}}@media (min-width: 1024px){.topbar--mobile,.mobile-pagebar,.overlay,.sidebar--mobile{display:none}.topbar--desktop{position:sticky;top:0;z-index:1000;height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 24px;background:#fff;border-bottom:1px solid #e5e7eb}.content{padding-top:0}}@media (min-width: 1024px){.topbar--mobile{display:none}.topbar--desktop{display:flex;align-items:center;justify-content:space-between;gap:24px;position:sticky;top:0;z-index:20;background:#fff;padding:16px 24px;border-bottom:1px solid #e5e7eb}.sidebar--mobile,.overlay,.hamburger{display:none}.desktop-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:1;justify-content:center}.desktop-nav .nav-link{text-decoration:none;white-space:nowrap}}.layout{min-height:100vh;background:var(--bg)}.main{min-height:100vh}.content{padding:2px;padding-top:calc(var(--nav-height) + 0px)}.topbar--mobile{position:fixed;top:0;left:0;right:0;height:var(--nav-height);display:flex;align-items:center;gap:12px;padding:0 16px;background:#fff;border-bottom:1px solid #e5e7eb;z-index:1100}.hamburger{border:none;background:transparent;font-size:1.6rem;cursor:pointer;color:var(--text-main);display:flex;align-items:center;justify-content:center}.brand{display:flex;align-items:center;gap:8px}.brand__name{font-weight:700}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a73;opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:1200}.overlay--open{opacity:1;pointer-events:auto}.sidebar--mobile{position:fixed;top:0;left:0;width:280px;max-width:82vw;height:100vh;background:#fff;box-shadow:0 10px 30px #0000002e;transform:translate(-100%);transition:transform .25s ease;z-index:1300;padding:20px 16px;display:flex;flex-direction:column}.sidebar--open{transform:translate(0)}.sidebar__header{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:20px}.sidebar__nav{display:flex;flex-direction:column;gap:8px}.nav-link{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text-main);padding:12px 14px;border-radius:12px;transition:background .2s ease,color .2s ease}.nav-link:hover,.nav-link.active{background:#eef2ff;color:var(--primary)}.nav-link--danger{border:none;background:#fee2e2;color:#991b1b;text-align:left;cursor:pointer;font:inherit}.topbar--desktop{display:none}@media (min-width: 1024px){.topbar--mobile,.overlay,.sidebar--mobile{display:none}.topbar--desktop{position:sticky;top:0;z-index:1000;height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 24px;background:#fff;border-bottom:1px solid #e5e7eb}.desktop-nav{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;flex-wrap:wrap}.btn-signout{border:none;background:#fee2e2;color:#991b1b;padding:10px 14px;border-radius:12px;cursor:pointer}.content{padding-top:0}}.mobile-title{font-weight:700;font-size:1rem;margin-left:8px}