*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:#f5f5f7;color:#333;line-height:1.6}
.page{max-width:640px;margin:0 auto;padding:16px;padding-bottom:60px}

/* Hero */
.hero{text-align:center;padding:24px 16px 20px;background:linear-gradient(135deg,#e60012,#ff9966);border-radius:16px;color:#fff;margin-bottom:16px}
.hero-badge{display:inline-block;background:rgba(255,255,255,.2);padding:4px 12px;border-radius:20px;font-size:12px;margin-bottom:10px}
.hero h1{font-size:26px;font-weight:800;margin-bottom:6px}
.hero-sub{font-size:14px;opacity:.9}

/* Card */
.card{background:#fff;border-radius:14px;padding:18px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card-title{font-size:16px;font-weight:700;margin-bottom:12px;padding-left:10px;border-left:4px solid #e60012}

/* Color grid */
.color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.color-item{cursor:pointer;text-align:center;display:block}
.color-item input{display:none}
.color-preview{display:block;width:100%;aspect-ratio:1.2;border-radius:10px;border:2px solid #eee;margin-bottom:6px;transition:all .2s}
.color-item input:checked + .color-preview{border-color:#e60012;box-shadow:0 0 0 3px rgba(230,0,18,.15)}
.color-label{font-size:12px;color:#666}
.red-bg{background:#fff;position:relative;overflow:hidden}
.red-bg:before{content:"";position:absolute;inset:8px;background:#e60012;border-radius:4px}
.pink-bg{background:#fff;position:relative;overflow:hidden}
.pink-bg:before{content:"";position:absolute;inset:8px;background:#ff6699;border-radius:4px}
.blue-bg{background:#fff;position:relative;overflow:hidden}
.blue-bg:before{content:"";position:absolute;inset:8px;background:#0066cc;border-radius:4px}
.black-bg{background:#fff;position:relative;overflow:hidden}
.black-bg:before{content:"";position:absolute;inset:8px;background:#1a1a1a;border-radius:4px}
.gradient-bg{background:linear-gradient(135deg,#e60012,#ff9900,#33cc33)}

/* Form */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.form-group input,.form-group textarea{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:15px;outline:none}
.form-group input:focus,.form-group textarea:focus{border-color:#e60012}
.hint{font-size:12px;color:#999;margin-top:4px;display:block}

/* Feature list */
.feature-list{list-style:none}
.feature-list li{padding:8px 0;border-bottom:1px dashed #eee;font-size:14px}
.feature-list li:last-child{border-bottom:none}

/* Buttons */
.btn-primary{display:block;width:100%;padding:14px;background:linear-gradient(135deg,#e60012,#ff4d4f);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;margin:16px 0;box-shadow:0 4px 12px rgba(230,0,18,.3)}
.btn-primary:disabled{opacity:.5}
.btn-secondary{display:inline-block;padding:10px 18px;background:#fff;border:1px solid #ddd;border-radius:8px;font-size:14px;cursor:pointer;margin:4px}

/* Result */
.result{background:#fff;border-radius:14px;padding:20px;margin-top:16px;text-align:center}
.qrcode-box{display:inline-block;padding:16px;background:#fff;border:1px solid #eee;border-radius:12px}
#qrcodeCanvas img,#qrcodeCanvas canvas{display:block;margin:0 auto}
.qrcode-tip{font-size:13px;color:#888;margin-top:10px}
.result-actions{margin-top:12px}
.warn{font-size:12px;color:#fa8c16;background:#fff7e6;padding:10px;border-radius:8px;margin-top:12px;text-align:left}

/* View page */
.view-header{background:linear-gradient(135deg,#e60012,#ff9966);color:#fff;text-align:center;padding:28px 16px;border-radius:16px;margin-bottom:16px}
.view-header h1{font-size:24px}
.view-header p{font-size:13px;opacity:.9}
.content-text{font-size:16px;line-height:1.8;white-space:pre-wrap}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gallery img{width:100%;border-radius:8px;aspect-ratio:1;object-fit:cover}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.preview-grid img{width:100%;border-radius:8px;aspect-ratio:1;object-fit:cover}
.empty{text-align:center;padding:40px;color:#999}

/* Footer */
.footer{text-align:center;padding:20px 0;font-size:12px;color:#999}
.footer a{color:#999}

/* 手机端优化 */
@media (max-width: 480px) {
  .page { padding: 12px; padding-bottom: 60px; }
  .hero { padding: 28px 16px; }
  .hero h1 { font-size: 22px; }
  .card { padding: 14px; margin-bottom: 10px; border-radius: 12px; }
  .card-title { font-size: 15px; margin-bottom: 10px; }
  .btn-primary { padding: 13px; font-size: 15px; }
  .form-group input, .form-group textarea { padding: 11px; font-size: 16px; }
  .feature-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .feature-card { padding: 14px 8px; }
  .feature-card .icon { font-size: 28px; }
  .feature-card h3 { font-size: 13px; }
  .tpl-grid { gap: 6px; }
  .tpl-preview { padding: 8px 2px; font-size: 18px; }
  .type-preview { padding: 14px 6px; font-size: 12px; }
  .preview-grid { gap: 6px; }
  .gallery { gap: 6px; }
}
/* 输入框去除默认缩放 */
input, textarea, select { font-size: 16px; }
/* 按钮点击反馈 */
.btn-primary:active, .btn-secondary:active { transform: scale(0.98); opacity: 0.9; }
/* 卡片阴影优化 */
.card { box-shadow: 0 1px 4px rgba(0,0,0,0.05); transition: box-shadow 0.2s; }
/* 预览图圆角 */
.preview-grid img, .gallery img { border-radius: 10px; }