*{box-sizing:border-box}
body{margin:0;background:#f7f8fa;color:#263733;font:14px 'Microsoft YaHei',sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0;background:none;color:inherit}
aside{position:fixed;width:226px;height:100vh;background:white;padding:35px 24px;border-right:1px solid #e8ece9;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:12px;color:#19856c;text-decoration:none;font-size:40px}
.brand b{color:#203d34;font-size:27px}
.brand span{display:block;font-size:10px;letter-spacing:4px;margin-top:3px}
.back-home{display:block;margin:18px 0 -12px;padding:9px 12px;border:1px solid #dce8df;border-radius:7px;color:#5e7868;text-decoration:none;font-size:10px;transition:.2s}
.back-home:hover{background:#244d3f;color:white;border-color:#244d3f}
.school{padding:18px 12px;background:#f4f7f5;margin:30px 0;border-radius:10px;font-weight:bold}
.school small{display:block;margin:7px 0 0 18px;color:#87918c;font-weight:normal;font-size:11px}
nav button{display:block;width:100%;text-align:left;padding:17px;border-radius:10px;margin-bottom:9px;font-weight:bold}
nav i{display:block;font-size:10px;font-style:normal;font-weight:normal;color:#84948d;padding-top:7px}
nav .active{background:#e8f4ee;color:#20735b}
.aside-bottom{margin-top:auto}
.safety{font-size:12px;color:#51826b;background:#f6f9f5;padding:14px;border-radius:9px}
.safety p{font-size:9px;color:#8c9b91}
.user{display:flex;align-items:center;gap:10px;border-top:1px solid #eef1ed;margin-top:25px;padding-top:23px}
.avatar{background:#f1e5d3;color:#846b47;border-radius:50%;padding:12px}
.user small{display:block;font-size:10px;color:#98a29c;margin-top:5px}
.online{background:#51b28a;width:7px;height:7px;border-radius:50%;margin-left:auto}
main{margin-left:226px}
header{height:83px;padding:0 42px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e8ece9;background:#fff;font-size:12px;color:#89958f}
header>div{display:flex;gap:20px;align-items:center}
header b{color:#394b42}
.demo{font-size:10px;background:#f4f6f4;padding:6px 10px;border-radius:6px}
.content{max-width:1450px;margin:auto;padding:32px 42px}
.hero{position:relative;background:#e9f2e7;border-radius:18px;min-height:343px;display:flex;overflow:hidden;padding:35px 40px}
.hero-text{z-index:1}
.eyebrow{font-size:10px;letter-spacing:2px;color:#6d8c72;font-weight:bold}
h1{font-size:42px;line-height:1.23;letter-spacing:2px;margin:18px 0 14px;font-weight:800}
p{line-height:1.8;color:#849187}
.hero-text p{font-size:13px;color:#748473}
.primary{background:#227c5d;color:#fff;border-radius:7px;padding:13px 23px;box-shadow:0 5px 12px #227c5d17}
.primary:hover{background:#155b43}
.ghost{margin-left:10px;font-size:12px;color:#467155}
.hero-proof{display:flex;align-items:center;margin-top:26px;font-size:10px;color:#7b8e7e}
.hero-proof small{font-size:8px}
.mini-avatar{width:27px;height:27px;background:#d4c4af;border:2px solid #e9f2e7;border-radius:50%;display:grid;place-items:center;margin-right:-7px;font-size:9px}
.mini-avatar:nth-child(2){background:#aac5b6}
.mini-avatar:nth-child(3){background:#e9c5a4;margin-right:12px}
.art{position:absolute;right:45px;top:25px;width:420px;height:315px}
.orbit{position:absolute;width:275px;height:275px;border:1px dashed #bacdb6;border-radius:50%;left:80px;top:20px}
.orbit:before{content:'';position:absolute;inset:30px;border-radius:50%;background:#dce9d5}
.parcel{position:absolute;left:140px;top:90px;transform:rotate(-12deg);width:155px;height:140px;background:#ca9e63;border-radius:7px;box-shadow:14px 15px 0 #b18a57,25px 35px 25px #6d896421;border:1px solid #b28951}
.parcel:before{content:'';position:absolute;left:63px;width:25px;height:100%;background:#e6c89a}
.parcel span{position:absolute;top:18px;left:16px;font-size:8px;letter-spacing:2px}
.parcel div{position:absolute;background:#f4eddc;padding:0 15px;font-size:52px;left:40px;top:43px;border-radius:3px;color:#427c5a}
.art-pill{position:absolute;right:15px;top:22px;background:#ffffffaa;border:1px solid white;padding:11px 17px;border-radius:25px;font-size:11px;color:#568360}
.route{position:absolute;bottom:8px;left:29px;border-radius:12px;background:white;padding:14px 20px;box-shadow:0 6px 25px #416f4212;color:#527458;font-size:10px}
.route i{margin:0 15px;color:#b2c6ad}
.float-card{position:absolute;right:0;bottom:63px;background:#fff;padding:15px 22px;border-radius:12px;transform:rotate(6deg);font-weight:bold;color:#32765a;box-shadow:0 9px 20px #56755612}
.float-card small{display:block;font-weight:normal;font-size:10px;color:#839081;margin:6px 0}
.float-card span{font-size:10px;background:#eaf4e9;padding:3px 6px;border-radius:4px}
.star{position:absolute;left:53px;top:60px;font-size:48px;color:#8fb986}
.stats{display:grid;grid-template-columns:1fr 1fr 1fr 1.6fr;margin:24px 0 32px;background:white;border:1px solid #e9eee9;border-radius:12px;padding:20px 8px}
.stats>div{display:flex;align-items:center;gap:13px;padding:0 22px;border-right:1px solid #edf0ed}
.stats>div>span{font-size:24px;color:#72947a}
.stats p{margin:0}
.stats b{display:block;font-size:20px;color:#33493d}
.stats small{font-size:10px}
.stats .stat-last{border:0;justify-content:space-between}
.stat-last b{font-size:13px}
.section-heading{display:flex;align-items:center;justify-content:space-between}
h2{font-size:21px;margin:0}
h2 span{font-size:8px;color:#65a383;background:#e5f1e8;padding:4px 6px;vertical-align:middle;border-radius:4px;margin-left:8px}
.section-heading p{font-size:11px;margin:10px 0 18px}
select{border:1px solid #e0e7e0;padding:9px 12px;background:white;border-radius:7px;color:#728174;font-size:11px}
.filters{display:flex;justify-content:space-between;gap:12px;margin-bottom:21px}
.filters button{padding:10px 14px;font-size:11px;margin-right:5px;border-radius:7px;background:#fff;border:1px solid #e9eeea}
.filters button.active{background:#277f60;color:white;border-color:#277f60}
.search{display:flex;align-items:center;gap:8px;border:1px solid #e5e9e5;border-radius:7px;padding:0 12px;background:#fff}
.search input{border:0;background:none;outline:none;width:140px;font-size:11px}
.board{display:grid;grid-template-columns:1fr 266px;gap:24px}
.tasks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-content:start}
.task{background:white;border:1px solid #e5ebe5;border-radius:12px;padding:21px;transition:.2s}
.task:hover{box-shadow:0 8px 20px #24452b0b;transform:translateY(-2px);border-color:#a3c4af}
.task-top{display:flex;justify-content:space-between;align-items:center}
.tag{font-size:10px;padding:5px 8px;border-radius:5px;background:#edf1fa;color:#7087aa}
.tag.food{background:#fcf2e4;color:#b99a60}
.tag.other{background:#f1ecf6;color:#9f80b0}
.urgent{font-size:10px;color:#ce9870}
.task h3{font-size:16px;margin:17px 0 10px}
.task .desc{font-size:11px;height:38px;margin:0;color:#8e988f}
.locations{font-size:11px;background:#f7f9f6;border-radius:6px;padding:10px;margin:15px 0 9px;display:flex;align-items:center;justify-content:space-between;color:#768b78}
.locations i{color:#bac7b9;font-style:normal}
.time{font-size:10px;color:#9ba298}
.task-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f0f2ee;padding-top:15px;margin-top:15px}
.person{font-size:10px;display:flex;gap:7px;align-items:center}
.person span{background:#eee8da;width:25px;height:25px;border-radius:50%;display:grid;place-items:center}
.person small{display:block;color:#88a692;font-size:8px}
.reward{font-size:21px;color:#257652;font-weight:bold}
.reward small{font-size:10px;font-weight:normal}
.task-footer button{font-size:10px;border:1px solid #d4e5d7;border-radius:6px;padding:7px 9px;color:#397a52}
.right-panel>div{border-radius:12px;margin-bottom:18px}
.credit-mini{background:#edf1e5;padding:22px}
.credit-mini h3{font-size:14px;margin-top:13px}
.score{display:flex;gap:12px;align-items:baseline;margin:21px 0 12px}
.score b{font-size:49px;color:#477347;line-height:1}
.score span{font-size:10px;color:#87927b}
.progress{height:5px;background:#d9e2cd;border-radius:10px}
.progress i{display:block;width:92%;height:100%;background:#7c9e61;border-radius:10px}
.credit-mini p{font-size:10px;color:#7d9568}
.credit-mini button{font-size:11px;margin-top:10px}
.steps{padding:19px;background:white;border:1px solid #e6ece7}
.steps h3{font-size:13px;margin:0 0 20px}
.steps p{display:flex;gap:13px;margin:15px 0;color:#607165;font-size:11px}
.steps b{font-size:17px;color:#b8c7b9}
.steps small{display:block;font-size:9px;color:#9aa498}
.tip{font-size:11px;padding:5px 5px;color:#8c9c85}
.tip p{font-size:10px}
footer{display:flex;justify-content:space-between;border-top:1px solid #e4eae4;margin-top:30px;padding-top:22px;font-size:10px;color:#9aa69b}
dialog{width:530px;border:0;border-radius:18px;padding:32px;box-shadow:0 20px 100px #162e3440;color:#304237;max-height:90vh;overflow:auto}
dialog::backdrop{background:#203b3466;backdrop-filter:blur(3px)}
.close{position:absolute;right:16px;top:12px;font-size:24px;color:#8e998f}
dialog h2{margin-bottom:12px}
dialog p{font-size:12px}
form label{display:block;font-size:12px;margin-top:17px}
form input,form textarea,form select{display:block;width:100%;padding:11px;margin-top:7px;border:1px solid #dfe7e0;border-radius:7px;background:#fafcf9;color:#354c3c}
form .row{display:flex;gap:16px}
form .row>*{flex:1;min-width:0}
form button{width:100%;margin-top:24px}
.detail-block{padding:16px;background:#f5f8f3;border-radius:8px;margin:16px 0;line-height:2;font-size:12px}
.detail-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:25px}
#toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);padding:13px 24px;background:#244d3f;color:white;border-radius:9px;display:none;z-index:10}
.empty{padding:60px 20px;text-align:center;background:white;border:1px dashed #d6e3d6;border-radius:12px;grid-column:1/-1}
.my-list{display:grid;gap:15px;margin-top:23px}
.my-task{background:white;padding:24px;border:1px solid #e2e9e2;border-radius:12px;display:flex;justify-content:space-between;gap:15px;align-items:center}
.my-task h3{margin:0 0 8px}
.my-task p{font-size:12px;margin:0}
.my-task button{background:#e7f3ea;color:#2a7454;padding:11px 18px;border-radius:7px}
.credit-page{background:white;padding:35px;border-radius:15px;margin-top:25px}
.credit-page .score b{font-size:80px}
.credit-features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.credit-features>div{background:#f6f9f3;padding:22px;border-radius:10px}
.credit-features b{font-size:18px}
.credit-features p{font-size:12px}
.timeline{margin-top:25px;padding:20px;border-top:1px solid #e4ebe2}
.timeline p{border-bottom:1px solid #edf2e9;padding:10px 0}
.timeline span{float:right;color:#43845a}
[hidden]{display:none!important}
@media(min-width:1500px){.hero{min-height:365px}
.art{right:100px;transform:scale(1.1);top:30px}
.task{padding:25px}
}
@media(max-width:1100px){aside{width:180px;padding:25px 17px}
main{margin-left:180px}
.content{padding:25px}
.art{right:-20px;transform:scale(.8);transform-origin:right center}
.board{grid-template-columns:1fr 220px}
.task{padding:15px}
.filters{flex-wrap:wrap}
.stats>div{padding:0 13px}
.stats b{font-size:16px}
}
@media(max-width:800px){aside{position:static;width:100%;height:auto;padding:15px 20px;flex-direction:row;align-items:center;justify-content:space-between;border-bottom:1px solid #e5ebe3}
.brand{font-size:25px}
.brand b{font-size:20px}
.brand span{font-size:7px}
.back-home{margin:0;padding:8px}
.school,.aside-bottom,nav i{display:none}
nav{display:flex}
nav button{padding:10px;font-size:11px;margin:0;width:auto}
main{margin:0}
header{height:55px;padding:0 20px}
.demo{display:none}
.content{padding:20px}
.hero{padding:28px;min-height:340px}
.art{opacity:.32;right:-55px}
.hero-text{position:relative}
.hero-text p{color:#596d56}
.stats{grid-template-columns:repeat(3,1fr);padding:16px 0}
.stats .stat-last{display:none}
.stats>div{gap:8px}
.stats>div>span{font-size:18px}
.stats b{font-size:15px}
.stats small{font-size:8px}
.board{grid-template-columns:1fr}
.right-panel{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.tip{grid-column:1/-1}
.filters button{padding:8px 10px}
.search{padding:10px;width:100%}
.search input{width:100%}
footer{font-size:8px;gap:20px}
.credit-features{grid-template-columns:1fr}
.my-task{flex-wrap:wrap}
}
@media(max-width:480px){.tasks{grid-template-columns:1fr}
.right-panel{grid-template-columns:1fr}
h1{font-size:35px}
.art{right:-90px}
.hero{padding:25px 20px}
.hero-proof{font-size:8px}
.section-heading h2{font-size:17px}
.filters button{margin-right:3px;padding:8px}
.stats>div>span{display:none}
dialog{width:92%;padding:25px}
header>div{gap:8px;font-size:10px}
.ghost{font-size:10px;margin-left:2px}
.right-panel .steps{display:none}
}