body .feed-container .feed-grid .feed-card .feed-card-preview, body[data-profile-login] #profile-files-grid.feed-grid>.feed-card .feed-card-preview, #profile-files-grid .feed-card .feed-card-preview, .profile-main-content .feed-grid .feed-card .feed-card-preview {
  align-items: center;
  background: #181a1b;
  border-radius: 1rem;
  box-sizing: border-box;
  display: flex;
  height: 12.9375rem;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

body .feed-container .feed-grid .feed-card .feed-card-username, body[data-profile-login] #profile-files-grid.feed-grid>.feed-card .feed-card-username, #profile-files-grid .feed-card .feed-card-username, .profile-main-content .feed-grid .feed-card .feed-card-username {
  font-weight: 800;
  text-rendering: optimizeLegibility;
}

body .feed-container .feed-grid .feed-card, body[data-profile-login] #profile-files-grid.feed-grid>.feed-card, #profile-files-grid .feed-card, .profile-main-content .feed-grid .feed-card {
  background: #262626;
  border-radius: 0.75rem;
  border: 0.0625rem solid var(--line-strong);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 26.25rem;
  justify-content: space-between;
  max-width: 26.25rem;
  overflow: hidden;
  padding: 1rem;
  transition: transform 0.2s ease;
  width: 100%;
}

body .feed-container .feed-grid .feed-card:hover, body[data-profile-login] #profile-files-grid.feed-grid>.feed-card:hover, #profile-files-grid .feed-card:hover, .profile-main-content .feed-grid .feed-card:hover {
  transform: translateY(-0.125rem);
}

.yt-like-btn {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.yt-like-btn:hover {
  color: #789d2a;
}

.yt-like-btn.liked,
.yt-like-btn.liked:hover {
  color: #789d2a;
}

body[data-profile-login="videos"] .feed-container .feed-grid .feed-card {
  height: auto !important;
  justify-content: flex-start;
  padding: 0;
}

body[data-profile-login="videos"] .feed-container .feed-grid .feed-card .feed-card-author {
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

body[data-profile-login="videos"] .feed-container .feed-grid .feed-card .feed-card-description {
  margin-bottom: 8px;
}

body[data-profile-login="videos"] .feed-container .feed-grid .feed-card .feed-card-info {
  gap: 6px;
  justify-content: flex-start !important;
  padding: 16px;
}

body[data-profile-login="videos"] .feed-container .feed-grid .feed-card .feed-card-info-link {
  gap: 0.35rem;
}

body[data-profile-login="videos"] .feed-container .feed-grid .feed-card .feed-card-preview, body[data-profile-login="videos"] .feed-container .feed-grid .feed-card .feed-card-preview-link {
  border-radius: 0;
}

body[data-profile-login="videos"] .feed-container .feed-grid .feed-card .feed-card-stats {
  gap: 16px;
}

body[data-profile-login="videos"] .feed-container .feed-grid .feed-card .feed-card-title {
  margin-bottom: 0.35rem;
}

body[data-profile-login="feed"] .feed-container .feed-grid .feed-card {
  height: auto !important;
  justify-content: flex-start;
  padding: 0;
}

body[data-profile-login="feed"] .feed-container .feed-grid .feed-card .feed-card-author {
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

body[data-profile-login="feed"] .feed-container .feed-grid .feed-card .feed-card-description {
  margin-bottom: 8px;
}

body[data-profile-login="feed"] .feed-container .feed-grid .feed-card .feed-card-info {
  gap: 6px;
  justify-content: flex-start !important;
  padding: 16px;
}

body[data-profile-login="feed"] .feed-container .feed-grid .feed-card .feed-card-info-link {
  gap: 0.35rem;
}

body[data-profile-login="feed"] .feed-container .feed-grid .feed-card .feed-card-preview, body[data-profile-login="feed"] .feed-container .feed-grid .feed-card .feed-card-preview-link {
  border-radius: 0;
}

body[data-profile-login="feed"] .feed-container .feed-grid .feed-card .feed-card-stats {
  gap: 16px;
}

body[data-profile-login="feed"] .feed-container .feed-grid .feed-card .feed-card-title {
  margin-bottom: 0.35rem;
}

body[data-profile-login] #profile-files-grid .feed-card {
  display: flex;
  flex-direction: column;
  height: 26.25rem;
}

body[data-profile-login] #profile-files-grid .feed-card .feed-card-preview {
  align-items: center;
  display: flex;
  flex: 0 0 13.9375rem;
  height: 13.9375rem;
  justify-content: center;
  overflow: hidden;
}

body[data-profile-login] #profile-files-grid .feed-card .feed-card-preview img, body[data-profile-login] #profile-files-grid .feed-card .feed-card-preview video {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

body[data-profile-login] #profile-files-grid .feed-card-preview .listing-icon-box .listing-icon, #profile-files-grid .feed-card-preview .listing-icon-box .listing-icon {
  height: 4rem;
  max-height: 4rem;
  max-width: 4rem;
  min-height: 4rem;
  min-width: 4rem;
  object-fit: contain;
  object-position: center;
  width: 4rem;
}

body[data-profile-login]:not([data-profile-login="feed"]) #profile-files-grid.feed-grid>.feed-card {
  height: auto !important;
  justify-content: flex-start;
  padding: 0;
}

body[data-profile-login]:not([data-profile-login="feed"]) #profile-files-grid.feed-grid>.feed-card .feed-card-author {
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

body[data-profile-login]:not([data-profile-login="feed"]) #profile-files-grid.feed-grid>.feed-card .feed-card-description {
  margin-bottom: 8px;
}

body[data-profile-login]:not([data-profile-login="feed"]) #profile-files-grid.feed-grid>.feed-card .feed-card-info {
  gap: 6px;
  justify-content: flex-start !important;
  padding: 16px;
}

body[data-profile-login]:not([data-profile-login="feed"]) #profile-files-grid.feed-grid>.feed-card .feed-card-info-link {
  gap: 0.35rem;
}

body[data-profile-login]:not([data-profile-login="feed"]) #profile-files-grid.feed-grid>.feed-card .feed-card-preview {
  flex: none;
  height: 12.9375rem;
}

body[data-profile-login]:not([data-profile-login="feed"]) #profile-files-grid.feed-grid>.feed-card .feed-card-preview, body[data-profile-login]:not([data-profile-login="feed"]) #profile-files-grid.feed-grid>.feed-card .feed-card-preview-link {
  border-radius: 0;
}

body[data-profile-login]:not([data-profile-login="feed"]) #profile-files-grid.feed-grid>.feed-card .feed-card-stats {
  gap: 16px;
}

body[data-profile-login]:not([data-profile-login="feed"]) #profile-files-grid.feed-grid>.feed-card .feed-card-title {
  margin-bottom: 0.35rem;
}

#feed-grid, .feed-grid {
  align-items: start;
  box-sizing: border-box;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(18.75rem,100%), 1fr));
  justify-items: center;
  margin: 0 auto;
  max-width: 73rem;
  width: 100%;
}

#feed-grid.feed-grid, .feed-container #feed-grid, .feed-container>div>#feed-grid {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18.75rem,100%), 1fr));
  margin: 1.5rem auto 0;
  max-width: 73rem;
}

#feed-grid>.feed-card, .feed-container .feed-grid>.feed-card {
  box-sizing: border-box;
  max-width: 26.25rem;
  width: 100%;
}

#profile-files-grid .feed-card, .feed-grid .feed-card {
  margin-bottom: 0;
  margin-right: 0;
}

#profile-files-grid .feed-card-preview .listing-icon-box .listing-icon, .profile-main-content .feed-grid .feed-card-preview .listing-icon-box .listing-icon {
  display: block;
  height: 4rem;
  max-height: 4rem;
  max-width: 4rem;
  min-height: 4rem;
  min-width: 4rem;
  object-fit: contain;
  object-position: center;
  width: 4rem;
}

.empty-state {
  align-items: center;
  color: var(--ink-2,#989898);
  display: flex;
  font-size: 1.125rem;
  font-weight: 600;
  height: 12.5rem;
  justify-content: center;
  margin: 2.5rem 0;
  text-align: center;
  width: 100%;
}

.feed-card {
  align-items: unset;
  background: var(--surface);
  box-sizing: border-box;
  color: var(--ink-2,#b6c6e3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  justify-content: space-between;
  max-width: 25.8125rem;
  min-width: 0;
  position: relative;
}

.feed-card-author {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.feed-card-author a:hover .feed-card-username {
  color: #789d2a;
  text-decoration: underline;
  transform: scale(1.05);
}

.feed-card-author-date {
  color: #8f8f8f;
  cursor: help;
  font-size: 0.967rem;
  line-height: 1;
  white-space: nowrap;
}

.feed-card-avatar {
  border-radius: 50%;
  display: block;
  height: 1.5rem;
  min-height: 1.5rem;
  min-width: 1.5rem;
  object-fit: cover;
  width: 1.5rem;
}

.feed-card-comments svg, .feed-card-likes svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.feed-card-comments, .feed-card-date, .feed-card-likes, .feed-card-views {
  align-items: center;
  color: #8f8f8f;
  display: flex;
  font-size: 0.75rem;
  gap: 0.5rem;
}

.feed-card-date span {
  cursor: help;
}

.feed-card-delete {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  height: 24px;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  width: 24px;
}

.feed-card-delete img {
  filter: brightness(0) saturate(100%) invert(41%);
}

.feed-card-description {
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
  color: var(--ink-3);
  display: -webkit-box !important;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-clamp: 1 !important;
  line-height: 24px;
  margin-bottom: 12px;
  max-height: 24px !important;
  min-height: 24px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle;
}

/* Compact hashtag chip for the 1-line-clamped card description.
   The clamp above is load-bearing (card height drives the whole feed
   grid), so the chip shrinks to fit instead of the box growing.
   Computed height: 18px * 0.85 (=15.3px content, line-height 1)
   + 1px padding * 2 + 1px border * 2 = 19.3px, inside the 24px box. */
.feed-card-description .hashtag {
  border-radius: 999px;
  font-size: 0.85em;
  line-height: 1;
  padding: 1px 7px;
  vertical-align: middle;
}

/* Structural wrapper only — deliberately contributes ZERO geometry.
   Hashtags became real <a> elements, so the single <a class="feed-card-link
   feed-card-info-link"> that used to wrap title+description+stats had to be
   split into three siblings (<a> inside <a> is invalid HTML). That would
   have taken .feed-card-info from 2 flex children to 4, and with its
   `gap: 6px` (feed override line ~54, profile override line ~124) that is
   +12px on every card plus a different free-space distribution under
   `justify-content: space-between`. This wrapper restores the child count
   to 2 (author + body).

   `display: block` reproduces the old anchor exactly: that anchor was ALSO
   a block box, because `.feed-card-link { display: block }` (below) has the
   same specificity as `.feed-card-info-link { display: flex }` and comes
   later, and the markup carries both classes. So the old `gap: 0.35rem` on
   .feed-card-info-link was already inert, and title/description spacing has
   always come from their own `margin-bottom` — which survives untouched.
   Block layout also keeps margin-collapsing intact, so .feed-card-title's
   margin-bottom still collapses out through its (now wrapping) anchor and
   produces the same gap before the description.

   No padding/border/margin/gap, and no flex-grow: the old anchor was
   `flex: 0 1 auto`, and giving the wrapper anything else would change how
   `space-between` distributes free space. */
.feed-card-body {
  display: block;
}

.feed-card-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  justify-content: space-between !important;
  padding: 12px;
}

.feed-card-info-link {
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
}

.feed-card-link {
  color: inherit;
  display: block;
  text-decoration: none;
  width: 100%;
}

.feed-card-link:focus-visible {
  outline-offset: 0.1875rem;
  outline: 0.125rem solid #8ab31f;
}

.feed-card-preview {
  box-sizing: border-box;
  height: 56vw;
  max-height: 360px;
  max-width: 100% !important;
  overflow: hidden;
  width: 100% !important;
}

.feed-card-preview .listing-icon-box {
  align-items: center !important;
  background: transparent !important;
  display: flex !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}

.feed-card-preview .listing-icon-box .blurred-bg {
  filter: blur(12px) !important;
  image-rendering: pixelated !important;
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

.feed-card-preview .listing-icon-box .listing-icon {
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
  background: rgba(0,0,0,0.65) !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  height: 64px !important;
  max-height: 64px !important;
  max-width: 64px !important;
  min-height: 64px !important;
  min-width: 64px !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 14px !important;
  position: relative !important;
  width: 64px !important;
  z-index: 10 !important;
}

.feed-card-preview audio {
  height: 40px;
  width: 90%;
}

.feed-card-preview img, .feed-card-preview video {
  height: 100% !important;
  max-height: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  min-width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  pointer-events: none !important;
  width: 100% !important;
}

.feed-card-preview-link {
  border-radius: 1rem;
  display: block;
  overflow: hidden;
}

.feed-card-stats {
  align-items: center;
  color: var(--ink-4);
  display: flex;
  flex-wrap: wrap;
  font-size: 18px;
  font-weight: 500;
  gap: 6px;
  justify-content: flex-start;
  letter-spacing: 0%;
  line-height: 24px;
  min-height: 20px;
  opacity: 1;
  padding: 4px 0;
}

.feed-card-stats img {
  display: block;
  flex: 0 0 16px;
  height: var(--icon-sm) !important;
  object-fit: contain;
  width: var(--icon-sm) !important;
}

.feed-card-stats span {
  color: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0%;
  line-height: 24px;
  vertical-align: middle;
}

.feed-card-title {
  color: #ebebeb;
  color: var(--ink);
  display: block;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-card-username {
  color: #8f8f8f;
  color: var(--ink-translucent);
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 600;
  text-rendering: optimizeLegibility;
  transition: transform 0.2s ease, color 0.2s ease;
}

.feed-container {
  background: transparent;
  box-sizing: border-box;
  overflow-x: hidden;
  padding: 1.25rem 0;
  width: 100%;
}

.feed-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.feed-grid {
  align-items: start !important;
  box-sizing: border-box;
  display: grid !important;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(18.75rem,100%), 1fr));
  justify-items: stretch;
  margin-top: 1.25rem;
  max-width: 100%;
}

.feed-video-poster {
  background: #0f0f0f;
  border-radius: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.feed-video-poster img {
  display: block;
  height: 100% !important;
  min-height: 100% !important;
  min-width: 100% !important;
  object-fit: cover !important;
  width: 100% !important;
}

.filter-arrow {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.filter-dropdown {
  position: relative;
}

.filter-dropdown-btn {
  align-items: center;
  background: #262626;
  border-radius: 0.75rem;
  border: 1px solid #3a3a3a;
  color: #e0e6ed;
  cursor: pointer;
  display: flex;
  font-size: 0.9375rem;
  font-weight: 500;
  gap: 0.5rem;
  justify-content: space-between;
  min-width: 9.375rem;
  padding: 0.625rem 1rem;
  transition: all 0.2s ease;
}

.filter-dropdown-btn.active {
  background: #789d2a;
  border-color: #789d2a;
  color: #fff;
}

.filter-dropdown-btn:hover {
  background: #2e2e2e;
  border-color: #789d2a;
}

.filter-dropdown-menu {
  background: #262626;
  border-radius: 0.75rem;
  border: 1px solid #3a3a3a;
  display: none;
  left: 0;
  min-width: 100%;
  padding: 0.5rem;
  position: absolute;
  top: calc(100% + 0.5rem);
  z-index: 1000;
}

.filter-dropdown.open .filter-arrow {
  transform: rotate(180deg);
}

.filter-dropdown.open .filter-dropdown-menu {
  display: block;
}

.filter-label {
  white-space: nowrap;
}

.filter-option {
  background: transparent;
  border-radius: 0.5rem;
  border: none;
  color: #b6c6e3;
  cursor: pointer;
  display: block;
  font-size: 0.9375rem;
  padding: 0.625rem 1rem;
  text-align: left;
  transition: all 0.2s ease;
  white-space: nowrap;
  width: 100%;
}

.filter-option.active {
  background: #789d2a;
  color: #fff;
}

.filter-option:hover {
  background: #2e2e2e;
  color: #789d2a;
}

.filter-separator {
  background: #3a3a3a;
  height: 0.0625rem;
  margin: 0.35rem 0.5rem;
}

.lazy-image {
  transition: opacity 0.3s ease;
}

.lazy-loaded {
  opacity: 1;
}

.lazy-placeholder {
  align-items: center;
  animation: pulse 1.5s ease-in-out infinite alternate;
  background: #181a1b;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
}

.listing-icon, .listing-icon-box img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.listing-icon-box {
  align-items: center;
  background: var(--surface);
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.listing-icon-box .listing-icon {
  height: 4rem;
  object-fit: contain;
  width: 4rem;
}

.listing-icon-box img {
  pointer-events: none;
}

.load-more {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.load-more-btn {
  background: var(--brand);
  border-radius: 0.5rem;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: background 0.2s ease;
}

.load-more-btn:disabled {
  background: #555;
  cursor: not-allowed;
}

.nsfw-toggle-btn {
  align-items: center;
  background: #262626;
  border-radius: 0.75rem;
  border: 1px solid var(--ink-2);
  color: var(--ink-2);
  cursor: pointer;
  display: flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.375rem;
  margin-left: auto;
  padding: 0.625rem 0.875rem;
  position: relative;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nsfw-toggle-btn.nsfw-active {
  background: rgba(152,152,152,0.1);
  border-color: var(--ink-2);
  color: var(--ink-2);
}

.nsfw-toggle-btn.nsfw-active .nsfw-toggle-icon {
  -webkit-mask-image: url('/static/image/censor-icon.svg');
  mask-image: url('/static/image/censor-icon.svg');
}

.nsfw-toggle-btn.nsfw-stream {
  background: rgba(120,157,42,0.1);
  border-color: var(--brand);
  color: var(--brand);
}

.nsfw-toggle-btn.nsfw-stream .nsfw-toggle-icon {
  -webkit-mask-image: url('/static/image/view-icon.svg');
  mask-image: url('/static/image/view-icon.svg');
}

.nsfw-toggle-btn:hover {
  background: #2e2e2e;
  border-color: var(--brand);
  color: var(--brand);
}

.nsfw-toggle-icon {
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  background-color: currentColor;
  display: inline-block;
  flex-shrink: 0;
  height: 16px;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  width: 16px;
}

.nsfw-toggle-label {
  line-height: 1;
}

/* ── Active tag filter, as a fourth control in the .feed-filters row ──
   Lives here rather than in utilities.css so the whole toolbar row —
   .filter-dropdown-btn, .nsfw-toggle-btn and this — shares one file and
   one set of breakpoints. Keeping it in utilities.css would have meant
   duplicating this file's 767px/1024px media queries somewhere else and
   letting them drift.

   Geometry is copied from .filter-dropdown-btn (above) EXACTLY —
   font-size, padding, border-width, border-radius, gap, display,
   align-items — because a 1px height difference between siblings in a
   flex-wrap row is glaring. Treatment is the outline variant: the same
   --surface fill as an inactive control, with brand border + brand text.
   The project already uses precisely this "applied, but quiet" language
   in this same row — see .nsfw-toggle-btn.nsfw-stream (~line 730), which
   is brand border + brand text rather than the loud solid fill of
   .filter-dropdown-btn.active.

   NO min-width. The three dropdowns carry min-width: 9.375rem because
   they use justify-content: space-between to pin a ▼ to the right edge,
   so equal widths read as deliberate. This control is not a dropdown: it
   shrink-wraps a tag of 1-30 characters. At 150px a "#42" would sit in a
   mostly empty box with the ✕ stranded far from it, and a long tag would
   blow past 150px anyway — so min-width buys nothing and costs emptiness.
   .nsfw-toggle-btn, the row's other non-dropdown control, likewise has none.

   Interaction is design variant "4a": the whole chip is ONE click target
   that clears the filter, and the ✕ is collapsed to zero width at rest so
   the control reads as a tag rather than as a button-with-an-icon. It
   slides open on hover AND focus-visible.

   Deliberately NOT taken from the 4a source: its height: 44px,
   border-radius: 6px, the ✕'s height: 26px, line-height: 1, and its
   JetBrains Mono stack. That doc was written against a mockup whose
   selects are 44px/6px, and its stated invariant is "match the selects in
   the row". Ours are 39/34/38px tall with a 12px radius, so honouring the
   invariant means inheriting OUR geometry — pasting 44/6 would break the
   0.0000 height match. line-height: 1 and a fixed ✕ height are dropped for
   the same reason: both change the content box and would desync the row.
   Colours come from the --hashtag-* ladder in utilities.css (derived from
   --brand), which maps 1:1 onto the doc's tint ramp: .08/.16 fill ->
   --hashtag-bg/-hover, .4/.75 border -> --hashtag-border/-hover. */
.tag-filter-chip {
  align-items: center;
  /* .feed-filters is align-items: normal (= stretch). The three dropdown
     BUTTONS are wrapped in .filter-dropdown divs, so the WRAPPER is the flex
     item that stretches to the line height while the button keeps its natural
     size. This control is a DIRECT flex item, so without this it stretches
     too and ends up 2px taller than the buttons it is supposed to match
     (34 vs 32 at 900px, 38 vs 37 at 1280px) — it was silently matching the
     wrappers and .nsfw-toggle-btn instead. flex-start restores the natural
     height AND lands the top edge on exactly the dropdowns' top edge.
     Overridden back to stretch in the <=767px column layout below, where the
     cross axis is horizontal and stretching is what we want. */
  align-self: flex-start;
  appearance: none;
  -webkit-appearance: none;
  background: var(--hashtag-bg);
  border-radius: 0.75rem;
  border: 1px solid var(--hashtag-border);
  /* The three dropdowns are <button>s, which the UA already gives
     border-box. Kept explicit so the `width: 100%` in the <=767px column
     layout below can never resolve against a content box and render this
     26px (padding + border) wider than its siblings. */
  box-sizing: border-box;
  color: var(--brand);
  cursor: pointer;
  display: flex;
  font-size: 0.9375rem;
  font-weight: 500;
  /* No `gap`: it would apply even while the ✕ is collapsed to width 0,
     leaving dead space at rest and making the padding look lopsided. The
     ✕ animates its own margin-left instead. */
  gap: 0;
  /* Resets style.css's base `button` rule (line ~143), which sets
     overflow: hidden. The ✕ needs its own overflow: hidden to clip during
     the width animation — that belongs on the ✕, not here. */
  overflow: visible;
  padding: 0.625rem 1rem;
  transition: background-color 120ms ease, border-color 120ms ease,
              color 120ms ease, padding-right 140ms ease;
  user-select: none;
  -webkit-user-select: none;
}

.tag-filter-chip:hover,
.tag-filter-chip:focus-visible {
  background: var(--hashtag-bg-hover);
  border-color: var(--hashtag-border-hover);
  color: var(--hashtag-ink-hover);
}

/* The 4a source sets `:focus-visible { outline: none }` and leans on the
   hover treatment alone to signal focus. Rejected deliberately. The chip is
   now the ONLY focusable node for this control (the ✕ is an aria-hidden
   span), and the hover treatment is a 10%->20% tint shift — small against a
   dark page, and literally indistinguishable from "the mouse happens to be
   resting here". A keyboard user parked under the pointer would get no
   focus signal at all. The ring is kept AND the 4a reveal still fires on
   focus, so keyboard users get both. Overrides `outline: none` from the
   base `button` rule on specificity (0,2,0 vs 0,0,1), no !important. */
.tag-filter-chip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Inherits colour from the chip so the hover/focus brightening reaches it —
   a hardcoded colour here would pin it to the rest state. */
.tag-filter-tag {
  font-weight: 600;
  white-space: nowrap;
}

/* Decorative <span aria-hidden>, not a control — the chip itself is the
   click target, so no button reset, cursor or focus ring belongs here.
   Visible BY DEFAULT: this is the no-hover (touch) baseline, see the
   @media (hover: hover) block below for the collapse behaviour. */
.tag-filter-clear {
  align-items: center;
  display: flex;
  font-size: 0.85em;
  justify-content: center;
  /* line-height: 1 is load-bearing, not cosmetic. "✕" (U+2715) is absent from
     Handjet, so it renders from a fallback symbol font whose `normal`
     line-height is far taller than its font-size — measured 16px at an 11.9px
     font-size, vs 15px for the 14px tag next to it. That made a DECORATIVE
     glyph the tallest flex item and pushed the whole control 1px past the
     dropdowns at the 900px and 390px breakpoints (it only stayed hidden at
     1280px because the larger tag happened to out-measure it). Pinning to 1
     makes the box 0.85em, always shorter than the tag, so the tag alone
     governs the chip height at every breakpoint and in any fallback font. */
  line-height: 1;
  margin-left: 0.5rem;
  opacity: 1;
  /* clips the glyph while width animates from 0 */
  overflow: hidden;
  width: 1.1em;
}

/* Progressive enhancement, gated on hover CAPABILITY rather than a width
   breakpoint: a 1280px touchscreen has no hover either, so a media-width
   gate would strand those users. Where hover does not exist the ✕ stays
   permanently visible (above), because otherwise nothing would ever hint
   that tapping the chip clears the filter. */
@media (hover: hover) {
  .tag-filter-clear {
    margin-left: 0;
    opacity: 0;
    transition: width 140ms ease, opacity 140ms ease, margin-left 140ms ease;
    width: 0;
  }

  .tag-filter-chip:hover .tag-filter-clear,
  .tag-filter-chip:focus-visible .tag-filter-clear {
    margin-left: 0.5rem;
    opacity: 1;
    width: 1.1em;
  }

  /* Partial compensation, as in 4a: shrinking the right padding absorbs
     some of the width the ✕ adds, so the chip grows ~14px instead of ~22px
     and the row jitters less. */
  .tag-filter-chip:hover,
  .tag-filter-chip:focus-visible {
    padding-right: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tag-filter-chip,
  .tag-filter-clear {
    transition: none;
  }
}

.video-tooltip {
  background: rgba(24,24,24,.96);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  max-width: 320px;
  padding: 8px 10px;
  pointer-events: none;
  position: fixed;
  transition: opacity .12s ease;
  word-break: break-word;
  z-index: 9999;
}

@keyframes pulse {
  0% {
    opacity: 0.6;
  }

  100% {
    opacity: 0.8;
  }
}

@media (max-width: 767px) {
  body .feed-container .feed-grid .feed-card, body[data-profile-login] #profile-files-grid#feed-grid>.feed-card, .feed-grid>.feed-card, #profile-files-grid .feed-card, .feed-container .feed-grid>.feed-card {
    height: auto;
    max-height: none;
    max-width: 26.25rem;
    min-height: 0;
  }

  body, html {
    overflow-x: hidden;
  }

  #feed-grid, .feed-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    justify-items: center;
    margin: 0 auto;
    max-width: 100%;
    padding: 0 0.75rem;
    width: 100%;
  }

  #feed-grid>.feed-card, .feed-grid>.feed-card {
    box-sizing: border-box;
    max-width: 26.25rem;
    width: 100%;
  }

  .empty-state {
    font-size: 1rem;
    height: 9.375rem;
    margin: 1.25rem 0;
  }

  .feed-card {
    border-radius: 0.625rem;
    margin: 0;
    padding: 0.75rem;
  }

  .feed-card-description {
    color: #828282;
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
  }

  .feed-card-description, .feed-card-title, .feed-card-username {
    hyphens: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .feed-card-info {
    padding: 0.75rem;
  }

  .feed-card-preview {
    border-radius: 0.75rem;
    height: 60vw;
    max-height: 20rem;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
  }

  .feed-card-preview img, .feed-card-preview video {
    box-sizing: border-box;
    height: 100%;
    max-width: 100%;
    min-width: 0;
    object-fit: cover;
    width: 100%;
  }

  .feed-card-stats {
    font-size: 0.875rem;
    gap: 0.5rem;
    height: auto;
    width: auto;
  }

  .feed-card-stats img {
    flex: 0 0 1rem;
    height: var(--icon-sm);
    width: var(--icon-sm);
  }

  .feed-card-title {
    font-size: 1.125rem;
    line-height: 1.25;
    margin-bottom: 0.5rem;
  }

  .feed-container {
    padding: 0.75rem 0.75rem 2rem 0.75rem;
  }

  .feed-container, .feed-container>div, .feed-grid {
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .feed-filters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    width: 100%;
  }

  .feed-grid {
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
  }

  .filter-dropdown {
    width: 100%;
  }

  .filter-dropdown-btn {
    font-size: 0.875rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    width: 100%;
  }

  .filter-dropdown-menu {
    left: 0;
    min-width: 100%;
    right: 0;
  }

  .filter-option {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }

  .nsfw-toggle-btn {
    font-size: 0.875rem;
    justify-content: center;
    margin-left: 0;
    padding: 0.625rem 0.75rem;
    width: 100%;
  }

  /* Mirrors .filter-dropdown-btn above. Deliberately FULL-WIDTH, not
     shrink-wrapped: .feed-filters becomes a column here and every other
     control stretches, so a ~79px chip sitting alone at the left would
     read as broken rather than compact. space-between then pins the ✕ to
     the right edge exactly where the dropdowns' ▼ arrows sit, keeping the
     column's right edge clean. The apparent emptiness is the same the
     dropdowns already have — "Все ....... ▼" is no denser than
     "#42 ....... ✕". Measured 444px wide / 38px tall at 390px, identical
     to all three dropdowns. */
  .tag-filter-chip {
    /* column layout: the cross axis is horizontal, so stretch is correct here
       — the base rule's flex-start exists only to stop VERTICAL stretching in
       the row layout. */
    align-self: stretch;
    font-size: 0.875rem;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    width: 100%;
  }
}

@media (min-width: 1025px) {
  html body[data-profile-login] div#profile-files-grid.feed-grid>.feed-card {
    align-self: start;
    display: flex;
    flex-direction: column;
    margin: 0;
    max-width: 26.25rem;
    width: 100%;
  }

  #feed-grid, .feed-grid {
    grid-template-columns: repeat(3,1fr);
    justify-items: center;
    max-width: 85rem;
  }

  #feed-grid.feed-grid, .feed-container #feed-grid, .feed-container>div>#feed-grid {
    grid-template-columns: repeat(3,1fr);
    max-width: 85rem;
  }

  #feed-grid>.feed-card, .feed-container .feed-grid>.feed-card {
    max-width: 26.25rem;
  }

  .feed-card-delete {
    display: flex;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #feed-grid, .feed-grid {
    box-sizing: border-box;
    gap: 1.5rem;
    grid-template-columns: repeat(2,1fr);
    justify-items: center;
    margin: 0 auto;
    max-width: 100%;
    padding: 0 1.5rem;
    width: 100%;
  }

  #feed-grid.feed-grid, .feed-container #feed-grid, .feed-container>div>#feed-grid {
    box-sizing: border-box;
    grid-template-columns: repeat(2,1fr);
    max-width: 100%;
    padding: 0 1.5rem;
  }

  #feed-grid>.feed-card, .feed-grid>.feed-card {
    box-sizing: border-box;
    max-width: 26.25rem;
    min-width: 0;
    width: 100%;
  }

  .feed-card {
    box-sizing: border-box;
    margin: 0;
    max-width: 26.25rem;
    padding: 0.75rem;
    width: 100%;
  }

  .feed-card-description {
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .feed-card-info {
    padding: 0.75rem;
  }

  .feed-card-preview {
    border-radius: 0.75rem;
    height: 60vw;
    max-height: 20rem;
  }

  .feed-card-stats {
    font-size: 0.875rem;
    gap: 0.5rem;
    height: auto;
    width: auto;
  }

  .feed-card-stats img {
    flex: 0 0 1rem;
    height: var(--icon-sm);
    width: var(--icon-sm);
  }

  .feed-card-title {
    font-size: 1.125rem;
    line-height: 1.25;
    margin-bottom: 0.5rem;
  }

  .feed-container {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
    padding: 0.75rem 1.5rem 2rem 1.5rem;
  }

  .feed-filters {
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .feed-grid {
    gap: 1.5rem;
    grid-template-columns: repeat(2,1fr);
    margin: 0 auto;
    max-width: 100%;
    padding: 0 1.5rem;
  }

  .filter-dropdown-btn {
    font-size: 0.875rem;
    min-width: 7.5rem;
    padding: 0.5rem 0.75rem;
  }

  .filter-dropdown-menu {
    min-width: 10rem;
  }

  .filter-option {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }

  .nsfw-toggle-btn {
    font-size: 0.75rem;
    padding: 0.5rem 0.625rem;
  }

  .nsfw-toggle-label {
    display: none;
  }

  /* Mirrors .filter-dropdown-btn above at this breakpoint (min-width is
     deliberately still omitted — see the base rule). */
  .tag-filter-chip {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
}

/* Desktop Post Preview Modal Styling */
/* `inset: 0` rather than width/height 100vw/100vh: 100vw includes the classic
   scrollbar gutter, so on a page that still had one this box would be wider
   than the visible viewport and its centred child would sit off-centre. inset
   resolves against the initial containing block, which never includes it. */
.post-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-preview-modal:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

.post-preview-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.post-preview-modal-overlay.fullscreen-viewer {
  background: transparent !important;
}

.post-preview-modal-overlay.fullscreen-active {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #000000 !important;
}

/* --------------------------------------------------------------------------
   The dialog frame.

   This element used to be a full-viewport SCROLL AREA holding an iframe whose
   height the host copied from a content-height message the embed sent. That is
   why the modal rendered as a thin strip on a wide screen and overflowed the
   bottom of a narrow one: the post, not the viewport, decided the size. The
   message is gone (see feed.js / preview.html) and the dialog is now sized from
   the viewport alone and centred in it.

   The horizontal padding reserves the gutter the nav plates live in.
   .post-nav-plate is a 96px edge strip painted ABOVE this container (z-index 3
   vs 2), so anything the dialog puts under it would be unclickable; --nav-gutter
   is that width plus breathing room and is the single source of truth for the
   pairing. It steps down to 56px below 1100px, where the plate itself is 48px.
   `max()` keeps the 2vmin inset as the floor on very small viewports.
   -------------------------------------------------------------------------- */
.post-preview-modal-container {
  --nav-gutter: 104px;
  align-items: center;
  background: transparent;
  border-radius: 0;
  border: none;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  justify-content: center;
  /* Belt and braces with .post-preview-modal-body: no scrollport may exist at
     host level while the dialog is open. All scrolling happens INSIDE the
     embed. */
  overflow: hidden;
  padding: 2vmin max(2vmin, var(--nav-gutter));
  position: relative;
  width: 100%;
  z-index: 2;
}

@media (max-width: 1099px) {
  .post-preview-modal-container {
    --nav-gutter: 56px;
  }
}

/* The in-post lightbox / edit modal take the whole screen, and the plates and
   close button go display:none for as long as they do — so the gutter has
   nothing left to reserve and the padding would just inset the black. */
.post-preview-modal-container.fullscreen-viewer {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
}

/* While an in-iframe overlay is open (edit modal, fullscreen image viewer), pin
   the active post's iframe to the real viewport: those overlays are
   position:fixed INSIDE the embed, so they centre on the iframe, and the iframe
   is normally only a ~1160x880 panel in the middle of the screen. Pinning makes
   the embed's viewport the real one so the viewer fills the display.
   `inset: 0` for the same scrollbar-gutter reason as .post-preview-modal above.
   The panel chrome is dropped too — a 16px radius and a border around a
   full-screen image viewer would be visible at the edges. */
.feed-iframe-container.iframe-pinned {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  z-index: 100001 !important;
}


/* Pure centring layer. feed.js mounts .feed-iframe-container in here, so it
   cannot be collapsed away, but it owns no size of its own and — unlike
   before — no scrollport either. */
.post-preview-modal-body {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1;
}

/* The dialog panel itself. Both axes are capped by the viewport (the `100%`
   terms resolve against the container's content box, already inset by its
   padding), so it can never overflow the screen at any width, and the caps mean
   it never grows into a letterbox on an ultrawide monitor either.
   `min-height: 0` is deliberate: this element previously carried
   min-height: 100vh, which by itself guaranteed the modal was taller than the
   screen.

   The WIDTH cap is 1600px, up from 1160px. The rail is a fixed 452px, so every
   pixel added here lands on the media stage: a 16:9 video was rendering 674px
   wide on a 1440px screen, reading as a near-square column rather than as wide
   media. Measured stage widths after the raise: 778 at 1440 (was 706) and 1146
   at 1920 (was 706).

   The cap is 1600 rather than higher because the height cap is 880: a 16:9
   video only stays width-bound while the stage is narrower than 880 * 16/9 =
   1564px, and the stage is `dialog - 452 - 2px border`. Past a ~2015px dialog
   the extra width is dead space for the commonest media, so 1600 sits well
   inside the useful range while still filling a 1920 screen.

   `100%` — NOT `96vw` — is the second term, and that is load-bearing. The
   container's padding is `max(2vmin, var(--nav-gutter))`, which reserves the
   96px strip the .post-nav-plate buttons are painted in ABOVE this dialog
   (z-index 3 vs 2). `100%` resolves inside that reservation, so the dialog can
   never slide under a plate. `96vw` ignores it: at 1440 it computes to 1382.4
   against a 1232px content box, putting 75px of BOTH dialog edges under a
   button that swallows clicks outright — the left one over the media, the right
   one over the comment list and its scrollbar. So between 1368 and 1808 the
   gutter, not this cap, is what limits the dialog; that is deliberate.

   Consequence worth knowing: the embed's own two-column breakpoint is
   `min-width: 1100px` measured on the IFRAME, so the two-column modal starts at
   a ~1310px viewport (1100 + 2px border + 2 * 104px gutter), not at 1100px.
   Below that the embed uses its stacked branch, where the dialog is already
   gutter-bound and this cap changes nothing. */
.feed-iframe-container {
  background: var(--surface-ground);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-sizing: border-box;
  height: min(880px, 100%);
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: min(1600px, 100%);
}

.feed-iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: block;
}

.feed-iframe-container iframe.loaded {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Post navigation plates + modal close button.

   These belong to the HOST document, not to the embed. #post-preview-modal is
   `position: fixed; inset: 0`, so it is both a containing block and exactly one
   viewport tall — `position: absolute` here gives a full-height edge strip at
   every width. Inside the iframe the same controls could not work: they are
   modal chrome that surrounds the dialog, and the embed only ever sees the
   inside of it.

   The 96px width is paired with --nav-gutter on .post-preview-modal-container,
   which reserves exactly this strip so the dialog never slides under a plate.
   Changing one without the other makes the edge of the post unclickable.

   style.css styles every `button` with a brand fill and 0.7em 2em padding, so
   the UA/site reset below is load-bearing, not boilerplate.

   Stacking: #post-preview-modal (z-index 100000) is the stacking context.
   Within it .post-preview-modal-overlay is z-index auto (paints at 0) and
   .post-preview-modal-container is z-index 2 — and because the container is
   itself a stacking context, the `z-index: 100001` on
   .feed-iframe-container.iframe-pinned is resolved INSIDE the container and can
   never lift the pinned iframe past a sibling of it. So no z-index can put
   these controls above the iframe yet below a pinned one; 3/4 puts them above
   both, and the :has() rule below takes them out entirely while the in-post
   lightbox or edit modal owns the screen. 4 > 3 preserves the plate/close
   ordering from the old rules (40 < 45) — the close button sits ON TOP of the
   right-hand plate's 96px strip.
   -------------------------------------------------------------------------- */
.post-nav-plate {
  -webkit-appearance: none;
  align-items: center;
  appearance: none;
  background: transparent;
  border-radius: 0;
  border: 0;
  bottom: 0;
  color: var(--ink-2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 0.875rem;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  transition: color 0.18s ease;
  width: 96px;
  z-index: 3;
}

/* The brand wash lives on a pseudo-element: gradients cannot interpolate from
   `transparent`, but opacity can. */
.post-nav-plate::before {
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.18s ease;
}

.post-nav-prev {
  left: 0;
}

.post-nav-prev::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 18%, transparent), transparent 85%);
}

.post-nav-next {
  right: 0;
}

.post-nav-next::before {
  background: linear-gradient(270deg, color-mix(in srgb, var(--brand) 18%, transparent), transparent 85%);
}

.post-nav-plate:hover::before,
.post-nav-plate:focus-visible::before {
  opacity: 1;
}

.post-nav-plate:hover,
.post-nav-plate:focus-visible {
  color: var(--ink);
}

.post-nav-plate:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -6px;
}

.post-nav-plate__chev {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  border: 1px solid var(--line);
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  height: 52px;
  justify-content: center;
  position: relative;
  transition: background-color 0.18s ease, border-color 0.18s ease;
  width: 52px;
}

.post-nav-plate:hover .post-nav-plate__chev,
.post-nav-plate:focus-visible .post-nav-plate__chev {
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
}

.post-nav-plate__label {
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  position: relative;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.post-nav-prev .post-nav-plate__label {
  transform: rotate(180deg);
}

/* feed.js sets/clears `disabled` from updateNavAvailability().
   `pointer-events: none` is load-bearing, not cosmetic: a disabled button still
   wins hit-testing and then swallows the click outright — nothing reaches the
   button and nothing bubbles — so the 96px edge strip becomes a silent dead
   zone where the modal can be neither navigated nor dismissed. Letting the hit
   test fall through to the post iframe keeps click-to-close working (the
   embed's own backdrop handler calls parent.closePreviewModal). */
.post-nav-plate[disabled] {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1099px) {
  .post-nav-plate {
    gap: 0;
    width: 48px;
  }

  .post-nav-plate__chev {
    height: 40px;
    width: 40px;
  }

  .post-nav-plate__label {
    display: none;
  }
}

.preview-close {
  -webkit-appearance: none;
  align-items: center;
  appearance: none;
  background: #181818;
  border-radius: 50%;
  border: 1px solid #333;
  box-sizing: border-box;
  color: var(--ink-2);
  cursor: pointer;
  display: flex;
  font: inherit;
  height: 40px;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 24px;
  top: 24px;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  width: 40px;
  z-index: 4;
}

.preview-close:hover {
  background: var(--surface-ground);
  border-color: #4a4a4a;
  color: var(--ink);
}

.preview-close:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* The in-post lightbox and the edit modal pin the iframe to the real viewport
   (.iframe-pinned above) and take the whole screen. These controls sit in a
   higher sibling layer, so without this they would float over that overlay.
   `display: none` — not just opacity — also drops them from the tab order for
   as long as the in-post overlay owns focus. Keyed to .iframe-pinned itself,
   the thing that actually raises the iframe, rather than to a proxy class. */
#post-preview-modal:has(.feed-iframe-container.iframe-pinned) .post-nav-plate,
#post-preview-modal:has(.feed-iframe-container.iframe-pinned) .preview-close {
  display: none;
}

@media (prefers-reduced-motion: reduce) {

  .post-nav-plate,
  .post-nav-plate::before,
  .post-nav-plate__chev,
  .preview-close {
    transition: none;
  }
}

.hidden-for-viewer {
  display: none !important;
}

.feed-card-preview {
  position: relative !important;
}

.moderation-clock-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #eab308;
  color: #181a1b;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
/* Twitch role badge next to author names (feed cards) */
.user-badge-icon {
  height: 1rem;
  width: auto;
}

.badge-name-wrap {
  align-items: center;
  display: inline-flex;
  gap: 0.375rem;
}

/* ---- предложка (YouTube) на странице Видосы ---- */
.video-subs-section {
  margin: 1.25rem 0 1.75rem;
}

.video-subs-header {
  align-items: center;
  display: flex;
  margin-bottom: 0.75rem;
}

.video-subs-title {
  color: var(--fg);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: uppercase;
}

.video-submit-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  padding: 0.55rem 1.1rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.video-submit-toggle:hover {
  background: rgba(120, 157, 42, 0.12);
  border-color: rgba(120, 157, 42, 0.5);
}

.video-submit-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
  max-width: 34rem;
  padding: 0.875rem;
}

.video-submit-form[hidden] {
  display: none;
}

.video-submit-form input,
.video-submit-form textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-sizing: border-box;
  color: var(--fg);
  font: inherit;
  font-size: 0.9375rem;
  outline: none;
  padding: 0.625rem 0.75rem;
  resize: vertical;
  width: 100%;
}

.video-submit-form input:focus,
.video-submit-form textarea:focus {
  border-color: rgba(120, 157, 42, 0.6);
}

.video-submit-btn {
  align-self: flex-start;
  background: #789d2a;
  border: none;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.55rem 1.4rem;
  text-transform: uppercase;
  transition: filter 0.15s ease;
}

.video-submit-btn:hover {
  filter: brightness(1.1);
}

.video-submit-btn:disabled {
  cursor: default;
  filter: brightness(0.6);
}

.video-submit-login {
  color: #789d2a;
  display: inline-block;
  font-size: 0.9375rem;
  margin-bottom: 1rem;
  text-decoration: none;
}

.video-submit-login:hover {
  text-decoration: underline;
}

.yt-empty {
  color: var(--fg-dim);
  font-size: 0.9375rem;
  grid-column: 1 / -1;
  margin: 0;
}

.yt-card-img {
  display: block;
}