:root{--bg-main: #0b0f19;--bg-card: rgba(21, 30, 48, .75);--bg-card-hover: rgba(30, 42, 68, .85);--bg-modal: #111827;--border-color: rgba(255, 255, 255, .08);--border-glow: rgba(99, 102, 241, .3);--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--accent-primary: #6366f1;--accent-primary-hover: #4f46e5;--accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);--success: #10b981;--success-bg: rgba(16, 185, 129, .15);--warning: #f59e0b;--warning-bg: rgba(245, 158, 11, .15);--danger: #ef4444;--danger-bg: rgba(239, 68, 68, .15);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 8px 24px rgba(0, 0, 0, .4);--shadow-glow: 0 0 20px rgba(99, 102, 241, .25);--font-sans: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif}[data-theme=light]{--bg-main: #f1f5f9;--bg-card: rgba(255, 255, 255, .85);--bg-card-hover: rgba(255, 255, 255, .95);--bg-modal: #ffffff;--border-color: rgba(0, 0, 0, .08);--border-glow: rgba(99, 102, 241, .2);--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .05);--shadow-md: 0 8px 24px rgba(15, 23, 42, .08)}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-sans);-webkit-tap-highlight-color:transparent}body{background-color:var(--bg-main);color:var(--text-primary);min-height:100vh;overflow-x:hidden;line-height:1.5;background-image:radial-gradient(circle at 15% 15%,rgba(99,102,241,.08) 0%,transparent 40%),radial-gradient(circle at 85% 85%,rgba(236,72,153,.06) 0%,transparent 40%);background-attachment:fixed}.app-container{max-width:640px;margin:0 auto;min-height:100vh;padding-bottom:90px;position:relative}.top-nav{position:sticky;top:0;z-index:100;background:var(--bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-color);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;overflow:visible}.brand{display:flex;align-items:center;gap:10px}.brand-icon{width:36px;height:36px;border-radius:var(--radius-md);background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-glow)}.brand-title{font-size:1.15rem;font-weight:800;background:linear-gradient(135deg,#fff,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}[data-theme=light] .brand-title{background:linear-gradient(135deg,#0f172a,#334155);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.user-selector-btn{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#ffffff0d;border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-primary);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease}.user-selector-btn:hover{border-color:var(--accent-primary);background:#6366f11a}.card{background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:16px;margin:12px 16px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}.card-title{font-size:.95rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}.balance-hero{background:linear-gradient(135deg,#6366f133,#8b5cf61a),var(--bg-card);border:1px solid var(--border-glow);position:relative;overflow:hidden}.balance-hero:after{content:"";position:absolute;top:-30%;right:-20%;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.25) 0%,transparent 70%);pointer-events:none}.total-balance-display{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}.balance-label{font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px}.balance-amount{font-size:2.2rem;font-weight:800;color:var(--text-primary);letter-spacing:-.5px}.balance-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.balance-subbox{background:#0003;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:10px 12px}[data-theme=light] .balance-subbox{background:#fff9}.subbox-title{font-size:.75rem;color:var(--text-muted);font-weight:600;margin-bottom:2px}.subbox-val{font-size:1.1rem;font-weight:700}.subbox-val.positive{color:var(--success)}.subbox-val.negative{color:var(--warning)}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:640px;background:var(--bg-modal);border-top:1px solid var(--border-color);display:flex;justify-content:space-around;padding:8px 12px 14px;z-index:50;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;color:var(--text-muted);font-size:.72rem;font-weight:600;cursor:pointer;transition:all .2s ease;position:relative}.nav-item.active{color:var(--accent-primary)}.nav-item.active svg{transform:translateY(-2px);filter:drop-shadow(0 4px 10px rgba(99,102,241,.4))}.badge{position:absolute;top:-4px;right:6px;background:var(--danger);color:#fff;font-size:.65rem;font-weight:800;padding:2px 6px;border-radius:var(--radius-full)}.fab-add-btn{position:fixed;bottom:72px;right:max(16px,calc((100vw - 640px)/2 + 16px));width:56px;height:56px;border-radius:var(--radius-full);background:var(--accent-gradient);color:#fff;border:none;box-shadow:0 8px 24px #6366f180;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:45;transition:transform .2s ease,box-shadow .2s ease}.fab-add-btn:hover{transform:scale(1.08);box-shadow:0 12px 28px #6366f199}.expense-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background:#ffffff05;border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:8px;transition:background .2s ease}.expense-item:hover{background:#ffffff0d}.category-icon-box{width:42px;height:42px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-right:12px;flex-shrink:0}.status-chip{font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:var(--radius-full);text-transform:uppercase}.status-chip.pending{background:var(--warning-bg);color:var(--warning)}.status-chip.settled{background:var(--success-bg);color:var(--success)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:var(--radius-md);font-weight:600;font-size:.9rem;cursor:pointer;border:none;transition:all .2s ease}.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:0 4px 14px #6366f159}.btn-primary:hover{opacity:.92;transform:translateY(-1px)}.btn-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 14px #10b98159}.btn-secondary{background:#ffffff14;color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:#ffffff26}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease}@media(min-width:640px){.modal-overlay{align-items:center;padding:20px}}.modal-content{background:var(--bg-modal);border:1px solid var(--border-color);width:100%;max-width:520px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:20px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-md);animation:slideUp .3s cubic-bezier(.16,1,.3,1)}@media(min-width:640px){.modal-content{border-radius:var(--radius-lg)}}.form-group{margin-bottom:14px}.form-label{display:block;font-size:.82rem;font-weight:700;color:var(--text-secondary);margin-bottom:6px}.form-input,.form-select{width:100%;padding:12px;background:var(--bg-modal);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:.95rem;outline:none;transition:border-color .2s ease}.form-select option{background-color:#1e293b;color:#f8fafc;padding:10px}[data-theme=light] .form-select option{background-color:#fff;color:#0f172a}.form-input:focus,.form-select:focus{border-color:var(--accent-primary);background:#6366f10d}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}