:root{--bg-color: #fdfbf7;--card-bg: #ffffff;--text-main: #333333;--text-sub: #888888;--primary: #6366F1;--expense: #FF9A9E;--income: #84FAB0;--shadow: 0 8px 24px rgba(0,0,0,.06)}*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{background-color:#e5e7eb;display:flex;justify-content:center;align-items:center;min-height:100vh}.app-container{width:100%;max-width:400px;height:100vh;max-height:850px;background-color:var(--bg-color);position:relative;overflow:hidden;box-shadow:0 20px 40px #0000001a;border-radius:0}@media (min-width: 450px){.app-container{border-radius:30px;height:90vh}}.page{width:100%;height:100%;display:flex;flex-direction:column;position:absolute;top:0;left:0;background:var(--bg-color)}.app-header{padding:20px;display:flex;justify-content:space-between;align-items:center}.app-header h1{font-size:20px;color:var(--text-main);font-weight:700}.cloud-badge{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--primary);background:#eef2ff;padding:4px 10px;border-radius:20px;font-weight:500}.spin{animation:spin 2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-btn{background:none;border:none;color:var(--text-main);cursor:pointer}.overview-card{margin:0 20px 20px;padding:24px;border-radius:24px;color:#fff;background:linear-gradient(135deg,#a18cd1,#fbc2eb);box-shadow:0 12px 24px #a18cd14d}.balance-section{display:flex;flex-direction:column;margin-bottom:20px}.balance-section .label{font-size:14px;opacity:.9;margin-bottom:4px}.balance-section .amount{font-size:36px;font-weight:800;letter-spacing:-1px}.stats-row{display:flex;justify-content:space-between;align-items:center;background:#fff3;padding:12px 16px;border-radius:16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.stat-item{display:flex;flex-direction:column}.stat-item .label{font-size:12px;opacity:.9}.stat-item .val{font-size:16px;font-weight:600}.divider{width:1px;height:24px;background:#fff6}.records-list{flex:1;overflow-y:auto;padding:0 20px 100px}.list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.list-header h3{font-size:16px;color:var(--text-main)}.clear-btn{background:none;border:none;color:var(--text-sub);font-size:13px;cursor:pointer}.date-group{margin-bottom:20px}.date-header{font-size:12px;color:var(--text-sub);margin-bottom:10px;font-weight:600}.record-item{display:flex;align-items:center;background:var(--card-bg);padding:16px;border-radius:20px;margin-bottom:12px;box-shadow:var(--shadow);position:relative;overflow:hidden}.record-icon{width:44px;height:44px;border-radius:14px;display:flex;justify-content:center;align-items:center;margin-right:16px}.record-icon svg{width:24px;height:24px}.record-info{flex:1;display:flex;flex-direction:column}.record-cat{font-size:16px;font-weight:600;color:var(--text-main)}.record-note{font-size:12px;color:var(--text-sub);margin-top:4px}.record-amount{font-size:18px;font-weight:700}.record-amount.income{color:#10b981}.record-amount.expense{color:var(--text-main)}.del-btn{position:absolute;right:-50px;top:0;height:100%;width:50px;background:#ff4d4f;color:#fff;border:none;display:flex;justify-content:center;align-items:center;transition:right .3s ease;cursor:pointer}.record-item:hover .del-btn{right:0}.empty-state{text-align:center;padding:40px 0;color:var(--text-sub)}.empty-icon{font-size:48px;margin-bottom:16px;opacity:.5}.bottom-nav{position:absolute;bottom:0;left:0;width:100%;height:80px;background:#fffc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(0,0,0,.05);display:flex;justify-content:space-around;align-items:center;padding-bottom:10px}.nav-item{background:none;border:none;display:flex;flex-direction:column;align-items:center;color:var(--text-sub);cursor:pointer;gap:4px}.nav-item.active{color:var(--primary)}.nav-item span{font-size:11px;font-weight:600}.fab-btn{width:56px;height:56px;border-radius:28px;background:var(--primary);color:#fff;border:none;display:flex;justify-content:center;align-items:center;box-shadow:0 8px 20px #6366f166;transform:translateY(-20px);cursor:pointer}.rec-header{padding:20px;display:flex;justify-content:space-between;align-items:center}.type-toggle{display:flex;background:#eee;border-radius:20px;padding:4px}.type-toggle button{padding:8px 24px;border:none;background:none;border-radius:16px;font-size:15px;font-weight:600;color:var(--text-sub);cursor:pointer;transition:all .2s}.type-toggle button.active{background:#fff;color:var(--text-main);box-shadow:0 2px 8px #0000001a}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:20px}.cat-btn{background:none;border:none;display:flex;flex-direction:column;align-items:center;cursor:pointer;gap:8px}.cat-icon{width:50px;height:50px;border-radius:20px;display:flex;justify-content:center;align-items:center;transition:all .2s}.cat-icon svg{width:26px;height:26px}.cat-btn span{font-size:12px;color:var(--text-sub);font-weight:500}.cat-btn.selected span{color:var(--text-main);font-weight:700}.cat-btn.selected .cat-icon{transform:scale(1.1);box-shadow:0 8px 16px #0000001a}.input-area{padding:20px;flex:1;display:flex;flex-direction:column;justify-content:flex-end}.amount-display{display:flex;align-items:baseline;border-bottom:2px solid #eee;padding-bottom:8px;margin-bottom:16px}.currency{font-size:24px;font-weight:600;margin-right:8px}.value{font-size:48px;font-weight:800}.note-input{width:100%;border:none;background:#f5f5f5;padding:16px;border-radius:16px;font-size:15px;outline:none}.keypad{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,60px);gap:8px;padding:20px;background:var(--card-bg);border-top-left-radius:30px;border-top-right-radius:30px;box-shadow:0 -10px 30px #0000000d}.key{background:#f8f9fa;border:none;border-radius:16px;font-size:24px;font-weight:600;color:var(--text-main);cursor:pointer;display:flex;justify-content:center;align-items:center}.key:active{background:#e9ecef}.key.action{font-size:20px}.key.clear{grid-column:4;grid-row:1 / 3;background:#ffe3e3;color:#fa5252}.key.submit{grid-column:4;grid-row:3 / 5;background:var(--primary);color:#fff}.stats-content{padding:0 20px;overflow-y:auto;height:calc(100% - 80px)}.chart-card{background:var(--card-bg);border-radius:24px;padding:20px;margin-bottom:20px;box-shadow:var(--shadow)}.chart-card h3{font-size:16px;margin-bottom:20px;color:var(--text-main)}.pie-chart-container{display:flex;align-items:center;gap:20px}.pie-svg{width:120px;height:120px;flex-shrink:0}.pie-legend{flex:1;display:flex;flex-direction:column;gap:10px}.legend-item{display:flex;align-items:center;font-size:13px}.legend-item .dot{width:10px;height:10px;border-radius:5px;margin-right:8px}.legend-item .name{flex:1;color:var(--text-sub)}.legend-item .percent{font-weight:600;color:var(--text-main)}.empty-text{color:var(--text-sub);font-size:14px;text-align:center;padding:20px 0}.bar-chart-container{position:relative}.bar-svg{width:100%;height:auto}.bar-legend{display:flex;justify-content:center;gap:16px;margin-top:10px}.leg{display:flex;align-items:center;font-size:12px;color:var(--text-sub)}.leg .dot{width:8px;height:8px;border-radius:4px;margin-right:6px}