/* Feed and public profile visuals. */
/* Community Feed */
.feed-layout { display: grid; grid-template-columns: minmax(0, 720px) 270px; justify-content: center; gap: 24px; }
.feed-main-column { min-width: 0; }
.feed-title-row { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.feed-title-actions { display: flex; align-items: center; gap: 10px; }
.feed-search { display: flex; align-items: center; gap: 8px; min-width: 150px; height: 38px; padding: 0 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: var(--red-bright); background: rgba(0,0,0,.24); }
.feed-search input { width: 105px; border: 0; outline: 0; color: #fff; background: transparent; font-size: .62rem; }
.feed-title-row h1 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(2.35rem, 5vw, 4.6rem); line-height: .9; letter-spacing: -.08em; }
.feed-title-row h1 span { color: var(--red); }
.feed-tabs { display: flex; gap: 7px; margin-bottom: 18px; padding: 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(0,0,0,.22); }
.feed-tabs button { flex: 1; min-height: 39px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: .64rem; font-weight: 800; }
.feed-tabs button.active, .feed-tabs button:hover { color: #fff; background: rgba(255,25,25,.16); box-shadow: inset 0 0 0 1px rgba(255,30,30,.34); }
.feed-tabs i { margin-right: 5px; color: var(--red-bright); }
.feed-composer-card, .feed-post-card, .feed-side-card { border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(18,2,2,.82); box-shadow: 0 17px 44px rgba(0,0,0,.22); }
.feed-composer-card { margin-bottom: 18px; padding: 21px; }
.feed-composer-head { display: flex; align-items: start; justify-content: space-between; margin-bottom: 17px; }
.feed-composer-head h2 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 1.55rem; }
.feed-composer-head h2 span { color: var(--red); }
.feed-composer-head > button { border: 0; color: var(--muted); background: none; }
.composer-type-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.composer-type-tabs button { padding: 7px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: var(--muted); background: transparent; font-size: .6rem; font-weight: 800; }
.composer-type-tabs button.active { border-color: rgba(255,40,40,.5); color: #fff; background: rgba(255,25,25,.13); }
#feedPostText { display: block; width: 100%; min-height: 100px; resize: vertical; padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; outline: 0; color: #fff; background: rgba(0,0,0,.25); font: inherit; font-size: .69rem; }
.feed-url-field { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 0 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: var(--red-bright); background: rgba(0,0,0,.25); }
.feed-url-field input { width: 100%; height: 38px; border: 0; outline: 0; color: #fff; background: transparent; font-size: .65rem; }
.feed-upload-row { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.feed-upload-row > span { flex: 1; color: var(--dim); font-size: .57rem; }
.feed-upload-button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.04); font-size: .6rem; cursor: pointer; }
.feed-upload-button:hover { border-color: var(--red); color: #fff; }
.feed-form-error { margin: 9px 0 0; color: #ff9898; font-size: .6rem; }
.feed-stream { display: grid; gap: 17px; }
.feed-post-card { padding: 18px 19px 12px; }
.feed-post-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feed-author-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.feed-user { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; }
.feed-user-avatar, .feed-comment-avatar { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#ff3b3b,#830000); font-size: .7rem; font-weight: 900; }
.feed-user-avatar img, .feed-comment-avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.feed-user > span:last-child { display: grid; gap: 4px; min-width: 0; }
.feed-user strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.feed-user small { overflow: hidden; color: var(--muted); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.feed-follow-button { flex: 0 0 auto; min-height: 29px; padding: 0 11px; border: 1px solid rgba(22,245,110,.55); border-radius: 999px; color: var(--green); background: rgba(22,245,110,.08); font-size: .58rem; font-weight: 900; transition: .22s var(--ease); }
.feed-follow-button:hover, .feed-follow-button.following { color: #fff; border-color: rgba(255,40,40,.75); background: rgba(255,25,25,.16); box-shadow: var(--glow); }
.feed-follow-button.following { color: #ff9e9e; }
.feed-follow-button:disabled { cursor: wait; opacity: .65; }
.profile-follow-button { flex: 0 0 auto; white-space: nowrap; }
.feed-more { border: 0; color: var(--muted); background: none; }
.feed-post-text { margin: 17px 0; color: #eadede; font-size: .78rem; line-height: 1.65; white-space: pre-wrap; }
.feed-post-image { display: block; width: 100%; max-height: 500px; border-radius: 13px; background: #f0f2f5; object-fit: contain; }
.feed-post-cover-note { display: flex; align-items: center; gap: 7px; margin: 12px 0 11px; color: var(--muted); font-size: .62rem; }
.feed-post-cover-note i { color: var(--red-bright); }
.feed-post-cover-image { max-height: 620px; }
.feed-card-top-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 2px; }
.feed-card-top-actions .feed-post-permalink { margin: 0; }
.feed-start-ads { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid rgba(255,80,90,.65); border-radius: 9px; color: #fff!important; background: linear-gradient(135deg,#e3131b,#ff5260); font-size: .62rem; font-weight: 900; box-shadow: 0 5px 15px rgba(227,19,27,.22); }
.feed-post-image-wrap { position: relative; min-height: 120px; }
.feed-image-fallback { display: none; min-height: 120px; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255,40,40,.3); border-radius: 13px; color: #d8caca; background: rgba(95,5,5,.35); font-size: .65rem; }
.feed-post-image-wrap.is-missing .feed-image-fallback { display: flex; }
.feed-external-link { display: flex; align-items: center; gap: 11px; margin-top: 13px; padding: 13px; border: 1px solid rgba(255,40,40,.32); border-radius: 11px; color: #fff; background: rgba(255,25,25,.09); }
.feed-external-link > i:first-child { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #fff; background: var(--red-deep); }
.feed-external-link span { display: grid; flex: 1; gap: 4px; min-width: 0; }
.feed-external-link strong { font-size: .66rem; }
.feed-external-link small { overflow: hidden; color: var(--muted); font-size: .53rem; text-overflow: ellipsis; white-space: nowrap; }
.feed-post-stats { display: flex; justify-content: space-between; margin-top: 14px; padding: 0 2px 9px; color: var(--muted); font-size: .55rem; }
.feed-post-actions { display: flex; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.feed-post-actions button { flex: 1; padding: 11px 4px; border: 0; color: var(--muted); background: transparent; font-size: .58rem; font-weight: 800; }
.feed-post-actions button:hover, .feed-post-actions button.active { color: var(--red-bright); background: rgba(255,25,25,.07); }
.feed-comments { padding-top: 13px; }
.feed-comment-list { display: grid; gap: 12px; }
.feed-comment { display: flex; align-items: start; gap: 8px; }
.feed-comment-avatar { flex-basis: 27px; width: 27px; height: 27px; font-size: .5rem; }
.feed-comment > div { min-width: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.06); }
.feed-comment strong { font-size: .58rem; }
.feed-comment p { margin: 4px 0; color: #dbcaca; font-size: .62rem; line-height: 1.45; }
.feed-comment-tools { display: flex; align-items: center; gap: 9px; color: var(--dim); font-size: .5rem; }
.feed-comment-tools button { padding: 0; border: 0; color: var(--muted); background: none; font-size: .5rem; }
.feed-comment.reply { margin-left: 24px; }
.no-comments { color: var(--muted); font-size: .6rem; }
.feed-comment-form { display: flex; gap: 7px; margin-top: 13px; }
.feed-comment-form input { min-width: 0; flex: 1; height: 35px; padding: 0 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; outline: 0; color: #fff; background: rgba(0,0,0,.25); font-size: .6rem; }
.feed-comment-form button { width: 36px; border: 1px solid rgba(255,40,40,.5); border-radius: 8px; color: #fff; background: var(--red-deep); }
.feed-empty { padding: 65px 25px; border: 1px dashed rgba(255,40,40,.35); border-radius: 17px; color: var(--muted); text-align: center; }
.feed-empty h2 { margin: 12px 0 5px; color: #fff; font-family: "Space Grotesk", sans-serif; }
.feed-empty p { margin: 0 0 18px; font-size: .68rem; }
.feed-empty > i { color: var(--gold); font-size: 1.4rem; }
.feed-sidebar { display: grid; align-content: start; gap: 15px; }
.feed-side-card { padding: 20px; }
.feed-side-card h3 { margin: 0 0 10px; font-family: "Space Grotesk", sans-serif; font-size: 1.25rem; }
.feed-side-card h3 span { color: var(--red); }
.feed-side-card > p { margin: 0 0 16px; color: var(--muted); font-size: .64rem; line-height: 1.6; }
.feed-rule { display: flex; align-items: center; gap: 8px; margin-top: 11px; color: #d8caca; font-size: .6rem; }
.feed-rule i { color: var(--green); }
.feed-side-privacy { display: flex; gap: 10px; color: var(--green); }
.feed-side-privacy p { margin: 5px 0 0; }
.feed-side-privacy > i { margin-top: 2px; }
.public-profile-page { position: relative; isolation: isolate; }
.public-profile-wrap { position: relative; z-index: 1; max-width: 930px; }
.public-profile-backdrop { position: absolute; top: 0; right: 0; left: 0; z-index: 0; height: 420px; overflow: hidden; pointer-events: none; background-position: center; background-size: cover; background-repeat: no-repeat; filter: blur(28px) saturate(1.24) brightness(.78); opacity: .9; transform: scale(1.045); transform-origin: center top; }
.public-profile-backdrop::after { position: absolute; inset: -12px; content: ""; background: linear-gradient(90deg, rgba(238,241,245,.58) 0%, rgba(238,241,245,.08) 22%, rgba(238,241,245,.08) 78%, rgba(238,241,245,.58) 100%), linear-gradient(180deg, rgba(238,241,245,.08) 0%, rgba(238,241,245,.04) 48%, rgba(238,241,245,.96) 100%); }
.public-profile-cover { overflow: visible; border: 1px solid rgba(255,40,40,.35); border-radius: 20px; background: rgba(18,2,2,.85); }
.public-profile-banner { height: 420px; background-image: radial-gradient(circle at 80% 20%, rgba(255,50,50,.3), transparent 30%), linear-gradient(120deg,#4b0909,#110202 70%,#2b0505); background-position: center; background-size: cover; background-repeat: no-repeat; }
.public-profile-main { display: flex; align-items: center; gap: 16px; margin-top: -52px; padding: 0 26px; }
.public-profile-avatar { display: grid; width: 110px; height: 110px; overflow: hidden; place-items: center; border: 4px solid #170202; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#ff3b3b,#830000); box-shadow: var(--glow); font-family: "Space Grotesk", sans-serif; font-size: 1.7rem; font-weight: 900; }
.public-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.public-profile-main > div { flex: 1; padding-top: 25px; }
.public-profile-main h1 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.4rem, 3vw, 2.2rem); }
.public-profile-main p:last-child { margin: 4px 0 0; color: var(--muted); font-size: .65rem; }
.public-profile-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin: 22px 26px 18px; }
.public-profile-stats span { padding: 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: var(--muted); font-size: .53rem; text-align: center; }
.public-profile-stats strong { display: block; margin-bottom: 4px; color: #fff; font-family: "Space Grotesk", sans-serif; font-size: 1.1rem; }
.public-profile-tabs { display: flex; gap: 24px; margin: 22px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.public-profile-tabs button { padding: 10px 4px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: none; font-size: .65rem; font-weight: 800; }
.public-profile-tabs button.active { border-color: var(--red); color: #fff; }
.public-profile-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.profile-post-card { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(18,2,2,.75); }
.profile-post-card img { display: block; width: 100%; height: 155px; background: #f0f2f5; object-fit: contain; }
.profile-post-card > div { padding: 13px; }
.post-type-label { color: var(--red-bright); font-family: "DM Mono", monospace; font-size: .48rem; text-transform: uppercase; }
.profile-post-card p { margin: 8px 0; color: #d8caca; font-size: .62rem; line-height: 1.5; }
.profile-post-card a { color: var(--green); font-size: .58rem; }
.profile-post-card > .profile-post-media { position: relative; min-height: 155px; padding: 0; background: linear-gradient(135deg, rgba(112,8,8,.55), rgba(13,2,2,.95)); }
.profile-post-media img { height: 155px; object-fit: contain; }
.profile-post-media-fallback { display: none; height: 155px; place-items: center; align-content: center; gap: 8px; color: #d8caca; text-align: center; }
.profile-post-media-fallback i { color: var(--red-bright); font-size: 1.35rem; }
.profile-post-media-fallback small { display: block; font-size: .58rem; }
.profile-post-media.is-missing .profile-post-media-fallback, .profile-post-media.is-text-only .profile-post-media-fallback { display: grid; }
.profile-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 !important; margin-top: 13px; }
.profile-card-actions a { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 8px 9px; border-radius: 8px; font-weight: 800; }
.profile-card-actions .profile-start-ads { color: #fff; background: linear-gradient(135deg, #e3131b, #ff5260); box-shadow: 0 5px 14px rgba(227,19,27,.25); }
.profile-card-actions .feed-post-permalink { color: var(--green); background: rgba(22,245,110,.06); }
@media (max-width: 900px) { .feed-layout { grid-template-columns: 1fr; } .feed-sidebar { display: none; } }
@media (max-width: 620px) { .feed-title-row { align-items: start; flex-direction: column; } .feed-title-actions { width: 100%; align-items: stretch; flex-direction: column; } .feed-search, .feed-search input { width: 100%; } .feed-title-row .btn { width: 100%; } .feed-upload-row { flex-wrap: wrap; } .feed-upload-row > span { order: 3; width: 100%; flex-basis: 100%; } .feed-author-row { flex-wrap: wrap; } .feed-follow-button { min-height: 28px; padding-inline: 9px; } .public-profile-main { align-items: start; flex-wrap: wrap; padding: 0 16px; } .public-profile-main > div { padding-top: 21px; } .public-profile-main .btn { margin-left: 126px; } .public-profile-stats { gap: 5px; margin-inline: 16px; } .public-profile-stats span { padding: 8px 3px; font-size: .43rem; } .public-profile-grid { grid-template-columns: 1fr 1fr; } }

/* Feed media stays inside the post card and never sends the learner away. */
.feed-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 13px; overflow: hidden; border: 1px solid rgba(255,40,40,.5); border-radius: 13px; background: #050000; box-shadow: 0 0 22px rgba(255,20,20,.12); }
.feed-embed iframe { width: 100%; height: 100%; border: 0; background: #000; }
.feed-embed-reel { width: min(100%, 340px); aspect-ratio: 9 / 16; margin-right: auto; margin-left: auto; }
.feed-embed-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 7px 0 0; color: var(--dim); font-size: .56rem; }
.feed-embed-footer span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.feed-embed-footer span i { color: var(--green); }
.feed-embed-footer a { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: #fff; font-weight: 800; }
.feed-embed-footer a:hover { color: var(--red-bright); }
.feed-embed-error iframe { opacity: .35; }
.feed-shell { display: flex; height: 100dvh; min-height: 100dvh; flex-direction: column; overflow: hidden; }
.feed-shell > main { min-height: 0; flex: 1 1 auto; overflow: hidden; }
.feed-body { height: 100%; overflow: hidden; padding-bottom: 0 !important; }
html:has(body.feed-body) { overflow: hidden; }
.feed-page { height: 100%; min-height: 0; overflow: hidden; }
.feed-page > .feed-layout { height: 100%; min-height: 0; }
.feed-main-column { display: flex; min-height: 0; flex-direction: column; }
.feed-main-column > .feed-title-row, .feed-main-column > .feed-tabs, .feed-main-column > .feed-composer-card { flex: 0 0 auto; }
.feed-stream { min-height: 0; overflow-x: hidden; overflow-y: auto; padding-right: 7px; padding-bottom: 30px; scrollbar-color: rgba(255,40,40,.6) rgba(255,255,255,.04); scrollbar-width: thin; }
.feed-sidebar { min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.feed-shell .public-profile-page { height: 100%; min-height: 0; overflow-y: auto; padding-top: 48px; padding-bottom: 100px; }
.feed-shell .public-profile-page .public-profile-wrap { padding-bottom: 30px; }
@media (max-width: 1023px) { .feed-stream { padding-bottom: 102px; } }

/* Feed refinement: tabs at the top, one full-width edge scrollbar, clearer text. */
.feed-shell > main { overflow-x: hidden; overflow-y: auto; }
.feed-shell .feed-page { height: auto; min-height: 100%; overflow: visible; padding: 24px 0 32px; }
.feed-page > .feed-layout { height: auto; min-height: 0; grid-template-columns: minmax(0, 720px); }
.feed-page > .feed-layout.comments-open { grid-template-columns: minmax(0, 720px) minmax(260px, 320px); align-items: start; }
.feed-main-column { display: block; min-height: 0; }
.feed-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.feed-topbar .feed-tabs { flex: 1 1 auto; margin: 0; }
.feed-topbar .feed-title-actions { flex: 0 0 auto; }
.feed-create-button { min-height: 39px; padding-inline: 14px; font-size: .66rem; }
.feed-stream { min-height: 0; overflow: visible; padding: 0 0 30px; }
.feed-sidebar { display: none; }
.feed-comments-panel { position: sticky; top: 0; display: block; min-height: 260px; max-height: calc(100dvh - var(--nav-h) - 48px); overflow: hidden; border: 1px solid rgba(255,40,40,.35); border-radius: 17px; background: rgba(18,2,2,.9); box-shadow: 0 17px 44px rgba(0,0,0,.25); }
.feed-comments-panel[hidden] { display: none; }
.feed-comments-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; padding: 17px 17px 12px; border-bottom: 1px solid rgba(255,255,255,.09); }
.feed-comments-panel-head .eyebrow { margin-bottom: 5px; font-size: .55rem; }
.feed-comments-panel-head h2 { margin: 0; color: #fff; font-family: "Space Grotesk", sans-serif; font-size: 1.05rem; line-height: 1.1; }
.feed-comments-panel-head > button { border: 0; color: var(--muted); background: transparent; }
.feed-comments-panel-body { max-height: calc(100dvh - var(--nav-h) - 135px); overflow-y: auto; padding: 0 15px 15px; scrollbar-color: rgba(255,40,40,.6) rgba(255,255,255,.04); scrollbar-width: thin; }
.feed-comments-panel-body .feed-comments { padding-top: 13px; }
.feed-comments-panel-body .feed-comment-form { position: sticky; bottom: 0; padding-top: 10px; background: linear-gradient(180deg, transparent, rgba(18,2,2,.98) 18%); }
.feed-comments-empty { padding: 24px 4px; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.feed-user strong { font-size: .84rem; }
.feed-user small { font-size: .67rem; }
.feed-post-text { margin: 18px 0; color: #f2e6e6; font-size: .98rem; line-height: 1.7; }
.feed-post-stats { margin-top: 16px; padding-bottom: 10px; font-size: .64rem; }
.feed-post-actions button { padding: 13px 5px; font-size: .68rem; }
.feed-post-actions button i { margin-right: 3px; font-size: .78rem; }
.feed-comment p { font-size: .73rem; }
.feed-comment strong { font-size: .68rem; }
.feed-comment-tools button, .feed-comment-tools small { font-size: .58rem; }
.feed-post-menu-wrap { position: relative; }
.feed-post-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 15; min-width: 115px; padding: 5px; border: 1px solid rgba(255,40,40,.4); border-radius: 10px; background: rgba(23,2,2,.98); box-shadow: var(--glow); }
.feed-post-menu button { display: flex; width: 100%; align-items: center; gap: 7px; padding: 8px 9px; border: 0; border-radius: 7px; color: #e6caca; background: transparent; font-size: .64rem; text-align: left; }
.feed-post-menu button:hover { color: #fff; background: rgba(255,25,25,.14); }
.feed-post-menu i { color: var(--red-bright); }
.feed-volume-control { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #fff; background: rgba(0,0,0,.68); backdrop-filter: blur(8px); }
.feed-volume-control i { font-size: .67rem; }
.feed-volume-control input { width: 92px; height: 4px; accent-color: var(--red-bright); cursor: pointer; }
@media (max-width: 620px) {
  .feed-shell .feed-page { padding-top: 14px; }
  .feed-shell .feed-stream { padding-bottom: 102px; }
  .feed-topbar { align-items: stretch; flex-direction: column; }
  .feed-topbar .feed-tabs { width: 100%; }
  .feed-topbar .feed-title-actions { width: 100%; }
  .feed-topbar .feed-search { flex: 1; }
  .feed-create-button { width: 100%; }
  .feed-volume-control input { width: 82px; }
}

/* Keep profile media menus usable on narrow screens.  The trigger stays
   attached to the banner/avatar, while JS switches the open menu to a
   viewport-safe fixed position so no parent card can clip its options. */
@media (max-width: 1023px) {
  body.feed-body .public-profile-cover,
  body.feed-body .public-profile-banner,
  body.feed-body .public-profile-main,
  body.feed-body .public-profile-avatar-wrap {
    overflow: visible !important;
  }

  body.feed-body .public-profile-cover {
    position: relative;
    z-index: 20;
  }

  body.feed-body .public-profile-media-control {
    z-index: 100 !important;
  }

  body.feed-body .public-profile-media-menu {
    z-index: 10000 !important;
    width: 176px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    border-color: rgba(255, 61, 72, .58);
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(145deg, #32070b, #120204 78%);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .62), 0 0 22px rgba(255, 31, 42, .18);
  }

  body.feed-body .public-profile-media-menu[hidden] {
    display: none !important;
  }

  body.feed-body .public-profile-media-menu button {
    min-height: 40px;
    padding: 10px 12px;
    color: #f8eded;
    background: transparent;
    font-size: .68rem;
    white-space: nowrap;
  }

  body.feed-body .public-profile-media-menu button:hover,
  body.feed-body .public-profile-media-menu button:focus-visible {
    color: #fff;
    background: rgba(255, 48, 60, .18);
    outline: 0;
  }

  body.feed-body .public-profile-media-menu button i {
    color: #ff4c56;
  }

  /* Portalled menus no longer inherit any card clipping or stacking context. */
  body.feed-body > .public-profile-media-menu {
    position: fixed !important;
    z-index: 100000 !important;
  }
}
@media (max-width: 900px) {
  .feed-page > .feed-layout.comments-open { grid-template-columns: minmax(0, 1fr); }
  .feed-comments-panel { position: fixed; top: calc(var(--nav-h) + 12px); right: 12px; bottom: 84px; left: 12px; z-index: 125; max-height: none; }
  .feed-comments-panel-body { max-height: none; }
}

/* Reaction states and the full-height conversation drawer. */
.feed-post-actions button[data-post-reaction="love"].active {
  color: #ff3d4f;
  background: rgba(255, 35, 55, .12);
  text-shadow: 0 0 12px rgba(255, 35, 55, .62);
}

.feed-post-actions button[data-post-reaction="love"].active i {
  color: #ff3d4f;
}

.feed-page > .feed-layout.comments-open {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  max-width: 1220px;
  align-items: start;
}

.feed-comments-panel {
  display: flex;
  height: calc(100dvh - var(--nav-h) - 34px);
  min-height: 420px;
  max-height: calc(100dvh - var(--nav-h) - 34px);
  flex-direction: column;
}

.feed-comments-panel-head {
  flex: 0 0 auto;
  padding: 22px 20px 16px;
}

.feed-comments-panel-head h2 {
  font-size: 1.28rem;
}

.feed-comments-panel-body {
  display: flex;
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  flex-direction: column;
  overflow-y: auto;
  padding: 0 20px 18px;
  overscroll-behavior: contain;
}

.feed-comments-panel-body .feed-comments {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding-top: 17px;
}

.feed-comments-panel-body .feed-comment-list {
  flex: 0 0 auto;
  gap: 17px;
}

.feed-comment {
  gap: 11px;
}

.feed-comment-avatar {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  font-size: .62rem;
}

.feed-comment-bubble,
.feed-comment > div {
  flex: 1 1 auto;
  padding: 12px 14px;
  border-radius: 13px;
}

.feed-comment strong {
  font-size: .78rem;
}

.feed-comment p {
  margin: 6px 0 8px;
  color: #f1e4e4;
  font-size: .82rem;
  line-height: 1.55;
}

.feed-comment-tools {
  flex-wrap: wrap;
  gap: 7px;
  font-size: .64rem;
}

.feed-comment-tools button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: .64rem;
}

.feed-comment-tools button em {
  color: inherit;
  font-size: .6rem;
  font-style: normal;
  opacity: .8;
}

.feed-comment-tools button[data-comment-reaction="like"].active {
  color: var(--green);
  background: rgba(22, 245, 110, .11);
  text-shadow: 0 0 10px rgba(22, 245, 110, .45);
}

.feed-comment-tools button[data-comment-reaction="dislike"].active {
  color: #ff3d4f;
  background: rgba(255, 35, 55, .12);
  text-shadow: 0 0 10px rgba(255, 35, 55, .55);
}

.feed-comment.reply {
  margin-top: 13px;
  margin-left: 31px;
}

.feed-comment-form {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: auto;
  padding: 15px 0 3px;
  background: linear-gradient(180deg, transparent 0%, rgba(18, 2, 2, .94) 22%, rgba(18, 2, 2, 1) 52%);
}

.feed-comment-form input {
  height: 44px;
  padding-inline: 13px;
  font-size: .72rem;
}

.feed-comment-form button {
  width: 44px;
  border-radius: 10px;
}

.no-comments,
.feed-comments-empty {
  font-size: .74rem;
  line-height: 1.6;
}

@media (max-width: 1200px) and (min-width: 901px) {
  .feed-page > .feed-layout.comments-open {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
  }
}

@media (max-width: 900px) {
  .feed-comments-panel {
    height: auto;
    min-height: 0;
  }

  .feed-comments-panel-body {
    height: 100%;
    min-height: 0;
  }
}

/* Keep the feed category bar visible while only the post stream moves. */
.feed-topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  margin-top: -24px;
  margin-bottom: 18px;
  padding: 24px 0 12px;
  background: linear-gradient(180deg, rgba(5, 0, 0, .98) 0%, rgba(5, 0, 0, .92) 78%, transparent 100%);
}

/* Keep post copy and card labels easy to read on the dark brand background. */
.feed-post-card .feed-post-text,
.feed-post-card .feed-user strong,
.feed-post-card .feed-user small,
.feed-post-card .feed-post-stats,
.feed-post-card .feed-post-actions button,
.feed-post-card .feed-external-link strong {
  color: #fff;
}

.feed-post-card .feed-post-text {
  color: #fff;
}

.feed-post-card .feed-post-stats {
  color: rgba(255, 255, 255, .88);
}

.feed-post-card .feed-post-actions button:hover,
.feed-post-card .feed-post-actions button.active {
  color: #fff;
}

.feed-post-card .feed-post-actions button[data-post-reaction="love"].active {
  color: #ff3d4f;
}

.feed-post-permalink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
  color: var(--green);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
}

.feed-post-permalink:hover,
.feed-post-permalink:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.feed-detail-layout {
  align-items: start;
}

.feed-detail-card {
  min-height: 240px;
}

.feed-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feed-detail-actions a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: .61rem;
  text-decoration: none;
}

.feed-detail-actions a:hover,
.feed-detail-actions a:focus-visible {
  color: var(--green);
}

.feed-detail-aside {
  display: block;
}

.feed-detail-aside .feed-comments-panel-body p {
  color: #d8caca;
  font-size: .68rem;
  line-height: 1.65;
}

@media (max-width: 620px) {
  .feed-topbar {
    margin-top: -14px;
    padding-top: 14px;
  }
  .feed-embed-footer { align-items: flex-start; flex-direction: column; }
}

/* Facebook's Reel player must receive a vertical frame, just like the
   original Reel. common.py also sends Facebook the matching 267x476 player
   dimensions so the provider does not fall back to a square layout. */
.feed-embed-reel[data-feed-provider="facebook"] {
  width: min(100%, 340px);
  aspect-ratio: 9 / 16;
}

.feed-embed-reel[data-feed-provider="facebook"] iframe {
  width: 100%;
  height: 100%;
}

/* Composer media feedback: the creator sees exactly what will be published. */
.feed-media-preview,
.feed-link-preview { margin-top: 13px; padding: 12px; border: 1px solid rgba(255,40,40,.3); border-radius: 13px; background: rgba(0,0,0,.2); }
.feed-media-preview-head,
.feed-link-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: #fff; font-size: .62rem; }
.feed-media-preview-head button { border: 0; color: var(--muted); background: transparent; font-size: .58rem; cursor: pointer; }
.feed-media-preview-head button:hover { color: #fff; }
.feed-media-preview-object { display: block; width: 100%; max-height: 360px; border-radius: 9px; object-fit: contain; background: #050000; }
.feed-trim-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.feed-trim-controls label { display: grid; gap: 5px; color: var(--muted); font-size: .56rem; }
.feed-trim-controls input { width: 100%; box-sizing: border-box; height: 31px; padding: 0 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; outline: 0; color: #fff; background: rgba(0,0,0,.28); font-size: .6rem; }
.feed-trim-controls small { grid-column: 1 / -1; color: var(--dim); font-size: .54rem; }
.feed-trim-controls small.is-warning { color: #ffbd6b; }
.feed-link-preview.is-error { color: #ff9898; font-size: .6rem; }
.feed-composer-embed { margin-top: 0; max-height: 340px; }
.feed-composer-embed.feed-embed-reel { max-width: 235px; }
.feed-composer-link-fallback { margin-top: 0; }
.feed-upload-progress { margin-top: 12px; }
.feed-upload-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.1); }
.feed-upload-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--green)); box-shadow: 0 0 14px rgba(255,40,40,.55); transition: width .18s ease; }
.feed-upload-progress small { display: block; margin-top: 5px; color: var(--muted); font-size: .55rem; }

/* Local videos use the same card treatment as provider embeds. */
.feed-post-video-wrap { margin-top: 13px; overflow: hidden; border: 1px solid rgba(255,40,40,.38); border-radius: 13px; background: #050000; }
.feed-post-video { display: block; width: 100%; max-height: 560px; background: #000; }
.feed-post-video-reel { width: min(100%, 340px); aspect-ratio: 9 / 16; margin-inline: auto; }
.feed-video-meta { display: flex; align-items: center; gap: 5px; padding: 7px 10px; color: var(--dim); font-size: .52rem; }
.feed-video-meta i { color: var(--green); }
.profile-post-video { position: relative; }
.profile-post-video video { display: block; width: 100%; height: 155px; background: #000; object-fit: cover; }
.profile-video-duration { position: absolute; right: 7px; bottom: 7px; padding: 4px 6px; border-radius: 6px; color: #fff; background: rgba(0,0,0,.72); font-size: .5rem; }
.profile-video-duration i { color: var(--green); }

@media (max-width: 620px) {
  .feed-trim-controls { grid-template-columns: 1fr 1fr; }
  .feed-media-preview-object { max-height: 270px; }
}

/* Siskul Reels use an immersive 9:16 viewer instead of the normal Feed card. */
.feed-reel-card {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 9 / 16;
  min-height: 0;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  border-color: rgba(255,255,255,.18);
  border-radius: 18px;
  background: #000;
  box-shadow: 0 22px 58px rgba(0,0,0,.45), 0 0 28px rgba(255,30,40,.12);
}
.feed-reel-card::before,
.feed-reel-card::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  content: "";
}
.feed-reel-card::before { background: linear-gradient(180deg, rgba(0,0,0,.6), transparent 22%, transparent 58%, rgba(0,0,0,.83) 100%); }
.feed-reel-card::after { background: linear-gradient(90deg, transparent 60%, rgba(0,0,0,.3) 100%); }
.feed-reel-card > .feed-post-head { position: absolute; inset: 0; z-index: 12; display: block; padding: 0; pointer-events: none; }
.feed-reel-card .feed-author-row { position: absolute; right: 62px; bottom: 16px; left: 15px; align-items: center; pointer-events: auto; }
.feed-reel-card .feed-user-avatar { width: 42px; height: 42px; flex-basis: 42px; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 3px 14px rgba(0,0,0,.45); }
.feed-reel-card .feed-user strong { color: #fff; font-size: .82rem; text-shadow: 0 2px 9px #000; }
.feed-reel-card .feed-user small { color: rgba(255,255,255,.82); font-size: .61rem; text-shadow: 0 2px 8px #000; }
.feed-reel-card .feed-follow-button { min-height: 27px; padding-inline: 9px; background: rgba(0,0,0,.42); backdrop-filter: blur(8px); }
.feed-reel-card .feed-post-menu-wrap { position: absolute; right: 10px; bottom: 11px; z-index: 14; pointer-events: auto; }
.feed-reel-card .feed-more { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff; background: rgba(0,0,0,.38); backdrop-filter: blur(8px); }
.feed-reel-card .feed-post-menu { top: auto; right: 0; bottom: calc(100% + 7px); z-index: 20; }
.feed-reel-card .feed-reel-sound-toggle { position: absolute; top: 13px; left: 13px; z-index: 14; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; background: rgba(0,0,0,.42); backdrop-filter: blur(8px); cursor: pointer; }
.feed-reel-card .feed-reel-sound-toggle:hover { background: rgba(255,35,45,.75); }
.feed-reel-card .feed-post-permalink { display: none; }
.feed-reel-card .feed-post-text { position: absolute; right: 68px; bottom: 82px; left: 15px; z-index: 8; max-height: 74px; margin: 0; overflow: hidden; color: #fff; font-size: .78rem; line-height: 1.45; text-shadow: 0 2px 9px #000; }
.feed-reel-card .feed-post-video-wrap,
.feed-reel-card .feed-embed { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; aspect-ratio: auto; background: #000; }
.feed-reel-card .feed-post-video { display: block; width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: cover; }
.feed-reel-card .feed-post-video-reel { width: 100%; height: 100%; aspect-ratio: auto; margin: 0; }
.feed-reel-card .feed-video-meta,
.feed-reel-card .feed-embed-footer { display: none; }
.feed-reel-card .feed-embed iframe { width: 100%; height: 100%; border: 0; }
.feed-reel-card > .feed-external-link { position: absolute; right: 68px; bottom: 88px; left: 15px; z-index: 7; margin: 0; background: rgba(36,3,3,.78); backdrop-filter: blur(10px); }
.feed-reel-card .feed-volume-control { right: auto; bottom: 15px; left: 15px; }
.feed-reel-card .feed-reel-actions { position: absolute; right: 6px; bottom: 55px; z-index: 10; display: flex; width: 52px; flex-direction: column; gap: 5px; border: 0; }
.feed-reel-card .feed-reel-actions button { display: grid; flex: 0 0 auto; width: 52px; gap: 3px; justify-items: center; padding: 5px 0; border: 0; color: #fff; background: transparent; font-size: 0; text-shadow: 0 2px 8px #000; }
.feed-reel-card .feed-reel-actions button i { margin: 0; color: #fff; font-size: 1.3rem; }
.feed-reel-card .feed-reel-action-count { display: block; color: #fff; font-size: .58rem; font-weight: 800; line-height: 1; text-shadow: 0 2px 8px #000; }
.feed-reel-card .feed-reel-actions button:hover,
.feed-reel-card .feed-reel-actions button.active { color: #fff; background: transparent; transform: scale(1.08); }
.feed-reel-card .feed-reel-actions button[data-post-reaction="love"].active i { color: #ff4052; }
.feed-reel-card .feed-comments { position: static; }

.feed-reel-card .feed-media-error,
.feed-reel-missing-media { position: absolute; inset: 0; z-index: 4; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 25px; color: #fff; background: radial-gradient(circle at 50% 42%, rgba(87,10,10,.82), rgba(0,0,0,.96) 70%); text-align: center; }
.feed-reel-card .feed-media-error[hidden] { display: none; }
.feed-reel-card .feed-media-error i,
.feed-reel-missing-media i { color: var(--red-bright); font-size: 1.65rem; }
.feed-reel-card .feed-media-error strong,
.feed-reel-missing-media strong { font-size: .78rem; }
.feed-reel-card .feed-media-error small,
.feed-reel-missing-media small { max-width: 210px; color: rgba(255,255,255,.72); font-size: .59rem; line-height: 1.5; }
.feed-reel-card .feed-post-video-wrap.is-media-error .feed-post-video { display: none; }

@media (max-width: 620px) {
  .feed-reel-card { width: 100%; border-radius: 14px; }
  .feed-reel-card .feed-author-row { right: 58px; left: 12px; }
  .feed-reel-card .feed-post-text { right: 64px; left: 12px; }
}

/* -------------------------------------------------------------------------
   Feed visual system v3
   The Siskul shell/navbar stays branded; the Feed canvas follows the
   familiar three-column social layout from the product reference screens.
   ------------------------------------------------------------------------- */
body.feed-body {
  color: #1c1e21;
  background: #eef1f5;
}

body.feed-body .feed-shell > main {
  background: #eef1f5;
}

body.feed-body .feed-page {
  padding: 24px 0 44px;
  background: #eef1f5;
}

body.feed-body .feed-page > .feed-layout {
  width: min(calc(100% - 32px), 1500px);
  grid-template-columns: 214px minmax(0, 900px) 302px;
  justify-content: center;
  gap: 20px;
  align-items: start;
}

body.feed-body .feed-left-rail,
body.feed-body .feed-right-rail {
  min-width: 0;
}

.feed-left-rail {
  position: sticky;
  top: 18px;
  z-index: 5;
  display: grid;
  align-content: start;
  gap: 10px;
}

.feed-rail-card,
.feed-right-card {
  border: 0;
  border-radius: 14px;
  background: transparent;
}

.feed-rail-profile-card {
  padding: 6px 8px;
}

.feed-rail-profile,
.feed-suggestion-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #1c1e21;
  text-decoration: none;
}

.feed-rail-profile {
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  text-align: left;
}

.feed-rail-profile:hover,
.feed-rail-profile:focus-visible {
  background: #e1e5ea;
}

.feed-rail-login {
  cursor: pointer;
}

.feed-rail-avatar,
.feed-composer-avatar {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #ff4b51, #a70710);
  font-size: .74rem;
  font-weight: 900;
}

.feed-rail-avatar img,
.feed-composer-avatar img,
.feed-user-avatar img,
.feed-comment-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.feed-rail-profile > span:last-child,
.feed-suggestion-user > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.feed-rail-profile strong,
.feed-suggestion-user strong {
  overflow: hidden;
  color: #1c1e21;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-rail-profile small,
.feed-suggestion-user small {
  overflow: hidden;
  color: #65676b;
  font-size: .58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-rail-nav {
  display: grid;
  gap: 3px;
  padding: 5px 0;
}

.feed-rail-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  color: #4b4f54;
  font-size: .69rem;
  font-weight: 800;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.feed-rail-nav a i {
  width: 20px;
  color: #e51b25;
  font-size: .95rem;
  text-align: center;
}

.feed-rail-nav a:hover,
.feed-rail-nav a:focus-visible,
.feed-rail-nav a.active {
  color: #17191c;
  background: #e0e4e9;
}

.feed-rail-nav a.active i {
  color: #e51b25;
}

.feed-rail-footer,
.feed-right-footer {
  margin: 10px 8px 0;
  color: #8a8e94;
  font-size: .52rem;
  line-height: 1.65;
}

body.feed-body .feed-main-column {
  grid-column: 2;
  min-width: 0;
}

body.feed-body .feed-topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 2px 0 12px;
  background: rgba(238, 241, 245, .94);
  backdrop-filter: blur(12px);
}

body.feed-body .feed-tabs {
  flex: 1 1 auto;
  margin: 0;
  border: 1px solid #d7dbe0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(31, 35, 40, .06);
}

body.feed-body .feed-tabs button {
  color: #65676b;
}

body.feed-body .feed-tabs button.active,
body.feed-body .feed-tabs button:hover {
  color: #1c1e21;
  background: #ffe6e8;
  box-shadow: inset 0 0 0 1px rgba(229, 27, 37, .28);
}

body.feed-body .feed-tabs i {
  color: #e51b25;
}

body.feed-body .feed-title-actions {
  flex: 0 0 auto;
}

body.feed-body .feed-search {
  min-width: 168px;
  height: 40px;
  border-color: #d7dbe0;
  border-radius: 12px;
  color: #e51b25;
  background: #fff;
  box-shadow: 0 2px 8px rgba(31, 35, 40, .05);
}

body.feed-body .feed-search input {
  color: #1c1e21;
}

body.feed-body .feed-search input::placeholder {
  color: #8a8e94;
}

body.feed-body .feed-create-button {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #f02932, #bd0712);
  box-shadow: 0 7px 16px rgba(229, 27, 37, .2);
}

.feed-composer-launcher {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #d7dbe0;
  border-radius: 13px;
  color: #65676b;
  background: #fff;
  box-shadow: 0 2px 8px rgba(31, 35, 40, .06);
  cursor: pointer;
  text-align: left;
}

.feed-composer-launcher:hover,
.feed-composer-launcher:focus-visible {
  border-color: #c4c9cf;
  background: #fafbfc;
}

.feed-composer-launcher .feed-composer-avatar {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
}

.feed-composer-prompt {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 999px;
  background: #f0f2f5;
  font-size: .7rem;
  white-space: nowrap;
}

.feed-composer-launcher-actions {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-inline: 5px;
  color: #e51b25;
  font-size: .88rem;
}

.feed-composer-launcher-actions i:nth-child(2) { color: #29a34a; }
.feed-composer-launcher-actions i:nth-child(3) { color: #e94272; }

body.feed-body .feed-composer-card,
body.feed-body .feed-post-card {
  border: 1px solid #d7dbe0;
  border-radius: 13px;
  color: #1c1e21;
  background: #fff;
  box-shadow: 0 2px 9px rgba(31, 35, 40, .07);
}

body.feed-body .feed-composer-card {
  margin-bottom: 12px;
  padding: 16px;
}

body.feed-body .feed-composer-head h2,
body.feed-body .feed-composer-head button,
body.feed-body .feed-composer-head .eyebrow {
  color: #1c1e21;
}

body.feed-body .feed-composer-head h2 span { color: #e51b25; }
body.feed-body .feed-composer-head > button { color: #65676b; }

body.feed-body .composer-type-tabs button {
  border-color: #d7dbe0;
  color: #65676b;
}

body.feed-body .composer-type-tabs button.active {
  border-color: #f0a0a4;
  color: #9e1018;
  background: #fff0f1;
}

body.feed-body #feedPostText,
body.feed-body .feed-url-field,
body.feed-body .feed-trim-controls input {
  border-color: #d7dbe0;
  color: #1c1e21;
  background: #f7f8fa;
}

body.feed-body #feedPostText::placeholder,
body.feed-body .feed-url-field input::placeholder {
  color: #8a8e94;
}

body.feed-body .feed-url-field input { color: #1c1e21; }
body.feed-body .feed-upload-button { border-color: #d7dbe0; color: #4b4f54; background: #f7f8fa; }
body.feed-body .feed-upload-row > span { color: #8a8e94; }

.feed-reels-strip {
  margin-bottom: 12px;
  padding: 13px;
  border: 1px solid #d7dbe0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 9px rgba(31, 35, 40, .07);
}

.feed-reels-strip-head,
.feed-right-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.feed-reels-strip-head h2 {
  margin: 3px 0 0;
  color: #1c1e21;
  font-size: .86rem;
}

.feed-section-kicker {
  color: #e51b25;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.feed-reels-strip-head > button,
.feed-right-card-head > a,
.feed-right-card-head > button {
  border: 0;
  color: #e51b25;
  background: transparent;
  font-size: .6rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.feed-reels-strip-head > button { display: inline-flex; align-items: center; gap: 6px; padding: 4px; }

.feed-reels-track {
  display: flex;
  gap: 8px;
  margin-top: 11px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.feed-reel-tile {
  position: relative;
  flex: 0 0 125px;
  height: 176px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #170202;
  cursor: pointer;
  isolation: isolate;
}

.feed-reel-tile-media,
.feed-reel-tile-media img,
.feed-reel-tile-media video,
.feed-reel-tile-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.feed-reel-tile-media img,
.feed-reel-tile-media video {
  display: block;
  object-fit: cover;
}

.feed-reel-tile-placeholder {
  display: grid;
  place-items: center;
  color: #ff7c83;
  background: radial-gradient(circle at 40% 30%, #6e1920, #160306 70%);
  font-size: 1.6rem;
}

.feed-reel-tile-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.02), transparent 38%, rgba(0,0,0,.8));
}

.feed-reel-tile-label {
  position: absolute;
  right: 8px;
  bottom: 9px;
  left: 8px;
  z-index: 2;
  overflow: hidden;
  font-size: .62rem;
  font-weight: 800;
  text-align: left;
  text-overflow: ellipsis;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
  white-space: nowrap;
}

.feed-reel-tile-play {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(0,0,0,.48);
  font-size: .59rem;
}

.feed-reel-tile:hover,
.feed-reel-tile:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.feed-reels-empty { display: none; margin: 12px 3px 2px; color: #65676b; font-size: .62rem; }
.feed-reels-empty i { margin-right: 5px; color: #e51b25; }

body.feed-body .feed-post-card {
  padding: 14px 15px 10px;
}

body.feed-body .feed-post-card:not(.feed-reel-card) .feed-post-head { margin-bottom: 1px; }
body.feed-body .feed-post-card .feed-user { color: #1c1e21; }
body.feed-body .feed-post-card .feed-user strong { color: #1c1e21; font-size: .75rem; }
body.feed-body .feed-post-card .feed-user small { color: #65676b; font-size: .59rem; }
body.feed-body .feed-post-card .feed-post-text { color: #1c1e21; font-size: .79rem; }
body.feed-body .feed-post-card .feed-post-stats { color: #65676b; }
body.feed-body .feed-post-card .feed-post-actions { border-color: #e2e5e9; }
body.feed-body .feed-post-card .feed-post-actions button { color: #65676b; }
body.feed-body .feed-post-card .feed-post-actions button:hover,
body.feed-body .feed-post-card .feed-post-actions button.active { color: #e51b25; background: #fff4f4; }
body.feed-body .feed-post-card .feed-comments { color: #1c1e21; }
body.feed-body .feed-post-card .feed-comment > div { background: #f0f2f5; }
body.feed-body .feed-post-card .feed-comment p { color: #36393f; }
body.feed-body .feed-post-card .feed-comment-tools button { color: #65676b; }
body.feed-body .feed-comment-form input { border-color: #d7dbe0; color: #1c1e21; background: #f7f8fa; }

.feed-own-post-actions { align-items: center; margin: 9px 0 2px; }
.feed-own-post-actions > span { color: #65676b; font-size: .57rem; }
.feed-own-post-actions > span i { margin-right: 4px; color: #e51b25; }

body.feed-body .feed-right-rail {
  grid-column: 3;
  grid-row: 1;
  position: sticky;
  top: 18px;
  display: grid;
  align-content: start;
  gap: 16px;
}

.feed-right-card-head { align-items: center; margin: 2px 3px 9px; }
.feed-right-card-head h2 { margin: 0; color: #65676b; font-size: .77rem; }
.feed-right-card-head > button { color: #8a8e94; padding: 0; }

.feed-sponsored-card {
  display: flex;
  align-items: start;
  gap: 9px;
  padding: 8px 5px;
  border-radius: 10px;
  color: #1c1e21;
  text-decoration: none;
}

.feed-sponsored-card:hover,
.feed-sponsored-card:focus-visible { background: #e1e5ea; }

.feed-sponsored-art {
  display: grid;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(145deg, #b20a17, #3a0a0c);
  font-size: 1.1rem;
}

.feed-sponsored-secondary .feed-sponsored-art { background: linear-gradient(145deg, #146c91, #102d58); }
.feed-sponsored-card > span:last-child { display: grid; gap: 4px; min-width: 0; }
.feed-sponsored-card strong { color: #1c1e21; font-size: .64rem; line-height: 1.25; }
.feed-sponsored-card small { color: #65676b; font-size: .55rem; line-height: 1.35; }
.feed-sponsored-card b { color: #e51b25; font-size: .54rem; }

.feed-suggestion-card { padding-top: 5px; }
.feed-suggestion-row { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 7px 4px; border-radius: 9px; }
.feed-suggestion-row:hover { background: #e1e5ea; }
.feed-suggestion-user { gap: 7px; }
.feed-suggestion-user .feed-user-avatar { flex-basis: 31px; width: 31px; height: 31px; font-size: .55rem; }
.feed-suggestion-user strong { font-size: .6rem; }
.feed-suggestion-user small { font-size: .52rem; }
.feed-suggestion-row .feed-follow-button { min-height: 25px; padding-inline: 8px; color: #e51b25; border-color: #f2a2a7; background: #fff; font-size: .52rem; }
.feed-right-muted { margin: 0 3px; color: #8a8e94; font-size: .61rem; line-height: 1.5; }

body.feed-body .feed-layout.comments-open {
  grid-template-columns: 214px minmax(0, 900px) minmax(350px, 420px);
  max-width: 1500px;
}

body.feed-body .feed-layout.comments-open .feed-right-rail { display: none; }
body.feed-body .feed-comments-panel { grid-column: 3; grid-row: 1; }
body.feed-body .feed-comments-panel-head { border-color: #e2e5e9; }
body.feed-body .feed-comments-panel-head h2 { color: #1c1e21; }
body.feed-body .feed-comments-panel-head > button { color: #65676b; }
body.feed-body .feed-comments-panel,
body.feed-body .feed-comments-panel-body .feed-comments-panel { border-color: #d7dbe0; background: #fff; }
body.feed-body .feed-comments-panel-body { background: #fff; }
body.feed-body .feed-comments-panel-body .feed-comments { color: #1c1e21; }
body.feed-body .feed-comments-panel-body .feed-comment-form { background: linear-gradient(180deg, transparent, #fff 18%); }
body.feed-body .feed-comments-empty { color: #65676b; }

/* Reels are kept as hidden source cards for the fullscreen viewer, but never
   take up space in the Home stream. Their public presentation is the
   Siskul Reels strip above the regular image/text/video feed. */
body.feed-body .feed-stream .feed-reel-source { display: none !important; }
body.feed-body .feed-reels-strip { min-width: 0; }
body.feed-body .feed-reels-track { scrollbar-color: #c5cbd2 #eef1f5; }

/* Reel cards remain black and cinematic inside the light Feed canvas. */
body.feed-body .feed-reel-card {
  border-color: #202226;
  background: #000;
  box-shadow: 0 14px 34px rgba(31, 35, 40, .22);
}

body.feed-body .feed-reel-card .feed-user strong,
body.feed-body .feed-reel-card .feed-user small,
body.feed-body .feed-reel-card .feed-post-text,
body.feed-body .feed-reel-card .feed-post-actions button,
body.feed-body .feed-reel-card .feed-reel-action-count { color: #fff; }

body.feed-body .feed-reel-card .feed-post-actions button:hover,
body.feed-body .feed-reel-card .feed-post-actions button.active { color: #fff; background: transparent; }

body.feed-body .feed-reel-card .feed-reel-actions button[data-post-reaction="love"].active i { color: #ff4052; }

/* Own profile follows the reference profile layout and keeps Start Ads on
   every post card, not only in the profile header. */
body.feed-body .public-profile-page { background: #eef1f5; }
body.feed-body .public-profile-wrap { max-width: 1180px; }
body.feed-body .public-profile-backdrop { top: 48px; height: 420px; }
body.feed-body .public-profile-cover,
body.feed-body .profile-post-card { border-color: #d7dbe0; background: #fff; box-shadow: 0 2px 9px rgba(31, 35, 40, .07); }
body.feed-body .public-profile-main h1,
body.feed-body .profile-post-card p { color: #1c1e21; }
body.feed-body .public-profile-main p:last-child,
body.feed-body .public-profile-stats span,
body.feed-body .profile-post-card p { color: #65676b; }
body.feed-body .public-profile-stats span { border-color: #e2e5e9; background: #fafbfc; }
body.feed-body .public-profile-stats strong { color: #1c1e21; }
body.feed-body .public-profile-tabs { border-color: #d7dbe0; }
body.feed-body .public-profile-tabs button { color: #65676b; }
body.feed-body .public-profile-tabs button.active { color: #e51b25; border-color: #e51b25; }
body.feed-body .profile-card-actions { border-top: 1px solid #e2e5e9; }
body.feed-body .profile-card-actions .profile-start-ads { color: #fff; background: linear-gradient(135deg, #e51b25, #b80712); }
body.feed-body .profile-card-actions .feed-post-permalink { color: #e51b25; background: #fff3f3; }

/* Fullscreen Reel viewer: a 9:16 stage with a right-side action rail. */
.feed-reel-viewer {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
  background: #000;
}

.feed-reel-viewer[hidden] { display: none; }
.feed-reel-viewer-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #242424, #000 65%); }
.feed-reel-viewer-topbar { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 18px; font-size: .73rem; font-weight: 800; }
.feed-reel-viewer-topbar > span { display: inline-flex; align-items: center; gap: 7px; }
.feed-reel-viewer-topbar > span i { color: #ff3641; }
.feed-reel-viewer-close,
.feed-reel-viewer-more { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; }
.feed-reel-viewer-close:hover,
.feed-reel-viewer-more:hover { background: rgba(255,255,255,.2); }
.feed-reel-viewer-body { position: relative; z-index: 2; display: flex; flex: 1; align-items: center; justify-content: center; gap: 13px; min-height: 0; padding: 0 42px 25px; }
.feed-reel-viewer-stage { position: relative; width: auto; height: min(82vh, 900px); max-width: calc(100vw - 150px); aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 12px; background: #111; box-shadow: 0 20px 70px rgba(0,0,0,.6); }
.feed-reel-viewer-media { position: absolute; inset: 0; display: grid; place-items: center; background: #000; }
.feed-reel-viewer-media video,
.feed-reel-viewer-media iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.feed-reel-viewer-media .feed-external-link,
.feed-reel-viewer-media .feed-reel-missing-media { width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; }
.feed-reel-viewer-sound { position: absolute; top: 13px; left: 13px; z-index: 3; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; background: rgba(0,0,0,.5); cursor: pointer; }
.feed-reel-viewer-copy { position: absolute; right: 16px; bottom: 17px; left: 16px; z-index: 2; padding-top: 55px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.78)); }
.feed-reel-viewer-author { min-height: 37px; }
.feed-reel-viewer-author .feed-author-row { pointer-events: auto; }
.feed-reel-viewer-author .feed-user strong { color: #fff; font-size: .75rem; }
.feed-reel-viewer-author .feed-user small { color: rgba(255,255,255,.8); }
.feed-reel-viewer-author .feed-follow-button { display: none; }
.feed-reel-viewer-copy > p { max-height: 70px; margin: 6px 0 0; overflow: hidden; color: #fff; font-size: .7rem; line-height: 1.45; text-shadow: 0 2px 8px #000; }
.feed-reel-viewer-actions { display: flex; flex-direction: column; gap: 12px; }
.feed-reel-viewer-actions button { display: grid; min-width: 54px; gap: 4px; justify-items: center; padding: 5px 2px; border: 0; color: #fff; background: transparent; cursor: pointer; text-shadow: 0 2px 8px #000; }
.feed-reel-viewer-actions button i { font-size: 1.25rem; }
.feed-reel-viewer-actions button span { font-size: .58rem; font-weight: 800; }
.feed-reel-viewer-actions button:hover,
.feed-reel-viewer-actions button.active { transform: scale(1.08); }
.feed-reel-viewer-actions button.active i { color: #ff4052; }
.feed-reel-viewer-nav { position: absolute; z-index: 4; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: #fff; background: rgba(0,0,0,.42); cursor: pointer; }
.feed-reel-viewer-nav:hover { background: rgba(255,255,255,.2); }
.feed-reel-viewer-prev { top: calc(50% - 56px); left: max(7px, calc(50% - 335px)); }
.feed-reel-viewer-next { top: calc(50% + 18px); left: max(7px, calc(50% - 335px)); }
body.feed-reel-open { overflow: hidden; }
body.feed-reel-open .feed-shell > main { overflow: hidden; }
#feedApp.reel-viewer-comments-open #feedCommentsPanel { position: fixed; top: 60px; right: 0; bottom: 0; z-index: 520; width: min(380px, 100vw); height: auto; max-height: none; min-height: 0; border-radius: 16px 0 0 0; }
#feedApp.reel-viewer-comments-open .feed-comments-panel-body { max-height: none; }

@media (max-width: 1160px) {
  body.feed-body .feed-page > .feed-layout { grid-template-columns: 178px minmax(0, 720px); width: min(calc(100% - 24px), 930px); }
  body.feed-body .feed-right-rail { display: none; }
  body.feed-body .feed-layout.comments-open { grid-template-columns: 178px minmax(0, 720px) minmax(340px, 390px); width: min(calc(100% - 24px), 1290px); }
}

@media (max-width: 850px) {
  body.feed-body .feed-page > .feed-layout,
  body.feed-body .feed-layout.comments-open { grid-template-columns: minmax(0, 720px); width: min(calc(100% - 20px), 720px); }
  body.feed-body .feed-left-rail { display: none; }
  body.feed-body .feed-main-column { grid-column: 1; }
  body.feed-body .feed-comments-panel { grid-column: 1; }
  body.feed-body .feed-topbar { position: relative; }
  .feed-reel-viewer-stage { height: min(78vh, 765px); max-width: 70vw; }
  .feed-reel-viewer-prev { left: 8px; }
  .feed-reel-viewer-next { left: 8px; }
}

@media (max-width: 620px) {
  body.feed-body .feed-page { padding-top: 13px; }
  body.feed-body .feed-page > .feed-layout { width: min(calc(100% - 12px), 720px); }
  body.feed-body .feed-topbar { align-items: stretch; flex-direction: column; padding-bottom: 8px; }
  body.feed-body .feed-title-actions { align-items: stretch; flex-direction: column; }
  body.feed-body .feed-search { width: auto; }
  body.feed-body .feed-create-button { width: 100%; }
  .feed-composer-launcher { padding: 8px; }
  .feed-composer-prompt { padding: 10px; font-size: .63rem; }
  .feed-composer-launcher-actions { gap: 7px; font-size: .77rem; }
  .feed-reels-strip { padding: 10px; }
  .feed-reel-tile { flex-basis: 104px; height: 150px; }
  .feed-reels-strip-head h2 { font-size: .75rem; }
  .feed-reel-viewer-topbar { height: 52px; padding-inline: 10px; }
  .feed-reel-viewer-body { gap: 2px; padding: 0 10px 15px; }
  .feed-reel-viewer-stage { width: min(78vw, 390px); height: auto; max-width: 78vw; aspect-ratio: 9 / 16; border-radius: 9px; }
  .feed-reel-viewer-actions { position: absolute; right: 1px; bottom: 35px; gap: 8px; }
  .feed-reel-viewer-actions button { min-width: 42px; }
  .feed-reel-viewer-actions button i { font-size: 1.05rem; }
  .feed-reel-viewer-actions button span { font-size: .52rem; }
  .feed-reel-viewer-prev { top: calc(50% - 47px); left: 3px; }
  .feed-reel-viewer-next { top: calc(50% + 8px); left: 3px; }
  #feedApp.reel-viewer-comments-open #feedCommentsPanel { top: 52px; right: 6px; bottom: 6px; left: 6px; width: auto; border-radius: 13px; }
}

/* Composer modal and profile media controls. These overrides keep the
   Facebook-like interactions inside the replaceable Feed app while retaining
   Siskul's red/black/green brand language. */
.feed-composer-launcher {
  cursor: default;
  text-align: left;
}

.feed-composer-launcher-profile,
.feed-composer-profile {
  display: flex;
  align-items: center;
  min-width: 0;
  color: #1c1e21;
  text-decoration: none;
}

.feed-composer-launcher-profile {
  flex: 0 0 auto;
  border-radius: 50%;
}

.feed-composer-launcher-profile:hover,
.feed-composer-launcher-profile:focus-visible {
  outline: 3px solid rgba(229, 27, 37, .16);
  outline-offset: 2px;
}

.feed-composer-launcher-open {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  border: 0;
  border-radius: 999px;
  color: #65676b;
  background: #f0f2f5;
  font: inherit;
  font-size: .7rem;
  text-align: left;
  cursor: pointer;
}

.feed-composer-launcher-open:hover,
.feed-composer-launcher-open:focus-visible {
  background: #e7e9ed;
  outline: 0;
}

.feed-composer-avatar img,
.feed-composer-profile .feed-composer-avatar img,
.feed-composer-launcher .feed-composer-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.feed-body .feed-composer-card {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100dvh;
  margin: 0;
  padding: 20px;
  border: 0;
  border-radius: 0;
  background: rgba(15, 18, 22, .62);
  box-shadow: none;
  backdrop-filter: blur(5px);
}

body.feed-body .feed-composer-card[hidden] { display: none; }
.feed-composer-backdrop { position: absolute; inset: 0; cursor: pointer; }
.feed-composer-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  border: 1px solid #d7dbe0;
  border-radius: 14px;
  color: #1c1e21;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.feed-composer-dialog::-webkit-scrollbar { width: 8px; }
.feed-composer-dialog::-webkit-scrollbar-thumb { border-radius: 8px; background: #c8ccd1; }
.feed-composer-dialog form { padding: 0 16px 16px; }
.feed-composer-dialog .feed-composer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  margin: 0;
  padding: 0 58px;
  border-bottom: 1px solid #e2e5e9;
  background: rgba(255, 255, 255, .96);
}

.feed-composer-dialog .feed-composer-head h2 {
  margin: 0;
  color: #1c1e21;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.04rem;
}

.feed-composer-close,
.feed-composer-dialog .feed-composer-close {
  position: absolute;
  top: 12px;
  right: 14px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #4b4f54;
  background: #e4e6eb;
  cursor: pointer;
}

.feed-composer-close:hover,
.feed-composer-close:focus-visible { color: #1c1e21; background: #d7dbe0; outline: 0; }
.feed-composer-profile-row { padding: 14px 0 8px; }
.feed-composer-profile { gap: 10px; }
.feed-composer-profile > span:last-child { display: grid; gap: 4px; min-width: 0; }
.feed-composer-profile strong { color: #1c1e21; font-size: .75rem; }
.feed-composer-profile small { display: inline-flex; align-items: center; gap: 5px; color: #65676b; font-size: .57rem; }
.feed-composer-profile small span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 5px; background: #e4e6eb; }
.feed-composer-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.feed-composer-mode-row .composer-type-tabs { flex: 1 1 auto; }
.feed-text-style-button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; color: #65676b; background: transparent; font-weight: 900; cursor: pointer; }
.feed-text-style-button:hover { background: #f0f2f5; }
body.feed-body .feed-composer-dialog #feedPostText {
  min-height: 142px;
  margin: 2px 0 8px;
  padding: 8px 0;
  border: 0;
  color: #1c1e21;
  background: transparent;
  font-size: .95rem;
  line-height: 1.5;
  resize: vertical;
}
body.feed-body .feed-composer-dialog #feedPostText:focus { outline: 0; }
.feed-composer-dialog .feed-url-field { margin: 0 0 10px; }
.feed-composer-dialog .feed-media-preview,
.feed-composer-dialog .feed-link-preview { margin-top: 8px; border-color: #d7dbe0; background: #f7f8fa; }
.feed-add-to-post { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 10px; padding: 9px 10px; border: 1px solid #d7dbe0; border-radius: 9px; }
.feed-add-to-post > strong { flex: 0 0 auto; color: #1c1e21; font-size: .65rem; }
.feed-add-actions { display: flex; align-items: center; justify-content: flex-end; gap: 3px; min-width: 0; }
.feed-add-actions button { display: inline-flex; align-items: center; gap: 4px; padding: 6px 5px; border: 0; border-radius: 7px; color: #65676b; background: transparent; font-size: .57rem; cursor: pointer; }
.feed-add-actions button:hover,
.feed-add-actions button:focus-visible { background: #f0f2f5; outline: 0; }
.feed-add-actions button:nth-child(1) i { color: #29a34a; }
.feed-add-actions button:nth-child(2) i { color: #1877f2; }
.feed-add-actions button:nth-child(3) i { color: #e51b25; }
.feed-add-actions button:nth-child(4) i { color: #f39c12; }
.feed-add-actions button:nth-child(5) i { color: #e94272; }
.feed-upload-row { align-items: center; margin-top: 10px; }
.feed-upload-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-upload-button { flex: 0 0 auto; }
.feed-upload-row > #feedPublishButton { min-width: 102px; }
body.feed-composer-open { overflow: hidden; }

/* Owner-only media menus and crop editors on the public profile. */
.public-profile-banner { position: relative; overflow: visible; border-radius: 20px 20px 0 0; }
.public-profile-banner-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.public-profile-banner-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; transform: translate3d(var(--banner-shift-x, 0px), var(--banner-shift-y, 0px), 0) scale(var(--banner-zoom, 1)); transform-origin: center center; }
.public-profile-banner-image[hidden] { display: none !important; }
.public-profile-cover.is-editing-media { overflow: visible; }
.public-profile-avatar-wrap { position: relative; z-index: 6; flex: 0 0 110px; width: 110px; height: 110px; }
.public-profile-main > .public-profile-avatar-wrap { flex: 0 0 110px; padding-top: 0; }
.public-profile-media-control { position: relative; z-index: 10; }
.public-profile-media-control.banner { position: absolute; right: 18px; bottom: 16px; }
.public-profile-media-control.avatar { position: absolute; right: -3px; bottom: -1px; }
.public-profile-media-button { border: 0; color: #1c1e21; background: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .16); }
.public-profile-media-button:hover,
.public-profile-media-button:focus-visible { color: #e51b25; outline: 3px solid rgba(229, 27, 37, .2); outline-offset: 2px; }
.public-profile-media-button.banner { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 8px; font-size: .62rem; font-weight: 800; }
.public-profile-media-button.avatar { display: grid; width: 32px; height: 32px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #e51b25; font-size: .65rem; }
.public-profile-media-menu { position: absolute; top: calc(100% + 8px); right: 0; display: grid; width: 150px; padding: 6px; border: 1px solid #d7dbe0; border-radius: 10px; background: #fff; box-shadow: 0 10px 24px rgba(31, 35, 40, .2); }
.public-profile-media-menu[hidden] { display: none; }
.public-profile-media-menu button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 7px; color: #1c1e21; background: transparent; font-size: .62rem; font-weight: 800; text-align: left; cursor: pointer; }
.public-profile-media-menu button:hover,
.public-profile-media-menu button:focus-visible { color: #e51b25; background: #f0f2f5; outline: 0; }
.public-profile-media-menu button i { width: 16px; color: #e51b25; text-align: center; }
.profile-post-card { position: relative; }
.profile-post-card > .profile-post-menu-wrap { padding: 0; }
.profile-post-menu-wrap { position: absolute; top: 9px; right: 9px; z-index: 8; }
.profile-post-menu-wrap .feed-more { color: #65676b; background: #f0f2f5; }
.profile-post-menu-wrap .feed-post-menu { top: calc(100% + 6px); }
body.feed-body .profile-post-menu-wrap .feed-post-menu { border-color: #d7dbe0; background: #fff; box-shadow: 0 8px 20px rgba(31, 35, 40, .16); }
body.feed-body .profile-post-menu-wrap .feed-post-menu button { color: #1c1e21; }
.feed-profile-editor { width: min(100%, 760px); margin: 14px auto 0; padding: 15px; border: 1px solid #d7dbe0; border-radius: 13px; background: #fff; box-shadow: 0 4px 16px rgba(31, 35, 40, .1); }
.feed-profile-editor[hidden] { display: none; }
.feed-profile-editor.is-overlay { position: fixed; top: 50%; left: 50%; z-index: 201; display: flex; width: min(1100px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: 0; padding: 20px; flex-direction: column; border: 1px solid #d7dbe0; border-radius: 16px; background: #fff; box-shadow: 0 24px 80px rgba(15, 23, 42, .35); transform: translate(-50%, -50%); overflow-y: auto; }
.feed-profile-editor.is-overlay[hidden] { display: none; }
.feed-profile-editor.is-overlay .feed-profile-editor-head h2 { color: #1c1e21; }
.feed-profile-editor.is-overlay .feed-section-kicker { color: #e51b25; }
.feed-profile-editor.is-overlay .feed-profile-editor-stage { min-height: 0; border-color: #cfd4da; }
.feed-profile-editor.is-overlay .feed-profile-editor-actions { margin-top: 14px; }
body.feed-profile-editor-open { overflow: hidden; }
body.feed-profile-editor-open::before { position: fixed; inset: 0; z-index: 200; content: ""; background: rgba(15, 23, 42, .62); }
.feed-profile-editor-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.feed-profile-editor-head h2 { margin: 4px 0 0; color: #1c1e21; font-family: "Space Grotesk", sans-serif; font-size: 1rem; }
.feed-profile-editor-head > button { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; color: #65676b; background: #f0f2f5; cursor: pointer; }
.feed-profile-editor-help { margin: -3px 0 11px; color: #65676b; font-size: .62rem; }
.feed-profile-editor-stage { overflow: hidden; border: 1px solid #d7dbe0; border-radius: 10px; background: #260306; }
.feed-profile-editor-stage canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
.feed-profile-editor-stage canvas:active { cursor: grabbing; }
.feed-profile-editor-stage.avatar { width: min(100%, 420px); margin-inline: auto; border-radius: 50%; }
.feed-profile-editor-stage.banner { width: 100%; }
.feed-profile-editor-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px; }
.feed-profile-editor-actions .btn { min-height: 35px; padding-inline: 12px; }
.profile-post-card[hidden] { display: none !important; }

@media (max-width: 620px) {
  body.feed-body .feed-composer-card { padding: 8px; }
  .feed-composer-dialog { max-height: calc(100dvh - 16px); border-radius: 12px; }
  .feed-composer-dialog form { padding-inline: 12px; }
  .feed-composer-dialog .feed-composer-head { min-height: 52px; }
  .feed-add-to-post { align-items: start; flex-direction: column; }
  .feed-add-actions { width: 100%; justify-content: space-between; }
  .feed-add-actions button { flex-direction: column; min-width: 45px; padding-inline: 3px; }
  .feed-upload-row { align-items: stretch; flex-wrap: wrap; }
  .feed-upload-row > span { order: 3; flex: 1 1 100%; width: 100%; }
  .feed-upload-row > #feedPublishButton { flex: 1 1 auto; }
  .public-profile-media-button.banner { right: 10px; bottom: 10px; padding: 8px 9px; }
  .public-profile-media-button.banner span { display: none; }
  .public-profile-banner { height: 340px; }
  body.feed-body .public-profile-backdrop { top: 48px; height: 340px; }
  .feed-profile-editor.is-overlay { inset: 8px; width: auto; max-height: calc(100dvh - 16px); padding: 13px; transform: none; }
  .feed-profile-editor { padding: 11px; }
  .feed-profile-editor-actions { flex-direction: column-reverse; }
  .feed-profile-editor-actions .btn { width: 100%; }
}

/* Banner adjustment happens directly over the real cover area. The canvas
   therefore has the same width/height ratio as the saved public banner. */
.feed-profile-editor.is-overlay[data-profile-editor-panel="banner"] { position: absolute; inset: 0; z-index: 30; display: block; width: auto; max-height: none; margin: 0; padding: 0; border: 0; border-radius: inherit; background: rgba(5, 0, 0, .4); box-shadow: none; transform: none; overflow: hidden; }
.feed-profile-editor.is-overlay[data-profile-editor-panel="banner"] .feed-profile-editor-head { position: absolute; top: 12px; right: 14px; left: 14px; z-index: 4; margin: 0; }
.feed-profile-editor.is-overlay[data-profile-editor-panel="banner"] .feed-profile-editor-head h2 { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.75); }
.feed-profile-editor.is-overlay[data-profile-editor-panel="banner"] .feed-section-kicker { color: #ff7c82; text-shadow: 0 2px 6px rgba(0,0,0,.75); }
.feed-profile-editor.is-overlay[data-profile-editor-panel="banner"] .feed-profile-editor-head > button { color: #1c1e21; background: rgba(255,255,255,.9); }
.feed-profile-editor.is-overlay[data-profile-editor-panel="banner"] .feed-profile-editor-help { position: absolute; bottom: 13px; left: 15px; z-index: 4; margin: 0; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.feed-profile-editor.is-overlay[data-profile-editor-panel="banner"] .feed-profile-editor-stage { position: absolute; inset: 0; min-height: 0; border: 0; border-radius: inherit; }
.feed-profile-editor.is-overlay[data-profile-editor-panel="banner"] .feed-profile-editor-stage canvas { width: 100%; height: 100%; }
.feed-profile-editor.is-overlay[data-profile-editor-panel="banner"] .feed-profile-editor-actions { position: absolute; right: 14px; bottom: 11px; z-index: 4; margin: 0; }
.feed-profile-editor.is-overlay[data-profile-editor-panel="banner"][hidden] { display: none; }

/* The saved cover is also visible as the owner's first public profile post. */
.profile-cover-post { grid-column: 1 / -1; }
.profile-cover-post .profile-post-media { min-height: 270px; }
.profile-cover-post .profile-post-media img { height: auto; max-height: 520px; object-fit: contain; }
.profile-cover-post .profile-cover-post-note { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; color: #65676b; font-size: .62rem; }
.profile-cover-post .profile-cover-post-note i { color: #e51b25; }

/* Post visibility picker inside the Create post composer. */
.feed-composer-profile-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feed-visibility-control { position: relative; flex: 0 0 auto; }
.feed-visibility-button { display: inline-flex; align-items: center; gap: 6px; min-height: 27px; padding: 4px 7px; border: 0; border-radius: 6px; color: #65676b; background: #e4e6eb; font-size: .58rem; cursor: pointer; }
.feed-visibility-button > span { display: inline-flex; align-items: center; gap: 4px; }
.feed-visibility-button #feedVisibilityIcon { color: #4b4f54; font-size: .57rem; }
.feed-visibility-button:hover,
.feed-visibility-button:focus-visible { background: #d7dbe0; outline: 0; }
.feed-visibility-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 8; display: grid; width: min(290px, calc(100vw - 42px)); padding: 6px; border: 1px solid #d7dbe0; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(31, 35, 40, .2); }
.feed-visibility-menu[hidden] { display: none; }
.feed-visibility-menu button { display: grid; grid-template-columns: 28px minmax(0, 1fr) 18px; align-items: center; gap: 7px; width: 100%; padding: 8px 7px; border: 0; border-radius: 7px; color: #65676b; background: transparent; text-align: left; cursor: pointer; }
.feed-visibility-menu button:hover,
.feed-visibility-menu button:focus-visible { background: #f0f2f5; outline: 0; }
.feed-visibility-menu button > i:first-child { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #e51b25; background: #fff0f1; font-size: .66rem; }
.feed-visibility-menu button:nth-child(2) > i:first-child { color: #8a5cf6; background: #f2edff; }
.feed-visibility-menu button:nth-child(3) > i:first-child { color: #4b4f54; background: #eef0f2; }
.feed-visibility-menu button:nth-child(4) > i:first-child { color: #1877f2; background: #e8f1ff; }
.feed-visibility-menu button > span { display: grid; gap: 2px; min-width: 0; }
.feed-visibility-menu button strong { color: #1c1e21; font-size: .63rem; }
.feed-visibility-menu button small { overflow: hidden; color: #65676b; font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.feed-visibility-menu button > i:last-child { color: #e51b25; font-size: .62rem; opacity: 0; }
.feed-visibility-menu button[aria-selected="true"] { background: #fff0f1; }
.feed-visibility-menu button[aria-selected="true"] > i:last-child { opacity: 1; }

@media (max-width: 620px) {
  .feed-composer-profile-row { align-items: start; }
  .feed-visibility-menu { right: -2px; }
}

/* Public profiles use a Facebook-like two-column shell and a single
   chronological post stream.  The older three-column profile cards remain
   available to other templates but are intentionally overridden here for the
   replaceable Feed app profile page. */
html:has(body.feed-body),
body.feed-body,
body.feed-body .feed-shell,
body.feed-body .feed-shell > main,
body.feed-body .public-profile-page { overflow-x: hidden; }

body.feed-body .public-profile-page { min-width: 0; }
body.feed-body .public-profile-wrap { max-width: 1180px; }
body.feed-body .public-profile-content-layout {
  display: grid;
  grid-template-columns: minmax(230px, 350px) minmax(0, 760px);
  align-items: start;
  gap: 16px;
}
body.feed-body .public-profile-sidebar {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 16px;
  min-width: 0;
}
body.feed-body .profile-info-card {
  padding: 17px;
  border: 1px solid #d7dbe0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 9px rgba(31, 35, 40, .07);
}
body.feed-body .profile-info-card h2 {
  margin: 0 0 9px;
  color: #1c1e21;
  font-size: 1rem;
}
body.feed-body .profile-info-card p {
  margin: 0;
  color: #65676b;
  font-size: .68rem;
  line-height: 1.55;
}
body.feed-body .profile-info-card .profile-info-bio { margin: 0 0 1px; color: #36393f; white-space: pre-line; }
body.feed-body .profile-info-list a { color: #e51b25; overflow-wrap: anywhere; }
body.feed-body .profile-info-muted { margin-bottom: 12px !important; }
body.feed-body .profile-info-list { display: grid; gap: 11px; }
body.feed-body .profile-info-list span,
body.feed-body .profile-community-card > span {
  display: flex;
  align-items: start;
  gap: 9px;
  color: #36393f;
  font-size: .67rem;
  line-height: 1.45;
}
body.feed-body .profile-info-list i,
body.feed-body .profile-community-card > span i { width: 16px; color: #e51b25; text-align: center; }
body.feed-body .profile-community-card p { margin-bottom: 12px; }
body.feed-body .public-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
  align-content: start;
}
body.feed-body .profile-feed-post {
  overflow: visible;
  min-width: 0;
  padding: 14px 15px 0;
  border-radius: 13px;
}
body.feed-body .profile-feed-post > .feed-post-head { margin-bottom: 0; }
body.feed-body .profile-feed-post .feed-user { color: #1c1e21; }
body.feed-body .profile-feed-post .feed-user strong { color: #1c1e21; font-size: .82rem; }
body.feed-body .profile-feed-post .feed-user small { color: #65676b; font-size: .61rem; }
body.feed-body .profile-feed-post .feed-user small i { color: #65676b; }
body.feed-body .profile-feed-post .feed-post-text {
  margin: 14px 0;
  color: #1c1e21;
  font-size: .83rem;
  line-height: 1.6;
}
body.feed-body .profile-feed-cover-note { margin: 10px 0 11px; color: #65676b; }
body.feed-body .profile-feed-post .profile-post-media {
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  border-radius: 9px;
  background: #f0f2f5;
}
body.feed-body .profile-feed-image-wrap { overflow: hidden; }
body.feed-body .profile-feed-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 680px;
  border-radius: 9px;
  background: #f0f2f5;
  object-fit: contain;
}
body.feed-body .profile-feed-cover-image { max-height: 720px; }
body.feed-body .profile-feed-post .profile-post-media-fallback { min-height: 180px; height: 180px; }
body.feed-body .profile-feed-post .feed-post-video-wrap { margin-top: 11px; }
body.feed-body .profile-feed-post .feed-post-video { max-height: 680px; }
body.feed-body .profile-feed-post .feed-embed { margin-top: 11px; }
body.feed-body .profile-feed-post > .feed-post-stats {
  margin-top: 12px;
  padding: 0 2px 9px;
  color: #65676b;
}
body.feed-body .profile-feed-post > .feed-post-actions {
  padding: 0;
  border-color: #e2e5e9;
}
body.feed-body .profile-feed-post > .feed-post-actions button {
  min-height: 41px;
  color: #65676b;
  font-size: .68rem;
}
body.feed-body .profile-feed-post > .feed-post-actions button:hover,
body.feed-body .profile-feed-post > .feed-post-actions button.active {
  color: #e51b25;
  background: #fff4f4;
}
body.feed-body .profile-feed-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 2px 11px !important;
}
body.feed-body .profile-feed-post-footer .feed-post-permalink {
  margin: 0;
  color: #e51b25;
  font-size: .62rem;
}
body.feed-body .profile-feed-post-footer .feed-post-permalink:hover { color: #b80712; }
body.feed-body .profile-feed-own-actions { margin: 7px 0 2px; }
body.feed-body .profile-feed-own-actions > span { color: #65676b; }
body.feed-body .profile-feed-post .feed-comments {
  margin: 0 -15px;
  padding: 13px 15px 14px;
  border-top: 1px solid #e2e5e9;
  background: #fff;
}
body.feed-body .profile-feed-post .feed-comment-form { background: linear-gradient(180deg, transparent, #fff 20%); }
body.feed-body .profile-feed-cover-post .profile-feed-image { max-height: 740px; }

/* Keep the cover editor and the action buttons attached to the cover card,
   but lower the buttons so neither one kisses the banner edge. */
body.feed-body .public-profile-main > .btn { transform: translateY(14px); }
body.feed-body .public-profile-main > .btn:hover,
body.feed-body .public-profile-main > .btn:focus-visible { transform: translateY(14px); }

@media (max-width: 900px) {
  body.feed-body .public-profile-content-layout { grid-template-columns: minmax(0, 1fr); }
  body.feed-body .public-profile-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.feed-body .public-profile-grid { grid-template-columns: minmax(0, 760px); justify-content: center; }
}

@media (max-width: 620px) {
  body.feed-body .public-profile-sidebar { grid-template-columns: 1fr; }
  body.feed-body .public-profile-grid { grid-template-columns: minmax(0, 1fr); }
  body.feed-body .public-profile-main > .btn,
  body.feed-body .public-profile-main > .btn:hover,
  body.feed-body .public-profile-main > .btn:focus-visible { transform: translateY(8px); }
  body.feed-body .profile-feed-post { padding-inline: 11px; }
  body.feed-body .profile-feed-post .feed-comments { margin-inline: -11px; padding-inline: 11px; }
}

/* -------------------------------------------------------------------------
   Siskul brand surface
   The social layout remains the same, but the Feed canvas below the navbar
   uses the product's dark red/black visual system instead of the generic
   light social-demo override above it.
   ------------------------------------------------------------------------- */
body.feed-body,
body.feed-body .feed-shell > main,
body.feed-body .feed-page,
body.feed-body .public-profile-page {
  color: #f8eded;
  background: radial-gradient(circle at 50% 0%, rgba(111, 7, 13, .42), transparent 35%), linear-gradient(135deg, #0b0102 0%, #160306 54%, #070102 100%);
}

body.feed-body .feed-topbar {
  background: linear-gradient(180deg, rgba(11, 1, 2, .98), rgba(11, 1, 2, .88) 78%, transparent);
}

body.feed-body .feed-tabs,
body.feed-body .feed-search,
body.feed-body .feed-composer-launcher,
body.feed-body .feed-composer-card,
body.feed-body .feed-post-card,
body.feed-body .feed-reels-strip,
body.feed-body .feed-right-card,
body.feed-body .feed-comments-panel,
body.feed-body .profile-info-card,
body.feed-body .profile-post-card,
body.feed-body .public-profile-cover {
  border-color: rgba(255, 45, 55, .34);
  background: rgba(20, 3, 5, .9);
  box-shadow: 0 17px 44px rgba(0, 0, 0, .32);
}

body.feed-body .feed-tabs button,
body.feed-body .feed-search input,
body.feed-body .feed-composer-launcher,
body.feed-body .feed-right-muted,
body.feed-body .feed-rail-footer,
body.feed-body .feed-right-footer {
  color: #c8abad;
}

body.feed-body .feed-tabs button.active,
body.feed-body .feed-tabs button:hover,
body.feed-body .feed-rail-nav a:hover,
body.feed-body .feed-rail-nav a:focus-visible,
body.feed-body .feed-rail-nav a.active,
body.feed-body .feed-composer-launcher:hover,
body.feed-body .feed-composer-launcher:focus-visible,
body.feed-body .feed-sponsored-card:hover,
body.feed-body .feed-sponsored-card:focus-visible,
body.feed-body .feed-suggestion-row:hover {
  color: #fff;
  border-color: rgba(255, 70, 80, .55);
  background: rgba(255, 31, 42, .13);
}

body.feed-body .feed-rail-profile strong,
body.feed-body .feed-suggestion-user strong,
body.feed-body .feed-post-card .feed-user,
body.feed-body .feed-post-card .feed-user strong,
body.feed-body .feed-post-card .feed-post-text,
body.feed-body .feed-composer-head h2,
body.feed-body .feed-composer-head button,
body.feed-body .feed-reels-strip-head h2,
body.feed-body .feed-right-card-head h2,
body.feed-body .feed-sponsored-card,
body.feed-body .feed-sponsored-card strong,
body.feed-body .profile-info-card h2,
body.feed-body .profile-info-card p,
body.feed-body .profile-info-list span,
body.feed-body .profile-community-card > span,
body.feed-body .public-profile-main h1,
body.feed-body .profile-post-card p,
body.feed-body .profile-feed-post .feed-user,
body.feed-body .profile-feed-post .feed-user strong,
body.feed-body .profile-feed-post .feed-post-text {
  color: #fff;
}

body.feed-body .feed-rail-profile small,
body.feed-body .feed-suggestion-user small,
body.feed-body .feed-post-card .feed-user small,
body.feed-body .profile-feed-post .feed-user small,
body.feed-body .feed-post-card .feed-post-stats,
body.feed-body .profile-feed-post > .feed-post-stats,
body.feed-body .profile-info-card p,
body.feed-body .public-profile-main p:last-child,
body.feed-body .public-profile-stats span,
body.feed-body .profile-feed-cover-note,
body.feed-body .profile-feed-own-actions > span,
body.feed-body .feed-sponsored-card small,
body.feed-body .feed-right-card-head h2 {
  color: #c3abad;
}

body.feed-body .feed-rail-nav a { color: #d8c5c7; }
body.feed-body .feed-rail-nav a.active { color: #fff; }
body.feed-body .feed-rail-nav a i,
body.feed-body .feed-section-kicker,
body.feed-body .feed-right-card-head > a,
body.feed-body .feed-right-card-head > button,
body.feed-body .feed-reels-strip-head > button,
body.feed-body .feed-sponsored-card b,
body.feed-body .profile-info-list i,
body.feed-body .profile-community-card > span i,
body.feed-body .feed-rail-nav a.active i { color: #ff4c56; }

body.feed-body .feed-composer-prompt { color: #c5b0b2; background: rgba(255,255,255,.07); }
body.feed-body .feed-composer-launcher-actions { color: #ff4c56; }
body.feed-body .feed-composer-launcher-actions i:nth-child(2) { color: #42d879; }
body.feed-body .feed-composer-launcher-actions i:nth-child(3) { color: #ff7180; }
body.feed-body .feed-composer-card { color: #fff; }
body.feed-body .feed-composer-head h2 span { color: #ff4c56; }
body.feed-body .composer-type-tabs button,
body.feed-body .feed-upload-button { border-color: rgba(255,255,255,.14); color: #cdb9bb; background: rgba(255,255,255,.045); }
body.feed-body .composer-type-tabs button.active { border-color: rgba(255,75,85,.6); color: #fff; background: rgba(255,31,42,.14); }
body.feed-body #feedPostText,
body.feed-body .feed-url-field,
body.feed-body .feed-trim-controls input,
body.feed-body .feed-comment-form input { border-color: rgba(255,255,255,.13); color: #fff; background: rgba(0,0,0,.28); }
body.feed-body #feedPostText::placeholder,
body.feed-body .feed-url-field input::placeholder,
body.feed-body .feed-comment-form input::placeholder { color: #9f888b; }
body.feed-body .feed-url-field input { color: #fff; }
body.feed-body .feed-upload-row > span { color: #9f888b; }

body.feed-body .feed-reels-strip-head h2 { color: #fff; }
body.feed-body .feed-reels-strip { background: linear-gradient(135deg, rgba(42, 5, 8, .94), rgba(16, 2, 4, .94)); }
body.feed-body .feed-reels-track { scrollbar-color: rgba(255, 64, 75, .7) rgba(255,255,255,.06); }
body.feed-body .feed-reel-tile { border: 1px solid rgba(255, 70, 80, .22); }

body.feed-body .feed-post-card .feed-post-actions,
body.feed-body .profile-feed-post > .feed-post-actions { border-color: rgba(255,255,255,.1); }
body.feed-body .feed-post-card .feed-post-actions button,
body.feed-body .profile-feed-post > .feed-post-actions button { color: #c7b1b3; }
body.feed-body .feed-post-card .feed-post-actions button:hover,
body.feed-body .feed-post-card .feed-post-actions button.active,
body.feed-body .profile-feed-post > .feed-post-actions button:hover,
body.feed-body .profile-feed-post > .feed-post-actions button.active { color: #ff4c56; background: rgba(255,31,42,.1); }
body.feed-body .feed-post-card .feed-comment > div { background: rgba(255,255,255,.065); }
body.feed-body .feed-post-card .feed-comment p { color: #eadbdc; }
body.feed-body .feed-post-card .feed-comment-tools button { color: #bca6a8; }
body.feed-body .feed-post-image,
body.feed-body .profile-feed-image,
body.feed-body .profile-feed-post .profile-post-media { background: #210507; }
body.feed-body .feed-post-cover-note i,
body.feed-body .feed-own-post-actions > span i { color: #ff4c56; }
body.feed-body .feed-start-ads,
body.feed-body .profile-card-actions .profile-start-ads { background: linear-gradient(135deg,#e3131b,#ff5260); }

body.feed-body .feed-sponsored-card { color: #fff; }
body.feed-body .feed-sponsored-card:hover { background: rgba(255,31,42,.1); }
body.feed-body .feed-suggestion-row:hover { background: rgba(255,31,42,.1); }
body.feed-body .feed-suggestion-row .feed-follow-button { color: #ff6670; border-color: rgba(255,102,112,.5); background: rgba(255,31,42,.08); }
body.feed-body .feed-comments-panel,
body.feed-body .feed-comments-panel-body { background: #140305; }
body.feed-body .feed-comments-panel-head { border-color: rgba(255,255,255,.1); }
body.feed-body .feed-comments-panel-head h2,
body.feed-body .feed-comments-panel-head > button,
body.feed-body .feed-comments-empty { color: #fff; }
body.feed-body .feed-comments-panel-body .feed-comment-form { background: linear-gradient(180deg, transparent, #140305 18%); }

body.feed-body .public-profile-backdrop::after { background: linear-gradient(90deg, rgba(10,1,2,.7), rgba(10,1,2,.08) 24%, rgba(10,1,2,.08) 76%, rgba(10,1,2,.7)), linear-gradient(180deg, rgba(10,1,2,.05), rgba(10,1,2,.15) 48%, rgba(10,1,2,.92)); }
body.feed-body .public-profile-cover { background: rgba(18,2,4,.92); }
body.feed-body .public-profile-stats span { border-color: rgba(255,255,255,.1); color: #c3abad; background: rgba(0,0,0,.24); }
body.feed-body .public-profile-stats strong { color: #fff; }
body.feed-body .public-profile-tabs { border-color: rgba(255,255,255,.12); }
body.feed-body .public-profile-tabs button { color: #bda6a9; }
body.feed-body .public-profile-tabs button.active { color: #ff4c56; border-color: #ff4c56; }
body.feed-body .profile-info-card,
body.feed-body .profile-post-card { border-color: rgba(255,45,55,.3); background: rgba(19,3,5,.92); }
body.feed-body .profile-info-card .profile-info-bio,
body.feed-body .profile-feed-post .feed-post-text { color: #f3e5e6; }
body.feed-body .profile-feed-post .feed-comments { border-color: rgba(255,255,255,.1); background: #140305; }
body.feed-body .profile-feed-post .feed-comment-form { background: linear-gradient(180deg, transparent, #140305 20%); }
body.feed-body .profile-feed-post-footer { border-color: rgba(255,255,255,.1); }

@media (max-width: 900px) {
  body.feed-body .feed-page > .feed-layout { width: min(calc(100% - 20px), 900px); }
}

/* Final Siskul brand pass for the composer, visibility picker and Reel
   surfaces.  These rules intentionally come last because the composer was
   originally styled as a light Facebook-like dialog. */
body.feed-body .feed-composer-launcher {
  border-color: rgba(255, 54, 66, .42);
  background: linear-gradient(135deg, rgba(42, 5, 8, .96), rgba(16, 2, 4, .96));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
}

body.feed-body .feed-composer-launcher-open {
  color: #f4dfe1;
  background: rgba(255, 255, 255, .09);
}

body.feed-body .feed-composer-launcher-open:hover,
body.feed-body .feed-composer-launcher-open:focus-visible {
  color: #fff;
  background: rgba(255, 31, 42, .16);
}

body.feed-body .feed-composer-card {
  background: rgba(8, 0, 2, .82);
}

body.feed-body .feed-composer-dialog {
  border-color: rgba(255, 55, 67, .58);
  color: #fff;
  background: linear-gradient(145deg, #250509 0%, #100204 58%, #250508 100%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .72), 0 0 36px rgba(229, 27, 37, .2);
}

body.feed-body .feed-composer-dialog::-webkit-scrollbar-thumb { background: #8d1821; }
body.feed-body .feed-composer-dialog .feed-composer-head {
  border-bottom-color: rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(66, 7, 12, .98), rgba(28, 3, 6, .96));
}

body.feed-body .feed-composer-dialog .feed-composer-head h2,
body.feed-body .feed-composer-dialog .feed-composer-profile strong,
body.feed-body .feed-composer-dialog .feed-add-to-post > strong,
body.feed-body .feed-composer-dialog .feed-text-style-button,
body.feed-body .feed-composer-dialog .feed-media-preview-head strong {
  color: #fff;
}

body.feed-body .feed-composer-dialog .feed-composer-profile small { color: #d0b8bb; }
body.feed-body .feed-composer-dialog .feed-composer-profile small span {
  color: #ffe9eb;
  background: rgba(255, 255, 255, .1);
}

body.feed-body .feed-composer-dialog .feed-composer-close {
  color: #ffe4e6;
  background: rgba(255, 255, 255, .12);
}

body.feed-body .feed-composer-dialog .feed-composer-close:hover,
body.feed-body .feed-composer-dialog .feed-composer-close:focus-visible {
  color: #fff;
  background: #d71925;
}

body.feed-body .feed-visibility-button {
  border: 1px solid rgba(255, 111, 119, .35);
  color: #ffe9eb;
  background: rgba(255, 255, 255, .1);
}

body.feed-body .feed-visibility-button #feedVisibilityIcon { color: #ff646d; }
body.feed-body .feed-visibility-button:hover,
body.feed-body .feed-visibility-button:focus-visible { background: rgba(255, 31, 42, .2); }
body.feed-body .feed-visibility-menu {
  border-color: rgba(255, 74, 84, .55);
  background: #210407;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .62);
}

body.feed-body .feed-visibility-menu button { color: #ead7d9; }
body.feed-body .feed-visibility-menu button strong { color: #fff; }
body.feed-body .feed-visibility-menu button small { color: #bfa7aa; }
body.feed-body .feed-visibility-menu button:hover,
body.feed-body .feed-visibility-menu button:focus-visible,
body.feed-body .feed-visibility-menu button[aria-selected="true"] { background: rgba(255, 31, 42, .18); }
body.feed-body .feed-visibility-menu button > i:first-child { color: #ff6670; background: rgba(255, 31, 42, .14); }
body.feed-body .feed-visibility-menu button:nth-child(2) > i:first-child { color: #d5a3ff; background: rgba(152, 89, 255, .16); }
body.feed-body .feed-visibility-menu button:nth-child(3) > i:first-child { color: #d2c3c5; background: rgba(255, 255, 255, .12); }
body.feed-body .feed-visibility-menu button:nth-child(4) > i:first-child { color: #70a8ff; background: rgba(24, 119, 242, .15); }
body.feed-body .feed-visibility-menu button > i:last-child { color: #ff4c56; }

body.feed-body .feed-composer-dialog #feedPostText {
  color: #fff;
  background: rgba(0, 0, 0, .16);
}

body.feed-body .feed-composer-dialog #feedPostText::placeholder,
body.feed-body .feed-composer-dialog .feed-url-field input::placeholder { color: #b99fa2; }
body.feed-body .feed-composer-dialog .feed-url-field {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .18);
}
body.feed-body .feed-composer-dialog .feed-url-field i { color: #ff5b64; }
body.feed-body .feed-composer-dialog .feed-url-field input { color: #fff; background: transparent; }
body.feed-body .feed-composer-dialog .feed-add-to-post {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
}
body.feed-body .feed-composer-dialog .feed-add-actions button { color: #d6c0c2; }
body.feed-body .feed-composer-dialog .feed-add-actions button:hover,
body.feed-body .feed-composer-dialog .feed-add-actions button:focus-visible { background: rgba(255, 31, 42, .16); }
body.feed-body .feed-composer-dialog .feed-add-actions button:nth-child(1) i { color: #43dc7b; }
body.feed-body .feed-composer-dialog .feed-add-actions button:nth-child(2) i { color: #56a2ff; }
body.feed-body .feed-composer-dialog .feed-add-actions button:nth-child(3) i { color: #ff6570; }
body.feed-body .feed-composer-dialog .feed-add-actions button:nth-child(4) i { color: #ffbd54; }
body.feed-body .feed-composer-dialog .feed-add-actions button:nth-child(5) i { color: #ff83a0; }

body.feed-body .feed-composer-dialog .feed-media-preview,
body.feed-body .feed-composer-dialog .feed-link-preview {
  border-color: rgba(255, 255, 255, .15);
  color: #f9e9ea;
  background: rgba(0, 0, 0, .24);
}
body.feed-body .feed-composer-dialog .feed-media-preview-head button { color: #ff8a91; }
body.feed-body .feed-composer-dialog .feed-upload-button {
  border-color: rgba(255, 100, 110, .55);
  color: #ffe8e9;
  background: rgba(255, 31, 42, .14);
}
body.feed-body .feed-composer-dialog .feed-upload-button:hover,
body.feed-body .feed-composer-dialog .feed-upload-button:focus-within { background: rgba(255, 31, 42, .28); }
body.feed-body .feed-composer-dialog .feed-upload-row > span { color: #bda5a8; }
body.feed-body .feed-composer-dialog .feed-form-error { color: #ff9da4; }

body.feed-body .composer-type-tabs button {
  border-color: rgba(255, 255, 255, .17);
  color: #d5c1c3;
  background: rgba(255, 255, 255, .055);
}
body.feed-body .composer-type-tabs button:hover,
body.feed-body .composer-type-tabs button:focus-visible,
body.feed-body .composer-type-tabs button.active {
  border-color: rgba(255, 79, 90, .68);
  color: #fff;
  background: rgba(255, 31, 42, .2);
}

body.feed-body .feed-sponsored-post-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 18px 9px;
  color: #d9bfc2;
  font-size: .58rem;
}
body.feed-body .feed-sponsored-post-label span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 77, 88, .52);
  border-radius: 999px;
  color: #ff969d;
  background: rgba(255, 31, 42, .14);
  font-weight: 800;
  letter-spacing: .02em;
}
body.feed-body .feed-sponsored-post-label small { color: #bda6a9; }
body.feed-body .feed-sponsored-post-label.profile { margin-top: 1px; }
body.feed-body .feed-sponsored-post-label.detail { margin-inline: 0; }

body.feed-body .feed-reel-tile { overflow: hidden; }
body.feed-body .feed-sponsor-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 102, 112, .58);
  border-radius: 999px;
  color: #fff;
  background: rgba(80, 4, 10, .86);
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
body.feed-body .feed-reel-sponsor-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 4px 6px;
}
body.feed-body .feed-reel-tile-sponsored { border-color: rgba(255, 88, 98, .72); box-shadow: 0 0 18px rgba(229, 27, 37, .17); }
body.feed-body .feed-reel-viewer-sponsor { margin-bottom: 7px; }
body.feed-body .feed-reel-viewer-sponsor .feed-sponsored-post-label { margin: 0; }

@media (max-width: 620px) {
  body.feed-body .feed-sponsored-post-label { margin-inline: 12px; }
  body.feed-body .feed-reel-sponsor-badge { top: 6px; left: 6px; }
}

/* Profile readability and banner width pass.
   Keep the real banner image intact; only give the profile shell a little
   more horizontal room and make the information/feed text easier to read. */
body.feed-body .public-profile-wrap {
  width: min(1260px, calc(100% - 32px));
  max-width: 1260px;
}

body.feed-body .public-profile-content-layout {
  grid-template-columns: minmax(250px, 370px) minmax(0, 1fr);
  gap: 20px;
}

body.feed-body .profile-info-card {
  padding: 21px;
}

body.feed-body .profile-info-card h2 {
  margin-bottom: 12px;
  font-size: 1.22rem;
}

body.feed-body .profile-info-card p,
body.feed-body .profile-info-card .profile-info-bio,
body.feed-body .profile-community-card p {
  font-size: .84rem;
  line-height: 1.7;
}

body.feed-body .profile-info-list {
  gap: 13px;
}

body.feed-body .profile-info-list span,
body.feed-body .profile-community-card > span {
  font-size: .82rem;
  line-height: 1.6;
}

body.feed-body .profile-info-list i,
body.feed-body .profile-community-card > span i {
  width: 19px;
  flex: 0 0 19px;
  padding-top: 2px;
}

body.feed-body .profile-feed-post .feed-user strong {
  font-size: .92rem;
}

body.feed-body .profile-feed-post .feed-user small {
  font-size: .7rem;
}

body.feed-body .profile-feed-post .feed-post-text {
  font-size: .95rem;
  line-height: 1.7;
}

body.feed-body .profile-feed-cover-note {
  font-size: .76rem;
  line-height: 1.55;
}

body.feed-body .profile-feed-post > .feed-post-stats {
  font-size: .68rem;
}

body.feed-body .profile-feed-post > .feed-post-actions button {
  min-height: 46px;
  font-size: .78rem;
}

body.feed-body .profile-feed-post-footer .feed-post-permalink {
  font-size: .72rem;
}

@media (max-width: 900px) {
  body.feed-body .public-profile-wrap {
    width: min(100%, calc(100% - 20px));
  }

  body.feed-body .public-profile-content-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  body.feed-body .public-profile-wrap {
    width: calc(100% - 16px);
  }

  body.feed-body .profile-info-card {
    padding: 17px;
  }

  body.feed-body .profile-info-card h2 {
    font-size: 1.1rem;
  }

  body.feed-body .profile-info-card p,
  body.feed-body .profile-info-card .profile-info-bio,
  body.feed-body .profile-community-card p {
    font-size: .8rem;
  }

  body.feed-body .profile-info-list span,
  body.feed-body .profile-community-card > span {
    font-size: .78rem;
  }
}

/* Feed app shell: keep the category/search bar directly below the navbar and
   make the tablet/phone stream use the entire available viewport width. */
body.feed-body .feed-page {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

body.feed-body .feed-topbar {
  position: sticky !important;
  top: var(--nav-h, 70px) !important;
  z-index: 90 !important;
  margin-top: 0 !important;
  padding-top: 7px !important;
  padding-bottom: 9px !important;
  background: linear-gradient(180deg, rgba(11, 1, 2, .99) 0%, rgba(11, 1, 2, .96) 76%, rgba(11, 1, 2, 0) 100%);
}

/* Keep any stale cached template from showing the removed CTA. */
body.feed-body .feed-create-button {
  display: none !important;
}

@media (max-width: 1023px) {
  body.feed-body .feed-page > .feed-layout,
  body.feed-body .feed-layout.comments-open {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.feed-body .feed-left-rail,
  body.feed-body .feed-right-rail {
    display: none !important;
  }

  body.feed-body .feed-main-column,
  body.feed-body .feed-comments-panel {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.feed-body .feed-topbar,
  body.feed-body .feed-composer-launcher,
  body.feed-body .feed-reels-strip,
  body.feed-body .feed-stream,
  body.feed-body .feed-post-card {
    width: 100% !important;
    max-width: none !important;
  }

  body.feed-body .feed-post-card,
  body.feed-body .feed-composer-launcher,
  body.feed-body .feed-reels-strip {
    border-right: 0;
    border-left: 0;
  }
}

/* Mobile profile follows the compact social-profile flow from the reference:
   short cover, overlapping avatar, centered identity, existing actions and
   stats, then the existing tabs/details/posts.  No new profile content is
   introduced and desktop/tablet-wide profile styling remains unchanged. */
@media (max-width: 620px) {
  body.feed-body .public-profile-page {
    padding-top: 0 !important;
    padding-bottom: 84px !important;
  }

  body.feed-body .public-profile-backdrop {
    top: 0;
    height: 250px;
    opacity: .42;
  }

  body.feed-body .public-profile-wrap {
    width: 100% !important;
    max-width: none !important;
    padding-bottom: 16px;
  }

  body.feed-body .public-profile-cover {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  body.feed-body .public-profile-banner {
    height: 154px;
    border-radius: 0;
  }

  body.feed-body .public-profile-media-control.banner {
    top: 12px;
    right: 12px;
    bottom: auto;
  }

  body.feed-body .public-profile-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: -57px;
    padding: 0 12px;
    text-align: center;
  }

  body.feed-body .public-profile-main > .public-profile-avatar-wrap,
  body.feed-body .public-profile-main > div {
    flex: 0 0 100%;
    width: 100%;
  }

  body.feed-body .public-profile-main > .public-profile-avatar-wrap {
    height: 114px;
  }

  body.feed-body .public-profile-avatar {
    width: 114px;
    height: 114px;
    margin: 0 auto;
    border-width: 4px;
  }

  body.feed-body .public-profile-main > div {
    padding-top: 0;
  }

  body.feed-body .public-profile-main > div .eyebrow {
    margin: 0 0 4px;
    font-size: .53rem;
  }

  body.feed-body .public-profile-main h1 {
    font-size: 1.55rem;
    line-height: 1.1;
  }

  body.feed-body .public-profile-main p:last-child {
    margin-top: 5px;
    font-size: .67rem;
  }

  body.feed-body .public-profile-main > .btn,
  body.feed-body .public-profile-main > .btn:hover,
  body.feed-body .public-profile-main > .btn:focus-visible {
    flex: 0 0 auto;
    margin: 3px 0 0;
    transform: none;
  }

  body.feed-body .public-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 16px 10px 10px;
  }

  body.feed-body .public-profile-stats span {
    min-height: 48px;
    padding: 8px 5px;
    font-size: .55rem;
  }

  body.feed-body .public-profile-stats strong {
    margin-bottom: 3px;
    font-size: 1rem;
  }

  body.feed-body .public-profile-tabs {
    gap: 0;
    margin: 10px 8px 0;
  }

  body.feed-body .public-profile-tabs button {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 4px;
    font-size: .68rem;
  }

  body.feed-body .public-profile-content-layout {
    display: block;
  }

  body.feed-body .public-profile-sidebar {
    display: block;
  }

  body.feed-body .profile-info-card {
    margin: 8px;
    padding: 16px;
    border-radius: 12px;
  }

  body.feed-body .profile-community-card {
    display: none;
  }

  body.feed-body .public-profile-grid {
    display: block;
  }

  body.feed-body .profile-feed-post {
    margin: 8px;
    padding: 12px 11px 0;
    border-radius: 12px;
  }
}

@media (max-width: 620px) {
  body.feed-body .feed-topbar {
    padding-top: 5px !important;
    padding-bottom: 8px !important;
  }

  body.feed-body .feed-post-card {
    padding-right: 10px;
    padding-left: 10px;
  }
}
body.feed-body .feed-sponsored-message-row { display: flex; justify-content: flex-end; padding: 0 18px 10px; }
body.feed-body .feed-sponsored-message-form { margin: 0; }
body.feed-body .feed-sponsored-message-form button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(255,70,80,.5); border-radius: 8px; color: #fff; background: #e51f2a; padding: 8px 12px; font-size: .7rem; font-weight: 800; cursor: pointer; transition: .2s ease; }
body.feed-body .feed-sponsored-message-form button:hover { border-color: #ff9a9f; background: #f02a35; transform: translateY(-1px); }
@media (max-width: 760px) { body.feed-body .feed-sponsored-message-row { justify-content: stretch; padding-inline: 12px; } body.feed-body .feed-sponsored-message-form, body.feed-body .feed-sponsored-message-form button { width: 100%; } }

/* The navbar search icon is the single Feed search entry point. */
body.feed-body .feed-title-actions,
body.feed-body .feed-search {
  display: none !important;
}

/* Home should be able to show every supported format, including Reel posts.
   The hidden attribute is intentionally respected when Video/Reel tabs filter
   the stream. */
body.feed-body .feed-stream .feed-reel-source:not([hidden]) {
  display: block !important;
}

@media (max-width: 1023px) {
  /* App-like stream: the post itself is the page surface, not a nested card. */
  body.feed-body .feed-stream {
    display: block;
    width: 100% !important;
    padding: 0 0 102px !important;
  }

  body.feed-body .feed-stream > .feed-post-card {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 16px 0 17px !important;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .17);
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.feed-body .feed-stream > .feed-post-card:last-child {
    border-bottom: 0;
  }

  body.feed-body .feed-stream > .feed-post-card > .feed-post-head,
  body.feed-body .feed-stream > .feed-post-card > .feed-post-text,
  body.feed-body .feed-stream > .feed-post-card > .feed-post-permalink,
  body.feed-body .feed-stream > .feed-post-card > .feed-post-stats,
  body.feed-body .feed-stream > .feed-post-card > .feed-card-top-actions,
  body.feed-body .feed-stream > .feed-post-card > .feed-comments {
    margin-right: 12px;
    margin-left: 12px;
  }

  body.feed-body .feed-stream > .feed-post-card > .feed-post-text {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
  }

  body.feed-body .feed-stream > .feed-post-card > .feed-post-permalink {
    margin-top: 6px !important;
    margin-bottom: 2px !important;
  }

  body.feed-body .feed-stream > .feed-post-card .feed-sponsored-post-label {
    margin-right: 12px !important;
    margin-left: 12px !important;
  }

  body.feed-body .feed-stream > .feed-post-card .feed-sponsored-message-row {
    margin: 0 !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body.feed-body .feed-stream > .feed-post-card > .feed-post-actions {
    width: 100%;
    margin: 0 !important;
    border-right: 0;
    border-left: 0;
  }

  body.feed-body .feed-stream > .feed-post-card > .feed-post-actions button {
    min-height: 44px;
    font-size: .72rem;
  }

  /* Images, videos and embeds touch both viewport edges. */
  body.feed-body .feed-stream > .feed-post-card .feed-post-image-wrap,
  body.feed-body .feed-stream > .feed-post-card .feed-post-video-wrap,
  body.feed-body .feed-stream > .feed-post-card .feed-embed {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.feed-body .feed-stream > .feed-post-card .feed-post-image-wrap {
    min-height: 0;
  }

  body.feed-body .feed-stream > .feed-post-card .feed-post-image {
    width: 100%;
    max-height: min(78dvh, 760px);
    border-radius: 0;
    object-fit: contain;
    background: #100204;
  }

  body.feed-body .feed-stream > .feed-post-card:not(.feed-reel-card) .feed-post-video {
    width: 100%;
    max-height: min(72dvh, 680px);
    object-fit: contain;
  }

  body.feed-body .feed-stream > .feed-post-card .feed-video-meta,
  body.feed-body .feed-stream > .feed-post-card .feed-embed-footer {
    margin-right: 12px;
    margin-left: 12px;
  }

  body.feed-body .feed-stream > .feed-post-card .feed-external-link {
    margin-right: 0;
    margin-left: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  /* Reels are visible in Home as full-width vertical media, not a rounded
     nested card. Their existing overlay controls remain intact. */
  body.feed-body .feed-stream > .feed-reel-card {
    width: 100% !important;
    aspect-ratio: 9 / 16;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .17);
    border-radius: 0 !important;
    background: #000 !important;
    box-shadow: none !important;
  }

  body.feed-body .feed-stream > .feed-reel-card > .feed-post-head,
  body.feed-body .feed-stream > .feed-reel-card .feed-post-text {
    margin: 0 !important;
  }

  body.feed-body .feed-stream > .feed-reel-card > .feed-reel-actions {
    position: absolute;
    right: 6px;
    bottom: 55px;
    width: 52px;
    margin: 0 !important;
    border: 0 !important;
  }

  body.feed-body .feed-stream > .feed-reel-card > .feed-reel-actions button {
    min-height: 0;
    width: 52px;
    padding: 5px 0;
    font-size: 0;
  }

  body.feed-body .feed-stream > .feed-reel-card .feed-post-image-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #000;
  }

  body.feed-body .feed-stream > .feed-reel-card .feed-post-image {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    object-fit: cover;
  }

  /* Remove the nested surfaces above the stream as well. */
  body.feed-body .feed-composer-launcher,
  body.feed-body .feed-reels-strip {
    margin-right: 0;
    margin-left: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.feed-body .feed-composer-launcher {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .17);
  }

  body.feed-body .feed-reels-strip {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .17);
  }
}

/* The Reel viewer is a true edge-to-edge 9:16 stage on touch screens. */
@media (max-width: 850px) {
  .feed-reel-viewer-body {
    gap: 0;
    padding: 0;
  }

  .feed-reel-viewer-stage {
    width: min(100vw, calc((100dvh - 52px) * .5625));
    max-width: 100vw;
    height: calc(100dvh - 52px);
    max-height: none;
    border: 0;
    border-radius: 0;
  }
}

/* On touch layouts the category bar is an app-level fixed strip.  Keeping it
   out of the document flow removes the blank band that otherwise appears
   between the fixed navbar and Home/Video/Siskul Reels. */
@media (max-width: 1023px) {
  body.feed-body .feed-main-column {
    padding-top: 67px !important;
  }

  body.feed-body .feed-topbar {
    position: fixed !important;
    top: var(--nav-h, 70px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 90 !important;
    width: 100vw !important;
    height: 67px !important;
    margin: 0 !important;
    padding: 7px 0 9px !important;
    box-sizing: border-box !important;
  }

  body.feed-body .feed-topbar .feed-tabs {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* Live comments must remain legible in the dark Siskul conversation surface.
   Older light-social rules above this point set the author name to a dark
   inherited color, which made a freshly submitted learner name disappear. */
body.feed-body .feed-comment strong,
body.feed-body .feed-comments-panel .feed-comment strong,
body.feed-body .feed-comment-bubble strong {
  display: block;
  color: #fff !important;
}

body.feed-body .feed-comments-panel .feed-comment-bubble,
body.feed-body .feed-comment-bubble {
  border: 1px solid rgba(255, 54, 66, .14);
  color: #fff;
  background: rgba(45, 6, 8, .78) !important;
}

body.feed-body .feed-comment-bubble p {
  color: #f3e5e6 !important;
}

/* Phone/tablet Feed is a document-length app page. The original shell was
   capped at 100dvh with overflow hidden, so touch scrolling stopped at the
   first viewport even though more posts existed below it. */
@media (max-width: 1023px) {
  html:has(body.feed-body),
  body.feed-body {
    height: auto !important;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #0b0102 !important;
  }

  body.feed-body .feed-shell,
  body.feed-body .feed-shell > main,
  body.feed-body .feed-page,
  body.feed-body .feed-page > .feed-layout,
  body.feed-body .feed-main-column,
  body.feed-body .feed-stream {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.feed-body .feed-shell {
    min-height: 100dvh;
    overflow: visible !important;
    background: radial-gradient(circle at 50% 0%, rgba(111, 7, 13, .42), transparent 35%), linear-gradient(135deg, #0b0102 0%, #160306 54%, #070102 100%) !important;
  }

  body.feed-body .feed-shell > main,
  body.feed-body .feed-page {
    background: transparent !important;
  }

  body.feed-body .feed-topbar {
    background: linear-gradient(180deg, rgba(11, 1, 2, .99), rgba(11, 1, 2, .96) 76%, rgba(11, 1, 2, 0)) !important;
  }

  body.feed-body .feed-tabs {
    border-color: rgba(255, 45, 55, .42) !important;
    background: rgba(20, 3, 5, .96) !important;
  }

  body.feed-body .feed-tabs button,
  body.feed-body .feed-tabs button.active,
  body.feed-body .feed-tabs button:hover {
    color: #fff !important;
  }

  body.feed-body .feed-stream > .feed-post-card,
  body.feed-body .feed-composer-launcher,
  body.feed-body .feed-reels-strip {
    color: #fff !important;
    border-color: rgba(255, 45, 55, .34) !important;
    background: transparent !important;
  }

  body.feed-body .feed-stream > .feed-post-card .feed-user strong,
  body.feed-body .feed-stream > .feed-post-card .feed-post-text,
  body.feed-body .feed-stream > .feed-post-card .feed-post-actions button {
    color: #fff !important;
  }
}

/* The touch Reel viewer navigates by a vertical hand swipe. Keep the desktop
   arrow controls, but remove the side up/down buttons from phone/tablet. */
@media (max-width: 850px) {
  .feed-reel-viewer-nav {
    display: none !important;
  }

  .feed-reel-viewer,
  .feed-reel-viewer-body,
  .feed-reel-viewer-stage {
    touch-action: pan-y;
  }
}

/* Desktop/laptop uses the same app-level strip as touch layouts, but keeps the
   strip aligned with the central feed column.  The shell navbar is fixed, so
   reserve the strip's height in the column instead of letting the first post
   slide underneath it. */
@media (min-width: 1024px) {
  body.feed-body .feed-main-column {
    margin-top: 0 !important;
    padding-top: 67px !important;
  }

  body.feed-body .feed-topbar {
    position: fixed !important;
    top: var(--nav-h, 74px) !important;
    right: auto !important;
    left: calc(50vw - 261px) !important;
    z-index: 90 !important;
    width: min(720px, calc(100vw - 298px)) !important;
    height: 67px !important;
    margin: 0 !important;
    padding: 7px 0 9px !important;
    box-sizing: border-box !important;
  }

  body.feed-body .feed-topbar .feed-tabs {
    width: 100% !important;
    margin: 0 !important;
  }
}

@media (min-width: 1161px) {
  body.feed-body .feed-topbar {
    left: max(250px, calc(50vw - 494px)) !important;
    width: min(900px, calc(100vw - 588px)) !important;
  }
}

/* Infinite Feed pagination status. The sentinel stays outside the stream so
   appended cards remain full-width and never inherit a nested loading card. */
body.feed-body .feed-infinite-sentinel {
  width: 100%;
  height: 1px;
  pointer-events: none;
}

body.feed-body .feed-infinite-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 14px;
  color: rgba(255, 220, 222, .72);
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
  cursor: default;
}

body.feed-body .feed-infinite-status[hidden] {
  display: none;
}

body.feed-body .feed-infinite-status[data-retry="true"] {
  color: #ff9299;
  cursor: pointer;
}

body.feed-body .feed-infinite-status::before {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 2px solid rgba(255, 255, 255, .18);
  border-top-color: #ff3f4a;
  border-radius: 50%;
  content: "";
  animation: feed-infinite-spin .8s linear infinite;
}

body.feed-body .feed-infinite-status.is-complete::before {
  display: none;
}

@keyframes feed-infinite-spin {
  to { transform: rotate(360deg); }
}

/* On touch-sized screens Create post is an app page, not a centered modal.
   Keep the composer content and existing JS flow unchanged; only the shell
   becomes edge-to-edge with a native-style top app bar and back action. */
.feed-composer-back {
  display: none;
}

@media (max-width: 1023px) {
  body.feed-body .feed-composer-card {
    display: block !important;
    overflow: hidden;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: linear-gradient(145deg, rgba(28, 2, 5, .99), rgba(7, 1, 2, .99));
    backdrop-filter: none;
  }

  body.feed-body .feed-composer-card .feed-composer-backdrop {
    display: none;
  }

  body.feed-body .feed-composer-dialog {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    height: 100dvh;
    max-height: none !important;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.feed-body .feed-composer-dialog .feed-composer-head {
    position: relative;
    flex: 0 0 64px;
    min-height: 64px;
    padding: 0 58px;
    border-right: 0;
    border-left: 0;
  }

  body.feed-body .feed-composer-dialog .feed-composer-back {
    position: absolute;
    top: 14px;
    left: 12px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #ffe4e6;
    background: rgba(255, 255, 255, .1);
    cursor: pointer;
  }

  body.feed-body .feed-composer-dialog .feed-composer-back:hover,
  body.feed-body .feed-composer-dialog .feed-composer-back:focus-visible {
    color: #fff;
    background: rgba(255, 31, 42, .28);
    outline: 0;
  }

  body.feed-body .feed-composer-dialog .feed-composer-close {
    display: none;
  }

  body.feed-body .feed-composer-dialog form {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 16px calc(28px + env(safe-area-inset-bottom));
  }

  body.feed-body .feed-composer-card[hidden] {
    display: none !important;
  }
}

/* Mobile/tablet camera capture and comment sheets. Desktop keeps the existing
   file picker and right-side comments rail unchanged. */
.feed-mobile-camera-button,
.feed-mobile-capture {
  display: none;
}

@media (max-width: 1023px) {
  body.feed-body.feed-comments-sheet-open {
    overflow: hidden !important;
  }

  body.feed-body.feed-comments-sheet-open::after {
    position: fixed;
    inset: 0;
    z-index: 690;
    pointer-events: none;
    content: "";
    background: rgba(0, 0, 0, .62);
  }

  body.feed-body .feed-mobile-camera-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 35px;
    padding: 0 11px;
    border: 1px solid rgba(61, 226, 127, .38);
    border-radius: 8px;
    color: #bfffd5;
    background: rgba(18, 102, 54, .18);
    font-size: .58rem;
    font-weight: 800;
    cursor: pointer;
  }

  body.feed-body .feed-mobile-camera-button i { color: #42df82; }
  body.feed-body .feed-mobile-camera-button:hover,
  body.feed-body .feed-mobile-camera-button:focus-visible {
    border-color: #42df82;
    color: #fff;
    background: rgba(18, 145, 72, .28);
    outline: 0;
    box-shadow: 0 0 18px rgba(33, 220, 111, .2);
  }

  body.feed-body .feed-comments-panel[hidden] {
    display: none !important;
  }

  body.feed-body .feed-comments-panel:not([hidden]),
  body.feed-body #feedApp.reel-viewer-comments-open #feedCommentsPanel:not([hidden]) {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 700 !important;
    pointer-events: auto !important;
    isolation: isolate;
    display: flex !important;
    width: 100% !important;
    height: min(54dvh, 560px) !important;
    min-height: 280px !important;
    max-height: 60dvh !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -12px 38px rgba(0, 0, 0, .58), 0 0 30px rgba(255, 31, 42, .16) !important;
  }

  body.feed-body .feed-comments-panel:not([hidden])::before {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 42px;
    height: 4px;
    border-radius: 99px;
    content: "";
    background: rgba(255, 255, 255, .3);
    transform: translateX(-50%);
  }

  body.feed-body .feed-comments-panel-head {
    flex: 0 0 auto;
    min-height: 72px;
    padding: 24px 16px 12px !important;
  }

  body.feed-body .feed-comments-panel-head h2 { font-size: 1rem; }
  body.feed-body .feed-comments-panel-head > button { width: 34px; height: 34px; }

  body.feed-body .feed-comments-panel:not([hidden]) input,
  body.feed-body .feed-comments-panel:not([hidden]) button,
  body.feed-body .feed-comments-panel:not([hidden]) textarea {
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  body.feed-body .feed-comments-panel-body {
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 0 14px calc(10px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
  }

  body.feed-body .feed-comments-panel-body > .feed-comments {
    display: flex !important;
    min-height: 100%;
    flex-direction: column;
    padding-top: 10px !important;
  }

  body.feed-body .feed-comments-panel-body .feed-comment-list {
    flex: 1 1 auto;
    padding-bottom: 2px;
  }

  body.feed-body .feed-comments-panel-body .feed-comment-form {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex: 0 0 auto;
    margin-top: auto;
    padding: 12px 0 calc(7px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, transparent, #140305 22%) !important;
  }

  body.feed-body .feed-comments-panel-body .feed-comment-form input {
    height: 42px;
    border-color: rgba(255, 61, 72, .35) !important;
    border-radius: 10px;
    font-size: .72rem;
  }

  body.feed-body .feed-comments-panel-body .feed-comment-form button {
    width: 42px;
    min-height: 42px;
    border-radius: 10px;
    background: linear-gradient(145deg, #ff3e48, #d90817);
  }

  body.feed-body .feed-mobile-capture {
    position: fixed;
    inset: 0;
    z-index: 760;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .66);
  }

  body.feed-body .feed-mobile-capture[hidden] { display: none !important; }
  body.feed-body.feed-camera-open { overflow: hidden !important; }

  body.feed-body .feed-mobile-capture-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  body.feed-body .feed-mobile-capture-sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: 90dvh;
    overflow-y: auto;
    padding: 19px 16px calc(18px + env(safe-area-inset-bottom));
    border: 1px solid rgba(255, 55, 65, .5);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    color: #fff;
    background: linear-gradient(145deg, #2a0508, #0d0102 76%);
    box-shadow: 0 -14px 44px rgba(0, 0, 0, .55), 0 0 30px rgba(255, 31, 42, .16);
  }

  body.feed-body .feed-mobile-capture-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }

  body.feed-body .feed-mobile-capture-head h2 {
    margin: 4px 0 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.2rem;
  }

  body.feed-body .feed-mobile-capture-head > button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
  }

  body.feed-body .feed-mobile-capture-choice > p {
    margin: 0 0 12px;
    color: #d4bfc1;
    font-size: .7rem;
  }

  body.feed-body .feed-mobile-capture-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.feed-body .feed-mobile-capture-choice-grid button {
    display: grid;
    min-height: 118px;
    align-content: center;
    justify-items: center;
    gap: 6px;
    padding: 15px 9px;
    border: 1px solid rgba(255, 45, 55, .34);
    border-radius: 14px;
    color: #fff;
    background: rgba(58, 7, 10, .72);
    cursor: pointer;
  }

  body.feed-body .feed-mobile-capture-choice-grid button:hover,
  body.feed-body .feed-mobile-capture-choice-grid button:focus-visible {
    border-color: #42df82;
    background: rgba(19, 91, 50, .28);
    outline: 0;
    box-shadow: 0 0 18px rgba(33, 220, 111, .16);
  }

  body.feed-body .feed-mobile-capture-choice-grid i { color: #42df82; font-size: 1.25rem; }
  body.feed-body .feed-mobile-capture-choice-grid strong { font-size: .76rem; }
  body.feed-body .feed-mobile-capture-choice-grid small { color: #c6abad; font-size: .58rem; }

  body.feed-body .feed-mobile-capture-live[hidden] { display: none !important; }
  body.feed-body .feed-mobile-capture-preview-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    max-height: 52dvh;
    border: 1px solid rgba(255, 49, 59, .4);
    border-radius: 14px;
    background: #050000;
  }

  body.feed-body .feed-mobile-capture-preview-wrap video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #050000;
  }

  body.feed-body .feed-mobile-capture-recording {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 99px;
    color: #fff;
    background: rgba(130, 0, 12, .8);
    font-size: .58rem;
    font-weight: 800;
  }

  body.feed-body .feed-mobile-capture-recording[hidden] { display: none !important; }
  body.feed-body .feed-mobile-capture-recording i { width: 7px; height: 7px; border-radius: 50%; background: #ff3340; box-shadow: 0 0 10px #ff3340; }
  body.feed-body .feed-mobile-capture-timeline { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .13); }
  body.feed-body .feed-mobile-capture-timeline span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff303d, #42df82); box-shadow: 0 0 14px rgba(255, 31, 42, .6); transition: width .1s linear; }
  body.feed-body .feed-mobile-capture-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; color: #cdb5b7; font-size: .6rem; }
  body.feed-body .feed-mobile-capture-actions { display: flex; gap: 8px; margin-top: 14px; }
  body.feed-body .feed-mobile-capture-actions .btn { flex: 1 1 auto; min-height: 42px; padding-inline: 10px; font-size: .66rem; }
  body.feed-body .feed-mobile-capture-status { min-height: 18px; margin: 12px 2px 0; color: #cdb5b7; font-size: .63rem; line-height: 1.45; }
}