:root{--primary: #6366F1;--primary-light: #EEF2FF;--danger: #EF4444;--success: #10B981;--bg-color: #F9FAFB;--card-bg: #FFFFFF;--text-main: #1F2937;--text-sub: #6B7280;--border: #E5E7EB}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none;font-family:-apple-system,Inter,PingFang SC,sans-serif}body{background-color:#e5e7eb;display:flex;justify-content:center;height:100vh;overflow:hidden}.app-container{width:100%;max-width:480px;height:100vh;background-color:var(--bg-color);position:relative;display:flex;flex-direction:column;box-shadow:0 0 20px #0000000d}.bg-pattern{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;opacity:.4;background-image:radial-gradient(#D1D5DB 1px,transparent 1px);background-size:20px 20px}.status-bar{height:32px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;z-index:10}.main-content{flex:1;overflow-y:auto;padding-bottom:80px;scrollbar-width:none;position:relative;z-index:1}.main-content::-webkit-scrollbar{display:none}.page{padding:24px;height:100%;display:flex;flex-direction:column}.page-header{font-size:20px;font-weight:600;color:var(--text-main);margin-bottom:24px;text-align:center}.balance-card{background:var(--primary);border-radius:16px;padding:24px;color:#fff;margin-bottom:32px;box-shadow:0 10px 25px -5px #6366f14d;position:relative;overflow:hidden}.balance-card:after{content:"";position:absolute;top:-50%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);border-radius:50%}.balance-title{font-size:13px;opacity:.8;margin-bottom:8px;font-weight:500}.balance-amount{font-size:36px;font-weight:600;margin-bottom:24px;letter-spacing:-.5px}.balance-stats{display:flex;align-items:center;background:#ffffff1a;padding:12px 16px;border-radius:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.stat-item{flex:1;display:flex;flex-direction:column;gap:4px}.divider{width:1px;height:24px;background:#fff3;margin:0 16px}.stat-label{font-size:12px;display:flex;align-items:center;gap:4px;opacity:.8}.stat-val{font-size:15px;font-weight:600}.section-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}.section-title{font-size:16px;font-weight:600;color:var(--text-main)}.section-subtitle{font-size:12px;color:var(--text-sub)}.record-card{background:var(--card-bg);border-radius:12px;padding:16px;display:flex;align-items:center;margin-bottom:12px;border:1px solid var(--border);transition:all .2s ease-out;cursor:default}.record-card:hover{background:#f9fafb;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 4px 6px -1px #00000005}.rc-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-right:16px}.rc-info{flex:1}.rc-cat{font-size:15px;font-weight:500;color:var(--text-main)}.rc-note{font-size:12px;color:var(--text-sub);margin-top:4px}.rc-amount{font-size:16px;font-weight:600}.income-text{color:var(--success)}.expense-text{color:var(--text-main)}.rc-delete{background:none;border:none;color:#d1d5db;margin-left:12px;padding:6px;cursor:pointer;transition:color .2s;opacity:0}.record-card:hover .rc-delete{opacity:1}.rc-delete:hover{color:var(--danger)}.add-page{padding:0}.type-toggle{display:flex;margin:24px;background:#f3f4f6;border-radius:10px;padding:4px}.type-toggle button{flex:1;padding:8px 0;border:none;background:transparent;border-radius:8px;font-size:14px;font-weight:500;color:var(--text-sub);transition:all .2s;cursor:pointer}.type-toggle button.active{background:#fff;color:var(--text-main);box-shadow:0 1px 3px #0000000d}.amount-display{padding:0 24px 24px;display:flex;align-items:baseline;border-bottom:1px solid var(--border)}.currency{font-size:24px;font-weight:600;margin-right:8px;color:var(--text-main)}.amount-val{font-size:44px;font-weight:600;color:var(--text-main);letter-spacing:-1px}.cursor-blink{font-size:36px;font-weight:300;color:var(--primary);animation:blink 1s step-end infinite;margin-left:4px}@keyframes blink{50%{opacity:0}}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 12px;padding:24px;flex:1;overflow-y:auto}.cat-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform .1s}.cat-item:active{transform:scale(.95)}.cat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.cat-item span{font-size:12px;color:var(--text-sub);transition:color .2s}.cat-item.selected span{color:var(--text-main);font-weight:500}.input-group{padding:0 24px 16px;display:flex;flex-direction:column;gap:12px}.input-row{display:flex;align-items:center;background:#fff;padding:12px 16px;border-radius:10px;border:1px solid var(--border);gap:12px;transition:border-color .2s}.input-row:focus-within{border-color:var(--primary)}.input-row input{border:none;outline:none;flex:1;font-size:14px;background:transparent;color:var(--text-main)}.keyboard{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 24px 24px;background:#fff;border-top:1px solid var(--border)}.keyboard-hint{grid-column:span 4;text-align:center;font-size:11px;color:#9ca3af;margin-bottom:8px}.keyboard-hint span{background:#f3f4f6;padding:2px 6px;border-radius:4px;color:#6b7280;font-weight:500}.key-btn{background:var(--bg-color);border:1px solid var(--border);border-radius:10px;height:54px;font-size:20px;font-weight:500;color:var(--text-main);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .1s}.key-btn:active{background:#e5e7eb}.ok-btn{grid-column:span 2;background:var(--primary);color:#fff;border:none}.ok-btn:active{background:#4f46e5}.date-group{margin-bottom:24px}.date-header{font-size:12px;font-weight:500;color:var(--text-sub);margin-bottom:12px;padding-left:4px}.chart-container{display:flex;justify-content:center;margin:24px 0 40px}.chart-legend{background:#fff;border-radius:12px;padding:16px;border:1px solid var(--border)}.legend-item{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid var(--bg-color)}.legend-item:last-child{border-bottom:none}.legend-color{width:10px;height:10px;border-radius:50%;margin-right:12px}.legend-name{flex:1;font-size:14px;color:var(--text-main)}.legend-percent{font-size:13px;color:var(--text-sub);margin-right:16px;width:40px;text-align:right}.legend-amount{font-size:14px;font-weight:500;color:var(--text-main)}.bottom-nav{position:absolute;bottom:0;width:100%;height:72px;background:#ffffffd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:center;padding-bottom:env(safe-area-inset-bottom);z-index:10}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:#9ca3af;cursor:pointer;width:60px;transition:color .2s;position:relative}.nav-item.active{color:var(--primary)}.nav-item span{font-size:10px;font-weight:500}.nav-shortcut{position:absolute;top:-4px;right:8px;font-size:8px;background:#f3f4f6;padding:1px 4px;border-radius:4px;color:#9ca3af}.nav-add-btn-wrapper{position:relative;top:-24px}@keyframes pulse-glow{0%{box-shadow:0 0 #6366f14d}70%{box-shadow:0 0 0 12px #6366f100}to{box-shadow:0 0 #6366f100}}.nav-add-btn{width:56px;height:56px;border-radius:50%;background:var(--primary);border:4px solid var(--bg-color);display:flex;align-items:center;justify-content:center;cursor:pointer;animation:pulse-glow 2.5s infinite;transition:transform .2s}.nav-add-btn:active{transform:scale(.9)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state p{margin-top:16px;font-size:13px;color:var(--text-sub);line-height:1.6}.empty-state strong{background:#e5e7eb;padding:2px 6px;border-radius:4px;color:var(--text-main)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-sub);gap:12px;font-size:14px}