@charset "UTF-8";
/* styles.v9.css — Profile editor (avatar crop/zoom) + UCP profile card */

/* ── UCP profile card ──────────────────────────────────────────────── */

.v7-ucp-profile {
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 244, 222, 0.08);
  background: rgba(28, 24, 19, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.v7-ucp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.v7-ucp-head .eyebrow {
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  color: rgba(216, 175, 132, 0.78) !important;
  margin: 0 0 2px;
}
.v7-ucp-head h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.v7-ucp-edit {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 102, 133, 0.32);
  background: linear-gradient(180deg, #d84a63, #b73a52);
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 26px -12px rgba(216, 74, 99, 0.55);
  transition: transform 160ms cubic-bezier(.22,1,.36,1);
}
.v7-ucp-edit:hover { transform: translateY(-1px); }

.v7-ucp-card {
  background: rgba(14, 12, 9, 0.5);
  box-shadow: none;
  padding: 16px;
}
.v7-ucp-card .v7-profile-avatar { width: 76px; height: 76px; font-size: 1.8rem; }
.v7-ucp-card .v7-profile-name { font-size: 1.1rem; }

.v7-ucp-public-link {
  display: inline-block;
  margin-top: 8px;
  color: #ffd99c;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(200, 151, 63, 0.32);
}
.v7-ucp-public-link:hover {
  color: #ffe1a7;
  border-bottom-color: rgba(200, 151, 63, 0.6);
}

/* Make sure profile-avatar shows the image properly when there's a URL */
.v7-profile-avatar.has-img {
  background-clip: padding-box;
  /* gradient placeholder fallback when image hasn't loaded yet */
  background-color: rgba(216, 74, 99, 0.18);
}

/* ── Editor modal: two-column layout with crop preview ──────────────── */

.v7-bio-modal .modal-panel {
  width: min(520px, calc(100vw - 28px));
  padding: 22px;
  gap: 14px;
}

.v7-edit-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 520px) {
  .v7-edit-row { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

.v7-crop {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.v7-crop-circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 2px dashed rgba(200, 151, 63, 0.42);
  background: radial-gradient(circle at 40% 35%, rgba(216, 74, 99, 0.32), rgba(200, 151, 63, 0.18));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 3rem;
  font-weight: 800;
  cursor: grab;
  user-select: none;
  touch-action: none;
  position: relative;
  overflow: hidden;
}
.v7-crop-circle.has-img {
  border-style: solid;
  border-color: rgba(200, 151, 63, 0.6);
  color: transparent;
  background-color: #15120e;
}
.v7-crop-circle.is-dragging { cursor: grabbing; }
.v7-crop-circle::after {
  /* Faint inner ring to suggest the crop boundary */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 222, 0.08);
  pointer-events: none;
}

.v7-crop-hint {
  margin: 0;
  font-size: 0.72rem;
  color: rgba(200, 185, 161, 0.62);
  text-align: center;
}

.v7-edit-fields {
  display: grid;
  gap: 12px;
}
.v7-edit-fields label > span {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(200, 185, 161, 0.86);
  margin-bottom: 4px;
}
.v7-edit-fields input[type="url"] {
  width: 100%;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 244, 222, 0.12);
  background: rgba(14, 12, 9, 0.55);
  color: var(--text, #f6efe2);
  padding: 0 12px;
  font-size: 0.9rem;
}
.v7-edit-fields input[type="url"]:focus {
  outline: none;
  border-color: rgba(200, 151, 63, 0.42);
  box-shadow: 0 0 0 1px rgba(200, 151, 63, 0.32);
}

/* Zoom slider */
.v7-zoom-val {
  font-variant-numeric: tabular-nums;
  color: #ffd99c;
}
.v7-zoom {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  margin: 6px 0 0;
}
.v7-zoom::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(200, 151, 63, 0.42), rgba(216, 74, 99, 0.42));
}
.v7-zoom::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(200, 151, 63, 0.42), rgba(216, 74, 99, 0.42));
}
.v7-zoom::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe1a7, #d8a04a);
  border: 0;
  cursor: pointer;
  margin-top: -6px;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.6);
}
.v7-zoom::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe1a7, #d8a04a);
  border: 0;
  cursor: pointer;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.6);
}