.join-types { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:25px; }
.join-card { border:2px solid #e5e5e5; border-radius:8px; padding:22px; text-align:center; cursor:pointer; transition:.2s; background:#fff; }
.join-card:hover, .join-card.active { border-color:#3b7ddd; box-shadow:0 6px 16px rgba(59,125,221,.12); transform:translateY(-2px); }
.join-title { font-size:16px; font-weight:600; margin-bottom:8px; }
.join-desc { font-size:12px; color:#888; line-height:1.7; }
.join-icon { font-size:34px; color:#3b7ddd; margin-bottom:10px; }
.upload-box { border:2px dashed #d8d8d8; border-radius:8px; padding:24px; text-align:center; cursor:pointer; background:#fafafa; }
.upload-box:hover { border-color:#3b7ddd; background:#f7fbff; }
.upload-note { color:#999; font-size:12px; margin-top:8px; }
.upload-result { margin-top:10px; font-size:12px; color:#3b7ddd; word-break:break-all; }
.join-submit-wrap { text-align:center; margin-top:36px; margin-bottom:28px; }
.join-btn-back { display:inline-block; border:1px solid #dcdfe6; color:#606266; background:#fff; padding:10px 34px; border-radius:4px; margin-right:12px; }
.join-btn-back:hover { color:#3b7ddd; border-color:#3b7ddd; }
.join-btn-main { border:none; color:#fff; background:#409eff; padding:12px 62px; border-radius:4px; font-weight:600; box-shadow:0 8px 18px rgba(64,158,255,.28); }
.join-btn-main:hover { background:#2f8de6; }
.join-flow-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.join-flow-item { text-align:center; }
.join-flow-step { width:60px; height:60px; border-radius:50%; color:#fff; font-size:24px; font-weight:700; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; }
.join-flow-step-1 { background:#409eff; }
.join-flow-step-2 { background:#67c23a; }
.join-flow-step-3 { background:#e6a23c; }
.join-flow-step-4 { background:#f56c6c; }
.join-flow-title { font-size:16px; color:#303133; margin-bottom:8px; font-weight:600; }
.join-flow-desc { color:#909399; font-size:13px; line-height:1.7; }
.join-subtitle { font-size:15px; font-weight:600; color:#303133; margin:18px 0 12px; padding-bottom:8px; border-bottom:1px solid #eef2f7; }
.join-type-fields { margin-bottom:8px; }
@media (max-width: 992px){ .join-flow-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 768px){
  .join-types { grid-template-columns:1fr; }
  .join-flow-grid { grid-template-columns:1fr; }
}