:root{--ink:#26312d;--muted:#79827e;--cream:#f4f0e8;--paper:#fffdf8;--green:#294d42;--mint:#b9d0bd;--orange:#ee7b4b;--yellow:#e7b852;--line:#e6e1d8;--shadow:0 16px 50px rgba(42,52,48,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans","Noto Sans SC",sans-serif}button,input,select{font:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;padding:34px 24px 24px;background:#f9f6ef;border-right:1px solid rgba(38,49,45,.08);display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;padding:0 8px}.brand-mark{width:40px;height:40px;display:grid;place-items:center;background:var(--green);color:#fff;border-radius:12px;font-size:18px;font-family:serif;box-shadow:5px 5px 0 var(--mint)}.brand b,.brand small,.profile b,.profile small{display:block}.brand b{font-size:17px;letter-spacing:1px}.brand small{font-size:8px;color:#979d99;letter-spacing:1.8px;margin-top:3px}.nav-list{display:flex;flex-direction:column;gap:8px;margin-top:58px}.nav-item{display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:10px;text-decoration:none;color:#747c78;font-size:14px;font-weight:500}.nav-item:hover,.nav-item.active{background:#e7eee8;color:var(--green);font-weight:700}.nav-item.active{box-shadow:inset 3px 0 var(--green)}.nav-icon{font-size:20px;width:20px;text-align:center}.side-card{margin-top:auto;background:var(--green);color:#fff;padding:20px;border-radius:16px;position:relative;overflow:hidden}.side-card:after{content:"";position:absolute;width:100px;height:100px;border:25px solid rgba(255,255,255,.04);border-radius:50%;right:-50px;top:-45px}.side-card-icon{color:#f4cc70}.side-card b{font-size:13px;margin-left:5px}.side-card p{font-size:11px;line-height:1.7;color:#cddbd5}.side-card small{font-size:10px;color:#b7c7c0}.mini-progress{height:5px;background:rgba(255,255,255,.14);border-radius:5px;margin-bottom:7px}.mini-progress span{display:block;width:76%;height:100%;background:#f4cb70;border-radius:5px}.profile{border:0;background:none;display:flex;align-items:center;gap:10px;text-align:left;padding:20px 4px 0;cursor:pointer;color:var(--ink)}.avatar{display:grid;place-items:center;width:34px;height:34px;background:#f1caa8;border-radius:50%;font-weight:700}.profile b{font-size:12px}.profile small{font-size:10px;color:#8e9591;margin-top:2px}.more{margin-left:auto;color:#929894}.main-content{margin-left:248px;width:calc(100% - 248px);padding:38px 5vw 60px;max-width:1500px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.eyebrow{margin:0 0 6px;color:#8f9692;font-size:10px;letter-spacing:1.8px;font-weight:700}.topbar h1{margin:0;font-family:"Noto Sans SC";font-size:25px;letter-spacing:-.5px}.topbar h1 span{font-size:18px;color:var(--yellow)}.top-actions{display:flex;gap:12px}.icon-button,.primary-button,.filter-button{border:0;cursor:pointer}.icon-button{width:42px;height:42px;border-radius:12px;background:var(--paper);box-shadow:var(--shadow);font-size:20px;position:relative}.notify-dot{position:absolute;width:6px;height:6px;background:var(--orange);border-radius:50%;right:11px;top:9px}.primary-button{height:42px;padding:0 19px;border-radius:11px;background:var(--green);color:#fff;font-size:13px;font-weight:600;box-shadow:0 10px 25px rgba(41,77,66,.2)}.primary-button span{font-size:20px;vertical-align:-1px}.menu-button{display:none}.balance-card{background:var(--green);border-radius:20px;padding:30px 34px;color:#fff;display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:34px;position:relative;overflow:hidden;box-shadow:0 20px 55px rgba(41,77,66,.16)}.balance-card:after{content:"";position:absolute;width:280px;height:280px;border:55px solid rgba(255,255,255,.025);border-radius:50%;right:-120px;top:-150px}.section-label{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1.4px;color:#8b948f;font-weight:700}.balance-card .section-label{color:#b9cac3}.section-label span,.section-label i{width:13px;height:2px;background:var(--orange);display:inline-block}.balance-row{display:flex;align-items:center;gap:18px;margin:13px 0 3px}.balance-row h2{font-size:38px;letter-spacing:-1.5px;margin:0}.balance-row h2 small{font-size:18px;font-weight:500}.trend{font-size:10px;padding:5px 8px;border-radius:20px}.trend.up{background:rgba(183,215,194,.14);color:#bce0c9}.balance-main p{font-size:11px;color:#b9c7c2;margin:8px 0 0}.balance-stat{display:flex;align-items:center;gap:12px;border-left:1px solid rgba(255,255,255,.12);padding-left:25px;z-index:1}.stat-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font-size:18px}.income .stat-icon{background:#dbe7d6;color:#315044}.expense .stat-icon{background:#f6d5c6;color:#c95f35}.balance-stat small,.balance-stat strong,.balance-stat em{display:block}.balance-stat small{color:#bdc9c4;font-size:10px}.balance-stat strong{font-size:18px;margin:7px 0 4px}.balance-stat em{font-size:9px;color:#a7bab2;font-style:normal}.dashboard-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;margin-top:20px}.panel{background:var(--paper);border:1px solid rgba(38,49,45,.07);border-radius:17px;box-shadow:var(--shadow);padding:25px 27px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start}.panel h3{font-size:17px;margin:8px 0 0}.panel select{border:1px solid var(--line);border-radius:8px;background:transparent;color:#717975;font-size:11px;padding:7px 25px 7px 10px}.chart-wrap{display:flex;align-items:center;gap:44px;padding:27px 12px 20px}.donut{width:178px;height:178px;border-radius:50%;background:conic-gradient(var(--green) 0 31%,var(--orange) 31% 54%,var(--yellow) 54% 71%,#89a995 71% 86%,#d9d6c9 86% 100%);display:grid;place-items:center;position:relative}.donut:after{content:"";position:absolute;width:116px;height:116px;background:var(--paper);border-radius:50%}.donut-center{position:relative;z-index:2;text-align:center}.donut-center small,.donut-center strong,.donut-center span{display:block}.donut-center small{font-size:9px;color:#8b928f}.donut-center strong{font-size:21px;margin:5px 0}.donut-center span{font-size:9px;color:#658173}.legend{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}.legend-item{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;font-size:11px}.legend-dot{width:7px;height:7px;border-radius:50%;margin-top:4px}.legend-item span{color:#7f8783}.legend-item strong{grid-column:2;font-size:12px}.budget-footer{border-top:1px solid var(--line);padding-top:17px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;font-size:10px}.budget-footer span{color:#8a918d}.budget-footer strong{display:block;margin-top:4px;font-size:12px}.budget-bar{height:6px;background:#ebe9e2;border-radius:5px}.budget-bar span{display:block;width:77.5%;height:100%;background:var(--orange);border-radius:5px}.budget-footer b{font-size:10px;color:var(--orange)}.calendar-nav{display:flex}.calendar-nav button{border:1px solid var(--line);background:transparent;width:29px;height:29px;color:#727975}.calendar-nav button:first-child{border-radius:7px 0 0 7px}.calendar-nav button:last-child{border-radius:0 7px 7px 0;border-left:0}.weekdays,.calendar{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.weekdays{font-size:9px;color:#9ba09d;margin:25px 0 9px}.calendar{gap:4px;font-size:11px}.calendar span{height:28px;display:grid;place-items:center;border-radius:50%;position:relative}.calendar .muted{color:#c4c6c3}.calendar .today{background:var(--green);color:#fff}.calendar .spent:after{content:"";position:absolute;width:3px;height:3px;background:var(--orange);border-radius:50%;bottom:1px}.calendar-note{display:flex;align-items:center;margin-top:18px;background:#f7f2e9;border-radius:10px;padding:11px 13px;gap:10px}.calendar-note>span{width:7px;height:7px;background:var(--orange);border-radius:50%}.calendar-note p{margin:0;flex:1}.calendar-note b,.calendar-note small{display:block;font-size:9px}.calendar-note small{color:#9a9e9b;margin-top:3px}.calendar-note strong{font-size:11px}.records-panel{margin-top:20px}.records-head{align-items:center}.record-tools{display:flex;align-items:center;gap:20px}.filter-button{background:#f7f4ed;border:1px solid var(--line);padding:7px 12px;border-radius:8px;color:#68716d;font-size:10px}.record-tools a{font-size:10px;color:var(--green);font-weight:700;text-decoration:none}.record-list{margin-top:18px}.record{display:grid;grid-template-columns:42px 1.5fr 1fr 1fr auto;align-items:center;gap:12px;padding:13px 5px;border-top:1px solid #eeebe5;font-size:11px}.record-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:16px}.record-name strong,.record-name small{display:block}.record-name strong{font-size:12px}.record-name small,.record-date,.record-account{color:#969b98;font-size:10px;margin-top:3px}.record-amount{font-size:12px;font-weight:700;text-align:right}.record-amount.income{color:#4b826b}.modal-backdrop{position:fixed;inset:0;background:rgba(27,39,34,.45);backdrop-filter:blur(5px);z-index:50;display:none;place-items:center;padding:20px}.modal-backdrop.open{display:grid}.modal{width:min(480px,100%);background:var(--paper);border-radius:20px;padding:27px;box-shadow:0 25px 80px rgba(24,38,32,.25);animation:pop .2s ease}@keyframes pop{from{transform:translateY(10px);opacity:0}}.modal-head{display:flex;justify-content:space-between}.modal-head h3{margin:8px 0 0}.modal-head button{border:0;background:#f0eee8;border-radius:50%;width:30px;height:30px;font-size:20px;color:#77807b}.type-switch{display:grid;grid-template-columns:1fr 1fr;background:#efede6;padding:4px;border-radius:10px;margin:23px 0}.type-switch button{border:0;padding:9px;background:transparent;border-radius:8px;color:#78817c}.type-switch button.active{background:var(--green);color:#fff}.modal label{display:block;color:#747d78;font-size:11px;margin:15px 0}.modal input,.modal select{width:100%;border:1px solid var(--line);border-radius:9px;background:#fffefb;padding:11px;outline:none;color:var(--ink);margin-top:7px}.amount-input{position:relative}.amount-input span{position:absolute;left:12px;top:17px;font-size:18px}.amount-input input{font-size:22px;font-weight:700;padding-left:35px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.submit-button{width:100%;border:0;background:var(--orange);color:#fff;padding:12px;border-radius:10px;font-weight:700;margin-top:7px;cursor:pointer}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#26312d;color:#fff;padding:11px 18px;border-radius:9px;font-size:12px;z-index:100;animation:toast 2.5s both}@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}15%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.calendar-panel{position:relative;overflow:visible}.calendar button{height:28px;display:grid;place-items:center;border:0;border-radius:50%;position:relative;background:transparent;color:inherit;font-size:11px;cursor:pointer}.calendar button:hover{background:#edf1ec}.calendar button.muted{color:#c4c6c3}.calendar button.selected{background:var(--green);color:#fff;box-shadow:0 4px 10px rgba(41,77,66,.2)}.calendar button.spent:after{content:"";position:absolute;width:3px;height:3px;background:var(--orange);border-radius:50%;bottom:1px}.calendar button.selected.spent:after{background:#f7c86e}.day-tooltip{position:absolute;width:250px;padding:14px;background:#263a33;color:#fff;border-radius:12px;z-index:30;box-shadow:0 16px 38px rgba(30,45,39,.24);transform:translateX(-50%);pointer-events:none;animation:tooltip-in .14s ease}.day-tooltip:after{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;background:#263a33;transform:translateX(-50%) rotate(45deg)}@keyframes tooltip-in{from{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translate(-50%,0)}}.tooltip-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}.tooltip-head strong{font-size:12px}.tooltip-head span{font-size:9px;color:#b8c9c2}.tooltip-summary{display:flex;gap:16px;margin-top:5px}.tooltip-summary b{font-size:10px}.tooltip-summary .tooltip-income{color:#a9d4b9}.tooltip-summary .tooltip-expense{color:#f3b092}.tooltip-items{margin-top:7px}.tooltip-item{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:6px 0;border-top:1px solid rgba(255,255,255,.07)}.tooltip-item span{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tooltip-item strong{font-size:10px}.tooltip-item small{grid-column:1/-1;color:#9eb1aa;font-size:8px}.tooltip-empty{padding:13px 0 2px;text-align:center;color:#aebfb8;font-size:9px}.tooltip-more{text-align:center;color:#aebfb8;font-size:8px;padding-top:6px}.record{grid-template-columns:42px 1.5fr 1fr 1fr auto auto}.record-actions{display:flex;gap:5px}.record-actions button{border:0;background:#f1eee7;color:#727a76;border-radius:6px;padding:5px 7px;font-size:9px;cursor:pointer}.record-actions .delete-action,.loan-card-actions .delete-action{color:#bd6245;background:#f8e9e3}.liabilities-panel{margin-top:20px;scroll-margin-top:20px}.liabilities-head{align-items:center}.outline-button{border:1px solid var(--green);background:transparent;color:var(--green);border-radius:9px;padding:9px 14px;font-size:11px;font-weight:700;cursor:pointer}.outline-button:hover{background:var(--green);color:#fff}.debt-summary{display:grid;grid-template-columns:1.4fr repeat(3,1fr);margin:23px 0 20px;background:#f5f1e9;border-radius:14px;overflow:hidden}.debt-summary>div{padding:19px 22px;border-left:1px solid #e4dfd5}.debt-summary>div:first-child{border:0;background:var(--green);color:#fff}.debt-summary span,.debt-summary strong,.debt-summary small{display:block}.debt-summary span{font-size:9px;color:#858d89;letter-spacing:.6px}.debt-summary-main span{color:#b9c8c2}.debt-summary strong{font-size:18px;margin:6px 0}.debt-summary-main strong{font-size:24px}.debt-summary small{font-size:9px;color:#9a9f9c}.debt-summary-main small{color:#b6c7c0}.debt-summary-main small i{display:inline-block;width:5px;height:5px;background:#e7b852;border-radius:50%;margin-right:5px}.debt-count strong em{font-size:9px;font-style:normal;font-weight:500;color:#929895}.loan-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.loan-card{border:1px solid var(--line);border-radius:14px;padding:18px;position:relative;background:#fffefa}.loan-card-top{display:flex;align-items:flex-start;gap:11px}.loan-type-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#dbe7df;color:var(--green);font-size:17px}.loan-card.car .loan-type-icon{background:#f5dfc8;color:#b9713d}.loan-card-title{flex:1}.loan-card-title strong,.loan-card-title small{display:block}.loan-card-title strong{font-size:13px}.loan-card-title small{color:#969c99;font-size:9px;margin-top:4px}.loan-status{font-size:9px;background:#e8f0ea;color:#4d745f;border-radius:20px;padding:4px 8px}.loan-numbers{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:18px 0 14px}.loan-numbers span,.loan-numbers strong{display:block}.loan-numbers span{font-size:9px;color:#969c99}.loan-numbers strong{font-size:12px;margin-top:5px}.loan-progress-head{display:flex;justify-content:space-between;color:#858d89;font-size:9px}.loan-progress{height:6px;background:#ece9e1;border-radius:5px;margin:7px 0 13px}.loan-progress span{display:block;height:100%;background:var(--orange);border-radius:5px}.loan-card-actions{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eeeae3;padding-top:12px}.loan-card-actions small{color:#909793;font-size:9px}.loan-card-actions div{display:flex;gap:7px}.loan-card-actions button{border:0;border-radius:7px;padding:6px 9px;font-size:9px;cursor:pointer;background:#f1eee7;color:#59645f}.loan-card-actions .pay-button{background:var(--green);color:#fff}.loan-empty{grid-column:1/-1;text-align:center;color:#969d99;padding:35px;font-size:11px}.form-row.three{grid-template-columns:repeat(3,1fr)}.loan-modal{width:min(620px,100%)}.loan-preview{background:var(--green);border-radius:12px;padding:15px 18px;color:#fff;display:grid;grid-template-columns:1fr auto;align-items:center;margin:18px 0}.loan-preview span{font-size:10px;color:#bfd0c9}.loan-preview strong{font-size:20px}.loan-preview small{grid-column:1/-1;font-size:9px;color:#aebfb8;margin-top:5px}.schedule-modal{width:min(820px,100%)}.schedule-table-wrap{max-height:480px;overflow:auto;margin-top:22px;border:1px solid var(--line);border-radius:10px}.schedule-table{border-collapse:collapse;width:100%;font-size:10px}.schedule-table th{position:sticky;top:0;background:#f1eee7;color:#7b837f;text-align:right;padding:11px;z-index:1}.schedule-table th:first-child,.schedule-table td:first-child{text-align:left}.schedule-table td{text-align:right;padding:10px 11px;border-top:1px solid #eeeae3}.schedule-table tr.paid{color:#9aa09d;background:#faf8f3}.schedule-table tr.next{background:#eef4ef;color:var(--green);font-weight:700}
@media(max-width:1050px){.balance-card{grid-template-columns:1fr 1fr}.balance-main{grid-column:1/-1}.balance-stat{border-left:0;padding-left:0}.dashboard-grid{grid-template-columns:1fr}.chart-wrap{justify-content:center}.calendar-panel{min-height:390px}.debt-summary{grid-template-columns:1fr 1fr}.debt-summary>div:nth-child(3){border-left:0}.loan-list{grid-template-columns:1fr}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0);box-shadow:20px 0 60px rgba(26,42,35,.16)}.main-content{margin-left:0;width:100%;padding:24px 18px 50px}.menu-button{display:block;border:0;background:transparent;font-size:20px;margin-right:10px}.topbar>div:first-of-type{flex:1}.eyebrow{display:none}.topbar h1{font-size:20px}.icon-button{display:none}.primary-button{padding:0 13px}.balance-card{padding:25px;grid-template-columns:1fr;gap:22px}.balance-main{grid-column:auto}.balance-row h2{font-size:32px}.balance-stat{border-top:1px solid rgba(255,255,255,.1);padding-top:18px}.panel{padding:22px 18px}.chart-wrap{flex-direction:column;gap:25px}.legend{width:100%}.record{grid-template-columns:42px 1fr auto auto}.record-date,.record-account{display:none}.form-row,.form-row.three{grid-template-columns:1fr}.records-head{align-items:flex-end}.filter-button{display:none}.debt-summary{grid-template-columns:1fr 1fr}.debt-summary>div{padding:15px}.loan-numbers{grid-template-columns:1fr 1fr}.loan-numbers>div:last-child{display:none}.schedule-modal{padding:20px 14px}.schedule-table{min-width:650px}}
@media(max-width:420px){.topbar h1{font-size:17px}.primary-button{font-size:0}.primary-button span{font-size:22px}.primary-button:after{content:"记账";font-size:12px}.balance-row{align-items:flex-end}.trend{margin-bottom:5px}.legend{gap:14px}.record-tools{gap:5px}}
.mini-progress span{width:0}
.budget-setting-button{border:1px solid var(--line);background:#f7f4ed;color:var(--green);border-radius:8px;padding:8px 12px;font-size:10px;font-weight:700;cursor:pointer}.budget-setting-button:hover{border-color:var(--green);background:#edf2ee}.budget-modal{width:min(420px,100%)}.budget-form-hint{display:flex;justify-content:space-between;gap:15px;background:#f5f1e9;border-radius:9px;padding:11px 12px;margin:16px 0;color:#858d89;font-size:9px}.budget-form-hint strong{color:var(--green)}