*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:#f5f6f8;color:#222;}
.app{max-width:480px;margin:0 auto;min-height:100vh;background:#f5f6f8;display:flex;flex-direction:column;}
.topbar{display:flex;align-items:center;padding:14px 16px;background:#2f6fed;color:#fff;}
.topbar .title{font-size:18px;font-weight:700;flex:1;}
.icon-btn{background:rgba(255,255,255,.2);border:none;color:#fff;width:34px;height:34px;border-radius:8px;margin-left:8px;font-size:14px;}
.summary{padding:18px 16px;background:#fff;margin:10px;border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.04);}
.balance .label{font-size:13px;color:#888;}
.balance .value{font-size:30px;font-weight:800;margin-top:4px;}
.summary .row{display:flex;margin-top:12px;}
.cell{flex:1;display:flex;flex-direction:column;}
.cell span{font-size:12px;color:#999;}
.cell b{font-size:16px;margin-top:2px;}
.cell.income b{color:#27ae60;}
.cell.expense b{color:#eb5757;}
.tabs{display:flex;background:#fff;margin:0 10px;border-radius:12px;overflow:hidden;}
.tab{flex:1;border:none;background:#fff;padding:12px 0;font-size:15px;color:#666;}
.tab.active{background:#2f6fed;color:#fff;font-weight:600;}
main{flex:1;padding:10px;}
.panel{display:none;}
.panel.active{display:block;}
.type-toggle{display:flex;background:#eee;border-radius:10px;padding:4px;margin-bottom:14px;}
.tt{flex:1;border:none;background:transparent;padding:10px;border-radius:8px;font-size:15px;color:#555;}
.tt.active{background:#fff;color:#2f6fed;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.08);}
form label{display:block;font-size:13px;color:#666;margin-bottom:12px;}
form input,form select{width:100%;margin-top:6px;padding:12px;border:1px solid #ddd;border-radius:10px;font-size:16px;background:#fff;}
.primary{width:100%;padding:14px;border:none;border-radius:12px;background:#2f6fed;color:#fff;font-size:16px;font-weight:700;margin-top:4px;}
.month-pick{margin-bottom:10px;}
.month-pick input{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px;font-size:15px;background:#fff;}
.tx-list{list-style:none;margin:0;padding:0;}
.date-head{padding:10px 4px 6px;font-size:13px;color:#999;font-weight:600;}
.tx{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:12px;padding:12px 14px;margin-bottom:8px;}
.tx-main{display:flex;flex-direction:column;}
.tx-cat{font-size:15px;font-weight:600;}
.tx-note{font-size:12px;color:#aaa;margin-top:2px;}
.tx-right{display:flex;align-items:center;gap:10px;}
.tx-amt{font-size:16px;font-weight:700;}
.tx-amt.inc{color:#27ae60;}
.tx-amt.exp{color:#eb5757;}
.del{border:none;background:#fbe9e9;color:#eb5757;width:28px;height:28px;border-radius:50%;font-size:16px;line-height:1;}
.empty{text-align:center;color:#aaa;padding:30px 0;font-size:14px;}
#pie{display:block;margin:0 auto 12px;}
.cat-list{list-style:none;margin:0;padding:0;}
.cat-list li{display:flex;align-items:center;background:#fff;border-radius:10px;padding:10px 12px;margin-bottom:6px;font-size:14px;}
.dot{width:10px;height:10px;border-radius:50%;margin-right:8px;}
.cname{flex:1;}
.cval{font-weight:600;margin-right:10px;}
.cpct{color:#999;width:48px;text-align:right;}
#toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);background:rgba(0,0,0,.8);color:#fff;padding:10px 18px;border-radius:20px;font-size:14px;opacity:0;transition:.2s;pointer-events:none;z-index:99;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}