.vf-feed {
  --vf-accent: #0aa6b5;
  --vf-accent-soft: #eaf9fa;
  --vf-border: #e7ecee;
  --vf-ink: #15242b;
  --vf-muted: #66757d;
  background: #fbfcfc;
  color: var(--vf-ink);
  min-height: 100vh;
  padding: 8px max(24px, calc((100vw - 720px) / 2)) 32px;
}
.vf-feed__shell { margin-inline: auto; max-width: 720px; width: 100%; }
.vf-feed__intro { padding: 8px 0 10px; }
.vf-feed__stream { display: grid; gap: 16px; }
.vf-feed__card { background: #fff; border: 1px solid var(--vf-border); border-radius: 16px; box-shadow: 0 3px 14px rgba(19, 43, 51, .025); overflow: hidden; }
.vf-feed__card--text { background: #fff; }
.vf-feed__card--featured { border-color: #9ddde2; }
.vf-feed__header { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; padding: 14px 16px 12px; }
.vf-feed__author-row { align-items: center; display: flex; gap: 10px; min-width: 0; }
.vf-feed__avatar-wrap { flex: 0 0 48px; }
.vf-feed__avatar, .vf-feed__avatar-placeholder { border-radius: 50%; display: block; height: 48px; object-fit: cover; width: 48px; }
.vf-feed__avatar { border: 2px solid #fff; box-shadow: 0 0 0 1px var(--vf-border); }
.vf-feed__avatar-placeholder { color: #91a0a7; }
.vf-feed__author-meta { display: grid; gap: 3px; min-width: 0; }
.vf-feed__profile-link { color: inherit; text-decoration: none; }
.vf-feed__author-name { font-size: .95rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-feed__context { align-items: center; color: var(--vf-muted); display: flex; font-size: .78rem; gap: 5px; line-height: 1.3; min-width: 0; }
.vf-feed__role { color: #31484f; font-weight: 600; }
.vf-feed__country { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-feed__context-separator { color: #a0adb2; }
.vf-feed__identity { display: flex; flex-wrap: wrap; gap: 4px; max-height: 28px; overflow: hidden; }
.vf-feed__chip { background: #f1f5f6; border: 1px solid #e1e9eb; border-radius: 999px; color: #496067; font-size: .75rem; line-height: 24px; max-width: 180px; overflow: hidden; padding: 0 9px; text-overflow: ellipsis; white-space: nowrap; }
.vf-feed__timestamp { color: var(--vf-muted); font-size: .75rem; }
.vf-feed__timestamp--lower { margin-top: 10px; }
.vf-feed__featured { align-items: center; background: var(--vf-accent-soft); border-radius: 999px; color: #087c87; display: inline-flex; flex: 0 0 auto; font-size: .75rem; font-weight: 600; gap: 5px; padding: 6px 10px; }
.vf-feed__content { padding: 14px 16px 16px; }
.vf-feed__content--text { padding: 8px 20px 20px; }
.vf-feed__title { font-size: clamp(1.1rem, 2vw, 1.25rem); font-weight: 650; line-height: 1.35; margin: 0 0 8px; overflow-wrap: anywhere; }
.vf-feed__text { font-size: .98rem; line-height: 1.6; }
.vf-feed__text--standalone { font-size: 1.08rem; line-height: 1.68; max-width: 65ch; }
.vf-feed__text-value { overflow: hidden; }
.vf-feed__text:not(.is-expanded) .vf-feed__text-value { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.vf-feed__text--standalone:not(.is-expanded) .vf-feed__text-value { -webkit-line-clamp: 7; }
.vf-feed__expand { background: none; border: 0; color: #087f8b; cursor: pointer; font: inherit; font-weight: 600; margin-top: 6px; min-height: 44px; padding: 6px 0; }
.vf-feed__media { background: #101719; display: grid; gap: 2px; }
.vf-feed__media-item { align-items: center; display: flex; justify-content: center; min-width: 0; overflow: hidden; }
.vf-feed__media-item video, .vf-feed__media-item img, .vf-feed__media-item .vf-yt { display: block; max-width: 100%; width: 100%; }
.vf-feed__media-item video { aspect-ratio: 16 / 9; background: #000; max-height: min(72vh, 720px); object-fit: contain; }
.vf-feed__media-item img { height: auto; max-height: min(75vh, 760px); object-fit: contain; }
.vf-feed__media-item .vf-yt { aspect-ratio: 16 / 9; }
.vf-feed__media-item iframe { border: 0; height: 100%; width: 100%; }
.vf-feed__media--mixed .vf-feed__media-item:not(:first-child) { background: #182225; max-height: 420px; }
.vf-feed__actions { align-items: center; border-bottom: 1px solid #edf1f2; display: flex; gap: 4px; min-height: 56px; padding: 6px 12px; }
.vf-feed__action, .vf-feed__owner-trigger { align-items: center; background: transparent; border: 0; border-radius: 999px; color: #41545b; display: inline-flex; gap: 7px; justify-content: center; min-height: 44px; min-width: 44px; padding: 8px 10px; text-decoration: none; transition: background-color 150ms ease, color 150ms ease; }
.vf-feed__action:hover, .vf-feed__action:focus-visible, .vf-feed__owner-trigger:hover, .vf-feed__owner-trigger:focus-visible { background: var(--vf-accent-soft); color: #087c87; outline: 2px solid transparent; }
.vf-feed__action--static { cursor: default; }
.vf-feed__like.is-liked { color: #087c87; }
.vf-feed__like:disabled { cursor: wait; opacity: .6; }
.vf-feed__like-status { position: absolute; }
.vf-feed__comments { border-top: 1px solid #edf1f2; padding: 10px 16px 14px; }
.vf-feed__comment-preview, .vf-feed__comment-list { display: grid; gap: 10px; }
.vf-feed__comment { color: #344a52; font-size: .9rem; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.vf-feed__comment-author { color: var(--vf-ink); font-weight: 650; margin-right: 5px; text-decoration: none; }
.vf-feed__comment-text { display: inline; white-space: normal; word-break: break-word; }
.vf-feed__comment-time { color: var(--vf-muted); display: block; font-size: .72rem; margin-top: 2px; }
.vf-feed__comments-expand, .vf-feed__comments-more, .vf-feed__comment-login { background: transparent; border: 0; color: #087f8b; display: inline-block; font-size: .84rem; font-weight: 600; margin-top: 8px; min-height: 40px; padding: 8px 0; text-decoration: none; }
.vf-feed__comments-empty { color: var(--vf-muted); font-size: .86rem; margin: 0; }
.vf-feed__comment-thread { border-top: 1px solid #edf1f2; margin-top: 4px; padding-top: 4px; }
.vf-feed__comment-form { align-items: end; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; margin-top: 10px; }
.vf-feed__comment-form textarea { border: 1px solid #dce5e8; border-radius: 14px; max-height: 132px; min-height: 44px; min-width: 0; overflow-wrap: anywhere; padding: 10px 12px; resize: vertical; width: 100%; }
.vf-feed__comment-form button { background: var(--vf-accent); border: 0; border-radius: 999px; color: #fff; font-weight: 650; min-height: 44px; padding: 8px 14px; }
.vf-feed__comment-form button:disabled { cursor: wait; opacity: .6; }
.vf-feed__comment-status { color: #a23535; font-size: .8rem; min-height: 0; overflow-wrap: anywhere; }
.vf-feed__owner-menu { margin-left: auto; }
.vf-feed__owner-trigger::after { display: none; }
.vf-feed__loading { min-height: 48px; padding: 12px; text-align: center; }
.vf-feed-search-trigger { align-items: center; background: #fff; border: 1px solid #dce5e8; border-radius: 999px; color: #41545b; display: inline-flex; gap: 7px; margin-left: auto; margin-right: 10px; min-height: 42px; padding: 7px 13px; position: relative; }
.vf-feed-search-trigger:hover, .vf-feed-search-trigger:focus-visible { background: #eaf9fa; color: #087c87; }
.vf-feed-search-trigger__active { background: #0aa6b5; border: 2px solid #fff; border-radius: 50%; height: 9px; position: absolute; right: 5px; top: 4px; width: 9px; }
.vf-feed-search { --bs-offcanvas-width: min(420px, 100vw); }
.vf-feed-search .offcanvas-body { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.vf-feed-page > nav.sticky-top { transition: transform 180ms ease; will-change: transform; }
.vf-feed-page > nav.sticky-top.vf-site-header--hidden { transform: translateY(-100%); }
.vf-feed-create { align-items: center; background: #0aa6b5; border-radius: 50%; bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--football-ai-launcher-obstruction, 0px)); box-shadow: 0 .35rem .9rem rgba(33, 37, 41, .22); color: #fff; display: inline-flex; font-size: 1.25rem; height: 54px; justify-content: center; left: max(1rem, env(safe-area-inset-left)); position: fixed; text-decoration: none; width: 54px; z-index: 1034; }
.vf-feed-create:hover, .vf-feed-create:focus-visible { background: #087f8b; color: #fff; text-decoration: none; }
.vf-feed :focus-visible { outline: 3px solid rgba(10, 166, 181, .4); outline-offset: 2px; }
@media (max-width: 1023px) { .vf-feed { padding-inline: 0; } .vf-feed__shell { max-width: none; } .vf-feed__stream { gap: 12px; } }
@media (max-width: 991.98px) {
  .vf-feed-page > nav.sticky-top > .container { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; padding-inline: max(.75rem, env(safe-area-inset-left)); }
  .vf-feed-page > nav.sticky-top .navbar-brand { margin-right: .5rem; min-width: 0; }
  .vf-feed-page > nav.sticky-top .navbar-brand img { height: auto; max-width: 100%; width: clamp(132px, 37vw, 170px); }
  .vf-feed-page > nav.sticky-top .vf-feed-search-trigger { grid-column: 2; margin-left: 0; }
  .vf-feed-page > nav.sticky-top .navbar-toggler { flex: 0 0 auto; grid-column: 3; }
  .vf-feed-page > nav.sticky-top .navbar-collapse { grid-column: 1 / -1; }
}
@media (max-width: 767px) { .vf-feed { padding: 4px 0 24px; } .vf-feed__card { border-left: 0; border-radius: 0; border-right: 0; box-shadow: none; } .vf-feed__header { padding: 12px 14px 10px; } .vf-feed__avatar-wrap, .vf-feed__avatar, .vf-feed__avatar-placeholder { height: 44px; width: 44px; } .vf-feed__content, .vf-feed__content--text { padding-inline: 14px; } .vf-feed__comments { padding-inline: 14px; } .vf-feed__featured { max-width: 128px; text-align: center; } .vf-feed__action-label { display: none; } .vf-feed-search-trigger { margin-right: 8px; min-height: 44px; min-width: 44px; padding: 7px 11px; } .vf-feed-search-trigger__label { display: none; } .vf-feed-create { bottom: calc(max(.75rem, env(safe-area-inset-bottom)) + var(--football-ai-launcher-obstruction, 0px)); height: 50px; left: max(.75rem, env(safe-area-inset-left)); width: 50px; } }
@media (prefers-reduced-motion: reduce) { .vf-feed *, .vf-feed *::before, .vf-feed *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } .vf-feed-page > nav.sticky-top { transition: none; } }
