.mhrf-input{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  color: var(--mhrf-text);
  padding: 14px 14px;
  outline: none;
}
.mhrf-input:focus{ border-color: rgba(192,19,58,.65); box-shadow: 0 0 0 3px rgba(192,19,58,.18); }
.mhrf-input-row{ display:flex; gap:10px; align-items:center; }
.mhrf-icon-btn{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  color: var(--mhrf-text);
  border-radius: 16px;
  padding: 12px 12px;
  cursor: pointer;
  min-width: 48px;
}

/* Modal close button — match provided X.svg (34x34 dark tile with subtle gradient border) */
button.mhrf-icon-btn.mhrf-modal__close{
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 1px solid transparent; /* we draw the border via layered backgrounds */
  border-radius: 10px;
  background:
    linear-gradient(#101114,#101114) padding-box,
    linear-gradient(135deg, rgba(42,46,54,.95), rgba(35,38,45,.55)) border-box;
  color: transparent; /* hide × */
  font-size: 0;
  line-height: 0;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* Draw the X icon */
button.mhrf-icon-btn.mhrf-modal__close::before,
button.mhrf-icon-btn.mhrf-modal__close::after{
  content: "";
  position: absolute;
  width: 14px;
  height: 1.8px;
  background: #d7d7d7;
  border-radius: 999px;
  opacity: .9;
}
button.mhrf-icon-btn.mhrf-modal__close::before{ transform: rotate(45deg); }
button.mhrf-icon-btn.mhrf-modal__close::after{ transform: rotate(-45deg); }

/* States */
button.mhrf-icon-btn.mhrf-modal__close:hover{
  background:
    linear-gradient(#12141a,#12141a) padding-box,
    linear-gradient(135deg, rgba(60,66,78,.95), rgba(40,44,52,.65)) border-box;
}
button.mhrf-icon-btn.mhrf-modal__close:hover::before,
button.mhrf-icon-btn.mhrf-modal__close:hover::after{
  background: #ffffff;
  opacity: .92;
}

button.mhrf-icon-btn.mhrf-modal__close:active{
  transform: translateY(1px);
  background:
    linear-gradient(#0c0d10,#0c0d10) padding-box,
    linear-gradient(135deg, rgba(34,38,46,.95), rgba(28,31,37,.55)) border-box;
}
button.mhrf-icon-btn.mhrf-modal__close:active::before,
button.mhrf-icon-btn.mhrf-modal__close:active::after{
  opacity: .85;
}

/* Accessible focus */
button.mhrf-icon-btn.mhrf-modal__close:focus{ outline: none; }
button.mhrf-icon-btn.mhrf-modal__close:focus-visible{
  box-shadow: 0 0 0 3px rgba(192,19,58,.28);
}

/* Disabled */
button.mhrf-icon-btn.mhrf-modal__close:disabled{
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
button.mhrf-icon-btn.mhrf-modal__close:disabled::before,
button.mhrf-icon-btn.mhrf-modal__close:disabled::after{
  background: #d7d7d7;
  opacity: .7;
}

.mhrf-check{ display:flex; gap:10px; align-items:flex-start; margin-top: 12px; color: var(--mhrf-muted); font-size: 12px; }
.mhrf-check input{ margin-top: 3px; }



/* Profile modal (Bio + Photo) UX */
.mhrf-modal__panel--profile{ padding: 24px 22px 18px; }
.mhrf-modal__title--xl{ font-size: 44px; letter-spacing: .2px; }
.mhrf-modal__subtitle{
  margin-top: 6px;
  color: rgba(244,245,247,.64);
  font-size: 14px;
}
.mhrf-field{ margin-top: 16px; }
.mhrf-textarea{
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  color: var(--mhrf-text);
  padding: 16px 14px;
  outline: none;
  resize: none;
  min-height: 140px;
}
.mhrf-textarea:focus{ border-color: rgba(192,19,58,.65); box-shadow: 0 0 0 3px rgba(192,19,58,.18); }

.mhrf-field__hint{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(244,245,247,.52);
}
.mhrf-counter{ font-variant-numeric: tabular-nums; }

.mhrf-avatarrow{ display:flex; align-items:center; gap: 14px; }
.mhrf-avatarchip{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(120% 120% at 30% 20%, rgba(192,19,58,.25), rgba(0,0,0,.35));
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.mhrf-avatarchip__img{ width:100%; height:100%; object-fit:cover; display:block; }
.mhrf-avatarchip__fallback{ font-weight: 900; font-size: 22px; color: rgba(244,245,247,.92); }

.mhrf-filepick{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  align-items:center;
  gap: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  padding: 14px 14px;
}
.mhrf-fileinput{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.mhrf-filebtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(244,245,247,.92);
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.mhrf-filebtn:hover{ filter: brightness(1.06); }
.mhrf-filebtn:active{ transform: translateY(1px); }
.mhrf-filename{
  min-width: 0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(244,245,247,.60);
  font-size: 14px;
  font-weight: 650;
  font-style: italic;
}

.mhrf-actions{
  display:flex;
  align-items:center;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 16px;
  margin-top: 16px;
}
.mhrf-actions .mhrf-btn{ min-width: 160px; }
.mhrf-actions__hint{
  margin-left: auto;
  color: rgba(244,245,247,.46);
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 520px){
  .mhrf-modal__title--xl{ font-size: 34px; }
  .mhrf-actions{ flex-wrap: wrap; }
  .mhrf-actions .mhrf-btn{ min-width: 0; flex: 1 1 auto; }
  .mhrf-actions__hint{ width:100%; margin-left:0; text-align:right; }
}