:root{
      --bg:#ffffff;
      --surface:#ffffff;
      --surface-2:#f6f6f3;
      --topbar:#ecebe4;
      --text:#111111;
      --muted:#6f6f6f;
      --line:#e8e8e8;
      --card:#ffffff;
      --radius:18px;
      --radius-xl:24px;
      --shadow:0 14px 34px rgba(0,0,0,.08);
      --shadow-soft:0 2px 6px rgba(0,0,0,.04);
      --charm-sidebar:88px;
      --content-max:1580px;
      --accent:#009b93;
      --accent-dark:#c4001d;
      --black:#111111;
      --pin-width: 680px;
      --gap: 4px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      padding-left:var(--charm-sidebar);
      background:var(--bg);
      color:var(--text);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x:hidden;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    button,input{font:inherit}
    button{cursor:pointer}
    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}


/* Fixed Charm Afrika sidebar layout */
@media (min-width:901px){
  body{padding-left:var(--charm-sidebar);}
  .app{grid-template-columns:1fr;}
}

    .app{
      min-height:100vh;
      display:grid;
      grid-template-columns:1fr;
      background:var(--bg);
    }

    .charm-sidebar{
      position:fixed;
      inset:0 auto 0 0;
      width:var(--charm-sidebar);
      height:100vh;
      z-index:9998;
      background:#fff;
      border-right:1px solid rgba(0,0,0,.07);
      display:flex;
      flex-direction:column;
      align-items:center;
      padding:16px 10px;
    }

    .charm-sidebar .brand-wrap{width:100%;display:flex;justify-content:center;margin-bottom:18px}
    .charm-sidebar .brand{width:50px;height:50px;display:grid;place-items:center}
    .charm-sidebar .brand-logo{width:40px;height:40px;border-radius:14px;overflow:hidden;background:#111;box-shadow:0 4px 12px rgba(0,0,0,.08)}
    .charm-sidebar .brand-logo img{width:100%;height:100%;object-fit:cover}
    .charm-sidebar .rail-stack{width:100%;display:flex;flex-direction:column;gap:9px}
    .charm-sidebar .rail-item{position:relative;width:58px;height:58px;border:0;border-radius:18px;background:transparent;display:flex;align-items:center;justify-content:center;color:#111;margin:0 auto;transition:.16s ease;text-decoration:none;cursor:pointer}
    .charm-sidebar .rail-item:hover{background:#f4f4f3;transform:translateY(-1px)}
    .charm-sidebar .rail-item.active{background:#500064;width:50px;height:50px;border-radius:40px;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.14)}
    .charm-sidebar .rail-icon{width:24px;height:24px;display:grid;place-items:center}
    .charm-sidebar .rail-icon svg{width:24px;height:24px}
    .charm-sidebar .rail-label{position:absolute;left:74px;top:50%;transform:translateY(-50%) translateX(-8px);padding:10px 14px;border-radius:14px;background:#111;color:#fff;font-size:13px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:.18s ease;box-shadow:0 10px 30px rgba(0,0,0,.16)}
    .charm-sidebar .rail-item:hover .rail-label{opacity:1;transform:translateY(-50%) translateX(0)}
    .charm-sidebar .rail-bottom{margin-top:auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
    .charm-sidebar .profile-pill{width:48px;height:48px;border:1px solid rgba(0,0,0,.06);border-radius:50%;background:#f5f5f4;display:grid;place-items:center}
    .charm-sidebar .profile-fallback{font-size:12px;font-weight:850;color:#111}

    .avatar{
  width:50px;
  height:50px;
  border-radius:12px;
  overflow:hidden;
  flex:0 0 auto;
  background:#f3f3f3;
  display:flex;
  align-items:center;
  justify-content:center;
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

    .main{min-width:0;padding:14px 34px 22px !important}
    .page{max-width:var(--content-max);margin:0 auto}

.topbar{

  top:12px;
  z-index:20;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 0 14px;
  background:transparent;
  backdrop-filter:blur(2px);
}

.top-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:0 0 auto;
  padding:6px 10px 6px 2px;
  border-radius:14px;
  color:inherit;
  text-decoration:none;
}

.top-brand:hover{
  background:#f6f6f6;
}

.top-brand-logo{
  width:42px;
  height:42px;
  flex:0 0 auto;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}

.top-brand-logo svg{
  width:100%;
  height:100%;
  display:block;
}

.top-brand-text{
  min-width:0;
  line-height:1.05;
}

.top-brand-name{
  font-size:14px;
  font-weight:800;
  letter-spacing:-.02em;
  color:#111;
  white-space:nowrap;
}

.top-brand-sub{
  margin-top:4px;
  font-size:12px;
  color:#777;
  white-space:nowrap;
}

    .search-wrap{
      flex:1;min-width:0;height:46px;display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:12px;background:var(--topbar);color:#808080;
      border:1px solid rgba(0,0,0,.02);
    }
    .search-wrap svg{width:18px;height:18px;flex:0 0 auto}
    .search-wrap input{width:100%;border:none;outline:none;background:transparent;color:var(--text);font-size:15px}
    .search-wrap input::placeholder{color:#737373}
    .top-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
    .action-btn{
      width:38px;height:38px;border:none;background:transparent;display:grid;place-items:center;color:#111;border-radius:999px;transition:.16s ease;
    }
    .action-btn:hover{background:#f2f2f2;transform:translateY(-1px)}
    .action-btn svg{width:22px;height:22px}
    .caret{width:18px;height:18px;color:#666}

    .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:2px 0 14px;padding-bottom:4px}
    .toolbar::-webkit-scrollbar{height:6px}
    .toolbar::-webkit-scrollbar-thumb{background:#dedede;border-radius:999px}
    .chip{
      border:1px solid #e8e8e8;background:#fff;color:#222;padding:10px 14px;border-radius:999px;font-size:13px;line-height:1;transition:.15s ease;flex:0 0 auto;white-space:nowrap;
    }
    .chip:hover{background:#fafafa;transform:translateY(-1px)}
    .chip.active{background:#111;color:#fff;border-color:#111}

    .board{
      display:grid;
      grid-template-columns:repeat(8,minmax(0,1fr));
      gap:6px;
      padding-top:2px;
      align-items:start;
    }
    .card{
      margin:0;overflow:hidden;border-radius:7px;background:var(--card);box-shadow:var(--shadow-soft);position:relative;border:1px solid rgba(0,0,0,.04);
      transform:translateZ(0);transition:transform .18s ease, box-shadow .18s ease;
      display:flex;
      flex-direction:column;
    }
    .card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
    .card img{display:block;width:100%;aspect-ratio:4 / 5;height:auto;object-fit:cover;cursor:pointer}
    .card .save{
      position:absolute;top:10px;right:10px;width:38px;height:38px;border:none;border-radius:999px;background:rgba(255,255,255,.95);display:grid;place-items:center;
      box-shadow:0 8px 18px rgba(0,0,0,.12);opacity:0;transform:translateY(-4px) scale(.98);transition:.16s ease;z-index:2;
    }
    .card:hover .save{opacity:1;transform:none}
    .save svg{width:18px;height:18px}
    .card .meta{
      position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:end;justify-content:space-between;gap:12px;opacity:0;transform:translateY(6px);
      transition:.16s ease;pointer-events:none;
    }
    .card:hover .meta{opacity:1;transform:none}
    .badge{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:#111;font-size:12px;line-height:1;box-shadow:0 8px 18px rgba(0,0,0,.12);backdrop-filter:blur(10px)}
    .shade{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.02) 100%);pointer-events:none}

    /* View page */
    .view-page{display:none;padding-top:2px; }
    .view-page.open{display:block; z-index: 9998 !important;}
    .view-grid{
      display:grid;
      grid-template-columns:minmax(0,1.15fr) minmax(320px,.92fr);
      gap:16px;
      align-items:start;
    }
    .view-left{
      min-width:0;
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:22px;
      overflow:hidden;
      box-shadow:0 1px 0 rgba(0,0,0,.02);
    }

.view-toprow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-radius:20px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.view-toprow-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex-wrap:wrap;
}
.icon-pill{
  width:42px;
  height:42px;
  border:none;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#fff;
  color:#111;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 18px rgba(0,0,0,.05);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  cursor:pointer;
  flex:0 0 auto;
}

.icon-pill:hover{
  transform:translateY(-1px);
  background:#f7f7f7;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.icon-pill:active{
  transform:translateY(0);
}

.icon-pill:focus-visible,
.profile-dd:focus-visible,
.save-btn:focus-visible{
  outline:3px solid rgba(230,0,35,.22);
  outline-offset:2px;
}

.icon-pill svg{
  width:20px;
  height:20px;
}

.icon-pill.like{
  background:#fff7f8;
  color:var(--accent,#e60023);
}

.icon-pill.like:hover{
  background:#ffecef;
}

/* LIKE BUTTON */
.icon-pill.action.like{
  background:#fff;
  color:#8b8b8b;
  border:1px solid rgba(0,0,0,.06);

  position:relative;
  overflow:hidden;

  width:auto;
  min-width:84px;
  height:42px;

  padding:0 18px 0 14px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border-radius:16px;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.icon-pill.action.like svg{
  flex:0 0 auto;
  transition:
    transform .18s ease,
    fill .18s ease,
    stroke .18s ease,
    opacity .18s ease;
}

.icon-pill.action.like .like-heart{
  fill:#fff;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linejoin:round;
}

/* INLINE COUNT */
.like-count{
  position:static;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:20px;
  height:auto;

  padding:0;

  background:none;
  border:none;
  box-shadow:none;

  color:inherit;

  font-size:13px;
  line-height:1;

  font-weight:800;
  letter-spacing:-0.02em;

  white-space:nowrap;
}

/* LIKED STATE */
.icon-pill.action.like.liked{
  color:#e60023;
  background:#fff1f4;
  border-color:rgba(230,0,35,.12);
  box-shadow:0 10px 24px rgba(230,0,35,.12);
}

.icon-pill.action.like.liked .like-heart{
  fill:currentColor;
  stroke:currentColor;
}

/* ANIMATIONS */
.icon-pill.action.like.like-pop{
  animation:likePop .34s ease;
}

.icon-pill.action.like.like-unpop{
  animation:likeUnpop .34s ease;
}

.like-count.like-bump{
  animation:countBump .3s ease;
}

@keyframes likePop{
  0%{transform:scale(1)}
  45%{transform:scale(1.12)}
  100%{transform:scale(1)}
}

@keyframes likeUnpop{
  0%{transform:scale(1)}
  45%{transform:scale(.94)}
  100%{transform:scale(1)}
}

@keyframes countBump{
  0%{transform:scale(1)}
  45%{transform:scale(1.1)}
  100%{transform:scale(1)}
}

.view-counter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 14px;
  border-radius:999px;
  background:#f6f6f6;
  color:#111;
  font-weight:700;
  font-size:14px;
  letter-spacing:.2px;
  border:1px solid rgba(0,0,0,.04);
}


.profile-dd{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:42px;
  padding:0 14px;
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
  color:#111;
  font-weight:600;
  font-size:14px;
  border-radius:999px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  cursor:pointer;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.profile-dd:hover{
  background:#fafafa;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}

.profile-dd svg{
  width:16px;
  height:16px;
}

.save-btn{
  border:none;
  background:linear-gradient(135deg, var(--accent,#080808), #004615);
  color:#fff;
  border-radius:999px;
  height:42px;
  padding:0 18px;
  min-width:72px;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 10px 22px rgba(0, 0, 0, 0.22);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.save-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(0, 0, 0, 0.356);
  filter:saturate(1.02);
}

.save-btn:active{
  transform:translateY(0);
}


    .pin-image-wrap{
      padding:0 16px 12px;
      display:grid;
      place-items:center;
      background:#fff;
    }
  
.pin-image-shell img{
  width:100%;
  height:auto;
  max-height:70vh;
  display:block;
  object-fit:contain;
  object-position:center;
  cursor:zoom-out;
  border-radius:22px !important;
}
    .expand-fab{
      position:absolute;
      right:10px;
      bottom:10px;
      width:40px;
      height:40px;
      border:none;
      border-radius:999px;
      background:rgba(255,255,255,.92);
      display:grid;
      place-items:center;
      box-shadow:0 10px 20px rgba(0,0,0,.18);
      backdrop-filter:blur(8px);
    }
    .expand-fab svg{width:18px;height:18px}

    .pin-details{
      padding:0 16px 16px;
      background:#fff;
      border-top:1px solid #f0f0f0;
      display:grid;
      gap:12px;
    }
    .pin-actionline{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding-top:12px;
    }
    .pin-actionline .left-actions,
    .pin-actionline .right-actions{display:flex;align-items:center;gap:10px;min-width:0}
    .inline-icon{
      border:none;background:transparent;width:34px;height:34px;border-radius:999px;display:grid;place-items:center;color:#111;
    }
    .inline-icon:hover{background:#f4f4f4}
    .inline-icon svg{width:20px;height:20px}
    .likes{font-size:15px;font-weight:700;letter-spacing:.1px}

    .pin-meta-row{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:12px;
      align-items:center;
    }
    .pin-copy{
      font-size:15px;
      color:#3a3a3a;
      line-height:1.45;
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .more-link{font-size:15px;font-weight:700;color:#111;white-space:nowrap}
    .visit-btn{
      border:none;
      background:#efefec;
      color:#111;
      border-radius:14px;
      height:40px;
      padding:0 14px;
      font-weight:700;
      white-space:nowrap;
      box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
    }
    .visit-btn:hover{background:#e8e8e3}

    .source-row{display:flex;align-items:center;gap:10px;min-width:0}
    .source-avatar{
      width:26px;height:26px;border-radius:50%;flex:0 0 auto;
      background:linear-gradient(135deg,#1c7fa8,#0f3f61);
      box-shadow:0 1px 0 rgba(255,255,255,.4) inset;
    }
    .source-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .comments-off{
      color:#5e5e5e;
      font-size:14px;
      padding-top:6px;
      border-top:1px solid #efefef;
    }

    .view-right{
      min-width:0;
      display:grid;
      gap:14px;
    }
    .related-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:14px;
      align-items:start;
    }
    .related-card{
      border-radius:18px;
      overflow:hidden;
      position:relative;
      border:none !important;
      aspect-ratio:3 / 4;
      cursor:pointer;
      box-shadow:0 1px 0 rgba(0,0,0,.03);
      width:100%;
      padding:0;
      background:#eee;
    }
    .related-card > img,
    .related-card > svg{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .related-card .overlay{
      position:absolute;inset:0;
      background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.04));
    }

    .mobile-bottom{display:none;position:fixed;left:10px;right:10px;bottom:10px;z-index:40;height:58px;border-radius:18px;background:rgba(255,255,255,.94);border:1px solid #ececec;backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.12);justify-content:space-around;align-items:center}
    .mobile-bottom .rail-btn{width:42px;height:42px}

    /* =========================================================
       IMAGE-ONLY SKELETONS
       Clean placeholders while gallery images load.
    ========================================================= */
    .image-skeleton-grid{
      display:grid;
      grid-template-columns:repeat(8,minmax(0,1fr));
      gap:4px;
      align-items:start;
    }
    .image-skeleton{
      position:relative;
      overflow:hidden;
      aspect-ratio:4 / 5;
      border-radius:8px;
      background:#ececeb;
      border:1px solid rgba(0,0,0,.035);
    }
    .image-skeleton::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.52) 44%,transparent 72%);
      transform:translateX(-115%);
      animation:skeletonSweep 1.35s ease-in-out infinite;
    }
    @keyframes skeletonSweep{
      to{transform:translateX(115%)}
    }
    @media (max-width:1240px){.image-skeleton-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
    @media (max-width:1040px){.image-skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
    @media (max-width:620px){.image-skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.image-skeleton{border-radius:7px}}

    .empty-state{
      margin-top:18px;
      padding:24px;
      border:1px dashed #dedede;
      border-radius:18px;
      color:var(--muted);
      text-align:center;
      background:#fff;
    }

    @media (max-width: 1240px){ .board{grid-template-columns:repeat(3,minmax(0,1fr));} }
    @media (max-width: 1040px){
      .view-grid{grid-template-columns:1fr}
      .board{grid-template-columns:repeat(2,minmax(0,1fr));}
    }
    @media (max-width: 900px){
      .app{grid-template-columns:1fr}
      .rail{display:none}
      .main{padding:12px}
      .topbar{top:0;padding-bottom:12px}
      .mobile-bottom{display:flex}
      .board{grid-template-columns:repeat(2,minmax(0,1fr));}
    }
    @media (max-width: 720px){
      .view-page.open{padding-top:0}
      .view-grid{gap:12px}
      .view-left{border-radius:20px}
      .view-toprow{padding:12px 12px 10px}
      .save-btn{height:36px;border-radius:14px;padding:0 14px}
      .pin-image-wrap{padding:0 12px 10px}
      .pin-details{padding:0 12px 12px}
      .pin-actionline{padding-top:10px}
      .pin-meta-row{grid-template-columns:1fr;gap:6px}
      .pin-copy{white-space:normal;overflow:visible;text-overflow:clip}
      .related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
      .top-actions .camera-only{display:none}
    }
@media (max-width: 620px){
  .main{padding:5px 3px 20px!important}
  .topbar{gap:10px}
  .search-wrap{height:42px;padding:0 12px;border-radius:10px}
  .action-btn{width:34px;height:34px}
  .action-btn svg{width:20px;height:20px}
  .avatar{width:28px;height:28px}

  .board{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .related-grid{grid-template-columns:1fr 1fr}
  .view-toprow{padding:10px 10px 8px}
  .view-toprow-left{gap:6px}
  .likes{font-size:14px}
  .view-counter{font-size:14px}
  .profile-dd{padding:6px 4px;font-size:13px}
  .save-btn{height:34px;padding:0 12px;border-radius:12px}
  .pin-details{gap:10px}
  .pin-copy,.more-link,.visit-btn{font-size:14px}
  .visit-btn{height:38px;border-radius:12px}
  .comments-off{font-size:13px}
  .mobile-bottom{height:56px}
}

.pin-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
  margin-bottom:6px;
}

.view-tag{
  height:30px;
  padding:0 12px;
  border-radius:999px;
  background: #dbdbdb;
  color: #000000;
  font-size:.82rem;
  font-weight:500;
  display:inline-flex;
  align-items:center;
}

.view-tag.empty {
  opacity: 0.7;
}

.pin-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #666;
}

.view-info {
  background: #fafafa;
  border: 1px solid #e8e8e8;
  padding: 6px 10px;
  border-radius: 999px;
}



    .search-trigger{
      width:100%;
      height:46px;
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 16px;
      border-radius:14px;
      border:1px solid rgba(0,0,0,.06);
      background:var(--topbar);
      color:#808080;
      text-align:left;
      transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
    }
    .search-trigger:hover{
      background:#e9e8e1;
      transform:translateY(-1px);
    }
    .search-trigger svg{
      width:18px;
      height:18px;
      flex:0 0 auto;
    }
    .search-placeholder{
      flex:1;
      min-width:0;
      color:#737373;
      font-size:15px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .search-cta{
      flex:0 0 auto;
      font-size:13px;
      font-weight:700;
      color:#111;
      background:#fff;
      border:1px solid rgba(0,0,0,.06);
      padding:7px 12px;
      border-radius:999px;
    }

    .search-modal{
      position:fixed;
      inset:0;
      z-index:9999 !important;
      display:none;
    }
    .search-modal.open{ display:block; }

    .search-backdrop{
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.72);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }

    .search-panel{
      position:relative;
      z-index:1;
      width:100%;
      height:100dvh;
      background:#fff;
      display:flex;
      flex-direction:column;
      padding:18px 18px 16px;
      border:1px solid rgba(0,0,0,.06);
      box-shadow:0 30px 90px rgba(0,0,0,.12);
      overflow:hidden;
    }

    .search-topbar{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:14px;
    }

    .search-modal-input{
      flex:0 0 auto;
      display:flex;
      align-items:center;
      gap:12px;
      height:54px;
      padding:0 16px;
      border-radius:18px;
      border:1px solid #e8e8e8;
      background:#fafafa;
      transition:.18s ease;
    }
    .search-modal-input:focus-within{
      background:#fff;
      border-color:#dadada;
      box-shadow:0 10px 30px rgba(0,0,0,.05);
    }
    .search-modal-input svg{
      width:18px;
      height:18px;
      color:#888;
      flex:0 0 auto;
    }
    .search-modal-input input{
      width:100%;
      border:none;
      outline:none;
      background:transparent;
      color:#111;
      font-size:16px;
    }

    .search-users-block{
      margin-top:14px;
      padding-top:14px;
      border-top:1px solid #f0f0f0;
    }

    .search-sections{
      flex:1;
      min-height:0;
      margin-top:14px;
      display:flex;
      flex-direction:column;
      gap:14px;
      overflow:auto;
      padding-right:2px;
    }

    .search-section{
      background:#fff;
    }

    .search-block-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
      font-size:14px;
      font-weight:800;
      color:#111;
    }

    .search-mini-note{
      font-size:12px;
      font-weight:700;
      color:#8a8a8a;
    }

    .search-clear-btn{
      border:none;
      background:#f4f4f4;
      color:#111;
      padding:8px 12px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
    }

    .recent-list{
      display:flex;
      gap:8px;
      overflow-x:auto;
      padding:2px 2px 4px;
      scroll-snap-type:x proximity;
      -webkit-overflow-scrolling:touch;
    }
    .recent-list::-webkit-scrollbar{height:6px}
    .recent-list::-webkit-scrollbar-thumb{
      background:#dedede;
      border-radius:999px;
    }

    .recent-pill{
      flex:0 0 auto;
      border:1px solid #ececec;
      background:#fff;
      color:#111;
      padding:10px 12px;
      border-radius:999px;
      font-size:13px;
      font-weight:700;
      line-height:1;
      scroll-snap-align:start;
      transition:background .15s ease, transform .15s ease, border-color .15s ease;
    }
    .recent-pill:hover{
      background:#f8f8f8;
      transform:translateY(-1px);
      border-color:#e1e1e1;
    }

    .top-suggestions,
    .search-results{
      display:grid;
      grid-template-columns:repeat(6, minmax(0, 1fr));
      gap:8px;
    }

    .suggestion-card,
    .search-result-card{
      border:none;
      padding:0;
      overflow:hidden;
      position:relative;
      background:#f3f3f3;
      border-radius:16px;
      aspect-ratio:1 / 1;
      box-shadow:0 1px 0 rgba(0,0,0,.03);
      transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
    }
    .suggestion-card:hover,
    .search-result-card:hover{
      transform:translateY(-2px);
      box-shadow:0 16px 28px rgba(0,0,0,.08);
    }
    .suggestion-card img,
    .search-result-card img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .search-results-wrap{
      display:none;
      min-height:0;
      padding-top:2px;
    }
    .search-empty-state{
      display:none;
      min-height:160px;
      place-items:center;
      text-align:center;
      padding:20px;
      border:1px dashed #e5e5e5;
      border-radius:20px;
      background:#fafafa;
    }
    .search-empty-icon{
      width:54px;
      height:54px;
      border-radius:18px;
      display:grid;
      place-items:center;
      background:#fff;
      border:1px solid #ececec;
      margin:0 auto 10px;
      color:#8a8a8a;
    }
    .search-empty-icon svg{
      width:22px;
      height:22px;
    }
    .search-empty-title{
      font-size:15px;
      font-weight:800;
      color:#111;
    }
    .search-empty-text{
      margin-top:6px;
      font-size:13px;
      color:#777;
      max-width:280px;
    }

    .search-results-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
    }
    .search-section-title{
      font-size:14px;
      font-weight:800;
      color:#111;
    }
    .search-results-count{
      margin-top:4px;
      font-size:13px;
      color:#777;
    }
    .search-active-filters{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      justify-content:flex-end;
    }
    .search-filter-chip{
      border:none;
      background:#f3f3f1;
      color:#111;
      border-radius:999px;
      padding:8px 11px;
      font-size:12px;
      font-weight:700;
      white-space:nowrap;
    }

    .user-strip{
      display:flex;
      gap:10px;
      overflow-x:auto;
      padding:2px 2px 6px;
      scroll-snap-type:x proximity;
      -webkit-overflow-scrolling:touch;
    }
    .user-strip::-webkit-scrollbar{height:6px}
    .user-strip::-webkit-scrollbar-thumb{
      background:#dedede;
      border-radius:999px;
    }
    .user-chip{
      flex:0 0 auto;
      width:92px;
      border:0;
      background:transparent;
      padding:0;
      cursor:pointer;
      scroll-snap-align:start;
      text-align:center;
    }
    .user-chip-avatar{
      width:64px;
      height:64px;
      margin:0 auto 8px;
      border-radius:50%;
      overflow:hidden;
      border:1px solid #ececec;
      background:#f7f7f7;
      box-shadow:0 8px 18px rgba(0,0,0,.08);
    }
    .user-chip-avatar img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .user-chip-fallback{
      width:100%;
      height:100%;
      display:grid;
      place-items:center;
      font-size:16px;
      font-weight:800;
      color:#111;
    }
    .user-chip-name{
      font-size:13px;
      font-weight:800;
      color:#111;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      line-height:1.2;
    }
    .user-chip-handle{
      margin-top:2px;
      font-size:12px;
      color:#777;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      line-height:1.2;
    }

    .search-modal.has-query .search-recent-section,
    .search-modal.has-query .search-suggestions-section{
      display:none;
    }
    .search-modal.has-query .search-results-wrap{
      display:block;
    }
    .search-modal:not(.has-query) .search-results-wrap{
      display:none;
    }
    .search-modal:not(.has-query) .search-empty-state{
      display:grid;
    }

    @media (max-width: 980px){
      .search-panel{
        padding:14px 14px 12px;
      }
      .search-sections{
        gap:12px;
      }
      .top-suggestions,
      .search-results{
        grid-template-columns:repeat(3, minmax(0, 1fr));
      }
      .user-strip{
        gap:8px;
      }
    }

    @media (max-width: 720px){
      .search-panel{
        padding:12px;
      }
      .search-topbar{
        gap:10px;
      }
      .search-modal-input{
        height:48px;
        border-radius:16px;
        padding:0 14px;
      }
      .top-suggestions,
      .search-results{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:6px;
      }
      .user-chip{
        width:84px;
      }
      .user-chip-avatar{
        width:56px;
        height:56px;
      }
      .search-empty-state{
        min-height:140px;
        padding:18px 14px;
      }
    }

    @media (max-width: 520px){
      .search-panel{
        padding:10px;
      }
      .search-topbar{
        align-items:flex-start;
      }
      .search-sections{
        margin-top:12px;
      }
      .top-suggestions,
      .search-results{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:5px;
      }
      .recent-pill{
        font-size:12px;
        padding:9px 11px;
      }
      .user-chip{
        width:78px;
      }
      .user-chip-avatar{
        width:52px;
        height:52px;
      }
    }


.view-page{
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #fff;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
}

.view-page.open{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.view-grid{
  min-height: 100vh;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.view-right{
  display: none;
}

/* Fullscreen image shell */
.pin-image-shell{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: #000;
}

.pin-image-shell img{
  width: 100%;
  height: auto;
  max-height: 70vh;
  display: block;
  object-fit: contain;
  object-position: center;
  cursor: zoom-out;
  border-radius: 22px;
}

/* Fullscreen mode */
.pin-image-shell:fullscreen,
.pin-image-shell:-webkit-full-screen{
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: #000;
}

.pin-image-shell:fullscreen img,
.pin-image-shell:-webkit-full-screen img{
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  object-fit: contain;
}

/* Top controls wrapper */
.fs-top-controls{
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.fs-top-controls > *{
  pointer-events: auto;
}

.fs-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Shared button base */
.fs-close-btn,
.fs-action-btn,
.fs-nav-btn{
  position: absolute;
  z-index: 50;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
}

.fs-close-btn:hover,
.fs-action-btn:hover,
.fs-nav-btn:hover{
  background: rgba(0, 0, 0, .75);
  transform: scale(1.05);
}

.fs-close-btn svg,
.fs-action-btn svg,
.fs-nav-btn svg{
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

/* Close button top-left */
.fs-close-btn{
  top: 14px;
  left: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
}

/* Share / download top-right */
.fs-action-btn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
}

.fs-like-btn{
  top: 14px;
  right: 104px;
  display:none;
}

.fs-like-btn .like-heart{
  fill:transparent;
  stroke:#fff;
  stroke-width:2.1;
  stroke-linejoin:round;
}

.fs-like-btn.liked{
  background:rgba(230,0,35,.9);
}

.fs-like-btn.liked .like-heart{
  fill:#fff;
  stroke:#fff;
}

/* Prev / next buttons */
.fs-nav-btn{
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  opacity: 0;
}

.fs-nav-btn:hover{
  transform: translateY(-50%) scale(1.06);
}

.fs-prev{
  left: 12px;
}

.fs-next{
  right: 12px;
}

/* Show controls in fullscreen */
.pin-image-shell:hover .fs-nav-btn,
.pin-image-shell:fullscreen .fs-nav-btn,
.pin-image-shell:-webkit-full-screen .fs-nav-btn{
  opacity: 1;
}

.pin-image-shell:fullscreen .fs-close-btn,
.pin-image-shell:fullscreen .fs-action-btn,
.pin-image-shell:-webkit-full-screen .fs-close-btn,
.pin-image-shell:-webkit-full-screen .fs-action-btn{
  opacity: 1;
}

.pin-image-shell:fullscreen .fs-like-btn,
.pin-image-shell:-webkit-full-screen .fs-like-btn{
  display:grid;
}

/* Optional: make controls always visible on touch devices */
@media (hover: none){
  .fs-nav-btn{
    opacity: 1;
  }
}

/* Mobile */
@media (max-width: 768px){
  .fs-close-btn,
  .fs-action-btn{
    width: 38px;
    height: 38px;
  }

  .fs-nav-btn{
    width: 36px;
    height: 36px;
  }

  .fs-close-btn{
    top: 10px;
    left: 10px;
  }

  .fs-like-btn{
    top: 10px;
    right: 100px;
    display:none;
  }

  .fs-like-btn .like-heart{
    fill:transparent;
    stroke:#fff;
    stroke-width:2.1;
    stroke-linejoin:round;
  }

  .fs-like-btn.liked{
    background:rgba(230,0,35,.9);
  }

  .fs-like-btn.liked .like-heart{
    fill:#fff;
    stroke:#fff;
  }

  .fs-share-btn{
    top: 10px;
    right: 56px;
  }

  .fs-download-btn{
    top: 10px;
    right: 10px;
  }

  .fs-prev{
    left: 10px;
  }

  .fs-next{
    right: 10px;
  }

  .fs-top-controls{
    top: 10px;
    left: 10px;
    right: 10px;
  }
}

.thumb-strip{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:4px 50% 8px;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:50%;
  -webkit-overflow-scrolling:touch;
}


.thumb.active{
  opacity:1;
  outline-color:#111;
  transform:scale(1.03);
}

.thumb-strip::-webkit-scrollbar{
  height: 8px;
}

.thumb-strip::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.12);
  border-radius: 999px;
}

.thumb{
  flex: 0 0 auto;
  width: 88px;
  height: 112px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #eee;
  opacity: .65;
  scroll-snap-align:center;
  transition: transform .2s ease, opacity .2s ease, outline-color .2s ease;
  outline: 2px solid transparent;
  cursor: pointer;
}

.thumb:hover{
  transform: translateY(-1px);
  opacity: .9;
}


.thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.promo-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease, visibility .28s ease;
}

.promo-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.promo-backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.14), transparent 35%),
    rgba(10,12,18,.58);
  backdrop-filter: blur(16px);
}

.promo-card{
  position:absolute;
  top:50%;
  left:50%;
  width:min(92vw, 820px);
  transform:translate(-50%, -48%) scale(.96);
  opacity:0;
  transition:transform .38s cubic-bezier(.2,.9,.2,1), opacity .25s ease;
  border-radius:32px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08)),
    linear-gradient(135deg, rgba(255,232,190,.20), rgba(205,235,255,.10));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 90px rgba(0,0,0,.46);
  color:#1f2430;
  padding:20px;
}

.promo-modal.open .promo-card{
  transform:translate(-50%, -50%) scale(1);
  opacity:1;
}

.promo-close{
  position:absolute;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#272b35;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}

.promo-top-badge{
  display:flex;
  justify-content:center;
  margin:8px 0 16px;
}

.promo-top-badge span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.55);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.promo-hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  align-items:stretch;
}

.promo-hero-copy{
  padding:10px 8px 10px 10px;
}

.promo-hero-copy h2{
  margin:0 0 12px;
  font-size:clamp(28px, 4.2vw, 48px);
  line-height:1.02;
  letter-spacing:-.04em;
  color:#181b24;
}

.promo-hero-copy p{
  margin:0 0 16px;
  font-size:16px;
  line-height:1.6;
  color:rgba(24,27,36,.74);
  max-width:44ch;
}

.promo-offer{
  display:grid;
  gap:4px;
  margin:0 0 16px;
  padding:14px 16px;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(181,255,179,.52), rgba(255,255,255,.72));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 12px 30px rgba(143,195,120,.16);
}

.promo-offer strong{
  font-size:16px;
}

.promo-offer span{
  font-size:13px;
  color:rgba(24,27,36,.72);
}

.promo-points{
  list-style:none;
  padding:0;
  margin:0 0 18px;
  display:grid;
  gap:10px;
}

.promo-points li{
  position:relative;
  padding-left:28px;
  font-size:15px;
  line-height:1.45;
  color:rgba(24,27,36,.82);
}

.promo-points li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:18px;
  height:18px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#6ed36e;
  color:white;
  font-size:12px;
  font-weight:700;
}

.promo-proof{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.56);
  margin-bottom:18px;
}

.proof-star{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:22px;
  background:linear-gradient(135deg, #ffd36b, #ffb94d);
  color:#fff;
  box-shadow:0 10px 20px rgba(255,176,60,.22);
}

.proof-rating{
  font-size:18px;
  font-weight:800;
  color:#1a1f2b;
}

.proof-sub{
  font-size:13px;
  color:rgba(24,27,36,.7);
}

.promo-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.promo-btn{
  flex:1 1 180px;
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  text-decoration:none;
  font-weight:700;
  transition:transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.promo-btn:hover{
  transform:translateY(-1px);
}

.promo-btn.primary{
  background:#171a24;
  color:#fff;
  box-shadow:0 12px 26px rgba(23,26,36,.18);
}

.promo-btn.secondary{
  background:rgba(255,255,255,.72);
  color:#171a24;
  border:1px solid rgba(255,255,255,.7);
}

.promo-hero-media{
  display:flex;
  align-items:stretch;
}

.promo-media-frame{
  position:relative;
  width:100%;
  min-height:100%;
  border-radius:26px;
  overflow:hidden;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.36), transparent 45%),
    linear-gradient(135deg, rgba(30,33,48,.96), rgba(66,70,92,.92));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.promo-media-frame img{
  width:100%;
  height:100%;
  min-height:420px;
  object-fit:cover;
  display:block;
  opacity:.95;
  transform:scale(1.01);
}

.media-glow{
  position:absolute;
  inset:auto -30px -30px -30px;
  height:180px;
  background:radial-gradient(circle, rgba(255,208,120,.26), transparent 65%);
  pointer-events:none;
}

.media-tag{
  position:absolute;
  left:16px;
  bottom:16px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.84);
  color:#171a24;
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
}

@media (max-width: 760px){
  .promo-hero{
    grid-template-columns:1fr;
  }

  .promo-media-frame img{
    min-height:260px;
  }

  .promo-card{
    padding:16px;
    border-radius:26px;
  }

  .promo-hero-copy{
    padding:6px 4px 4px;
  }
}

@media (prefers-reduced-motion: reduce){
  .promo-modal,
  .promo-card,
  .promo-btn{
    transition:none;
  }
}

/* WELCOME MODAL */
.no-scroll {
  overflow: hidden;
}

.welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s ease, visibility 0.24s ease;
}

.welcome-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.welcome-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, 0.62);
  backdrop-filter: blur(10px);
}

/* FULLSCREEN MODAL */
.welcome-sheet {
  position: absolute;
  inset: 0;
  transform: translateY(14px);
  opacity: 0;
  transition: transform .32s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
}

.welcome-modal.open .welcome-sheet {
  transform: translateY(0);
  opacity: 1;
}

.welcome-backdrop {
  position: absolute;
  inset: 0;
  background: #000;
}

/* MAIN SCREEN */
.welcome-screen {
  width: 100%;
  min-height: 100vh;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 20px;
  position: relative;
}

/* CENTER CONTENT */
.welcome-center {
  width: 100%;
  max-width: 420px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}


/* DESKTOP */
@media (min-width: 900px) {
  .welcome-center {
    max-width: 440px;
  }
}

  .welcome-close {
    display: none;
  }

@media (min-width: 821px) {
  .welcome-screen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    border: 0;
  }
}


.spotify-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px !important;
 
}

.spotify-mark img {
  
   border-radius: 150px !important;
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
}

.welcome-headline {
  margin: 0;
  font-size: clamp(27px, 5vw, 32px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  font-weight: 800;
  max-width: 22ch;
  text-wrap: balance;
}

.welcome-subline {
  margin-top: 14px;
  color: rgba(255,255,255,0.68);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  max-width: 40ch;
  text-align: center;
}
.welcome-actions {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: 30px;
  padding-inline: 8px;
}

.welcome-btn {
  width: 100%;
  min-height: 50px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  transition: transform .16s ease, opacity .16s ease, filter .16s ease, background .16s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.welcome-btn:hover {
  transform: translateY(-1px);
}

.welcome-btn-primary {
  background: #1ed760;
  color: #101010;
}

.welcome-btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
}

.welcome-btn-outline:hover {
  background: rgba(255,255,255,0.04);
}

.btn-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  font-weight: 900;
  line-height: 1;
}

.btn-google {
  font-family: Arial, sans-serif;
  color: #4285F4;
  font-size: 18px;
  transform: translateY(-1px);
}

.btn-facebook {
  color: #1877F2;
  font-size: 19px;
  font-family: Arial, sans-serif;
  transform: translateY(-1px);
}

.btn-apple {
  color: #fff;
  font-size: 18px;
  transform: translateY(-1px);
}

.welcome-login-link {
  margin-top: 18px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.94);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 14px;
}

/* MAYBE LATER */
.welcome-later-btn {
  margin-top: 44px;
  background: transparent;
  border: 0;
  color: rgba(0, 255, 21, 0.945);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .18s ease;
}

.welcome-later-btn:hover {
  opacity: 1;
  color: rgba(255,255,255,0.82);
}

.ios-home-indicator {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 136px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  opacity: 0.98;
}

@media (prefers-reduced-motion: reduce) {
  .welcome-modal,
  .welcome-sheet,
  .welcome-btn {
    transition: none;
  }
} 

.pin-image-shell:fullscreen{
  background:#000;
  display:grid;
  place-items:center;
  width:100vw;
  height:100vh;
}

.pin-image-shell:fullscreen img{
  width:100vw;
  height:100vh;
  object-fit:contain;
  cursor:zoom-out;
}

.fs-close-btn{
  position:absolute;
  top:10px;
  left:10px;
  width:42px;
  height:42px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  display:none;
  place-items:center;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  z-index:5;
}

.fs-close-btn svg{
  width:18px;
  height:18px;
}

.pin-image-shell:fullscreen .fs-close-btn{
  display:grid;
}

.pin-image-shell:fullscreen{
  background:#000;
  width:100vw;
  height:100vh;
  display:grid;
  place-items:center;
}

.pin-image-shell:fullscreen img{
  width:100vw;
  height:100vh;
  object-fit:contain;
  cursor:zoom-out;
}
.img-menu{
  position:fixed;
  z-index:10050;
  min-width:190px;
  display:none;
  flex-direction:column;
  gap:6px;
  padding:10px;
  border-radius:18px;
  background:rgba(20,20,20,.92);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.08);
}

.img-menu.open{
  display:flex;
}

.img-menu button{
  width:100%;
  border:none;
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:14px;
  padding:12px 14px;
  text-align:left;
  font-weight:700;
  font-size:14px;
}

.img-menu button:hover{
  background:rgba(255,255,255,.12);
}


/* EVENT INTRO MODAL */
.event-intro-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.event-intro-modal.open {
  display: block;
}

.event-intro-screen {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
}

.event-intro-hero {
  position: relative;
  flex: 0 0 clamp(240px, 56dvh, 67dvh);
  min-height: 170px;
  overflow: hidden;
  background: #f5f5f5;
}

.event-intro-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-intro-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 35%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 42%,
    rgba(255, 255, 255, 1) 100%
  );
}

.event-intro-content {
  flex: 1;
  min-height: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 16px;
  gap: 14px;
}

.event-intro-copy {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.event-intro-title {
  margin: 0;
  font-size: clamp(19px, 7vw, 31px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: #111;
  font-weight: 800;
}

.event-intro-desc {
  margin: 12px auto 0;
  max-width: 340px !important;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(17, 17, 17, 0.42);
  font-weight: 500;
}

.event-intro-next {
  width: 100%;
  max-width: 245px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: #1c1c1e;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.intro-home-indicator {
  width: 112px;
  height: 5px;
  border-radius: 999px;
  background: #111;
  opacity: 0.92;
}

/* Small height phones */
@media (max-height: 700px) {
  .event-intro-hero {
    flex-basis: clamp(190px, 48dvh, 320px);
    min-height: 240px !important;
  }

  .event-intro-content {
    padding: 12px 14px 12px;
    gap: 10px;
  }

  .event-intro-title {
    font-size: clamp(18px, 6vw, 28px);
  }

  .event-intro-desc {
    margin-top: 10px;
  }

  .event-intro-next {
    height: 44px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
}

/* Very short screens */
@media (max-height: 600px) {
  .event-intro-hero {
    flex-basis: 42dvh;
    min-height: 220px !important;
  }

  .event-intro-content {
    padding: 10px 14px 12px;
  }

  .event-intro-desc {
    margin-top: 8px;
    font-size: 12px;
  }

  .event-intro-next {
    max-width: 230px;
  }
}

body.no-scroll {
  overflow: hidden;
}


.skeleton-card{
  position:relative;
  overflow:hidden;
  margin:0;
  break-inside:avoid;
  border-radius:6px;
  background:#eeeeed;
  min-height:180px;
  border:1px solid rgba(0,0,0,.035);
  box-shadow:none;
  border-radius:8px;
  animation:skeletonSweep 1.35s ease-in-out infinite;
}
.skeleton-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.55) 46%, transparent 72%);
  transform:translateX(-120%);
  animation:skeletonShimmer 1.4s ease-in-out infinite;
  pointer-events:none;
}
.skeleton-media{
  display:block;
  width:100%;
  aspect-ratio:4 / 5;
  min-height:180px;
}
@keyframes skeletonSweep{
  0%,100%{opacity:.94}
  50%{opacity:1}
}
@keyframes skeletonShimmer{
  to{transform:translateX(120%)}
}
.download-toast{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%) translateY(-20px);
  z-index: 2147483647; /* highest safe z-index */

  display:flex;
  align-items:center;
  gap:12px;

  min-width:280px;
  max-width:420px;

  padding:10px 14px;

  border-radius:18px;

  background:rgba(22,22,22,.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);

  box-shadow:
    0 10px 40px rgba(0,0,0,.25),
    0 2px 8px rgba(0,0,0,.15);

  color:#fff;

  opacity:0;
  visibility:hidden;

  transition:
    opacity .28s ease,
    transform .28s ease,
    visibility .28s ease;
}

.download-toast.show{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.download-toast img{
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:12px;
  flex-shrink:0;
}

.download-toast-content{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.download-toast-title{
  font-size:14px;
  font-weight:600;
  line-height:1.2;
}

.download-toast-subtitle{
  font-size:12px;
  color:rgba(255,255,255,.7);
}

body.gallery-view-open .download-toast{
  top:92px;
}

@media (max-width: 720px){
  body.gallery-view-open .download-toast{
    top:108px;
  }
}

.like-gate-modal{
  position:fixed;
  inset:0;
  z-index:2147483646;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.like-gate-modal.show{
  display:flex;
}

.like-gate-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,10,12,.46);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.like-gate-card{
  position:relative;
  width:min(100%, 420px);
  border-radius:28px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 26px 70px rgba(0,0,0,.24);
  padding:22px;
  z-index:1;
  transform:translateY(8px) scale(.98);
  animation:gateIn .22s ease forwards;
}

.like-gate-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:#fff1f4;
  color:#e60023;
  margin-bottom:14px;
}

.like-gate-icon svg{
  width:24px;
  height:24px;
}

.like-gate-title{
  font-size:18px;
  font-weight:850;
  letter-spacing:-.02em;
  color:#111;
}

.like-gate-text{
  margin-top:8px;
  font-size:14px;
  line-height:1.5;
  color:#5f6368;
}

.like-gate-actions{
  display:flex;
  gap:10px;
  margin-top:18px;
}

.like-gate-btn{
  flex:1;
  height:44px;
  border:none;
  border-radius:14px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.like-gate-btn:hover{
  transform:translateY(-1px);
}

.like-gate-btn.primary{
  background:#111;
  color:#fff;
  box-shadow:0 12px 24px rgba(0,0,0,.16);
}

.like-gate-btn.secondary{
  background:#f3f4f6;
  color:#111;
}

.like-gate-note{
  margin-top:12px;
  font-size:12px;
  color:#8a8f98;
}

@keyframes gateIn{
  from{opacity:0; transform:translateY(14px) scale(.96)}
  to{opacity:1; transform:translateY(0) scale(1)}
}

@media (max-width:768px){

  .download-toast{
    top:14px;
    left:12px;
    right:12px;
    max-width:none;
    min-width:unset;
    transform:translateY(-20px);
  }

  .download-toast.show{
    transform:translateY(0);
  }

}

.download-success{
  background:rgba(34,197,94,.95) !important;
  color:#fff !important;
  transform:scale(1.08);
}

.download-success svg{
  animation:downloadTick .35s ease;
}

@keyframes downloadTick{

  0%{
    transform:scale(.5);
    opacity:0;
  }

  100%{
    transform:scale(1);
    opacity:1;
  }

}

@media (max-width:768px){

  .img-menu{
    display:none !important;
  }

}


.view-toprow-left,
.view-toprow-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.view-action-card{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 24px rgba(0,0,0,.14);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}


.icon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: #020202;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.icon-pill:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.2);
}

.icon-pill:active {
  transform: translateY(0);
}

.icon-pill svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.icon-pill.back {
  width: 42px;
  padding: 0;
}

.icon-pill.action {
  min-width: 44px;
  padding: 0 12px;
}

.view-action-card .icon-pill.action{
  box-shadow:none;
}

.view-action-card .icon-pill.action.save,
.view-action-card .icon-pill.action.report{
  min-width:42px;
  width:42px;
  padding:0;
}

.view-action-card .icon-pill.action.like{
  min-width:auto;
  padding:0 12px;
  justify-content:flex-start;
  gap:8px;
}

/* Share / download now live in the viewer's top action row. */
.view-action-card .icon-pill.action.top-share,
.view-action-card .icon-pill.action.top-download{
  width:42px;
  min-width:42px;
  padding:0;
}

.view-action-card .icon-pill.action.top-share{
  background:#f7f7f6;
}

.view-action-card .icon-pill.action.top-download{
  background:#111;
  color:#fff;
  border-color:#111;
}

.view-action-card .icon-pill.action.top-download:hover{
  background:#222;
  border-color:#222;
}

@media (max-width:640px){
  .view-action-card .icon-pill.action.top-share,
  .view-action-card .icon-pill.action.top-download{
    width:38px;
    min-width:38px;
  }
}

.icon-pill.action span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2px;
}

.icon-pill.save {
  background: rgba(255, 255, 255, 0.08);
}

.icon-pill.report {
  background: rgba(139, 0, 0, 0.34);
  border-color: rgba(255, 70, 70, 0.44);
}

.icon-pill.report:hover {
  background: rgba(255, 70, 70, 0.16);
  border-color: rgba(255, 70, 70, 0.24);
}

.like-count {
  position:static;
  min-width:0;
  height:auto;
  padding:0;
  border-radius:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:inherit;
  border:0;
  box-shadow:none;
  font-size:14px;
  line-height:1;
  font-weight:800;
  letter-spacing:.01em;
  opacity:.96;
}

.like-count.like-bump {
  animation:countBump .3s ease;
}


@media (max-width: 640px) {


  .view-action-card{
    gap:6px;
    padding:5px;
    border-radius:18px;
  }

  .icon-pill.action {
    min-width: 38px;
    padding: 0 10px;
  }

  .icon-pill.action span:not(.like-count) {
    display: none;
  }

  .view-action-card .icon-pill.action.like{
    min-width:auto;
    padding:0 10px;
  }

  .like-count{
    font-size:11px;
  }

  .icon-pill.back {
    width: 40px;
    height: 40px;
  }
}


.report-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 9998 !important;
}

.report-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.report-sheet {
  position: fixed;
    display: flex;
  flex-direction: column;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(110%);
  width: min(100%, 1520px);
  max-height: 88vh;
  background: rgba(255, 255, 255, 0.98);
  color: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.38);
  transition: transform 0.24s ease;
  z-index: 9999 !important;
  overflow: visible;
}

.report-sheet.open {
  transform: translateX(-50%) translateY(0);
}

.report-handle {
  width: 54px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  margin: 12px auto 0;
}

.report-preview-wrap {
 position: relative;
  height: 0;
  overflow: visible;
}

.report-preview-wrap img {
  position: absolute;
  left: 50%;
  top: -46px;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 24px;
  border: 4px solid rgba(14, 15, 18, 0.98);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  background: #111;
  z-index: 2;
}

.report-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 56px 18px 18px;

}

.report-head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.report-head p {
  margin: 4px 0 0;
  color: rgb(0, 0, 0);
  font-size: 14px;
  line-height: 1.5;
}

.report-reasons {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.report-reason {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.12);
  color: #000000;
  border-radius: 18px;
  padding: 14px 15px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}


.report-reason.active {
  border-color: rgba(0, 54, 5, 0.28);
  background: rgba(9, 77, 0, 0.37);
}

.report-reason-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.report-reason-sub {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.68);
}

.report-note {
  margin-top: 16px;
}

.report-note label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.82);
}

.report-note textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.10);
  outline: none;
  border-radius: 16px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.28);
  color: #000000;
  font: inherit;
}

.report-note textarea::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.report-actions{
  position: sticky;
  bottom: 0;
  left: 3px;
  right: 3px;

  display: flex;
  gap: 12px;

  padding: 20px;

  background: #000000;
  border-top: 1px solid rgba(0,0,0,.08);
border-radius: 15px !important;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.45);

  z-index: 50;
}


.report-actions button {
  flex: 1;
  height: 46px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}


.report-cancel {
  background: rgb(255, 253, 253);
  color: #000000;
}

.report-submit {
  background: #119400;
  color: #111;
}

@media (max-width: 640px) {
  .report-sheet {
    width: 100%;
    max-height: 75vh;
    border-radius: 22px 22px 0 0;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
  }

  .report-sheet-body {
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }

  .report-preview-wrap {
    flex: 0 0 auto;
  }

  .report-preview-wrap img {
    width: 90px;
    height: 100px;
    top: -52px;
  }
}


.report-success{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 9999;
}

.report-success.show{
  opacity: 1;
  pointer-events: auto;
}

.report-success-card{
  width: min(92vw, 320px);
  background: #0f1115;
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: 28px 22px 22px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  transform: translateY(10px) scale(.98);
  animation: reportPop .22s ease forwards;
}

.report-success-icon{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  background: rgba(64, 201, 142, .16);
  color: #40c98e;
}

.report-success-icon svg{
  width: 30px;
  height: 30px;
}

.report-success-card h4{
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.report-success-card p{
  margin: 8px 0 0;
  font-size: .95rem;
  color: rgba(255,255,255,.72);
}

@keyframes reportPop{
  to { transform: translateY(0) scale(1); }
}


.comment-sheet{
  background:#fff;
  border-radius:24px;
  padding:18px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.comment-sheet-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding-bottom:12px;
  margin-bottom:14px;
  border-bottom:1px solid #eee;
}

.comment-sheet-head h3{
  margin:0;
  font-size:1rem;
  font-weight:700;
}

.comment-sheet-head p{
  margin:6px 0 0;
  font-size:.88rem;
  color:#777;
}

.comments-list{
  display:grid;
  gap:12px;
  margin-bottom:16px;
}

.comment-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 0;
  border-bottom:1px solid #f1f1f1;
}

.comment-item:last-child{
  border-bottom:0;
}

.comment-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  flex:none;
}

.comment-body{
  flex:1;
  min-width:0;
}

.comment-meta{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:4px;
  font-size:.82rem;
  color:#999;
}

.comment-name{
  font-weight:700;
  color:#222;
}

.comment-text{
  font-size:.93rem;
  line-height:1.55;
  color:#444;
}

.comment-input-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:6px;
}

.comment-input-row input{
  flex:1;
  height:44px;
  border-radius:12px;
  border:1px solid #ddd;
  padding:0 14px;
  outline:none;
  font-size:.95rem;
  background:#fafafa;
}

.comment-input-row button{
  width:44px;
  height:44px;
  border-radius:12px;
  border:0;
  background: #005a0c;
  color:#fff;
  font-size:1rem;
  cursor:pointer;
}

.view-tabs{
  display:flex;
  gap:10px;
  margin:14px 0 10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
  flex-wrap:nowrap;
}
.view-tabs::-webkit-scrollbar{height:6px}
.view-tabs::-webkit-scrollbar-thumb{background:#dedede;border-radius:999px}

.view-tab{
  border:0;
  height:30px;
  padding:0 16px;
  border-radius:999px;
  background:#f2f2f2;
  color:#333;
  font-weight:600;
  cursor:pointer;
  flex:0 0 auto;
  white-space:nowrap;
}

.view-tab.active{
  background:#111;
  color:#fff;
}

.view-panel{ display:none; }
.view-panel.active{ display:block; }

.bts-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.bts-card{
  overflow:hidden;
  border-radius:18px;
  background:#fff;
  border:1px solid #eee;
}

.bts-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}

.bts-copy{
  padding:10px 12px 12px;
  font-size:.88rem;
  color:#444;
}

.shimmer{
  background:linear-gradient(90deg,#ececec 25%,#f7f7f7 50%,#ececec 75%);
  background-size:200% 100%;
  animation:shimmer 1.2s infinite;
}

@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

@media (max-width: 720px){
  html, body{
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    overflow-x: hidden;
  }


  .view-page,
  .view-page.open{
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .main{
    min-height: 100vh;
  }

  .view-grid{
    padding: 0px !important;
    margin: 0 !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .view-left,
  .view-right{
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
  }

  .view-toprow{
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .pin-image-wrap,
  .pin-details{
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .pin-image-shell img{
    border-radius: 0 !important;
  }
}




.mobile-nav{
  display:none;
}

@media (max-width: 820px){
  body{padding-left:0;}
  .charm-sidebar{display:none;}

  .main{
    padding-bottom: 96px;
  }

  .mobile-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9997 !important;
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    align-items:center;
    gap:6px;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    border-radius:22px 22px 0 0;
    background:rgba(17, 17, 23, 0.92);
    border-top:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:0 -10px 30px rgba(0,0,0,.28);
  }

  .mobile-nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:52px;
    border:0;
    background:transparent;
    color:rgba(255,255,255,.68);
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    cursor:pointer;
    border-radius:16px;
    transition:transform .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
  }

  .mobile-nav-item:hover{
    transform:translateY(-1px);
  }

  .mobile-nav-icon{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    transition:transform .2s ease, color .2s ease;
  }

  .mobile-nav-icon svg{
    width:22px;
    height:22px;
    display:block;
  }

  .mobile-nav-label{
    font-size:11px;
    font-weight:700;
    line-height:1;
    letter-spacing:.01em;
  }

  .mobile-nav-item.active{
    color:#fff;
  }

  .mobile-nav-item.active .mobile-nav-icon{
    transform:translateY(-1px);
  }

  .mobile-nav-item.active{
    background:rgba(255,255,255,.08);
  }

.mobile-nav-avatar{
    width:26px;
    height:26px;
    border-radius:50%;
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--surface-2);
    flex-shrink:0;
}

.mobile-nav-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
  .mobile-top-btn{
    position:fixed;
    right:14px;
    bottom:84px;
    z-index:9998;
    width:50px;
    height:50px;
    border:0;
    border-radius:16px;
    background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
    color:#fff;
    display:grid;
    place-items:center;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 10px 24px rgba(0,0,0,.24);
    transition:transform .22s ease, opacity .22s ease;
  }

  .mobile-top-btn-icon{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
  }

  .mobile-top-btn-icon svg{
    width:22px;
    height:22px;
  }
}










.auth-overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  z-index:20;
  padding:24px;
}

.auth-overlay.show{
  display:flex;
}

.auth-card{
  width:min(320px, 100%);
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 24px 60px rgba(0,0,0,.16);
  padding:22px 20px;
  text-align:center;
  display:grid;
  justify-items:center;
  gap:12px;
}

.auth-spinner{
  width:46px;
  height:46px;
  border-radius:50%;
  border:4px solid #ececec;
  border-top-color:#111;
  animation:spin .8s linear infinite;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

.auth-title{
  font-size:18px;
  font-weight:800;
  color:#111;
}

.auth-subtitle{
  font-size:14px;
  color:#666;
}

.auth-toast{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) translateY(18px);
  opacity:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:min(340px, calc(100% - 24px));
  padding:14px 16px;
  border-radius:18px;
  background:#111;
  color:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  z-index:25;
  transition:opacity .22s ease, transform .22s ease;
}

.auth-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.auth-toast-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#22c55e;
  color:#fff;
  font-weight:900;
  flex:0 0 auto;
}

.auth-toast-title{
  font-size:14px;
  font-weight:800;
  line-height:1.2;
}

.auth-toast-subtitle{
  font-size:12px;
  color:rgba(255,255,255,.74);
  margin-top:2px;
}

.welcome-actions .welcome-btn[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

.mobile-nav-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  background: #111;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16);
  flex:0 0 auto;
}

.mobile-nav-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:50%;
}

#mobileNavAvatarFallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
}

.search-users-block{
  margin-bottom:14px;
}

.user-strip{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:2px 2px 8px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}

.user-strip::-webkit-scrollbar{
  height:6px;
}

.user-strip::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:999px;
}

.user-chip{
  flex:0 0 auto;
  width:92px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  scroll-snap-align:start;
  text-align:center;
}

.user-chip-avatar{
  width:64px;
  height:64px;
  margin:0 auto 8px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface-2);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.user-chip-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.user-chip-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-size:16px;
  font-weight:800;
  color:var(--text);
}

.user-chip-name{
  font-size:13px;
  font-weight:800;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}

.user-chip-handle{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}

  

    .action-btn.notifications{
      position:relative;
    }
    .action-btn-inner{
      position:relative;
      display:grid;
      place-items:center;
    }
    .notification-badge{
      position:absolute;
      top:-6px;
      right:-7px;
      min-width:18px;
      height:18px;
      padding:0 5px;
      border-radius:999px;
      background:#e60023;
      color:#fff;
      font-size:10px;
      font-weight:900;
      line-height:1;
      display:grid;
      place-items:center;
      border:2px solid #fff;
      box-shadow:0 8px 16px rgba(0,0,0,.12);
    }

    .notifications-root{
      position:fixed;
      inset:0;
      z-index:10020;
      display:none;
      align-items:stretch;
      justify-content:flex-end;
      pointer-events:none;
       
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease;
    }
    .notifications-root.open{display:flex;pointer-events:auto;
   pointer-events:auto;
  transform:translateY(0);
}

    .notifications-backdrop{
      position:absolute;
      inset:0;
      background:rgba(17,17,23,.26);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      opacity:0;
      transition:opacity .18s ease;
    }
    .notifications-root.open .notifications-backdrop{opacity:1;}

    .notifications-panel{
      position:relative;
      width:min(440px, 92vw);
      height:100dvh;
      background:#fff;
      border-left:1px solid rgba(0,0,0,.06);
      box-shadow:-28px 0 70px rgba(0,0,0,.14);
      display:flex;
      flex-direction:column;
      transform:translateX(18px);
      opacity:0;
      transition:transform .18s ease, opacity .18s ease;
      overflow:hidden;
      pointer-events:auto;
    }
    .notifications-root.open .notifications-panel{
      transform:translateX(0);
      opacity:1;
    }

    .notifications-header{
      display:grid;
      grid-template-columns:40px 1fr 40px;
      align-items:center;
      gap:8px;
      padding:14px 14px 12px;
      border-bottom:1px solid #f1f1f1;
      background:#fff;
    }
    .notifications-header .icon-pill{
      width:40px;
      height:40px;
      background:#fff;
      box-shadow:none;
      border:1px solid #efefef;
    }
    .notifications-title{
      text-align:center;
      font-size:18px;
      line-height:1.1;
      letter-spacing:.06em;
      text-transform:uppercase;
      font-weight:900;
      color:#111;
    }
    .notifications-menu{
      justify-self:end;
    }

    .notifications-stage{
      flex:1;
      min-height:0;
      overflow:auto;
      padding:10px 0 16px;
      display:flex;
      flex-direction:column;
    }

    .notifications-empty{
      flex:1;
      min-height:0;
      display:none;
      align-content:center;
      justify-items:center;
      text-align:center;
      gap:10px;
      padding:24px 22px 32px;
    }
    .notifications-empty.show{display:grid;}
    .notifications-empty-icon{
      width:60px;
      height:60px;
      border-radius:18px;
      display:grid;
      place-items:center;
      color:#bfbfbf;
      border:1px solid #ececec;
      background:#fafafa;
      margin-bottom:10px;
    }
    .notifications-empty-icon svg{
      width:28px;
      height:28px;
    }
    .notifications-empty-title{
      font-size:18px;
      font-weight:900;
      color:#111;
    }
    .notifications-empty-text{
      max-width:300px;
      color:#8a8a8a;
      font-size:13px;
      line-height:1.5;
    }

    .notifications-sections{
      display:grid;
      gap:14px;
      padding:6px 12px 12px;
    }
    .notifications-section{
      display:grid;
      gap:8px;
    }
    .notifications-section-label{
      font-size:12px;
      font-weight:800;
      color:#a0a0a0;
      text-transform:uppercase;
      letter-spacing:.08em;
      padding:0 6px;
    }
    .notifications-item{
        animation:notifIn .18s ease both;
      display:grid;
      grid-template-columns:44px 1fr;
      gap:12px;
      align-items:start;
      padding:12px 10px;
      border-radius:18px;
      background:#fff;
      border:1px solid #f0f0f0;
    }
    .notifications-avatar{
      width:44px;
      height:44px;
      border-radius:50%;
      overflow:hidden;
      background:#f3f3f3;
      border:1px solid #ececec;
      display:grid;
      place-items:center;
      color:#666;
      font-weight:900;
      font-size:14px;
      flex:0 0 auto;
    }
    .notifications-avatar img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .notifications-body{
      min-width:0;
    }
    .notifications-title-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .notifications-text{
      margin:0;
      font-size:14px;
      line-height:1.35;
      color:#111;
    }
    .notifications-text strong{font-weight:900;}
    .notifications-meta{
      margin-top:4px;
      font-size:12px;
      color:#9a9a9a;
    }

  .notifications-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
@keyframes notifIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}


    .notifications-time{
      flex:0 0 auto;
      font-size:11px;
      color:#a1a1a1;
      white-space:nowrap;
      padding-top:2px;
    }
    .notifications-actions{
      margin-top:8px;
      display:flex;
      justify-content:flex-start;
    }
    .notifications-follow-back{
      border:none;
      height:32px;
      padding:0 12px;
      border-radius:999px;
      background:#111;
      color:#fff;
      font-size:12px;
      font-weight:800;
    }
    .notifications-follow-back.secondary{
      background:#f3f3f3;
      color:#111;
    }
    .notifications-follow-back:disabled{
      opacity:.65;
      cursor:not-allowed;
    }

    .notifications-loading{
      display:grid;
      gap:10px;
      padding:10px 12px 0;
    }
    .notifications-skeleton{
      border:1px solid #efefef;
      border-radius:18px;
      background:#fff;
      padding:12px;
      display:grid;
      grid-template-columns:44px 1fr;
      gap:12px;
      align-items:center;
    }
    .notifications-skeleton-avatar{
      width:44px;
      height:44px;
      border-radius:50%;
      background:linear-gradient(90deg,#f2f2f2 25%,#e9e9e9 37%,#f2f2f2 63%);
      background-size:400% 100%;
      animation:notifShimmer 1.1s ease infinite;
    }
    .notifications-skeleton-lines{
      display:grid;
      gap:8px;
    }
    .notifications-skeleton-line{
      height:10px;
      border-radius:999px;
      background:linear-gradient(90deg,#f2f2f2 25%,#e9e9e9 37%,#f2f2f2 63%);
      background-size:400% 100%;
      animation:notifShimmer 1.1s ease infinite;
    }
    .notifications-skeleton-line.short{width:64%;}
    @keyframes notifShimmer{
      0%{background-position:100% 0;}
      100%{background-position:0 0;}
    }

    @media (max-width: 820px){
      .notifications-panel{
        width:100%;
        border-left:none;
        box-shadow:none;
        transform:translateY(10px);
      }
      .notifications-header{
        padding:14px 14px 12px;
      }
      .notifications-title{
        font-size:17px;
      }
      .notifications-stage{
        padding-top:8px;
      }
      .notifications-sections{
        gap:12px;
        padding:4px 12px 12px;
      }
    }

/* ================================================================
   FINAL DESKTOP GALLERY VIEWER
   Main image/details = left column
   Suggested photos      = right column
   ================================================================ */
.view-page.open{
  overflow-anchor:none;
}

.view-page.open .view-grid,
.view-page.open .view-left,
.view-page.open .view-right,
.view-page.open .related-scroll{
  overflow-anchor:none;
}

.view-page.open .view-grid{
  width:100%;
  max-width:1640px;
  margin:0 auto;
}

.view-page.open .view-left{
  min-width:0;
}

.view-page.open .view-right{
  min-width:0;
}

.view-right-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:4px 2px 12px;
}

.view-right-eyebrow{
  display:block;
  margin-bottom:5px;
  font-size:10px;
  line-height:1;
  letter-spacing:.12em;
  font-weight:800;
  color:#8a8a8a;
}

.view-right-head h2{
  margin:0;
  font-size:18px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.02em;
  color:#111;
}

.view-right-head p{
  margin:5px 0 0;
  font-size:13px;
  line-height:1.3;
  color:#777;
}

.related-filters{
  display:flex;
  align-items:center;
  gap:7px;
  overflow-x:auto;
  padding:0 1px 12px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.related-filters::-webkit-scrollbar{display:none}

.related-filter{
  flex:0 0 auto;
  border:1px solid #e7e7e5;
  background:#fff;
  color:#3b3b3b;
  border-radius:999px;
  min-height:32px;
  padding:0 11px;
  font-size:12px;
  font-weight:750;
  line-height:1;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}

.related-filter:hover{
  transform:translateY(-1px);
  border-color:#d8d8d5;
  background:#fafafa;
}

.related-filter.active{
  background:#111;
  color:#fff;
  border-color:#111;
}

.related-scroll{
  min-height:0;
}

.related-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:start;
}

.related-card{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4 / 5;
  padding:0;
  margin:0;
  overflow:hidden;
  border:0 !important;
  border-radius:16px;
  background:#eeeeec;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  transition:transform .18s ease, box-shadow .18s ease;
}

.related-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,.10);
}

.related-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.related-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 64%,rgba(0,0,0,.07) 100%);
}

.related-empty{
  grid-column:1 / -1;
  min-height:180px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:24px;
  border:1px dashed #dededb;
  border-radius:18px;
  background:#fafaf8;
  color:#777;
  font-size:13px;
}

.related-filter-count{
  opacity:.65;
  margin-left:4px;
  font-weight:700;
}

/* Desktop: true side-by-side layout. */
@media (min-width:1041px){
  .view-page.open .view-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1.66fr) minmax(380px,1fr) !important;
    gap:24px !important;
    align-items:start !important;
    padding:24px 28px 44px !important;
    min-height:100vh;
  }

  .view-page.open .view-left{
    display:block !important;
    width:100%;
  }

  .view-page.open .view-right{
    display:flex !important;
    flex-direction:column;
    width:100%;
    position:sticky;
    top:20px;
    align-self:start;
    height:calc(100vh - 40px);
    max-height:calc(100vh - 40px);
    min-height:0;
    overflow:hidden;
    padding:0 5px 0 0;
  }

  .view-page.open .related-scroll{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:2px 1px 24px 0;
    scrollbar-width:thin;
    scrollbar-color:#d4d4d1 transparent;
  }

  .view-page.open .related-scroll::-webkit-scrollbar{
    width:7px;
  }

  .view-page.open .related-scroll::-webkit-scrollbar-track{
    background:transparent;
  }

  .view-page.open .related-scroll::-webkit-scrollbar-thumb{
    background:#d4d4d1;
    border-radius:999px;
    border:2px solid #fff;
  }

  /* The large desktop view no longer needs the old bottom thumbnail row. */
  .view-page.open .thumb-strip{
    display:none !important;
  }

  .view-page.open .pin-image-wrap{
    padding:0 18px 18px;
  }

  .view-page.open .pin-image-shell{
    width:100%;
    border-radius:22px;
    background:#f5f5f3;
  }

  .view-page.open .pin-image-shell img{
    width:100%;
    max-height:78vh;
    min-height:540px;
    object-fit:contain;
    border-radius:22px !important;
  }

  .view-page.open .pin-details{
    border-top:1px solid #ededed;
    padding:0 18px 18px;
  }
}

/* Tablet: stack naturally, but still show the right-side suggestions as a section. */
@media (min-width:769px) and (max-width:1040px){
  .view-page.open .view-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    padding:16px !important;
  }

  .view-page.open .view-right{
    display:block !important;
    position:static;
    height:auto;
    max-height:none;
    overflow:visible;
  }

  .view-page.open .related-scroll{
    overflow:visible;
  }

  .view-page.open .related-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
  }

  .view-page.open .thumb-strip{
    display:none !important;
  }
}

/* Mobile: keep the normal single-column viewer and thumbnail navigation. */
@media (max-width:768px){
  .view-page.open .view-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    padding:10px !important;
  }

  .view-page.open .view-right{
    display:block !important;
    position:static;
    height:auto;
    max-height:none;
    overflow:visible;
  }

  .view-page.open .related-scroll{
    overflow:visible;
  }

  .view-page.open .related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
}



/* ================================================================
   FINAL POLISH PASS
   Search modal: Apple / Spotify-inspired, airy, premium.
   Viewer: stable spacing + independent related-photo scrolling.
   ================================================================ */

/* ---------- Search modal desktop ---------- */
.search-modal{
  background:rgba(13,13,13,.18);
}

.search-modal .search-backdrop{
  background:rgba(250,250,249,.72);
  backdrop-filter:blur(22px) saturate(125%);
  -webkit-backdrop-filter:blur(22px) saturate(125%);
}

.search-modal .search-panel{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(980px,calc(100vw - 48px));
  height:min(760px,calc(100dvh - 48px));
  padding:18px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:28px;
  background:rgba(255,255,255,.96);
  box-shadow:0 36px 100px rgba(0,0,0,.18),0 2px 0 rgba(255,255,255,.9) inset;
  overflow:hidden;
}

.search-modal .search-topbar{
  margin:0;
  padding:0 0 14px;
  gap:10px;
}

.search-modal .search-close{
  width:44px;
  height:44px;
  border-radius:14px;
  background:#f3f3f1;
  box-shadow:none;
  flex:0 0 auto;
}

.search-modal .search-close:hover{
  background:#ecece9;
}

.search-modal .search-modal-input{
  height:50px;
  padding:0 15px;
  border-radius:16px;
  background:#f5f5f3;
  border:1px solid rgba(0,0,0,.045);
  box-shadow:none;
}

.search-modal .search-modal-input:focus-within{
  background:#fff;
  border-color:#dcdcd8;
  box-shadow:0 0 0 4px rgba(0,0,0,.035);
}

.search-modal .search-modal-input input{
  font-size:15px;
  font-weight:500;
}

.search-modal .search-users-block{
  margin:0;
  padding:14px 0 15px;
  border-top:1px solid #eeeeeb;
  border-bottom:1px solid #eeeeeb;
}

.search-modal .search-block-head{
  margin-bottom:10px;
}

.search-modal .search-sections{
  margin-top:0;
  padding-top:16px;
  gap:22px;
  overflow:auto;
}

.search-modal .search-section{
  flex:0 0 auto;
}

.search-modal .search-recent-section{
  min-height:56px;
}

.search-modal .recent-list{
  gap:7px;
  padding:1px 1px 4px;
}

.search-modal .recent-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:34px;
  padding:0 12px;
  border:1px solid #e7e7e4;
  background:#fff;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#333;
}

.search-modal .recent-pill:hover{
  background:#f6f6f4;
}

.search-modal .recent-pill-icon{
  width:14px;
  height:14px;
  color:#8b8b8b;
  flex:0 0 auto;
}

.search-modal .top-suggestions,
.search-modal .search-results{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.search-modal .suggestion-card,
.search-modal .search-result-card{
  aspect-ratio:16 / 10;
  border-radius:16px;
  background:#eeeeec;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}

.search-modal .suggestion-media,
.search-modal .search-result-media{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
}

.search-modal .suggestion-card img,
.search-modal .search-result-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .28s ease;
}

.search-modal .suggestion-card:hover img,
.search-modal .search-result-card:hover img{
  transform:scale(1.035);
}

.search-modal .suggestion-shade,
.search-modal .search-result-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.56) 100%);
  pointer-events:none;
}

.search-modal .suggestion-title,
.search-modal .search-result-title{
  position:absolute;
  left:11px;
  right:11px;
  bottom:10px;
  color:#fff;
  font-size:12px;
  line-height:1.25;
  font-weight:750;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 8px rgba(0,0,0,.2);
}

.search-modal .search-results-wrap{
  padding-top:0;
}

.search-modal .search-results-head{
  margin-bottom:12px;
}

.search-modal .search-section-title{
  font-size:14px;
  letter-spacing:-.015em;
}

.search-modal .search-results-count{
  font-size:12px;
  color:#858585;
}

.search-modal .search-active-filters{
  align-items:center;
}

.search-modal .search-filter-chip{
  background:#f3f3f1;
  padding:7px 10px;
  font-size:11px;
}

.search-modal .search-empty-state,
.search-modal .search-no-results{
  min-height:180px;
  border:1px solid #eeeeeb;
  background:#fafaf8;
  border-radius:18px;
}

.search-modal .search-empty-icon{
  width:48px;
  height:48px;
  margin-bottom:8px;
  border-radius:15px;
}

/* ---------- Viewer spacing: never collapse tabs into title ---------- */
.view-page.open .pin-details{
  display:block;
}

.view-page.open .pin-meta-row{
  margin-bottom:0;
}

.view-page.open .pin-tags{
  margin-top:10px;
  margin-bottom:0;
}

.view-page.open .view-tabs{
  position:relative;
  z-index:2;
  flex:none;
  margin-top:28px !important;
  margin-bottom:0 !important;
  padding:0 0 6px !important;
  min-height:36px;
  align-items:center;
  border-bottom:1px solid #eeeeeb;
}

.view-page.open .view-tab{
  height:32px;
  padding:0 14px;
  font-size:12px;
  background:#f3f3f1;
}

.view-page.open .view-tab.active{
  background:#111;
}

.view-page.open .view-panels{
  position:relative;
  margin-top:16px !important;
  min-height:80px;
}

/* ---------- Related photos: header/filter stays fixed while results scroll ---------- */
@media (min-width:1041px){
  .view-page.open .view-right-head{
    flex:0 0 auto;
    padding-top:2px;
    padding-bottom:12px;
  }

  .view-page.open .related-filters{
    flex:0 0 auto;
    margin-top:2px;
    padding-bottom:14px;
  }

  .view-page.open .related-scroll{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding-top:2px;
  }
}

/* ---------- BTS empty state ---------- */
.bts-empty{
  grid-column:1 / -1;
  min-height:210px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  padding:28px 20px;
  border:1px dashed #dededb;
  border-radius:18px;
  background:#fafaf8;
}

.bts-empty-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#f0f0ed;
  color:#777;
  margin-bottom:10px;
}

.bts-empty-icon svg{
  width:22px;
  height:22px;
}

.bts-empty-title{
  font-size:14px;
  font-weight:800;
  color:#222;
}

.bts-empty-text{
  margin-top:6px;
  max-width:360px;
  color:#858585;
  font-size:12px;
  line-height:1.5;
}

/* ---------- Search modal mobile ---------- */
@media (max-width:720px){
  .search-modal .search-panel{
    top:0;
    left:0;
    transform:none;
    width:100%;
    height:100dvh;
    max-height:none;
    padding:10px 10px calc(12px + env(safe-area-inset-bottom));
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  .search-modal .search-topbar{
    padding-bottom:10px;
  }

  .search-modal .search-close{
    width:40px;
    height:40px;
    border-radius:13px;
  }

  .search-modal .search-modal-input{
    height:46px;
    border-radius:14px;
    padding:0 12px;
  }

  .search-modal .search-users-block{
    padding:12px 0 13px;
  }

  .search-modal .user-strip{
    gap:8px;
  }

  .search-modal .search-sections{
    padding-top:14px;
    gap:20px;
  }

  .search-modal .top-suggestions,
  .search-modal .search-results{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .search-modal .suggestion-card,
  .search-modal .search-result-card{
    border-radius:15px;
  }

  .search-modal .suggestion-title,
  .search-modal .search-result-title{
    left:9px;
    right:9px;
    bottom:8px;
    font-size:11px;
  }

  .view-page.open .view-tabs{
    margin-top:26px !important;
  }

  .view-page.open .view-panels{
    margin-top:14px !important;
  }
}

@media (max-width:420px){
  .search-modal .top-suggestions,
  .search-modal .search-results{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }

  .search-modal .recent-pill{
    height:32px;
    padding:0 10px;
    font-size:11px;
  }
}

/* Desktop search overlay: truly centered, focused and constrained. */
@media (min-width:721px){
  .search-modal{display:none;}
  .search-modal.open{display:block;}
  .search-modal .search-backdrop{background:rgba(19,17,24,.34);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
  .search-modal .search-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1120px,calc(100vw - 72px));height:min(820px,calc(100dvh - 72px));max-height:calc(100dvh - 72px);border:1px solid rgba(0,0,0,.07);border-radius:24px;box-shadow:0 30px 100px rgba(0,0,0,.2);padding:20px 22px 18px;overflow:hidden;}
}