@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap";:root{--bg-color:#faf8f5;--bg-warm:#f3efe8;--text-primary:#1a1a2e;--text-secondary:#5a5a72;--text-muted:#8e8ea0;--accent-color:#6c5ce7;--accent-gradient:linear-gradient(135deg, #6c5ce7 0%, #7c6cf0 50%, #a78bfa 100%);--accent-glow:#6c5ce740;--glass-bg:#ffffff8c;--glass-border:#ffffffb3;--glass-border-hover:#ffffffe6;--glass-shadow:0 8px 32px #0000000f, 0 2px 8px #0000000a, inset 0 1px 0 #ffffffe6;--danger-color:#e74c6f;--success-color:#22a06b;--warning-color:#d4901e;--radius-sm:10px;--radius-md:16px;--radius-lg:22px;--radius-xl:28px}*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#0000001a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#0000002e}body{background:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;min-height:100vh;font-family:Plus Jakarta Sans,sans-serif;display:flex;overflow-x:hidden}.bg-mesh{z-index:-1;background:radial-gradient(at 15% 45%,#6c5ce714 0%,#0000 55%),radial-gradient(at 85% 20%,#a78bfa12 0%,#0000 50%),radial-gradient(at 50% 85%,#22a06b0d 0%,#0000 50%),linear-gradient(#faf8f5 0%,#f3efe8 40%,#ede8df 100%);position:fixed;inset:0;overflow:hidden}.bg-orb{filter:blur(100px);border-radius:50%;position:absolute}.bg-orb--1{background:radial-gradient(circle,#6c5ce71a 0%,#0000 70%);width:600px;height:600px;animation:28s ease-in-out infinite alternate orbit1;top:-15%;left:-10%}.bg-orb--2{background:radial-gradient(circle,#a78bfa14 0%,#0000 70%);width:500px;height:500px;animation:32s ease-in-out infinite alternate orbit2;bottom:-10%;right:-8%}.bg-orb--3{background:radial-gradient(circle,#22a06b0f 0%,#0000 70%);width:450px;height:450px;animation:24s ease-in-out infinite alternate orbit3;top:35%;left:55%}@keyframes orbit1{0%{transform:translate(0)scale(1)}50%{transform:translate(100px,60px)scale(1.2)}to{transform:translate(40px,100px)scale(.9)}}@keyframes orbit2{0%{transform:translate(0)scale(1)}50%{transform:translate(-80px,-40px)scale(1.15)}to{transform:translate(-30px,-80px)scale(1.05)}}@keyframes orbit3{0%{transform:translate(0)scale(1)}50%{transform:translate(50px,-60px)scale(1.25)}to{transform:translate(-40px,40px)scale(.85)}}#root{flex-direction:column;flex:1;display:flex}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(40px)saturate(1.8);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--radius-xl);padding:28px;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.glass-panel:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(165deg,#ffffff80 0%,#fff3 20%,#0000 45%);position:absolute;inset:0}.glass-panel:hover{border-color:var(--glass-border-hover);box-shadow:0 12px 40px #00000014,0 4px 12px #0000000d,inset 0 1px #fff}h1,h2,h3{letter-spacing:-.03em;color:var(--text-primary);margin-bottom:16px;font-weight:700;line-height:1.2}h1{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.75rem;font-weight:800}h2{font-size:1.35rem;font-weight:700}h3{font-size:1.1rem;font-weight:600}p{color:var(--text-secondary);font-size:.9rem;line-height:1.6}.btn{background:var(--accent-gradient);color:#fff;border-radius:var(--radius-md);cursor:pointer;box-shadow:0 4px 15px var(--accent-glow);white-space:nowrap;border:none;justify-content:center;align-items:center;gap:8px;padding:11px 22px;font-family:Plus Jakarta Sans,sans-serif;font-size:14px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex;position:relative;overflow:hidden}.btn:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(#fff3 0%,#0000 50%);position:absolute;inset:0}.btn:hover:not(:disabled){box-shadow:0 8px 25px var(--accent-glow);filter:brightness(1.06);transform:translateY(-2px)}.btn:active:not(:disabled){box-shadow:0 2px 10px var(--accent-glow);transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn-danger{background:linear-gradient(135deg,#e74c6f,#d63e5f);box-shadow:0 4px 15px #e74c6f40}.btn-danger:hover:not(:disabled){box-shadow:0 8px 25px #e74c6f59}.form-group{margin-bottom:18px}.form-group label{color:var(--text-secondary);letter-spacing:.02em;text-transform:uppercase;margin-bottom:6px;font-size:13px;font-weight:600;display:block}.input{border-radius:var(--radius-sm);width:100%;color:var(--text-primary);background:#ffffffb3;border:1px solid #00000014;padding:12px 14px;font-family:Plus Jakarta Sans,sans-serif;font-size:14px;transition:all .25s}.input::placeholder{color:var(--text-muted)}.input:focus{background:#ffffffe6;border-color:#6c5ce780;outline:none;box-shadow:0 0 0 3px #6c5ce71a,0 0 20px #6c5ce70f}select.input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a5a72' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:32px}select.input option{color:var(--text-primary);background:#fff}input[type=checkbox]{appearance:none;cursor:pointer;background:#ffffffb3;border:2px solid #00000026;border-radius:5px;width:18px;height:18px;transition:all .2s;position:relative}input[type=checkbox]:checked{background:var(--accent-color);border-color:var(--accent-color)}input[type=checkbox]:checked:after{content:"✓";color:#fff;font-size:12px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.container{width:100%;max-width:1280px;margin:0 auto;padding:32px 24px}.dashboard-grid{grid-template-columns:1fr;gap:24px;display:grid}@media (width>=768px){.dashboard-grid{grid-template-columns:1fr 1.8fr}}.top-bar{border-bottom:1px solid #0000000f;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:32px;padding-bottom:24px;display:flex}.nav-bar{-webkit-backdrop-filter:blur(20px)saturate(1.4);background:#ffffff73;border:1px solid #fff9;border-radius:50px;align-items:center;gap:4px;padding:4px 6px;display:flex;box-shadow:0 2px 10px #0000000a}.nav-item{color:var(--text-secondary);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:50px;align-items:center;gap:6px;padding:8px 16px;font-family:Plus Jakarta Sans,sans-serif;font-size:13px;font-weight:600;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex}.nav-item:hover{color:var(--text-primary);background:#00000008}.nav-item--active{color:var(--accent-color);background:#ffffffb3;box-shadow:0 2px 8px #0000000f}.nav-item--active:hover{color:var(--accent-color);background:#fffc}.nav-item--signout{color:var(--danger-color)}.nav-item--signout:hover{color:var(--danger-color);background:#e74c6f14}.auth-container{z-index:1;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-box{text-align:center;width:100%;max-width:420px}.auth-box:before{content:"";border-radius:var(--radius-xl);-webkit-mask-composite:xor;pointer-events:none;background:conic-gradient(#6c5ce74d,#0000 30% 70%,#a78bfa4d);padding:1px;animation:8s linear infinite borderSpin;position:absolute;inset:-1px;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@keyframes borderSpin{to{rotate:360deg}}.auth-box form{text-align:left}.toggle-auth{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:4px 0;font-family:Plus Jakarta Sans,sans-serif;font-size:13px;transition:color .2s}.toggle-auth:hover{color:var(--text-primary)}.expense-list{flex-direction:column;gap:6px;margin-top:12px;list-style:none;display:flex}.expense-item{border-radius:var(--radius-md);background:#fff6;border:1px solid #0000;justify-content:space-between;align-items:center;padding:14px 16px;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex}.expense-item:hover{background:#ffffffa6;border-color:#0000000f;transform:translate(3px);box-shadow:0 2px 8px #0000000a}.expense-info{flex-direction:column;gap:3px;display:flex}.expense-title{color:var(--text-primary);font-size:.95rem;font-weight:600}.expense-category{color:var(--text-muted);text-transform:capitalize;font-size:.8rem}.expense-amount{font-variant-numeric:tabular-nums;font-size:1rem;font-weight:700}.stat-card{border-radius:var(--radius-md);text-align:center;-webkit-backdrop-filter:blur(20px)saturate(1.4);background:#ffffff80;border:1px solid #ffffffb3;flex-direction:column;flex:1;align-items:center;gap:6px;padding:16px 12px;transition:all .25s;display:flex;position:relative;overflow:hidden;box-shadow:0 2px 8px #00000008}.stat-card:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,#fff6 0%,#0000 30%);position:absolute;inset:0}.stat-card:hover{background:#ffffffb3;border-color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #0000000f}.stat-card .stat-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.72rem;font-weight:600}.stat-card .stat-value{letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:1.45rem;font-weight:800}.breakdown-card{border-radius:var(--radius-md);background:#ffffff59;border:1px solid #0000000a;padding:18px;transition:all .25s}.breakdown-card:hover{background:#ffffff80;border-color:#00000014;box-shadow:0 4px 12px #0000000a}.breakdown-header{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.breakdown-name{font-size:1rem;font-weight:700}.breakdown-total{font-variant-numeric:tabular-nums;color:var(--text-primary);font-size:1rem;font-weight:800}.breakdown-sub{color:var(--text-secondary);justify-content:space-between;align-items:center;padding:6px 0;font-size:13px;display:flex}.breakdown-sub-amount{font-variant-numeric:tabular-nums;color:var(--text-primary);font-weight:600}.breakdown-bar{background:#0000000f;border-radius:2px;height:4px;margin-top:10px;overflow:hidden}.breakdown-bar-fill{border-radius:2px;height:100%;transition:width .8s cubic-bezier(.4,0,.2,1)}@keyframes spin{to{transform:rotate(360deg)}}.loading-spinner{min-height:100vh;color:var(--text-secondary);justify-content:center;align-items:center;gap:12px;font-size:1.1rem;display:flex}.loading-spinner:before{content:"";border:2px solid #0000001a;border-top-color:var(--accent-color);border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@media (width<=767px){.container{padding:16px 12px}.top-bar{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:20px;padding-bottom:16px}.nav-bar{-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:14px;gap:2px;width:100%;padding:3px 4px;overflow-x:auto}.nav-bar::-webkit-scrollbar{display:none}.nav-item{gap:4px;min-width:max-content;padding:7px 10px;font-size:11px}.glass-panel{border-radius:16px;padding:16px}h1{font-size:1.2rem}h2{font-size:1.1rem}h3{font-size:.95rem}.stat-card{padding:12px 8px}.stat-card .stat-value{font-size:1.1rem}.stat-card .stat-label{font-size:.65rem}.expense-item{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px}.expense-item>div:last-child{justify-content:space-between;width:100%}.expense-amount{font-size:.95rem}.expense-title{font-size:.88rem}.expense-category{font-size:.75rem}.auth-box{border-radius:20px;max-width:100%;margin:20px 12px;padding:28px 20px}.form-group{margin-bottom:14px}.form-group label{font-size:12px}.input{padding:10px 12px;font-size:13px}.btn{padding:10px 18px;font-size:13px}.breakdown-card{padding:14px}.breakdown-name,.breakdown-total{font-size:13px}}@media (width>=768px) and (width<=1023px){.container{padding:24px 20px}.dashboard-grid{grid-template-columns:1fr 1.4fr;gap:20px}.nav-item{padding:8px 14px;font-size:12.5px}.stat-card .stat-value{font-size:1.25rem}}@media (width>=1440px){.container{max-width:1400px;padding:40px 32px}.dashboard-grid{grid-template-columns:1fr 2fr;gap:28px}.glass-panel{padding:32px}.stat-card .stat-value{font-size:1.6rem}.expense-item{padding:16px 20px}}@media (hover:none) and (pointer:coarse){.nav-item{padding:10px 14px}.btn{padding:12px 20px}.expense-item{padding:14px 16px}.input{padding:12px 14px;font-size:16px}}
