/* ==========================================================================
   The Wall (community-wall.html)
   Mobile-first. Consumes tokens.css; defines no brand colour of its own.
   Blue is reserved for things you can press. Tags and badges are ink/grey.
   ========================================================================== */

:root {
  --cw-like: #e11d48;           /* filled heart only */
  --cw-top-h: 56px;
  --cw-filter-h: 52px;
  --cw-safe-b: env(safe-area-inset-bottom, 0px);
  --cw-safe-t: env(safe-area-inset-top, 0px);
  --cw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--gs-bg);
  color: var(--gs-ink);
  font-family: var(--gs-font-sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
body.cw-locked { overflow: hidden; }
button { font: inherit; color: inherit; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cw-hide { display: none !important; }
.cw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--gs-blue); outline-offset: 2px; border-radius: 6px; }

.cw-skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }
.cw-skip:focus { left: 8px; }

/* ---------- Top bar ---------- */
.cw-top {
  position: sticky; top: 0; z-index: 30;
  height: calc(var(--cw-top-h) + var(--cw-safe-t));
  padding: var(--cw-safe-t) 8px 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--gs-line-soft);
}
.cw-top__back {
  justify-self: start; display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px; padding: 0 8px; color: var(--gs-blue); text-decoration: none; font-weight: 500;
}
.cw-top__back svg { width: 22px; height: 22px; stroke-width: 2.2; }
.cw-top__title {
  margin: 0; font-family: var(--gs-font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gs-black);
}
.cw-top__actions { justify-self: end; display: flex; gap: 2px; }
.cw-icon-btn {
  position: relative; width: 44px; height: 44px; border: 0; background: none; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--gs-ink);
  transition: background var(--gs-transition-fast);
}
.cw-icon-btn:active { background: var(--gs-line-soft); }
.cw-count {
  position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--gs-ink); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.cw-count:empty { display: none; }

/* ---------- Filters ---------- */
.cw-filters {
  position: sticky; top: calc(var(--cw-top-h) + var(--cw-safe-t)); z-index: 25;
  background: rgba(245, 245, 247, 0.92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.cw-filters__row {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 10px 16px; scroll-padding: 16px;
}
.cw-filters__row::-webkit-scrollbar { display: none; }
.cw-chip {
  flex: none; height: 32px; padding: 0 14px; border-radius: var(--gs-radius-pill);
  border: 0; background: #fff; color: var(--gs-ink-soft); font-size: 14px; font-weight: 500;
  cursor: pointer; white-space: nowrap; box-shadow: 0 0 0 1px var(--gs-line-soft) inset;
  transition: background var(--gs-transition-fast), color var(--gs-transition-fast);
}
.cw-chip[aria-selected="true"] { background: var(--gs-ink); color: #fff; box-shadow: none; }

/* ---------- Main / states ---------- */
.cw-main { max-width: 600px; margin: 0 auto; padding-bottom: calc(96px + var(--cw-safe-b)); outline: none; }
.cw-main.is-grid { max-width: 960px; }
.cw-state:empty { display: none; }
.cw-state { padding: 56px 24px; text-align: center; color: var(--gs-ink-soft); }
.cw-state h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--gs-ink); letter-spacing: -0.01em; }
.cw-state p { margin: 0 auto 18px; max-width: 320px; }
.cw-state svg { width: 40px; height: 40px; color: var(--gs-grey); margin-bottom: 10px; stroke-width: 1.4; }
.cw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: var(--gs-radius-pill); border: 0;
  background: var(--gs-blue); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background var(--gs-transition-fast), transform var(--gs-transition-fast);
}
.cw-btn:hover { background: var(--gs-blue-hover); }
.cw-btn:active { transform: scale(0.98); }
.cw-btn:disabled { background: var(--gs-line); color: #fff; cursor: not-allowed; }
.cw-link { border: 0; background: none; padding: 6px 4px; color: var(--gs-blue); font-weight: 600; cursor: pointer; }
.cw-link--danger { color: var(--gs-danger); }
.cw-link--muted { color: var(--gs-muted); font-weight: 500; }
.cw-sentinel { height: 1px; }
.cw-end { text-align: center; color: var(--gs-muted); font-size: 13px; padding: 24px 0; margin: 0; }

/* ---------- Feed card ---------- */
.cw-feed { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.cw-post { background: var(--gs-surface); }
@media (min-width: 600px) {
  .cw-feed { gap: 20px; padding: 12px 0; }
  .cw-post { border-radius: var(--gs-radius-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--gs-line-soft); }
}
.cw-post__head { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; }
.cw-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gs-line-soft); color: var(--gs-ink-soft); font-size: 13px; font-weight: 700;
}
.cw-avatar--staff { background: var(--gs-black); color: #fff; }
.cw-post__who { flex: 1; min-width: 0; }
.cw-post__name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.cw-post__name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-post__meta { font-size: 12px; color: var(--gs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-badge {
  flex: none; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px;
  background: var(--gs-line-soft); color: var(--gs-ink-soft);
}
.cw-badge--ink { background: var(--gs-ink); color: #fff; }
.cw-flag {
  margin: 0 14px 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  background: #fff7ed; color: #7c2d12;
}
.cw-pinned { display: flex; align-items: center; gap: 4px; padding: 10px 14px 0; font-size: 12px; font-weight: 600; color: var(--gs-ink-soft); }
.cw-pinned svg { width: 14px; height: 14px; }

/* Media carousel */
.cw-media { position: relative; background: #0b0b0c; user-select: none; -webkit-user-select: none; }
.cw-media__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.cw-media__track::-webkit-scrollbar { display: none; }
.cw-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative; aspect-ratio: var(--ar, 4 / 5); max-height: 75vh; }
.cw-slide img, .cw-slide video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0b0b0c; }
.cw-slide.is-loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, #161618 30%, #232326 50%, #161618 70%); background-size: 200% 100%;
  animation: cw-shimmer 1.2s linear infinite;
}
@keyframes cw-shimmer { to { background-position: -200% 0; } }
.cw-media__counter {
  position: absolute; top: 12px; right: 12px; padding: 3px 9px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none;
}
.cw-dots { display: flex; justify-content: center; gap: 5px; padding: 10px 0 0; }
.cw-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gs-line); transition: background var(--gs-transition-fast), transform var(--gs-transition-fast); }
.cw-dots i.is-on { background: var(--gs-ink); transform: scale(1.15); }
.cw-sound {
  position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, 0.55); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.cw-sound svg { width: 16px; height: 16px; }
.cw-burst {
  position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  color: #fff; pointer-events: none; opacity: 0; filter: drop-shadow(0 4px 18px rgba(0,0,0,.35));
}
.cw-burst svg { width: 96px; height: 96px; fill: currentColor; stroke: none; }
.cw-burst.is-on { animation: cw-burst 0.8s var(--cw-ease); }
@keyframes cw-burst {
  0% { opacity: 0; transform: scale(0.3); } 15% { opacity: 0.95; transform: scale(1.1); }
  30% { transform: scale(0.95); } 70% { opacity: 0.95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1) translateY(-10px); }
}

/* Action row */
.cw-actions { display: flex; align-items: center; padding: 4px 6px 0; }
.cw-actions .cw-icon-btn { width: 44px; height: 44px; }
.cw-actions .cw-spacer { flex: 1; }
.cw-like.is-on { color: var(--cw-like); }
.cw-like.is-on svg { fill: currentColor; stroke: currentColor; }
.cw-like.is-pop svg { animation: cw-pop 0.35s var(--cw-ease); }
@keyframes cw-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.cw-post__body { padding: 0 14px 14px; }
.cw-likes { font-weight: 600; font-size: 14px; margin: 2px 0 4px; }
.cw-caption { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.cw-caption b { font-weight: 600; margin-right: 4px; }
.cw-caption.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cw-more-text { border: 0; background: none; padding: 0; color: var(--gs-muted); cursor: pointer; font-size: 14px; }
.cw-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cw-tag {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px;
  border-radius: 6px; background: var(--gs-line-soft); color: var(--gs-ink-soft); font-size: 12px; font-weight: 600;
}
.cw-tag svg { width: 12px; height: 12px; }
.cw-viewcomments { display: block; border: 0; background: none; padding: 6px 0 0; color: var(--gs-muted); cursor: pointer; font-size: 14px; text-align: left; }

/* ---------- Grid ---------- */
.cw-feed.is-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px 0 0; }
@media (min-width: 600px) { .cw-feed.is-grid { gap: 4px; padding: 4px 16px 0; } }
.cw-tile { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: #e8e8ed; cursor: pointer; overflow: hidden; }
.cw-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--gs-transition-slow); }
@media (hover: hover) { .cw-tile:hover img { transform: scale(1.03); } }
.cw-tile__icon { position: absolute; top: 6px; right: 6px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.cw-tile__icon svg { width: 18px; height: 18px; }
.cw-tile__dur { position: absolute; left: 6px; bottom: 6px; color: #fff; font-size: 12px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.cw-tile__pin { position: absolute; top: 6px; left: 6px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.cw-tile__pin svg { width: 16px; height: 16px; }

/* Skeleton */
.cw-skel { background: var(--gs-surface); padding-bottom: 14px; }
.cw-skel__row { display: flex; gap: 10px; align-items: center; padding: 12px 14px; }
.cw-skel__c { width: 36px; height: 36px; border-radius: 50%; }
.cw-skel__l { height: 10px; border-radius: 5px; }
.cw-skel__m { aspect-ratio: 4 / 5; }
.cw-skel .sh { background: linear-gradient(100deg, #ececf0 30%, #f6f6f8 50%, #ececf0 70%); background-size: 200% 100%; animation: cw-shimmer 1.2s linear infinite; }

/* ---------- FAB + pills ---------- */
.cw-fab {
  position: fixed; right: 20px; bottom: calc(20px + var(--cw-safe-b)); z-index: 35;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--gs-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.35), 0 2px 6px rgba(0,0,0,.12);
  transition: transform var(--gs-transition-fast), background var(--gs-transition-fast);
}
.cw-fab svg { width: 26px; height: 26px; stroke-width: 2.4; }
.cw-fab:hover { background: var(--gs-blue-hover); }
.cw-fab:active { transform: scale(0.94); }
.cw-newpill {
  position: fixed; left: 50%; top: calc(var(--cw-top-h) + var(--cw-filter-h) + 12px + var(--cw-safe-t)); z-index: 32;
  transform: translateX(-50%); height: 36px; padding: 0 16px; border-radius: var(--gs-radius-pill); border: 0;
  background: var(--gs-blue); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); animation: cw-drop 0.35s var(--cw-ease);
}
@keyframes cw-drop { from { opacity: 0; transform: translate(-50%, -12px); } }

.cw-toast {
  position: fixed; left: 50%; bottom: calc(92px + var(--cw-safe-b)); z-index: 90;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 14px;
  background: rgba(29, 29, 31, 0.94); color: #fff; font-size: 14px; font-weight: 500; text-align: center;
  transition: opacity var(--gs-transition), transform var(--gs-transition);
}
.cw-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Sheets & dialogs ---------- */
.cw-scrim {
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: flex-end; justify-content: center;
  animation: cw-fade 0.2s ease;
}
@keyframes cw-fade { from { opacity: 0; } }
.cw-sheet {
  width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 18px 18px 0 0; padding-bottom: var(--cw-safe-b);
  animation: cw-rise 0.32s var(--cw-ease); outline: none;
}
@keyframes cw-rise { from { transform: translateY(40px); opacity: 0.4; } }
@media (min-width: 700px) {
  .cw-scrim { align-items: center; }
  .cw-sheet { border-radius: 18px; max-height: 86vh; }
}
.cw-grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--gs-line); margin: 8px auto 2px; flex: none; }
.cw-sheet__head {
  flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 6px 8px; min-height: 52px; border-bottom: 1px solid var(--gs-line-soft);
}
.cw-sheet__head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.cw-sheet__head > :first-child { justify-self: start; }
.cw-sheet__head > :last-child { justify-self: end; }
.cw-sheet__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.cw-sheet__foot { flex: none; border-top: 1px solid var(--gs-line-soft); padding: 8px 12px; }

/* Action sheet */
.cw-menu { list-style: none; margin: 0; padding: 6px 0 10px; }
.cw-menu button {
  width: 100%; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 20px;
  border: 0; background: none; text-align: left; font-size: 16px; cursor: pointer;
}
.cw-menu button:active { background: var(--gs-bg); }
.cw-menu svg { width: 22px; height: 22px; color: var(--gs-ink-soft); }
.cw-menu .is-danger, .cw-menu .is-danger svg { color: var(--gs-danger); }
.cw-menu__note { margin: 0; padding: 4px 20px 10px; font-size: 13px; color: var(--gs-muted); }

/* Composer */
.cw-compose .cw-sheet { max-width: 640px; }
@media (max-width: 699px) { .cw-compose .cw-sheet { max-height: 100%; height: 100%; border-radius: 0; } .cw-compose .cw-grabber { display: none; } }
.cw-strip { display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px; scrollbar-width: none; }
.cw-thumb { position: relative; flex: none; width: 104px; height: 130px; border-radius: 12px; overflow: hidden; background: var(--gs-line-soft); }
.cw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-thumb__x {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.6); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.cw-thumb__x svg { width: 14px; height: 14px; stroke-width: 2.4; }
.cw-thumb__dur { position: absolute; left: 6px; bottom: 6px; color: #fff; font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.cw-thumb__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.4); }
.cw-thumb__bar i { display: block; height: 100%; width: 0; background: var(--gs-blue); transition: width 0.2s linear; }
.cw-thumb.is-done .cw-thumb__bar i { background: var(--gs-success); }
.cw-thumb--add {
  border: 1.5px dashed var(--gs-line); background: #fff; color: var(--gs-ink-soft); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 600;
}
.cw-field { padding: 4px 16px 14px; }
.cw-field label, .cw-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gs-muted); margin-bottom: 8px; }
.cw-textarea {
  width: 100%; min-height: 84px; resize: none; border: 0; border-radius: 12px; padding: 12px 14px;
  background: var(--gs-bg); font: inherit; font-size: 16px; color: var(--gs-ink);
}
.cw-textarea:focus { outline: 2px solid var(--gs-blue); outline-offset: 0; }
.cw-counter { text-align: right; font-size: 12px; color: var(--gs-muted); margin-top: 4px; }
.cw-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-pill {
  height: 36px; padding: 0 14px; border-radius: var(--gs-radius-pill); border: 0; cursor: pointer;
  background: var(--gs-bg); color: var(--gs-ink-soft); font-size: 14px; font-weight: 500;
  box-shadow: 0 0 0 1px var(--gs-line-soft) inset;
}
.cw-pill[aria-pressed="true"] { background: var(--gs-ink); color: #fff; box-shadow: none; }
.cw-pill:disabled { opacity: 0.45; cursor: not-allowed; }
.cw-help { font-size: 13px; color: var(--gs-muted); margin: 8px 0 0; }
.cw-help a { color: var(--gs-blue); }
.cw-privacy { display: flex; gap: 10px; margin: 0 16px 16px; padding: 12px 14px; border-radius: 12px; background: var(--gs-bg); font-size: 13px; color: var(--gs-ink-soft); }
.cw-privacy svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.cw-progress { height: 3px; background: var(--gs-line-soft); }
.cw-progress i { display: block; height: 100%; width: 0; background: var(--gs-blue); transition: width 0.25s linear; }
.cw-error { margin: 0 16px 12px; padding: 10px 12px; border-radius: 10px; background: #fdecea; color: #8f2318; font-size: 14px; }

/* Comments */
.cw-comments { list-style: none; margin: 0; padding: 8px 0; }
.cw-comment { display: flex; gap: 10px; padding: 10px 16px; }
.cw-comment .cw-avatar { width: 32px; height: 32px; font-size: 12px; }
.cw-comment__main { flex: 1; min-width: 0; }
.cw-comment__line { margin: 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cw-comment__line b { font-weight: 600; margin-right: 4px; }
.cw-comment__meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--gs-muted); margin-top: 2px; }
.cw-comment__meta .cw-link { padding: 2px 0; font-size: 12px; }
.cw-comment.is-pending { opacity: 0.55; }
.cw-compose-line { display: flex; align-items: flex-end; gap: 8px; }
.cw-compose-line textarea {
  flex: 1; resize: none; max-height: 120px; min-height: 40px; border: 0; border-radius: 20px; padding: 10px 14px;
  background: var(--gs-bg); font: inherit; font-size: 16px; color: var(--gs-ink);
}
.cw-compose-line textarea:focus { outline: 2px solid var(--gs-blue); outline-offset: 0; }
.cw-compose-line .cw-link { height: 40px; }
.cw-compose-line .cw-link:disabled { color: var(--gs-line); cursor: default; }

/* Report */
.cw-radio { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px; cursor: pointer; font-size: 16px; }
.cw-radio input { width: 20px; height: 20px; accent-color: var(--gs-blue); }
.cw-report-note { margin: 4px 20px 16px; }

/* ---------- Viewer ---------- */
.cw-viewer { position: fixed; inset: 0; z-index: 70; background: #000; color: #fff; display: flex; flex-direction: column; animation: cw-fade 0.18s ease; }
.cw-viewer__top {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: calc(6px + var(--cw-safe-t)) 6px 6px;
}
.cw-viewer__top .cw-icon-btn, .cw-viewer__bar .cw-icon-btn { color: #fff; }
.cw-viewer__top .cw-icon-btn:active, .cw-viewer__bar .cw-icon-btn:active { background: rgba(255,255,255,.12); }
.cw-viewer__count { font-size: 14px; font-weight: 600; }
.cw-viewer__track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.cw-viewer__track::-webkit-scrollbar { display: none; }
.cw-viewer__slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; position: relative; }
.cw-viewer__slide img, .cw-viewer__slide video { max-width: 100%; max-height: 100%; object-fit: contain; }
.cw-viewer__bar { flex: none; padding: 8px 10px calc(10px + var(--cw-safe-b)); background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.cw-viewer__bar .cw-actions { padding: 0; }
.cw-viewer__caption { margin: 2px 6px 0; font-size: 14px; color: rgba(255,255,255,.88); max-height: 4.5em; overflow-y: auto; white-space: pre-wrap; }
.cw-viewer__caption b { color: #fff; }
.cw-viewer .cw-like.is-on { color: var(--cw-like); }
.cw-viewer__nav { display: none; }
@media (hover: hover) and (min-width: 700px) {
  .cw-viewer__nav {
    display: inline-flex; position: absolute; top: 50%; margin-top: -22px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.14); color: #fff; align-items: center; justify-content: center; cursor: pointer;
  }
  .cw-viewer__nav--prev { left: 16px; } .cw-viewer__nav--next { right: 16px; }
}

/* ---------- Review queue ---------- */
.cw-review { padding: 12px 0 0; }
.cw-review h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gs-muted); margin: 8px 16px 10px; }
.cw-review__item { background: #fff; margin: 0 0 12px; padding: 12px 14px; }
@media (min-width: 600px) { .cw-review__item { border-radius: var(--gs-radius-lg); box-shadow: 0 0 0 1px var(--gs-line-soft); } }
.cw-review__thumbs { display: flex; gap: 6px; margin: 10px 0; overflow-x: auto; }
.cw-review__thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; background: var(--gs-line-soft); }
.cw-review__reports { margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--gs-ink-soft); }
.cw-review__reports li { padding: 4px 0; }
.cw-review__actions { display: flex; gap: 18px; margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Refinements after screenshot review ---------- */
.cw-review__item .cw-post__head { padding: 0 0 4px; }
@media (min-width: 600px) {
  .cw-main { max-width: 520px; }
  .cw-filters__row { max-width: 520px; margin: 0 auto; padding-left: 0; padding-right: 0; }
  body.cw-grid .cw-filters__row { max-width: 960px; padding: 10px 16px; }
}

/* ---------- Video conversion + unplayable fallback ---------- */
.cw-note { margin: 0 16px 12px; padding: 10px 12px; border-radius: 10px; background: var(--gs-bg); color: var(--gs-ink-soft); font-size: 14px; }
.cw-noplay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.55);
}
.cw-noplay svg { width: 40px; height: 40px; opacity: 0.9; }
.cw-noplay p { margin: 0; font-size: 15px; font-weight: 500; max-width: 260px; }
.cw-noplay__btn {
  height: 40px; padding: 0 18px; border-radius: var(--gs-radius-pill); border: 0; cursor: pointer;
  background: #fff; color: var(--gs-ink); font-weight: 600; font-size: 14px;
}

/* One-time welcome card (first visit). */
.cw-intro { margin: 12px 16px 4px; padding: 20px; background: #fff; border-radius: var(--gs-radius-lg, 16px); box-shadow: 0 0 0 1px var(--gs-line-soft, #e5e7eb); }
.cw-intro h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--gs-ink, #111827); letter-spacing: -0.01em; }
.cw-intro p { margin: 0 0 16px; color: var(--gs-ink-soft, #4b5563); line-height: 1.5; }
.cw-intro__row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cw-intro__later { background: none; border: 0; padding: 8px 4px; font: inherit; font-weight: 600; color: var(--gs-ink-soft, #4b5563); cursor: pointer; }
@media (min-width: 600px) { .cw-intro { max-width: 600px; margin: 16px auto 4px; } }