*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.7;color:#1f2329;background:#f5f6f8}
a{color:#1677ff;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.muted{color:#8a8f99}
.btn{display:inline-block;border:0;border-radius:8px;background:#1677ff;color:#fff;font-size:15px;padding:10px 28px;cursor:pointer;text-align:center}
.btn:disabled{opacity:.6}
.btn-line{background:#fff;color:#1677ff;border:1px solid #1677ff}
.btn-block{display:block;width:100%}

.topbar{background:#fff;border-bottom:1px solid #eef0f3;position:sticky;top:0;z-index:10}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{font-size:18px;font-weight:600;color:#1f2329}
.topbar nav a{color:#4e5969;margin-left:20px}

.hero{background:linear-gradient(135deg,#1677ff,#3c8cff);color:#fff;padding:56px 0;text-align:center}
.hero h1{font-size:28px;margin-bottom:12px}
.hero p{max-width:640px;margin:0 auto 24px;opacity:.9}
.hero .btn{background:#fff;color:#1677ff}

.section{padding:28px 16px}
.section-title{font-size:20px;margin-bottom:16px}
.sub-title{font-size:16px;margin-bottom:12px}
.card{background:#fff;border-radius:12px;padding:20px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.04)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.grid .card{margin-bottom:0}
.product{display:flex;flex-direction:column;color:inherit;transition:box-shadow .2s}
.product:hover{box-shadow:0 4px 16px rgba(22,119,255,.12)}
.product h3{font-size:17px;margin-bottom:6px}
.product .muted{flex:1;font-size:14px}
.product-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.price{color:#f53f3f}
.price b{font-size:20px}
.link{color:#1677ff;font-size:14px}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{background:#fff;border-radius:12px;padding:18px 12px;text-align:center}
.step i{display:inline-block;width:28px;height:28px;line-height:28px;border-radius:50%;background:#e8f3ff;color:#1677ff;font-style:normal;margin-bottom:6px}
.step b{display:block}
.step span{font-size:13px;color:#8a8f99}

.contact p{display:flex;padding:6px 0;border-bottom:1px dashed #eef0f3}
.contact p:last-child{border-bottom:0}
.contact span{width:90px;color:#8a8f99;flex-shrink:0}

.detail-title{font-size:22px;margin-bottom:8px}
.detail-price{color:#f53f3f;margin-bottom:12px}
.detail-price b{font-size:28px}
.detail-price span{color:#8a8f99;font-size:14px}
.check-list{list-style:none}
.check-list li{padding:4px 0 4px 24px;position:relative}
.check-list li:before{content:"✓";position:absolute;left:0;color:#00b42a;font-weight:600}

.field{display:block;margin-bottom:14px}
.field span{display:block;margin-bottom:6px;color:#4e5969}
.field em{color:#f53f3f;font-style:normal}
.field input,.field textarea{width:100%;border:1px solid #e5e6eb;border-radius:8px;padding:10px 12px;font-size:15px;font-family:inherit;outline:none}
.field input:focus,.field textarea:focus{border-color:#1677ff}
.agree{display:block;font-size:13px;color:#4e5969;margin-bottom:16px}
.buy-bar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eef0f3;padding-top:16px}

.result{text-align:center;padding:40px 20px;margin-top:20px}
.result-icon{width:64px;height:64px;line-height:64px;border-radius:50%;margin:0 auto 16px;font-size:32px;color:#fff;background:#ff7d00}
.result-icon.ok{background:#00b42a}
.result h2{margin-bottom:8px}
.result .muted{margin-bottom:24px}

.article h3{font-size:16px;margin:20px 0 8px}
.article p{color:#4e5969;margin-bottom:6px}

.login{max-width:380px;margin:20px auto}
.error{color:#f53f3f;margin-bottom:12px}
.admin-head{display:flex;justify-content:space-between;align-items:baseline}
.tabs{margin-bottom:16px}
.tabs a{display:inline-block;padding:6px 16px;border-radius:16px;background:#fff;color:#4e5969;margin-right:8px}
.tabs a.active{background:#1677ff;color:#fff}
.order-row{display:flex;justify-content:space-between;margin-bottom:6px}
.order-item p{font-size:14px}
.tag{display:inline-block;padding:0 8px;border-radius:4px;background:#f2f3f5;color:#86909c;font-size:12px}
.tag.ok{background:#e8ffea;color:#00b42a}

.footer{background:#fff;border-top:1px solid #eef0f3;padding:24px 0;margin-top:20px;text-align:center;font-size:13px;color:#8a8f99}
.footer p{margin:2px 0}
.footer a{color:#8a8f99}

.loading-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:#fff}
.loading{margin-bottom:14px}
.loading i{display:inline-block;width:10px;height:10px;margin:0 4px;border-radius:50%;background:#1677ff;animation:dot 1.2s infinite ease-in-out}
.loading i:nth-child(2){animation-delay:.2s}
.loading i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{transform:scale(.4);opacity:.4}40%{transform:scale(1);opacity:1}}

@media (max-width:640px){
	.hero{padding:40px 0}
	.hero h1{font-size:22px}
	.topbar nav a{margin-left:14px;font-size:14px}
	.steps{grid-template-columns:repeat(2,1fr)}
	.grid{grid-template-columns:1fr}
}