:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);--danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);--info-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);--card-gradient: linear-gradient(145deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.05) 100%);--text-color: #2d3748;--light-text: #718096;--border-radius: 16px;--box-shadow: 0 10px 25px rgba(0, 0, 0, .1);--hover-shadow: 0 20px 40px rgba(0, 0, 0, .15);--transition: all .3s cubic-bezier(.4, 0, .2, 1)}.App{text-align:center;max-width:90%;width:1200px;margin:0 auto;padding:1rem;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);min-height:100vh}.App-header{margin-bottom:2rem;background:var(--primary-gradient);color:#fff;padding:2rem;border-radius:var(--border-radius);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;box-shadow:var(--box-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.header-buttons{display:flex;gap:1rem;flex-wrap:wrap}.filter-button{background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);padding:.75rem 1.5rem;border-radius:25px;cursor:pointer;font-weight:600;transition:var(--transition);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.filter-button:hover{background:#ffffff4d;transform:translateY(-2px);box-shadow:0 5px 15px #0003}h1{margin:0}main{display:flex;flex-direction:column;gap:30px}.dashboard-container{display:flex;gap:2rem;flex-wrap:wrap}.dashboard-left{flex:1;min-width:300px;max-width:100%}.dashboard-right{flex:2;min-width:300px}.dashboard-right h2{margin-top:0;color:#2c3e50;margin-bottom:20px;text-align:left}.no-goals-message{background-color:#f8f9fa;padding:30px;border-radius:8px;text-align:center;color:#6c757d;border:1px dashed #dee2e6}.App-footer{margin-top:3rem;padding:2rem;background:var(--card-gradient);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:var(--border-radius);color:#718096;font-size:14px;box-shadow:var(--box-shadow)}@media (max-width: 992px){.dashboard-container{flex-direction:column}.dashboard-left{max-width:100%}}@media (max-width: 576px){.App{max-width:100%;padding:.5rem}.App-header{flex-direction:column;text-align:center}.filter-button{width:100%}.goal-list{grid-template-columns:1fr}}.overview{background:var(--info-gradient);padding:2rem;border-radius:var(--border-radius);box-shadow:var(--box-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);transition:var(--transition)}.overview:hover{transform:translateY(-5px);box-shadow:var(--hover-shadow)}.overview h2{margin-top:0;color:#2d3748;font-weight:700;font-size:1.5rem}.overview ul{list-style-type:none;padding:0;text-align:left}.overview li{padding:12px 0;border-bottom:1px solid #eee}.goal-overview-details{display:flex;flex-wrap:wrap;gap:10px;margin-top:5px;font-size:.9em;color:#666}.goal-overview-details span{background-color:#f0f0f0;padding:3px 8px;border-radius:4px}.form-container{background:var(--success-gradient);padding:2rem;border-radius:var(--border-radius);box-shadow:var(--box-shadow);margin-bottom:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);transition:var(--transition)}.form-container:hover{transform:translateY(-5px);box-shadow:var(--hover-shadow)}.form-container h2{margin-top:0;color:#2d3748;margin-bottom:1.5rem;font-weight:700;font-size:1.5rem}form{display:flex;flex-direction:column;gap:15px}.form-group{display:flex;flex-direction:column;text-align:left;gap:5px}label{font-weight:700;color:#555}form input,form select{padding:1rem;border:1px solid rgba(255,255,255,.3);border-radius:12px;font-size:16px;background:#ffffffe6;transition:var(--transition)}form input:focus,form select:focus{outline:none;border-color:#fff9;box-shadow:0 0 0 3px #fff3;transform:translateY(-2px)}.submit-button{padding:1rem 2rem;background:var(--secondary-gradient);color:#fff;border:none;border-radius:25px;cursor:pointer;transition:var(--transition);font-size:16px;font-weight:600;margin-top:1rem;box-shadow:0 4px 15px #0003}.submit-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #0000004d}.goal-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}.goal-item{background:var(--card-gradient);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:var(--border-radius);padding:1.5rem;box-shadow:var(--box-shadow);text-align:left;transition:var(--transition);position:relative;overflow:hidden}.goal-item:hover{transform:translateY(-8px);box-shadow:var(--hover-shadow)}.goal-item:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--warning-gradient)}.goal-item h3{margin-top:0;color:#2d3748;font-weight:700;font-size:1.25rem}.goal-item progress{width:100%;height:12px;margin:1rem 0;border-radius:6px;overflow:hidden;background:#ffffff4d}.goal-item progress::-webkit-progress-bar{background:#ffffff4d;border-radius:6px}.goal-item progress::-webkit-progress-value{background:var(--success-gradient);border-radius:6px}.goal-item button{margin-right:.75rem;margin-top:1rem;padding:.5rem 1rem;background:var(--secondary-gradient);color:#fff;border:none;border-radius:20px;cursor:pointer;font-weight:500;transition:var(--transition);box-shadow:0 2px 8px #00000026}.goal-item button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000040}.completed:before{background:var(--success-gradient)}.overdue:before{background:var(--danger-gradient)}.near-deadline:before{background:var(--warning-gradient)}.on-track:before{background:var(--info-gradient)}.deposit-form{margin-top:1rem;padding:1rem;background:#ffffff1a;border-radius:12px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.2)}.deposit-input-group{display:flex;gap:10px}.deposit-input-group input{flex:1}.deposit-input-group button{background:var(--success-gradient)}.deposit-input-group button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000040}body{margin:0;font-family:Inter,-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:linear-gradient(135deg,#667eea,#764ba2,#f093fb);min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}h1{font-size:2.5rem;color:#fff;text-align:center;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.3)}h2{font-size:1.75rem;color:#fff;text-align:center;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.2)}h3{font-size:1.25rem;color:#2d3748;text-align:center;font-weight:600}h4{font-size:1rem;color:#4a5568;text-align:center;font-weight:500}p{font-size:1rem;color:#4a5568;text-align:center;line-height:1.6}a{color:#fff;text-decoration:none}a:hover{text-decoration:underline}ul{list-style-type:none;padding:0}li{margin:.5rem 0;color:#fff}button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:25px;cursor:pointer;font-weight:500;transition:all .3s ease;box-shadow:0 4px 15px #0003}button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}input{padding:.75rem;border:1px solid rgba(255,255,255,.3);border-radius:12px;width:100%;box-sizing:border-box;background:#ffffffe6;transition:all .3s ease}input:focus{border-color:#667eea99;outline:none;box-shadow:0 0 0 3px #667eea33;transform:translateY(-1px)}textarea{padding:.5rem;border:1px solid #ccc;border-radius:.25rem;width:100%;box-sizing:border-box;resize:vertical}textarea:focus{border-color:#8a2be2;outline:none}.container{max-width:1200px;margin:0 auto;padding:2rem;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:20px;box-shadow:0 20px 40px #0000001a}.header{text-align:center;padding:1rem;background-color:#fff3;border-radius:.5rem;margin-bottom:1rem}.footer{text-align:center;padding:1rem;background-color:#fff3;border-radius:.5rem;margin-top:1rem}.navbar{display:flex;justify-content:center;background-color:#fff3;padding:.5rem;border-radius:.5rem}.navbar a{margin:0 1rem;color:#fff;text-decoration:none}.navbar a:hover{text-decoration:underline}.card{background:linear-gradient(145deg,#ffffff1a,#ffffff0d);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:1.5rem;margin:1.5rem 0;box-shadow:0 10px 25px #0000001a;transition:all .3s ease}.card:hover{transform:translateY(-5px);box-shadow:0 20px 40px #00000026}.card h3{margin-top:0;color:#fff}.card p{color:#fff}.table{width:100%;border-collapse:collapse;margin:1rem 0}.table th,.table td{padding:.5rem;border:1px solid #ccc;text-align:left}.table th{background-color:#fff3;color:#fff}.table tr:nth-child(2n){background-color:#ffffff1a}.table tr:hover{background-color:#fff3}.table a{color:#8a2be2;text-decoration:none}.table a:hover{text-decoration:underline}@media (max-width: 768px){body{font-size:.9rem}.container,.header,.footer,.navbar,.card{padding:.5rem}.table th,.table td{padding:.25rem}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1rem}h4,p{font-size:.875rem}button{padding:.25rem .5rem}input,textarea{padding:.25rem}.navbar a{margin:0 .5rem}.card h3{font-size:1.25rem}.card p,.table th,.table td{font-size:.875rem}}@media (max-width: 480px){body{font-size:.8rem}.container,.header,.footer,.navbar,.card{padding:.25rem}.table th,.table td{padding:.125rem}h1{font-size:1.25rem}h2{font-size:1rem}h3{font-size:.875rem}h4,p{font-size:.75rem}button{padding:.125rem .25rem}input,textarea{padding:.125rem}.navbar a{margin:0 .25rem}.card h3{font-size:1rem}.card p,.table th,.table td{font-size:.75rem}}@media (prefers-color-scheme: dark){body{background-color:#121212;color:#e0e0e0}.header,.footer,.navbar,.card{background-color:#ffffff1a;color:#e0e0e0}a{color:#bb86fc}a:hover{color:#3700b3}.table th{background-color:#ffffff1a;color:#e0e0e0}.table tr:nth-child(2n){background-color:#ffffff0d}.table tr:hover{background-color:#ffffff1a}button{background-color:#1f1f1f;color:#e0e0e0}button:hover{background-color:#333}input,textarea{background-color:#1f1f1f;color:#e0e0e0;border:1px solid #333}input:focus,textarea:focus{border-color:#bb86fc;outline:none}.container{background-color:#ffffff0d;box-shadow:0 2px 10px #0003}}
