*{box-sizing:border-box;margin:0;padding:0}:root{--bg-main:#060913;--bg-gradient:linear-gradient(135deg, #060913 0%, #0d1527 100%);--glass-bg:#0f162a73;--glass-bg-hover:#1e293b99;--glass-border:#ffffff14;--glass-border-hover:#ffffff29;--glass-shadow:0 8px 32px 0 #0000005e;--color-primary:#8b5cf6;--color-primary-glow:#8b5cf64d;--color-secondary:#06b6d4;--color-secondary-glow:#06b6d44d;--color-income:#10b981;--color-income-glow:#10b98133;--color-expense:#f43f5e;--color-expense-glow:#f43f5e33;--color-warning:#f59e0b;--text-primary:#f8fafc;--text-muted:#94a3b8;--text-disabled:#64748b;--sidebar-width:280px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Outfit,Noto Sans Thai,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.5}body{background:var(--bg-main);background-image:var(--bg-gradient);color:var(--text-primary);min-height:100vh;position:relative;overflow-x:hidden}.background-orbs{z-index:-1;pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.orb{filter:blur(120px);opacity:.45;mix-blend-mode:screen;border-radius:50%;animation:25s ease-in-out infinite alternate floatOrb;position:absolute}.orb-1{background:radial-gradient(circle, var(--color-primary) 0%, #8b5cf600 70%);width:500px;height:500px;animation-duration:20s;top:-100px;right:-50px}.orb-2{background:radial-gradient(circle, var(--color-secondary) 0%, #06b6d400 70%);width:600px;height:600px;animation-duration:28s;animation-delay:-5s;bottom:-150px;left:-100px}.orb-3{background:radial-gradient(circle,#ec4899 0%,#ec489900 70%);width:400px;height:400px;animation-duration:22s;animation-delay:-10s;top:40%;left:30%}@keyframes floatOrb{0%{transform:translate(0)scale(1)}50%{transform:translate(80px,40px)scale(1.1)}to{transform:translate(-40px,-60px)scale(.9)}}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px)saturate(180%);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:20px;transition:all .3s cubic-bezier(.4,0,.2,1)}.glass-panel-hover:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-hover);transform:translateY(-2px);box-shadow:0 12px 40px #00000073}.glass-input{width:100%;color:var(--text-primary);background:#0f172a80;border:1px solid #ffffff14;border-radius:12px;outline:none;padding:12px 16px;font-family:inherit;font-size:1rem;transition:all .2s}.glass-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow);background:#0f172ab3}.glass-input::placeholder{color:var(--text-disabled)}.glass-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-position:right 16px center;background-repeat:no-repeat;background-size:16px;padding-right:40px}.glass-btn{cursor:pointer;color:var(--text-primary);background:#ffffff0d;border:1px solid #ffffff14;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-family:inherit;font-size:.95rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.glass-btn:hover{background:#ffffff1f;border-color:#fff3;transform:translateY(-1px)}.glass-btn:active{transform:translateY(1px)}.glass-btn-primary{background:linear-gradient(135deg, var(--color-primary) 0%, #7c3aed 100%);box-shadow:0 4px 15px var(--color-primary-glow);border:none}.glass-btn-primary:hover{background:linear-gradient(135deg,#9065f7 0%,#8247f0 100%);box-shadow:0 6px 20px #8b5cf68c}.glass-btn-secondary{background:linear-gradient(135deg, var(--color-secondary) 0%, #0891b2 100%);box-shadow:0 4px 15px var(--color-secondary-glow);border:none}.glass-btn-secondary:hover{background:linear-gradient(135deg,#22d3ee 0%,#0e7490 100%);box-shadow:0 6px 20px #06b6d48c}.glass-btn-danger{background:linear-gradient(135deg, var(--color-expense) 0%, #e11d48 100%);box-shadow:0 4px 15px var(--color-expense-glow);border:none}.glass-btn-danger:hover{background:linear-gradient(135deg,#fb7185 0%,#be123c 100%);box-shadow:0 6px 20px #f43f5e8c}.glass-btn-income{background:linear-gradient(135deg, var(--color-income) 0%, #059669 100%);box-shadow:0 4px 15px var(--color-income-glow);border:none}.glass-btn-income:hover{background:linear-gradient(135deg,#34d399 0%,#047857 100%);box-shadow:0 6px 20px #10b9818c}.glass-btn-icon{border-radius:50%;width:42px;height:42px;padding:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0f172a1a}::-webkit-scrollbar-thumb{background:#ffffff1a padding-box padding-box;border:2px solid #0000;border-radius:99px}::-webkit-scrollbar-thumb:hover{background:#ffffff40 padding-box padding-box;border:2px solid #0000}.gradient-text{background:linear-gradient(135deg,#fff 30%,#a5b4fc 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.gradient-text-primary{background:linear-gradient(135deg,#a78bfa 0%,#6366f1 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.gradient-text-secondary{background:linear-gradient(135deg,#22d3ee 0%,#06b6d4 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.app-container{min-height:100vh;display:flex}.main-content{flex-direction:column;flex:1;gap:30px;width:100%;max-width:1400px;margin:0 auto;padding:40px;display:flex}.metrics-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;width:100%;display:grid}.metric-card{padding:24px;position:relative;overflow:hidden}.metric-card:before{content:"";width:100%;height:4px;position:absolute;top:0;left:0}.metric-card.balance:before{background:linear-gradient(90deg, var(--color-primary), var(--color-secondary))}.metric-card.income:before{background:var(--color-income)}.metric-card.expense:before{background:var(--color-expense)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.4s cubic-bezier(.16,1,.3,1) forwards fadeIn}.toast-container{z-index:1000;flex-direction:column;gap:12px;display:flex;position:fixed;bottom:24px;right:24px}.toast{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-left:4px solid var(--color-primary);color:var(--text-primary);background:#0f172ad9;border-radius:12px;align-items:center;gap:12px;min-width:300px;padding:16px 24px;animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards slideIn;display:flex;box-shadow:0 10px 25px -5px #00000080}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:500;background:#03071299;justify-content:center;align-items:center;width:100%;height:100%;animation:.25s fadeIn;display:flex;position:fixed;top:0;left:0}.badge{text-transform:uppercase;border-radius:6px;padding:4px 8px;font-size:.75rem;font-weight:600}.badge-income{color:var(--color-income);background:#10b98126;border:1px solid #10b9814d}.badge-expense{color:var(--color-expense);background:#f43f5e26;border:1px solid #f43f5e4d}@media (width<=1024px){.app-container{flex-direction:column}.main-content{padding:24px}}