.hccs-rf, .hccs-rf * { box-sizing: border-box; }
.rf-wrap { position: relative; }
.rf-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 18px;
  max-width: 820px;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.rf-title { margin: 0 0 14px; font-size: 22px; line-height: 1.2; }
.rf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.rf-field label { display:block; font-weight: 600; margin-bottom: 6px; }
.rf-req { color: #c00; }
.rf-field input, .rf-field select {
  width: 100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  outline: none;
}
.rf-field input:focus, .rf-field select:focus { border-color: rgba(0,0,0,.35); }
.rf-help { font-size: 12px; opacity: .75; margin-top: 6px; }
.rf-actions { display:flex; gap: 10px; margin-top: 16px; }
.rf-btn {
  appearance: none;
  border: 1px solid rgba(0,0,0,.18);
  background: #f6f6f6;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.rf-btn:disabled { opacity: .55; cursor: not-allowed; }
.rf-primary { background: #111; color: #fff; border-color: #111; }
.rf-ghost { background: transparent; }
.rf-msg { margin-top: 12px; padding: 10px 12px; border-radius: 10px; min-height: 18px; }
.rf-info { background: rgba(0,0,0,.04); }
.rf-success { background: rgba(0,128,0,.08); border: 1px solid rgba(0,128,0,.18); }
.rf-error { background: rgba(255,0,0,.06); border: 1px solid rgba(255,0,0,.16); }

.rf-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(2px);
  padding: 18px;
}
.rf-center { text-align: center; }
.rf-spinner {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,.12);
  border-top-color: rgba(0,0,0,.6);
  margin: 4px auto 12px;
  animation: rfspin 0.9s linear infinite;
}
@keyframes rfspin { to { transform: rotate(360deg); } }
.rf-loading-title { font-weight: 700; font-size: 16px; }
.rf-loading-sub { margin-top: 8px; opacity: .85; font-size: 13px; }

@media (max-width: 720px) {
  .rf-grid { grid-template-columns: 1fr; }
}