:root{
  --primary:#4F8CFF;
  --primary-dark:#3a6fd6;
  --bg:#f5f6fa;
  --card:#ffffff;
  --text:#1c1f26;
  --text-sub:#8a90a2;
  --line:#eceef3;
  --expense:#ff5a5f;
  --income:#22b07d;
  --shadow:0 4px 20px rgba(30,40,70,.08);
  --safe:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);
  font-size:15px;line-height:1.5;
  min-height:100vh;
  padding-bottom:calc(64px + var(--safe));
}
button,input{font-family:inherit;font-size:inherit;color:inherit;border:none;background:none;outline:none}
button{cursor:pointer}
ul{list-style:none;margin:0;padding:0}

#app{display:flex;flex-direction:column;min-height:100vh;max-width:520px;margin:0 auto;position:relative}

/* 顶部栏 */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;padding-top:calc(12px + env(safe-area-inset-top));background:var(--primary);color:#fff;
  box-shadow:0 2px 10px rgba(79,140,255,.25)}
.topbar-title{font-size:18px;font-weight:700;letter-spacing:.5px}
.topbar-btn{font-size:18px;width:34px;height:34px;border-radius:10px;color:#fff}
.topbar-btn:active{background:rgba(255,255,255,.18)}

/* 页面 */
#pages{flex:1;padding:16px 16px 8px}
.page{display:none;animation:fade .28s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 卡片 */
.card{background:var(--card);border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.balance-card{background:linear-gradient(135deg,#4F8CFF,#6aa8ff);color:#fff;padding:20px 18px}
.balance-label{font-size:13px;opacity:.9}
.balance-amount{font-size:34px;font-weight:800;margin:4px 0 14px;letter-spacing:.5px}
.balance-row{display:flex;gap:12px}
.balance-item{flex:1;background:rgba(255,255,255,.16);border-radius:12px;padding:10px 12px}
.balance-item .label{font-size:12px;opacity:.9;display:block}
.balance-item .val{font-size:16px;font-weight:700}

/* 快捷分类 */
.quick-categories{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.quick-cat{display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--card);
  border-radius:14px;padding:12px 4px;box-shadow:var(--shadow);transition:transform .12s}
.quick-cat:active{transform:scale(.94)}
.quick-cat .emoji{font-size:22px}
.quick-cat .name{font-size:11px;color:var(--text-sub)}

/* 区块标题 */
.section-head{display:flex;align-items:center;justify-content:space-between;margin:6px 4px 10px}
.section-head>span{font-size:15px;font-weight:600}
.link-btn{color:var(--primary);font-size:13px}

/* 账单列表 */
.record-list{background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.record-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.record-item:last-child{border-bottom:none}
.record-icon{width:42px;height:42px;border-radius:12px;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.record-body{flex:1;min-width:0}
.record-name{font-size:15px;font-weight:500}
.record-note{font-size:12px;color:var(--text-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.record-meta{text-align:right;flex-shrink:0}
.record-amount{font-size:16px;font-weight:700}
.record-amount.exp{color:var(--expense)}
.record-amount.inc{color:var(--income)}
.record-date{font-size:11px;color:var(--text-sub)}
.swipe-hint{position:relative;overflow:hidden}

/* 明细页筛选 */
.filter-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
.filter-tabs{display:flex;background:#e9ecf5;border-radius:10px;padding:3px;flex:1}
.filter-tab{padding:7px 0;flex:1;text-align:center;font-size:13px;border-radius:8px;color:var(--text-sub);transition:.2s}
.filter-tab.active{background:#fff;color:var(--primary);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.month-picker{background:var(--card);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600;box-shadow:var(--shadow)}
.summary-strip{display:flex;gap:10px;margin-bottom:12px}
.summary-strip .stat-block{flex:1;background:var(--card);border-radius:12px;padding:12px;box-shadow:var(--shadow)}
.summary-strip .label{font-size:12px;color:var(--text-sub);display:block}
.summary-strip .big-val{font-size:18px;font-weight:700}
.empty-tip{text-align:center;color:var(--text-sub);padding:50px 0;font-size:14px}

/* 统计页 */
.stats-overview{display:flex;gap:12px}
.stats-overview .stat-block{flex:1;text-align:center}
.chart-title{font-size:14px;font-weight:600;margin-bottom:12px}
.donut-wrap{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.donut{width:150px;height:150px;border-radius:50%}
.donut-center{position:absolute;text-align:center}
.donut-center .label{font-size:11px;color:var(--text-sub);display:block}
.donut-center .val{font-size:16px;font-weight:700}
.legend{margin-top:8px}
.legend li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;border-bottom:1px dashed var(--line)}
.legend .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.legend .lname{flex:1}
.legend .lval{font-weight:600}
.legend .lpct{color:var(--text-sub);font-size:12px;width:46px;text-align:right}
.bar-chart{width:100%;height:auto;background:#fafbff;border-radius:10px}
.bar{transition:.2s}

/* 我的 */
.me-card{display:flex;align-items:center;gap:14px;text-align:left}
.me-avatar{width:52px;height:52px;border-radius:16px;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-size:28px}
.me-name{font-size:17px;font-weight:700}
.me-sub{font-size:12px;color:var(--text-sub)}
.menu-list{background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:16px}
.menu-item{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line)}
.menu-item:last-child{border-bottom:none}
.menu-item:active{background:#f5f7ff}
.menu-icon{font-size:19px;width:24px;text-align:center}
.menu-item .arrow{margin-left:auto;color:var(--text-sub);font-size:18px}
.about{text-align:center;font-size:12px;color:var(--text-sub);padding:10px}

/* 底部导航 */
.tabbar{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:520px;
  display:flex;align-items:flex-end;justify-content:space-around;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);box-shadow:0 -2px 16px rgba(30,40,70,.08);
  padding-bottom:var(--safe);z-index:30}
.tab{flex:1;padding:8px 0 10px;border:none;background:none;color:var(--text-sub);font-size:11px;
  display:flex;flex-direction:column;align-items:center;gap:3px}
.tab span{font-size:20px}
.tab.active{color:var(--primary);font-weight:600}
.fab-holder{flex:1}
.fab{position:fixed;left:50%;bottom:calc(28px + var(--safe));transform:translateX(-50%);
  width:58px;height:58px;border-radius:50%;background:var(--primary);color:#fff;font-size:30px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(79,140,255,.5);z-index:31;line-height:1}
.fab:active{transform:translateX(-50%) scale(.92);background:var(--primary-dark)}

/* 底部弹窗 */
.sheet-mask{position:fixed;inset:0;background:rgba(10,15,30,.45);z-index:40;display:flex;align-items:flex-end;
  opacity:0;pointer-events:none;transition:opacity .25s}
.sheet-mask.show{opacity:1;pointer-events:auto}
.sheet{background:#fff;width:100%;max-width:520px;margin:0 auto;border-radius:22px 22px 0 0;padding:10px 18px
  calc(20px + var(--safe));transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);max-height:92vh;overflow-y:auto}
.sheet-mask.show .sheet{transform:translateY(0)}
.sheet-handle{width:40px;height:5px;border-radius:3px;background:#d9dce6;margin:6px auto 10px}
.sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sheet-title{font-size:17px;font-weight:700}
.sheet-close{font-size:16px;width:30px;height:30px;border-radius:50%;background:#f0f1f6;color:#666}
.sheet-io{display:flex;background:#eef0f6;border-radius:12px;padding:4px;margin-bottom:16px}
.io-tab{flex:1;padding:10px;border-radius:9px;font-size:14px;font-weight:600;color:var(--text-sub)}
.io-tab.active{background:#fff;color:var(--primary);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.amount-input-row{display:flex;align-items:center;background:#f5f6fa;border-radius:14px;padding:14px 16px;margin-bottom:16px}
.amount-input-row .yen{font-size:22px;font-weight:700;color:var(--text-sub);margin-right:8px}
.amount-input{flex:1;font-size:28px;font-weight:700;background:none;border:none;min-width:0}
.amount-input::placeholder{color:#c2c6d2}
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.cat-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 2px;border-radius:12px;transition:.15s}
.cat-item.sel{background:#eaf1ff}
.cat-item.sel .emoji{transform:scale(1.15)}
.cat-item .emoji{font-size:22px;transition:.15s}
.cat-item .name{font-size:11px;color:var(--text-sub)}
.note-row,.date-row{background:#f5f6fa;border-radius:12px;padding:12px 14px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.note-input,.date-input{flex:1;background:none;border:none;font-size:14px}
.date-row span{font-size:13px;color:var(--text-sub);flex-shrink:0}
.save-btn{width:100%;padding:15px;border-radius:14px;background:var(--primary);color:#fff;font-size:16px;font-weight:700;margin-top:6px}
.save-btn:active{background:var(--primary-dark)}

/* 通用对话框 */
.dialog-mask{position:fixed;inset:0;background:rgba(10,15,30,.5);z-index:50;display:flex;align-items:center;justify-content:center;padding:30px}
.dialog{background:#fff;border-radius:16px;width:100%;max-width:320px;padding:22px 20px 16px;text-align:center}
.dialog-title{font-size:17px;font-weight:700;margin-bottom:10px}
.dialog-msg{font-size:14px;color:#4a4f5d;margin-bottom:20px;word-break:break-word}
.dialog-actions{display:flex;gap:10px}
.dialog-actions button{flex:1;padding:11px;border-radius:11px;font-size:14px;font-weight:600}
.btn-cancel{background:#f0f1f6;color:#4a4f5d}
.btn-confirm{background:var(--primary);color:#fff}
.btn-danger{background:var(--expense);color:#fff}

/* 子弹窗设置项 */
.setting-row{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.setting-row:last-child{border-bottom:none}
.setting-row label{flex:1;font-size:14px}
.setting-row input[type=number]{width:110px;padding:9px 10px;border:1px solid #dfe2ec;border-radius:9px;text-align:right}
.cat-manage-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.cat-manage-item .emoji{font-size:20px;width:30px;text-align:center}
.cat-manage-item input{flex:1;padding:7px;border:1px solid #dfe2ec;border-radius:8px;font-size:14px}
.del-mini{color:var(--expense);font-size:18px;padding:4px 8px}
.add-cat-btn{width:100%;padding:12px;border:1.5px dashed var(--primary);color:var(--primary);border-radius:11px;margin-top:10px;font-weight:600}