.profile-image-photo,
.summary-profile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  z-index: 1;
}
.profile-image,
.summary-profile-image { position: relative; overflow: hidden; }
.has-profile-photo .profile-image-letter,
.has-profile-photo .summary-profile-letter { display: none !important; }
.has-profile-photo .profile-image-sparkle,
.has-profile-photo .summary-profile-heart,
.has-profile-photo .summary-profile-sparkle { z-index: 2; }

.profile-image-admin-editor {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.profile-image-admin-preview {
  width: 132px;
  aspect-ratio: 1;
  border: 1px solid var(--border-color);
  border-radius: 28px;
  background: var(--soft-bg);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--text-sub);
  font-weight: 800;
}
.profile-image-admin-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-image-admin-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.profile-image-admin-controls > p { width: 100%; margin: 0; color: var(--text-sub); font-size: 12px; line-height: 1.55; }
.profile-image-file-button { cursor: pointer; }
.profile-image-file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

@media (max-width: 620px) {
  .profile-image-admin-editor { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .profile-image-admin-preview { width: 96px; border-radius: 22px; }
  .profile-image-admin-controls .secondary-button { min-height: 42px; }
}


.profile-image-photo,
.summary-profile-photo,
.profile-image-admin-preview img {
  transform-origin: center center;
  transition: transform .16s ease, object-position .16s ease;
  will-change: transform, object-position;
}
.profile-image-transform-controls {
  width: 100%;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--soft-bg);
}
.profile-image-transform-controls label {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(120px, 1fr);
  align-items: center;
  gap: 12px;
}
.profile-image-transform-controls label > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-main);
  font-weight: 800;
  white-space: nowrap;
}
.profile-image-transform-controls output {
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}
.profile-image-transform-controls input[type="range"] {
  width: 100%;
  accent-color: var(--accent-color, #b78ad6);
}
@media (max-width: 620px) {
  .profile-image-admin-editor { grid-template-columns: 1fr; align-items: start; }
  .profile-image-admin-preview { width: min(150px, 48vw); }
  .profile-image-transform-controls label { grid-template-columns: 1fr; gap: 5px; }
}


/* v14: profile photo decorations removed so the image is never covered */
.profile-image-sparkle,
.summary-profile-heart,
.summary-profile-sparkle {
  display: none !important;
}


/* v15: profile image precision alignment */
.profile-image,
.summary-profile-image,
.profile-image-admin-preview {
  box-sizing: border-box !important;
  isolation: isolate;
}
.profile-image-photo,
.summary-profile-photo,
.profile-image-admin-preview img {
  inset: 3px !important;
  width: calc(100% - 6px) !important;
  height: calc(100% - 6px) !important;
  border-radius: calc(100% / 4.5) !important;
  clip-path: inset(0 round calc(100% / 4.5));
  backface-visibility: hidden;
}
.profile-image-photo,
.summary-profile-photo {
  z-index: 1;
}
.profile-image {
  padding: 0 !important;
  border-width: 2px !important;
  outline-offset: 2px !important;
}
.summary-profile-image {
  padding: 0 !important;
  border-width: 2px !important;
  outline-offset: 2px !important;
}
.profile-image-admin-preview img {
  border-radius: 22px !important;
  clip-path: inset(0 round 22px);
}

/* v15: restrained hanging-card mobile for the empty profile space */
.profile-summary {
  position: relative;
}
.profile-card-dreamcatcher {
  position: absolute;
  top: 14px;
  right: 22px;
  width: 118px;
  height: 132px;
  pointer-events: none;
  z-index: 0;
  opacity: .9;
}
.profile-card-dreamcatcher::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 17px;
  right: 17px;
  height: 24px;
  border: 1px solid rgba(151, 82, 112, .28);
  border-top: 0;
  border-radius: 0 0 50% 50%;
}
.dream-line {
  position: absolute;
  top: 22px;
  width: 1px;
  background: rgba(151, 82, 112, .34);
  transform-origin: top center;
}
.dream-line-one { left: 27px; height: 38px; transform: rotate(5deg); }
.dream-line-two { left: 59px; height: 54px; }
.dream-line-three { right: 27px; height: 42px; transform: rotate(-5deg); }
.dream-card {
  position: absolute;
  display: grid;
  place-items: center;
  width: 30px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(151, 82, 112, .32);
  background: rgba(255, 250, 252, .92);
  color: #6f5262;
  font-size: 15px;
  box-shadow: 0 6px 14px rgba(74, 39, 57, .10);
  transform-origin: 50% -28px;
}
.dream-card-spade { left: 12px; top: 58px; animation: danmiCardSwayA 4.8s ease-in-out infinite; }
.dream-card-heart { left: 44px; top: 76px; color: #bd5d82; animation: danmiCardSwayB 5.3s ease-in-out infinite -.8s; }
.dream-card-club { right: 12px; top: 62px; animation: danmiCardSwayA 5.7s ease-in-out infinite -1.7s; }

html[data-theme="dark"] .profile-card-dreamcatcher::before,
body.dark-mode .profile-card-dreamcatcher::before,
html[data-theme="dark"] .dream-line,
body.dark-mode .dream-line {
  border-color: rgba(229, 185, 207, .30);
  background: rgba(229, 185, 207, .30);
}
html[data-theme="dark"] .dream-card,
body.dark-mode .dream-card {
  background: rgba(48, 39, 57, .96);
  border-color: rgba(231, 191, 211, .35);
  color: #ead9e6;
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
}
html[data-theme="dark"] .dream-card-heart,
body.dark-mode .dream-card-heart { color: #efabc9; }

@keyframes danmiCardSwayA {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(2px); }
}
@keyframes danmiCardSwayB {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50% { transform: rotate(-5deg) translateY(3px); }
}

@media (max-width: 980px) {
  .profile-card-dreamcatcher { right: 14px; transform: scale(.86); transform-origin: top right; opacity: .78; }
}
@media (max-width: 760px) {
  .profile-card-dreamcatcher {
    top: 10px;
    right: 8px;
    transform: scale(.68);
    opacity: .62;
  }
}
@media (max-width: 520px) {
  .profile-card-dreamcatcher { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dream-card { animation: none !important; }
}


/* v16/v17 — precise profile image frame + outer hanging playing cards */
.profile-summary {
  isolation: isolate;
  overflow: visible !important;
}
.profile-summary > .summary-profile-image,
.profile-summary > .profile-text,
.profile-summary > .profile-links {
  position: relative;
  z-index: 3;
}
.summary-profile-image,
.profile-image {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 0 !important;
}
.summary-profile-image::before,
.profile-image::before {
  inset: 4px !important;
  border-radius: inherit !important;
  pointer-events: none;
}
.summary-profile-photo,
.profile-image-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  object-fit: cover !important;
  backface-visibility: hidden;
}

.profile-card-dreamcatcher { display: none !important; }
.profile-card-hangers {
  position: absolute;
  top: -40px;
  width: 150px;
  height: 208px;
  pointer-events: none;
  z-index: 1;
  opacity: .96;
}
.profile-card-hangers-left { left: -68px; }
.profile-card-hangers-right { right: -68px; }
.profile-card-hangers::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 1px;
  background: rgba(192, 145, 164, .38);
}
.hanger-string {
  position: absolute;
  top: 10px;
  width: 1.5px;
  background: rgba(187, 131, 154, .45);
  transform-origin: top center;
}
.hanger-string::before,
.hanger-string::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #f4d8e3;
  border: 1px solid rgba(155, 102, 126, .28);
}
.hanger-string::before { top: 8px; }
.hanger-string::after { top: 22px; width: 5px; height: 5px; }
.profile-card-hangers-left .hanger-string-one { left: 30px; height: 106px; }
.profile-card-hangers-left .hanger-string-two { left: 73px; height: 136px; }
.profile-card-hangers-left .hanger-string-three { left: 118px; height: 164px; }
.profile-card-hangers-right .hanger-string-one { left: 32px; height: 136px; }
.profile-card-hangers-right .hanger-string-two { left: 76px; height: 104px; }
.profile-card-hangers-right .hanger-string-three { left: 120px; height: 158px; }
.hanger-card {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 10px;
  width: 40px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1.5px solid rgba(171, 111, 135, .42);
  background: #fffaf8;
  color: #6b5566;
  font: normal 700 21px/1 serif;
  box-shadow: 0 9px 18px rgba(84, 49, 66, .12);
  transform: translateX(-50%);
  transform-origin: 50% -40px;
}
.hanger-card-heart,
.hanger-card-diamond { color: #ca688d; }
.profile-card-hangers-left .hanger-string-one .hanger-card { animation: danmiHangerSwayA 5.4s ease-in-out infinite; }
.profile-card-hangers-left .hanger-string-two .hanger-card { animation: danmiHangerSwayB 6.1s ease-in-out infinite -.8s; }
.profile-card-hangers-left .hanger-string-three .hanger-card { animation: danmiHangerSwayC 6.9s ease-in-out infinite -1.6s; }
.profile-card-hangers-right .hanger-string-one .hanger-card { animation: danmiHangerSwayB 6.2s ease-in-out infinite -.5s; }
.profile-card-hangers-right .hanger-string-two .hanger-card { animation: danmiHangerSwayA 5.8s ease-in-out infinite -1.2s; }
.profile-card-hangers-right .hanger-string-three .hanger-card { animation: danmiHangerSwayC 7.1s ease-in-out infinite -1.9s; }
@keyframes danmiHangerSwayA {
  0%,100% { transform: translateX(-50%) rotate(-5deg); }
  50% { transform: translateX(-50%) rotate(6deg); }
}
@keyframes danmiHangerSwayB {
  0%,100% { transform: translateX(-50%) rotate(4deg); }
  50% { transform: translateX(-50%) rotate(-5.5deg); }
}
@keyframes danmiHangerSwayC {
  0%,100% { transform: translateX(-50%) rotate(-3deg); }
  50% { transform: translateX(-50%) rotate(4deg); }
}
html[data-theme="dark"] .profile-card-hangers::before,
body.dark-mode .profile-card-hangers::before { background: rgba(230, 191, 212, .34); }
html[data-theme="dark"] .hanger-string,
body.dark-mode .hanger-string { background: rgba(230, 191, 212, .40); }
html[data-theme="dark"] .hanger-string::before,
html[data-theme="dark"] .hanger-string::after,
body.dark-mode .hanger-string::before,
body.dark-mode .hanger-string::after {
  background: #d6adc2;
  border-color: rgba(255, 240, 247, .24);
}
html[data-theme="dark"] .hanger-card,
body.dark-mode .hanger-card {
  background: #342d3f;
  border-color: rgba(235, 197, 216, .4);
  color: #f0e5ee;
  box-shadow: 0 10px 20px rgba(0,0,0,.26);
}
html[data-theme="dark"] .hanger-card-heart,
html[data-theme="dark"] .hanger-card-diamond,
body.dark-mode .hanger-card-heart,
body.dark-mode .hanger-card-diamond { color: #f0abc8; }
@media (max-width: 1320px) {
  .profile-card-hangers-left { left: -54px; }
  .profile-card-hangers-right { right: -54px; }
}
@media (max-width: 1080px) {
  .profile-card-hangers { transform: scale(.82); transform-origin: top center; opacity: .84; }
  .profile-card-hangers-left { left: -44px; }
  .profile-card-hangers-right { right: -44px; }
}
@media (max-width: 900px) {
  .profile-card-hangers { width: 126px; height: 180px; top: -24px; }
  .profile-card-hangers-left { left: -32px; }
  .profile-card-hangers-right { right: -32px; }
  .profile-card-hangers-left .hanger-string-three,
  .profile-card-hangers-right .hanger-string-three { display: none; }
}
@media (max-width: 760px) {
  .profile-card-hangers { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hanger-card { animation: none !important; }
}