/* === 全局重置与基础 === */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:#f7f7f7;color:#353535;line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* === 配色变量 === */
:root{
  --primary:#e64340;
  --primary-dark:#ce3c39;
  --accent:#007aff;
  --bg:#f7f7f7;
  --card-bg:#fff;
  --text:#353535;
  --text-light:#888;
  --border:#e5e5e5;
  --success:#48c23d;
  --gold:#d4a017;
  --radius:12px;
}

/* === 容器 === */
.container{max-width:480px;margin:0 auto;padding:16px;min-height:100vh}

/* === 头部 === */
.header{text-align:center;padding:24px 0 16px}
.header h1{font-size:22px;color:var(--primary);font-weight:700;margin-bottom:4px}
.header p{font-size:13px;color:var(--text-light)}

/* === 卡片 === */
.card{background:var(--card-bg);border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.card-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:12px;padding-left:10px;border-left:3px solid var(--primary)}

/* === 表单 === */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:14px;color:var(--text);margin-bottom:6px;font-weight:500}
.form-input,.form-select{width:100%;height:44px;border:1px solid var(--border);border-radius:8px;padding:0 14px;font-size:15px;color:var(--text);background:#fff;outline:none;transition:border .2s}
.form-input:focus,.form-select:focus{border-color:var(--primary)}
.form-row{display:flex;gap:10px}
.form-row .form-group{flex:1}
.gender-group{display:flex;gap:12px}
.gender-btn{flex:1;height:44px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:15px;color:var(--text);cursor:pointer;transition:all .2s;text-align:center;line-height:44px}
.gender-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* === 按钮 === */
.btn{display:block;width:100%;height:48px;border:none;border-radius:24px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;line-height:48px}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 4px 12px rgba(230,67,64,.3)}
.btn-primary:active{transform:scale(.98)}
.btn-outline{background:#fff;color:var(--primary);border:1px solid var(--primary)}

/* === 排盘动画区 === */
.paipan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}
.pillar{text-align:center;background:var(--card-bg);border-radius:8px;padding:12px 4px;border:1px solid var(--border)}
.pillar-label{font-size:12px;color:var(--text-light);margin-bottom:6px}
.pillar-gan{font-size:20px;font-weight:700;margin-bottom:2px}
.pillar-zhi{font-size:20px;font-weight:700}
.wuxing-mu{color:#48c23d}.wuxing-huo{color:#e64340}.wuxing-tu{color:#d4a017}.wuxing-jin{color:#999}.wuxing-shui{color:#333}

/* === 结果预览 === */
.result-section{margin-bottom:16px}
.result-tag{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;margin-right:6px;margin-bottom:6px}
.tag-jin{background:#f5f5f5;color:#666}.tag-mu{background:#e8f5e9;color:#2e7d32}
.tag-shui{background:#e3f2fd;color:#1565c0}.tag-huo{background:#fce4ec;color:#c62828}
.tag-tu{background:#fff8e1;color:#f57f17}

/* === 支付页 === */
.pay-price{text-align:center;font-size:36px;font-weight:700;color:var(--primary);margin:20px 0}
.pay-price span{font-size:16px;font-weight:400}
.pay-methods{display:flex;flex-direction:column;gap:10px;margin:20px 0}
.pay-method{display:flex;align-items:center;padding:14px;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s}
.pay-method.active{border-color:var(--primary);background:#fff5f5}
.pay-method-icon{width:28px;height:28px;border-radius:4px;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff}
.pay-wx{background:#48c23d}.pay-ali{background:#007aff}
.pay-method-name{font-size:15px}

/* === 底部 === */
.footer{text-align:center;padding:20px 0;font-size:12px;color:var(--text-light)}

/* === 加载动画 === */
.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999}
.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{margin-top:16px;font-size:14px;color:var(--text-light)}

/* === 隐藏/显示 === */
.hidden{display:none!important}