/* Portrait studio — a warm paper preview beside a compact, accessible control panel. */
.pet-share-backdrop { position:fixed; inset:0; z-index:90; background:rgba(42,30,25,.5); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:20px; }
.pet-share { width:min(960px,100%); max-height:calc(100dvh - 40px); overflow:auto; overscroll-behavior:contain; background:#fffcf7; color:#32271f; border:1px solid #e8d8c7; border-radius:24px; box-shadow:0 24px 100px #24160f40; }
.pet-share *, .pet-share *::before, .pet-share *::after { box-sizing:border-box; }
.pet-share [hidden] { display:none !important; }
.pet-share-header { position:sticky; top:0; z-index:2; background:#fffcf7; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:26px 30px 23px; border-bottom:1px solid #ebe2d6; }
.pet-share-header .eyebrow { color:#9b6849; font-size:10px; letter-spacing:.2em; margin:0 0 9px; }
.pet-share-header h2 { font:800 clamp(21px,3vw,28px)/1.2 var(--sans); letter-spacing:-.025em; margin:0 0 7px; overflow-wrap:anywhere; }
.pet-share-header p:last-child { font-size:13px; color:#827467; line-height:1.5; margin:0; }
.pet-share-close { flex:none; width:40px; height:40px; background:#f4eee5; border:1px solid #e7dcd0; border-radius:50%; font-size:25px; line-height:1; color:#776655; cursor:pointer; }
.pet-share-close:hover { background:#eaddcf; }
.pet-share-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.pet-share-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-width:0; padding:30px; background:radial-gradient(ellipse at 30% 10%,#f7eee0,#ece1d2); border-radius:0 0 0 24px; }
.pet-share-paper { width:100%; max-width:350px; display:flex; justify-content:center; }
.pet-share-paper img { display:block; width:auto; max-width:100%; max-height:580px; height:auto; object-fit:contain; box-shadow:0 12px 32px #5a392d26; border-radius:2px; }
.pet-share-paper[aria-busy="true"] img { opacity:.65; }
.pet-share-placeholder { width:100%; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; padding:24px; text-align:center; font-size:13px; color:#847160; border:1px solid #e3d5c4; background:#fbf6ed; }
.pet-share-caption { color:#8a7967; font-size:11px; letter-spacing:.09em; margin:0; }
.pet-share-controls { padding:26px 28px; min-width:0; }
.pet-share-controls fieldset { border:0; margin:0; padding:0; min-width:0; }
.pet-share-controls legend { font-size:12px; font-weight:800; margin:0 0 12px; padding:0; }
.pet-share-formats > div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pet-share-formats button { border:1px solid #e3d8ca; background:transparent; padding:12px 15px; border-radius:12px; color:#776452; display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; font:700 13px var(--sans); }
.pet-share-formats small { font-size:10px; font-weight:600; }
.pet-share-formats button[aria-pressed="true"] { border-color:#b86d40; color:#934d27; background:#f8eee2; box-shadow:0 0 0 1px #b86d401a; }
.pet-share-photo { margin:22px 0 14px; }
.pet-share-photo-button { display:inline-flex; gap:9px; align-items:center; min-height:44px; color:#6b513d; font-size:13px; font-weight:700; cursor:pointer; }
.pet-share svg { width:19px; height:19px; flex:none; }
.pet-share-photo p, .pet-share-save-hint, .pet-share-link-hint, .pet-share-privacy { font-size:11px; line-height:1.6; color:#8a7c6e; margin:0; }
.pet-share-text-button { color:#98603b; text-decoration:underline; font:600 12px var(--sans); border:0; background:none; min-height:36px; padding:6px 8px; cursor:pointer; }
.pet-share-crop { background:#f6f0e7; border-radius:12px; padding:12px 14px !important; margin-bottom:14px !important; }
.pet-share-crop legend { float:left; width:100%; margin:0 0 8px; }
.pet-share-crop label { display:flex; align-items:center; gap:12px; width:100%; min-height:34px; font-size:11px; }
.pet-share-crop label span { width:75px; flex:none; }
.pet-share-crop input { width:100%; min-width:0; accent-color:#ad6840; }
.pet-share-status { min-height:20px; font-size:12px; color:#776652; margin:12px 0; }
.pet-share-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pet-share-actions .btn { min-width:0; min-height:46px; padding:12px 10px; gap:8px; font-size:12px; border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.pet-share-actions .btn-primary { grid-column:1/-1; }
.pet-share-actions:not(.has-image-action) [data-poster="copy"] { grid-column:1/-1; }
.pet-share-actions [aria-disabled="true"] { opacity:.5; pointer-events:none; }
.pet-share-open { display:inline-block; font-size:11px; color:#98603b; margin:12px 0 6px; text-underline-offset:3px; }
.pet-share-social-section { border-top:1px solid #ebe2d6; padding-top:18px; margin-top:20px; }
.pet-share-social-section > p:first-child { font-size:12px; font-weight:800; margin:0 0 12px; }
.pet-share-socials { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.pet-share-social { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:66px; border:1px solid #e7ddcf; background:#fffdf8; border-radius:12px; padding:10px 4px; font:600 10px var(--sans); color:#6d5c4c; cursor:pointer; text-decoration:none; }
.pet-share-social:hover { background:#f4eadb; border-color:#d2b28f; }
.pet-share-instagram { margin-top:14px; background:#f4eee6; padding:15px; border-radius:12px; }
.pet-share-instagram h3 { font-size:13px; margin:0 0 6px; }
.pet-share-instagram p { font-size:12px; line-height:1.6; color:#756354; margin:0 0 12px; }
.pet-share-instagram > div { display:flex; gap:8px; flex-wrap:wrap; }
.pet-share-instagram .btn { font-size:10px; padding:8px 11px; }
.pet-share-privacy { margin-top:16px; }
.pet-share :focus-visible { outline:3px solid #a86136; outline-offset:3px; }
@media (max-width:680px) {
  .pet-share-backdrop { padding:10px; }
  .pet-share { max-height:calc(100dvh - 20px); border-radius:20px; }
  .pet-share-header { padding:20px; gap:10px; }
  .pet-share-body { grid-template-columns:1fr; }
  .pet-share-stage { padding:20px; border-radius:0; gap:12px; }
  .pet-share-paper { max-width:250px; }
  .pet-share-paper img { max-height:360px; }
  .pet-share-controls { padding:22px 20px; }
  .pet-share-social { min-height:62px; }
  .pet-share-crop label { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) { .pet-share * { scroll-behavior:auto !important; } }