:root{
  --p:#2b6de8; --p-d:#1d55c0; --bg:#f5f7fb; --card:#fff;
  --tx:#1a2233; --tx2:#6b7688; --ok:#18a058; --warn:#e6a23c; --err:#e04b4b;
  --r:14px; --shadow:0 4px 20px rgba(30,50,90,.08);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--tx);line-height:1.6;min-height:var(--vh,100vh)}
img{max-width:100%;height:auto}
a{color:var(--p);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(0,0,0,.05)}
.nav-logo{font-weight:800;font-size:18px}
.nav-links{display:flex;gap:18px;font-size:14px}
.nav-links a{color:var(--tx2)}
.nav-cta{font-size:13px;color:var(--p);font-weight:600}

/* hero */
.hero{padding:48px 20px 40px;text-align:center;background:linear-gradient(160deg,#eaf1ff 0%,#f5f7fb 70%)}
.hero h1{font-size:34px;line-height:1.25;font-weight:800}
.hero-sub{margin:14px 0 22px;color:var(--tx2);font-size:15px}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:520px;margin:0 auto 26px;
  background:rgba(255,255,255,.7);border-radius:var(--r);padding:16px 8px;box-shadow:var(--shadow)}
.hero-stats b{display:block;font-size:20px;color:var(--p)}
.hero-stats span{font-size:12px;color:var(--tx2)}

/* sections */
.section{max-width:720px;margin:0 auto;padding:32px 16px}
.section h2{font-size:22px;margin-bottom:16px}
.tabs{display:flex;gap:8px;margin-bottom:14px}
.tab{padding:8px 18px;border-radius:20px;background:#fff;color:var(--tx2);font-size:14px;border:1px solid #e3e8f0}
.tab.active{background:var(--p);color:#fff;border-color:var(--p)}

/* spec grid */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.spec-item{background:var(--card);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);cursor:pointer;border:2px solid transparent;transition:.15s}
.spec-item.active{border-color:var(--p)}
.spec-item h4{font-size:15px}
.spec-item p{font-size:12px;color:var(--tx2);margin-top:4px}

/* maker */
.maker-card,.result-card{background:var(--card);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
.upload-area{border:2px dashed #c9d4e8;border-radius:var(--r);padding:36px 16px;text-align:center;color:var(--tx2);cursor:pointer;transition:.15s}
.upload-area:active{border-color:var(--p);background:#f0f5ff}
.upload-icon{font-size:36px}
.upload-tip{font-size:12px;margin-top:6px}
.preview-wrap{text-align:center}
#previewImg{max-height:300px;border-radius:8px;box-shadow:var(--shadow)}
.preview-meta{font-size:12px;color:var(--tx2);margin-top:8px}
.bg-picker{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:14px;color:var(--tx2)}
.bg-dot{width:30px;height:30px;border-radius:50%;border:2px solid #dfe5ef}
.bg-dot.active{border-color:var(--p);box-shadow:0 0 0 3px rgba(43,109,232,.18)}
.process-log{display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--tx2);font-size:14px}
.spinner{width:18px;height:18px;border:3px solid #dbe4f5;border-top-color:var(--p);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.q-warn{margin-top:12px;background:#fff7ea;color:#9a6b1b;border-radius:10px;padding:10px 14px;font-size:13px}

/* result */
.result-card h3{margin-bottom:12px}
.result-imgs{display:flex;gap:14px}
.result-imgs img{max-height:260px;border-radius:8px;box-shadow:var(--shadow)}
.result-imgs span{display:block;font-size:12px;color:var(--tx2);text-align:center;margin-top:6px}
.result-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.privacy-note{font-size:12px;color:var(--tx2);margin-top:12px}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.price-card{background:var(--card);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);text-align:center;position:relative}
.price-card.hot{border:2px solid var(--p)}
.hot-tag{position:absolute;top:-10px;right:14px;background:var(--p);color:#fff;font-size:11px;padding:2px 10px;border-radius:10px}
.price{font-size:28px;font-weight:800;color:var(--p);margin:8px 0}
.price span{font-size:13px;color:var(--tx2);font-weight:400}
.price-card ul{list-style:none;font-size:13px;color:var(--tx2);margin-bottom:14px}
.price-card li{padding:3px 0}

/* buttons */
.btn{display:inline-block;padding:12px 22px;border-radius:12px;font-size:15px;font-weight:600;text-align:center;transition:.15s}
.btn-primary{background:var(--p);color:#fff}
.btn-primary:active{background:var(--p-d)}
.btn-primary:disabled{background:#b9c8e8;cursor:not-allowed}
.btn-ghost{background:#fff;color:var(--p);border:1px solid #c9d9f7}
.btn-big{width:100%;max-width:420px;padding:15px;font-size:17px}

/* modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(15,25,45,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:#fff;border-radius:16px;max-width:420px;width:100%;padding:22px;max-height:82vh;overflow-y:auto}
.modal-box h3{font-size:17px;margin-bottom:10px}
.modal-text{font-size:13px;color:var(--tx2);max-height:260px;overflow-y:auto;margin-bottom:12px}
.modal-text p,.modal-text li{margin-bottom:6px}
.modal-text ul{padding-left:18px}
.agree-row{display:flex;gap:8px;align-items:center;font-size:13px;margin-bottom:14px}
.modal-btns{display:flex;gap:10px}
.modal-btns .btn{flex:1}

/* footer */
.footer{text-align:center;padding:28px 16px calc(30px + env(safe-area-inset-bottom));color:var(--tx2);font-size:12px}
.footer-links{margin-bottom:8px}

/* toast */
.toast{position:fixed;bottom:15%;left:50%;transform:translateX(-50%);z-index:200;background:rgba(20,30,50,.88);color:#fff;
  padding:10px 20px;border-radius:10px;font-size:14px;max-width:80vw;text-align:center}

@media (max-width:640px){
  .hero h1{font-size:27px}
  .hero-stats b{font-size:17px}
  .spec-grid{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
  .price-grid{grid-template-columns:1fr}
}