:root{--green:#21664f;--green2:#e5f2ec;--ink:#20312b;--muted:#68756f;--line:#dce4e0;--bg:#f5f8f6;--card:#fff;--red:#a23d3d}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"PingFang SC",sans-serif;font-size:18px}button,input,select{font:inherit}#app{max-width:680px;margin:auto;min-height:100vh;padding:calc(18px + env(safe-area-inset-top)) 16px calc(100px + env(safe-area-inset-bottom))}header{display:flex;align-items:center;gap:12px;margin-bottom:18px}.logo{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--green);font-size:25px}h1,h2,p{margin:0}h1{font-size:23px}h2{font-size:22px}header p,.note{color:var(--muted);font-size:15px;margin-top:3px}.icon-btn{margin-left:auto;border:1px solid var(--green);background:transparent;color:var(--green);border-radius:10px;padding:8px 12px}.page{display:none}.page.active{display:block}.hero{background:var(--green);color:#fff;border-radius:22px;padding:22px}.hero>p{opacity:.8}.hero>strong{font-size:42px;display:block;margin:7px 0 18px}.budget-row,.title-row,.dialog-head,.split{display:flex;justify-content:space-between;gap:12px;align-items:center}.budget-row{font-size:15px}.progress{height:8px;border-radius:8px;background:#ffffff35;margin-top:12px;overflow:hidden}.progress i{display:block;height:100%;background:#fff;width:0}.people{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 22px}.people article,.settle-card,.form-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:17px}.avatar{float:left;display:grid;place-items:center;width:36px;height:36px;background:var(--green2);border-radius:50%;margin-right:8px}.people p{font-size:15px;color:var(--muted);padding-top:8px}.people strong{display:block;font-size:23px;margin-top:18px}.title-row{margin:14px 2px 10px}.text-btn{border:0;background:transparent;color:var(--green);padding:8px}.bill-list{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}.bill-list.empty{padding:24px;text-align:center;color:var(--muted)}.bill{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:14px;border-bottom:1px solid var(--line)}.bill:last-child{border:0}.bill-icon{width:42px;height:42px;display:grid;place-items:center;background:var(--green2);border-radius:12px}.bill small{display:block;color:var(--muted);font-size:14px;margin-top:3px}.bill .money{text-align:right}.bill .money button{border:0;background:transparent;color:var(--muted);font-size:13px;padding:5px 0 0 8px}.settle-card{margin-top:12px;text-align:center}.settle-card>p{color:var(--muted)}.settle-card>strong{display:block;font-size:26px;margin:28px 0}.split{font-size:14px;color:var(--muted);flex-wrap:wrap}.form-card{margin-top:12px}label{display:block;color:var(--muted);font-size:15px;margin-bottom:14px}input,select{display:block;width:100%;margin-top:7px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:13px;font-size:18px}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.primary{width:100%;border:0;border-radius:13px;padding:14px;background:var(--green);color:#fff;font-weight:600}.danger{width:100%;border:1px solid #e0baba;background:transparent;color:var(--red);border-radius:13px;padding:13px;margin-top:22px}.note{line-height:1.6;margin:15px 4px}nav{position:fixed;z-index:5;left:50%;bottom:0;transform:translateX(-50%);width:min(680px,100%);display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom))}nav button{border:0;background:transparent;color:var(--muted);padding:6px 2px;font-size:22px}nav button span{display:block;font-size:12px;margin-top:3px}nav button.active{color:var(--green)}nav .add{width:60px;height:60px;justify-self:center;margin-top:-28px;border-radius:50%;background:var(--green);color:#fff;box-shadow:0 5px 18px #173d3040;font-size:30px}nav .add span{font-size:11px}dialog{width:min(620px,calc(100% - 24px));border:0;border-radius:22px;padding:0;color:var(--ink)}dialog::backdrop{background:#13231d99}dialog form{padding:20px}.dialog-head{margin-bottom:16px}.close{border:0;background:var(--green2);border-radius:50%;width:40px;height:40px;font-size:25px}@media(max-width:420px){body{font-size:17px}.hero>strong{font-size:35px}.people{grid-template-columns:1fr}.two{grid-template-columns:1fr}.people strong{margin-top:12px}}