/* =========================================================
   加入页样式
   ========================================================= */

.join-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-12); padding: var(--s-12) 0; }
.join-side h2 { font-size: var(--fs-h2); font-weight: 400; margin-bottom: var(--s-4); }
.join-side p { color: var(--c-mute); margin-bottom: var(--s-4); line-height: 1.7; max-width: 38ch; }
.join-side ul { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.join-side li {
  display: grid; grid-template-columns: 32px 1fr; gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}
.join-side li span:first-child { font-family: var(--font-mono); color: var(--c-primary); font-weight: 500; }

@media (max-width: 880px) {
  .join-layout { grid-template-columns: 1fr; gap: var(--s-8); }
}

.apply-form {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-8);
  background: var(--c-surface);
}
.apply-form h3 { font-size: var(--fs-h3); font-weight: 500; margin-bottom: var(--s-2); }
.apply-form .form-meta { color: var(--c-mute); font-size: var(--fs-sm); margin-bottom: var(--s-6); }
.field { margin-bottom: var(--s-4); }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin-bottom: 0.4rem;
}
.field label .req { color: var(--c-accent); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  background: var(--c-bg);
  transition: all var(--t-fast) var(--ease-out);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--c-primary);
  background: var(--c-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent);
}
.field textarea { resize: vertical; min-height: 96px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }

.form-actions { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-6); }
.form-actions .btn { flex: 1; justify-content: center; }
.form-msg {
  font-size: var(--fs-sm);
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-sm);
  margin-top: var(--s-3);
  display: none;
}
.form-msg.is-ok    { display: block; background: #DCFCE7; color: #166534; }
.form-msg.is-error { display: block; background: #FEE2E2; color: #991B1B; }