@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+Thai:wght@300;400;500;600;700;800&display=swap";:root{--bg:#f8fafc;--surface:#fff;--surface-glass:#ffffffbf;--text:#0f172a;--text-light:#475569;--muted:#64748b;--line:#e2e8f0;--primary:#4f46e5;--primary-glow:#4f46e526;--primary-dark:#4338ca;--success:#10b981;--success-glow:#10b98126;--danger:#f43f5e;--danger-glow:#f43f5e26;--warning:#f59e0b;--warning-glow:#f59e0b26;--radius:24px;--radius-sm:16px;--shadow:0 4px 20px -2px #94a3b81f, 0 2px 8px -1px #94a3b814;--shadow-lg:0 20px 40px -4px #94a3b838, 0 8px 16px -2px #94a3b81f;--transition:all .3s cubic-bezier(.4, 0, .2, 1);--nav-height:76px;--sidebar-width:280px}[data-theme=calm-blue]{--bg:#f0f6ff;--primary:#2563eb;--primary-glow:#2563eb26;--primary-dark:#1d4ed8}[data-theme=fresh-green]{--bg:#f0f9f4;--primary:#10b981;--primary-glow:#10b98126;--primary-dark:#059669}[data-theme=warm-orange]{--bg:#fffbf7;--primary:#f97316;--primary-glow:#f9731626;--primary-dark:#ea580c}[data-theme=dark-mode]{--bg:#090d16;--surface:#131926;--surface-glass:#131926cc;--text:#f8fafc;--text-light:#cbd5e1;--muted:#64748b;--line:#1e293b;--primary:#6366f1;--primary-glow:#6366f140;--primary-dark:#4f46e5;--shadow:0 4px 20px #00000040;--shadow-lg:0 20px 40px #00000059;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;background-image:radial-gradient(at 0 0,#6366f10d 0,#0000 50%),radial-gradient(at 100% 100%,#a855f70d 0,#0000 50%);min-height:100vh;font-family:Outfit,Noto Sans Thai,system-ui,-apple-system,sans-serif;transition:background-color .3s}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}.grid-cols-12{grid-template-columns:repeat(12,1fr);gap:24px;display:grid}.content-area{max-width:540px;min-height:100vh;margin:0 auto;padding:24px 20px 110px}.card{background-color:var(--surface);border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);transition:var(--transition);padding:24px;position:relative}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);border:none;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-family:inherit;font-size:14px;font-weight:700;display:inline-flex}.btn-primary{background-color:var(--primary);color:#fff;box-shadow:0 4px 14px var(--primary-glow)}.btn-primary:hover:not(:disabled){background-color:var(--primary-dark);box-shadow:0 6px 20px var(--primary-glow);transform:translateY(-2px)}.btn-secondary{background-color:var(--bg);border:1px solid var(--line);color:var(--text-light)}.btn-secondary:hover:not(:disabled){border-color:var(--muted);background-color:var(--line)}.btn-danger{background-color:var(--danger);color:#fff;box-shadow:0 4px 14px var(--danger-glow)}.btn-danger:hover:not(:disabled){background-color:#e11d48;transform:translateY(-2px)}.btn:disabled{opacity:.6;cursor:not-allowed}.form-group{flex-direction:column;gap:8px;margin-bottom:20px;display:flex}.form-label{color:var(--text-light);font-size:13px;font-weight:700}.form-control{border-radius:var(--radius-sm);border:1px solid var(--line);background-color:var(--surface);color:var(--text);transition:var(--transition);outline:none;padding:14px 18px;font-family:inherit;font-size:14px;font-weight:600}.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow)}dialog{border:1px solid var(--line);border-radius:var(--radius);background-color:var(--surface-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);width:90%;max-width:480px;box-shadow:var(--shadow-lg);outline:none;margin:auto;padding:28px}dialog::backdrop{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a66}.welcome-section{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.welcome-label{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:14px;font-weight:700}.welcome-date{color:var(--text);letter-spacing:-.02em;font-size:24px;font-weight:800}.profile-avatar-btn{color:#fff;background:#00bcd4;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:18px;font-weight:800;display:flex;box-shadow:0 4px 14px #00bcd466}.balance-gradient-card{color:#fff;border-radius:var(--radius);background:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);margin-bottom:24px;padding:30px 24px;position:relative;overflow:hidden;box-shadow:0 16px 36px #6366f140}.balance-gradient-card:before{content:"";background:radial-gradient(circle,#ffffff26 0%,#0000 70%);border-radius:50%;width:140px;height:140px;position:absolute;top:-40px;left:-40px}.balance-lbl{opacity:.9;letter-spacing:.02em;font-size:13px;font-weight:600}.balance-val-row{flex-direction:column;margin-top:10px;display:flex}.balance-big-amount{letter-spacing:-.03em;font-size:42px;font-weight:800;line-height:1}.balance-unit{opacity:.95;margin-top:6px;font-size:14px;font-weight:700}.balance-days-badge{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff29;border:1px solid #ffffff1f;border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700;position:absolute;top:24px;right:24px}.twin-cards-row{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;display:grid}.twin-card{background-color:var(--surface);border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);transition:var(--transition);flex-direction:column;gap:6px;padding:20px;display:flex;position:relative;overflow:hidden}.twin-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.twin-card:after{content:"";opacity:.06;border-radius:50%;width:76px;height:76px;position:absolute;top:-24px;right:-24px}.twin-card.income-card:after{background-color:var(--success)}.twin-card.expense-card:after{background-color:var(--danger)}.twin-card-icon{border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.income-card .twin-card-icon{color:var(--success);background-color:#10b98114}.expense-card .twin-card-icon{color:var(--danger);background-color:#f43f5e14}.twin-card-lbl{color:var(--muted);margin-top:4px;font-size:13px;font-weight:700}.twin-card-val{color:var(--text);letter-spacing:-.02em;font-size:24px;font-weight:800}.quick-amount-box{background-color:var(--bg);border-radius:var(--radius-sm);border:1px solid var(--line);align-items:center;gap:10px;margin-bottom:18px;padding:16px 20px;display:flex}.quick-currency-label{color:var(--muted);font-size:18px;font-weight:800}.quick-input-field{color:var(--text);background:0 0;border:none;outline:none;width:100%;padding:0;font-size:26px;font-weight:800}.quick-categories-row{grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;display:grid}.quick-category-box{border:1px solid var(--line);border-radius:var(--radius-sm);transition:var(--transition);background-color:var(--surface);flex-direction:column;align-items:center;gap:8px;padding:14px 6px;display:flex}.quick-category-box.active{border-color:var(--primary);background-color:var(--primary-glow)}.quick-cat-circle{width:40px;height:40px;transition:var(--transition);border-radius:50%;justify-content:center;align-items:center;display:flex}.quick-category-box .cat-label{color:var(--text);font-size:12px;font-weight:700}.btn-quick-submit{color:#fff;border-radius:var(--radius-sm);cursor:pointer;width:100%;transition:var(--transition);background-color:#4b58e7;border:none;padding:16px;font-size:15px;font-weight:800;box-shadow:0 4px 14px #4b58e740}.btn-quick-submit:hover{background-color:var(--primary-dark);transform:translateY(-2px)}.floating-bottom-nav{max-width:500px;height:var(--nav-height);background-color:var(--surface-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1000;border:1px solid #fff3;border-radius:28px;justify-content:space-around;align-items:center;margin:0 auto;padding:0 10px;display:flex;position:fixed;bottom:20px;left:20px;right:20px;box-shadow:0 16px 32px #00000014}.nav-item-btn{color:var(--muted);cursor:pointer;height:100%;transition:var(--transition);background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;text-decoration:none;display:flex}.nav-item-btn.active{color:var(--primary)}.nav-icon-capsule{width:56px;height:34px;transition:var(--transition);border-radius:18px;justify-content:center;align-items:center;display:flex}.nav-item-btn.active .nav-icon-capsule{background-color:var(--primary-glow);color:var(--primary)}.nav-item-label{font-size:11px;font-weight:700}.wallets-premium-grid{grid-template-columns:1fr;gap:20px;display:grid}.premium-wallet-card{color:#fff;height:180px;transition:var(--transition);background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);border:1px solid #ffffff0f;border-radius:24px;flex-direction:column;justify-content:space-between;padding:24px;display:flex;position:relative;overflow:hidden;box-shadow:0 12px 28px #00000026}.premium-wallet-card:hover{transform:translateY(-6px)rotate(-1deg);box-shadow:0 20px 40px #00000040}.premium-wallet-card:before{content:"";pointer-events:none;background:radial-gradient(circle,#ffffff14 0%,#0000 70%);border-radius:50%;width:220px;height:220px;position:absolute;top:-80px;right:-80px}.premium-wallet-card.bank-gradient{background:linear-gradient(135deg,#0284c7 0%,#0369a1 100%)}.premium-wallet-card.card-gradient{background:linear-gradient(135deg,#7c3aed 0%,#5b21b6 100%)}.premium-wallet-card.cash-gradient{background:linear-gradient(135deg,#0d9488 0%,#115e59 100%)}.wallet-card-header{justify-content:space-between;align-items:center;display:flex}.wallet-card-type-lbl{letter-spacing:.1em;text-transform:uppercase;background:#ffffff26;border-radius:12px;padding:3px 8px;font-size:11px;font-weight:700}.wallet-card-chip{background:linear-gradient(135deg,#eab308 0%,#ca8a04 100%);border-radius:6px;width:38px;height:28px;position:relative;box-shadow:inset 0 1px #fff3}.wallet-card-balance-box{margin-top:10px}.wallet-card-balance-lbl{opacity:.75;font-size:11px;font-weight:600}.wallet-card-balance-val{letter-spacing:-.01em;font-size:28px;font-weight:800}.wallet-card-footer{justify-content:space-between;align-items:flex-end;display:flex}.wallet-card-name{letter-spacing:.02em;font-size:15px;font-weight:700}.wallet-card-issuer{opacity:.8;font-size:14px;font-style:italic;font-weight:800}.transaction-premium-list{flex-direction:column;gap:12px;display:flex}.transaction-premium-item{background-color:var(--surface);border-radius:var(--radius-sm);border:1px solid var(--line);box-shadow:var(--shadow);transition:var(--transition);cursor:pointer;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.transaction-premium-item:hover{border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translate(4px)}.tx-item-left{align-items:center;gap:14px;display:flex}.tx-item-icon-box{border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.tx-item-title{color:var(--text);font-size:14px;font-weight:700}.tx-item-subtitle{color:var(--muted);margin-top:2px;font-size:12px}.tx-item-right{text-align:right}.tx-item-amount{font-size:16px;font-weight:800}.tx-item-amount.income{color:var(--success)}.tx-item-amount.expense{color:var(--danger)}.tx-item-amount.transfer{color:var(--muted)}.budget-premium-progress-card{background-color:var(--surface);border-radius:var(--radius-sm);border:1px solid var(--line);flex-direction:column;gap:10px;padding:20px;display:flex}.budget-progress-header{justify-content:space-between;align-items:center;display:flex}.budget-progress-cat-name{color:var(--text);align-items:center;gap:8px;font-size:14px;font-weight:700;display:flex}.budget-progress-amounts{color:var(--muted);font-size:12px;font-weight:600}.budget-progress-bar-tube{background-color:var(--bg);border:1px solid var(--line);border-radius:5px;height:10px;position:relative;overflow:hidden}.budget-progress-bar-fill{background:linear-gradient(90deg, var(--primary) 0%, #8b5cf6 100%);border-radius:5px;height:100%;transition:width .5s ease-out}.budget-progress-bar-fill.warning{background:linear-gradient(90deg, var(--warning) 0%, #f59e0b 100%)}.budget-progress-bar-fill.danger{background:linear-gradient(90deg, var(--danger) 0%, #f43f5e 100%)}.budget-progress-percentage-lbl{color:var(--text-light);align-self:flex-end;font-size:11px;font-weight:700}.chart-card-wrapper{background-color:var(--surface);border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);flex-direction:column;justify-content:center;align-items:center;padding:24px;display:flex}.auth-bg-wrapper{background-color:#0b0f19;background-image:radial-gradient(circle at 10% 20%,#6366f126 0%,#0000 40%),radial-gradient(circle at 90% 80%,#f43f5e26 0%,#0000 40%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex;position:relative;overflow:hidden}.auth-glass-card{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:var(--radius);color:#fff;background:#131926b3;border:1px solid #ffffff14;width:100%;max-width:400px;padding:36px 30px;box-shadow:0 20px 50px #0006}.auth-glass-card .form-label{color:#94a3b8}.auth-glass-card .form-control{color:#fff;background-color:#ffffff08;border-color:#ffffff1a}.auth-glass-card .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 4px #6366f140}.sidebar{width:var(--sidebar-width);background-color:var(--surface);border-right:1px solid var(--line);z-index:100;flex-direction:column;justify-content:space-between;padding:32px 24px;display:flex;position:fixed;top:0;bottom:0;left:0}.sidebar-brand{align-items:center;gap:8px;margin-bottom:36px;display:flex}.sidebar-brand h2{letter-spacing:-.03em;color:var(--primary);font-size:22px;font-weight:800}.brand-dot{background-color:var(--danger);border-radius:50%;width:6px;height:6px}.sidebar-menu{flex-direction:column;flex:1;gap:8px;list-style:none;display:flex}.sidebar-menu-btn{border-radius:var(--radius-sm);color:var(--muted);text-align:left;cursor:pointer;width:100%;transition:var(--transition);background:0 0;border:none;align-items:center;gap:12px;padding:12px 18px;font-size:14px;font-weight:700;display:flex}.sidebar-menu-btn:hover{background-color:var(--bg);color:var(--text)}.sidebar-menu-btn.active{background-color:var(--primary);color:#fff}.sidebar-profile{border-top:1px solid var(--line);align-items:center;gap:12px;margin-top:24px;padding-top:24px;display:flex}.profile-avatar{background-color:var(--primary-glow);width:40px;height:40px;color:var(--primary);border-radius:50%;justify-content:center;align-items:center;font-weight:700;display:flex}.profile-info{flex:1}.profile-name{color:var(--text);font-size:14px;font-weight:700}.profile-role{color:var(--muted);font-size:11px;font-weight:600}.badge{border-radius:12px;padding:4px 10px;font-size:11px;font-weight:700}.badge-success{color:var(--success);background-color:#10b98114}.badge-danger{color:var(--danger);background-color:#f43f5e14}.badge-warning{color:var(--warning);background-color:#f59e0b14}.toast-container{z-index:9999;flex-direction:column;gap:10px;width:90%;max-width:360px;display:flex;position:fixed;top:24px;left:50%;transform:translate(-50%)}.toast{background-color:var(--surface-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text);border-radius:var(--radius-sm);border:1px solid var(--line);border-left:4px solid var(--primary);box-shadow:var(--shadow-lg);padding:14px 20px;font-size:13px;font-weight:700;animation:.3s cubic-bezier(.4,0,.2,1) forwards slideDown}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media (width>=769px){.floating-bottom-nav{display:none}.content-area{margin-left:var(--sidebar-width);max-width:calc(100% - var(--sidebar-width) - 40px);padding:40px}}@media (width<=768px){.sidebar{display:none!important}}