/* Perceived-speed + small UX helpers (assets/js/components/perf.js, feed skeletons). */
.pb-skel { pointer-events: none; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.pb-skel__row { display: flex; align-items: center; gap: 12px; }
.pb-skel__dot { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.pb-skel__ln { display: block; height: 12px; border-radius: 6px; width: 100%; }
.pb-skel__img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--pb-r-lg, 16px); }
.pb-skel__dot, .pb-skel__ln, .pb-skel__img { background: linear-gradient(90deg, #f1eee6 25%, #f8f6f0 37%, #f1eee6 63%); background-size: 400% 100%; animation: pb-shimmer 1.3s ease infinite; }
@keyframes pb-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Thin progress bar while the next page loads */
.pb-navbar { position: fixed; z-index: 2000; top: 0; left: 0; height: 3px; width: 0; background: var(--pb-primary, #906d02); box-shadow: 0 0 8px rgba(144, 109, 2, .5); opacity: 0; transition: width .4s ease, opacity .25s ease; pointer-events: none; }
.pb-navbar.is-on { opacity: 1; width: 78%; transition: width 6s cubic-bezier(.1, .7, .2, 1); }

/* Back to top */
.pb-totop { position: fixed; z-index: 90; right: 16px; bottom: 92px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: var(--pb-primary, #906d02); box-shadow: 0 6px 22px rgba(40, 28, 0, .22); display: flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.pb-totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 900px) { .pb-totop { bottom: 28px; right: 24px; } }

/* Offline / back-online banner */
.pb-net { position: fixed; z-index: 2100; left: 50%; top: 12px; transform: translate(-50%, -140%); padding: 10px 18px; border-radius: 999px; background: #1d1d1f; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 8px 28px rgba(0, 0, 0, .3); transition: transform .3s ease; max-width: calc(100vw - 24px); }
.pb-net.is-on { transform: translate(-50%, 0); }
.pb-net--ok { background: var(--pb-green, #1f9d4c); }

/* Tap feedback + keyboard focus that is always visible */
a, button, .pb-btn { -webkit-tap-highlight-color: transparent; }
button:active, .pb-btn:active, .pb-tab:active { transform: scale(.97); }
:focus-visible { outline: 2px solid var(--pb-primary, #906d02); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Share sheet (PB.share) ── */
.pb-sharesheet{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:16px}
.pb-sharesheet__bd{position:absolute;inset:0;background:rgba(17,24,39,.45)}
.pb-sharesheet__box{position:relative;width:min(420px,100%);background:#fff;border-radius:20px;padding:16px 16px 18px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.pb-sharesheet__hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:16px}
.pb-sharesheet__hd button{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:#6b7280}
.pb-sharesheet__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pb-sharesheet__grid a,.pb-sharesheet__grid button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:14px;background:#fff7ed;border:0;color:#9a3412;font:600 13px/1.2 inherit;font-family:inherit;text-decoration:none;cursor:pointer}
.pb-sharesheet__grid a:hover,.pb-sharesheet__grid button:hover{background:#ffedd5}
.pb-sharesheet__grid i{font-size:22px}
@media(max-width:520px){.pb-sharesheet{align-items:flex-end;padding:0}.pb-sharesheet__box{border-radius:20px 20px 0 0;width:100%}}