:root{
  --ink:#0E3A12; --navy:#1B5E20; --tech:#4CAF50; --tech-d:#2E7D32; --tech-tint:#E8F5E9;
  --accent:#FF8A3D; --gold:#E0A93B; --bg:#F3F8F3; --card:#FFFFFF; --line:#DFEBDF;
  --txt:#16241A; --sub:#6B7F6E; --ok:#15A34A; --bad:#E0413B; --warn:#E0A93B; --grey:#64748B;
  --radius:14px; --shadow:0 2px 10px rgba(20,80,30,.07),0 8px 26px rgba(20,80,30,.05);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:#DCE8DC;color:var(--txt);-webkit-font-smoothing:antialiased;}
.app{max-width:430px;margin:0 auto;background:var(--bg);min-height:100vh;box-shadow:0 0 0 1px rgba(10,37,64,.06),0 18px 50px rgba(10,37,64,.18);display:flex;flex-direction:column;overflow:hidden;}
.hdr{position:sticky;top:0;z-index:30;background:linear-gradient(135deg,var(--ink) 0%,var(--navy) 55%,var(--tech-d) 100%);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;}
.logo{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);display:flex;align-items:center;justify-content:center;font-size:18px;}
.brand .txt{display:flex;flex-direction:column;}
.brand .nm{font-size:16px;font-weight:800;letter-spacing:.4px;}
.brand .sb{font-size:11px;opacity:.82;margin-top:2px;}
.auth-box{display:flex;align-items:center;gap:8px;}
.btn{border:none;border-radius:10px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;background:var(--tech);color:#fff;}
.btn:active{transform:scale(.97);}
.btn.ghost{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.42);}
.btn.soft{background:var(--tech-tint);color:var(--navy);}
.btn.gold{background:var(--gold);color:#3a2a00;}
.btn:disabled{opacity:.5;}
.avatar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}

.content{flex:1;overflow-y:auto;padding:14px 14px 90px;}
.tabpanel{}
.sec-t{font-size:15px;font-weight:700;color:var(--navy);margin:0 0 10px;display:flex;align-items:center;gap:6px;}
.sec-t::before{content:"";width:4px;height:15px;border-radius:2px;background:var(--tech);display:inline-block;}
.search{margin-bottom:12px;}
.search input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;background:#fff;color:var(--txt);}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:13px;margin-bottom:10px;box-shadow:var(--shadow);}
.card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.card .title{font-size:14px;font-weight:700;}
.card .meta{font-size:12px;color:var(--sub);margin:4px 0;}
.card .sol{font-size:13px;color:var(--txt);line-height:1.55;margin-top:6px;background:var(--tech-tint);border-radius:8px;padding:8px 10px;}
.card .acts{display:flex;gap:8px;margin-top:10px;}

.badge{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600;}
.badge.s0{background:#FBF3E0;color:#8a6400;}
.badge.s1{background:#E8F6EE;color:var(--ok);}
.badge.s2{background:#FDECEB;color:var(--bad);}
.badge.s3{background:#EEF1F5;color:var(--grey);}
.badge.ess{background:#FBF3E0;color:var(--gold);}

.stat{background:linear-gradient(135deg,var(--navy),var(--tech-d));color:#fff;border-radius:var(--radius);padding:18px;text-align:center;margin-bottom:14px;box-shadow:var(--shadow);}
.stat-num{font-size:34px;font-weight:800;}
.stat-cap{font-size:12px;opacity:.85;margin:2px 0 12px;}

.goods{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:10px;box-shadow:var(--shadow);}
.goods .g-main{flex:1;}
.goods .g-name{font-size:14px;font-weight:700;}
.goods .g-cost{font-size:12px;color:var(--gold);font-weight:700;margin-top:3px;}

.rank-item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:10px;box-shadow:var(--shadow);}
.rank-no{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;background:var(--tech-tint);color:var(--navy);}
.rank-no.top{background:var(--gold);color:#3a2a00;}
.rank-main{flex:1;}
.rank-name{font-size:14px;font-weight:700;}
.rank-sub{font-size:12px;color:var(--sub);margin-top:2px;}

.row{display:flex;gap:10px;}
.row .btn{flex:1;}

.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;display:flex;background:#fff;border-top:1px solid var(--line);z-index:40;box-shadow:0 -4px 18px rgba(20,80,30,.06);}
.tabbar .tab{flex:1;border:none;background:none;padding:8px 0 10px;font-size:11px;color:var(--sub);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;}
.tabbar .tab span{font-size:18px;}
.tabbar .tab.active{color:var(--navy);font-weight:700;}

.modal{position:fixed;inset:0;background:rgba(10,37,64,.45);display:flex;align-items:flex-end;justify-content:center;z-index:50;}
.modal.hidden{display:none;}
.sheet{background:#fff;width:100%;max-width:430px;border-radius:18px 18px 0 0;padding:18px 16px 24px;max-height:88vh;overflow-y:auto;}
.sheet h3{margin:0 0 14px;font-size:16px;color:var(--navy);}
.field{margin-bottom:12px;}
.field label{display:block;font-size:13px;color:var(--sub);margin-bottom:5px;}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:14px;font-family:inherit;background:#fff;color:var(--txt);}
.field textarea{resize:vertical;min-height:80px;}

.detail-row{font-size:13px;margin:6px 0;line-height:1.6;}
.detail-row .k{color:var(--sub);}
.detail-sol{background:var(--tech-tint);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.7;margin-top:8px;}
.append-item{background:#F7FAF7;border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-top:8px;font-size:13px;line-height:1.6;}
.append-item .at{font-size:11px;color:var(--sub);margin-top:4px;}

.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:rgba(14,58,18,.94);color:#fff;padding:10px 18px;border-radius:22px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90%;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.empty{text-align:center;color:var(--sub);font-size:13px;padding:24px 0;}
.spin{text-align:center;color:var(--sub);font-size:13px;padding:24px 0;}
.hidden{display:none;}
