/* UI_HM4_HANDLER_CREATE_USER_START */
.hm4-create-entry {
  display: grid;
  gap: 10px;
  margin: 12px 0 4px;
}
.hm4-primary-button,
.hm4-secondary-button,
.hm4-danger-button {
  min-height: 48px;
  border-radius: 14px;
  padding: 0 16px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 760;
  cursor: pointer;
}
.hm4-primary-button { background: #101828; color: #fff; }
.hm4-secondary-button { background: #fff; color: #101828; border-color: #d0d5dd; }
.hm4-danger-button { background: #fff; color: #b42318; border-color: #fecdca; }
.hm4-primary-button:disabled,
.hm4-secondary-button:disabled,
.hm4-danger-button:disabled { opacity: .52; cursor: not-allowed; }
.hm4-create-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  background: #f7f8fa;
  overflow: hidden;
}
.hm4-create-overlay[hidden] { display: none !important; }
.hm4-create-header {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 48px;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  border-bottom: 1px solid #e4e7ec;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
}
.hm4-create-header h2 { margin: 0; font-size: 19px; line-height: 1.2; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm4-create-body { overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
.hm4-create-form { display: grid; gap: 16px; max-width: 520px; margin: 0 auto; }
.hm4-form-section,
.hm4-review-card,
.hm4-receipt-card,
.hm4-status-card {
  border: 1px solid #e4e7ec;
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.hm4-form-section { display: grid; gap: 14px; }
.hm4-form-section h3,
.hm4-review-card h3,
.hm4-receipt-card h3 { margin: 0; font-size: 16px; }
.hm4-field { display: grid; gap: 7px; }
.hm4-field > span { color: #344054; font-size: 13px; font-weight: 700; }
.hm4-field input {
  width: 100%; min-height: 48px; box-sizing: border-box;
  border: 1px solid #d0d5dd; border-radius: 12px; background: #fff;
  padding: 11px 13px; color: #101828; font: inherit;
}
.hm4-field input:focus { outline: 3px solid rgba(47,106,255,.18); border-color: #2f6aff; }
.hm4-field input[aria-invalid="true"] { border-color: #d92d20; }
.hm4-field-error { min-height: 17px; margin: 0; color: #b42318; font-size: 12px; }
.hm4-password-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.hm4-password-row .hm4-secondary-button { min-width: 104px; }
.hm4-helper { margin: 0; color: #667085; font-size: 12px; line-height: 1.45; }
.hm4-fixed-contract { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hm4-fixed-contract div { padding: 11px; border-radius: 12px; background: #f2f4f7; }
.hm4-fixed-contract small { display:block; color:#667085; margin-bottom:4px; }
.hm4-fixed-contract strong { font-size: 14px; }
.hm4-review-list,
.hm4-receipt-list { display:grid; gap:10px; margin-top:12px; }
.hm4-review-row,
.hm4-receipt-row { display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid #f2f4f7; padding-bottom:10px; }
.hm4-review-row:last-child,
.hm4-receipt-row:last-child { border-bottom:0; padding-bottom:0; }
.hm4-review-row span,
.hm4-receipt-row span { color:#667085; }
.hm4-review-row strong,
.hm4-receipt-row strong { text-align:right; overflow-wrap:anywhere; }
.hm4-status-card { display:grid; gap:8px; }
.hm4-status-card[data-tone="error"] { border-color:#fecdca; background:#fffbfa; }
.hm4-status-card[data-tone="warning"] { border-color:#fedf89; background:#fffcf5; }
.hm4-status-card[data-tone="success"] { border-color:#abefc6; background:#f6fef9; }
.hm4-status-card strong { font-size:15px; }
.hm4-status-card p { margin:0; color:#475467; line-height:1.5; }
.hm4-create-footer {
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid #e4e7ec; background:#fff;
}
.hm4-create-footer .hm4-primary-button { grid-column: 1 / -1; }
.hm4-create-footer[data-single="true"] .hm4-secondary-button { display:none; }
.hm4-receipt-secret { display:grid; gap:10px; margin-top:14px; padding:14px; border:1px dashed #98a2b3; border-radius:14px; background:#f9fafb; }
.hm4-receipt-secret code { user-select:none; filter: blur(6px); }
.hm4-receipt-secret[data-revealed="true"] code { filter:none; user-select:text; }
.hm4-secret-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hm4-operation-pill { display:inline-flex; width:max-content; align-items:center; gap:7px; border-radius:999px; padding:6px 10px; background:#eef4ff; color:#3538cd; font-size:12px; font-weight:750; }
.hm4-spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; display:inline-block; animation:hm4spin .8s linear infinite; vertical-align:middle; margin-right:8px; }
@keyframes hm4spin { to { transform:rotate(360deg); } }
@media (max-width: 359px) {
  .hm4-fixed-contract { grid-template-columns:1fr; }
  .hm4-create-body { padding-inline:12px; }
  .hm4-create-footer { padding-inline:12px; }
  .hm4-password-row { grid-template-columns:1fr; }
  .hm4-secret-actions { grid-template-columns:1fr; }
}
/* UI_HM4_HANDLER_CREATE_USER_END */
