:root { color-scheme: light; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { color: #333; background: #fff; }
button { font: inherit; cursor: pointer; }
.income-page { min-height: 100vh; background: #fff; }
.period-tabs { display: grid; grid-template-columns: repeat(3, 1fr); height: 55px; padding-bottom: 18px; background: #fff; }
.period-tab { position: relative; display: grid; place-items: center; border: 0; color: #646566; background: transparent; font-size: 18px; line-height: 25px; }
.period-tab.active { color: #65c4aa; font-weight: 500; }
.period-tab.active::after { position: absolute; bottom: 0; width: 51px; height: 4px; border-radius: 4px; background: #65c4aa; content: ""; }
.income-summary { position: relative; height: 152px; margin: 13px 19px 0; overflow: hidden; border-radius: 5px; background: linear-gradient(118deg, #fff 0%, #fff 54%, #fdfdfd 100%); text-align: center; }
.income-summary::after { position: absolute; right: -30px; bottom: -38px; left: -30px; height: 113px; border-radius: 50% 50% 0 0 / 70% 70% 0 0; background: linear-gradient(157deg, rgba(243, 244, 244, .08) 12%, rgba(236, 238, 238, .72) 55%, rgba(255, 255, 255, .18) 78%); content: ""; transform: rotate(-8deg); }
.summary-title { position: relative; z-index: 1; padding-top: 23px; color: #ef4444; font-size: 18px; line-height: 30px; }
.summary-total { position: relative; z-index: 1; color: #ef4444; font-size: 30px; font-weight: 500; line-height: 38px; }
.summary-total span { margin-right: 5px; font-size: 15px; font-weight: 400; vertical-align: 4px; }
.summary-total small, .summary-breakdown small { font-size: .5em; font-weight: 400; }
.summary-breakdown { position: absolute; z-index: 1; right: 56px; bottom: 19px; left: 56px; display: flex; justify-content: space-between; }
.summary-breakdown div { display: flex; flex-direction: column; gap: 1px; font-size: 15px; line-height: 17px; }
.summary-breakdown strong { font-size: 18px; font-weight: 400; line-height: 21px; }
.pending { color: #f59a23; }
.settled { color: #70b603; }
.income-records { padding: 18px 19px 0; }
.record-toolbar { display: flex; align-items: center; justify-content: space-between; }
.status-tabs { display: flex; gap: 6px; }
.status-tab { height: 35px; padding: 0 13px; border: 0; border-radius: 18px; color: #999; background: transparent; font-size: 18px; line-height: 35px; }
.status-tab.active { color: #333; background: #f2f2f2; }
.filter { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border: 0; color: #999; background: transparent; }
.filter svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.empty-state { display: flex; align-items: center; flex-direction: column; padding-top: 120px; color: #999; font-size: 18px; line-height: 20px; }
.empty-state img { width: 126px; height: 94px; margin-bottom: 25px; object-fit: contain; }
.back-home { position: fixed; right: 19px; bottom: 80px; display: grid; width: 63px; height: 63px; place-items: center; border-radius: 50%; color: #333; background: #fff; box-shadow: 0 2px 9px rgba(0, 0, 0, .14); }
.back-home svg { width: 35px; height: 35px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }
.toast { position: fixed; z-index: 2; left: 50%; bottom: 46px; padding: 11px 18px; border-radius: 22px; color: #fff; background: rgba(33, 33, 33, .84); font-size: 14px; opacity: 0; transform: translate(-50%, 14px); transition: .2s ease; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 641px) { .income-page { max-width: 1054px; margin: 0 auto; } .period-tabs { height: 110px; padding-bottom: 36px; } .period-tab { font-size: 32px; line-height: 46px; } .period-tab.active::after { width: 96px; height: 8px; } .income-summary { height: 288px; margin: 24px 40px 0; border-radius: 10px; } .summary-title { padding-top: 44px; font-size: 28px; line-height: 48px; } .summary-total { font-size: 48px; line-height: 64px; } .summary-total span { font-size: 26px; } .summary-breakdown { right: 120px; bottom: 38px; left: 120px; } .summary-breakdown div { font-size: 24px; line-height: 28px; } .summary-breakdown strong { font-size: 30px; line-height: 36px; } .income-records { padding: 36px 40px 0; } .status-tabs { gap: 12px; } .status-tab { height: 56px; padding: 0 26px; font-size: 28px; line-height: 56px; } .filter { width: 40px; height: 40px; } .filter svg { width: 34px; height: 34px; } .empty-state { padding-top: 190px; font-size: 28px; line-height: 32px; } .empty-state img { width: 200px; height: 150px; margin-bottom: 40px; } .back-home { right: calc(max(40px, (100vw - 1054px) / 2 + 40px)); bottom: 80px; width: 100px; height: 100px; } .back-home svg { width: 56px; height: 56px; } }