/* ============================================================
   brutal.css — Social Mapia · "Brutalist Pop" theme
   ------------------------------------------------------------
   Full design system ported from socialmapia-v13-brutalist.
   Loads AFTER app.css and re-skins the whole site by:
     (1) re-declaring the design tokens app.css consumes, and
     (2) styling BOTH the target component classes and the
         app's real per-page classes to the same look.
   No markup/logic required to change — but converted pages
   (using .hiw-*, .auth, .mbar, .pcard … ) render pixel-true.
   Collision-safe: does NOT redefine app utilities
   .row / .container / .page / .map.
   ============================================================ */

:root{
  /* target palette */
  --ink:#161310; --ink-soft:#3a352d;
  --page:#ffd23f; --paper:#faf5e8; --card:#fffdf6; --card-2:#f2ecdb;
  --muted:#7c7360; --line:#161310;
  --blue:#2b52ff; --pink:#ff4d97; --lime:#c2ec3f; --lime-deep:#a6d215;
  --orange:#ff5c28; --violet:#8b5cf6; --gold:#ffb020; --danger:#ff3b30;
  --teal:#12b39a; --plum:#c04bd0;

  --r-pill:999px; --r-card:12px; --r-ctl:9px;
  --bd:2.5px solid var(--ink);
  --sh:4px 4px 0 var(--ink); --sh-sm:3px 3px 0 var(--ink); --sh-lg:6px 6px 0 var(--ink);

  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-ui:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* compat aliases so app.css rules emit brutalist output */
  --bg:var(--paper); --surface:var(--card); --surface-2:var(--card-2);
  --surface2:var(--card-2); --text:var(--ink);
  --border:var(--ink); --border-strong:var(--ink);
  --blue-strong:var(--blue); --blue-ink:var(--blue);
  --marker:var(--orange); --success:var(--teal);
  --shadow:var(--sh); --shadow-sm:var(--sh-sm);
  color-scheme:light;
}

/* ---------- base ---------- */
body{background:var(--paper);color:var(--ink);font-family:var(--font-ui);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.05;
  letter-spacing:-.02em}
a{color:var(--ink)}a:hover{color:var(--ink)}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.muted{color:var(--muted)}.verified{color:var(--blue)}
.page__title,.page__head h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-ui);font-size:.85rem;font-weight:700;line-height:1;
  padding:12px 16px;border-radius:var(--r-ctl);border:var(--bd);
  background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--sh-sm);transition:.1s}
.btn:hover{background:var(--card);transform:none}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn--blue{background:var(--blue);color:#fff}
.btn--ghost{background:var(--card)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--danger{background:var(--danger);color:#fff}
.btn--google{background:#fff}.btn--google i{color:#ea4335}
/* v9: coloured buttons keep their colour on hover (the plain .btn:hover above turned them white → white-on-white text) */
.btn--blue:hover{background:var(--blue);color:#fff}
.btn--gold:hover{background:var(--gold);color:var(--ink)}
.btn--danger:hover{background:var(--danger);color:#fff}
.btn--sm{padding:9px 12px;font-size:.78rem}
.btn--lg{padding:15px 18px;font-size:.95rem}
.btn--block,.btn--full{width:100%}
.iconbtn{width:40px;height:40px;border:var(--bd);border-radius:10px;background:var(--card);
  box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer}
.iconbtn:active{transform:translate(2px,2px);box-shadow:none}
.linkbtn,.reclabel .linkbtn{border:none;background:none;font-family:var(--font-mono);
  font-size:.72rem;font-weight:700;color:var(--blue);cursor:pointer}

/* ---------- pills / tags / chips / segmented ---------- */
.pill,.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:.76rem;font-weight:700;padding:7px 13px;border-radius:var(--r-pill);border:var(--bd);
  background:var(--card);color:var(--ink);cursor:pointer;white-space:nowrap;box-shadow:var(--sh-sm);transition:.1s}
.pill:hover,.chip:hover{color:var(--ink)}
.pill:active,.chip:active{transform:translate(2px,2px);box-shadow:none}
.pill.is-active,.pill.is-on,.chip.is-on,.chip.is-active{background:var(--lime);color:var(--ink);box-shadow:var(--sh-sm)}
.pill__n{background:var(--ink);color:var(--page);border-radius:var(--r-pill);
  font-family:var(--font-mono);font-weight:700;font-size:.66rem;padding:1px 7px;margin-left:2px}
.pill.is-active .pill__n{background:var(--ink);color:var(--lime)}
.tag,.tag--link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:.72rem;font-weight:700;padding:6px 11px;border-radius:var(--r-pill);border:var(--bd);
  color:var(--ink);background:var(--lime);text-decoration:none}
.tag--link:hover{background:var(--lime-deep)}
.tag--big{font-size:.82rem;padding:8px 13px}
.seg{display:inline-flex;border:var(--bd);border-radius:var(--r-pill);overflow:hidden;
  background:var(--card);box-shadow:var(--sh-sm);padding:0;gap:0}
.seg__btn{border:none;background:var(--card);color:var(--ink);font-family:var(--font-mono);
  font-weight:700;font-size:.72rem;padding:8px 12px;cursor:pointer}
.seg__btn+.seg__btn{border-left:2.5px solid var(--ink)}
.seg__btn.is-on{background:var(--lime)}
.vseg{display:inline-flex;border:var(--bd);border-radius:var(--r-pill);overflow:hidden;box-shadow:var(--sh-sm)}
.vseg button{border:none;background:var(--card);font-family:var(--font-mono);font-size:.68rem;
  font-weight:700;padding:8px 11px;cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:6px;white-space:nowrap}
.vseg button+button{border-left:2.5px solid var(--ink)}
.vseg button.on,.vseg button.is-on{background:var(--lime)}
.datechip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.68rem;
  font-weight:700;border:var(--bd);border-radius:var(--r-pill);padding:7px 11px;background:var(--card);box-shadow:var(--sh-sm)}

/* ---------- section label = lime pill ---------- */
.section-label{font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.01em;
  text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;
  background:var(--lime);border:var(--bd);padding:5px 11px;border-radius:var(--r-pill);box-shadow:var(--sh-sm)}
.section-label i{color:var(--ink)}
.reclabel{display:flex;align-items:center;justify-content:space-between;margin:18px 0 10px}

/* ---------- cards / empty / modal ---------- */
.card{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);padding:16px}
.card--hover:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-lg)}
.empty{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm);
  color:var(--muted);padding:22px;text-align:center;font-family:var(--font-mono);font-weight:500;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.modal,.modal__box,.claim-modal__box{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-lg)}
.modal-backdrop,.claim-modal{background:rgba(22,19,16,.55)}

/* ---------- avatars ---------- */
.avatar{border:2.5px solid var(--ink);background:var(--card-2);border-radius:50%;object-fit:cover;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}

/* ---------- inputs / forms ---------- */
.input,.select,.textarea{width:100%;font-family:var(--font-ui);font-size:.92rem;font-weight:500;
  color:var(--ink);background:#fff;border:var(--bd);border-radius:var(--r-ctl);padding:12px 13px;outline:none;transition:.1s}
.textarea{min-height:84px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:#b8ae97}
.input:focus,.select:focus,.textarea:focus{box-shadow:var(--sh-sm);transform:translate(-1px,-1px);border-color:var(--ink)}
.input.is-locked,.input:disabled{opacity:.7;background:var(--card-2);cursor:not-allowed}
.field{margin-bottom:14px}
.label{display:block;font-family:var(--font-mono);font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink);margin-bottom:6px}
.inwrap{position:relative}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:none;
  color:var(--ink-soft);cursor:pointer;font-size:.95rem;padding:6px}
.field-hint{font-family:var(--font-mono);font-size:.68rem;font-weight:500;color:var(--muted);margin-top:6px}
.field-hint a{color:var(--blue);font-weight:700}.field-hint b{color:var(--ink)}
.field-error{font-family:var(--font-mono);font-size:.68rem;font-weight:700;color:var(--danger);margin-top:6px}
.handle-status,.handle-chip{font-family:var(--font-mono);font-weight:700}
.handle-chip{display:inline-flex;align-items:center;gap:6px;background:var(--lime);border:2px solid var(--ink);
  padding:5px 10px;border-radius:var(--r-pill);font-size:.68rem;box-shadow:2px 2px 0 var(--ink);margin-top:9px}
.pwbars{display:flex;gap:5px;margin-top:9px}
.pwbars span{flex:1;height:8px;border:2px solid var(--ink);border-radius:4px;background:#fff}
.pwbars span.on{background:var(--lime)}
.divider{display:flex;align-items:center;gap:12px;margin:16px 0}
.divider::before,.divider::after{content:"";flex:1;height:2.5px;background:var(--ink)}
.divider span{font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase}

/* ---------- top nav (desktop) ---------- */
.nav{position:sticky;top:0;z-index:1000;background:var(--page);border-bottom:var(--bd);backdrop-filter:none}
.wordmark{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;
  font-size:1.05rem;letter-spacing:-.03em;padding:7px 13px;border:var(--bd);border-radius:var(--r-ctl);
  background:var(--card);box-shadow:var(--sh-sm);color:var(--ink)}
.wordmark b{background:var(--blue);color:#fff;padding:1px 7px;border-radius:6px;margin-left:2px;font-weight:800}
.nav__link{font-family:var(--font-mono);font-weight:700;color:var(--ink)}
.nav__link.is-active{color:var(--blue)}
.nav__icon,.nav__bell,.nav__avatar{color:var(--ink)}
.nav__creator{color:var(--blue)!important}
.nav__menubtn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;
  padding:0;cursor:pointer;font-size:1.1rem}   /* v53: ☰ link to menu.php, next to the bell */

/* ---------- bottom tab bar (all screen sizes) = target .mtab ---------- */
.mobilenav{background:var(--paper);backdrop-filter:none;border-top:var(--bd);z-index:1100;
  padding:8px 6px calc(10px + env(safe-area-inset-bottom));align-items:flex-end}
.mobilenav__i{color:var(--muted);font-family:var(--font-mono);font-size:.58rem;font-weight:700;gap:3px}
.mobilenav__i i{font-size:1.1rem}
.mobilenav__i:hover{color:var(--ink)}
.mobilenav__i.is-active,.mobilenav__i[aria-current]{color:var(--ink)}
.mobilenav__i.is-active i{background:var(--lime);border:2px solid var(--ink);border-radius:8px;padding:5px;box-shadow:2px 2px 0 var(--ink)}
/* "Add a pin" tab: same size as the other tabs, shown as a pink box like the active-tab box */
.mobilenav__add i{width:auto;height:auto;margin-top:0;font-size:1.1rem;padding:5px;border-radius:8px;
  background:var(--pink);color:#fff;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease}
.mobilenav__add:active i{transform:translate(2px,2px);box-shadow:none}
/* Profile tab shows the user's photo instead of the generic icon */
.mobilenav__av{width:26px;height:26px;border-radius:50%;object-fit:cover;border:2px solid var(--ink)}
.mobilenav__i.is-active .mobilenav__av{box-shadow:2px 2px 0 var(--ink);outline:2px solid var(--lime)}

/* ---------- target-native chrome (converted pages) ---------- */
.mbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:13px 15px;
  background:var(--paper);border-bottom:var(--bd)}
.mbar__ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--card);border:var(--bd);color:var(--ink);flex:none;box-shadow:var(--sh-sm)}
.mbar__t{font-family:var(--font-display);font-weight:800;font-size:1.1rem}.mbar__sp{flex:1}
.pad{padding:16px}.block{margin-top:24px}
.tagrow{display:flex;flex-wrap:wrap;gap:9px;margin:15px 0}
.railrow{display:flex;gap:14px;overflow-x:auto;margin:0 -16px;padding:4px 16px 8px}
.railrow::-webkit-scrollbar{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- pin-card (browse) ---------- */
.pcard,.pcreator,.place-card,.pick-card,.pick-hero,.wk-card,.mypin{position:relative;background:var(--card);
  border:var(--bd);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh);transition:.1s;display:block}
.pcard:active,.place-card:active,.pick-card:active,.mypin:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.pcard__media{position:relative;aspect-ratio:4/5}
.pcard__media img{width:100%;height:100%;object-fit:cover}
.pcard__scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(22,19,16,.94),transparent 54%)}
.pcard__cat,.pick-cat,.pcreator__logo{position:absolute;top:8px;left:8px;z-index:3;display:inline-flex;
  align-items:center;gap:5px;font-family:var(--font-mono);font-size:.6rem;font-weight:700;color:var(--ink);
  background:var(--lime);border:2px solid var(--ink);padding:3px 8px;border-radius:var(--r-pill)}
.pcard__off{position:absolute;top:8px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;color:#fff;background:var(--pink);
  border:2px solid var(--ink);padding:3px 8px;border-radius:var(--r-pill)}
.pcard__meta{position:absolute;left:10px;right:10px;bottom:10px;z-index:3}
.pcard__t{font-family:var(--font-display);font-weight:800;font-size:.95rem;line-height:1.1;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pcard__sub{font-family:var(--font-mono);font-size:.68rem;font-weight:700;color:#fff;margin-top:5px;
  display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard__sub i{font-size:.64rem;color:var(--lime);flex:none}
.pcard__sub img{width:17px;height:17px;border-radius:50%;border:1.5px solid #fff;flex:none}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- play buttons ---------- */
.play,.pin-gallery__play,.pick-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;background:var(--lime);border:var(--bd);box-shadow:var(--sh);
  display:flex;align-items:center;justify-content:center;color:var(--ink)}
.play--sm{width:30px;height:30px;font-size:.62rem;box-shadow:var(--sh-sm)}

/* ---------- coupons / offers ---------- */
.coupon{background:var(--pink);border:var(--bd);border-radius:var(--r-card);padding:15px 16px;box-shadow:var(--sh);position:relative}
.coupon__code{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:#fff}
.coupon__off,.coupon__pct{margin-left:9px;font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:var(--ink);
  background:#fff;border:2px solid var(--ink);padding:2px 8px;border-radius:var(--r-pill)}
.coupon__desc,.coupon__exp,.coupon__status--expired{display:block;color:rgba(255,255,255,.92);font-size:.8rem;font-weight:500;margin-top:8px}
.coupon--expired,.coupon__status--expired{background:var(--card-2)}
.coupon--expired .coupon__code{color:var(--ink)}
.coupon--expired .coupon__desc,.coupon--expired .coupon__exp{color:var(--ink-soft)}
.offer-teaser{border:var(--bd);border-radius:var(--r-card);background:var(--card);box-shadow:var(--sh-sm);padding:14px}
.offer-teaser__icon{color:var(--pink)}
.offer-teaser__label,.offer-teaser__cta{font-family:var(--font-mono);font-weight:700}
.offer-teaser--expired{background:var(--card-2);opacity:.8}

/* ---------- list rows (search / notifs / plan / saved / nearby) ---------- */
.pin-row,.sr-row,.plan-item,.rank-row,.sm-place-row,.recent-item,.mapia-row,.lrow,.mapia-row__main{
  display:flex;align-items:center;gap:12px;padding:11px 12px;background:var(--card);border:var(--bd);
  border-radius:var(--r-card);box-shadow:var(--sh-sm);margin-bottom:10px;transition:.1s;text-decoration:none;color:var(--ink)}
.pin-row:active,.sr-row:active,.plan-item:active,.mapia-row:active,.lrow:active{transform:translate(2px,2px);box-shadow:none}
.row--unread,.pin-row--unread{box-shadow:var(--sh)}
.pin-row__thumb,.sr-thumb,.plan-item__thumb,.sm-place-row__thumb,.lrow__thumb{width:50px;height:50px;border-radius:10px;
  border:2.5px solid var(--ink);object-fit:cover;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--card-2);font-size:1.05rem;color:var(--ink)}
.pin-row__body,.sr-body,.plan-item__body,.lrow__body{flex:1;min-width:0}
.pin-row__title,.sr-title,.plan-item__title,.mapia-row__title,.lrow__title{font-family:var(--font-display);
  font-weight:800;font-size:.94rem;line-height:1.15;display:flex;align-items:center;gap:7px}
.pin-row__sub,.sr-sub,.plan-item__sub,.lrow__sub{font-family:var(--font-mono);font-size:.7rem;color:var(--muted);
  margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.sr-group{font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.mapia-badge{font-family:var(--font-mono);font-weight:700;border:2px solid var(--ink);border-radius:var(--r-pill);font-size:.6rem;padding:2px 8px}
.mapia-badge--been{background:var(--lime)}
.mapia-row--been{opacity:.72}
.mapia-date{font-family:var(--font-mono);font-size:.68rem;font-weight:700}
.noti-dot{width:11px;height:11px;border-radius:50%;background:var(--pink);border:2px solid var(--ink);flex:none}

/* ---------- status badges ---------- */
.status{font-family:var(--font-mono);font-size:.6rem;font-weight:700;border:2px solid var(--ink);
  border-radius:var(--r-pill);padding:2px 8px;text-transform:uppercase;letter-spacing:.02em}
.status--active,.status--been{background:var(--lime);color:var(--ink);border-color:var(--ink)}
.status--draft{background:var(--card-2);color:var(--muted);border-color:var(--ink)}
.status--inactive,.status--ended,.status--hidden{background:var(--card-2);color:var(--muted);border-color:var(--ink)}
.toggle-on,.mypin-toggle.is-active{background:var(--lime)}
.toggle-off,.mypin-toggle.is-inactive{background:var(--card-2);color:var(--muted)}

/* ---------- pin view page ---------- */
.pin-gallery__main{border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);overflow:hidden}
.pin-gallery__cat{background:var(--lime)}
.pin-gallery__thumbs{display:flex;gap:10px;margin-top:12px}
.pin-gallery__thumb{aspect-ratio:1;flex:1;border-radius:10px;overflow:hidden;border:var(--bd);position:relative;
  cursor:pointer;box-shadow:var(--sh-sm);background-size:cover;background-position:center;background-color:var(--card)}
.pin-gallery__thumb.is-on{box-shadow:var(--sh);transform:translate(-1px,-1px)}
.pin-gallery__thumb.is-on::after{content:"";position:absolute;inset:0;border:3px solid var(--ink);border-radius:7px;z-index:2;outline:2px solid var(--card);outline-offset:-5px}
.pin-detail{padding:18px}
.pin-detail__title{font-family:var(--font-display);font-weight:800;font-size:1.75rem;line-height:1.05;margin:0 0 14px}
.pin-creator{display:flex;align-items:center;gap:11px;background:var(--card);border:var(--bd);border-radius:var(--r-card);
  box-shadow:var(--sh-sm);padding:11px 12px;color:var(--ink)}
.pin-creator__name{font-family:var(--font-display);font-weight:800}
.pin-creator__meta,.pin-creator__view{font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:var(--muted)}
.pin-creator__view{color:var(--blue)}
.pin-detail__desc{font-size:1.02rem;line-height:1.7;color:var(--ink-soft);font-weight:500}
.pin-detail__event{font-family:var(--font-mono);font-size:.8rem;font-weight:700;color:var(--ink)}
.pin-tags{display:flex;flex-wrap:wrap;gap:9px}
.pin-actions{margin-top:14px}
.action-row2{margin-bottom:10px}.action-row2 .btn{width:100%}
.action-grid,.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.action,.act{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 4px;border:var(--bd);
  border-radius:11px;background:var(--card);font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  color:var(--ink);cursor:pointer;text-align:center;box-shadow:var(--sh-sm);transition:.1s;text-decoration:none}
.action:active,.act:active{transform:translate(2px,2px);box-shadow:none}
.action i,.act i{font-size:1.2rem;color:var(--blue)}
.action:nth-child(2) i,.act:nth-child(2) i{color:var(--pink)}
.action:nth-child(3) i,.act:nth-child(3) i{color:var(--orange)}
.pin-link{font-family:var(--font-mono);font-size:.74rem;font-weight:700;color:var(--blue)}
.pin-link--muted{color:var(--muted);background:none;border:none;cursor:pointer}
.pin-detail__foot{display:flex;gap:16px;margin-top:14px}
.gstrip{display:flex;gap:10px;padding:16px 0 0}
.gthumb{flex:1;aspect-ratio:1;border-radius:10px;overflow:hidden;border:var(--bd);position:relative;cursor:pointer;box-shadow:var(--sh-sm)}
.gthumb img{width:100%;height:100%;object-fit:cover}

/* ---------- map chrome ---------- */
.map-wrap{border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);overflow:hidden}
.map-fab .btn,.map-dir,.sm-zoom__btn,.view-toggle__btn,.sort-btn{border:var(--bd);background:var(--card);
  box-shadow:var(--sh-sm);color:var(--ink);font-family:var(--font-mono);font-weight:700}
.sort-btn.is-active{background:var(--lime)}
.leaflet-popup-content-wrapper,.sm-popup__coupon{border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh)}
/* Photo place-card marker — one ink-outlined card (photo + name bar + pointer). v130: no shadow (flat).
   Replaces the old dark-theme look (navy bar, blurry shadow, white-ringed badges) from app.css. */
.sm-pin{filter:none}
.sm-pin:hover{transform:translate(0,-3px);filter:none}
.sm-pin__photo{border:2.5px solid var(--ink);border-bottom:none;border-radius:11px 11px 0 0;background-color:var(--card-2)}
.sm-pin__name{background:var(--card);color:var(--ink);border:2.5px solid var(--ink);border-top:2px solid var(--ink);border-radius:0 0 11px 11px;
  font-family:var(--font-ui);font-size:.62rem;font-weight:700;letter-spacing:0;padding:3px 5px 4px}
.sm-pin__tail{margin-top:-1px;border-left-width:7px;border-right-width:7px;border-top:9px solid var(--ink)}
.sm-pin__badge,.sm-pin__evt,.sm-pin__offer,.sm-pin__count,.sm-pin__logo{border:2px solid var(--ink)!important;box-shadow:none!important;border-radius:6px!important}
.sm-pin__badge{width:20px;height:20px;font-size:.58rem}
.sm-pin__offer{background:var(--pink)!important;color:#fff!important}
.sm-pin__evt{background:var(--page)!important;color:var(--ink)!important}
.sm-pin__count{background:var(--lime)!important;color:var(--ink)!important;font-family:var(--font-mono)}
.sm-pin__ph{color:var(--ink);font-size:1.2rem}

/* Base map "Soft Toner Paper" — tiles re-printed in ink / grey / paper (filter defined by SM.baseMap in app.js) */
.sm-tiles-paper{filter:url(#smTonePaper)}
.sm-tiles-colour{filter:url(#smWaterParks);mix-blend-mode:multiply}   /* water + parks only (filter in app.js) */
.leaflet-container{background:var(--paper)}

/* Draggable drop-pin (add/edit pin, place editor) — markup from SM.markerHtml() */
.sm-drop{position:relative;width:44px;height:56px;transition:transform .12s ease}
.sm-drop__head{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:12px;background:var(--pink);
  border:var(--bd);box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.15rem;z-index:1}
.sm-drop__tail{position:absolute;left:50%;top:35px;width:15px;height:15px;background:var(--pink);z-index:2;
  border-right:var(--bd);border-bottom:var(--bd);transform:translateX(-50%) rotate(45deg)}
/* lifted while dragging */
.leaflet-marker-draggable:active .sm-drop,.leaflet-dragging .leaflet-marker-draggable .sm-drop{transform:translate(-2px,-5px)}
.leaflet-marker-draggable:active .sm-drop__head{box-shadow:5px 7px 0 var(--ink)}

/* Leaflet's default +/- control (pin form, place editor) */
.leaflet-bar{border:var(--bd)!important;border-radius:10px!important;box-shadow:var(--sh-sm);overflow:hidden}
.leaflet-bar a{background:var(--card)!important;color:var(--ink)!important;font-weight:700;border-bottom:2px solid var(--ink)!important}
.leaflet-bar a:last-child{border-bottom:none!important}
.leaflet-bar a:hover{background:var(--lime)!important}

/* Cluster bubble — ink block instead of the old blue glow */
.sm-cluster{background:var(--lime)!important;color:var(--ink)!important;border:var(--bd)!important;
  box-shadow:none!important;font-family:var(--font-mono);font-weight:700;border-radius:12px!important}
.explore-count,.explore-sub{font-family:var(--font-mono);font-weight:700;color:var(--muted)}
.explore-head .page__title,.explore-head h1{font-size:1.85rem}
.filter-bar{display:flex;gap:9px;overflow-x:auto;padding:4px 0 8px}
.filter-bar::-webkit-scrollbar{display:none}

/* ---------- place hub ---------- */
.pcreator{overflow:visible}
.place-cover,.hub__cover{border:var(--bd);border-radius:var(--r-card) var(--r-card) 0 0;overflow:hidden}
.place-head,.hub__head{border:var(--bd);border-top:none;border-radius:0 0 var(--r-card) var(--r-card);background:var(--card);padding:14px 16px}
.place-cover__logo,.place-head__logo,.hub__logo{border:var(--bd);box-shadow:var(--sh);border-radius:16px}
.place-cover__verified,.hub__vbadge{font-family:var(--font-mono);font-weight:700;border:var(--bd);background:var(--lime);
  border-radius:var(--r-pill);padding:6px 11px;box-shadow:var(--sh-sm)}
.place-head__title,.hub__name{font-family:var(--font-display);font-weight:800}
.hub__addr{color:var(--muted);font-family:var(--font-mono);font-size:.8rem;font-weight:500}
.hub__addr i{color:var(--pink)}
.pa-grid,.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pa-stat,.stat,.an-kpi,.landing-stat{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm);padding:13px 14px}
.pa-stat__n,.stat__val,.an-kpi__n,.landing-stat__n,.stat__n{font-family:var(--font-display);font-weight:800;font-size:1.6rem;line-height:1}
.pa-stat__l,.stat__label,.an-kpi__l,.landing-stat__l,.stat__l{font-family:var(--font-mono);font-size:.62rem;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.01em;margin-top:5px}
.stat__icon{width:38px;height:38px;border:var(--bd);border-radius:9px;display:flex;align-items:center;justify-content:center;
  box-shadow:2px 2px 0 var(--ink);margin-bottom:10px}

/* ---------- profile ---------- */
.c1,.pf-card,.phx,.profile-head{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh)}
.c1__band,.prof__cover,.profile-cover{position:relative;overflow:hidden;border-bottom:var(--bd)}
.c1__id{padding:0 16px}
.pf-name,.phx__name,.profile-head__name,.prof__user{font-family:var(--font-display);font-weight:800;font-size:1.6rem;letter-spacing:-.02em}
.pf-handle,.phx__handle,.prof__name{font-family:var(--font-mono);color:var(--muted)}
.pf-av,.phx__av,.prof__avatar{border:var(--bd);box-shadow:var(--sh)}
.social,.social-edit__icon,.prof__soc,.soc-ico{width:44px;height:44px;border-radius:11px;background:var(--card);
  border:var(--bd);box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:1.05rem}
.social:active,.prof__soc:active{transform:translate(2px,2px);box-shadow:none}
.linktree{display:grid;grid-template-columns:minmax(0,1fr);gap:11px;margin-top:18px}
.linkrow{display:flex;align-items:center;gap:12px;padding:15px 16px;background:var(--card);border:var(--bd);
  border-radius:var(--r-card);font-weight:700;font-size:.9rem;box-shadow:var(--sh)}
.linkrow:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.linkrow i:first-child{color:var(--pink)}.linkrow i:last-child{margin-left:auto;color:var(--muted)}
.linkrow__txt{display:flex;flex-direction:column;gap:2px;flex:1 1 0;min-width:0}
.linkrow__url{font-family:var(--font-mono);font-size:.72rem;font-weight:500;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linkrow__t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* max 2 lines per card: title + url */
.profpage .linktree{gap:8px;margin-top:16px}
.profpage .linkrow{padding:9px 14px;gap:11px;font-size:.88rem;box-shadow:var(--sh-sm)}
.profpage .linkrow__txt{gap:0}
.cc__acts,.prof__cta{display:flex;gap:9px}
/* user's own pins on profile */
.mypin{border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm);background:var(--card);padding:12px 13px;margin-bottom:12px}
.mypin__thumb{border:var(--bd);border-radius:10px}
.mypin__title{font-family:var(--font-display);font-weight:800}
.mypin__cat,.mypin__meta,.mypin__views{font-family:var(--font-mono);font-size:.7rem;color:var(--muted)}
.mypin__arrow{color:var(--ink-soft)}

/* ---------- pick ---------- */
.pick-hero{box-shadow:var(--sh-lg);overflow:hidden}
.pick-hero__badge,.pickhero__badge{font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:#fff;
  background:var(--blue);border:var(--bd);padding:6px 12px;border-radius:var(--r-pill);box-shadow:var(--sh-sm)}
.pick-hero__title,.pickhero__title{font-family:var(--font-display);font-weight:800;font-size:1.5rem;line-height:1.08}
.pick-hero__sub,.pickhero__sub{color:var(--muted);font-family:var(--font-mono);font-size:.78rem;font-weight:500}
.pick-hero__sub i{color:var(--pink)}
.pick-hero__acts{display:flex;gap:9px}.pick-hero__acts .btn--blue{flex:1}
.pick-hero__place,.pickhero__place{display:flex;align-items:center;gap:8px;padding:14px 16px;border-top:var(--bd);
  color:var(--ink);font-family:var(--font-mono);font-size:.8rem;font-weight:700;background:var(--lime)}
.pick-cat{background:var(--lime)}
.pick-deal{font-family:var(--font-mono);font-weight:700;color:#fff;background:var(--pink);border:2px solid var(--ink);border-radius:var(--r-pill)}
.pick-dist{font-family:var(--font-mono);font-weight:700;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:var(--r-pill)}
.pick-who{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.88rem}
.pick-card__title{font-family:var(--font-display);font-weight:800}
.pick-cats{display:flex;gap:9px;overflow-x:auto;padding:2px 0 6px}.pick-cats::-webkit-scrollbar{display:none}
.pick-title{font-family:var(--font-display);font-weight:800}

/* ---------- manage cards (my pins / business) ---------- */
.mcard,.myrest{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm);padding:12px 13px;margin-bottom:12px}
.mcard__top,.myrest__body{display:flex;gap:12px;align-items:center}
.mcard__acts,.myrest__acts{display:flex;gap:8px;margin-top:12px}
.mcard__acts .btn,.myrest__acts .btn{flex:1;padding:9px 10px}
.myrest__logo{border:var(--bd);border-radius:12px;box-shadow:var(--sh-sm)}
.myrest__name{font-family:var(--font-display);font-weight:800}
.myrest__stats{font-family:var(--font-mono);font-size:.7rem;color:var(--muted)}
.mypin-del,.mapia-remove{color:var(--danger)}

/* ---------- add-pin wizard ---------- */
.wiz-prog{display:flex;gap:8px;margin-bottom:16px}
.wchip,.wiz-progress__num{flex:1;text-align:center;font-family:var(--font-mono);font-weight:700;font-size:.72rem;
  border:var(--bd);border-radius:var(--r-pill);background:var(--card);box-shadow:var(--sh-sm);padding:9px 6px;color:var(--ink)}
.wchip.on{background:var(--lime)}.wchip.done{background:var(--pink);color:#fff}
.wstep{display:none}.wstep.on{display:block}
.wiz-nav .btn{box-shadow:var(--sh-sm)}
/* Sticky wizard buttons sit ABOVE the fixed bottom tab bar (else Publish is hidden under it) */
.wiz-nav{bottom:calc(66px + env(safe-area-inset-bottom));background:var(--paper);z-index:50;padding:12px 0 14px;
  /* paint the bar edge-to-edge (and a little below, to meet the tab bar) so page content never peeks around it */
  /* (shadows, unlike positioned boxes, never widen the page) — paper fill on top, ink line peeking 2.5px above it */
  box-shadow:0 0 0 100vmax var(--paper),0 -2.5px 0 100vmax var(--ink);clip-path:inset(-2.5px -100vmax -14px -100vmax)}
.fcard{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm);padding:16px;margin-bottom:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.catpills{display:flex;gap:8px;flex-wrap:wrap}
.pslots{display:flex;gap:10px;flex-wrap:wrap}
.pslot{width:92px;height:92px;border-radius:12px;border:var(--bd);position:relative;overflow:hidden;
  background-size:cover;background-position:center;box-shadow:var(--sh-sm)}
.pslot--add{border:2.5px dashed var(--ink);background:var(--card);display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);font-size:1.4rem;cursor:pointer;box-shadow:none}
.pslot__cover{position:absolute;left:5px;bottom:5px;background:var(--blue);color:#fff;font-family:var(--font-mono);
  font-size:.54rem;font-weight:700;padding:2px 7px;border-radius:999px;border:2px solid var(--ink)}
.pslot__del{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;border:2px solid var(--ink);
  background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:.6rem;cursor:pointer}
.formbar{position:sticky;bottom:0;z-index:30;display:flex;gap:10px;padding:12px 14px;background:var(--paper);border-top:var(--bd)}
.formbar .btn{flex:1}

/* ---------- settings / edit profile ---------- */
.settings-cover{position:relative;border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);overflow:hidden}
.settings-cover__btn,.settings-avatar__btn{font-family:var(--font-mono);font-size:.66rem;font-weight:700;background:var(--card);
  border:var(--bd);border-radius:var(--r-pill);padding:7px 12px;box-shadow:var(--sh-sm)}
.settings-avatar img,.settings-avatar .avatar{border:var(--bd);box-shadow:var(--sh)}
.settings-avatar .cam,.editlogo .cam{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;
  border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);display:flex;align-items:center;justify-content:center;font-size:.72rem}
.soc-row,.linkedit{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.radar-on,.pin-creator__radar .is-on{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:.7rem;font-weight:700;color:#fff;background:var(--pink);border:var(--bd);border-radius:var(--r-pill);padding:8px 12px;box-shadow:var(--sh-sm)}
.newchip{font-family:var(--font-mono);font-size:.6rem;font-weight:700;background:var(--lime);border:2px solid var(--ink);border-radius:var(--r-pill);padding:2px 7px}

/* ---------- analytics ---------- */
.range{display:flex;gap:8px;margin-bottom:16px}
.chartcard{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);padding:16px;margin-bottom:22px}
.bars,.chart{display:flex;align-items:flex-end;gap:4px;height:150px;margin-top:10px}
.bars .bar,.chart__bar{width:100%;background:var(--lime);border:2px solid var(--ink);border-radius:5px 5px 0 0;box-shadow:1px 1px 0 var(--ink)}
.bars .col--now .bar{background:var(--pink)}
.bars .bx,.chart__x{font-family:var(--font-mono);font-size:.54rem;font-weight:700;color:var(--muted)}
.rank,.rank-row__n,.rank-row__n--top,.wp-num{width:30px;height:30px;flex:none;border:var(--bd);border-radius:8px;
  background:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:800;font-size:.9rem;box-shadow:2px 2px 0 var(--ink);color:var(--ink)}
.metric{font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:var(--ink)}
.pa-table th,.pa-table td{font-family:var(--font-mono);font-size:.74rem}
.pa-table th{text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}

/* ---------- auth (target-native) ---------- */
.auth{padding:28px 20px 42px;min-height:100%;max-width:430px;margin:0 auto}
.auth__brand{text-align:center;margin-bottom:22px}
.auth__logo{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  letter-spacing:-.03em;border:var(--bd);border-radius:12px;background:var(--card);padding:8px 14px;box-shadow:var(--sh)}
.auth__logo b{background:var(--blue);color:#fff;padding:1px 8px;border-radius:7px;margin-left:3px}
.auth__brand p{font-family:var(--font-mono);font-size:.76rem;font-weight:500;color:var(--ink-soft);margin:14px 0 0}
.authcard{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-lg);padding:20px 18px}
.authcard h1{font-size:1.55rem;text-align:center;margin-bottom:5px}
.authcard .sub{font-family:var(--font-mono);font-size:.74rem;font-weight:500;color:var(--muted);text-align:center;margin:0 0 18px}
.auth__alt{text-align:center;font-family:var(--font-mono);font-size:.78rem;font-weight:500;color:var(--ink-soft);margin-top:20px}
.auth__alt a{color:var(--blue);font-weight:700}
.otp{display:flex;gap:8px;justify-content:center;margin:4px 0 2px}
.otp input{width:46px;height:56px;text-align:center;font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  color:var(--ink);border:var(--bd);border-radius:10px;background:#fff;box-shadow:var(--sh-sm);outline:none}
.otp input:focus{background:var(--lime)}
.verify-ico{width:76px;height:76px;margin:4px auto 14px;border:var(--bd);border-radius:18px;background:var(--lime);
  box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;font-size:2rem}

/* ---------- how it works (guide) ---------- */
.hiw-hero{background:var(--lime);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-lg);padding:24px 18px;text-align:center;margin-bottom:20px}
.hiw-hero h1{font-size:2rem;line-height:1;margin-bottom:12px}
.hiw-hero p{font-family:var(--font-mono);font-size:.82rem;font-weight:500;color:var(--ink);margin:0 0 18px}
.hiw-step{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);padding:16px;margin-bottom:14px}
.hiw-num{width:48px;height:48px;flex:none;border:var(--bd);border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.4rem;box-shadow:var(--sh-sm);transform:rotate(-4deg);background:var(--card)}
.hiw-step h3{font-size:1.15rem;margin-bottom:6px;display:flex;align-items:center;gap:9px}
.hiw-step p{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);margin:0;line-height:1.5}
.feat{display:flex;gap:12px;align-items:flex-start;padding:14px;background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm);margin-bottom:10px}
.feat .fi{width:44px;height:44px;flex:none;border:var(--bd);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:var(--sh-sm)}
.feat b{font-family:var(--font-display);font-weight:800;font-size:.95rem}
.feat p{font-family:var(--font-mono);font-size:.7rem;color:var(--muted);margin:3px 0 0;line-height:1.45}
.hiw-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.hiw-final{background:var(--blue);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-lg);padding:22px 18px;text-align:center;color:#fff;margin-top:8px}
.hiw-final h2{font-size:1.5rem;color:#fff;margin-bottom:14px}

/* ---------- legal / choices / prose ---------- */
.prose h2{font-family:var(--font-display);font-weight:800;font-size:1.15rem;margin:20px 0 8px}
.prose h2:first-child{margin-top:0}
.prose p{font-size:.9rem;line-height:1.65;color:var(--ink);margin:0 0 12px}
.prose .upd{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);margin-bottom:16px}
.choices{display:grid;gap:12px;margin:20px 0}
.choice{display:flex;align-items:center;gap:14px;padding:18px;border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);cursor:pointer;background:var(--card)}
.choice__ic{width:52px;height:52px;flex:none;border:var(--bd);border-radius:13px;background:var(--card);box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;font-size:1.35rem}
.choice h3{font-size:1.2rem;margin-bottom:2px}
.choice p{font-family:var(--font-mono);font-size:.7rem;color:var(--ink);margin:0;opacity:.8}
.editlogo{border:var(--bd);box-shadow:var(--sh);border-radius:16px}

/* ---------- promos ---------- */
.promo-banner{border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);background:var(--gold);color:var(--ink)}
.promo-banner__title{font-family:var(--font-display);font-weight:800}
.promo-banner__text,.promo-banner__cta{font-family:var(--font-mono);font-weight:700}
.promo-popup__title{font-family:var(--font-display);font-weight:800}

/* ---------- flashes ---------- */
.flash-wrap{max-width:940px;margin:12px auto 0;padding:0 16px}
.flash{font-family:var(--font-ui);font-weight:600;border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);
  display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:10px}
.flash--success{background:var(--lime)}
.flash--error{background:var(--pink);color:#fff}
.flash--info{background:var(--card)}
.flash__x{margin-left:auto;border:none;background:none;font-size:1.2rem;cursor:pointer;color:inherit}

/* ---------- footer ---------- */
.site-footer{border-top:var(--bd);background:var(--paper);font-family:var(--font-mono);font-weight:500}
.site-footer a{color:var(--ink)}
.foot{font-family:var(--font-mono);font-size:.8rem;font-weight:500;color:var(--ink);text-align:center}
.foot i{color:var(--pink)}

/* ============================================================
   EXPLORE — full-bleed map + floating chrome + bottom sheet
   ============================================================ */
.exp{max-width:520px;margin:0 auto;background:var(--paper)}
/* Phone-column pages: as soon as the screen is wider than the column (>520px) there are empty
   gutters, so draw the ink side-rails right away (they used to start at 761px, which left
   521–760px screens looking cut off). */
@media(min-width:521px){
  .exp,.pinpage,.profpage,.mymapia,.placepage,.searchpage,.anapage,.mypinspage,.bizpage,.radarpage,.formpage,.pickpage,.notifpage{
    border-left:var(--bd);border-right:var(--bd);min-height:100vh}
}
@media(min-width:761px){.exp{max-width:560px;border-left:var(--bd);border-right:var(--bd);min-height:100vh}}
.exp__map{position:relative;height:56vh;min-height:340px;overflow:hidden;border-bottom:var(--bd)}
.exp__map .map,.exp__map #map{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.exp__search{flex:1;display:flex;align-items:center;gap:9px;background:var(--card);border:var(--bd);
  border-radius:var(--r-pill);padding:11px 15px;box-shadow:var(--sh);color:var(--muted);text-decoration:none;min-width:0}
.exp__search i{color:var(--blue);flex:none}
.exp__search span{font-family:var(--font-mono);font-size:.8rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A sideways-scrolling row clips vertically too — pad it so the pills' hard shadow (3px) and
   press/focus states aren't chopped off. Solid strip behind it so the chips read clearly over the map. */
.exp__pills{position:absolute;top:0;left:0;right:0;z-index:600;display:flex;gap:9px;overflow-x:auto;
  padding:14px 12px 10px;background:var(--paper);border-bottom:var(--bd)}
.exp__pills::-webkit-scrollbar{display:none}
.exp__near{position:absolute;right:14px;bottom:46px;z-index:600;display:inline-flex;align-items:center;gap:8px;
  background:var(--blue);border:var(--bd);color:#fff;border-radius:var(--r-pill);padding:11px 16px;
  font-family:var(--font-mono);font-size:.78rem;font-weight:700;box-shadow:var(--sh);cursor:pointer}
.exp__near i{color:#fff}
.exp__near:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.exp__near.is-located{background:var(--lime);color:var(--ink)}
.exp__near.is-located i{color:var(--ink)}
/* v140: Explore Distance button — reel-style round-square icon + small label under it
   (like the Reels page's Distance side button); opens the distance sheet (#kmSheet) */
.exp__km{position:absolute;right:14px;bottom:38px;z-index:600;display:flex;flex-direction:column;align-items:center;gap:4px}
.exp__kmbtn{width:48px;height:48px;border-radius:12px;background:var(--blue);border:var(--bd);color:#fff;
  box-shadow:var(--sh-sm);font-size:1.35rem;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.exp__kmbtn i{color:inherit}
.exp__kmbtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.exp__kmbtn.is-on{background:var(--lime);color:var(--ink)}
.exp__kmbtn:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.exp__kmlbl{font-size:.64rem;font-weight:800;color:var(--ink);background:var(--card);border:2px solid var(--ink);
  border-radius:999px;padding:1px 7px;white-space:nowrap;line-height:1.35}
.exp__sheet{position:relative;z-index:5;margin-top:-20px;background:var(--paper);
  border-top-left-radius:20px;border-top-right-radius:20px;border:var(--bd);border-bottom:none}
.exp__handle{width:46px;height:5px;border-radius:3px;background:var(--ink);margin:10px auto 8px}
.exp__sheethead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 16px 0}
.exp__sheethead h3{font-family:var(--font-display);font-weight:800;font-size:1.15rem}
.exp__count{font-family:var(--font-mono);font-size:.68rem;font-weight:700;color:var(--muted);
  border:var(--bd);border-radius:var(--r-pill);padding:4px 10px;background:var(--card)}
.exp__map .sm-zoom{display:flex;flex-direction:column;gap:8px}
.exp__map .sm-zoom__btn{width:38px;height:38px;border-radius:10px}
.pcard__ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:2rem}
.pcard__play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:3;width:38px;height:38px;
  border-radius:50%;background:var(--lime);border:2.5px solid var(--ink);box-shadow:var(--sh-sm);
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:.72rem}
.pgrid{padding:16px}
.pgrid .empty{grid-column:1/-1}

/* keep Leaflet zoom clear of the floating category chips */
.exp__map .leaflet-top.leaflet-right{top:72px}
.exp__map .leaflet-control-attribution{font-size:9px}
/* The bottom sheet overlaps the map's last ~20px, which hid the (legally required) map credits.
   Lift them above the sheet and move them left, clear of the "Near me" button. */
.exp__map .leaflet-bottom.leaflet-right{bottom:24px;left:0;right:auto}
.exp__map .leaflet-control-attribution{background:rgba(250,245,232,.85);border-radius:0 6px 6px 0;margin:0}

/* --- Explore: keep the sticky top nav ABOVE the floating search (so the
   search slides under it on scroll instead of overlapping), by containing
   the map + its floating chrome in their own low stacking context --- */
.exp__map{z-index:0}
.pcard__dist{display:inline-flex;align-items:center;gap:5px;margin-top:7px;
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;color:var(--ink);background:#fff;
  border:2px solid var(--ink);padding:3px 8px;border-radius:var(--r-pill)}
.pcard__dist i{color:var(--blue);font-size:.58rem}

.mobilenav__i.on{color:var(--ink)}
.mobilenav__i.on i{background:var(--lime);border:2px solid var(--ink);border-radius:8px;padding:5px;box-shadow:2px 2px 0 var(--ink)}
.mobilenav__add.is-active i,.mobilenav__add.on i{background:var(--pink)}
.exp{padding-bottom:84px}
.no-mobilenav .exp{padding-bottom:0}

/* ---------- guest bottom bar (low-pressure alternative to the full intro modal) ---------- */
.guest-bar{position:fixed;left:0;right:0;bottom:var(--mobilenav-h,58px);z-index:950;
  display:flex;align-items:center;gap:10px;margin:0 auto;max-width:560px;
  background:var(--card);border:var(--bd);border-bottom:none;border-radius:var(--r-card) var(--r-card) 0 0;
  box-shadow:var(--sh);padding:10px 12px}
.no-mobilenav .guest-bar{bottom:0}
.guest-bar__txt{flex:1;min-width:0;font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:var(--ink)}
.guest-bar__x{flex:none;background:none;border:none;color:var(--muted);font-size:1rem;line-height:1;
  padding:6px;cursor:pointer}
.guest-bar__x:hover{color:var(--ink)}
/* Keep page content (e.g. a page's own Save button) from being hidden behind the bar. */
body.has-guest-bar{padding-bottom:64px}
body.has-guest-bar.no-mobilenav{padding-bottom:56px}

/* ============================================================
   PIN PAGE (pinA) — full-bleed hero + overlaid title/creator,
   gallery strip, pad body, acts, coupon, location, rail
   ============================================================ */
.pinpage{max-width:520px;margin:0 auto;background:var(--paper);position:relative}
@media(min-width:761px){.pinpage{max-width:560px;border-left:var(--bd);border-right:var(--bd);min-height:100vh}}
.pinpage .mbar--float{position:absolute;top:0;left:0;right:0;z-index:20;background:transparent;border:none;padding:14px 14px 0}
.pin-gallery{position:relative;margin:0}
.pin-gallery__main.pinA__hero{position:relative;width:100%;height:64vh;min-height:420px;max-height:640px;
  border:none;border-radius:0;box-shadow:none;border-bottom:var(--bd);background-size:cover;background-position:center;cursor:zoom-in}
.pin-gallery__main.pinA__hero.pin-gallery__main--noimg{background:var(--card-2)}
.pinA__hero .pin-gallery__cat{position:absolute;top:20px;left:16px;z-index:21;background:var(--lime)}
/* v40: icon only (name is in the tooltip + for screen readers) — a round badge, same height as the ⋯ button */
.pinA__hero .pin-gallery__cat--ic{top:16px;width:40px;height:40px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;gap:0}
.pinA__hero .pin-gallery__ev{position:absolute;top:66px;right:16px;z-index:6;background:var(--card)}
.pinA__hero .pin-gallery__play{display:none}
/* v95: pin swipe (assets/js/pin-swipe.js) — "3 of 24 · #tag" pill, ‹ › arrows on computers,
   slide in/out between pins, a bump at the start, and a short animated note. */
.pinA__hero{touch-action:pan-y}
.pswipe__count{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:21;pointer-events:none;
  max-width:calc(100% - 150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--font-ui);font-size:.66rem;font-weight:600;line-height:1;padding:5px 8px;border-radius:999px;
  background:rgba(0,0,0,.45);color:#fff;transition:opacity .5s}
/* v101: small see-through label that fades out after a moment, comes back on each swipe */
.pswipe__count.is-faded{opacity:0}
.pswipe__count:empty{display:none}
.pswipe__count b{font-weight:800}
.pswipe__count i{color:var(--blue)}
.pswipe__arrow{display:none}
@media (hover:hover) and (pointer:fine){
  /* v97: quiet arrows — just the icon, no button background */
  .pswipe__arrow{display:flex;position:absolute;top:42%;z-index:21;width:40px;height:40px;align-items:center;justify-content:center;
    background:none;border:none;box-shadow:none;padding:0;color:rgba(255,255,255,.7);cursor:pointer;font-size:1.6rem;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));transition:color .15s}
  .pswipe__arrow[hidden]{display:none}
  .pswipe__arrow--prev{left:6px}.pswipe__arrow--next{right:6px}
  .pswipe__arrow:hover,.pswipe__arrow:focus-visible{color:#fff}
}
/* Middle of the photo: clear of the category badge, the top-right Share/Directions/Plan stack and the ‹ › arrows. */
.pswipe__note{position:absolute;top:44%;left:50%;z-index:22;pointer-events:none;width:max-content;max-width:calc(100% - 120px);
  display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;
  font-family:var(--font-ui);font-size:.86rem;font-weight:700;line-height:1.25;
  background:var(--lime);color:var(--ink);border:var(--bd);box-shadow:var(--sh-sm);
  opacity:0;transform:translate(-50%,-30%) scale(.94);transition:opacity .25s ease,transform .3s cubic-bezier(.2,1.4,.4,1)}
.pswipe__note.is-in{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pswipe__note i{font-size:1.15rem;flex:none}
.pswipe__hand{animation:pswipeHand 1.1s ease-in-out 3}
@keyframes pswipeHand{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}}
.pinA__hero.is-out-next{transition:transform .17s ease-in,opacity .17s ease-in;transform:translateX(-28%);opacity:.2}
.pinA__hero.is-out-prev{transition:transform .17s ease-in,opacity .17s ease-in;transform:translateX(28%);opacity:.2}
.pinA__hero.is-in-next{animation:pswipeInNext .26s ease-out}
.pinA__hero.is-in-prev{animation:pswipeInPrev .26s ease-out}
@keyframes pswipeInNext{from{transform:translateX(22%);opacity:.3}to{transform:none;opacity:1}}
@keyframes pswipeInPrev{from{transform:translateX(-22%);opacity:.3}to{transform:none;opacity:1}}
.pinA__hero.is-bump-r{animation:pswipeBumpR .3s ease-out}
.pinA__hero.is-bump-l{animation:pswipeBumpL .3s ease-out}
@keyframes pswipeBumpR{50%{transform:translateX(18px)}}
@keyframes pswipeBumpL{50%{transform:translateX(-18px)}}
@media (prefers-reduced-motion:reduce){.pswipe__note,.pswipe__hand{transition:none;animation:none}}
.pinA__scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to top,rgba(22,19,16,.94),rgba(22,19,16,.28) 44%,transparent 68%)}
.pinA__foot{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:16px 16px 18px}
.pinA__title{font-family:var(--font-display);font-weight:800;font-size:1.85rem;line-height:1.04;color:#fff;margin:0 0 12px}
.pinA__by{display:flex;align-items:center;gap:11px}
.pinA__byid{display:flex;align-items:center;gap:11px;flex:1;min-width:0;text-decoration:none;color:#fff}
.pinA__byid img,.pinA__byav{width:44px;height:44px;border-radius:50%;border:2.5px solid #fff;object-fit:cover;flex:none;
  display:flex;align-items:center;justify-content:center;background:var(--card-2);color:var(--ink);box-shadow:var(--sh-sm)}
.pinA__byn{min-width:0}
.pinA__byn .n{font-family:var(--font-display);font-weight:800;font-size:1.15rem;line-height:1.15;color:#fff;display:flex;align-items:center;gap:6px;min-width:0}   /* @username = the big line */
.pinA__byn .u{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pinA__byn .h{font-family:var(--font-mono);font-size:.68rem;font-weight:600;color:rgba(255,255,255,.75);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.pinA__by .verified{color:var(--lime)}
/* v41: creator row = separate links (avatar / @handle / name) + a plain-text Follow next to the handle */
.pinA__byid a{color:#fff;text-decoration:none}
.pinA__byn .n .u{min-width:0}
.pinA__fdot{opacity:.7;font-weight:700;flex:none}
.follow-txt{background:none;border:0;padding:4px 2px;margin:-4px 0;font:inherit;font-size:.95rem;font-weight:800;
  color:var(--lime);cursor:pointer;white-space:nowrap;flex:none}
.follow-txt:hover{text-decoration:underline}
.follow-txt.is-on{color:rgba(255,255,255,.75);font-weight:700}
.pinA__byn .n form{display:inline-flex;flex:none}
.pinA__radar{flex:none}
.pinA__radar .btn{white-space:nowrap}
.pinA__radar{flex:none}
.pinA__radar .btn{box-shadow:var(--sh-sm)}
.pin-gallery__thumbs.gstrip{display:flex;gap:10px;padding:16px 16px 6px;margin:0;overflow-x:auto}   /* room for the thumbs' 3px shadow */
.pin-gallery__thumbs.gstrip::-webkit-scrollbar{display:none}
.pin-gallery__thumb.gthumb{flex:0 0 74px;width:74px;height:74px;aspect-ratio:auto}
.pinbody{padding:16px}
.pinA__desc{font-size:1.02rem;line-height:1.7;color:var(--ink-soft);font-weight:500;margin:0 0 14px}
.pinA__event{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.8rem;font-weight:700;
  color:var(--ink);background:var(--lime);border:var(--bd);border-radius:var(--r-pill);padding:7px 12px;box-shadow:var(--sh-sm);margin:0 0 14px}
.pinbody .acts{grid-template-columns:unset;grid-auto-flow:column;grid-auto-columns:1fr;margin-top:12px;margin-bottom:18px}   /* v37: buttons now sit above the description */
.pinA__addr{margin:12px 0 0;font-family:var(--font-mono);font-size:.8rem;font-weight:500}
.pinA__addr i{color:var(--pink)}
.pinA__offer{margin:0 0 14px}   /* v46: offer card right above Add to My Plans */
.pinbody > .btn:first-child{margin-top:8px}   /* pin with no description → the button isn't glued to the photo */
.pcard--rail{flex:0 0 158px;width:158px}
.pcard--rail .pcard__media{aspect-ratio:3/4}

/* ============================================================
   PROFILE PAGE (prof) — cover + overlapping avatar, socials,
   CTAs, linktree, map, pins grid (mockup-exact)
   ============================================================ */
.profpage{max-width:520px;margin:0 auto;background:var(--paper);position:relative}
@media(min-width:761px){.profpage{max-width:560px;border-left:var(--bd);border-right:var(--bd);min-height:100vh}}
.profpage .mbar--float{position:absolute;top:0;left:0;right:0;z-index:20;background:transparent;border:none;padding:14px 14px 0}
.prof__cover{position:relative;aspect-ratio:16/7;overflow:hidden;border-bottom:var(--bd)}
.prof__cover img{width:100%;height:100%;object-fit:cover}
.prof__cover--ph{width:100%;height:100%;background:
  linear-gradient(135deg,var(--lime),var(--gold) 60%,var(--pink))}
.prof__cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(22,19,16,.4),transparent 70%)}
.prof__id{padding:0 16px;position:relative}
.prof__avatar{width:94px;height:94px;border-radius:50%;border:var(--bd);margin-top:-47px;position:relative;z-index:2;
  object-fit:cover;box-shadow:var(--sh);background:var(--card-2);display:flex;align-items:center;justify-content:center;
  color:var(--ink);font-size:2rem}
.prof__user{font-family:var(--font-display);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;margin-top:12px;
  display:flex;align-items:center;gap:8px}
.prof__user .verified{color:var(--blue)}
.prof__name{color:var(--ink-soft);font-family:var(--font-mono);font-size:1.08rem;font-weight:600;margin-top:4px}
.prof__bio{font-size:.96rem;line-height:1.6;margin-top:13px;color:var(--ink-soft);font-weight:500}
.prof__socials{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}
.prof__soc{width:44px;height:44px;border-radius:11px;background:var(--card);border:var(--bd);box-shadow:var(--sh-sm);
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:1.1rem;transition:.1s;text-decoration:none}
.prof__soc:active{transform:translate(2px,2px);box-shadow:none}
/* Social icons in each platform's own colour; icon colour picked for contrast on it */
.prof__soc--instagram{background:linear-gradient(135deg,#d62976 0%,#c13584 40%,#833ab4 75%,#5851db 100%);color:#fff}
.prof__soc--tiktok,.prof__soc--x{background:#000;color:#fff}
.prof__soc--youtube{background:#e60000;color:#fff}
.prof__soc--facebook{background:#0866ff;color:#fff}
.prof__soc--linkedin{background:#0a66c2;color:#fff}
.prof__soc--whatsapp{background:#25d366;color:#0b2e17}
.prof__soc--website{background:var(--card);color:var(--ink)}
.prof__cta{display:flex;gap:9px;margin-top:16px}
.prof__cta .btn--blue,.prof__cta form{flex:1}
.prof__cta form .btn{width:100%}
.prof__mapwrap .map-wrap{height:230px}
.profpage .linktree .linkrow{text-decoration:none;color:var(--ink)}

/* ============================================================
   EDIT PROFILE — photo upload + username (mockup-exact)
   ============================================================ */
.settings-cover{position:relative;aspect-ratio:16/6;border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);
  overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end;justify-content:flex-end;padding:10px}
.settings-cover__btn{font-family:var(--font-mono);font-size:.66rem;font-weight:700;background:var(--card);color:var(--ink);border:var(--bd);
  border-radius:var(--r-pill);padding:7px 12px;box-shadow:var(--sh-sm);display:inline-flex;gap:7px;align-items:center;cursor:pointer}
.settings-cover__btn input{display:none}
.settings-cover__btn i{color:var(--ink)}
.settings-avatar{position:relative;width:88px;margin:-44px 0 6px 6px;display:block;cursor:pointer}
.settings-avatar img,.settings-avatar .settings-avatar__ph{width:88px;height:88px;border-radius:50%;border:var(--bd);
  box-shadow:var(--sh);object-fit:cover;display:flex;align-items:center;justify-content:center;background:var(--card-2);color:var(--ink);font-size:1.6rem}
.settings-avatar .cam{position:absolute;right:-2px;bottom:-2px;width:32px;height:32px;border-radius:50%;background:var(--blue);
  color:#fff;border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);display:flex;align-items:center;justify-content:center;font-size:.72rem}
.settings-avatar__btn{display:none}
/* username availability chip states */
.handle-status{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  margin-top:9px;padding:5px 10px;border-radius:var(--r-pill);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.handle-status:empty{display:none}
.handle-status.is-good{background:var(--lime);color:var(--ink)}
.handle-status.is-checking{background:var(--card);color:var(--muted)}
.handle-status.is-bad{background:var(--pink);color:#fff}

/* ============================================================
   MY PLANS (mymapia) — map + filter pills + saved mcards
   ============================================================ */
.mymapia{max-width:520px;margin:0 auto;background:var(--paper);position:relative;overflow-x:clip}
@media(min-width:761px){.mymapia{max-width:560px;border-left:var(--bd);border-right:var(--bd);min-height:100vh}}
.mymapia .mbar .datechip{cursor:default;box-shadow:none}

/* ---- My Plans v5: bold again, no shadows (owner feedback 2026-10-07) ----
   v4 went too quiet. Solid ink borders, yellow section pills, yellow set-date
   chips and calendar stamps are back — but no offset shadows and no
   press-down, so the page stays calm enough. */
.mymapia .pill,.mymapia .chip{box-shadow:none;border:2px solid var(--ink);background:var(--card);font-weight:600}
.mymapia .pill:active,.mymapia .chip:active{transform:none;box-shadow:none}
.mymapia .pill.is-active,.mymapia .pill.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mymapia .pill.is-active .pill__n{background:var(--paper);color:var(--ink)}
.mymapia .filterbar{padding:12px 16px 10px}

.mymapia .section-label{display:inline-flex;align-items:center;gap:6px;background:var(--page);border:2px solid var(--ink);box-shadow:none;color:var(--ink);
  border-radius:var(--r-pill);text-transform:none;font-family:var(--font-ui);font-weight:700;font-size:.76rem;letter-spacing:0;padding:3px 11px;margin:0 0 10px}
.mymapia .section-label i{color:var(--ink);font-size:.9em}

.mymapia .mm-next{border:2px solid var(--ink);box-shadow:none;border-radius:14px}
.mymapia .mm-next__media{border-right:2px solid var(--ink)}
.mymapia .mm-stamp,.mymapia .mm-stamp--big{border-width:2px;box-shadow:none}
.mymapia .mm-next__label{border-width:2px}
.mymapia .mm-next__acts .btn--ghost{box-shadow:none;border:2px solid var(--ink);background:var(--card)}
.mymapia .mm-next__acts .btn--ghost:active{transform:none;box-shadow:none}

.mymapia .mm-card{border:2px solid var(--ink);box-shadow:none;border-radius:14px;padding:14px}
.mymapia .mm-thumb{border:2px solid var(--ink)}
.mymapia .mm-thumb__been{border-top:2px solid var(--ink);background:var(--lime);color:var(--ink)}

.mymapia .mm-card .row__tags .tag{background:var(--card);border:1.5px solid var(--ink);box-shadow:none;color:var(--ink);font-weight:600;gap:4px}
.mymapia .mm-card .row__tags .tag i{color:var(--ink)}
.mymapia .mm-card .row__tags .tag--offer{background:var(--pink);color:var(--ink);border-radius:var(--r-pill);font-weight:700}
.mymapia .mm-card .row__addr{margin-top:5px}

.mymapia .mm-card__hd .iconbtn{box-shadow:none;border:none;background:none;color:var(--muted);width:44px;height:44px;border-radius:10px}
.mymapia .mm-card__hd .iconbtn:hover,.mymapia .mm-card__hd .iconbtn:focus-visible{color:var(--danger);background:rgba(255,59,48,.08)}
.mymapia .mm-card__hd .iconbtn:active{transform:none;box-shadow:none}
.mymapia .mapia-remove-form{flex:none;display:flex}

.mymapia .mm-card__foot{gap:8px 10px;margin-top:10px;padding-top:10px;border-top:1.5px dashed rgba(22,19,16,.3)}
.mymapia .vseg{border:2px solid var(--ink);box-shadow:none;background:var(--card)}
.mymapia .vseg button{background:transparent;font-weight:600;padding:6px 11px}
.mymapia .vseg button+button{border-left:2px solid var(--ink)}
.mymapia .vseg button.on,.mymapia .vseg button.is-on{background:var(--ink);color:var(--paper)}
.mymapia .mm-card__foot .datechip{border:2px solid var(--ink);box-shadow:none;background:var(--card);color:var(--ink);padding:5px 10px;border-radius:9px;font-weight:700}
.mymapia .mm-card__foot .datechip:active{transform:none;box-shadow:none}
.mymapia .mm-card__foot .datechip--set{background:var(--page);color:var(--ink)}
.mymapia .mm-card--past .mm-card__foot .datechip--set{background:var(--card-2);color:var(--muted)}

.mymapia .mm-empty__ic{box-shadow:none}
.mymapia .mm-ask{border-top:1.5px dashed rgba(22,19,16,.3)}
.mymapia .mm-ask .btn--ghost{box-shadow:none;border:2px solid var(--ink)}
.mymapia .mm-ask .btn--ghost:active{transform:none;box-shadow:none}

/* ---- My Plans v3: next-up hero, timeline groups, stamped cards ---- */
.mm-next{display:grid;grid-template-columns:132px 1fr;background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);overflow:hidden}
.mm-next__media{position:relative;min-height:150px;background:center/cover no-repeat;border-right:var(--bd);text-decoration:none}
.mm-next__label{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:.6rem;font-weight:700;
  text-transform:uppercase;background:var(--page);border:2px solid var(--ink);border-radius:var(--r-pill);padding:2px 8px;color:var(--ink)}
.mm-next__body{padding:12px 14px;display:flex;flex-direction:column;gap:5px;min-width:0}
.mm-next__when{font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:var(--pink);text-transform:uppercase}
.mm-next__t{font-family:var(--font-display);font-weight:800;font-size:1.15rem;line-height:1.1;color:var(--ink);text-decoration:none}
.mm-next__body .row__addr{margin-top:0}
.mm-next__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
/* tear-off calendar stamp (on thumbnails; bigger on the hero) */
.mm-stamp{position:absolute;right:-2px;bottom:-2px;display:flex;flex-direction:column;align-items:center;min-width:34px;
  background:var(--card);border:2px solid var(--ink);border-radius:8px 0 11px 0;padding:2px 5px 3px;line-height:1;color:var(--ink)}
.mm-stamp b{font-family:var(--font-display);font-weight:800;font-size:.95rem}
.mm-stamp small{font-family:var(--font-mono);font-size:.5rem;font-weight:700}
.mm-stamp--big{right:8px;bottom:8px;border-radius:10px;border-width:2.5px;box-shadow:var(--sh-sm);padding:5px 9px 6px;min-width:52px}
.mm-stamp--big b{font-size:1.6rem}
.mm-stamp--big small{font-size:.58rem}
/* timeline group header spacing */
.mm-group{margin-top:10px}
.mm-group:first-child{margin-top:4px}
/* card */
.mm-card{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm);padding:12px;margin-bottom:14px}
.mm-card__hd{display:flex;align-items:flex-start;gap:10px}
.mm-card__hd>.iconbtn{flex:none}
.mm-card__lk{display:flex;gap:12px;flex:1 1 auto;min-width:0;text-decoration:none;color:var(--ink)}
.mm-thumb{position:relative;flex:none;width:76px;height:76px;border:var(--bd);border-radius:12px;background:center/cover no-repeat;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--ink)}
.mm-thumb__been{position:absolute;left:0;right:0;bottom:0;background:var(--lime);border-top:2px solid var(--ink);font-family:var(--font-mono);
  font-size:.56rem;font-weight:700;text-transform:uppercase;text-align:center;padding:2px 0}
.mm-card__body{display:flex;flex-direction:column;min-width:0;flex:1}
.mm-card__t{font-family:var(--font-display);font-weight:800;font-size:1rem;line-height:1.15}
.mm-card .row__addr{display:block}
.mm-card__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px}
.mm-card__foot .datechip{position:relative;overflow:hidden;white-space:nowrap;flex:0 0 auto}
.mm-card__foot .datechip input[type=date]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none}
.datechip--set{background:var(--page)}
.mm-card--been{background:var(--card-2)}
.mm-card--been .mm-card__t{text-decoration:line-through;text-decoration-thickness:2px;opacity:.75}
.mm-card--past .datechip--set{background:var(--card-2);color:var(--muted)}
/* empty state */
.mm-empty{gap:10px}
.mm-empty__ic{width:56px;height:56px;border-radius:14px;background:var(--pink);color:#fff;border:var(--bd);box-shadow:var(--sh-sm);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;transform:rotate(-4deg)}
.filterbar{display:flex;gap:9px;overflow-x:auto;padding:14px 16px 7px}   /* room for the pills' 3px shadow */
.filterbar::-webkit-scrollbar{display:none}
.filterbar .pill{text-decoration:none}
/* generic mockup rows (used by mcards) */
.row__thumb{width:52px;height:52px;border-radius:10px;border:2.5px solid var(--ink);object-fit:cover;flex:none;
  display:flex;align-items:center;justify-content:center;background:var(--card-2);color:var(--ink);font-size:1.05rem}
.row__body{flex:1;min-width:0}
.row__title{font-family:var(--font-display);font-weight:800;font-size:.96rem;line-height:1.15;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row__sub{font-family:var(--font-mono);font-size:.7rem;font-weight:500;color:var(--muted);margin-top:5px;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;flex-wrap:nowrap}
.row__sub-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.mcard__top{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);min-width:0}
.mcard__foot{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.mcard--been{opacity:.72}
/* date chip wraps a transparent native date input */
.mcard__foot .datechip{position:relative;overflow:hidden;white-space:nowrap;flex:none}
.datechip__txt{white-space:nowrap}
.mcard__foot .datechip input[type=date]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none}
.mapia-date.is-hidden{display:none}

/* My Plans card foot: keep date + delete together (delete never alone) */
.mcard__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px}
.mcard__foot>.vseg{flex:0 0 auto}
.mcard__foot-r{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.mcard__foot-r .datechip{flex:0 1 auto;min-width:0}
.mcard__foot-r .iconbtn{margin-left:auto;flex:none}

/* My Plans card v2: tags row (category + offer), address line, delete top-right, left-aligned foot */
.mcard__hd{display:flex;align-items:flex-start;gap:12px}
.mcard__lk{display:flex;align-items:flex-start;gap:12px;flex:1 1 auto;min-width:0;text-decoration:none;color:var(--ink)}
.mcard__hd>.iconbtn{flex:none}
.mcard .row__thumb{align-self:flex-start}
.row__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.tag--offer{background:var(--pink);color:#fff}
.row__addr{font-family:var(--font-mono);font-size:.7rem;font-weight:500;color:var(--muted);margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.row__addr i{color:var(--pink);margin-right:5px}
.mcard__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px;justify-content:flex-start}
.mcard__foot .vseg,.mcard__foot .datechip{flex:0 0 auto}

/* ============================================================
   PLACE / business hub (mockup-exact)
   ============================================================ */
.placepage{max-width:520px;margin:0 auto;background:var(--paper);position:relative}
@media(min-width:761px){.placepage{max-width:560px;border-left:var(--bd);border-right:var(--bd);min-height:100vh}}
.placepage .mbar--float{position:absolute;top:0;left:0;right:0;z-index:20;background:transparent;border:none;padding:14px 14px 0}
.hub__cover{position:relative;aspect-ratio:16/9;overflow:hidden;border:none;border-radius:0;border-bottom:var(--bd)}
.hub__cover img{width:100%;height:100%;object-fit:cover}
.hub__cover--ph{width:100%;height:100%}
.hub__cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(22,19,16,.55),transparent 62%)}
.hub__vbadge{display:inline-flex;align-items:center;gap:6px;flex:none;
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:var(--ink);background:var(--lime);border:var(--bd);
  box-shadow:var(--sh-sm);padding:6px 11px;border-radius:var(--r-pill)}
.hub__head{border:none;border-radius:0;background:transparent;padding:0 16px 14px}
.hub__logo{width:80px;height:80px;border-radius:16px;border:var(--bd);margin-top:-40px;position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:1.7rem;
  color:#fff;box-shadow:var(--sh);overflow:hidden;background:var(--card-2)}
.hub__logo img{width:100%;height:100%;object-fit:cover}
.hub__name{font-family:var(--font-display);font-weight:800;font-size:1.65rem;letter-spacing:-.02em;margin-top:12px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.05}
.hub__name .verified{color:var(--blue)}
.hub__addr{color:var(--muted);font-family:var(--font-mono);font-size:.8rem;font-weight:500;margin-top:7px;display:flex;align-items:flex-start;gap:7px;line-height:1.5}
.hub__addr i{color:var(--pink);margin-top:2px}
.hub__creators{display:flex;align-items:center;gap:9px;margin-top:15px;font-family:var(--font-mono);font-size:.78rem;font-weight:500;color:var(--ink-soft);flex-wrap:wrap}
.hub__creators b{font-weight:700;color:var(--ink)}
.hub__creators .stack{align-self:center}
.hub__offer{margin-top:12px}
.hub__desc{font-size:.95rem;line-height:1.6;margin-top:13px;color:var(--ink-soft);font-weight:500}
.hub__acts{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.hub__ico{width:42px;height:42px;padding:0;border-radius:10px}
.hub__creators{align-items:center}
.hub__creators .stack{display:inline-flex;flex-direction:row;align-items:center;flex:none;gap:0}
.hub__creators .stack img,.hub__creators .stack .stack__ph{width:32px;height:32px;border:2.5px solid var(--ink);margin-left:-11px;margin-top:0;border-radius:50%;
  object-fit:cover;background:var(--card-2);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:.75rem;flex:none}
.hub__creators .stack img:first-child,.hub__creators .stack .stack__ph:first-child{margin-left:0}
.hub__creators .stack>*+*{margin-top:0}
.placepage .pgrid{padding:0}
.place-claim-note{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);margin-top:12px;background:var(--card);
  border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm);padding:10px 12px}
.place-claim-note a{color:var(--blue);font-weight:700}
.placepage .place-analytics{margin-bottom:20px}

/* ============================================================
   SEARCH page — mbar + pill search + section-labelled sr-rows
   ============================================================ */
.searchpage{max-width:520px;margin:0 auto;background:var(--paper);position:relative}
@media(min-width:761px){.searchpage{max-width:560px;border-left:var(--bd);border-right:var(--bd);min-height:100vh}}
.searchpage .exp__search{box-shadow:var(--sh);color:var(--ink);cursor:text}
.searchpage .exp__search input{border:none;background:none;outline:none;flex:1;min-width:0;
  font-family:var(--font-ui);font-size:.95rem;font-weight:500;color:var(--ink)}
.searchpage .exp__search input::placeholder{color:#b8ae97}
.searchpage .search-clear{border:none;background:none;color:var(--muted);cursor:pointer;padding:4px;font-size:.95rem;flex:none}
.sr-thumb{background-size:cover;background-position:center}
.sr-thumb.ic-lime,.sr-thumb--ic.ic-lime{background:var(--lime)}
.searchpage .recent-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.searchpage .recent-item__go{flex:1;display:flex;align-items:center;gap:9px;border:none;background:none;
  font-family:var(--font-ui);font-weight:600;color:var(--ink);cursor:pointer;text-align:left;min-width:0}
.searchpage .recent-item__go i{color:var(--muted)}
.searchpage .recent-item__x{border:none;background:none;color:var(--muted);cursor:pointer;padding:6px;flex:none}
.searchpage .chips{margin-top:11px}

/* ============================================================
   ANALYTICS — range pills, colored stat icons, bar chart, top pins
   ============================================================ */
.anapage{max-width:520px;margin:0 auto;background:var(--paper);position:relative}
@media(min-width:761px){.anapage{max-width:560px;border-left:var(--bd);border-right:var(--bd);min-height:100vh}}
.range .pill{text-decoration:none}
.range .pill.is-active{background:var(--blue);color:#fff}
/* colored icon tiles (stat cards, etc.) */
.ic-lime{background:var(--lime);color:var(--ink)}
.ic-blue{background:var(--blue);color:#fff}
.ic-pink{background:var(--pink);color:#fff}
.ic-violet{background:var(--violet);color:#fff}
.ic-gold{background:var(--gold);color:var(--ink)}
.ic-teal{background:var(--teal);color:#fff}
.ic-orange{background:var(--orange);color:#fff}
.stat__icon{width:42px;height:42px;font-size:1.05rem}
.stat__val{font-size:1.75rem}
/* bar chart columns */
.bars{align-items:flex-end}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%;min-width:0}
.bars .col .bar{width:100%;min-height:3px}
.bars .col--now .bar{background:var(--pink)}
/* top-pins rows */
.anapage .rank-row{display:flex;align-items:center;gap:12px}
.anapage .rank-row .rank{flex:none}
.anapage .rank-row .row__thumb{flex:none}
.anapage .metric{margin-left:auto;flex:none;white-space:nowrap;font-family:var(--font-mono);font-weight:700;font-size:.82rem}
.anapage .metric i{color:var(--muted);margin-right:4px}

/* ============================================================
   MY PINS — mcards with status + edit/toggle/delete acts
   ============================================================ */
.mypinspage{max-width:520px;margin:0 auto;background:var(--paper);position:relative}
@media(min-width:761px){.mypinspage{max-width:560px;border-left:var(--bd);border-right:var(--bd);min-height:100vh}}
.mypinspage .mcard__top{display:flex;align-items:center;gap:12px}
.mypinspage .mcard__top .row__thumb{flex:none}
.mypinspage .mcard__acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.mypinspage .mcard__acts .btn{flex:0 1 auto}
.mypinspage .row__sub i{color:var(--muted)}
.mypin-toggle.is-active{background:var(--lime);color:var(--ink)}
.mypin-toggle.is-active i{color:var(--ink)}
.mypin-toggle.is-inactive{background:var(--card-2);color:var(--muted)}
.mypin-del{color:var(--danger)}
.mypin-del:active{transform:translate(2px,2px);box-shadow:none}

/* ============================================================
   MY BUSINESS — owned places as mcards with inline tags/offers
   ============================================================ */
.bizpage{max-width:520px;margin:0 auto;background:var(--paper);position:relative}
@media(min-width:761px){.bizpage{max-width:560px;border-left:var(--bd);border-right:var(--bd);min-height:100vh}}
.bizpage .mcard__top{display:flex;align-items:center;gap:12px}
.bizpage .mcard__top .row__thumb{flex:none}
.bizpage .mcard__acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.bizpage .mcard__acts .btn{flex:0 1 auto}
.biz-stats{display:flex;gap:12px;margin-top:6px;font-family:var(--font-mono);font-size:.68rem;font-weight:700;color:var(--muted)}
.biz-stats i{margin-right:4px}
.pa-pro{font-family:var(--font-mono);font-size:.58rem;font-weight:700;background:var(--gold);border:2px solid var(--ink);
  border-radius:var(--r-pill);padding:2px 7px;color:var(--ink)}
/* inline manage sections */
.bizmanage{border-top:2px solid var(--ink);margin-top:14px;padding-top:12px}
.bizmanage>summary{list-style:none;cursor:pointer;font-family:var(--font-mono);font-weight:700;font-size:.78rem;
  color:var(--ink);display:flex;align-items:center;gap:8px}
.bizmanage>summary::-webkit-details-marker{display:none}
.bizmanage>summary::after{content:"\e136";font-family:"Phosphor-Bold";font-weight:normal;font-size:.62rem;margin-left:auto;color:var(--muted)}
.bizmanage[open]>summary::after{content:"\f077"}
.bizmanage[open]>summary{margin-bottom:12px}
.myrest-offer{border:var(--bd);border-radius:var(--r-card);background:var(--card-2);box-shadow:var(--sh-sm);padding:12px;margin-bottom:12px}
.myrest-addoffer{border:2.5px dashed var(--ink);border-radius:var(--r-card);padding:10px 12px;margin-top:6px}
.myrest-addoffer>summary{list-style:none;cursor:pointer;font-family:var(--font-mono);font-weight:700;font-size:.74rem;color:var(--blue);display:flex;align-items:center;gap:7px}
.myrest-addoffer>summary::-webkit-details-marker{display:none}
.myrest-addoffer[open]>summary{margin-bottom:10px}

/* ============================================================
   MY RADAR — map + followed-creator rows with On-radar toggle
   ============================================================ */
.radarpage{max-width:520px;margin:0 auto;background:var(--paper);position:relative}
@media(min-width:761px){.radarpage{max-width:560px;border-left:var(--bd);border-right:var(--bd);min-height:100vh}}
/* intro + stats strip */
.radar-intro{padding-bottom:18px}
.radar-intro__lead{font-size:.9rem;color:var(--ink-soft);margin:0 0 12px}
.radar-stats{display:flex;flex-wrap:wrap;gap:8px}
.radar-stat{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  background:var(--card);border:var(--bd);border-radius:var(--r-pill);padding:6px 12px;box-shadow:var(--sh-sm)}
.radar-stat b{font-family:var(--font-display);font-size:.95rem;font-weight:800}
.radar-stat--pink{background:var(--pink);color:#fff}
.radar-stat--lime{background:var(--lime)}
/* people rail — one card per followed creator (+ "Find more") */
.radar-people{gap:12px}
.rperson{flex:0 0 136px;width:136px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px 12px;background:var(--card);
  border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);text-decoration:none;color:var(--ink);text-align:center}
.rperson form{margin:0}
.rperson__link{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--ink);min-width:0;width:100%}
.rperson__av{width:64px;height:64px;border-radius:50%;object-fit:cover;border:var(--bd);box-shadow:var(--sh-sm);margin-bottom:4px;
  display:flex;align-items:center;justify-content:center;background:var(--card-2);font-size:1.4rem}
.rperson__av--add{background:var(--lime);border-style:dashed}
.rperson__handle{font-family:var(--font-display);font-weight:800;font-size:.86rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rperson__handle .ph-seal-check{color:var(--blue);font-size:.8em}
.rperson__meta{font-family:var(--font-mono);font-size:.64rem;font-weight:700;color:var(--muted)}
.rperson__btn{padding:6px 10px;font-size:.62rem}
.rperson--more{justify-content:center;background:var(--card-2)}
/* filter chip counts + card creator line */
.radar-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:2px;
  background:var(--ink);color:var(--paper);border-radius:var(--r-pill);font-size:.6rem}
.pill.is-active .radar-count{background:var(--paper);color:var(--ink)}
.pcard__meta .newchip{display:inline-block;margin-bottom:6px;color:var(--ink)}
.pcard__who{display:flex;align-items:center;gap:6px;margin-top:6px;font-family:var(--font-mono);font-size:.66rem;font-weight:700;color:#fff}
.pcard__who img,.pcard__who span{width:18px;height:18px;border-radius:50%;object-fit:cover;border:2px solid #fff;flex:none;
  display:inline-flex;align-items:center;justify-content:center;background:var(--card-2);color:var(--ink);font-size:.5rem}

/* ============================================================
   FORM PAGE — shared shell for edit forms (place-edit, etc.)
   ============================================================ */
.formpage{max-width:520px;margin:0 auto;background:var(--paper);position:relative}
@media(min-width:761px){.formpage{max-width:560px;border-left:var(--bd);border-right:var(--bd);min-height:100vh}}
.formpage .fcard{margin-bottom:14px}
.formpage input[type=file]{font-family:var(--font-mono);font-size:.78rem}

/* ============================================================
   EDIT PLACE — photo header (square logo) + category pills
   ============================================================ */
.formpage .settings-avatar--sq img,.formpage .settings-avatar--sq .pe-logo-ph{border-radius:16px}
.pe-logo-ph{width:88px;height:88px;border:var(--bd);box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.7rem;object-fit:cover}
.catpills{display:flex;flex-wrap:wrap;gap:8px}
.catpills .pill{text-decoration:none}
.catpills .pill.is-active{background:var(--blue);color:#fff}
.catpills .pill.is-active i{color:#fff}

/* neutralize old app.css negative margin so the cover stays inside its container */
.settings-cover{margin:0}

/* ============================================================
   PICK FOR ME (pickhero) — hero suggestion + alternatives grid
   ============================================================ */
.pickpage{max-width:520px;margin:0 auto;background:var(--paper);position:relative}
@media(min-width:761px){.pickpage{max-width:560px;border-left:var(--bd);border-right:var(--bd);min-height:100vh}}
.pick__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pick__head-txt{min-width:0}
.pick__head #pickAgain{flex:none;margin-top:4px}
.pick__head h1{font-family:var(--font-display);font-weight:800;font-size:1.85rem;letter-spacing:-.02em}
.pick__head p{margin:8px 0 0;font-family:var(--font-mono);font-size:.82rem;font-weight:500;color:var(--ink-soft)}
.pick__cats{display:flex;gap:9px;overflow-x:auto;margin:18px -16px 0;padding:2px 16px 6px}
.pick__cats::-webkit-scrollbar{display:none}
.pick__cats .pill{text-decoration:none;flex:none}
.pickpage .pgrid{padding:12px 16px 0}
.pick-loading{margin-top:18px}
.pickhero__spinner{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);
  padding:28px 20px;text-align:center;font-family:var(--font-mono);font-weight:700;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:10px}
.pickhero{margin-top:18px;background:var(--card);border:var(--bd);border-radius:var(--r-card);overflow:hidden;position:relative;box-shadow:var(--sh-lg);cursor:pointer}
.pickhero__badge{position:absolute;top:13px;left:13px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:#fff;background:var(--blue);border:var(--bd);padding:6px 12px;border-radius:var(--r-pill);box-shadow:var(--sh-sm)}
.pickhero__media{position:relative;aspect-ratio:16/11;border-bottom:var(--bd)}
.pickhero__media img{width:100%;height:100%;object-fit:cover}
.pickhero__media .pcard__ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:2.4rem}
.pickhero__catdot{position:absolute;top:13px;right:13px;z-index:3;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;border:var(--bd);box-shadow:var(--sh-sm);font-size:.9rem}
.pickhero__media .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3}
.pickhero__deal{position:absolute;left:13px;bottom:13px;z-index:3;display:inline-flex;gap:6px;align-items:center;font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:#fff;background:var(--pink);border:2px solid var(--ink);padding:4px 10px;border-radius:var(--r-pill)}
.pickhero__dist{position:absolute;right:13px;bottom:13px;z-index:3;font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:var(--ink);background:#fff;border:2px solid var(--ink);padding:4px 10px;border-radius:var(--r-pill)}
.pickhero__body{padding:16px 16px 2px}
.pickhero__title{font-family:var(--font-display);font-weight:800;font-size:1.5rem;line-height:1.08}
.pickhero__sub{color:var(--muted);font-family:var(--font-mono);font-size:.78rem;font-weight:500;margin-top:8px;display:flex;align-items:center;gap:6px}
.pickhero__sub i{color:var(--pink)}
.pickhero__who{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.88rem;font-weight:700}
.pickhero__who img,.pickhero__av{width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);object-fit:cover;flex:none;
  display:flex;align-items:center;justify-content:center;background:var(--card-2);color:var(--ink);font-size:.7rem}
.pickhero__who .verified{color:var(--blue)}
.pickhero__acts{display:flex;gap:9px;padding:16px}
.pickhero__acts .btn--blue{flex:1}
.pickhero__place{display:flex;align-items:center;gap:8px;padding:14px 16px;border-top:var(--bd);color:var(--ink);
  font-family:var(--font-mono);font-size:.8rem;font-weight:700;background:var(--lime);text-decoration:none}

/* ============================================================
   PROFILE (owner) pin manager — tidy card, compact reorder
   ============================================================ */
.mypin{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:12px;align-items:center;
  padding:12px 13px;border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm);background:var(--card)}
.mypin__reorder{display:flex;flex-direction:column;gap:5px}
.mypin__arrow{width:28px;height:24px;padding:0;border:2px solid var(--ink);border-radius:7px;background:var(--card);
  box-shadow:1px 1px 0 var(--ink);display:flex;align-items:center;justify-content:center;font-size:.62rem;color:var(--ink);cursor:pointer}
.mypin__arrow:active{transform:translate(1px,1px);box-shadow:none}
.mypin__arrow:disabled{opacity:.35;cursor:default;box-shadow:none}
.mypin__main{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:var(--ink)}
.mypin__main .mypin__thumb{width:50px;height:50px;flex:none;object-fit:cover;border:var(--bd);border-radius:10px;
  display:flex;align-items:center;justify-content:center;background:var(--card-2);color:var(--ink);font-size:1.05rem}
.mypin__body{min-width:0}
.mypin__title{font-family:var(--font-display);font-weight:800;font-size:.98rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mypin__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.mypin__cat{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:.68rem;font-weight:700;color:var(--muted)}
.mypin__views{font-family:var(--font-mono);font-size:.68rem;font-weight:700;color:var(--muted)}
.mypin__acts{grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center;margin:0}
.mypin__acts .mypin__form{margin:0}
.mypin__acts .btn{flex:0 1 auto}

/* Profile owner pins as explore-style photo cards with reorder only */
.pcard--manage{position:relative}
.pcard--manage .pcard__lk{position:absolute;inset:0;z-index:2}
.pcard--manage .pcard__cat,.pcard--manage .pcard__meta,.pcard--manage .pcard__play{z-index:3}
.pcard--manage .pcard__reorder{position:absolute;top:8px;right:8px;z-index:5;display:flex;flex-direction:column;gap:3px;
  background:var(--card);border:2px solid var(--ink);border-radius:8px;box-shadow:2px 2px 0 var(--ink);padding:2px}
.pcard__ro{width:26px;height:20px;border:none;background:none;color:var(--ink);cursor:pointer;font-size:.55rem;
  display:flex;align-items:center;justify-content:center;padding:0}
.pcard__ro:disabled{opacity:.3;cursor:default}
.pcard--off .pcard__media{opacity:.6}

/* place manager: Hide/Activate toggle inside the pcard control panel */
.pcard__ro--mod{border-top:1.5px solid var(--ink);margin-top:1px;padding-top:2px;height:22px}
.pcard--off .pcard__ro--mod i{color:var(--lime-deep)}
.pcard--manage .pcard__ro--mod i{color:var(--danger)}
.pcard--off.pcard--manage .pcard__ro--mod i{color:var(--teal)}

/* analytics Top Pins: per-pin metric breakdown */
.anapage .rank-row{align-items:flex-start}
.pin-metrics{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:8px;font-family:var(--font-mono);font-size:.66rem;font-weight:700;color:var(--ink-soft)}
.pin-metrics span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}

/* ============================================================
   NOTIFICATIONS — New / Earlier rows with colored tiles
   ============================================================ */
.notifpage{max-width:520px;margin:0 auto;background:var(--paper);position:relative}
@media(min-width:761px){.notifpage{max-width:560px;border-left:var(--bd);border-right:var(--bd);min-height:100vh}}
.notifpage .mbar form{margin:0}
.noti-row{display:flex;align-items:center;gap:12px;padding:12px;background:var(--card);border:var(--bd);
  border-radius:var(--r-card);box-shadow:var(--sh-sm);margin-bottom:10px;text-decoration:none;color:var(--ink);transition:.1s}
.noti-row--unread{box-shadow:var(--sh)}
.noti-row:active{transform:translate(2px,2px);box-shadow:none}
.noti-row .row__thumb{flex:none;border-radius:11px}
.noti-row .row__title{white-space:normal}
.noti-row__right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.row__time{font-family:var(--font-mono);font-size:.66rem;font-weight:700;color:var(--muted)}
.ic-ink{background:var(--ink);color:#fff}

/* Profile owner cards: management footer (Edit / Active / Delete) */
.pcard__view{display:block;text-decoration:none;color:inherit}
.pcard__mgmt{display:flex;align-items:center;gap:8px;padding:9px;border-top:var(--bd);flex-wrap:wrap}
.pcard__mgmt .btn{flex:0 0 auto;padding:8px 10px}
.pcard__mgmt .btn--blue{flex:1 1 auto}
.pcard__mgmt .mypin-toggle.is-active{background:var(--lime);color:var(--ink)}
.pcard__mgmt .mypin-toggle.is-inactive{background:var(--card-2);color:var(--muted)}
.pcard__mgmt .mypin-del{color:var(--danger)}

/* ============================================================
   ADD PIN — step 1 place finder (one search: Social Mapia → Google → manual)
   ============================================================ */
.sm-place-results{background:var(--paper);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);
  padding:8px 8px 0;max-height:min(60vh,440px);overflow-y:auto}
.sm-place-results__head{font-family:var(--font-mono);font-weight:700;font-size:.66rem;color:var(--muted);
  padding:4px 4px 8px;display:flex;align-items:center;gap:6px}
.sm-place-results__head .ph-google-logo{color:#4285F4}
.sm-place-results .sm-place-row{width:100%;text-align:left;font:inherit;cursor:pointer;margin-bottom:8px}
.sm-place-results .sm-place-row:active{transform:translate(2px,2px);box-shadow:none}
.sm-place-results .sm-place-row__thumb{width:40px;height:40px;background-size:cover;background-position:center}
.sm-place-row__name{font-family:var(--font-display);font-weight:800}
.sm-place-row__go{color:var(--ink)}
.sm-place-row--manual{background:var(--lime)!important}
.sm-place-row--manual .sm-place-row__sub{color:var(--ink);opacity:.7}
.place-manual-link{display:inline-flex;align-items:center;gap:7px;padding:10px 2px 0;font-size:.76rem}
.place-chosen{display:flex;align-items:center;gap:12px;padding:12px;background:var(--lime);border:var(--bd);
  border-radius:var(--r-card);box-shadow:var(--sh-sm)}
.place-chosen[hidden],.place-manual[hidden],.place-manual-link[hidden],.place-search-wrap[hidden]{display:none}
.place-chosen__icon{width:40px;height:40px;flex:none;border-radius:10px;border:2.5px solid var(--ink);background:var(--card);
  display:flex;align-items:center;justify-content:center;color:var(--pink);font-size:1.05rem}
.field-hint.is-bad{color:var(--danger);font-weight:700}
.field-count{text-align:right;margin-top:4px}
.req-tag{font-family:var(--font-mono);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  background:var(--pink);color:#fff;border:2px solid var(--ink);border-radius:var(--r-pill);padding:1px 7px;margin-left:4px}
.place-chosen__meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.place-chosen__name{font-family:var(--font-display);font-weight:800;font-size:1rem;line-height:1.15}
.place-chosen__sub{font-family:var(--font-mono);font-size:.68rem;font-weight:500;color:var(--ink);opacity:.75;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- v4: featured businesses ---------- */
.pcard__feat{position:absolute;top:36px;left:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;color:var(--ink);background:var(--gold);
  border:2px solid var(--ink);padding:3px 8px;border-radius:var(--r-pill)}
.pcard--featured{box-shadow:4px 4px 0 var(--gold),6px 6px 0 var(--ink)}
/* v18b bugfix: map.js's renderList() (and pin_card_html callers) add the "pin-card"
   component's own class, pin-card--featured — not this older pcard--featured name — so
   featured cards got the gold star chip (.pcard__feat) but never the gold drop-shadow
   frame. Same shadow as .pcard--featured above. */
.pin-card.pin-card--featured{border:3px solid var(--gold)}/* v58: no card shadows — featured = gold frame */
.sm-pin--featured .sm-pin__photo{border-color:var(--gold);border-width:3.5px}
.sm-pin--featured .sm-pin__name{background:var(--gold);color:var(--ink)}
.sm-pop__feat{background:var(--gold);color:var(--ink)}

/* ---------- v4: creators list (creators.php) — same photo card as Explore ---------- */
.ccard{display:flex;flex-direction:column;gap:8px;min-width:0}
.ccard[hidden]{display:none}
.ccard__card{display:block}
.ccard__av{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #fff;background:var(--card-2);
  display:flex;align-items:center;justify-content:center;color:var(--muted);margin-bottom:6px}
.ccard .pcard__t .verified{color:#8fb0ff}
.ccard__act form{margin:0}
.ccard__act .btn{width:100%}
.creator-grid{padding:0}
.creator-grid > .empty{grid-column:1/-1}

/* Explore: creators rail + "from your Radar" rail */
.exp-rail{padding:6px 16px 10px}
.exp-rail__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 8px}
.exp-rail__head h4{margin:0;font-family:var(--font-display);font-weight:800;font-size:1rem}
.exp-rail__head a{font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:var(--blue)}
.exp-rail{overflow:hidden}
.exp-rail .railrow{margin:0 -16px;padding:4px 16px 8px}
.cmini{flex:0 0 84px;display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:var(--ink);text-align:center}
.cmini__av{width:60px;height:60px;border-radius:50%;object-fit:cover;border:var(--bd);box-shadow:var(--sh-sm);background:var(--card-2);
  display:flex;align-items:center;justify-content:center;color:var(--muted)}
.cmini__h{font-family:var(--font-mono);font-size:.64rem;font-weight:700;max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmini--all .cmini__av{background:var(--lime);color:var(--ink)}
.cmini-box{flex:0 0 84px;position:relative}
.cmini-box form{margin:0}
.cmini__fol{position:absolute;top:40px;left:52px;width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;border:2px solid var(--ink);font-size:.8rem}
.cmini__fol:active{transform:scale(.9)}
.frail{flex:0 0 150px;width:150px}
.frail .pcard__media{aspect-ratio:4/5}
.frail__new{position:absolute;top:8px;right:8px;z-index:3;font-family:var(--font-mono);font-size:.58rem;font-weight:700;
  background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-pill);padding:2px 7px}
.pill--follow.is-active{background:var(--pink);color:#fff}
.exp-tip{font-family:var(--font-mono);font-size:.72rem;font-weight:500;color:var(--ink-soft);background:var(--card-2);
  border:2px dashed var(--ink);border-radius:10px;padding:9px 12px;margin:8px 16px 12px}

/* ---------- v4: pin page → business page ---------- */
.atplace{display:flex;align-items:center;gap:12px;margin:14px 0 4px;padding:12px 14px;background:var(--card);
  border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);color:var(--ink);text-decoration:none}
.atplace:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.atplace__img{width:52px;height:52px;flex:0 0 52px;border-radius:12px;object-fit:cover;border:2px solid var(--ink);
  background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.atplace__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.atplace__k{font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.atplace__n{font-family:var(--font-display);font-weight:800;font-size:1.05rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atplace__m{font-family:var(--font-mono);font-size:.68rem;font-weight:500;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.atplace__off{background:var(--pink);color:#fff;border:2px solid var(--ink);border-radius:var(--r-pill);padding:0 7px;font-weight:700}
.atplace__go{color:var(--ink)}
/* save (bookmark) on reel cards — business page */
.pcard__save{position:absolute;top:38px;right:8px;z-index:4;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:9px;box-shadow:2px 2px 0 var(--ink);cursor:pointer;font-size:.85rem}
.pcard__save.is-on{background:var(--blue);color:#fff}

/* ---------- v4: profile shortcuts + private labels ---------- */
.prof__quick{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0 0}
.prof__private{font-family:var(--font-mono);font-size:.72rem;font-weight:500;color:var(--ink-soft);background:var(--card-2);
  border:2px dashed var(--ink);border-radius:10px;padding:9px 12px;margin:14px 0 0;text-align:left}
.pcard__private{position:absolute;top:36px;left:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:.58rem;font-weight:700;color:var(--paper);background:var(--ink);
  border:2px solid var(--ink);padding:2px 7px;border-radius:var(--r-pill)}
.pinA__private{font-family:var(--font-mono);font-size:.72rem;font-weight:500;color:var(--ink-soft);background:var(--card-2);
  border:2px dashed var(--ink);border-radius:10px;padding:9px 12px;margin:12px 0 0}
.pcard--manage .pcard__save{right:auto;left:8px;top:38px}
.ccard .pcard__media img.ccard__av{width:36px;height:36px;object-fit:cover;border-radius:50%}
.creator-grid > .empty[hidden]{display:none}

/* ---------- v5: admin Quality Control Center ---------- */
.qc__summary{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0 0 14px}
.qc__tile{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--card);border:var(--bd);border-radius:var(--r-card);
  box-shadow:var(--sh-sm);color:var(--ink);text-decoration:none}
.qc__tile span{font-family:var(--font-mono);font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.qc__tile b{font-family:var(--font-display);font-size:1.5rem;font-weight:800;line-height:1}
.qc__tile--great{border-left:8px solid var(--teal)}.qc__tile--good{border-left:8px solid var(--lime-deep)}
.qc__tile--fair{border-left:8px solid var(--gold)}.qc__tile--poor{border-left:8px solid var(--danger)}
.qc__tile.is-on{background:var(--card-2);box-shadow:none;transform:translate(2px,2px)}
.qc__filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.qc__list{display:flex;flex-direction:column;gap:12px}
.qc__item{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:12px;background:var(--card);
  border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm)}
.qc__thumbs{display:grid;grid-template-columns:repeat(2,56px);gap:4px}
.qc__thumbs img{width:56px;height:56px;object-fit:cover;border:2px solid var(--ink);border-radius:8px;display:block}
.qc__nophoto{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:5px;width:116px;height:56px;border:2px dashed var(--ink);
  border-radius:8px;font-family:var(--font-mono);font-size:.62rem;color:var(--muted);background:var(--card-2)}
.qc__thumbs--profile{position:relative;display:block;width:116px;height:92px}
.qc__thumbs--profile .qc__cover{width:116px;height:64px;object-fit:cover;border:2px solid var(--ink);border-radius:8px;display:flex}
.qc__av{position:absolute;left:8px;bottom:0;width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--ink);
  background:var(--card-2);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.qc__av--sq{border-radius:10px}
.qc__main{min-width:0}
.qc__title{font-family:var(--font-display);font-weight:800;font-size:1.02rem;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.qc__title a{color:var(--ink)}
.qc__meta{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-soft);margin:3px 0 8px}
.qc__bio{font-size:.82rem;color:var(--ink-soft);margin:0 0 8px}
.qc__checks{display:flex;flex-wrap:wrap;gap:5px}
.qc__chk{font-family:var(--font-mono);font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);border:1.5px solid var(--ink);
  display:inline-flex;align-items:center;gap:4px}
.qc__chk--ok{background:#dcf7d1}.qc__chk--part{background:#fff1c7}.qc__chk--no{background:#ffe0dc}
.qc__pick{font-family:var(--font-mono);font-size:.6rem;font-weight:700;background:var(--lime);border:1.5px solid var(--ink);
  border-radius:var(--r-pill);padding:1px 8px}
.qc__side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.qc__score{display:flex;flex-direction:column;align-items:center;min-width:72px;padding:6px 8px;border:var(--bd);border-radius:12px;background:var(--card)}
.qc__score b{font-family:var(--font-display);font-size:1.6rem;font-weight:800;line-height:1}
.qc__score small{font-family:var(--font-mono);font-size:.58rem;font-weight:700;text-transform:uppercase}
.qc__score--great{background:#c9f0dc}.qc__score--good{background:#e6f7b8}.qc__score--fair{background:#ffe7a8}.qc__score--poor{background:#ffd0ca}
.qc__acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.qc__f{margin:0}
@media (max-width:720px){
  .qc__summary{grid-template-columns:repeat(3,1fr)}
  .qc__item{grid-template-columns:1fr}
  .qc__side{flex-direction:row;align-items:center;justify-content:space-between}
}
.best-grid{padding:0;margin-bottom:6px}

/* ---------- v5: admin analytics (admin/insights*.php) ---------- */
.ins-nav{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.ins-range{display:flex;gap:6px;flex-wrap:wrap}
.ins-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px}
.ins-tile{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm)}
.ins-tile__l{font-family:var(--font-mono);font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.ins-tile__v{font-family:var(--font-display);font-size:1.8rem;font-weight:800;line-height:1.05;color:var(--ink)}
.ins-tile__s{font-family:var(--font-mono);font-size:.64rem;color:var(--ink-soft)}
.ins-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ins-card{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm);padding:14px 16px;margin:0 0 14px;min-width:0}
.ins-card__h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.ins-card__h h3{margin:0;font-size:1rem}
.ins-card__h span{font-family:var(--font-mono);font-size:.66rem;color:var(--muted)}
.ins-empty{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);padding:14px 0}
.ins-note{font-family:var(--font-mono);font-size:.7rem;margin:4px 0 0}
/* daily columns — one series, blue; recessive baseline; tooltip on hover/focus */
.ins-cols{display:flex;align-items:flex-end;gap:2px;height:140px;border-bottom:1.5px solid rgba(22,19,16,.25);padding-top:18px}
.ins-col{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;cursor:default;outline:none}
.ins-col i{display:block;width:100%;background:var(--blue);border-radius:4px 4px 0 0;min-height:0}
.ins-col:hover i,.ins-col:focus i{background:#1a3bd6}
.ins-cols__x{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.6rem;color:var(--muted);margin-top:4px}
[data-tip]{position:relative}
.ins-col:hover::after,.ins-col:focus::after,.ins-bar:hover::after,.ins-bar:focus::after{content:attr(data-tip);position:absolute;z-index:5;
  bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:.64rem;font-weight:700;padding:4px 8px;border-radius:6px;pointer-events:none}
.ins-col:first-child:hover::after,.ins-col:nth-child(2):hover::after{left:0;transform:none}
.ins-col:last-child:hover::after,.ins-col:nth-last-child(2):hover::after{left:auto;right:0;transform:none}
/* ranked bars */
.ins-bars{display:flex;flex-direction:column;gap:9px}
.ins-bar{outline:none}
.ins-bar::after{bottom:auto!important;top:-4px!important}
.ins-bar__top{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;margin-bottom:3px}
.ins-bar__l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-bar__l a{color:var(--ink)}
.ins-bar__l small{font-family:var(--font-mono);font-size:.64rem;color:var(--muted)}
.ins-bar__top b{font-family:var(--font-mono);font-size:.8rem}
.ins-bar__track{height:8px;background:rgba(22,19,16,.07);border-radius:4px;overflow:hidden}
.ins-bar__track i{display:block;height:100%;background:var(--blue);border-radius:4px}
.ins-bar:hover .ins-bar__track i{background:#1a3bd6}
.ins-table td,.ins-table th{font-size:.82rem;white-space:nowrap}
.ins-cohort .ins-cell{text-align:center;font-family:var(--font-mono);font-weight:700;background:rgba(43,82,255,var(--a,0));color:var(--ink)}
.ins-cohort .ins-cell--na{color:var(--muted);background:none}
@media (max-width:820px){ .ins-tiles{grid-template-columns:repeat(2,1fr)} .ins-grid{grid-template-columns:1fr} }

/* ---------- v5: help / tips guides (help.php) ---------- */
.help-lead{font-family:var(--font-mono);font-size:.8rem;line-height:1.6;margin:0 0 18px}
.help-back{font-family:var(--font-mono);font-size:.74rem;font-weight:700;color:var(--blue)}
.help-h-ic,.help-card__ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:var(--bd);border-radius:12px;
  font-size:1.05rem;color:var(--ink);vertical-align:middle;box-shadow:var(--sh-sm)}
.help-cards{display:flex;flex-direction:column;gap:12px}
.help-card{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:14px 16px;
  background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);color:var(--ink);text-decoration:none}
.help-card__ic{grid-row:1/3}
.help-card__t{font-family:var(--font-display);font-weight:800;font-size:1.08rem}
.help-card__s{font-family:var(--font-mono);font-size:.68rem;color:var(--muted);grid-column:2}
.help-card__go{grid-column:3;grid-row:1/3}
.help-card:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.help-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;counter-reset:none}
.help-step{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm);padding:12px 14px}
.help-step__h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:1rem}
.help-step__h b{font-family:var(--font-display);font-weight:800;flex:1;min-width:160px}
.help-step__n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:.7rem;font-weight:700}
.help-step__pts{font-family:var(--font-mono);font-size:.64rem;font-weight:700;background:var(--lime);border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:1px 8px}
.help-step ul{margin:8px 0 0 0;padding-left:20px;font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.help-step ul li{margin:3px 0}
.help-step code,.help-lead code{font-family:var(--font-mono);font-size:.78em;background:var(--card-2);padding:0 4px;border-radius:4px}
.help-dont{margin:16px 0 0;padding:12px 14px;border:2px dashed var(--danger);border-radius:var(--r-card);background:#fff4f2}
.help-dont b{font-family:var(--font-display);color:var(--danger)}
.help-dont ul{margin:6px 0 0;padding-left:20px;font-size:.88rem;color:var(--ink-soft)}
.help-mine{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);padding:14px;margin:0 0 18px}
.help-mine__head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.help-mine__head b{font-family:var(--font-display);font-weight:800;font-size:1.1rem;display:block}
.help-mine__k{font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.help-mine__list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.9rem}
.help-mine__list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.help-mine__list li small{font-family:var(--font-mono);font-size:.64rem;color:var(--muted)}
.help-mine__list .is-ok i{color:var(--teal)}.help-mine__list .is-part i{color:var(--gold)}.help-mine__list .is-no i{color:var(--danger)}
.help-mine__fix{flex-basis:100%;margin-left:22px;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft)}
.help-list{display:flex;flex-direction:column;gap:8px}
.help-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--card);border:2px solid var(--ink);border-radius:12px;color:var(--ink);text-decoration:none}
.help-row .qc__score{min-width:52px;padding:4px}
.help-row .qc__score b{font-size:1.2rem}
.help-row__t{flex:1;min-width:0;display:flex;flex-direction:column}
.help-row__t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.help-row__t small{font-family:var(--font-mono);font-size:.66rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.help-support{margin:20px 0 0;font-family:var(--font-mono);font-size:.76rem;padding:10px 12px;background:var(--card-2);border-radius:10px}
.help-support a{color:var(--blue);font-weight:700}

/* ---------- v5: support (support.php, admin/support.php) ---------- */
.sup-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sup-cat input{position:absolute;opacity:0;pointer-events:none}
.sup-cat span{display:flex;align-items:center;gap:8px;padding:10px 12px;border:2px solid var(--ink);border-radius:10px;background:var(--card);
  font-size:.84rem;font-weight:600;cursor:pointer}
.sup-cat input:checked + span{background:var(--lime);box-shadow:var(--sh-sm)}
.sup-cat input:focus-visible + span{outline:3px solid var(--blue);outline-offset:2px}
.sup-list{display:flex;flex-direction:column;gap:10px}
.sup-item{background:var(--card);border:var(--bd);border-radius:var(--r-card);padding:10px 14px}
.sup-item summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;cursor:pointer;list-style:none}
.sup-item summary b{flex:1;min-width:160px}
.sup-item summary small{font-family:var(--font-mono);font-size:.66rem;color:var(--muted)}
.sup-st{font-family:var(--font-mono);font-size:.62rem;font-weight:700;padding:2px 8px;border:1.5px solid var(--ink);border-radius:var(--r-pill)}
.sup-st--open{background:#fff1c7}.sup-st--answered{background:#dcf7d1}.sup-st--closed{background:var(--card-2)}
.sup-msg{font-size:.9rem;color:var(--ink-soft);margin:10px 0}
.sup-reply{background:#eef3ff;border-left:4px solid var(--blue);border-radius:8px;padding:8px 12px;font-size:.9rem}
.sup-reply p{margin:4px 0 0}
@media (max-width:480px){ .sup-cats{grid-template-columns:1fr} }
.qc__nudged{font-family:var(--font-mono);font-size:.6rem;font-weight:700;background:#eef3ff;border:1.5px solid var(--blue);color:var(--blue);border-radius:var(--r-pill);padding:1px 8px}
.help-tiplink{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.74rem;font-weight:700;color:var(--blue);margin:0 0 12px;text-decoration:none}
/* v5: owner checklist — progress, never a score */
.help-count{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:6px 8px;border:var(--bd);border-radius:12px;background:var(--card-2);
  font-family:var(--font-display);font-size:1.6rem;font-weight:800;line-height:1}
.help-count small{font-family:var(--font-mono);font-size:.56rem;font-weight:700;text-transform:uppercase;margin-top:2px}
.help-count--sm{min-width:48px;font-size:1.1rem;flex-direction:row;align-items:baseline;justify-content:center;gap:1px}
.help-count--sm small{font-size:.7rem;text-transform:none}
.help-count.is-done,.help-mine--done .help-count{background:var(--lime)}
.help-bar{height:10px;background:var(--card-2);border:2px solid var(--ink);border-radius:var(--r-pill);overflow:hidden;margin:0 0 10px}
.help-bar i{display:block;height:100%;background:var(--lime);border-right:2px solid var(--ink)}
.help-mine__headline{font-family:var(--font-display);font-weight:800;font-size:.98rem;margin:0 0 10px}
.help-mine__list .is-todo i{color:var(--muted)}
.help-mine__yay{font-family:var(--font-mono);font-size:.76rem;font-weight:700;margin:4px 0 0;color:var(--teal)}

/* ---------- v6: highlighted social (settings star + big profile button) ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.social-edit .input-group{flex:1;min-width:0}
.social-hl{flex:0 0 auto;cursor:pointer}
.social-hl input{position:absolute;opacity:0;pointer-events:none}
.social-hl > span{display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--ink);border-radius:10px;background:var(--card);color:var(--muted)}
.social-hl input:checked + span{background:var(--gold);color:var(--ink);box-shadow:var(--sh-sm)}
.social-hl input:focus-visible + span{outline:3px solid var(--blue);outline-offset:2px}
.social-hl-none{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.72rem;color:var(--muted);margin-top:4px;cursor:pointer}
.prof__hl{display:flex;align-items:center;gap:12px;margin:16px 0 0;width:100%;padding:12px 16px;border:var(--bd);border-radius:14px;
  box-shadow:var(--sh);color:#fff;text-decoration:none;text-align:left}
.prof__hl:hover{color:#fff}
.prof__hl:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.prof__hl-ic{font-size:1.6rem;flex:0 0 auto}
.prof__hl-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.prof__hl-t b{font-family:var(--font-display);font-weight:800;font-size:1.05rem}
.prof__hl-t small{font-family:var(--font-mono);font-size:.72rem;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof__hl--instagram{background:linear-gradient(115deg,#d62976 0%,#c13584 35%,#833ab4 70%,#5851db 100%)}
.prof__hl--tiktok,.prof__hl--x{background:#161310}
.prof__hl--youtube{background:#e60000}
.prof__hl--facebook{background:#0866ff}
.prof__hl--linkedin{background:#0a66c2}
.prof__hl--whatsapp{background:#25d366;color:#0b2e17}
.prof__hl--whatsapp:hover{color:#0b2e17}
.prof__hl--website:hover{color:#fff}
.prof__hl--website{background:var(--blue)}

/* ---------- v7: "Are you sure?" dialog (forms with data-confirm) ---------- */
.modal--confirm{text-align:center;max-width:360px}
.modal--confirm h3{font-family:var(--font-display);font-weight:800;font-size:1.2rem;margin:10px 0 6px;text-wrap:balance}
.modal--confirm p{font-size:.9rem;color:var(--ink-soft);margin:0 0 16px}
.confirm-modal__ic{width:52px;height:52px;margin:0 auto;border:var(--bd);border-radius:14px;background:#ffe0dc;color:var(--danger);
  display:grid;place-items:center;font-size:1.3rem;box-shadow:var(--sh-sm)}
.confirm-modal__acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- v8: map popup = ONE card (no box-in-box), centred content, outlined pointer ---------- */
.leaflet-popup-content-wrapper{background:var(--card);padding:0;overflow:hidden}
.leaflet-popup-content{margin:0!important;width:auto!important;min-width:250px;max-width:290px}
.leaflet-popup-content .sm-pop{border:0;border-radius:0;box-shadow:none;background:transparent;width:100%;
  padding:12px 30px 12px 12px;gap:11px;align-items:center}
.leaflet-popup-content .sm-pop:hover{background:var(--card-2)}
.sm-pop__thumb{width:58px;height:58px;border:2px solid var(--ink);border-radius:10px}
.sm-pop__name{font-family:var(--font-display);font-weight:800;color:var(--ink);font-size:.95rem;line-height:1.15;overflow-wrap:anywhere}
.sm-pop__meta{font-family:var(--font-mono);font-size:.66rem;color:var(--muted)}
.sm-pop__offer{border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:1px 8px;margin-top:4px;align-self:flex-start}
.sm-pop__go{color:var(--ink)}
.leaflet-popup-tip-container{margin-top:-2px}
.leaflet-popup-tip{background:var(--card);border:2.5px solid var(--ink);box-shadow:none}
.leaflet-container a.leaflet-popup-close-button{top:8px;right:8px;width:22px;height:22px;padding:0!important;display:grid;place-items:center;
  font:700 16px/1 var(--font-ui);color:var(--ink)!important;border-radius:6px}
.leaflet-container a.leaflet-popup-close-button:hover{background:var(--card-2)}
/* marker: cream name bar so the black outline + shadow read as separate from it */

/* v9 members */
.prof__stats{font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--ink-soft);margin-top:10px}
.prof__stats .ph-map-pin{color:var(--pink)}
.prof__places{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0;width:100%}
.prof__placebtn{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--card);border:var(--bd);
  border-radius:var(--r-card);box-shadow:var(--sh-sm);padding:12px 6px;text-align:center;color:var(--ink)}
.prof__placebtn i{font-size:1.05rem}
.prof__placet{font-family:var(--font-mono);font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--ink-soft)}
.prof__placen{font-family:var(--font-display);font-weight:800;font-size:1.15rem}
.fcard--collapse{padding:14px}
.fcard--collapse[open]{padding:16px}
.fcard__summary{cursor:pointer;list-style:none;font-family:var(--font-mono);font-size:.86rem;font-weight:700;display:flex;
  align-items:center;gap:6px;flex-wrap:wrap}
.fcard__summary::-webkit-details-marker{display:none}
.fcard--collapse[open] .fcard__summary{margin-bottom:4px}
.stat{position:relative}
.stat__chg{font-family:var(--font-mono);font-size:.62rem;font-weight:700;margin-top:4px;display:inline-flex;align-items:center;gap:3px}
.stat__chg--up{color:var(--success,#1a8a4a)}
.stat__chg--down{color:var(--danger,#d8402e)}
.stat__chg--flat{color:var(--muted)}
.pin-metrics--head{color:var(--muted);border-bottom:var(--bd);padding-bottom:6px;margin-bottom:2px}
.pin-metrics--head span{width:auto}
.pm-lbl{display:block;font-size:.56rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.sm-pin__name{box-shadow:none}

/* v9 offers */
.coupon__title{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:#fff;margin-bottom:10px}
.coupon--expired .coupon__title{color:var(--ink)}
.coupon__codebox{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1.5px dashed rgba(255,255,255,.55);border-radius:10px;padding:8px 10px;background:rgba(0,0,0,.08)}
.coupon--expired .coupon__codebox{border-color:var(--border-strong)}
.coupon__copybtn{display:inline-flex;align-items:center;gap:6px;border:var(--bd);border-radius:var(--r-pill);
  background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  padding:6px 12px;cursor:pointer;flex-shrink:0}
.coupon__copybtn:hover{opacity:.88}
.coupon__copybtn.is-copied{background:var(--blue)}
.coupon__counter{display:block;color:rgba(255,255,255,.92);font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;margin-top:10px}
.coupon--expired .coupon__counter{color:var(--ink-soft)}
.coupon__openbtn{margin-top:0}

/* v9 tap targets */
.mobilenav__i{min-height:44px;justify-content:center}
.prof__soc{min-width:44px;min-height:44px}

/* v10 home + emails */
.hp{max-width:640px;margin:0 auto}
.hp-creator{display:flex;align-items:center;gap:12px;width:100%;background:var(--card);border:var(--bd);
  border-radius:var(--r-card);box-shadow:var(--sh-sm);padding:12px 14px;margin-bottom:18px;text-decoration:none;color:var(--ink)}
.hp-creator__ic{flex:none;width:40px;height:40px;border-radius:11px;background:var(--lime);border:var(--bd);
  display:flex;align-items:center;justify-content:center;font-size:1rem}
.hp-creator__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hp-creator__t{font-family:var(--font-display);font-weight:800;font-size:.92rem}
.hp-creator__stats{font-family:var(--font-mono);font-size:.68rem;color:var(--muted)}
.hp-creator__go{flex:none;color:var(--muted)}
.hp-empty{margin-bottom:8px}

/* v10 creators + business */
.hub__info{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.hub__info-row{display:flex;align-items:center;gap:8px;color:var(--ink);font-family:var(--font-mono);
  font-size:.8rem;font-weight:500;text-decoration:none}
.hub__info-row i{color:var(--pink);width:16px;text-align:center;flex:none}
a.hub__info-row:hover{color:var(--ink);text-decoration:underline}

.pcard--hiddenhere .pcard__media{opacity:.55}
.pcard__hhtag{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-family:var(--font-mono);
  font-size:.66rem;font-weight:700;color:var(--ink);background:var(--gold);border-radius:var(--r-pill);
  padding:2px 8px;width:fit-content}

.dup-banner{display:flex;align-items:flex-start;gap:10px;background:var(--card-2);border:var(--bd);
  border-radius:var(--r-card);box-shadow:var(--sh-sm);padding:12px 14px;margin:10px 0 14px;font-size:.86rem}
.dup-banner i{color:var(--gold);margin-top:2px;flex:none}
.dup-banner__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;flex-basis:100%}

.exp__showall{display:block;margin:12px auto 4px}

/* v10 accounts */
.verify-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--lime);
  border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm);padding:10px 14px;
  margin:0 0 14px;font-size:.86rem;font-weight:600;color:var(--ink)}
.verify-banner i{font-size:1.05rem}
.verify-banner span{flex:1 1 auto}
.verify-banner__form{margin:0}
.verify-banner__btn{background:var(--ink);color:var(--paper);border:none;border-radius:var(--r-pill);
  padding:6px 14px;font-family:var(--font-ui);font-weight:700;font-size:.82rem;cursor:pointer}
.verify-banner__btn:hover{opacity:.88}
.check-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:.9rem;cursor:pointer}
.check-row input[type="checkbox"]{margin-top:3px;width:18px;height:18px;flex:none}
.check-row small{display:block;color:var(--ink-soft);font-weight:400;margin-top:2px}
.mm-ask{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:2px solid var(--ink);
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;flex-wrap:wrap}
.mm-ask i{color:var(--pink)}

/* v11 fixes */
.tag--lock{background:var(--card);color:var(--ink);border:2px solid var(--ink);font-weight:700}
.tag--lock i{color:var(--ink)}
.coupon.is-revealed .coupon__codetxt{letter-spacing:.04em}
.coupon__codetxt{font-family:var(--font-mono);font-weight:700}
.dup-banner[hidden]{display:none}
.hours{display:grid;gap:8px}
.hours__row{display:grid;grid-template-columns:78px 1fr auto 1fr;gap:8px;align-items:center}
.hours__day{display:flex;align-items:center;gap:6px;font-weight:700;cursor:pointer;min-height:40px}
.hours__day input{width:20px;height:20px;accent-color:var(--blue)}
.hours__t{min-width:0;padding:8px 10px}
.hours__to{font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
.hours__closed{display:none;font-family:var(--font-mono);font-size:.74rem;color:var(--muted)}
.hours__row.is-closed .hours__t,.hours__row.is-closed .hours__to{display:none}
.hours__row.is-closed .hours__closed{display:block;grid-column:2/-1}
.hub__hours span{display:grid;gap:2px}
.hub__open{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;color:var(--danger)}
.hub__open.is-open{color:var(--teal)}
.offer-dialog{border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-lg);background:var(--card);color:var(--ink);padding:18px;width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto}
.offer-dialog::backdrop{background:rgba(22,19,16,.55)}
.offer-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.offer-dialog__head h3{font-family:var(--font-display);font-size:1.15rem;margin:0}
.offer-dialog__x{width:40px;height:40px;border:var(--bd);border-radius:10px;background:var(--card);cursor:pointer;flex:none}
.offer-dialog__acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
/* v11: redesigned join pop-up */
.modal.jm{padding:0;overflow:hidden;max-width:400px;width:calc(100vw - 32px);border:var(--bd);box-shadow:var(--sh-lg);border-radius:var(--r-card);background:var(--card)}
.jm__head{position:relative;background:var(--page);border-bottom:var(--bd);padding:22px 20px 18px;text-align:center}
.jm__x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:var(--bd);border-radius:10px;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--sh-sm)}
.jm__ic{width:58px;height:58px;margin:0 auto 10px;display:grid;place-items:center;border:var(--bd);border-radius:50%;background:var(--card);font-size:1.45rem;color:var(--blue);box-shadow:var(--sh-sm)}
.jm__title{font-family:var(--font-display);font-weight:800;font-size:1.45rem;line-height:1.1;margin:0 0 6px;overflow-wrap:anywhere}
.jm__sub{margin:0;color:var(--ink-soft);font-size:.92rem}
.jm__body{padding:16px 20px 18px;display:grid;gap:10px}
.jm__perks{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:8px}
.jm__perks li{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.9rem}
.jm__perks i{width:30px;height:30px;flex:none;display:grid;place-items:center;border:2px solid var(--ink);border-radius:8px;background:var(--lime);color:var(--ink);font-size:.8rem}
.jm__google{background:#fff;color:#161310}
.jm__google i{color:#ea4335}
.jm__signin{margin:2px 0 0;text-align:center;font-size:.88rem}
.jm__signin a{font-weight:700;color:var(--blue)}
.jm__free{margin:0;text-align:center;font-family:var(--font-mono);font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}

/* v12 report + admin */
.report-share__row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.report-share__row .input{flex:1;min-width:180px;font-family:var(--font-mono);font-size:.8rem}
.report-share__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.report-share__acts form{margin:0}
.report-head{max-width:340px;margin:0 auto 16px}
.report-foot{text-align:center;font-family:var(--font-mono);font-size:.68rem;color:var(--muted);margin:22px 0 8px}

.needs-today__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
@media(min-width:640px){.needs-today__grid{grid-template-columns:repeat(5,1fr)}}
.needs-today__tile{display:block;background:var(--card-2);border:var(--bd);border-radius:var(--r-card);padding:12px;text-decoration:none;color:var(--ink);box-shadow:var(--sh-sm)}
.needs-today__tile:not(.is-zero){background:var(--gold)}
.needs-today__n{font-family:var(--font-display);font-weight:800;font-size:1.5rem;line-height:1}
.needs-today__l{font-family:var(--font-mono);font-size:.66rem;font-weight:700;margin-top:4px;display:flex;align-items:center;gap:5px}

/* v26: admin menu is a vertical list (partials/admin_nav.php). Phones: "Admin menu" button opens it. */
.admin-side{margin-bottom:18px;background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm)}
.admin-side__btn{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px;padding:12px 14px;font-weight:700}
.admin-side__btn::-webkit-details-marker{display:none}
.admin-side__cur{margin-left:auto;font-family:var(--font-mono);font-size:.72rem;background:var(--lime);border:2px solid var(--ink);border-radius:6px;padding:2px 7px}
.admin-side__cur:empty{display:none}
.admin-side__care{font-size:.65rem;transition:transform .15s}
.admin-side[open] .admin-side__care{transform:rotate(180deg)}
.admin-side__list{display:flex;flex-direction:column;gap:2px;padding:6px 8px 10px;border-top:2px solid var(--ink)}
.admin-side__h{font-family:var(--font-mono);font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 10px 3px;display:flex;align-items:center;gap:6px}
.admin-side__a{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:8px;border:2px solid transparent;color:var(--ink);font-weight:600;font-size:.9rem;text-decoration:none}
.admin-side__a i{width:16px;text-align:center;color:var(--muted)}
.admin-side__a:hover{background:var(--page)}
.admin-side__a.is-active{background:var(--lime);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.admin-side__a.is-active i{color:var(--ink)}
/* Wide screens: menu becomes a sticky left sidebar; the rest of the page sits in the right column. */
@media(min-width:1000px){
  .container:has(> .admin-side){display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:28px;align-items:start;max-width:1240px!important}
  .container:has(> .admin-side) > *{grid-column:2}
  .container:has(> .admin-side) > .admin-side{grid-column:1;grid-row:1 / span 300;position:sticky;top:78px;margin:0;max-height:calc(100vh - 160px);overflow:auto;overscroll-behavior:contain}
  .admin-side__btn{display:none}
  .admin-side__list{border-top:0;padding-top:4px}
}

/* v12 business */
.biz-tr{font-size:.7rem;opacity:.75}
.biz-stats2{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border,rgba(0,0,0,.15))}
.biz-stats2__row{display:flex;gap:12px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.68rem;font-weight:700;color:var(--muted)}
.biz-stats2__row i{margin-right:4px}
.biz-stats2__row[hidden]{display:none}
.biz-stats2__toggle{margin-top:6px;padding:0}

/* v13: iPhone Safari zooms into any text box under 16px when it gets the cursor, and the page then stays
   zoomed ("cut at the sides"). 16px on phones stops that — without disabling pinch-zoom. */
@media (max-width:860px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select, textarea, .input, .select, .textarea{font-size:16px}
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* v47: inside the desktop phone frame — no desktop scrollbar, like a real phone (still scrolls) */
html.in-phone{scrollbar-width:none}
html.in-phone::-webkit-scrollbar{display:none}
/* v48: "Phone view" button on a computer after choosing "Open full website" */
.pf-back{position:fixed;right:22px;bottom:22px;z-index:9999;display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;background:var(--ink);color:#fff;border:2.5px solid var(--ink);border-radius:999px;
  font-family:var(--font-ui);font-weight:700;font-size:.92rem;cursor:pointer;box-shadow:var(--sh)}
.pf-back i{color:var(--lime);font-size:1.05rem}
.pf-back:hover{background:var(--blue);border-color:var(--ink)}
.pf-back:active{transform:translate(2px,2px);box-shadow:none}

/* v14 accessibility */
/* Contrast: --muted (#7c7360) measured 3.25:1 on --page, 3.97:1 on --card-2, 4.31:1 on --paper —
   all below the 4.5:1 text minimum. Darkened; still the same warm ink-brown, now 4.5–6.5:1 on
   every background it's used against (was already 4.61:1 on --card so this only helps). */
:root{--muted:#655c4a}

/* Contrast: white text/icons on these brights read under 4.5:1 (pink 3.11, teal 2.64, danger 3.55).
   Switching the text to ink keeps the same badges/buttons but readable (5.2–7.0:1). */
.btn--danger,.btn--danger:hover,
.sm-pin__offer,
.pick-deal,
.wchip.done,
.radar-on,.pin-creator__radar .is-on,
.flash--error,
.handle-status.is-bad,
.tag--offer,
.radar-stat--pink,
.pickhero__deal,
.req-tag,
.pill--follow.is-active,
.atplace__off,
.ic-teal,
.coupon__code,
.coupon__desc,.coupon__exp,
.coupon__title,.coupon__counter,
.pcard__off{color:var(--ink)!important}

/* Focus visibility: a few controls turn the outline off and rely only on a border/shadow change
   that isn't always enough for keyboard users — bring back a visible ring for keyboard focus only
   (mouse/touch clicks are unaffected, so the look for sighted mouse users doesn't change). */
.input:focus-visible,.select:focus-visible,.textarea:focus-visible,
.otp input:focus-visible,
.searchpage .exp__search input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* pin.php hero: the "view media" action moved onto .pinA__scrim (see pin.php) instead of the
   whole hero, so it no longer wraps the real byline link + radar button (nested-interactive). */
.pinA__scrim{pointer-events:auto;cursor:inherit}

/* explore.php: these rail headings were <h4> right after the (new, screen-reader-only) page <h1>
   — a skipped heading level. Promoted to <h2>; same look, since .exp-rail__head h4 (below) styled
   them identically and this repeats that rule for the new tag. */
.exp-rail__head h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:1rem}

/* Skip link: first focusable thing on every page, hidden until it has keyboard focus. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--lime);color:var(--ink);
  font-family:var(--font-mono);font-weight:700;font-size:.85rem;padding:12px 18px;border:var(--bd);
  border-radius:0 0 var(--r-ctl) 0;text-decoration:none}
.skip-link:focus-visible,.skip-link:focus{left:0;outline:3px solid var(--blue);outline-offset:2px}

/* Touch targets: bump icon-only controls under 44x44 CSS px on phones. */
@media (max-width:760px){
  .mbar__ico,.jm__x{min-width:44px;min-height:44px}
  .flash__x,.guest-bar__x,.recent-item__x,.searchpage .recent-item__x,.pw-toggle{
    min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* v15 profile map */
/* Top banner now shows the creator's map (with markers) instead of a cover photo.
   Fills the same box as the old .prof__cover (16/7, a bit taller on phones below). */
.prof__mapbanner{width:100%;height:100%;background:var(--card-2)}
/* No zoom/locate/fullscreen controls on the banner (SMMap.init called with zoomCtl:false,
   so .sm-zoom is never added) — this is a belt-and-braces hide in case it ever is. */
.prof__mapbanner .sm-zoom,.prof__mapbanner .leaflet-control-zoom{display:none!important}
/* Attribution is required by the map provider but should stay tiny and out of the way. */
.prof__mapbanner .leaflet-control-attribution{font-size:8px;line-height:1.3;padding:0 4px;
  background:rgba(250,245,232,.7);border-radius:6px 0 0 0;opacity:.8}
.prof__mapbanner .leaflet-control-attribution a{color:var(--muted)}
/* v62: pin page map is a still picture (no touch) — plain cursor, small credit top-right. */
#pinmap.leaflet-container{cursor:default}
#pinmap .leaflet-control-attribution{font-size:9px;line-height:1.3;padding:2px 6px;margin:0;
  background:rgba(250,245,232,.85);border-radius:0 0 0 8px}
#pinmap .leaflet-control-attribution a{color:var(--muted)}
/* No cover photo and no map to show (private user, or 0 public pins): plain brand banner,
   not an empty world map. */
.prof__cover--empty{width:100%;height:100%;background:var(--page);
  background-image:repeating-linear-gradient(45deg,rgba(22,19,16,.07) 0 2px,transparent 2px 12px)}
@media (max-width:480px){
  .prof__cover{aspect-ratio:4/3}
}

/* v15 cards */
/* Shared pin card: photo (category chip only) + place/creator row + Save.
   Structure: .pin-card > .pin-card__link (stretched, invisible — makes the whole
   card a link) + .pin-card__media + .pin-card__info + .pin-card__save + optional
   .pin-card__note / .pin-card__mgmt. The link is position:absolute;inset:0 at a
   lower z-index than the interactive bits, so Save / owner controls sit on top of
   it and never trigger navigation. See inc/cards.php pin_card_html(). */
.pin-card{position:relative;background:var(--card);border:var(--bd);border-radius:var(--r-card);
  overflow:hidden}/* v58: flat, no drop shadow */
.pin-card:active{transform:scale(.985)}
.pin-card__link{position:absolute;inset:0;z-index:1}
/* v44: text/labels drawn over the photo sit above the card link but aren't buttons —
   let taps fall through to the link so tapping the tagline or the category opens the pin. */
.pin-card__phtext,.pin-card__cat,.pin-card__badge,.pin-card__private,.pin-card .pcard__feat{pointer-events:none}
.pin-card__media{position:relative;aspect-ratio:4/5;background:var(--card-2)}
.pin-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.pin-card__ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--ink);font-size:2rem}
.pin-card__cat{position:absolute;top:8px;left:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;color:var(--ink);background:var(--lime);
  border:2px solid var(--ink);padding:3px 8px;border-radius:var(--r-pill);max-width:calc(100% - 16px)}
.pin-card__cat span,.pin-card__cat i{flex:none}
.pin-card__private{position:absolute;top:36px;left:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:.58rem;font-weight:700;color:var(--paper);background:var(--ink);
  border:2px solid var(--ink);padding:2px 7px;border-radius:var(--r-pill)}
.pin-card__badge{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:.58rem;font-weight:700;color:#fff;background:var(--pink);
  border:2px solid var(--ink);padding:3px 8px;border-radius:var(--r-pill)}
.pin-card--off .pin-card__media{opacity:.55}
.pin-card__info{position:relative;display:flex;align-items:center;gap:6px;padding:9px 9px 9px 10px;min-height:52px}
.pin-card__text{min-width:0;flex:1 1 auto}
.pin-card__creator{font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:var(--muted);margin-top:3px;
  display:flex;align-items:center;gap:5px}
.pin-card__creator .pin-card__t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pin-card__creator img{width:16px;height:16px;border-radius:50%;object-fit:cover;flex:none}
.pin-card__note{position:relative;z-index:2;padding:0 10px 9px;font-family:var(--font-mono);font-size:.66rem;
  font-weight:700;color:var(--muted);display:flex;align-items:center;gap:5px}
.pin-card__mgmt{position:relative;z-index:2;display:flex;align-items:center;gap:8px;padding:9px;
  border-top:var(--bd);flex-wrap:wrap}
.pin-card__mgmt .btn{flex:0 0 auto;padding:8px 10px}
.pin-card__mgmt .btn--blue{flex:1 1 auto}
.pin-card__mgmt .mypin-toggle.is-active{background:var(--lime);color:var(--ink)}
.pin-card__mgmt .mypin-toggle.is-inactive{background:var(--card-2);color:var(--muted)}
.pin-card__mgmt .mypin-del{color:var(--danger)}
.pin-card__reorder{position:absolute;top:8px;right:8px;z-index:2;display:flex;flex-direction:column;
  gap:3px;background:var(--card);border:var(--bd);border-radius:var(--r-ctl);box-shadow:var(--sh-sm);overflow:hidden}
.pin-card__ro{width:26px;height:20px;border:none;background:none;color:var(--ink);cursor:pointer;font-size:.55rem;
  display:flex;align-items:center;justify-content:center}
.pin-card__ro:disabled{opacity:.3;cursor:default}
.pin-card__ro--mod{border-top:1.5px solid var(--ink);margin-top:1px;padding-top:2px;height:22px}
.pin-card--manage .pin-card__reorder + .pin-card__info,
.pin-card--manage .pin-card__info{padding-right:10px}
.pin-card--manage .pin-card__media{position:relative}
.pin-card--hiddenhere .pin-card__media{opacity:.55}

/* rail (horizontal scrollers: home, radar, "more from this creator") */
.pin-card--rail{flex:0 0 158px;width:158px}
.pin-card--rail .pin-card__media{aspect-ratio:3/4}
.pin-card--rail .pin-card__info{padding:8px 8px 8px 9px;min-height:0}
.pin-card--rail .pin-card__creator{font-size:.66rem}
/* v15: keep Leaflet's own layers (z-index 400+) inside the banner so the profile photo sits on top of the map */
.prof__cover{position:relative;isolation:isolate;z-index:0}
.prof__avatar,.prof__av{position:relative;z-index:2}
/* v15: gallery thumbnails — the selected one is marked in ink (no blue, so it doesn't look like a link);
   the reel thumbnail's play icon is a small corner badge instead of a centred button */
.pin-gallery__thumb.is-on,.gthumb.is-on{border-color:var(--ink);border-width:3px;box-shadow:var(--sh)}
.pin-gallery__thumb:not(.is-on),.gthumb:not(.is-on){opacity:.85}
.pin-gallery__thumb--reel > i.ph-play,.pin-gallery__thumb--reel .ph-play{position:absolute;right:4px;bottom:4px;left:auto;top:auto;transform:none;
  width:20px;height:20px;border-radius:6px;background:var(--ink);color:var(--card);font-size:.55rem;display:grid;place-items:center;margin:0}
/* v15b: text row gets the full width, creator has a small photo */
.pin-card__media{position:relative}
.pin-card__info{padding-right:12px}
.pin-card__text{min-width:0;flex:1}
.pin-card__creator{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pin-card__av{width:20px;height:20px;flex:none;border-radius:50%;border:1.5px solid var(--ink);object-fit:cover;background:var(--card-2)}
.pin-card__av--ph{display:grid;place-items:center;font-size:.55rem;color:var(--muted)}
/* pin page: the selected thumbnail gets a yellow frame */
.pin-gallery__thumb.is-on,.gthumb.is-on{border-color:var(--ink);box-shadow:0 0 0 3px var(--page),0 0 0 5px var(--ink)}

/* v19 card redesign — tagline becomes the big on-photo headline instead of a small pill;
   Save moves off the photo into its own Instagram-style action row below the info text
   (View / Directions / Save). See inc/cards.php pin_card_html() and map.js renderList(). */
.pin-card__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(22,19,16,.92) 0%, rgba(22,19,16,.58) 32%, rgba(22,19,16,0) 64%)}
.pin-card__phtext{position:absolute;left:10px;right:10px;bottom:9px;z-index:2;
  font-family:var(--font-display);font-weight:800;color:#fff;letter-spacing:-.01em;
  font-size:clamp(1rem, 0.82rem + 1.2vw, 1.3rem);line-height:1.16;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 2px 10px rgba(0,0,0,.45)}
.pin-card--rail .pin-card__phtext{font-size:clamp(.95rem, .9rem + .3vw, 1.05rem);line-height:1.16;-webkit-line-clamp:3;left:8px;right:8px;bottom:7px}
/* no-tagline fallback: the place name itself becomes the on-photo headline (same styling) */
.pin-card__phtext--fallback{font-weight:800}
/* place name (info row): wraps to at most 2 lines then ellipsis, full width of the info
   area now that Save has moved down into its own action row. Only rendered when a
   tagline is already carrying the big on-photo headline (see cards.php/map.js). */
.pin-card__place-sm{font-family:var(--font-ui);font-weight:700;font-size:.78rem;color:var(--ink);
  line-height:1.25;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-word;
  min-height:2.5em}/* always 2 lines tall, so 1-line and 2-line names line up across a row */
.pin-card--rail .pin-card__place-sm{font-size:.72rem}
/* Instagram-style action row: its own line below .pin-card__info, behind a thin divider.
   z-index:3 keeps every button above .pin-card__link (z-index:1, the full-card overlay),
   so a tap on View, Directions or Save is handled by the button, not the card link.
   Icon-only at every width (no text labels) — a grid card is too narrow at 360-402px for
   three labelled buttons without clipping Save. */
.pin-card__actions{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  border-top:1.5px solid rgba(22,19,16,.15);padding:0 2px 8px}
.pin-card__actions-left{display:flex;align-items:center}
.pin-card__act{flex:none;display:flex;align-items:center;justify-content:center;gap:5px;
  min-width:44px;min-height:44px;background:none;border:none;color:var(--ink);cursor:pointer;
  font-family:var(--font-mono);font-weight:700;font-size:.66rem;padding:0;text-decoration:none;
  border-radius:var(--r-ctl)}
.pin-card__act:active{background:var(--card-2)}
.pin-card__act i{font-size:.95rem}
/* saved = filled icon + the site's yellow/gold token as a background highlight, like a chip */
.pin-card__act--save.is-on{color:var(--blue)}/* v58: in My Plans = filled blue icon, no yellow box */
/* tagline under the title on the pin page */
.pinA__tagline{display:inline-block;margin:6px 0 0;background:var(--page);color:var(--ink);border:2px solid var(--ink);
  border-radius:var(--r-pill);padding:3px 10px;font-weight:700;font-size:.82rem;box-shadow:2px 2px 0 var(--ink)}
/* pin page hero with a tagline: tagline = big headline, place name smaller below */
.pinA__headline{font-family:var(--font-display);font-weight:800;font-size:1.85rem;line-height:1.04;color:#fff;margin:0 0 6px;overflow-wrap:anywhere}
.pinA__title.pinA__title--place{font-family:var(--font-ui);font-size:1rem;font-weight:700;line-height:1.3;color:rgba(255,255,255,.88);
  margin:0 0 12px;display:flex;align-items:baseline;gap:6px}
.pinA__title--place i{font-size:.85em;color:var(--lime)}
/* pin page hero: uploaded video (silent 5s preview loop, then plays in place) */
.pinA__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#000;display:block}
.pinA__video[hidden]{display:none}
.pinA__hero.has-vplay .pin-gallery__play:not([hidden]){display:flex;z-index:4;pointer-events:none;width:64px;height:64px;font-size:1.3rem}
.pinA__hero.is-playing .pinA__video{z-index:7;object-fit:contain}
.pinA__hero.is-playing .pin-gallery__play{display:none}
/* v104: playing = full-screen reel view. The hero (video + tagline/place/creator) and the
   Share/Directions/Plan buttons cover the screen; on wide screens a 9:16 column on black.
   Own controls replace the browser bar: tap = pause/play (scrim above the video), progress line,
   X + sound buttons top-left. Taps on the text pass to the scrim except links/Follow. */
.pinA__vbtn,.pinA__vprog{display:none}
body.is-reelfs{overflow:hidden;--colw:min(100vw,calc(100vh * 9 / 16))}
@supports(height:100dvh){body.is-reelfs{--colw:min(100vw,calc(100dvh * 9 / 16))}}
body.is-reelfs::before{content:"";position:fixed;inset:0;background:#000;z-index:2000}
body.is-reelfs .pin-gallery__main.pinA__hero{position:fixed;top:0;bottom:0;left:0;right:0;margin:0 auto;width:var(--colw);
  height:auto;min-height:0;max-height:none;border:0;border-radius:0;box-shadow:none;transform:none;animation:none;z-index:2001}
body.is-reelfs .pinpage .mbar--float{position:fixed;left:auto;right:calc((100vw - var(--colw)) / 2);z-index:2002}
/* a11y fix (QA audit): .pg-title's <h1> (pg-h1) is already covered by the fixed black
   ::before + the fixed hero above it, so hiding it here changes nothing on screen — it
   just stops a screen reader from finding a second <h1> (pinA__title--place, inside the
   now-visible .pinA__foot) while the reel plays full screen. */
body.is-reelfs .pg-title{display:none}
body.is-reelfs .pinA__hero :is(.pin-gallery__cat,.pin-gallery__ev,.pswipe__arrow,.pswipe__note){display:none}
body.is-reelfs .pinA__hero .pinA__video{z-index:7;object-fit:cover}
body.is-reelfs .pinA__hero .pinA__video.is-wide{object-fit:contain}
body.is-reelfs .pinA__hero .pinA__scrim{z-index:8;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.2) 34%,transparent 52%)}
body.is-reelfs .pinA__hero .pinA__foot{z-index:9;pointer-events:none;padding-bottom:calc(24px + env(safe-area-inset-bottom));text-shadow:0 1px 3px rgba(0,0,0,.6)}
body.is-reelfs .pinA__hero .pinA__foot :is(a,button,form){pointer-events:auto}
body.is-reelfs .pinA__hero.is-paused .pin-gallery__play{display:flex;z-index:9;pointer-events:none;width:72px;height:72px;font-size:1.5rem}
body.is-reelfs .pinA__vbtn{display:flex;position:absolute;top:16px;z-index:10;width:40px;height:40px;border-radius:50%;border:0;
  background:rgba(0,0,0,.5);color:#fff;font-size:1.15rem;align-items:center;justify-content:center;cursor:pointer}
body.is-reelfs .pinA__vx{left:16px}
body.is-reelfs .pinA__vmute{left:64px}
body.is-reelfs .pinA__vbtn:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
body.is-reelfs .pinA__vprog{display:block;position:absolute;left:0;right:0;bottom:env(safe-area-inset-bottom);height:16px;z-index:10;cursor:pointer}
.pinA__vprog::before,.pinA__vprog span{content:"";position:absolute;left:0;bottom:6px;height:3px;border-radius:2px}
.pinA__vprog::before{right:0;background:rgba(255,255,255,.3)}
.pinA__vprog span{width:0;background:#fff}
body.is-reelfs .pinA__hero .pinA__headline{opacity:.75}/* v106: tagline a little see-through over the playing video */
/* map: one spot with several pins → a list in the popup */
.sm-pop-list{display:grid;gap:6px;max-height:260px;overflow:auto;padding:2px}
.sm-pop-list__item{display:flex;align-items:center;gap:10px;padding:6px;border:2px solid var(--ink);border-radius:10px;background:var(--card);color:var(--ink);text-decoration:none;min-height:52px}
.sm-pop-list__item:hover,.sm-pop-list__item:focus-visible{background:var(--page)}
.sm-pop-list__thumb{width:40px;height:40px;flex:none;border-radius:8px;border:2px solid var(--ink);background-size:cover;background-position:center;display:grid;place-items:center;color:#fff}
.sm-pop-list__body{display:grid;min-width:0;flex:1}
.sm-pop-list__title{font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-pop-list__by{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-pop-list__head{font-family:var(--font-display);font-weight:800;font-size:.95rem;margin:0 2px 2px}

/* ---------- admin category icon picker (v49) ---------- */
.catpick{border:0;padding:0;margin:0 0 12px}
.catpick__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.catpick__opt{position:relative;display:grid;place-items:center;height:42px;border:2px solid var(--ink);border-radius:9px;background:var(--card);cursor:pointer;font-size:20px}
.catpick__opt input{position:absolute;opacity:0;pointer-events:none}
.catpick__opt:has(input:checked){background:var(--ink);color:#fff}
.catpick__opt:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}

/* ---------- v53: menu page (menu.php, Instagram "Settings and activity" style) ---------- */
.menupage{max-width:520px;margin:0 auto;background:var(--paper);position:relative}
@media(min-width:761px){.menupage{max-width:560px;border-left:var(--bd);border-right:var(--bd);min-height:100vh}}
.menu__user{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);
  background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm);
  padding:12px 14px;margin-bottom:16px}
.menu__user-av{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--ink);flex:none}
.menu__user-av--ph{display:flex;align-items:center;justify-content:center;background:var(--card-2);font-size:1.2rem;color:var(--muted)}
.menu__user-body{display:grid;min-width:0;flex:1;gap:1px}
.menu__user-name{font-family:var(--font-display);font-weight:800;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu__user-handle{color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu__user-chev{color:var(--muted);flex:none}
.menu__search{display:flex;align-items:center;gap:8px;background:var(--card);border:var(--bd);
  border-radius:var(--r-ctl);box-shadow:var(--sh-sm);padding:10px 12px;margin-bottom:18px;color:var(--muted)}
.menu__search-input{flex:1;border:0;background:none;font:inherit;font-size:.92rem;color:var(--ink);min-width:0;padding:0}
.menu__search-input::placeholder{color:#b8ae97}
.menu__search-input:focus{outline:none}
.menu__group{margin-bottom:20px}
.menu__group-label{font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin:0 2px 8px}
.menu__rows{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm);overflow:hidden}
.menu__row{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;text-decoration:none;
  color:var(--ink);font-weight:600;font-size:.92rem;border-bottom:2px solid var(--card-2)}
.menu__rows .menu__row:last-child{border-bottom:0}
.menu__row:hover,.menu__row:focus-visible{background:var(--card-2)}
.menu__row[hidden]{display:none}
.menu__row-ic{font-size:1.05rem;width:22px;text-align:center;flex:none;color:var(--ink)}
.menu__row-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu__row-badge{flex:none;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--danger);
  color:#fff;font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.menu__row-chev{color:var(--muted);flex:none;font-size:.85rem}
.menu__row--disabled{color:var(--muted);cursor:default}
.menu__row--danger{background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-sm);
  color:var(--danger);font-weight:700;margin-top:4px}
/* v58: Explore "Near me" distance sits on the photo, right above the tagline. .pin-card__phbot
   stacks distance + tagline at the bottom of the photo so the pill follows a 1-3 line tagline. */
.pin-card__phbot{position:absolute;left:10px;right:10px;bottom:9px;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pin-card__phbot .pin-card__phtext{position:static}
.pin-card__phbot .pcard__dist{margin-top:0}
/* v63: category label preview on Admin → Categories (not on a photo) */
.catchip.pin-card__cat{position:static;display:inline-flex;margin-top:6px}
/* v66: Explore category filter chips in the admin category colour; selected = black with the colour on the icon */
.pill--cat[style*="--cat"]{background:var(--cat);color:var(--cat-ink)}
.pill--cat[style*="--cat"]:hover{color:var(--cat-ink)}
.pill--cat[style*="--cat"].is-active{background:var(--ink);color:#fff;box-shadow:var(--sh-sm)}
.pill--cat[style*="--cat"].is-active i{color:var(--cat)}

/* v73: "Happening near you" rail on Explore = solid blue shadow under each card (option B; replaces v72's lime band) */
.exp-rail--hp .pin-card{box-shadow:5px 5px 0 var(--blue)}
.exp-rail--hp .railrow{padding-bottom:12px}

/* v82: profiles without a pin map get a generated Social Mapia map cover (sm_cover_svg). */
.prof__cover--gen{width:100%;height:100%}
.prof__cover--gen svg{width:100%;height:100%;display:block}

/* ---------- Add-a-pin wizard (5 steps): top bar, bottom bar, offer switch, review ---------- */
.wiz-page{padding-bottom:104px}                 /* clear the fixed bottom wiz-bar */
.wiz-tips{display:inline-block;margin-bottom:10px}
.wiz-hint-sm{margin-bottom:12px;font-size:.76rem}

.wiz-top{position:sticky;top:60px;z-index:40;background:var(--paper);border:var(--bd);border-radius:var(--r-card);
  box-shadow:var(--sh-sm);padding:10px 14px 12px;margin-bottom:16px}
.wiz-top__row{display:flex;align-items:center;gap:10px}
.wiz-top__close{width:38px;height:38px;flex:none;border:var(--bd);border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:1rem;cursor:pointer}
.wiz-top__close:hover{background:var(--card-2)}
.wiz-top__title{flex:1;min-width:0}
.wiz-top__title b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.05rem;line-height:1.1}
.wiz-top__title span{font-size:.72rem;color:var(--muted)}
.wiz-draftbtn{border:var(--bd);border-radius:var(--r-pill);background:var(--card);padding:7px 12px;
  font-weight:700;font-size:.78rem;display:flex;gap:6px;align-items:center;cursor:pointer;white-space:nowrap;box-shadow:var(--sh-sm)}
.wiz-draftbtn.is-saved{background:var(--lime)}
.wiz-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:12px}
.wiz-steps__seg{height:8px;border:2px solid var(--ink);border-radius:999px;background:var(--card);padding:0;cursor:pointer}
.wiz-steps__seg.is-done{background:var(--ink)}
.wiz-steps__seg.is-now{background:var(--blue)}
.wiz-status{font-size:.74rem;color:var(--muted);margin:6px 2px 0;min-height:1em}
.wiz-status.is-ok{color:var(--teal)}

.wiz-h2{font-family:var(--font-display);font-weight:800;font-size:1.3rem;line-height:1.15;margin:0 0 4px}
.wiz-lead{color:var(--muted);margin:0 0 14px}

.wiz-vid-seg{width:100%;margin-bottom:12px;display:flex}
.wiz-vid-seg .seg__btn{flex:1;justify-content:center;gap:6px}
.wiz-vid-seg .seg__btn.is-on{background:var(--ink);color:#fff}

.wiz-offer-toggle{display:flex;align-items:center;gap:12px;background:var(--card-2);border:var(--bd);
  border-radius:var(--r-card);padding:12px 14px;margin-bottom:14px}
.wiz-offer-toggle__meta{flex:1}
.wiz-offer-toggle__meta b{display:block}
.wiz-offer-toggle__meta span{font-size:.76rem;color:var(--muted)}
.wiz-switch{width:50px;height:29px;flex:none;border:var(--bd);border-radius:999px;background:#fff;position:relative;cursor:pointer;padding:0}
.wiz-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--ink);transition:.15s}
.wiz-switch.is-on{background:var(--lime)}
.wiz-switch.is-on::after{left:23px}
.wiz-skip-offer{display:block;margin:10px auto 0;text-align:center}

.wiz-pv{border:var(--bd);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh);background:var(--card);margin-bottom:16px}
.wiz-pv__img{aspect-ratio:4/3;background:var(--card-2) center/cover;position:relative;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.wiz-pv__img.has-img i{display:none}
.wiz-pv__img i{font-size:2.3rem}
.wiz-pv__chip{position:absolute;left:10px;top:10px;background:#fff;border:2px solid var(--ink);border-radius:999px;font-size:.72rem;font-weight:700;padding:2px 9px;z-index:2}
.wiz-pv__chip--reel{left:auto;right:10px;background:var(--teal);color:#fff;display:flex;align-items:center;gap:4px}
.wiz-pv__chip--reel[hidden]{display:none}
.wiz-pv__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:1}
.wiz-pv__body{padding:12px 14px}
.wiz-pv__body b{font-family:var(--font-display);font-weight:800;font-size:1.1rem;line-height:1.2;display:block}
.wiz-pv__body span{font-size:.8rem;color:var(--muted)}

.wiz-checklist{list-style:none;margin:0;padding:0}
.wiz-checklist li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:2px solid var(--card-2)}
.wiz-checklist li:last-child{border-bottom:0}
.wiz-checklist li>i{font-size:1.2rem}
.wiz-checklist .wiz-ok{color:var(--teal)}
.wiz-checklist .wiz-no{color:var(--muted)}
.wiz-checklist div{flex:1}
.wiz-checklist small{display:block;color:var(--muted);font-size:.72rem}

.wiz-vis{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:0;background:none;padding:0;border-radius:0;box-shadow:none;overflow:visible}
.wiz-vis .seg__btn{flex-direction:column;align-items:flex-start;gap:6px;border:var(--bd);border-radius:var(--r-card);
  background:var(--card);padding:14px;text-align:left;box-shadow:none}
.wiz-vis .seg__btn i{font-size:1.3rem}
.wiz-vis .seg__btn.is-on{background:var(--blue);color:#fff;box-shadow:var(--sh-sm)}

.wiz-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;justify-content:center;pointer-events:none}
.wiz-bar__in{pointer-events:auto;width:100%;max-width:640px;background:var(--paper);border-top:var(--bd);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px}
.wiz-bar__back{width:50px;height:50px;flex:none;border:var(--bd);border-radius:var(--r-card);background:var(--card);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer}
.wiz-bar__back[hidden]{display:none}
.wiz-bar__next{flex:1;height:50px;border:var(--bd);border-radius:var(--r-card);background:var(--blue);color:#fff;
  font-weight:700;font-size:1rem;box-shadow:var(--sh-sm);display:flex;gap:8px;align-items:center;justify-content:center;cursor:pointer}
.wiz-bar__next:active,.wiz-bar__back:active{transform:translate(2px,2px);box-shadow:none}
.wiz-bar__next--publish{background:var(--teal)}
.wiz-bar__next[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.wiz-bar__next:active,.wiz-bar__back:active{transform:none}}

/* ===================================================================
   v111 nearby reel feed — swipe up/down between nearby pin videos
   while this pin's own uploaded video plays full screen (pin.php +
   assets/js/reel-feed.js). Colours/shapes match the rest of the site:
   --ink / --page (yellow) / --lime / --blue tokens defined at the top
   of this file.
   =================================================================== */
body.is-reelfs{overscroll-behavior:none}

/* "N more videos nearby" card under the gallery on the pin page */
.rf-watchmore{display:none;align-items:center;gap:10px;width:100%;background:var(--card);border:var(--bd);
  border-radius:var(--r-card);padding:10px 12px;box-shadow:var(--sh-sm);margin:12px 0;font-weight:700;font-size:.85rem;
  color:var(--ink);cursor:pointer;text-align:left;font-family:inherit}
.rf-watchmore:not([hidden]){display:flex}
.rf-wm__thumbs{display:flex;flex:none}
.rf-wm__thumbs b{width:22px;height:30px;border-radius:5px;border:1.5px solid var(--ink);margin-right:-8px;background:var(--card-2) center/cover no-repeat;flex:none}
.rf-wm__label{flex:1}
.rf-wm__caret{font-size:1rem;color:var(--muted)}

/* counter pill + first-time hint — fixed above both the hero and the overlay */
.rf-counter{position:fixed;top:20px;z-index:2020;left:calc((100vw - var(--colw, 100vw)) / 2 + 112px);
  background:rgba(0,0,0,.55);color:#fff;border-radius:999px;padding:7px 12px;font-size:.72rem;font-weight:700;
  display:flex;gap:6px;align-items:center;white-space:nowrap;pointer-events:none}
.rf-counter[hidden]{display:none}
.rf-hint{position:fixed;left:50%;bottom:22vh;transform:translateX(-50%);z-index:2020;background:rgba(0,0,0,.6);
  color:#fff;border-radius:16px;padding:10px 16px;font-size:.78rem;font-weight:700;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
.rf-hint[hidden]{display:none}
.rf-hint i{font-size:22px;animation:rfHintBob 1.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rf-hint i{animation:none}}
@keyframes rfHintBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* the overlay itself: a 9:16 column on black, same size/position as the hero in is-reelfs */
.rf-overlay{position:fixed;top:0;bottom:0;left:0;right:0;margin:0 auto;width:var(--colw, 100vw);
  background:#000;z-index:2010;overflow:hidden;touch-action:none;
  transform:translateY(100%);transition:transform .22s ease}
@media (prefers-reduced-motion:reduce){.rf-overlay{transition:none}}
.rf-overlay.is-open{transform:translateY(0)}
.rf-stage{position:absolute;inset:0}
.rf-stage.rf-bump-up{animation:rfBumpUp .22s ease-out}
.rf-stage.rf-bump-down{animation:rfBumpDown .22s ease-out}
@keyframes rfBumpUp{0%{transform:translateY(18px);opacity:.4}100%{transform:translateY(0);opacity:1}}
@keyframes rfBumpDown{0%{transform:translateY(-18px);opacity:.4}100%{transform:translateY(0);opacity:1}}

.rf-video-view{position:absolute;inset:0}
.rf-video-view[hidden]{display:none}
.rf-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}

/* Bunny Stream processing overlay — shown on a load error for a Bunny (.m3u8) video,
   e.g. right after upload while it's still encoding (~1-3 min). assets/js/app.js
   (SM.attachVideo) inserts/toggles this inside the video's own positioned parent. */
.sm-vid-processing{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;
  background:var(--ink);color:var(--card);font-family:var(--font-ui)}
.sm-vid-processing[hidden]{display:none}
.sm-vid-processing i{font-size:1.6rem;color:var(--page)}
.sm-vid-processing span{font-size:.92rem;font-weight:700;max-width:220px;line-height:1.3}

/* v124: owner-only "getting ready for your followers" status bar above a pin whose reel
   is still encoding on Bunny (api/reel-status.php polled every 3s). */
.sm-reel-ownerstatus{display:flex;align-items:center;gap:8px;border:var(--bd);border-radius:10px;
  background:var(--page);color:var(--ink);font-weight:700;font-size:.88rem;padding:10px 14px;
  margin-top:10px;box-shadow:var(--sh-sm)}
.sm-reel-ownerstatus i{font-size:1.1rem;flex:none}
.sm-reel-ownerstatus.is-ready{background:var(--lime)}
/* moving progress bar (owner status bar + "getting this reel ready" overlay): stripes keep
   sliding even while the % waits on Bunny, so it never looks frozen */
.sm-reel-ownerstatus{flex-wrap:wrap}
.sm-reel-ownerstatus__bar{flex-basis:100%;margin-top:2px}
.sm-reel-ownerstatus.is-ready .sm-reel-ownerstatus__bar{display:none}
.sm-progress{display:block;width:100%;max-width:240px;height:10px;border:2px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.sm-reel-ownerstatus .sm-progress{max-width:none}
.sm-progress__fill{display:block;height:100%;width:4%;background-color:var(--blue);
  background-image:linear-gradient(45deg,rgba(255,255,255,.35) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 75%,transparent 75%);
  background-size:16px 16px;animation:smProgStripes .8s linear infinite;transition:width .4s ease}
@keyframes smProgStripes{from{background-position:0 0}to{background-position:16px 0}}
@media (prefers-reduced-motion:reduce){.sm-progress__fill{animation:none}}
.rf-scrim{position:absolute;inset:0;width:100%;border:0;padding:0;cursor:pointer;z-index:4;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.2) 34%,transparent 52%)}
.rf-top{position:absolute;top:16px;left:16px;right:16px;z-index:10;display:flex;gap:8px}
.rf-vbtn{width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.5);color:#fff;
  font-size:1.15rem;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.rf-vbtn:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.rf-side{position:absolute;right:14px;bottom:150px;z-index:10;display:flex;flex-direction:column;gap:12px}
.rf-side-ico.pin-card__act--save.is-on{color:var(--blue);background:rgba(255,255,255,.92)}
.rf-foot{position:absolute;left:16px;right:70px;bottom:24px;padding-bottom:env(safe-area-inset-bottom);
  z-index:9;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none}
.rf-foot :is(a,button){pointer-events:auto}
.rf-tagline{font-family:var(--font-display);font-weight:800;font-size:1.05rem;line-height:1.15;margin:0 0 6px;opacity:.9}
.rf-place{font-size:.82rem;font-weight:700;margin:0 0 8px;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.rf-place i{color:var(--lime)}
.rf-dist{display:inline-flex;align-items:center;gap:4px;background:var(--lime);color:var(--ink);border:2px solid var(--ink);
  border-radius:999px;padding:2px 8px;font-size:.7rem;font-weight:700;margin-left:4px;text-shadow:none}
.rf-by{display:flex;gap:7px;align-items:center;font-size:.8rem}
.rf-av{width:24px;height:24px;border-radius:50%;background:var(--page);border:2px solid #fff;display:flex;
  align-items:center;justify-content:center;color:var(--ink);font-size:12px;overflow:hidden;flex:none}
.rf-av img{width:100%;height:100%;object-fit:cover}
.rf-verified{color:var(--blue);font-size:.9em}
.rf-openpin{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:var(--page);color:var(--ink);
  border:2px solid var(--ink);border-radius:999px;padding:7px 13px;font-weight:700;font-size:.8rem;
  box-shadow:3px 3px 0 var(--ink);text-shadow:none;text-decoration:none}
.rf-prog{position:absolute;left:0;right:0;bottom:env(safe-area-inset-bottom);height:16px;z-index:10;cursor:pointer}
.rf-prog::before,.rf-prog span{content:"";position:absolute;left:0;bottom:6px;height:3px;border-radius:2px}
.rf-prog::before{right:0;background:rgba(255,255,255,.3)}
.rf-prog span{width:0;background:#fff}

/* end card */
.rf-end-view{position:absolute;inset:0;background:#111;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:28px;text-align:center;color:#fff}
.rf-end-view[hidden]{display:none}
.rf-end-ic{font-size:44px;color:var(--page)}
.rf-end-view h3{font-family:var(--font-display);margin:0;font-size:1.2rem}
.rf-end-view p{margin:0;font-size:.85rem;opacity:.8;max-width:280px}
.rf-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--ink);
  border-radius:999px;padding:10px 18px;font-weight:700;font-size:.85rem;box-shadow:3px 3px 0 #000;width:100%;
  max-width:280px;cursor:pointer;text-decoration:none;font-family:inherit}
.rf-btn--y{background:var(--page);color:var(--ink)}
.rf-btn--w{background:#fff;color:var(--ink)}

/* v112: in full screen, the pin you opened looks exactly like the nearby videos —
   side buttons (Plan, Share, Directions) round, bottom-right, same spot as .rf-side;
   tagline / place / creator line the same smaller size as .rf-foot; Open pin button. */
body.is-reelfs .pinpage .mbar--float{top:auto;bottom:150px;right:calc((100vw - var(--colw)) / 2 + 14px);padding:0}
body.is-reelfs .pinpage .mbar--float > :not(.pinA__tools){display:none}
body.is-reelfs .pinA__tools{gap:12px}
body.is-reelfs .pinA__hero .pinA__foot{left:0;right:54px;padding-left:16px;padding-right:16px}
body.is-reelfs .pinA__hero .pinA__headline{font-size:1.05rem;line-height:1.15;margin:0 0 6px;opacity:.9}
body.is-reelfs .pinA__hero .pinA__title--place{font-size:.82rem;margin:0 0 8px}
body.is-reelfs .pinA__hero .pinA__by,body.is-reelfs .pinA__hero .pinA__byid{gap:7px}
body.is-reelfs .pinA__hero .pinA__byid img,body.is-reelfs .pinA__hero .pinA__byav{width:24px;height:24px;border-width:2px;font-size:12px}
body.is-reelfs .pinA__hero .pinA__byn .n{font-family:var(--font-ui);font-size:.8rem;font-weight:700;gap:4px}
body.is-reelfs .pinA__hero .pinA__byn .h{display:none}
.pinA__openpin{display:none}
body.is-reelfs .pinA__hero .pinA__openpin{display:inline-flex;cursor:pointer;font-family:inherit}

/* v113: full-screen side buttons use the pin page look (white box, ink border, hard shadow) and
   its order (Share, Directions, Plan) — for this pin's own video and for the nearby videos —
   still at the bottom-right spot. The "N more videos nearby" card sits above "More from". */
body.is-reelfs .pinA__tools .mbar__ico{min-width:0;min-height:0;padding:0}
.rf-side .rf-side-ico{width:40px;height:40px;border-radius:10px;background:var(--card);border:var(--bd);color:var(--ink);
  box-shadow:var(--sh-sm);font-size:1.1rem;text-decoration:none}
.rf-side .pin-card__act--save{order:1}
.rf-side .rf-side-ico.pin-card__act--save.is-on{color:var(--blue);background:var(--card)}
.rf-watchmore-wrap:has(> .rf-watchmore[hidden]){display:none}

/* ===================================================================
   v128 — dedicated full-screen Reels page (reels.php + assets/js/reels.js).
   body.is-reelfs (see above) already gives us the fixed black backdrop that
   hides the header, the --colw 9:16 centred column and overflow:hidden on
   <body>; this block is just the page's own scroll-snap feed + chrome, built
   from the same .rf-* parts (foot/side/tagline/place/counter/hint) as the
   pin-page reel feed so both look identical. */
.reels-feed{position:fixed;inset:0;margin:0 auto;width:var(--colw,100vw);z-index:2010;
  background:#000;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;
  scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch}
.reels-feed[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.reels-feed{scroll-behavior:auto}}

.reels-slide{position:relative;height:100vh;width:100%;scroll-snap-align:start;scroll-snap-stop:always;background:#000;overflow:hidden}
@supports(height:100dvh){.reels-slide{height:100dvh}}
.reels-slide .rf-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.reels-slide .rf-scrim{position:absolute;inset:0;z-index:4;width:100%;border:0;padding:0;cursor:pointer;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.2) 34%,transparent 52%)}
.reels-slide .rf-foot{position:absolute;left:16px;right:70px;bottom:24px;padding-bottom:env(safe-area-inset-bottom);
  z-index:9;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none}
.reels-slide .rf-foot :is(a,button){pointer-events:auto}
.reels-slide .rf-side{position:absolute;right:14px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:10;   /* Instagram-style: column starts at the bottom, level with the caption */
  display:flex;flex-direction:column;gap:10px}   /* v131: tightened for the 2-button Category+Distance column on small phones (360x640) */
.reels-slide .rf-handle{color:#fff;font-weight:700;text-decoration:none}
.reels-slide .rf-handle:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

/* close (top-left) + mute (top-right) — same round dark pill as .rf-vbtn */
.reels-top{position:fixed;top:calc(16px + env(safe-area-inset-top));left:0;right:0;z-index:2030;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 calc((100vw - var(--colw,100vw)) / 2 + 16px);pointer-events:none}
.reels-top > *{pointer-events:auto}
.reels-close{width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.5);color:#fff;
  font-size:1.2rem;display:flex;align-items:center;justify-content:center;cursor:pointer}
.reels-close:focus-visible,.reels-mute:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.reels-mute[hidden]{display:none}

/* loading / empty states — full black screen like the feed itself */
.reels-loading,.reels-empty{position:fixed;inset:0;z-index:2010;background:#000;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:28px}
.reels-loading[hidden],.reels-empty[hidden]{display:none}
.reels-skel{width:min(240px,62vw);aspect-ratio:9/16;border-radius:var(--r-card);
  background:linear-gradient(100deg,#111 30%,#1d1d1d 50%,#111 70%);background-size:200% 100%;
  animation:reelsShimmer 1.4s infinite}
@media (prefers-reduced-motion:reduce){.reels-skel{animation:none}}
@keyframes reelsShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.reels-loading p{font-size:.9rem;opacity:.85}
.reels-empty i{font-size:44px;color:var(--page)}
.reels-empty h2{font-family:var(--font-display);margin:0;font-size:1.25rem}
.reels-empty p{margin:0;font-size:.88rem;opacity:.8;max-width:280px}

/* category icon badge on each reel's overlay, same colour-token convention as
   explore.php's .pill--cat chips (cat_vars_style(): --cat / --cat-ink). */
.rf-catbadge{display:inline-flex;align-items:center;gap:4px;background:var(--cat,var(--card));
  color:var(--cat-ink,var(--ink));border:1.5px solid rgba(0,0,0,.25);border-radius:999px;
  padding:3px 9px 3px 7px;font-size:.68rem;font-weight:700;margin-bottom:6px;text-shadow:none}

/* v131: the "1 of N" counter pill was removed from reels.php entirely (the
   Category/Distance buttons show the active filter now) — top bar is just
   close + mute. No reels-specific override of the shared .rf-counter base
   rule (above) is needed any more; that base rule still belongs to
   pin.php's own reel-feed.js counter and must keep working unchanged. */
.reels-empty .btn{width:100%;max-width:280px}
.reels-empty .btn[hidden]{display:none}

/* ===================================================================
   v131 — "2 buttons" layout: Category and Distance are their own round
   buttons at the bottom of each slide's .rf-side column (under Share /
   Directions / Plan, a thin separator above, a small label under each —
   same spot/style as the other .rf-side-ico buttons), each opening its
   own panel inside the shared bottom sheet (#reelsSheet swaps content;
   see assets/js/reels.js). Replaces the single Filter-button v130 design.
   =================================================================== */
.rf-sep{width:24px;height:2px;background:rgba(255,255,255,.35);align-self:center;margin:2px 0;order:2}
.rf-filterwrap{display:flex;flex-direction:column;align-items:center;gap:3px}   /* below Plan (order:1) / separator (order:2) */
.rf-catwrap{order:3}
.rf-kmwrap{order:4}
.rf-catbtn,.rf-kmbtn{position:relative}
.rf-catbtn.is-on,.rf-kmbtn.is-on{background:var(--lime);color:var(--ink)}
.rf-filterlbl{font-size:.6rem;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);
  max-width:56px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}

/* backdrop dims the video (not the sheet) while the sheet is open */
.reels-sheet-backdrop{position:fixed;inset:0;margin:0 auto;width:var(--colw,100vw);z-index:2040;
  background:rgba(0,0,0,.45)}
.reels-sheet-backdrop[hidden]{display:none}

.reels-sheet{position:fixed;left:0;right:0;bottom:0;margin:0 auto;width:var(--colw,100vw);z-index:2050;
  background:var(--card,#fff);color:var(--ink);border-top:3px solid var(--ink);
  border-radius:22px 22px 0 0;padding:10px 16px calc(16px + env(safe-area-inset-bottom));
  max-height:85vh;display:flex;flex-direction:column;gap:2px;
  transform:translateY(100%);transition:transform .3s ease;box-shadow:0 -4px 0 rgba(0,0,0,.08)}
.reels-sheet[hidden]{display:none}
.reels-sheet.is-open{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.reels-sheet{transition:none}}
.reels-sheet__grab{width:100%;background:none;border:0;padding:6px 0 10px;display:flex;justify-content:center;cursor:pointer}
.reels-sheet__grab span{width:40px;height:4px;border-radius:4px;background:#ccc}
.reels-sheet__head{display:flex;justify-content:flex-end;align-items:center;margin-bottom:2px}
.reels-sheet__reset{background:none;border:0;color:var(--blue);font-weight:700;font-size:.82rem;
  padding:6px 2px;cursor:pointer;font-family:inherit}
.reels-sheet__scroll{overflow-y:auto;max-height:60vh;padding-bottom:4px}
.reels-sh{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted,#666);margin:10px 0 8px}
.reels-sh:first-child{margin-top:0}

.reels-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.reels-gi{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.68rem;font-weight:700;
  background:none;border:0;padding:0;cursor:pointer;color:var(--ink);font-family:inherit}
.reels-gi b{width:46px;height:46px;border-radius:14px;border:2px solid var(--ink);display:flex;
  align-items:center;justify-content:center;font-size:1.3rem;background:#fff;font-style:normal}
.reels-gi.is-sel b{background:var(--cat,#ff7a1a);color:var(--cat-ink,#fff);box-shadow:2px 2px 0 var(--ink)}
.reels-gi[data-cat="0"].is-sel b{background:var(--lime);color:var(--ink)}
.reels-gi:focus-visible b{outline:3px solid var(--lime);outline-offset:2px}

/* distance panel: a vertical list of rows ("Within 2 km" … "Anywhere"),
   selected row lime with a check mark at the end — reels-filter-preview.html's
   kmSheet(). Picking a row only updates the draft; "Show reels" applies it. */
.reels-kmlist{display:flex;flex-direction:column;gap:2px}
.reels-mi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:0;border-radius:10px;padding:11px 10px;background:none;color:var(--ink);
  font-family:inherit;font-weight:700;font-size:.88rem;cursor:pointer}
.reels-mi i:first-child{font-size:1.15rem;width:22px;text-align:center;flex:none}
.reels-mi__chk{margin-left:auto;opacity:0;flex:none}
.reels-mi.is-sel{background:var(--lime)}
.reels-mi.is-sel .reels-mi__chk{opacity:1}
.reels-mi:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}

.reels-sheet__apply{margin-top:14px;background:var(--ink);color:#fff;text-align:center;
  border:0;border-radius:999px;padding:13px;font-weight:800;font-size:.9rem;cursor:pointer;
  font-family:inherit;width:100%}

/* ===================================================================
   v129/v130 — auto-fade: full opacity on open / first play, fades low
   after ~5s idle, any tap/move/key brings it back. Never while the
   filter sheet is open, and the sheet itself is never faded. Opacity
   only — pointer-events stay on, so the tap that wakes the UI also
   still lands on whatever it tapped. */
.reels-top,.reels-slide .rf-foot,.reels-slide .rf-side{
  transition:opacity .35s ease}
.reels-root.is-faded .reels-top,
.reels-root.is-faded .reels-slide .rf-side{opacity:.35}
.reels-root.is-faded .reels-slide .rf-foot{opacity:.55}
@media (prefers-reduced-motion:reduce){
  .reels-top,.reels-slide .rf-foot,.reels-slide .rf-side{transition:none}
}

/* v292: pin moderation badge (pin_state_badge() in inc/pin_visibility.php) — admin/owner views only */
.pin-state{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:.72rem;line-height:1.2;padding:2px 8px;border:2px solid var(--ink,#111);border-radius:999px;white-space:nowrap;vertical-align:middle;text-transform:none;letter-spacing:0}
.pin-state i{font-size:.85rem}
.pin-state--deleted_user,.pin-state--removed_admin,.pin-state--deleted,.pin-state--hidden_admin{background:#ffe9e7;color:#c4000f}
.pin-state--draft{background:#fff3c4;color:#7a5a00}
.pin-state--processing,.pin-state--private{background:#eef0f3;color:#3a3f47}
.pin-state--live{background:#e5f7ec;color:#0b7a3b}
.vcard .pin-state{position:absolute;top:8px;right:8px;z-index:3}
/* reel controls: 44px tap area, same 40px look (buttons are 8px apart, so the areas never overlap) */
body.is-reelfs .pinA__vbtn::after{content:'';position:absolute;inset:-2px;border-radius:50%}