/* ---------- v2 additions ---------- */
  .owner-only, .visitor-only, .signed-only, .guest-only { display: none !important; }
  body.owner .owner-only, body.visitor .visitor-only { display: revert !important; }
  body.signed .signed-only, body.guest .guest-only { display: revert !important; }
  body.owner .owner-only.flexy, body.visitor .visitor-only.flexy,
  body.signed .signed-only.flexy, body.guest .guest-only.flexy { display: flex !important; }

  .topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .mockview {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px;
    border: 1px dashed var(--card-border); border-radius: 999px; background: #FFFCF7cc;
    font-size: 11px; font-weight: 800; color: var(--ink-mute); letter-spacing: .05em; text-transform: uppercase;
  }
  .mockview span { padding: 0 6px 0 8px; }
  .mockview a {
    text-decoration: none; color: var(--ink-soft); padding: 5px 11px; border-radius: 999px; letter-spacing: .02em;
    text-transform: none; font-size: 12px;
  }
  .mockview a.on { background: linear-gradient(135deg, #FFF8E8, #F5E6C0); color: var(--ink); box-shadow: 0 1px 6px #D4A84B33; }

  .hero-copy { position: relative; }
  .copy-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .tag-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .breed-pill {
    display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px;
    background: #EEF3E8; border: 1.5px solid #CBD7BF; color: var(--sage-deep);
    font-size: 12.5px; font-weight: 800;
  }
  .tools { display: flex; align-items: center; gap: 8px; }
  .edit-link {
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--ink);
    background: linear-gradient(135deg, #FFF8E8, #F5E6C0); border: 1.5px solid var(--gold-soft);
    box-shadow: 0 2px 10px #D4A84B2e;
  }
  .more-btn {
    width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
    border: 1.5px solid var(--card-border); background: var(--warm-white); color: var(--ink-soft);
    font: 900 16px/1 Nunito, sans-serif; letter-spacing: 1px; box-shadow: 0 2px 8px #D4A84B10;
  }
  .menu-wrap { position: relative; }
  .pop {
    position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; display: none;
    background: var(--warm-white); border: 1.5px solid var(--card-border); border-radius: 16px;
    box-shadow: 0 14px 40px #3D342922, 0 2px 8px #D4A84B18; padding: 8px; min-width: 210px;
  }
  .pop.open { display: block; }
  .pop button, .pop a.item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
    background: none; border: 0; border-radius: 10px; padding: 10px 12px; text-decoration: none;
    font: 700 14px Nunito, sans-serif; color: var(--ink);
  }
  .pop button:hover, .pop a.item:hover { background: #FFF5E8; }
  .pop .ic {
    width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font: 900 13px/1 Nunito, sans-serif; color: #fff; flex: 0 0 26px;
  }
  .ic.fb { background: #1877F2; } .ic.x { background: #1a1a1a; } .ic.cp { background: var(--gold-pale); color: var(--ink); border: 1px solid var(--gold-soft); }
  .ic.rp { background: #F8ECE8; color: #B5675A; border: 1px solid #EBCFC6; }
  .pop .report { color: #9B5A4E; }

  .loved-by { margin-top: 18px; }
  .loved-label { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
  .loved-row { display: flex; align-items: center; gap: 10px; margin-top: 7px; font-size: 14px; color: var(--ink-soft); font-weight: 600; }
  .loved-row img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #FFFCF7; box-shadow: 0 0 0 1.5px var(--card-border); flex: 0 0 38px; }
  .loved-row b { color: var(--ink); font-weight: 800; }

  .share-wrap { position: relative; }
  .share-pop { left: 0; right: auto; width: 312px; }
  .share-pop .pop-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); padding: 6px 12px 4px; }
  .preview {
    margin: 8px 4px 4px; border: 1.5px solid var(--card-border); border-radius: 14px; overflow: hidden;
    display: grid; grid-template-columns: 92px 1fr; background: #FFFCF7;
  }
  .preview img { width: 92px; height: 100%; min-height: 92px; object-fit: cover; display: block; }
  .preview .pv { padding: 10px 12px; min-width: 0; }
  .preview .pv-host { font-size: 10.5px; font-weight: 800; color: var(--ink-mute); letter-spacing: .06em; text-transform: uppercase; }
  .preview .pv-title { font-size: 14px; font-weight: 900; color: var(--ink); margin-top: 3px; line-height: 1.25; }
  .preview .pv-desc { font-size: 12px; color: var(--ink-soft); font-weight: 600; margin-top: 3px; line-height: 1.35; }

  /* photos row */
  .photos-head { margin-top: 24px; font-size: 15px; font-weight: 800; color: var(--ink); display: flex; align-items: center; justify-content: space-between; }
  .photos-head span { font-size: 12px; color: var(--ink-mute); font-weight: 700; }
  .photos-row { display: flex; gap: 12px; margin-top: 10px; }
  .thumb, .add-tile { width: 104px; height: 104px; border-radius: 16px; flex: 0 0 104px; }
  .thumb { object-fit: cover; border: 1.5px solid var(--gold-soft); box-shadow: 0 3px 12px #3D342914; display: block; }
  .add-tile {
    border: 2px dashed #D4A84B; background: linear-gradient(160deg, #FFFCF8, #FFF5E8); color: var(--gold);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    font-size: 12px; font-weight: 800; text-decoration: none;
  }
  .add-tile .plus { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font-size: 20px; background: #FFF8E8; }

  /* notes */
  .note { position: relative; }
  .note .n-more {
    position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
    background: transparent; color: var(--ink-mute); font: 900 13px/1 Nunito, sans-serif; letter-spacing: 1px; opacity: .7;
  }
  .note .n-more:hover { background: #FFF5E8; opacity: 1; }
  .note .pop { top: 34px; right: 6px; min-width: 170px; }
  .note .who { padding-right: 26px; }
  .note .who .you { color: var(--sage-deep); font-weight: 800; margin-left: 6px; font-size: 12px; }
  .note .remove {
    display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 800; color: var(--ink-mute);
    background: none; border: 0; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px;
  }
  .note.extra { display: none; }
  .notes.expanded .note.extra { display: grid; }
  .show-more {
    display: block; width: 100%; margin-top: 12px; padding: 11px; border-radius: 999px; cursor: pointer;
    background: var(--warm-white); border: 1.5px solid var(--card-border); color: var(--ink-soft);
    font: 800 13.5px Nunito, sans-serif;
  }
  .show-more:hover { border-color: var(--gold-soft); color: var(--ink); }
  .see-all { display: none; }
  .counter { margin-top: 7px; font-size: 12px; font-weight: 700; color: var(--ink-mute); text-align: right; padding-right: 6px; }
  .gate {
    margin-top: 18px; padding: 16px 18px; border-radius: 16px; text-align: center;
    background: linear-gradient(105deg, #FFF8E8, #FDF1EC); border: 1.5px solid #F0DDBA;
  }
  .gate p { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.45; }
  .gate .btn-note { margin-top: 12px; }

  /* modal */
  .modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 20px; }
  .modal.open { display: flex; }
  .modal .backdrop { position: absolute; inset: 0; background: #3D342966; backdrop-filter: blur(3px); }
  .dialog {
    position: relative; width: 100%; max-width: 400px; padding: 28px 26px 22px; border-radius: 24px; text-align: center;
    background: linear-gradient(170deg, #FFFEFB, #FFF6EA); border: 1.5px solid var(--card-border);
    box-shadow: 0 24px 60px #3D342930;
  }
  .dialog .close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--card-border); background: var(--warm-white); color: var(--ink-soft); font-size: 18px; cursor: pointer; }
  .dialog .d-icon { font-size: 30px; filter: drop-shadow(0 0 8px #F5C26B88); }
  .dialog h3 { margin-top: 6px; font-size: 21px; font-weight: 800; color: var(--ink); }
  .dialog p { margin-top: 8px; font-size: 14px; color: var(--ink-soft); font-weight: 600; line-height: 1.5; }
  .sso { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
  .sso button {
    display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 999px; cursor: pointer;
    background: var(--warm-white); border: 1.5px solid var(--card-border); font: 800 14.5px Nunito, sans-serif; color: var(--ink);
    box-shadow: 0 2px 8px #3D34290a;
  }
  .sso button:hover { border-color: var(--gold-soft); }
  .sso .g { font: 900 17px/1 Arial, sans-serif; background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0); -webkit-background-clip: text; color: transparent; }
  .sso .f { width: 20px; height: 20px; border-radius: 50%; background: #1877F2; color: #fff; font: 900 14px/20px Arial, sans-serif; }
  .sso .a { font-size: 18px; line-height: 1; color: #111; }
  .dialog .fine { margin-top: 14px; font-size: 12px; color: var(--ink-mute); font-weight: 600; }
  .dialog .fine a { color: var(--sage-deep); font-weight: 800; }

  /* also remembered */
  .also { margin-top: 56px; }
  .also-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .also-head h2 { font-size: 22px; font-weight: 800; color: var(--ink); }
  .also-head h2 .accent { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; color: var(--sage-deep); font-size: 1.12em; }
  .also-head h2::after { display: none; }
  .also-head a { font-size: 14px; font-weight: 800; color: var(--sage-deep); text-decoration: none; white-space: nowrap; }
  .also-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 16px; }
  .mini { text-decoration: none; color: var(--ink); text-align: center; }
  .mini .mframe {
    padding: 6px; border-radius: 80px 80px 16px 16px; background: linear-gradient(160deg, #FFF8E8, #F5E6C0);
    border: 1.5px solid var(--gold-soft); box-shadow: 0 6px 18px #3D342912;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .mini img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 74px 74px 11px 11px; }
  .mini:hover .mframe { transform: translateY(-2px); box-shadow: 0 0 0 3px #D4A84B22, 0 10px 24px #3D342918; }
  .mini .mn { margin-top: 8px; font-size: 14px; font-weight: 800; }
  .mini .my { font-size: 11.5px; color: var(--ink-mute); font-weight: 700; }

  /* footer */
  .site-footer { position: relative; z-index: 2; margin-top: 56px; padding: 26px 28px 40px; text-align: center; }
  .site-footer::before {
    content: ''; display: block; width: 220px; height: 3px; margin: 0 auto 20px; border-radius: 4px;
    background: linear-gradient(90deg, transparent, var(--gold-soft), var(--blush-deep), var(--gold-soft), transparent);
  }
  .f-links { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; }
  .f-links a { color: var(--ink-soft); font-size: 14px; font-weight: 700; text-decoration: none; }
  .f-links a:hover { color: var(--ink); }
  .f-links a.pill { padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--gold-soft); background: var(--warm-white); color: var(--ink); font-weight: 800; }
  .f-copy { margin-top: 14px; font-size: 12px; color: var(--ink-mute); font-weight: 600; }
  .footer-blooms { display: none; }

  @media (max-width: 900px) {
    .also-row { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 700px) {
    .topline { gap: 8px; }
    .copy-top { flex-direction: column; gap: 10px; }
    .tag-row { justify-content: center; }
    .tools { position: absolute; top: -8px; right: 0; }
    body.owner .tools { position: static; justify-content: center; }
    .loved-row { justify-content: center; }
    .share-pop { left: 50%; transform: translateX(-50%); width: 300px; }
    .row-actions .share-wrap .pop { left: auto; right: -6px; transform: none; }
    .photos-row { gap: 10px; }
    .thumb, .add-tile { width: 96px; height: 96px; flex-basis: 96px; }
    .note.extra, .notes .note:nth-child(n+3) { display: none !important; }
    .show-more { display: none; }
    .see-all {
      display: block; margin-top: 12px; padding: 11px; border-radius: 999px; text-align: center; text-decoration: none;
      background: var(--warm-white); border: 1.5px solid var(--card-border); color: var(--ink); font-weight: 800; font-size: 14px;
    }
    .also { margin-top: 40px; }
    .also-head h2 { font-size: 20px; }
    .also-row { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
    .mini { flex: 0 0 118px; }
    .site-footer { margin-top: 36px; padding: 20px 16px 32px; }
    .f-links { gap: 14px 18px; }
  }
  .leave-row input { flex: 1 1 auto; }
  @media (max-width: 700px) {
    .leave-row input { flex: 0 0 46px; width: 100%; }
    .also-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  }
  .sso .a svg { display: block; width: 18px; height: 18px; }
  .yr-l { display: block; font-size: 11px; font-weight: 700; color: var(--ink-mute); margin: 0 0 5px 4px; }