/* POLISH_03: a champagne-metal frame, an internal heart field and portrait gallery. */
body { background: radial-gradient(ellipse at 50% 0%, #24101b 0, transparent 50rem), #080509; }
.phone-shell {
  padding: 11px; border-radius: 48px; border-color: #e7c9aa66;
  background: linear-gradient(128deg, #d7bfaa 0, #77616a 3%, #2a2029 8%, #121016 24%, #51404a 49%, #19151d 54%, #30232b 84%, #ad8d82 97%, #e0c5aa);
  box-shadow: 0 34px 90px #000b, 0 0 0 1px #130d16, 0 0 0 3px #cfa98d12, inset 1px 1px 1px #fff5, inset -1px -1px 2px #080409b3;
}
.phone-shell::before { inset: 3px; border: 1px solid #e6cab626; border-radius: 44px; background: linear-gradient(120deg, #fae4d319, transparent 16%, transparent 82%, #d7a5ac10); box-shadow: inset 0 1px 1px #fff2; }
.phone-shell::after { position: absolute; inset: 7px; border: 1px solid #080509d9; border-radius: 39px; content: ""; pointer-events: none; }
.app-screen { isolation: isolate; border-color: #e8c1bc28; background: radial-gradient(ellipse at 50% 3%, #421a302b, transparent 35rem), #0b070d; box-shadow: inset 0 0 35px #0006; }
.app-screen > .heart-atmosphere { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
.app-screen > :not(.heart-atmosphere) { z-index: 1; }
.app-screen > .offer-card { z-index: 10; }
.portrait-ring { position: relative; padding: 4px; background: conic-gradient(from 205deg, #8c4565, #f0d3ac 24%, #fff0ce 29%, #866554 40%, #342533 59%, #ddb9a0 72%, #c56991 87%, #8c4565); box-shadow: 0 0 0 1px #efcfb533, 0 0 0 5px #9c65790a, 0 15px 35px #0008; }
.portrait-open { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; background: #0b070d; cursor: zoom-in; }
.portrait-open::after { position: absolute; inset: 0; border: 6px solid #0b070de6; border-radius: inherit; content: ""; pointer-events: none; box-shadow: inset 0 0 0 1px #efc6ab20; }
.portrait-open .portrait-slide { position: absolute; inset: 0; border: 0; border-radius: inherit; opacity: 0; object-fit: cover; transition: opacity 650ms ease; }
.portrait-open .portrait-slide.is-current { opacity: 1; }
.portrait-expand { position: absolute; right: 24px; bottom: 18px; z-index: 2; display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #ecc6b544; border-radius: 50%; color: #f1d3b8; background: #120a12ce; font-size: 15px; }
.portrait-open:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 7px; }
.portrait-controls { display: flex; align-items: center; justify-content: center; margin: -7px auto 0; gap: 4px; }
.portrait-controls[hidden] { display: none; }
.portrait-dots { display: flex; }
.portrait-dot, .portrait-pause { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #dbc2cb; cursor: pointer; }
.portrait-dot::before { width: 5px; height: 5px; border: 1px solid #a48591; border-radius: 50%; content: ""; background: #70505e66; transition: width 200ms ease, background 200ms ease; }
.portrait-dot[aria-current="true"]::before { width: 18px; border-color: #dfbea1; border-radius: 8px; background: linear-gradient(90deg, #c07796, #e3c69f); }
.portrait-pause { font-size: 12px; }
.portrait-pause:disabled { opacity: .4; cursor: default; }
.portrait-hint { margin: 0 auto 15px; color: #b29da4; font-size: 11px; line-height: 1.5; }
.profile-dialog { width: min(calc(100% - 24px), 660px); max-height: calc(100dvh - 32px); padding: 24px 20px 14px; border-radius: 28px; background: linear-gradient(145deg, #24111e, #0e0a11 65%); }
.profile-dialog .dialog-close { margin: -8px -4px -36px auto; }
.profile-heading { padding: 4px 48px 18px; text-align: center; }
.profile-heading .eyebrow { margin-bottom: 5px; }
.profile-heading h2 { font-size: 25px; }
.profile-image-stage { position: relative; display: grid; height: min(62dvh, 580px); place-items: center; overflow: hidden; border: 1px solid #dcb9a623; border-radius: 17px; background: #08060b; }
.profile-image-stage img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.profile-loading { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 7px 14px; border: 1px solid #c796a33d; border-radius: 999px; background: #100a13e8; color: #d4bec8; font-size: 12px; white-space: nowrap; }
.profile-loading[hidden] { display: none; }
.profile-navigation { display: flex; min-height: 58px; align-items: center; justify-content: center; gap: 18px; }
.profile-navigation button { width: 44px; height: 44px; padding: 0; border: 1px solid #d4b8a62d; border-radius: 50%; background: #ffffff04; color: #efd3b0; cursor: pointer; font: 28px/1 Georgia,serif; }
.profile-navigation p { min-width: 75px; margin: 0; text-align: center; color: #c7b1bd; font-size: 12px; }
@media (hover: hover) { .portrait-open:hover .portrait-expand { background: #4c213be8; } .profile-navigation button:hover { border-color: #e4c5a76b; background: #ffffff0a; } }
@media (max-width: 380px) { .phone-shell { padding: 7px; border-radius: 36px; } .phone-shell::before { border-radius: 32px; } .phone-shell::after { inset: 5px; border-radius: 30px; } .profile-dialog { padding: 20px 12px 10px; } .profile-heading { padding-bottom: 12px; } }
@media (max-height: 450px) { .profile-heading { padding-bottom: 8px; } .profile-heading .eyebrow { display: none; } .profile-image-stage { height: 48dvh; } .profile-navigation { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) { .portrait-open .portrait-slide, .portrait-dot::before { transition: none; } }
/* Let the image grid shrink on short viewports without cropping the photo. */
.profile-image-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.profile-image-stage img { min-width: 0; min-height: 0; max-height: 100%; }