/* GhostSocial V2. One theme, independent of the V1 stylesheet. */
:root {
  color-scheme: dark;
  --bg: #111113; --surface: #1b1b1f; --surface2: #242429;
  --text: #f1f1f4; --sub: #9b9ba5; --muted: #777782;
  --primary: #b39af4; --primary2: #b39af4; --accent: #b39af4;
  --border: #28282e; --border-strong: #3a3a43;
  --red: #f27889; --green: #82cfa7;
  --nav-h: calc(48px + env(safe-area-inset-bottom, 0px));
  --head-h: calc(56px + env(safe-area-inset-top, 0px));
  --feed-h: 71px; --content-w: 640px;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-padding-top: calc(var(--head-h) + var(--feed-h) + 12px); }
html, body.ghostsocial-v2 { overscroll-behavior-y: none; }
body.ghostsocial-v2 {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--bg); color: var(--text);
  font: 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body.gs-v2-ready { padding-top: var(--head-h); padding-bottom: var(--nav-h) !important; }
body.gs-v2-ready.feed-mode { padding-top: calc(var(--head-h) + var(--feed-h)); }
body.gs-v2-ready.miniska-mode { padding-top: calc(var(--head-h) + 44px); overflow: hidden; }
body::before, body::after { content: none !important; }
h1,h2,h3,h4,p { margin: 0; }
button,input,textarea,select { font: inherit; color: inherit; }
button { border: 0; background: var(--surface); border-radius: 8px; padding: 9px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button,a { touch-action: manipulation; }
button { transition: color .15s, background-color .15s, opacity .15s; }
button:disabled { cursor: default; opacity: .4; }
button:active:not(:disabled) { opacity: .7; }
input,textarea,select { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; outline: none; }
input::placeholder,textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus,textarea:focus,select:focus { border-color: var(--primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
input:focus-visible,textarea:focus-visible,select:focus-visible { outline: none; }
a { color: var(--primary); text-decoration: none; }
img,video { max-width: 100%; }
[hidden] { display: none !important; }
.sub,.muted,.loader-text { color: var(--sub); }
.danger { color: var(--red) !important; }
.dt-side-left { display: none !important; }

/* Header and the two feed controls. */
#appHeader { position: fixed; inset: 0 0 auto; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--border); }
.header-top { max-width: var(--content-w); margin: auto; height: var(--head-h); padding: env(safe-area-inset-top, 0px) 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.header-brand { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; letter-spacing: -.5px; white-space: nowrap; }
.header-brand svg { width: 23px; height: 23px; fill: var(--primary); }
.header-right { display: flex; align-items: center; gap: 5px; }
.hdr-icon-btn { width: 40px; height: 40px; padding: 0; background: transparent; color: var(--sub); font-size: 18px; }
#hdrShare { display: none; }
.profile-mode #hdrShare { display: inline-grid; place-items: center; }
.h-avatar { display: none; }
.gost-pill { display: none; align-items: center; gap: 6px; padding: 6px 9px; color: var(--sub); font-size: 12px; }
.profile-mode .gost-pill { display: inline-flex; }
.gost-pill i { color: var(--primary); }
.new-pill { position: fixed; z-index: 110; top: calc(var(--head-h) + var(--feed-h) + 10px); left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 20px; background: var(--primary); color: #191321; font-weight: 600; font-size: 12px; cursor: pointer; }
.feed-mode .new-pill.show { display: flex; }
#feedSwitch { display: none; width: min(100%, var(--content-w)); height: 44px; margin: auto; padding: 0 16px; align-items: stretch; gap: 28px; }
.feed-mode #feedSwitch,.miniska-mode #feedSwitch { display: flex; }
#feedSwitch .fs-tab { position: relative; padding: 0 2px; border-radius: 0; background: transparent; color: var(--sub); font-size: 15px; font-weight: 600; }
#feedSwitch .fs-tab.active { color: var(--text); }
#feedSwitch .fs-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
#feedSwitch .fs-search { display: none; }
#headerFilters { display: none; width: min(100%, var(--content-w)); height: 48px; margin: auto; padding: 7px 16px 9px; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.feed-mode #headerFilters { display: flex; }
#headerFilters::-webkit-scrollbar { display: none; }
.filter-btn { flex: 0 0 auto; padding: 6px 11px; border: 0; border-radius: 6px; white-space: nowrap; background: transparent; color: var(--sub); font-size: 12px; font-weight: 500; }
.filter-btn.active { background: var(--surface2); color: var(--primary); }
.filter-btn .ico { display: none; }

/* One scrolling column; no decorative cards around the feed. */
#appMain { position: relative; width: min(100%, var(--content-w)); margin: auto; min-height: calc(100dvh - var(--head-h) - var(--nav-h)); background: var(--bg); }
.screen { display: none; min-height: calc(100dvh - var(--head-h) - var(--nav-h)); }
.screen.active { display: block; }
.feed-mode #appMain,#screenFeed { min-height: calc(100dvh - var(--head-h) - var(--feed-h) - var(--nav-h)); }
#screenSearch,#screenCreate,#screenNotif,#screenWallet { padding: 20px 16px 32px; }
.gs-v2-screen-heading { margin-bottom: 20px; }
.gs-v2-screen-heading h1,.screen > h2 { font-size: 22px !important; line-height: 1.3; letter-spacing: -.5px; font-weight: 650 !important; }
.gs-v2-screen-heading p { color: var(--sub); font-size: 13px; margin-top: 7px; }
.gs-v2-eyebrow { display: none; }
.empty,.guest-block { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; padding: 40px 24px; gap: 12px; color: var(--sub); text-align: center; }
.empty > i,.guest-block > i { color: var(--muted); font-size: 28px; }
.guest-block h2 { color: var(--text); font-size: 20px; }
.loader { min-height: 260px; color: var(--sub); }
.spinner,.fa-spinner,.mskc-btn-dots { display: none !important; }
.feed-context { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--sub); font-size: 13px; }
.feed-context-close { background: transparent; color: var(--sub); }
.load-more-btn { display: block; width: calc(100% - 32px); margin: 16px; padding: 12px; color: var(--primary); }
.no-more { text-align: center; font-size: 12px; color: var(--muted); padding: 24px; }
.post-card { position: relative; padding: 17px 16px 11px; border-bottom: 1px solid var(--border); background: var(--bg); overflow-wrap: anywhere; }
.post-highlight { background: #1d1927; }
.post-header { display: grid; grid-template-columns: 40px minmax(0,max-content) max-content minmax(22px,1fr); align-items: center; column-gap: 10px; margin-bottom: 12px; padding-right: 24px; }
.post-av,.user-card-av,.notif-av,.comment-av,.share-contact-av,.gsm-av,.prof-av { display: grid; place-items: center; flex-shrink: 0; overflow: hidden; border-radius: 50%; background: var(--surface2); color: var(--primary); font-weight: 600; }
.post-av { width: 40px; height: 40px; grid-column: 1; grid-row: 1 / span 2; cursor: pointer; }
.post-av img,.prof-av img,.user-card-av img,.notif-av img { width: 100%; height: 100%; object-fit: cover; }
.post-info { min-width: 0; grid-column: 2; grid-row: 1 / span 2; cursor: pointer; }
.post-name { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-user { color: var(--sub); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-time { align-self: start; justify-self: end; grid-column: 4; grid-row: 1; margin: 1px 0 0 !important; color: var(--muted); font-size: 11px; white-space: nowrap; }
.post-edited,.post-read-time { display: none; }
.post-mine-label { display: none; }
.post-menu-btn { position: absolute; top: 13px; right: 9px; width: 30px; height: 32px; padding: 0; background: transparent; color: var(--sub); font-size: 18px; }
.post-follow-btn { justify-self: start; align-self: center; grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 3px 0; background: transparent; color: var(--primary); font-size: 11px; font-weight: 500; white-space: nowrap; }
.post-content { font-size: 15px; line-height: 1.6; white-space: pre-wrap; margin-bottom: 9px; color: var(--text); }
.post-content:empty { display: none; }
.post-content a,.comment-text a { color: var(--primary); }
.post-footer { display: flex; align-items: center; gap: 14px; min-height: 38px; flex-wrap: wrap; }
.act-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 34px; min-height: 38px; padding: 3px 2px; background: transparent; color: var(--sub); font-size: 12px; }
.act-btn i { font-size: 19px; }
.act-btn.liked { color: var(--primary); }
.post-meta-stats { display: flex; gap: 10px; margin-left: auto; color: var(--muted); font-size: 11px; }
.post-meta-stats span { display: inline-flex; align-items: center; gap: 4px; }
.reactions-row,.com-reactions { display: flex; flex-wrap: wrap; gap: 5px; }
.react-pill,.repost-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 6px; color: var(--sub); background: var(--surface); font-size: 11px; cursor: pointer; }
.react-pill.mine { color: var(--primary); background: #292234; }
.react-pill svg,.com-react svg,.emoji-btn svg,.notif-icon svg { width: 19px; height: 19px; }
.repost-pill-av { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; }
.repost-mark { display: block; color: var(--sub); font-size: 11px; margin-bottom: 12px; }
.new-marker,.new-dot { display: none; }
.user-badges { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; font-size: 10px; color: var(--primary); }
.ub-verified { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); color: var(--bg); font-size: 8px; }
.hl { color: var(--text); background: #342b45; border-radius: 2px; }
.hashtag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 5px; background: var(--surface); font-size: 12px; }
.hc-count { font-size: 10px; color: var(--sub); }

/* Images, videos, attachments and polls. */
.post-media,.media-grid { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; margin: 12px 0; }
.media-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px; }
.media-grid.g1 { grid-template-columns: 1fr; }
.post-media .media-grid { margin: 0; border: 0; border-radius: 0; }
.media-grid.g1 .mg-item { aspect-ratio: auto; min-height: 100px; }
/* Single feed photos fill their media frame: no empty bands above/below short landscape images. */
.media-grid.g1 .mg-item:has(img) { aspect-ratio: 1 / 1; min-height: 0; }
.media-grid.g1 .mg-item img { display: block; width: 100%; height: 100%; max-height: 520px; object-fit: cover; }
.media-grid.g1 .mg-item video { height: auto; max-height: 520px; object-fit: contain; }
.mg-item { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; background: var(--surface); }
.mg-item img,.mg-item video { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-el { display: block; max-height: 520px; width: 100%; object-fit: contain; }
.video-play-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.video-play-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #111b; color: white; }
.audio-widget,.audio-bar,.link-preview { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 12px 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.audio-expanded { padding: 10px; background: var(--surface); }
.audio-play-btn { min-width: 36px; height: 36px; background: var(--surface2); color: var(--primary); border-radius: 50%; }
.audio-top,.link-preview-body { flex: 1; min-width: 0; }
.audio-waveform { height: 24px; display: flex; align-items: center; gap: 2px; }
.audio-time,.link-preview-desc,.link-preview-site { font-size: 11px; color: var(--sub); }
/* GhostSocial audio post card */
body.ghostsocial-v2 .audio-widget.gs-audio-card { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 8px 0; margin: 8px 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; box-sizing: border-box; }
.gs-audio-art { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 7px; background: var(--surface2); color: var(--primary); font-size: 18px; overflow: hidden; }
.gs-audio-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gs-audio-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.gs-audio-meta { min-width: 0; }
.gs-audio-title { overflow: hidden; color: var(--text); font-size: 14px; line-height: 1.35; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.gs-audio-artist { margin-top: 3px; overflow: hidden; color: var(--sub); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.gs-audio-controls { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gs-audio-card .audio-play-btn { flex: 0 0 30px; min-width: 30px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; text-align: center; line-height: 1; border: 0; border-radius: 50%; background: var(--primary); color: #21142f; }
.gs-audio-card .audio-play-btn i,
.gs-audio-card .audio-play-btn svg { display: block; margin: 0; transform: none; }
.gs-audio-card .audio-waveform { flex: 1; min-width: 0; height: 32px; gap: 2px; align-items: center; cursor: pointer; }
.gs-audio-card .audio-bar { flex: 1 1 0; min-width: 2px; max-width: 4px; height: var(--bar-height,35%); padding: 0; margin: 0; border: 0; border-radius: 4px; background: rgba(190,160,255,.38); transition: background .12s, height .12s; }
.gs-audio-card .audio-bar:nth-child(4n+1) { background: rgba(190,160,255,.7); }
.gs-audio-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gs-audio-format { color: var(--sub); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.gs-audio-card .audio-time { font-size: 11px; font-variant-numeric: tabular-nums; }
.gs-audio-card .audio-waveform .audio-bar.active { background: #c5a5ff; }
@media (max-width: 420px) { .gs-audio-art { flex-basis: 54px; width: 54px; height: 54px; font-size: 21px; } body.ghostsocial-v2 .audio-widget.gs-audio-card { gap: 10px; padding: 11px; } }
.link-preview-img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.link-preview-title { font-size: 13px; font-weight: 600; }
.poll,.poll-card,.poll-editor,.algo-section { padding: 14px; margin: 14px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.poll-q,.poll-editor-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.poll-option,.poll-opt,.poll-opt-row { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 9px 12px; margin-top: 7px; border: 1px solid var(--border-strong); border-radius: 7px; overflow: hidden; background: transparent; cursor: pointer; }
.poll-opt-fill { position: absolute; inset: 0 auto 0 0; background: #b39af425; pointer-events: none; }
.poll-opt-label,.poll-opt-pct,.poll-opt-icon { position: relative; z-index: 1; }
.poll-opt-label { flex: 1; font-size: 13px; }
.poll-opt-pct,.poll-total { color: var(--sub); font-size: 11px; }
.poll-total { margin-top: 9px; }
.poll-opt-icon.ok { color: var(--green); }
.poll-opt-icon.bad { color: var(--red); }
.poll-editor-head,.poll-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.poll-editor input { width: 100%; margin: 6px 0; background: var(--bg); font-size: 16px; }
.poll-editor .poll-opt-row { padding: 0; border: 0; overflow: visible; }
.poll-editor .poll-opt-row input { flex: 1; margin: 0; }
.poll-quiz-toggle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
input[type='checkbox'],.poll-editor input[type='checkbox'] { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--primary); }
.quiz-check { padding: 7px; color: var(--sub); background: transparent; }
.quiz-check.checked { color: var(--primary); }
.poll-add-opt,.poll-quiz-toggle { color: var(--primary); font-size: 12px; background: transparent; }
.poll-remove,.opt-del { background: transparent; color: var(--sub); }
.nsfw-badge-header { font-size: 9px; padding: 1px 4px; border: 1px solid var(--border-strong); border-radius: 3px; color: var(--sub); }
.post-card.nsfw:not(.revealed) .nsfw-blurable { filter: blur(10px); pointer-events: none; user-select: none; min-height: 100px; }
.nsfw-overlay { position: absolute; inset: 70px 16px 52px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #111c; cursor: pointer; border-radius: 8px; }
.post-card.revealed .nsfw-overlay { display: none; }
.nsfw-overlay-badge { font-weight: 600; font-size: 13px; }
.nsfw-overlay-text { color: var(--sub); font-size: 12px; }
.nsfw-overlay-cta { color: var(--primary); font-size: 13px; }

/* Composer. */
.create-card { background: transparent; }
#postText { display: block; width: 100%; height: 112px; min-height: 96px; max-height: min(32dvh, 240px); padding: 12px 0; resize: vertical; overflow-y: auto; border: 0; border-radius: 0; background: transparent; font-size: 16px; line-height: 1.65; }
#postText:focus { outline: none; }
.create-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.create-left { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; flex: 1 1 220px; }
.attach-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: transparent; color: var(--sub); font-size: 19px; }
.attach-btn.attached { color: var(--primary); background: #292234; }
.char-count { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.char-count.warn { color: var(--red); }
.pub-btn,.modal-save-btn,.comment-send,.gs-modal-ok,.wallet-claim-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 18px; border-radius: 8px; background: var(--primary); color: #1a1427; font-size: 13px; font-weight: 600; }
.pub-btn { margin-left: auto; }
.media-preview-list { display: flex; flex-wrap: wrap; gap: 8px; }
.media-preview-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; margin: 8px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.media-preview-info { min-width: 0; flex: 1; }
.media-preview-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.media-preview-size,.mp-progress-label { color: var(--sub); font-size: 10px; }
.media-preview-del,.mp-cancel,.mp-play { background: transparent; color: var(--sub); }
.mp-thumb { width: 48px; height: 48px; overflow: hidden; border-radius: 6px; }
.mp-thumb img,.mp-thumb video { width: 100%; height: 100%; object-fit: cover; }
.mp-progress-track { height: 3px; overflow: hidden; background: var(--border); border-radius: 3px; }
.mp-progress-bar { height: 100%; background: var(--primary); }
.mp-ring { position: relative; width: 38px; height: 38px; }
.mp-ring-track,.mp-ring-bar { fill: none; stroke-width: 3; }
.mp-ring-track { stroke: var(--border-strong); }
.mp-ring-bar { stroke: var(--primary); }
.mp-ring-center { position: absolute; inset: 0; display: grid; place-items: center; }
.mp-spin { animation: gs-spin 1s linear infinite; }
.msk-tag-wrap { display: flex; align-items: center; gap: 6px; flex: 1 1 130px; }
.msk-tag-input { width: 100%; padding: 8px; font-size: 16px; }
.msk-tag-idx { color: var(--muted); font-size: 11px; }
.msk-tag-x { background: transparent; color: var(--sub); padding: 5px; }

/* Profile and simple lists. */
.profile-card { display: flex; flex-direction: column; align-items: center; padding: 26px 16px 20px; gap: 8px; }
.prof-av { width: 82px; height: 82px; font-size: 26px; margin-bottom: 5px; }
.prof-name { font-size: 21px; font-weight: 650; letter-spacing: -.5px; }
.prof-username { color: var(--sub); font-size: 13px; }
.daily-status { font-size: 13px; color: var(--sub); }
.rep-badge { font-size: 11px; color: var(--sub); }
.stats-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; margin: 12px 0; }
.stat-box { text-align: center; min-width: 0; padding: 4px; }
.stat-val { font-size: 17px; font-weight: 600; }
.stat-lbl { font-size: 10px; color: var(--sub); }
.prof-actions { display: flex; gap: 8px; width: 100%; }
.prof-action-btn,.follow-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: transparent; font-size: 12px; color: var(--text); cursor: pointer; }
.prof-actions > .prof-action-btn { flex: 1; }
.follow-btn { background: var(--primary); color: #1a1427; border-color: transparent; }
.follow-btn.following { background: transparent; border-color: var(--border-strong); color: var(--sub); }
.profile-tools { width: 100%; margin-top: 12px; border-top: 1px solid var(--border); }
.profile-tools summary { display: flex; align-items: center; justify-content: space-between; list-style: none; padding: 14px 0; color: var(--sub); font-size: 13px; cursor: pointer; }
.profile-tools summary::-webkit-details-marker { display: none; }
.profile-tools[open] summary i { transform: rotate(180deg); }
.profile-tools .prof-action-btn { width: 100% !important; justify-content: flex-start !important; border: 0; border-radius: 0; border-top: 1px solid var(--border); background: transparent !important; margin: 0 !important; padding: 13px 0; color: var(--sub); }
.profile-tools .prof-action-btn i { width: 20px; color: var(--primary); }
#profAvEditBtn { color: var(--sub) !important; border-color: var(--border-strong) !important; }
.prof-tabs { display: flex; padding: 0 16px; border-bottom: 1px solid var(--border); }
.prof-tab { flex: 1; position: relative; padding: 13px 8px; background: transparent; border-radius: 0; color: var(--sub); font-size: 13px; font-weight: 500; }
.prof-tab.active { color: var(--text); }
.prof-tab.active::after { content: ''; height: 2px; position: absolute; inset: auto 25% 0; background: var(--primary); }
.prof-subtabs { display: flex; gap: 4px; padding: 12px 16px; }
.prof-subtab { color: var(--sub); background: transparent; font-size: 12px; }
.prof-subtab.active { color: var(--primary); background: var(--surface); }
.full-profile-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; }
.back-btn,.gs-v2-back { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 4px 9px; background: transparent; color: var(--sub); font-size: 12px; }
.gs-v2-back { margin: 0 0 12px -9px; }
.search-bar { position: relative; margin-bottom: 18px; }
.search-input { width: 100%; min-height: 46px; border-color: transparent; padding: 12px 40px; font-size: 16px; background: var(--surface); }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-clear { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: none; width: 36px; height: 36px; padding: 0; background: transparent; color: var(--sub); }
.search-clear.show { display: block; }
.gs-search-hint { padding: 12px 2px; color: var(--muted); font-size: 13px; }
.user-card,.search-result-item,.share-contact,.reposter-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.user-card-av,.share-contact-av { width: 42px; height: 42px; }
.user-card-info { min-width: 0; flex: 1; }
.user-card-name,.share-contact-name { font-size: 14px; font-weight: 600; }
.user-card-user,.user-card-posts { color: var(--sub); font-size: 12px; }
#screenSearch .post-card { margin: 0 -16px; }
.notif-card { display: flex; align-items: flex-start; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.notif-card.unread { background: transparent; }
.notif-card.unread::after { content: ''; flex: 0 0 5px; height: 5px; margin-top: 7px; border-radius: 50%; background: var(--primary); }
.notif-av { position: relative; width: 42px; height: 42px; overflow: visible; font-size: 15px; }
.notif-icon { position: absolute; bottom: -3px; right: -4px; width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid var(--bg); border-radius: 50%; background: var(--surface2) !important; color: var(--primary) !important; font-size: 9px; }
.notif-icon svg { width: 12px; height: 12px; }
.notif-body { flex: 1; min-width: 0; }
.notif-text { font-size: 13px; line-height: 1.55; }
.notif-text > span { color: var(--sub) !important; }
.notif-text .emo { width: 18px; height: 18px; vertical-align: middle; }
.notif-preview { margin-top: 6px; font-size: 13px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; }
.notif-time { font-size: 11px; margin-top: 5px; color: var(--muted); }

/* Bottom navigation: five stable targets, bigger center action. */
#appNav { position: fixed; inset: auto 0 0; z-index: 200; min-height: var(--nav-h); padding: 6px max(6px,calc((100vw - var(--content-w))/2 + 6px)) calc(6px + env(safe-area-inset-bottom,0px)); display: grid !important; grid-template-columns: 1fr 1fr 1.18fr 1fr 1fr; align-items: center; gap: 2px; border-top: 1px solid var(--border); background: var(--bg); }
body:not(.gs-v2-ready) #appNav { display: none !important; }
.nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 59px; padding: 4px 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 10px; line-height: 1.2; }
.nav-btn i { font-size: 20px; }
.nav-btn.active { color: var(--primary); }
.nav-icon-wrap { position: relative; display: inline-grid; place-items: center; height: 25px; min-width: 25px; }
.nav-create .nav-icon-wrap { width: 48px; height: 34px; border-radius: 9px; background: var(--primary); color: #191321; }
.nav-create i { font-size: 22px; }
.nav-create .nav-label { color: var(--sub); }
.nav-create.active .nav-label { color: var(--primary); }
.notif-badge { display: none; position: absolute; top: -3px; right: -5px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 10px; background: var(--primary); color: #191321; font-size: 9px; font-weight: 700; align-items: center; justify-content: center; }
.notif-badge:empty { display: none !important; }

/* Wallet and moderation remain separate screens. */
.wallet-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 20px 0; }
.wallet-card { padding: 15px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.wallet-card.locked { color: var(--sub); }
.wc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12px; }
.wc-head i { color: var(--primary); }
.wc-balance { font-size: 25px; font-weight: 600; margin: 12px 0 5px; }
.wc-sub,.wc-soon { font-size: 10px; color: var(--muted); }
.wc-soon { margin-left: auto; }
.wallet-section { padding: 18px 0; border-top: 1px solid var(--border); }
.wallet-section-title { margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.wallet-claim-btn { width: 100%; }
.wallet-claim-hint { color: var(--sub); font-size: 12px; margin-top: 10px; }
.wal-src,.tx-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.wal-src i,.tx-icon { width: 20px; color: var(--primary); }
.wal-src span,.tx-body { flex: 1; }
.tx-meta,.tx-empty { color: var(--muted); font-size: 11px; }
.tx-title { font-size: 13px; }
.tx-amount { color: var(--green); }
.tx-amount.neg { color: var(--red); }
#screenModeration > div { padding: 20px 16px 32px !important; }
#modContent { line-height: 1.55; }
#modContent input,#modContent textarea { font-size: 16px !important; }
#modContent [style*='background:linear-gradient'] { background: var(--primary) !important; color: #191321 !important; }
#modContent > div { border-color: var(--border) !important; border-radius: 10px !important; }

/* Sheets and dialogs are hidden until explicitly opened. */
.modal-overlay,.confirm-overlay,.gs-modal-ov,.attach-menu-overlay { position: fixed; inset: 0; z-index: 600; display: none; align-items: flex-end; justify-content: center; background: #0009; }
.modal-overlay.open,.confirm-overlay.open,.gs-modal-ov.open,.attach-menu-overlay.open { display: flex; }
.modal-sheet,.gs-modal,.attach-menu { width: min(100%,600px); max-height: min(88dvh,900px); overflow-y: auto; padding: 14px 20px calc(24px + env(safe-area-inset-bottom,0px)); border: 1px solid var(--border); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--surface); }
.modal-handle,.m-handle { width: 34px; height: 3px; background: var(--border-strong); border-radius: 3px; margin: 0 auto 15px; }
.modal-header,.m-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-title,.m-title,.gs-modal h3 { font-size: 17px; font-weight: 600; }
.close-btn,.m-close { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: transparent; color: var(--sub); font-size: 18px; }
.modal-input,.gs-modal-input { display: block; width: 100%; margin: 8px 0; background: var(--bg); font-size: 16px; }
.edit-section-label { color: var(--sub); font-size: 12px; }
.modal-err,.gs-modal-err { min-height: 20px; font-size: 12px; color: var(--red); }
.modal-save-btn { width: 100%; margin-top: 10px; }
.comment-input-row { position: sticky; bottom: -24px; display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 0; background: var(--surface); border-top: 1px solid var(--border); }
.comment-input { width: 100%; flex: 1; font-size: 16px; background: var(--bg); }
.comment-send { padding: 11px 13px; }
.comment-item { padding: 14px 0; border-bottom: 1px solid var(--border); }
.comment-item-row { display: flex; gap: 10px; }
.comment-item-body { width: 100%; min-width: 0; }
.comment-author { font-size: 12px; }
.comment-av { background: var(--surface2) !important; }
.comment-name { font-weight: 600; }
.comment-handle,.comment-time { color: var(--muted); font-size: 11px; }
.comment-text { padding: 7px 0; font-size: 14px; overflow-wrap: anywhere; }
.comment-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.com-react,.com-reply,.comment-del,.com-replies-toggle,.com-replies-load { display: inline-flex; align-items: center; gap: 5px; padding: 3px 0; background: transparent; color: var(--sub); font-size: 11px; }
.com-react.on { color: var(--primary); }
.comment-del { margin-left: auto; }
.com-replies { padding-left: 14px; }
.com-quote,.com-reply-bar { padding: 8px; font-size: 12px; color: var(--sub); border-left: 2px solid var(--primary); background: var(--bg); }
.com-replies-toggle { margin-top: 6px; color: var(--primary); }
.attach-menu-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.attach-menu-item i { width: 24px; color: var(--primary); }
.confirm-overlay { align-items: center; padding: 20px; }
.confirm-box { width: min(100%,380px); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.confirm-icon { font-size: 24px; margin-bottom: 14px; }
.confirm-title { font-size: 19px; font-weight: 600; }
.confirm-msg { margin-top: 8px; font-size: 13px; color: var(--sub); }
.confirm-actions,.gs-modal-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.confirm-btn { padding: 10px 16px; border: 1px solid var(--border-strong); }
.confirm-btn.ok { color: var(--primary); }
.gs-modal p,.gs-modal ol { color: var(--sub); margin: 12px 0; font-size: 13px; }
.gs-modal-cancel { color: var(--sub); }
#dailyStatusModal { background: rgba(8, 8, 14, .38) !important; backdrop-filter: blur(22px) saturate(120%) !important; -webkit-backdrop-filter: blur(22px) saturate(120%) !important; }
#dailyStatusModal > div { background: var(--surface) !important; border-color: var(--border) !important; border-radius: 12px !important; }
#dailyStatusInput { font-size: 16px !important; background: var(--bg) !important; border-color: var(--border-strong) !important; }
[style*='linear-gradient'] { background-image: none !important; }
#surveyDone { background: var(--primary) !important; color: #1a1427 !important; }
.ctx-menu { position: fixed; z-index: 800; display: none; min-width: 190px; max-width: calc(100vw - 20px); padding: 5px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); }
.ctx-menu.open { display: block; }
.ctx-item { display: flex; align-items: center; gap: 10px; padding: 11px 10px; cursor: pointer; font-size: 13px; }
.ctx-item:hover { background: var(--surface2); border-radius: 6px; }
.ctx-item i { width: 18px; color: var(--sub); }
.emoji-bar { position: fixed; z-index: 1200; display: flex; gap: 4px; max-width: calc(100vw - 20px); box-sizing: border-box; padding: 7px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; }
.emoji-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 4px; background: transparent; }
#shareSheet,#repostersSheet { background: #0009 !important; backdrop-filter: none !important; }
#shareSheet > div,#repostersSheet > div { background: var(--surface) !important; border-color: var(--border) !important; border-radius: 16px 16px 0 0 !important; }
#shareSheet input { background: var(--bg) !important; border-color: var(--border-strong) !important; font-size: 16px !important; }
#shareSheet button,#repostersSheet button { border-radius: 8px !important; font-weight: 500 !important; }
#shareSendBtn { background: var(--primary) !important; color: #191321 !important; }
.share-ext { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--sub); font-size: 12px; }
.survey-card { border: 1px solid var(--border); padding: 14px; border-radius: 8px; margin-top: 10px; cursor: pointer; }
.survey-card.picked { border-color: var(--primary); background: #292234; }
.survey-head,.algo-stat-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--sub); }
.survey-text { font-size: 13px; margin-top: 8px; }
.algo-section h4 { font-size: 14px; margin-bottom: 8px; }
.algo-section .desc,.algo-empty { color: var(--sub); font-size: 12px; }
.algo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.algo-chip { display: flex; align-items: center; gap: 5px; background: var(--surface2); padding: 5px 8px; border-radius: 6px; font-size: 12px; }
.algo-chip .chip-w,.algo-chip .chip-x { color: var(--sub); font-size: 10px; }

/* Account menu. */
#gsMenuOverlay { position: fixed; inset: 0; z-index: 500; display: none; background: #0009; }
#gsMenuOverlay.open { display: block; }
#gsMenuPanel { position: fixed; inset: auto 0 0; z-index: 501; display: none; width: min(100%,600px); margin: auto; max-height: 85dvh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px 16px 0 0; padding: 20px 20px calc(24px + env(safe-area-inset-bottom,0px)); }
#gsMenuPanel.open { display: block; }
.gsm-head,.gsm-subhead { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; }
.gsm-av { width: 42px; height: 42px; }
.gsm-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gsm-name,.gsm-subtitle { font-size: 17px; font-weight: 600; }
.gsm-un { color: var(--sub); font-size: 12px; }
.gsm-item { display: flex; align-items: center; width: 100%; gap: 12px; padding: 15px 0; border-radius: 0; border-top: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; font-size: 13px; }
.gsm-item > i:first-child { width: 21px; color: var(--primary); }
.gsm-item > span { flex: 1; }
.gsm-item .chev { color: var(--muted); font-size: 10px; }
.gsm-foot { margin-top: 14px; }
.gsm-install { width: 100%; font-size: 12px; color: var(--sub); background: transparent; }
.gsm-back { padding: 4px; background: transparent; color: var(--sub); }
.gsm-switch { position: relative; flex: 0 0 34px !important; height: 21px; border-radius: 12px; background: var(--border-strong); }
.gsm-switch-knob { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--sub); transition: transform .15s; }
.gsm-switch.on { background: var(--primary); }
.gsm-switch.on .gsm-switch-knob { transform: translateX(13px); background: #1a1427; }

/* Media viewer and short video feed. */
.viewer-overlay { position: fixed; inset: 0; z-index: 900; display: none; align-items: center; justify-content: center; background: #080809; }
.viewer-overlay.open { display: flex; }
.viewer-header { position: absolute; inset: env(safe-area-inset-top,0px) 12px auto; z-index: 3; display: flex; justify-content: space-between; padding-top: 8px; }
.viewer-back,.viewer-dl,.viewer-play { width: 40px; height: 40px; border-radius: 50%; background: #242429; color: white; }
.viewer-body { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; }
.viewer-body img,.viewer-body video { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer-body > .viewer-backdrop { position: absolute; z-index: -1; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); max-width: none; max-height: none; object-fit: cover; filter: blur(24px) brightness(.38); opacity: .95; pointer-events: none; }
.viewer-body > .viewer-img,.viewer-body > .viewer-video { position: relative; z-index: 1; }
.viewer-body > .viewer-backdrop.viewer-img { display: none; }
.viewer-controls { position: absolute; inset: auto 16px calc(20px + env(safe-area-inset-bottom,0px)); }
.viewer-timeline { height: 3px; background: var(--border-strong); cursor: pointer; }
.viewer-timeline-fill { height: 100%; background: var(--primary); }
.viewer-time-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.viewer-timer { color: var(--sub); font-size: 12px; }
#screenMinisky { position: fixed; inset: calc(var(--head-h) + 44px) 0 var(--nav-h); margin: auto; width: min(100%,var(--content-w)); height: auto; min-height: 0; background: #080809; }
#mskFeed { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
#mskFeed::-webkit-scrollbar { display: none; }
.msk-card { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #080809; touch-action: pan-y; }
.msk-card > video,.msk-photo { width: 100%; height: 100%; object-fit: contain; }
.mskc-ftrack { display: flex; width: 100%; height: 100%; will-change: transform; }
.mskc-fslide { flex: 0 0 100%; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.mskc-fslide video,.mskc-fslide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mskc-fdots { position: absolute; z-index: 3; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.mskc-fdots.below-slider { top: 28px; }
.mskc-fdot { width: 5px; height: 5px; border-radius: 50%; background: #ffffff70; }
.mskc-fdot.active { background: white; }
.mskc-vslider { position: absolute; z-index: 4; top: 5px; left: 16px; right: 16px; height: 15px; border-radius: 2px; cursor: pointer; }
.mskc-vslider::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: #ffffff40; }
.mskc-vslider-fill { position: absolute; top: 6px; left: 0; height: 2px; background: var(--primary); }
.mskc-vslider-thumb { display: none; }
.mskc-vslider-cursor { position: absolute; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: white; transform: translateX(-50%); }
.msk-side svg { width: 23px; height: 23px; }
.msk-overlay { position: absolute; bottom: 14px; left: 16px; right: 70px; color: white; }
.msk-info { padding: 10px; border-radius: 8px; background: #080809b3; }
.msk-info .author { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.msk-info .av { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--surface2); color: var(--primary); }
.msk-info .name { font-size: 13px; font-weight: 600; }
.msk-info .un { font-size: 11px; color: #c5c5cd; }
.msk-info .caption { font-size: 13px; line-height: 1.5; margin-top: 9px; }
.msk-side { position: absolute; right: 10px; bottom: 20px; display: flex; flex-direction: column; align-items: center; gap: 7px; color: white; }
.msk-side button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; background: #080809b3; font-size: 22px; }
.msk-side button.liked { color: var(--primary); }
.msk-side .lbl,.msk-views { font-size: 11px; }
.msk-progress { position: absolute; inset: 0 0 auto; height: 2px; background: #ffffff20; z-index: 2; }
.msk-progress-fill { height: 100%; background: var(--primary); }
.msk-ttl { position: absolute; top: 12px; left: 16px; padding: 4px 7px; border-radius: 5px; background: #080809b3; color: #ccc; font-size: 10px; z-index: 2; }
.msk-ttl.warn,.msk-ttl.danger { color: var(--red); }
.msk-play-overlay { position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 40px; pointer-events: none; opacity: 0; visibility: hidden; transform: scale(.92); transition: opacity 180ms ease,transform 180ms ease,visibility 180ms; }
.msk-play-overlay.show { opacity: 1; visibility: visible; transform: scale(1); }
.msk-play-overlay i { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid #ffffff50; border-radius: 50%; background: #1111139c; font-size: 25px; box-shadow: 0 8px 28px #0004; }
.msk-side .msk-play-btn { width: 44px; height: 44px; border: 1px solid #ffffff38; border-radius: 50%; background: #111113b8; color: #fff; font-size: 16px; }
.msk-side .msk-play-btn:active { transform: scale(.92); }
.msk-empty,.msk-end { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px; text-align: center; color: var(--sub); }
.msk-empty i { font-size: 28px; }
.msk-empty h3 { color: var(--text); font-size: 18px; }
.msk-back,.msk-fab { display: none; }
.msk-react-backdrop { position: fixed; inset: 0; z-index: 750; }
.msk-react-bar { position: fixed; z-index: 751; display: flex; gap: 5px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.msk-react-bar button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; background: transparent; }
.msk-react-bar svg,.msk-rc-ico svg,.msk-rc-em svg { width: 23px; height: 23px; }
.msk-react-count,.msk-rc-n { color: var(--sub); font-size: 10px; }
.msk-react-cluster { position: relative; cursor: pointer; }
.msk-rc-icons,.msk-rc-row { display: flex; align-items: center; gap: 4px; }
.msk-rc-pop { position: absolute; right: 44px; bottom: 0; display: none; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); }
.msk-rc-pop.open { display: block; }
.msk-sheet { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; z-index: 700; background: #0009; }
.msk-sheet-card { width: min(100%,600px); padding: 20px; border-radius: 16px 16px 0 0; background: var(--surface); }
.msk-sheet-grab { width: 32px; height: 3px; margin: 0 auto 14px; background: var(--border-strong); }
.msk-sheet-row { display: flex; gap: 12px; padding: 14px 0; }
.msk-ui-hidden .msk-overlay,.msk-ui-hidden .msk-side,.msk-ui-hidden .msk-progress { opacity: 0; pointer-events: none; }

/* Reposts, loading and small feedback affordances. */
.mosaic-grid { display: grid; gap: 3px; border-radius: 8px; overflow: hidden; }
.mosaic-header { color: var(--sub); font-size: 12px; margin-bottom: 10px; }
.mosaic-cell { position: relative; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; background: var(--surface); color: var(--sub); }
.mosaic-img,.mosaic-video { width: 100%; height: 100%; object-fit: cover; }
.mosaic-author { position: absolute; bottom: 0; left: 0; right: 0; background: #080809b3; padding: 5px; font-size: 9px; overflow: hidden; text-overflow: ellipsis; }
.mosaic-text { padding: 8px; font-size: 11px; }
.mosaic-video-icon,.mosaic-nsfw-center { position: absolute; font-size: 22px; }
.mosaic-blur { filter: blur(12px); }
.mosaic-nsfw { position: absolute; top: 5px; left: 5px; font-size: 10px; }
.unread-sep { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--sub); font-size: 11px; padding: 16px; }
.unread-sep::before,.unread-sep::after { content: ''; height: 1px; flex: 1; background: var(--border); }
.skel-post { padding: 18px 16px; border-bottom: 1px solid var(--border); }
.skel-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.skel { background: var(--surface2); border-radius: 4px; }
.skel-av { width: 40px; height: 40px; border-radius: 50%; }
.skel-name { width: 110px; height: 12px; }
.skel-line { height: 12px; margin: 10px 0; width: 90%; }
.toast { position: fixed; z-index: 1200; left: 50%; bottom: calc(var(--nav-h) + 12px); transform: translateX(-50%); max-width: calc(100vw - 32px); display: none; padding: 11px 16px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface2); color: var(--text); font-size: 13px; text-align: center; }
.toast.show { display: block; }
.ptr-indicator { position: fixed; z-index: 150; top: calc(var(--head-h) + var(--feed-h)); left: 50%; width: 36px; height: 36px; display: grid; place-items: center; background: var(--surface2); border-radius: 50%; color: var(--primary); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-120%); }
.ptr-indicator.show { opacity: 1; }
.ptr-indicator.spin { width: 66px; border-radius: 6px; }
.scroll-top { position: fixed; z-index: 150; right: max(14px,calc((100vw - var(--content-w))/2 + 14px)); bottom: calc(var(--nav-h) + 14px); display: none; width: 38px; height: 38px; border: 1px solid var(--border-strong); border-radius: 50%; padding: 0; background: var(--surface); color: var(--sub); }
.scroll-top.show { display: grid; place-items: center; }

/* Authentication is the same functional handoff, with the V2 visual language. */
#authScreen { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; background: var(--bg); }
.auth-card { width: min(100%,380px); padding: 24px 0; }
.auth-logo { font-size: 26px; font-weight: 700; text-align: center; }
.auth-tagline { color: var(--sub); font-size: 13px; text-align: center; margin-top: 8px; }
.auth-btn { display: block; padding: 12px; background: var(--primary); color: #1a1427; border-radius: 8px; text-align: center; font-weight: 600; margin-top: 10px; }
.auth-btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.install-overlay { display: none !important; }

/* Screen motion is a short horizontal scroll, with reduced motion support. */
.gs-v2-enter-next { animation: gs-enter-next .24s ease-out both; }
.gs-v2-enter-prev { animation: gs-enter-prev .24s ease-out both; }
.gs-v2-exit { display: block !important; position: absolute; top: 0; left: 0; right: 0; pointer-events: none; z-index: -1; }
.gs-v2-exit-next { animation: gs-exit-next .24s ease-out both; }
.gs-v2-exit-prev { animation: gs-exit-prev .24s ease-out both; }
@keyframes gs-enter-next { from { transform: translateX(28px); opacity: .3; } to { transform: translateX(0); opacity: 1; } }
@keyframes gs-enter-prev { from { transform: translateX(-28px); opacity: .3; } to { transform: translateX(0); opacity: 1; } }
@keyframes gs-exit-next { to { transform: translateX(-28px); opacity: 0; } }
@keyframes gs-exit-prev { to { transform: translateX(28px); opacity: 0; } }
@media (min-width: 700px) {
  body.ghostsocial-v2 { background: #0c0c0e; }
  #appMain { border-inline: 1px solid var(--border); }
  .modal-overlay,.gs-modal-ov { align-items: center; padding: 24px; }
  .modal-sheet,.gs-modal { border-radius: 12px; border-bottom: 1px solid var(--border); padding-bottom: 24px; max-height: 85dvh; }
  #gsMenuPanel { bottom: calc(var(--nav-h) + 16px); border-radius: 12px; }
  .nav-label { font-size: 11px; }
  #shareSheet,#repostersSheet { align-items: center !important; padding: 24px; }
  #shareSheet > div,#repostersSheet > div { border-radius: 12px !important; border: 1px solid var(--border) !important; }
}
@media (max-width: 360px) {
  .header-top { padding-inline: 12px; }
  .header-brand { font-size: 16px; gap: 7px; }
  .header-right { gap: 0; }
  .nav-label { font-size: 9px; }
  .post-footer { gap: 10px; }
  .wallet-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* V2 skeletons use the same spacing and silhouettes as the real screens. */
.gs-skeleton { width: 100%; overflow: hidden; pointer-events: none; user-select: none; }
.gs-skel-shapes { width: 100%; }
.skel { display: block; position: relative; overflow: hidden; flex-shrink: 0; background: #242429; }
.skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg,transparent 15%,#bab0d414 47%,transparent 80%); transform: translateX(-100%); animation: gs-skeleton-wave 1.65s ease-in-out infinite; }
@keyframes gs-skeleton-wave { to { transform: translateX(100%); } }
.screen:not(.active) .skel::after,.modal-overlay:not(.open) .skel::after { animation-play-state: paused; }
.gs-skel-copy { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
.gs-skel-line { width: var(--skel-width,85%); height: 11px; border-radius: 4px; }
.gs-skel-avatar { width: 40px; height: 40px; border-radius: 50%; }
.gs-skel-avatar-small { width: 24px; height: 24px; border-radius: 50%; }
.gs-skel-meta { width: 31px; height: 9px; border-radius: 3px; }
.gs-skel-post { padding: 17px 16px 13px; background: var(--bg); border-bottom: 1px solid var(--border); }
.gs-skel-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; }
.gs-skel-paragraph { display: flex; flex-direction: column; gap: 11px; margin-bottom: 18px; }
.gs-skel-media { width: 100%; height: 180px; border-radius: 8px; margin-bottom: 17px; }
.gs-skel-actions { display: flex; gap: 21px; padding-top: 6px; }
.gs-skel-action { width: 36px; height: 13px; border-radius: 4px; }
.gs-skel-row { display: flex; align-items: center; gap: 10px; min-height: 73px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.gs-skel-row-comment { align-items: flex-start; min-height: 93px; padding: 16px 0; }
.gs-skel-row-comment .gs-skel-copy { padding-top: 2px; gap: 11px; }
.gs-skel-row-transaction { min-height: 74px; }
.gs-skel-amount { width: 45px; height: 13px; }
.gs-skeleton-users .gs-skel-row:last-child,.gs-skeleton-notifications .gs-skel-row:last-child,.gs-skeleton-comments .gs-skel-row:last-child { border-bottom: 0; }
.gs-skel-profile { display: flex; flex-direction: column; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; padding: 26px 16px 20px; }
.gs-skel-profile-banner {
  width: calc(100% + 12px);
  height: clamp(88px, 24.5vw, 110px);
  margin: 0 -6px;
  border-radius: 999px;
  -webkit-mask-image: radial-gradient(circle 72px at 50% 100%, transparent 0, transparent 69px, #000 72px);
  mask-image: radial-gradient(circle 72px at 50% 100%, transparent 0, transparent 69px, #000 72px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.gs-skel-profile-avatar { width: 110px; height: 110px; border-radius: 50%; margin: -63px 0 29px; }
.gs-skel-profile-avatar + .gs-skel-line { height: 22px; }
.gs-skel-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; margin-top: 10px; gap: 12px; }
.gs-skel-stats > div { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.gs-skel-stats .gs-skel-line:first-child { height: 17px; }
.gs-skel-stats .gs-skel-line:last-child { height: 8px; }
.gs-skel-profile-actions { display: flex; gap: 8px; width: 100%; justify-content: center; margin-top: 8px; }
.gs-skel-profile-button { width: 128px; height: 39px; border-radius: 8px; }
.gs-loading-mask { position: relative; color: transparent !important; }
.gs-loading-mask > :not([data-gs-mask]) { visibility: hidden !important; }
/* The profile placeholder occupies the card flow, independent of stale data. */
body.ghostsocial-v2 .gs-profile-card.gs-loading-mask { min-height: 0; padding: 0; gap: 0; }
body.ghostsocial-v2 .gs-profile-card.gs-loading-mask > :not([data-gs-mask]) { display: none !important; }
body.ghostsocial-v2 .gs-profile-card.gs-loading-mask > .gs-loading-mask-content {
  position: relative;
  inset: auto;
  align-items: flex-start;
}
body.ghostsocial-v2 .gs-profile-card.gs-content-reveal { animation-name: gs-profile-content-arrive; }
@keyframes gs-profile-content-arrive { from { opacity: 0; } to { opacity: 1; } }
.gs-loading-mask-content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; background: var(--bg); color: var(--text); pointer-events: none; }
.wc-balance .gs-loading-mask-content { background: var(--surface); justify-content: flex-start; }
.gs-skel-field { width: 72%; max-width: 100px; height: 18px; border-radius: 5px; }
.wallet-section > .gs-loading-mask-content { padding: 12px; background: var(--bg); }
.gs-skeleton-field { display: flex; justify-content: center; }
.gs-skeleton-field .gs-skel-shapes { display: flex; justify-content: center; }
.wc-balance .gs-skeleton-field .gs-skel-shapes { justify-content: flex-start; }
.gs-skel-panel { display: flex; flex-direction: column; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 14px; }
.gs-skel-panel .gs-skel-line:first-child { height: 14px; }
.gs-skel-panel-button { width: 100%; height: 40px; border-radius: 8px; margin-top: 5px; }
.gs-skel-preview { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px; border: 1px solid var(--border); border-radius: 8px; }
.gs-skel-preview-image { width: 66px; height: 66px; border-radius: 6px; }
.link-preview-loading:has(.gs-skeleton) { padding: 0; background: transparent; border: 0; display: block; }
.gs-skel-contacts { display: flex; align-items: center; gap: 16px; padding: 8px 0; }
.gs-skel-contacts > div { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 58px; flex-shrink: 0; }
.gs-skel-contacts .gs-skel-line { height: 8px; }
.gs-skeleton-miniska,.gs-skeleton-miniska .gs-skel-shapes { height: 100%; }
.gs-skel-miniska-scene { position: relative; height: 100%; background: #141416; }
.gs-skel-miniska-media { width: 100%; height: 100%; border-radius: 0; background: #1a1a1e; }
.gs-skel-miniska-caption { position: absolute; left: 16px; right: 72px; bottom: 27px; display: flex; flex-direction: column; gap: 12px; }
.gs-skel-miniska-caption .gs-skel-row { border: 0; padding: 0 0 3px; min-height: 43px; }
.gs-skel-miniska-caption .skel,.gs-skel-miniska-actions .skel { background: #35353c; }
.gs-skel-miniska-actions { position: absolute; right: 18px; bottom: 32px; display: flex; flex-direction: column; gap: 22px; }
.gs-skel-circle { width: 30px; height: 30px; border-radius: 50%; }
.gs-skeleton-inline,.gs-legacy-loading { display: inline-flex; width: 36px; vertical-align: middle; }
.gs-skel-inline { width: 36px; height: 10px; border-radius: 4px; }
.gs-skeleton-avatar,.gs-skeleton-avatar .gs-skel-shapes { height: 100%; }
.gs-skeleton-avatar { height: 100%; }
.gs-skeleton-avatar .gs-skel-avatar { width: 100%; height: 100%; border-radius: inherit; }
.gs-more-pending { width: 100%; }
#feedLoader,#fpLoader { padding: 0 !important; text-align: left !important; }
.gs-load-error { min-height: 180px; }
.gs-load-retry { border: 1px solid var(--border-strong); color: var(--primary); }

/* Motion belongs to navigation, feedback and arriving content. */
.gs-content-reveal { animation: gs-content-arrive .3s ease-out both; animation-delay: var(--reveal-delay,0ms); }
@keyframes gs-content-arrive { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
button,.filter-btn,.prof-tab,.fs-tab,.nav-btn,.ctx-item,.attach-menu-item,.profile-tools summary { transition: color .18s,background-color .18s,opacity .18s,transform .18s,border-color .18s; }
button:active:not(:disabled),.ctx-item:active,.attach-menu-item:active { transform: scale(.97); }
input,textarea,select { transition: border-color .18s,background-color .18s; }
#feedSwitch .fs-tab.active::after { transform-origin: center; animation: gs-tab-line .2s ease-out; }
@keyframes gs-tab-line { from { transform: scaleX(.4); opacity: .3; } to { transform: scaleX(1); opacity: 1; } }
.modal-overlay.open .modal-sheet,.attach-menu-overlay.open .attach-menu,.attach-menu-overlay.show .attach-menu,.msk-sheet-card { animation: gs-sheet-arrive .24s ease-out both; }
@keyframes gs-sheet-arrive { from { opacity: .4; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.ctx-menu.open,.emoji-bar,.msk-react-bar,#shareSheet > div,#repostersSheet > div,#dailyStatusModal > div,.toast.show { animation: gs-content-arrive .2s ease-out both; }
.profile-tools[open] > :not(summary) { animation: gs-content-arrive .2s ease-out both; }
.poll-bar,.viewer-timeline-fill,.mskc-vslider-fill { transition: width .18s linear; }
@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none !important; transform: none; background: none; }
  .gs-content-reveal { animation: none !important; opacity: 1; translate: none; }
  button,input,textarea,select { transition: none !important; }
}

/* The same motion rhythm applies to controls, state changes and every layer. */
:root { --gs-ease: cubic-bezier(.2,.8,.2,1); --gs-fast: 160ms; --gs-move: 240ms; }
a,[role="button"],summary,.post-av,.prof-av,.user-card,.notif-card,.poll-option,.react-pill,.com-react,.emoji-btn,.mskc-fdot,.msk-play-overlay,.mskc-vslider-thumb {
  transition: color var(--gs-fast),background-color var(--gs-fast),border-color var(--gs-fast),opacity var(--gs-fast),scale var(--gs-fast),translate var(--gs-move) var(--gs-ease);
}
button,a[role="button"],[role="button"],summary { -webkit-tap-highlight-color: transparent; }
a[role="button"]:active,[role="button"]:active,summary:active,.react-pill:active,.com-react:active { scale: .97; }
button:focus-visible,a:focus-visible,[role="button"]:focus-visible,summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
button i,button svg { transition: color var(--gs-fast),scale var(--gs-fast),opacity var(--gs-fast); }
.post-card,.comment-item,.notif-card,.user-card,.tx-item,.media-preview-card,.wallet-card,.profile-stat { transition: background-color var(--gs-fast),border-color var(--gs-fast); }
.gsm-menu,.confirm-box,.viewer-body,.viewer-controls,.msk-side,.msk-info,.mskc-fdots { animation: gs-content-arrive var(--gs-move) var(--gs-ease) both; }
.modal-overlay.open,.confirm-overlay.open,.gs-modal-ov.open,.attach-menu-overlay.open,.viewer-overlay.open { animation: gs-layer-in 180ms ease-out both; }
@keyframes gs-layer-in { from { opacity: 0; } to { opacity: 1; } }
.gs-motion-leaving { display: flex !important; pointer-events: none !important; animation: gs-layer-out 180ms ease-in both !important; }
.ctx-menu.gs-motion-leaving,.toast.gs-motion-leaving,#gsMenuPanel.gs-motion-leaving,#gsMenuOverlay.gs-motion-leaving { display: block !important; }
#gsMenuPanel.open { animation: gs-sheet-arrive var(--gs-move) var(--gs-ease) both; }
#gsMenuOverlay.open { animation: gs-layer-in 180ms ease-out both; }
@keyframes gs-layer-out { to { opacity: 0; } }
.mskc-fdot.active { scale: 1.2; }
.mskc-vslider-fill,.mskc-vslider-thumb,.mp-progress-bar,.poll-bar,.audio-bar,.gsw-fill { transition: width 120ms linear,left 120ms linear,background-color var(--gs-fast); }
.notif-badge,.react-pill .n,.msk-side .lbl { transition: color var(--gs-fast),opacity var(--gs-fast); }
@media (hover:hover) {
  .user-card:hover,.notif-card:hover { background: #ffffff03; }
  .post-av:hover,.prof-av:hover,a[role="button"]:hover,summary:hover { opacity: .84; }
}

/* Media keeps its space while the first image/frame is arriving. */
.mskc-fslide,#viewerBody { position: relative; }
.gs-media-placeholder { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: inherit; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 220ms ease,visibility 220ms; }
.gs-media-pending > .gs-media-placeholder { opacity: 1; visibility: visible; }
.gs-media-error > .gs-media-placeholder { opacity: 1; visibility: visible; pointer-events: auto; background: var(--surface); color: var(--sub); }
.gs-media-error > .gs-media-placeholder::after { display: none; }
.gs-media-error > .gs-media-placeholder > * { z-index: 1; }
.mg-item img,.mg-item video,.msk-photo,.viewer-img,.viewer-video { transition: opacity 220ms ease; }
.gs-media-pending > video { opacity: 0; }
.gs-media-pending:has(> img) > .gs-media-placeholder { background: #24242955; }
.mskc-vslider::after { content: ''; position: absolute; z-index: 1; top: 6px; left: 0; height: 2px; width: var(--gs-buffered,0%); border-radius: inherit; background: #ffffff35; transition: width 200ms linear; pointer-events: none; }
.mskc-vslider-fill { z-index: 2; }
.mskc-vslider-thumb,.mskc-vslider-cursor { z-index: 3; }
.mskc-fslide:has(video[data-gs-media-state="buffering"])::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--primary); animation: gs-buffer-pulse .9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes gs-buffer-pulse { to { opacity: .3; } }
.gs-msk-more-error { min-height: 180px; height: auto; gap: 14px; scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
  .gs-media-placeholder,a,[role="button"],summary,.post-av,.prof-av,.user-card,.notif-card,.poll-option,.react-pill,.com-react,.emoji-btn,.mskc-fdot,.msk-play-overlay,.mskc-vslider-thumb { transition: none !important; }
  .gs-motion-leaving { display: none !important; }
}

/* Minisks: plain controls, compact captions and a steady playback/buffer timeline. */
body.ghostsocial-v2 .msk-info {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}
body.ghostsocial-v2 .msk-info .av {
  border: 0;
  background: transparent !important;
  box-shadow: none;
}
body.ghostsocial-v2 .msk-side button,
body.ghostsocial-v2 .msk-side .msk-play-btn {
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}
body.ghostsocial-v2 .msk-side button.liked {
  background: transparent !important;
  color: var(--primary);
}
body.ghostsocial-v2 .msk-ttl {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}
body.ghostsocial-v2 .msk-react-bar,
body.ghostsocial-v2 .msk-rc-pop {
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}
body.ghostsocial-v2 .msk-caption-wrap {
  max-width: 38em;
  margin-top: 8px;
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  text-shadow: 0 1px 5px #0008;
}
body.ghostsocial-v2 .msk-info .msk-caption-text {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
body.ghostsocial-v2 .msk-caption-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}
body.ghostsocial-v2 .msk-caption-wrap.expanded .msk-caption-text {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
body.ghostsocial-v2 .msk-caption-more {
  display: inline-block;
  margin: 1px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: inherit;
  font-size: inherit;
  font-weight: 650;
  line-height: inherit;
  box-shadow: none;
  opacity: .82;
  cursor: pointer;
}
body.ghostsocial-v2 .msk-caption-more:hover { opacity: 1; }
body.ghostsocial-v2 .msk-play-overlay {
  transform: none;
  transition: none !important;
  animation: none !important;
}
body.ghostsocial-v2 .msk-play-overlay.show { transform: none; }
body.ghostsocial-v2 .msk-play-overlay i {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  animation: none !important;
}
body.ghostsocial-v2 .mskc-vslider-fill {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: none !important;
  will-change: transform;
}
body.ghostsocial-v2 .mskc-vslider::before { background: #ffffff30; }
body.ghostsocial-v2 .mskc-vslider::after {
  background: #ffffff80;
  transition: width 140ms linear;
}
body.ghostsocial-v2 .mskc-vslider-thumb {
  display: block;
  position: absolute;
  z-index: 3;
  top: 3px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
  transition: none !important;
  pointer-events: none;
  will-change: left;
}
body.ghostsocial-v2 .mskc-vslider-cursor {
  display: none;
  transition: none;
}
body.ghostsocial-v2 .mskc-vslider.hovering .mskc-vslider-cursor {
  display: block;
  background: var(--primary);
}

/* V2 mini-story creator. The original stages stay intact, styled as one flat screen. */
body.ghostsocial-v2 #mskCompose {
  position: fixed; inset: 0; z-index: 300; display: none; overflow: hidden;
  color: var(--text); background: var(--bg);
  padding: env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
  overscroll-behavior: contain;
}
body.ghostsocial-v2 #mskCompose.show { display: block; animation: gs-v2-creator-in 200ms cubic-bezier(.22,1,.36,1) both; }
@keyframes gs-v2-creator-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
body.ghostsocial-v2 #mskCompose .mskc-tabs {
  position: absolute; z-index: 12; top: calc(env(safe-area-inset-top,0px) + 12px); left: 50%;
  display: flex; gap: 2px; padding: 3px; border: 0;
  border-radius: 12px; background: var(--surface); transform: translateX(-50%);
}
body.ghostsocial-v2 #mskCompose .mskc-tab {
  min-height: 38px; padding: 0 14px; border-radius: 9px; background: transparent;
  color: var(--sub); font-size: 13px; font-weight: 600;
}
body.ghostsocial-v2 #mskCompose .mskc-tab.active { background: var(--primary); color: #17131f; }
body.ghostsocial-v2 #mskCompose .mskc-pick-back,
body.ghostsocial-v2 #mskCompose .mskc-pub-back {
  position: absolute; z-index: 14; top: calc(env(safe-area-inset-top,0px) + 12px);
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text);
}
body.ghostsocial-v2 #mskCompose .mskc-pick-back,
body.ghostsocial-v2 #mskCompose .mskc-pub-back { left: 16px; }
body.ghostsocial-v2 #mskCompose .mskc-stage {
  position: absolute; inset: 0; padding: calc(env(safe-area-inset-top,0px) + 72px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);
  animation: gs-v2-stage-in 180ms cubic-bezier(.22,1,.36,1) both;
}
body.ghostsocial-v2 #mskCompose.mskc-tab-switching .mskc-stage { opacity: 0; transform: translateY(6px); }
@keyframes gs-v2-stage-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
body.ghostsocial-v2 #mskCompose #mskcPick { display: flex; align-items: center; justify-content: center; }
body.ghostsocial-v2 #mskCompose #mskcPostPanel { overflow-y: auto; overscroll-behavior: contain; }
body.ghostsocial-v2 #mskCompose #mskcPostPanel .create-card { width: min(100%,560px); margin: 0 auto; }
body.ghostsocial-v2 #mskCompose .mskc-pick-inner {
  position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  gap: 12px; width: min(100%,480px); min-height: 240px; margin: auto; padding: 24px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  transition: background-color 160ms ease,border-color 160ms ease;
}
body.ghostsocial-v2 #mskCompose .mskc-pick-inner.dragging,
body.ghostsocial-v2 #mskCompose .mskc-pick-inner.dragover { border-color: var(--primary); background: #211b2d; }
body.ghostsocial-v2 #mskCompose .mskc-camera-open,
body.ghostsocial-v2 #mskCompose .mskc-gallery,
body.ghostsocial-v2 #mskCompose .mskc-next,
body.ghostsocial-v2 #mskCompose .mskc-publish {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 16px; border: 1px solid transparent; border-radius: 12px;
  background: var(--primary); color: #17131f; font-size: 14px; font-weight: 650;
}
body.ghostsocial-v2 #mskCompose .mskc-camera-open { background: transparent; border-color: var(--border-strong); color: var(--text); }
body.ghostsocial-v2 #mskCompose .mskc-drop-hint,
body.ghostsocial-v2 #mskCompose .mskc-cam-hint { color: var(--sub); font-size: 13px; line-height: 1.5; text-align: center; }
body.ghostsocial-v2 #mskCompose .mskc-camera-stage { background: #080809; touch-action: none; overflow: hidden; }
body.ghostsocial-v2 #mskCompose .mskc-camera-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #080809; }
body.ghostsocial-v2 #mskCompose .mskc-camera-last-frame { position: absolute; inset: 0; z-index: 1; display: none; background-position: center; background-size: cover; }
body.ghostsocial-v2 #mskCompose .mskc-camera-last-frame.show { display: block; }
body.ghostsocial-v2 #mskCompose .mskc-camera-tools { position: absolute; z-index: 4; top: calc(env(safe-area-inset-top,0px) + 12px); right: 68px; }
body.ghostsocial-v2 #mskCompose .mskc-camera-tool,
body.ghostsocial-v2 #mskCompose .mskc-camera-gallery,
body.ghostsocial-v2 #mskCompose .mskc-camera-lock {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid #ffffff38; border-radius: 12px; background: #111113a8; color: #fff;
}
body.ghostsocial-v2 #mskCompose .mskc-camera-controls {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom,0px));
  display: flex; align-items: center; justify-content: center; gap: 28px;
}
body.ghostsocial-v2 #mskCompose .mskc-shutter { display: grid; place-items: center; width: 72px; height: 72px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #ffffff24; }
body.ghostsocial-v2 #mskCompose .mskc-shutter span { width: 52px; height: 52px; border-radius: 50%; background: #fff; transition: border-radius 160ms ease,transform 160ms ease; }
body.ghostsocial-v2 #mskCompose .mskc-shutter.recording span { border-radius: 12px; transform: scale(.74); }
body.ghostsocial-v2 #mskCompose .mskc-camera-status {
  position: absolute; z-index: 4; left: 16px; right: 16px; bottom: calc(112px + env(safe-area-inset-bottom,0px));
  color: #fff; text-align: center; font-size: 13px; text-shadow: 0 1px 8px #000;
}
body.ghostsocial-v2 #mskCompose .mskc-camera-lock-guide { position: absolute; z-index: 5; right: 18px; bottom: calc(128px + env(safe-area-inset-bottom,0px)); display: none; align-items: center; gap: 8px; color: #fff; }
body.ghostsocial-v2 #mskCompose .mskc-camera-lock-guide.show { display: flex; }
body.ghostsocial-v2 #mskCompose .mskc-lock-target { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #ffffff38; border-radius: 12px; background: #111113a8; }
body.ghostsocial-v2 #mskCompose .mskc-lock-rail { width: 72px; height: 6px; overflow: hidden; border-radius: 999px; background: #ffffff45; }
body.ghostsocial-v2 #mskCompose .mskc-unlock-progress { display: block; width: var(--lock-progress,0%); height: 100%; border-radius: inherit; background: var(--primary); }
body.ghostsocial-v2 #mskCompose .mskc-carousel { position: absolute; inset: calc(env(safe-area-inset-top,0px) + 64px) 0 calc(env(safe-area-inset-bottom,0px) + 16px); overflow: hidden; background: #080809; }
body.ghostsocial-v2 #mskCompose .mskc-carousel-track { display: flex; width: 100%; height: 100%; transition: transform 220ms cubic-bezier(.22,1,.36,1); }
body.ghostsocial-v2 #mskCompose .mskc-slide { position: relative; display: flex; flex: 0 0 100%; align-items: center; justify-content: center; height: 100%; }
body.ghostsocial-v2 #mskCompose .mskc-slide img,
body.ghostsocial-v2 #mskCompose .mskc-slide video { max-width: 100%; max-height: 100%; object-fit: contain; }
body.ghostsocial-v2 #mskCompose .mskc-carousel-nav,
body.ghostsocial-v2 #mskCompose .mskc-burger,
body.ghostsocial-v2 #mskCompose .mskc-del,
body.ghostsocial-v2 #mskCompose .mskc-addmore {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 1px solid #ffffff38; border-radius: 12px; background: #111113a8; color: #fff;
}
body.ghostsocial-v2 #mskCompose .mskc-asm-right { position: absolute; z-index: 8; top: calc(env(safe-area-inset-top,0px) + 64px); right: 12px; display: flex; flex-direction: column; gap: 8px; }
body.ghostsocial-v2 #mskCompose .mskc-nav-prev,
body.ghostsocial-v2 #mskCompose .mskc-nav-next { position: absolute; z-index: 6; top: 50%; transform: translateY(-50%); }
body.ghostsocial-v2 #mskCompose .mskc-nav-prev { left: 12px; }
body.ghostsocial-v2 #mskCompose .mskc-nav-next { right: 12px; }
body.ghostsocial-v2 #mskCompose .mskc-dots,
body.ghostsocial-v2 #mskCompose .mskc-fdots { position: absolute; z-index: 7; left: 50%; bottom: calc(env(safe-area-inset-bottom,0px) + 28px); display: flex; gap: 6px; transform: translateX(-50%); }
body.ghostsocial-v2 #mskCompose .mskc-dot,
body.ghostsocial-v2 #mskCompose .mskc-fdot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: #ffffff60; }
body.ghostsocial-v2 #mskCompose .mskc-dot.active,
body.ghostsocial-v2 #mskCompose .mskc-fdot.active { width: 18px; background: #fff; }
body.ghostsocial-v2 #mskCompose .mskc-video-ui { position: absolute; z-index: 5; left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom,0px) + 76px); display: grid; grid-template-columns: 40px minmax(0,1fr) 40px; align-items: center; gap: 8px; padding: 6px; border: 1px solid #ffffff24; border-radius: 12px; background: #111113c9; }
body.ghostsocial-v2 #mskCompose .mskc-video-ui button,
body.ghostsocial-v2 #mskCompose .mskc-video-play,
body.ghostsocial-v2 #mskCompose .mskc-video-sound { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 10px; background: transparent; color: #fff; }
body.ghostsocial-v2 #mskCompose .mskc-video-seek { width: 100%; height: 4px; padding: 0; accent-color: var(--primary); }
body.ghostsocial-v2 #mskCompose .mskc-video-time { color: var(--sub); font-size: 11px; font-variant-numeric: tabular-nums; }
body.ghostsocial-v2 #mskCompose .mskc-pub-inner { display: flex; flex-direction: column; gap: 16px; width: min(100%,560px); max-height: 100%; overflow: auto; margin: 0 auto; padding: 16px; }
body.ghostsocial-v2 #mskCompose .mskc-pub-preview { position: relative; align-self: center; width: 124px; height: 164px; overflow: hidden; border-radius: 12px; background: var(--surface); }
body.ghostsocial-v2 #mskCompose .mskc-pub-preview img,
body.ghostsocial-v2 #mskCompose .mskc-pub-preview video { width: 100%; height: 100%; object-fit: cover; }
body.ghostsocial-v2 #mskCompose .mskc-caption { width: 100%; min-height: 112px; padding: 12px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; resize: vertical; }
body.ghostsocial-v2 #mskCompose .mskc-nsfw { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 12px; background: transparent; color: var(--sub); font-weight: 600; }
body.ghostsocial-v2 #mskCompose .mskc-nsfw.on { border-color: var(--red); color: var(--red); }
body.ghostsocial-v2 #mskCompose .mskc-pub-files { display: flex; align-items: flex-start; gap: 10px; max-width: 100%; overflow-x: auto; padding: 4px 0 8px; }
body.ghostsocial-v2 #mskCompose .mskc-file { position: relative; flex: 0 0 88px; width: 88px; }
body.ghostsocial-v2 #mskCompose .mskc-file-thumb { position: relative; width: 88px; height: 116px; overflow: hidden; border-radius: 10px; background: var(--surface); }
body.ghostsocial-v2 #mskCompose .mskc-file-thumb img,
body.ghostsocial-v2 #mskCompose .mskc-file-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
body.ghostsocial-v2 #mskCompose .mskc-file-bar { height: 3px; margin-top: 6px; border-radius: 99px; background: var(--border-strong); }
body.ghostsocial-v2 #mskCompose .mskc-file-fill { height: 100%; border-radius: inherit; background: var(--primary); transition: width 120ms linear; }
body.ghostsocial-v2 #mskCompose .mskc-file-label { margin-top: 5px; color: var(--sub); font-size: 11px; text-align: center; }
body.ghostsocial-v2 #mskCompose .mskc-file-delete,
body.ghostsocial-v2 #mskCompose .mskc-file-upload { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #111113cf; color: #fff; }
body.ghostsocial-v2 #mskCompose .mskc-progress { position: absolute; z-index: 15; top: calc(env(safe-area-inset-top,0px) + 64px); left: 16px; right: 16px; display: none; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); }
body.ghostsocial-v2 #mskCompose .mskc-progress-bar { flex: 1; width: 0; height: 4px; border-radius: 99px; background: var(--primary); transition: width 120ms linear; }
body.ghostsocial-v2 #mskCompose .mskc-progress-pause { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; background: var(--surface2); color: var(--text); }
body.ghostsocial-v2 #mskCompose .mskc-addmore.disabled { opacity: .4; pointer-events: none; }
body.ghostsocial-v2 #mskCompose .mskc-publish:disabled,
body.ghostsocial-v2 #mskCompose .mskc-next:disabled { opacity: .45; }
@media (min-width: 1000px) {
  body.ghostsocial-v2 #mskCompose .mskc-pick-inner { min-height: 280px; }
  body.ghostsocial-v2 #mskCompose .mskc-pub-inner { padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ghostsocial-v2 #mskCompose.show,
  body.ghostsocial-v2 #mskCompose .mskc-stage,
  body.ghostsocial-v2 #mskCompose .mskc-shutter span { animation: none !important; transition: none !important; }
}

/* Full-bleed mini feed: cropped media, separate black caption shelf, edge-to-edge timeline. */
body.ghostsocial-v2.miniska-mode #screenMinisky {
  inset: env(safe-area-inset-top, 0px) 0 var(--nav-h);
  background: #000;
}
body.gs-v2-ready.ghostsocial-v2.miniska-mode {
  padding-top: 0;
}
/* Hide the brand, not its parent: JS mounts the feed switch inside #appHeader. */
body.ghostsocial-v2.miniska-mode #appHeader {
  display: block !important;
  height: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
body.ghostsocial-v2.miniska-mode #appHeader > .header-top,
body.ghostsocial-v2.miniska-mode #appHeader > #headerFilters {
  display: none !important;
}
body.ghostsocial-v2.miniska-mode #feedSwitch {
  position: fixed;
  z-index: 120;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100vw;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
}
body.ghostsocial-v2.miniska-mode #feedSwitch .fs-tab {
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  pointer-events: auto;
}
body.ghostsocial-v2.miniska-mode #mskFeed {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: #000;
}
body.ghostsocial-v2.miniska-mode .msk-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: #000;
}
body.ghostsocial-v2.miniska-mode .mskc-ftrack {
  grid-area: 1 / 1;
  min-height: 0;
  height: auto;
  overflow: hidden;
}
body.ghostsocial-v2.miniska-mode .mskc-fslide {
  min-height: 0;
}
body.ghostsocial-v2.miniska-mode .mskc-fslide video,
body.ghostsocial-v2.miniska-mode .mskc-fslide img,
body.ghostsocial-v2.miniska-mode .msk-card > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #000;
}
body.ghostsocial-v2.miniska-mode .msk-overlay {
  position: relative;
  inset: auto;
  grid-area: 2 / 1;
  z-index: 3;
  min-width: 0;
  min-height: 0;
  padding: 0;
  color: #fff;
  background: #000;
}
body.ghostsocial-v2.miniska-mode .msk-info {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px max(74px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  color: #fff;
  background: #000 !important;
  text-shadow: none;
}
body.ghostsocial-v2.miniska-mode .msk-caption-wrap {
  max-width: none;
  margin-top: 7px;
  text-shadow: none;
}
/* One reaction icon and a tappable count (not two identical hearts). */
body.ghostsocial-v2.miniska-mode .msk-react-cluster {
  min-width: 34px;
  padding: 0 4px;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}
body.ghostsocial-v2.miniska-mode .msk-react-cluster .msk-rc-icons { display: none; }
body.ghostsocial-v2.miniska-mode .msk-react-total { display: block; }
body.ghostsocial-v2.miniska-mode .msk-side {
  position: relative;
  grid-area: 1 / 1;
  justify-self: end;
  align-self: end;
  margin: 0 max(10px, env(safe-area-inset-right, 0px)) 16px 0;
  z-index: 4;
}
body.ghostsocial-v2.miniska-mode .msk-play-overlay {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  z-index: 5;
}
body.ghostsocial-v2.miniska-mode .mskc-vslider {
  position: absolute;
  z-index: 8;
  top: 52px;
  left: 8px;
  right: 8px;
  height: 12px;
  margin: 0;
  border-radius: 0;
  background: transparent;
}
body.ghostsocial-v2.miniska-mode .mskc-vslider::before,
body.ghostsocial-v2.miniska-mode .mskc-vslider::after {
  top: 5px;
  height: 2px;
}
body.ghostsocial-v2.miniska-mode .mskc-vslider::after {
  background: rgba(255, 255, 255, .46);
  transition: width 140ms linear;
}
body.ghostsocial-v2.miniska-mode .mskc-vslider-fill {
  top: 5px;
}
body.ghostsocial-v2.miniska-mode .mskc-vslider-thumb {
  top: 2px;
}
@media (max-width: 699px) {
  body.ghostsocial-v2.miniska-mode #screenMinisky {
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
  }
  body.ghostsocial-v2.miniska-mode #mskFeed,
  body.ghostsocial-v2.miniska-mode .msk-card { width: 100vw; }
}


/* V2 timeline color and Y-thickness hotfix 2026-10-13 */
body.ghostsocial-v2 .mskc-vslider,
body.ghostsocial-v2.miniska-mode .mskc-vslider {
  left: 12px !important;
  right: 12px !important;
  border-radius: 999px !important;
}
body.ghostsocial-v2 .mskc-vslider::before,
body.ghostsocial-v2 .mskc-vslider::after,
body.ghostsocial-v2.miniska-mode .mskc-vslider::before,
body.ghostsocial-v2.miniska-mode .mskc-vslider::after {
  top: calc(50% - 4px) !important;
  height: 8px !important;
  border-radius: 999px !important;
}
body.ghostsocial-v2 .mskc-vslider::before,
body.ghostsocial-v2.miniska-mode .mskc-vslider::before {
  background: #77777f !important;
}
body.ghostsocial-v2 .mskc-vslider-fill,
body.ghostsocial-v2.miniska-mode .mskc-vslider-fill {
  top: calc(50% - 4px) !important;
  height: 8px !important;
  background: #7c2df0 !important;
  border-radius: 999px !important;
}
body.ghostsocial-v2 .mskc-vslider::after,
body.ghostsocial-v2.miniska-mode .mskc-vslider::after {
  background: #d4d4da !important;
}
body.ghostsocial-v2 .mskc-vslider-predict,
body.ghostsocial-v2.miniska-mode .mskc-vslider-predict {
  top: calc(50% - 4px) !important;
  height: 8px !important;
  background-image: repeating-linear-gradient(90deg, #d4d4da 0 3px, transparent 3px 6px) !important;
  border-radius: 999px !important;
}
body.ghostsocial-v2.feed-mode #feedList > .post-card .post-slide-timeline {
  left: 12px !important;
  right: 12px !important;
  border-radius: 999px !important;
}
body.ghostsocial-v2.feed-mode #feedList > .post-card .post-slide-timeline::before,
body.ghostsocial-v2.feed-mode #feedList > .post-card .post-slide-buffer,
body.ghostsocial-v2.feed-mode #feedList > .post-card .post-slide-predict,
body.ghostsocial-v2.feed-mode #feedList > .post-card .post-slide-progress {
  top: 6px !important;
  height: 8px !important;
  border-radius: 999px !important;
}
body.ghostsocial-v2.feed-mode #feedList > .post-card .post-slide-timeline::before {
  background: #77777f !important;
}
body.ghostsocial-v2.feed-mode #feedList > .post-card .post-slide-buffer {
  background: #d4d4da !important;
}
body.ghostsocial-v2.feed-mode #feedList > .post-card .post-slide-predict {
  background-image: repeating-linear-gradient(90deg, #d4d4da 0 3px, transparent 3px 6px) !important;
}
body.ghostsocial-v2.feed-mode #feedList > .post-card .post-slide-progress {
  background: #7c2df0 !important;
}

/* V2 mini timeline: rounded download forecast, anchored to the end of the buffer. */
body.ghostsocial-v2 .mskc-vslider-predict,
body.ghostsocial-v2.miniska-mode .mskc-vslider-predict,
body.ghostsocial-v2.feed-mode #feedList > .post-card .post-slide-predict {
  position: absolute;
  z-index: 2;
  height: 8px !important;
  overflow: hidden;
  border-radius: 999px !important;
  background-color: #d4d4da !important;
  background-image: repeating-linear-gradient(90deg, #d4d4da 0 9px, transparent 9px 14px) !important;
  background-size: 14px 100% !important;
  background-position: 0 0;
  background-repeat: repeat-x !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Crect width='9' height='8' rx='4' fill='white'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Crect width='9' height='8' rx='4' fill='white'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 14px 100% !important;
  mask-size: 14px 100% !important;
  -webkit-mask-repeat: repeat-x !important;
  mask-repeat: repeat-x !important;
  opacity: 0;
  transform-origin: left center;
  transition: left .16s linear, width .24s cubic-bezier(.22,1,.36,1), opacity .18s ease;
  pointer-events: none;
}
body.ghostsocial-v2.miniska-mode .mskc-vslider-predict { top: calc(50% - 4px) !important; }
body.ghostsocial-v2.feed-mode #feedList > .post-card .post-slide-predict { top: 6px !important; }
body.ghostsocial-v2 .mskc-vslider-predict.is-visible,
body.ghostsocial-v2.feed-mode #feedList > .post-card .post-slide-predict.is-visible {
  opacity: .92;
  animation: gs-buffer-predict var(--gs-predict-duration,.7s) linear infinite,
    gs-buffer-reveal .38s cubic-bezier(.16,1,.3,1) both;
}
/* A positive pattern offset makes each pill travel right from the buffer edge. */
@keyframes gs-buffer-predict {
  from { background-position: 0 0; -webkit-mask-position: 0 0; mask-position: 0 0; }
  to { background-position: 14px 0; -webkit-mask-position: 14px 0; mask-position: 14px 0; }
}
@keyframes gs-buffer-reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  body.ghostsocial-v2 .mskc-vslider-predict.is-visible,
  body.ghostsocial-v2.feed-mode #feedList > .post-card .post-slide-predict.is-visible {
    animation: none !important;
  }
}

/* Slim mini-story timeline with a smaller, clean playhead. */
body.ghostsocial-v2.miniska-mode .mskc-vslider::before,
body.ghostsocial-v2.miniska-mode .mskc-vslider::after,
body.ghostsocial-v2.miniska-mode .mskc-vslider-fill,
body.ghostsocial-v2.miniska-mode .mskc-vslider-predict {
  top: calc(50% - 2px) !important;
  height: 4px !important;
  border-radius: 999px !important;
}
body.ghostsocial-v2.miniska-mode .mskc-vslider-thumb {
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: none !important;
}

/* Complete V2 profile cards with the banner and metadata shown on /home. */
body.ghostsocial-v2 .gs-profile-banner {
  position: relative;
  width: calc(100% + 32px);
  height: clamp(118px, 28vw, 152px);
  flex: none;
  overflow: hidden;
  margin: 0 -16px 0;
  border-radius: 20px 20px 15px 15px;
  background: linear-gradient(120deg, #301754, #171026 72%);
}
body.ghostsocial-v2 .gs-profile-banner::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(19,13,32,.1), transparent 65%);
  content: "";
  pointer-events: none;
}
body.ghostsocial-v2 .gs-profile-banner-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.ghostsocial-v2 .gs-profile-banner-image[hidden] { display: none !important; }
body.ghostsocial-v2 .gs-profile-card > .prof-av {
  position: relative;
  z-index: 1;
  flex: none;
  margin: -43px 0 0;
  border-radius: 25px;
}
body.ghostsocial-v2 .gs-profile-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
body.ghostsocial-v2 .gs-profile-name-row .prof-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
}
body.ghostsocial-v2 .gs-profile-name-row .prof-name > .user-badges {
  flex: 0 0 auto;
  margin-left: 0;
  line-height: 1;
}
body.ghostsocial-v2 .gs-profile-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
body.ghostsocial-v2 .gs-profile-badges[hidden],
body.ghostsocial-v2 .gs-profile-music[hidden],
body.ghostsocial-v2 .gs-profile-id[hidden],
body.ghostsocial-v2 .gs-profile-bio[hidden],
body.ghostsocial-v2 .gs-profile-stat-today[hidden] { display: none !important; }
body.ghostsocial-v2 .gs-profile-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #f4edff;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
}
body.ghostsocial-v2 .gs-profile-badge.prefix { color: #d2b4ff; }
body.ghostsocial-v2 .gs-profile-badge.role { color: #ffd99a; }
body.ghostsocial-v2 .gs-profile-bio {
  width: 100%;
  color: #f0eafa;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: pre-wrap;
}
body.ghostsocial-v2 .gs-profile-id {
  width: 100%;
  color: var(--gs2-muted);
  font-size: 11px;
  text-align: left;
}
body.ghostsocial-v2 .gs-profile-stat-today {
  display: block;
  margin-top: 3px;
  color: #9ee2b8;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.25;
}
body.ghostsocial-v2 .gs-profile-music {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  min-height: 38px;
  padding: 7px 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: linear-gradient(120deg, #45246f, #231536);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
body.ghostsocial-v2 .gs-profile-music i {
  flex: none;
  width: 15px;
  text-align: center;
}
body.ghostsocial-v2 .gs-profile-music span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.ghostsocial-v2 .gs-profile-music.is-playing { border-color: rgba(210,180,255,.65); }
body.ghostsocial-v2 .gs-profile-music.is-error { color: #f1a5ae; }
body.ghostsocial-v2 .gs-profile-card > .daily-status,
body.ghostsocial-v2 .gs-profile-card > .rep-badge { text-align: center; }
body.ghostsocial-v2 #profAvEditBtn { flex: none; }


/* Match the profile banner and music capsule to the supplied screen. */
body.ghostsocial-v2 .gs-profile-banner {
  height: clamp(88px, 24.5vw, 110px);
  border-radius: 999px;
}
body.ghostsocial-v2 .gs-profile-card > .prof-av {
  width: 110px;
  height: 110px;
  box-sizing: border-box;
  margin: -70px 0 29px;
  border: 4px solid #070918;
  border-radius: 50%;
}
body.ghostsocial-v2 .gs-profile-music {
  width: 100%;
  min-height: 70px;
  padding: 8px 22px 8px 8px;
  border-radius: 999px;
  background-color: #171026;
  background-image: linear-gradient(120deg, #301754, #171026 72%);
}
body.ghostsocial-v2 .gs-profile-music-cover,
body.ghostsocial-v2 .gs-profile-music-placeholder {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  overflow: hidden;
  border-radius: 50%;
}
body.ghostsocial-v2 .gs-profile-music-cover { object-fit: cover; }
body.ghostsocial-v2 .gs-profile-music-cover[hidden] { display: none !important; }
body.ghostsocial-v2 .gs-profile-music-placeholder {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.75);
}
body.ghostsocial-v2 .gs-profile-music-placeholder[hidden] { display: none !important; }
body.ghostsocial-v2 .gs-profile-music-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  text-align: left;
}
body.ghostsocial-v2 .gs-profile-music-copy strong {
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.ghostsocial-v2 .gs-profile-music-copy small {
  overflow: hidden;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.ghostsocial-v2 .gs-profile-music-copy small[hidden] { display: none !important; }
body.ghostsocial-v2 .gs-profile-music > [data-music-icon] {
  width: 18px;
  margin-left: auto;
  font-size: 17px;
}


/* A clear transparent gap around the avatar; the banner itself stays in place. */
body.ghostsocial-v2 .gs-profile-banner {
  -webkit-mask-image: radial-gradient(circle 72px at 50% 100%, transparent 0, transparent 71px, #000 71px);
  mask-image: radial-gradient(circle 72px at 50% 100%, transparent 0, transparent 71px, #000 71px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
body.ghostsocial-v2 .gs-profile-card > .prof-av {
  margin: -63px 0 29px;
  border: 0;
}
body.ghostsocial-v2 .gs-profile-music {
  border: 0;
  box-shadow: none;
}


/* Keep the social navigation docked to the viewport on every screen. */
body.ghostsocial-v2 #appNav {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  width: 100%;
  max-width: 100%;
  z-index: 200 !important;
}


/* Profile details layout: metadata rows and the status bubble below identity. */
body.ghostsocial-v2 .gs-profile-metadata {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 4.8vw, 28px);
  width: 100%;
  margin-top: clamp(28px, 8vw, 62px);
  text-align: left;
}
body.ghostsocial-v2 .gs-profile-card:has(> .gs-profile-music[hidden]) .gs-profile-metadata {
  margin-top: 16px;
}
body.ghostsocial-v2 .gs-profile-field {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  text-align: left;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
body.ghostsocial-v2 .gs-profile-field-icon {
  display: grid;
  place-items: center;
  width: 36px;
  min-height: 36px;
  color: #a855f7;
  font-size: 25px;
  line-height: 1;
  text-align: center;
}
body.ghostsocial-v2 .gs-profile-field-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body.ghostsocial-v2 .gs-profile-field-copy strong {
  overflow-wrap: anywhere;
  color: #f5f3ff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
body.ghostsocial-v2 .gs-profile-field-copy small {
  color: var(--gs2-muted, #788096);
  font-size: 12px;
  line-height: 1.35;
}
body.ghostsocial-v2 .gs-profile-divider {
  width: 100%;
  height: 1px;
  background: rgba(160, 166, 190, .25);
}
body.ghostsocial-v2 .gs-profile-id[hidden],
body.ghostsocial-v2 .gs-profile-status[hidden] { display: none !important; }
body.ghostsocial-v2 .gs-profile-card:has(> .gs-profile-status:not([hidden])) > .prof-av {
  margin-bottom: 4px;
}
/* A thought bubble with a stable text surface and a two-dot trail. */
body.ghostsocial-v2 .gs-profile-card > .gs-profile-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: none;
  box-sizing: border-box;
  width: fit-content;
  min-width: 96px;
  max-width: min(86%, 300px);
  min-height: 48px;
  margin: 20px 0 16px;
  padding: 12px 20px 13px;
  overflow: visible;
  border: 1px solid rgba(216,204,233,.85);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
  color: #282232;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .005em;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  text-align: center;
  text-wrap: balance;
  animation: gs-profile-thought-float 5.8s ease-in-out infinite;
}
body.ghostsocial-v2 .gs-profile-status::before,
body.ghostsocial-v2 .gs-profile-status::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(216,204,233,.85);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
  pointer-events: none;
  animation: gs-profile-thought-dot 3.4s ease-in-out infinite;
}
body.ghostsocial-v2 .gs-profile-status::before {
  top: -13px;
  left: calc(50% - 5px);
  width: 9px;
  height: 9px;
}
body.ghostsocial-v2 .gs-profile-status::after {
  top: -24px;
  left: calc(50% + 7px);
  width: 5px;
  height: 5px;
  animation-delay: -.7s;
}
body.ghostsocial-v2 .gs-profile-status-value {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  min-width: 0;
  max-width: 100%;
  transform: none;
  animation: gs-profile-thought-text .3s ease-out both;
}
@keyframes gs-profile-thought-float {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-3px,0); }
}
@keyframes gs-profile-thought-dot {
  0%, 100% { opacity: .65; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes gs-profile-thought-text {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.ghostsocial-v2 .gs-profile-card > .gs-profile-status,
  body.ghostsocial-v2 .gs-profile-status::before,
  body.ghostsocial-v2 .gs-profile-status::after,
  body.ghostsocial-v2 .gs-profile-status-value { animation: none; }
}
body.ghostsocial-v2 .gs-profile-card > .rep-badge {
  align-self: flex-end;
  margin: 36px 0 0;
}
body.ghostsocial-v2 .gs-profile-card > .stats-row { margin-top: 14px; }


/* Compact navigation: a 48px dock with matching layout offsets. */
body.ghostsocial-v2 #appNav {
  box-sizing: border-box;
  height: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
  padding-top: 1px !important;
  padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)) !important;
}
body.ghostsocial-v2 #appNav .nav-btn {
  min-height: 44px;
  height: 44px;
  max-height: 44px;
  gap: 1px;
  padding: 1px 0;
}
body.ghostsocial-v2 #appNav .nav-icon-wrap {
  height: 20px;
  min-width: 20px;
}
body.ghostsocial-v2 #appNav .nav-btn i { font-size: 18px; }
body.ghostsocial-v2 #appNav .nav-label { font-size: 9px; }
body.ghostsocial-v2 #appNav .nav-create .nav-icon-wrap {
  width: 34px;
  height: 24px;
  border-radius: 7px;
}
body.ghostsocial-v2 #appNav .nav-create i { font-size: 18px; }
body.ghostsocial-v2 .header-brand > .gs-brand-avatar {
  display: block;
  flex: none;
  width: 25px;
  height: 28px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Mini-story creation stays in preview while the editor is being finished. */
body.ghostsocial-v2 #mskCompose #mskcComingSoon { align-items: center; justify-content: center; text-align: center; }
body.ghostsocial-v2 #mskCompose .mskc-coming-soon { max-width: 320px; padding: 24px; }
body.ghostsocial-v2 #mskCompose .mskc-coming-soon h2 { margin: 0 0 10px; font-size: 24px; line-height: 1.25; }
body.ghostsocial-v2 #mskCompose .mskc-coming-soon p { margin: 0; color: var(--sub); font-size: 16px; line-height: 1.5; }


/* V2 posts feed: match the centered V1 feed tabs. */
body.ghostsocial-v2.feed-mode #feedSwitch {
  justify-content: center;
  gap: 30px;
}
body.ghostsocial-v2.feed-mode #feedSwitch .fs-tab {
  padding: 6px 2px;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
  transition: color .2s;
}
body.ghostsocial-v2.feed-mode #feedSwitch .fs-tab.active {
  color: #fff;
}
body.ghostsocial-v2.feed-mode #feedSwitch .fs-tab.active::after {
  bottom: -4px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  box-shadow: 0 0 10px rgba(168, 85, 247, .6);
}


/* Keep the transparent posts switcher over the feed, below the header and filters. */
body.ghostsocial-v2.feed-mode #feedSwitch {
  position: fixed;
  z-index: 99;
  top: calc(var(--head-h) + 52px);
  left: 0;
  right: 0;
  width: min(100%, var(--content-w));
  height: 44px;
  margin: 0 auto;
  padding: 0 16px;
  align-items: stretch;
  justify-content: center;
  gap: 30px;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
body.ghostsocial-v2.feed-mode #feedSwitch .fs-tab { pointer-events: auto; }
/* Subtle translucent glass on both fixed navigation bars, with a fallback
   for browsers that do not support color-mix. */
body.ghostsocial-v2.feed-mode #appHeader {
  background-color: rgba(17, 17, 19, .78);
  background-color: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}
body.ghostsocial-v2 #appNav {
  background-color: rgba(17, 17, 19, .60);
  background-color: color-mix(in srgb, var(--bg) 60%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
}

/* Compact single-image post media in the V2 feed. */
body.ghostsocial-v2.feed-mode #feedList .media-grid.g1 .mg-item {
  height: min(360px, 55vh);
  min-height: 0;
  aspect-ratio: auto;
}
body.ghostsocial-v2.feed-mode #feedList .media-grid.g1 .mg-item > img,
body.ghostsocial-v2.feed-mode #feedList .media-grid.g1 .mg-item > video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

/* V2 feed comments expand inside the post card. */
body.ghostsocial-v2.feed-mode #commentsModal.feed-inline {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  width: 100%;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  align-items: stretch;
  justify-content: stretch;
  background: transparent;
  animation: none;
  transition: max-height 240ms cubic-bezier(.2,.75,.25,1), margin-top 240ms cubic-bezier(.2,.75,.25,1), opacity 170ms ease;
  will-change: max-height, opacity;
}
body.ghostsocial-v2.feed-mode #commentsModal.feed-inline.open {
  display: block;
  max-height: 4000px;
  margin-top: 14px;
  opacity: 1;
}
body.ghostsocial-v2.feed-mode #commentsModal.feed-inline.comments-closing {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
}
body.ghostsocial-v2.feed-mode #commentsModal.feed-inline .modal-sheet {
  width: 100%;
  max-width: none;
  max-height: none;
  overflow: visible;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}
body.ghostsocial-v2.feed-mode #commentsModal.feed-inline .modal-handle { display: none; }
body.ghostsocial-v2.feed-mode #commentsModal.feed-inline .modal-header { margin: 0 0 4px; }
body.ghostsocial-v2.feed-mode #commentsModal.feed-inline .comment-input-row {
  position: static;
  bottom: auto;
  margin-top: 10px;
  padding: 10px 0 0;
  background: transparent;
}
#commentsNextPost {
  position: fixed;
  z-index: 210;
  right: max(14px,calc((100vw - var(--content-w))/2 + 14px));
  bottom: calc(var(--nav-h) + 14px);
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 6px 20px #0005;
  font-size: 16px;
  touch-action: manipulation;
}
body.ghostsocial-v2.feed-mode.comments-inline-open #commentsNextPost { display: grid; }
body.ghostsocial-v2.feed-mode.comments-inline-open #scrollTopBtn { display: none !important; }





/* Minimal pull cue: a progress glyph in the empty gutter beside the feed tabs. */
body.ghostsocial-v2.feed-mode #feedSwitch,
body.ghostsocial-v2.miniska-mode #feedSwitch { pointer-events: auto; }
body.ghostsocial-v2 #feedSwitch .fs-tab { pointer-events: auto; }
body.ghostsocial-v2 .ptr-indicator {
  --ptr-progress: 0;
  --ptr-ring-angle: 0deg;
  --ptr-scale: .82;
  position: fixed;
  z-index: 150;
  top: var(--ptr-y, calc(var(--head-h) + 74px));
  left: var(--ptr-x, 50%);
  width: 32px !important;
  height: 32px !important;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: visible;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #d8c3ff;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.72);
  transition: opacity 150ms ease, transform 190ms cubic-bezier(.2,.8,.2,1), visibility 150ms;
}
body.ghostsocial-v2 .ptr-indicator::before { content: none !important; }
body.ghostsocial-v2 .ptr-indicator.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(var(--ptr-scale));
}
body.ghostsocial-v2 .ptr-orb {
  position: relative;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #d8c3ff;
  filter: drop-shadow(0 0 5px rgba(183,142,255,.45));
  transition: transform 180ms ease, color 180ms ease;
}
body.ghostsocial-v2 .ptr-orb-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from -135deg, #c5a4ff 0deg var(--ptr-ring-angle), rgba(201,181,230,.24) var(--ptr-ring-angle) 270deg, transparent 270deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  transition: background 100ms linear;
}
body.ghostsocial-v2 .ptr-orb i { font-size: 13px; transition: transform 180ms ease, color 180ms ease; }
body.ghostsocial-v2 .ptr-copy,
body.ghostsocial-v2 .ptr-meter { display: none !important; }
body.ghostsocial-v2 .ptr-indicator.is-ready .ptr-orb { transform: scale(1.12); color: #fff; }
body.ghostsocial-v2 .ptr-indicator.is-ready .ptr-orb i { transform: translateY(1px) rotate(180deg); }
body.ghostsocial-v2 .ptr-indicator.is-refreshing .ptr-orb-ring {
  background: conic-gradient(from -135deg, transparent 0deg 235deg, #c5a4ff 235deg 300deg, transparent 300deg 360deg);
  animation: gs-ptr-orbit 850ms linear infinite;
}
body.ghostsocial-v2 .ptr-indicator.is-refreshing .ptr-orb i { animation: gs-ptr-icon-spin 850ms linear infinite; }
body.ghostsocial-v2 .ptr-indicator.is-done .ptr-orb { color: #8ce2b1; }
body.ghostsocial-v2 .ptr-indicator.is-done .ptr-orb-ring { background: conic-gradient(#8ce2b1 0deg 360deg); }
body.ghostsocial-v2 .ptr-indicator.is-error .ptr-orb { color: #ff9b9b; }
body.ghostsocial-v2 .ptr-indicator.is-error .ptr-orb-ring { background: conic-gradient(#ff9b9b 0deg 360deg); }
@keyframes gs-ptr-orbit { to { transform: rotate(360deg); } }
@keyframes gs-ptr-icon-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.ghostsocial-v2 .ptr-indicator,
  body.ghostsocial-v2 .ptr-orb,
  body.ghostsocial-v2 .ptr-orb i,
  body.ghostsocial-v2 .ptr-orb-ring { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Bare refresh glyph; fixed controls have no decorative background. */
body.ghostsocial-v2 .ptr-indicator {
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.ghostsocial-v2 .ptr-orb { filter: none !important; }
body.ghostsocial-v2.feed-mode #appHeader {
  background-image: none !important;
  border-bottom-color: var(--border);
}
body.ghostsocial-v2.feed-mode #feedSwitch {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Eight independently flowing aurora glows, feathered into the feed. */
body.ghostsocial-v2.feed-mode #appHeader { border-bottom-color: transparent; }
body.ghostsocial-v2 #appHeader > .gs-header-gradient {
  display: none;
  position: absolute;
  inset: 0 0 -36px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .96) 18%, rgba(0, 0, 0, .84) 40%, rgba(0, 0, 0, .60) 65%, rgba(0, 0, 0, .30) 80%, rgba(0, 0, 0, .10) 92%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .96) 18%, rgba(0, 0, 0, .84) 40%, rgba(0, 0, 0, .60) 65%, rgba(0, 0, 0, .30) 80%, rgba(0, 0, 0, .10) 92%, transparent 100%);
  transform: translateY(var(--feed-header-gradient-y, 0px));
}
body.ghostsocial-v2.feed-mode #appHeader > .gs-header-gradient { display: block; }
body.ghostsocial-v2 .gs-header-gradient > .gs-aurora-glow {
  position: absolute;
  top: -75%;
  left: var(--aurora-left);
  width: var(--aurora-width, 34%);
  height: 210%;
  background: radial-gradient(ellipse at 50% 45%, var(--aurora-color) 0%, transparent 72%);
  transform-origin: 50% 40%;
  animation: gs-header-aurora-flow var(--aurora-duration, 8s) ease-in-out var(--aurora-delay, 0s) infinite;
}
body.ghostsocial-v2 .gs-aurora-glow:nth-child(1) { --aurora-left: -15%; --aurora-color: rgba(151, 78, 222, .38); --aurora-duration: 6.2s; --aurora-delay: -1.4s; }
body.ghostsocial-v2 .gs-aurora-glow:nth-child(2) { --aurora-left: 0%; --aurora-width: 30%; --aurora-color: rgba(104, 95, 225, .32); --aurora-duration: 7.3s; --aurora-delay: -4.6s; }
body.ghostsocial-v2 .gs-aurora-glow:nth-child(3) { --aurora-left: 14%; --aurora-width: 38%; --aurora-color: rgba(175, 92, 220, .30); --aurora-duration: 5.8s; --aurora-delay: -2.8s; }
body.ghostsocial-v2 .gs-aurora-glow:nth-child(4) { --aurora-left: 29%; --aurora-color: rgba(91, 120, 218, .28); --aurora-duration: 8.4s; --aurora-delay: -6.1s; }
body.ghostsocial-v2 .gs-aurora-glow:nth-child(5) { --aurora-left: 44%; --aurora-width: 30%; --aurora-color: rgba(135, 79, 211, .36); --aurora-duration: 6.7s; --aurora-delay: -3.7s; }
body.ghostsocial-v2 .gs-aurora-glow:nth-child(6) { --aurora-left: 58%; --aurora-width: 38%; --aurora-color: rgba(79, 174, 174, .20); --aurora-duration: 8.9s; --aurora-delay: -5.2s; }
body.ghostsocial-v2 .gs-aurora-glow:nth-child(7) { --aurora-left: 72%; --aurora-color: rgba(143, 102, 226, .32); --aurora-duration: 7.1s; --aurora-delay: -1.8s; }
body.ghostsocial-v2 .gs-aurora-glow:nth-child(8) { --aurora-left: 87%; --aurora-width: 30%; --aurora-color: rgba(94, 123, 201, .28); --aurora-duration: 8.1s; --aurora-delay: -6.5s; }
body.ghostsocial-v2 .gs-header-gradient.is-outside > .gs-aurora-glow { animation-play-state: paused; }
@keyframes gs-header-aurora-flow {
  0%, 100% { transform: translate3d(-12%, -4%, 0) rotate(-10deg) scale(.90, 1.05); opacity: .72; }
  33% { transform: translate3d(9%, 5%, 0) rotate(8deg) scale(1.08, .96); opacity: 1; }
  66% { transform: translate3d(-3%, -7%, 0) rotate(-4deg) scale(.95, 1.12); opacity: .84; }
}
@media (prefers-reduced-motion: reduce) {
  body.ghostsocial-v2 .gs-header-gradient > .gs-aurora-glow { animation: none; }
}


/* Profile content layout. Banner and avatar rules above stay untouched. */
body.ghostsocial-v2 .gs-profile-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  min-width: 0;
}
body.ghostsocial-v2 .gs-profile-identity {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
body.ghostsocial-v2 .gs-profile-body .gs-profile-name-row {
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
}
body.ghostsocial-v2 .gs-profile-body .gs-profile-name-row .prof-name {
  justify-content: flex-start;
  color: var(--text);
  font-size: clamp(22px, 5.8vw, 28px);
  font-weight: 780;
  letter-spacing: -.035em;
  line-height: 1.12;
  text-align: left;
}
body.ghostsocial-v2 .gs-profile-body .gs-profile-name-row .user-badges { flex: none; }
body.ghostsocial-v2 .gs-profile-body .prof-username {
  margin-top: 5px;
  color: var(--sub);
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
}
body.ghostsocial-v2 .gs-profile-badges[hidden],
body.ghostsocial-v2 .gs-profile-bio[hidden],
body.ghostsocial-v2 .gs-profile-music[hidden],
body.ghostsocial-v2 .gs-profile-id[hidden],
body.ghostsocial-v2 .gs-profile-stat-today[hidden] { display: none !important; }
body.ghostsocial-v2 .gs-profile-body > .gs-profile-badges { display: none !important; }
body.ghostsocial-v2 .gs-profile-body > .gs-profile-bio {
  display: block;
  width: 100%;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.48;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
body.ghostsocial-v2 .gs-profile-body > .gs-profile-bio[hidden] { display: none !important; }
body.ghostsocial-v2 .gs-profile-body > .gs-profile-metadata,
body.ghostsocial-v2 .gs-profile-body > .rep-badge { display: none !important; }
body.ghostsocial-v2 .gs-profile-body > .gs-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  gap: 4px;
}
body.ghostsocial-v2 .gs-profile-stats .stat-box {
  min-width: 0;
  padding: 0;
  text-align: left;
}
body.ghostsocial-v2 .gs-profile-stats .stat-val {
  color: var(--text);
  font-size: clamp(19px, 5vw, 24px);
  font-weight: 750;
  line-height: 1.2;
}
body.ghostsocial-v2 .gs-profile-stats .stat-lbl {
  margin-top: 2px;
  color: var(--sub);
  font-size: 12px;
  line-height: 1.25;
}
body.ghostsocial-v2 .gs-profile-stats .gs-profile-hidden-count { display: none !important; }
body.ghostsocial-v2 .gs-profile-actions {
  display: flex;
  align-items: stretch;
  gap: 9px;
  width: 100%;
  margin: 0;
}
body.ghostsocial-v2 .gs-profile-actions > .prof-action-btn,
body.ghostsocial-v2 .gs-profile-actions > div {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
}
body.ghostsocial-v2 .gs-profile-actions > .prof-action-btn {
  min-height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font-size: 13px;
}
body.ghostsocial-v2 .gs-profile-actions-public .follow-btn {
  width: 100% !important;
  min-height: 42px;
  border-radius: 12px;
  font-size: 13px;
}
body.ghostsocial-v2 .gs-profile-tools {
  width: 100%;
  margin: -8px 0 0;
  border-top: 1px solid var(--border);
}
body.ghostsocial-v2 .gs-profile-tools summary {
  padding: 10px 2px 0;
  color: var(--sub);
  font-size: 12px;
}
body.ghostsocial-v2 .gs-profile-tools summary i { font-size: 10px; transition: transform .18s ease; }
body.ghostsocial-v2 .gs-profile-tools[open] summary { padding-bottom: 8px; }
body.ghostsocial-v2 .gs-profile-tools .prof-action-btn {
  min-height: 42px;
  padding: 10px 4px;
  font-size: 13px;
}
body.ghostsocial-v2 .gs-profile-tabs {
  display: flex;
  min-height: 48px;
  padding: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
body.ghostsocial-v2 .gs-profile-tabs .prof-tab {
  display: grid;
  min-height: 48px;
  place-items: center;
  padding: 0;
  color: var(--sub);
  font-size: 0;
}
body.ghostsocial-v2 .gs-profile-tabs .prof-tab i { font-size: 18px; }
body.ghostsocial-v2 .gs-profile-tabs .prof-tab.active { color: var(--text); }
body.ghostsocial-v2 .gs-profile-tabs .prof-tab.active::after {
  inset: auto 22% 0;
  height: 2px;
  border-radius: 2px;
}
body.ghostsocial-v2 .gs-profile-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 2px;
}
body.ghostsocial-v2 .gs-profile-post-grid > .post-card {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #19191f;
}
body.ghostsocial-v2 .gs-profile-post-grid > .post-card .post-header,
body.ghostsocial-v2 .gs-profile-post-grid > .post-card .post-footer,
body.ghostsocial-v2 .gs-profile-post-grid > .post-card .post-menu-btn { display: none !important; }
body.ghostsocial-v2 .gs-profile-post-grid > .post-card .post-content { display: none; }
body.ghostsocial-v2 .gs-profile-post-grid > .post-card:has(.post-media, .media-grid) .post-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}
body.ghostsocial-v2 .gs-profile-post-grid > .post-card .media-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  border: 0;
  border-radius: 0;
}
body.ghostsocial-v2 .gs-profile-post-grid > .post-card .mg-item {
  min-height: 0 !important;
  height: 100%;
  aspect-ratio: auto;
}
body.ghostsocial-v2 .gs-profile-post-grid > .post-card .mg-item img,
body.ghostsocial-v2 .gs-profile-post-grid > .post-card .mg-item video {
  width: 100%;
  height: 100%;
  max-height: none !important;
  object-fit: cover;
}
body.ghostsocial-v2 .gs-profile-post-grid > .post-card:not(:has(.post-media, .media-grid)) {
  display: grid;
  place-items: center;
  padding: 10px !important;
  background: linear-gradient(145deg, #24202d, #15151a 72%);
}
body.ghostsocial-v2 .gs-profile-post-grid > .post-card:not(:has(.post-media, .media-grid)) .post-content {
  display: -webkit-box;
  max-height: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}
body.ghostsocial-v2 .gs-profile-post-grid > .load-more-btn,
body.ghostsocial-v2 .gs-profile-post-grid > .no-more { grid-column: 1 / -1; }
body.ghostsocial-v2 .gs-profile-post-grid .nsfw-overlay { inset: 0; border-radius: 0; }
@media (max-width: 380px) {
  body.ghostsocial-v2 .gs-profile-body { gap: 16px; }
  body.ghostsocial-v2 .gs-profile-stats .stat-lbl { font-size: 10px; }
}


/* Keep secondary controls compact so profile details stay in the first screen. */
body.ghostsocial-v2 .gs-profile-body { position: relative; }
body.ghostsocial-v2 .gs-profile-tools {
  position: absolute;
  z-index: 5;
  top: -7px;
  right: -4px;
  width: auto;
  margin: 0;
  border: 0;
}
body.ghostsocial-v2 .gs-profile-tools summary {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255,255,255,.035);
  color: var(--sub);
  font-size: 0;
}
body.ghostsocial-v2 .gs-profile-tools summary span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
body.ghostsocial-v2 .gs-profile-tools summary i { font-size: 15px; }
body.ghostsocial-v2 .gs-profile-tools[open] {
  top: -7px;
  right: -4px;
  width: min(230px, 80vw);
  padding: 4px 10px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: rgba(26,25,31,.98);
  box-shadow: 0 12px 36px rgba(0,0,0,.4);
}
body.ghostsocial-v2 .gs-profile-tools[open] summary {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.ghostsocial-v2 .gs-profile-tools[open] .prof-action-btn,
body.ghostsocial-v2 .gs-profile-tools[open] #fpMessageWrap {
  display: flex !important;
  width: 100% !important;
  min-height: 38px;
  margin: 0 !important;
  padding: 8px 4px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}
body.ghostsocial-v2 #screenFullProfile .gs-profile-identity { padding-right: 150px; }
body.ghostsocial-v2 #screenFullProfile .gs-profile-actions-public {
  position: absolute;
  z-index: 2;
  top: -5px;
  right: 38px;
  width: auto;
  margin: 0;
}
body.ghostsocial-v2 #screenFullProfile #fpFollowWrap {
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
}
body.ghostsocial-v2 #screenFullProfile #fpFollowBtn {
  width: auto !important;
  min-width: 104px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}
body.ghostsocial-v2 .gs-profile-actions:not(.gs-profile-actions-public) > .prof-action-btn { flex: 0 1 160px; }
@media (max-width: 420px) {
  body.ghostsocial-v2 #screenFullProfile .gs-profile-identity { padding-right: 140px; }
  body.ghostsocial-v2 #screenFullProfile #fpFollowBtn { min-width: 92px; padding-inline: 9px; }
}

/* GhostSocial control polish: filled buttons and aligned upload actions. */
body.ghostsocial-v2 .create-footer { border-top: 0; }
body.ghostsocial-v2 .media-preview-list {
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding-top: 0;
  border: 0;
}
body.ghostsocial-v2 .media-preview-item:not(.audio-expanded) {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
  width: min(100%, 380px);
  max-width: 100%;
  min-height: 70px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
}
body.ghostsocial-v2 .media-preview-item.uploading:not(.audio-expanded) {
  grid-template-columns: 48px minmax(0, 1fr);
}
body.ghostsocial-v2 .media-preview-item:not(.audio-expanded) > .media-preview-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: transparent;
}
body.ghostsocial-v2 .media-preview-icon.uploading-icon {
  position: relative;
  overflow: visible;
}
body.ghostsocial-v2 .media-preview-icon.uploading-icon .mp-bg-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  z-index: 1;
  margin: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--sub);
  pointer-events: none;
}
body.ghostsocial-v2 .media-preview-icon.uploading-icon .mp-ring {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: rotate(-90deg);
  pointer-events: none;
}
body.ghostsocial-v2 .media-preview-icon.uploading-icon .mp-ring-center {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
}
body.ghostsocial-v2 .media-preview-icon.uploading-icon .mp-cancel {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface2);
  color: var(--text);
  font-size: 13px;
  line-height: 1;
  pointer-events: auto;
}
body.ghostsocial-v2 .media-preview-item:not(.audio-expanded) .media-preview-info {
  grid-column: 2;
  min-width: 0;
  width: 100%;
}
body.ghostsocial-v2 .media-preview-item:not(.audio-expanded) .media-preview-name {
  min-width: 0;
  line-height: 1.35;
}
body.ghostsocial-v2 .media-preview-item:not(.audio-expanded) .media-preview-del {
  grid-column: 3;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface2);
  color: var(--sub);
  line-height: 1;
}
body.ghostsocial-v2 .media-preview-item:not(.audio-expanded) .media-preview-del:hover,
body.ghostsocial-v2 .media-preview-item:not(.audio-expanded) .media-preview-del:focus-visible {
  background: #342b45;
  color: var(--text);
}
body.ghostsocial-v2 .attach-btn {
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  color: var(--sub);
}
body.ghostsocial-v2 .attach-btn:hover,
body.ghostsocial-v2 .attach-btn:focus-visible { background: var(--surface2); color: var(--text); }
body.ghostsocial-v2 .attach-btn.attached { background: #292234; color: var(--primary); }

/* Profile actions use filled surfaces; the overflow control animates with its menu. */
body.ghostsocial-v2 #profAvEditBtn {
  border: 0 !important;
  background: var(--surface2) !important;
  color: var(--primary) !important;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background-color .18s, color .18s;
}
body.ghostsocial-v2 #profAvEditBtn:active { transform: scale(.92); }
body.ghostsocial-v2 .gs-profile-actions > .prof-action-btn {
  border: 0;
  background: var(--surface);
  color: var(--text);
}
body.ghostsocial-v2 .gs-profile-actions > .prof-action-btn:hover,
body.ghostsocial-v2 .gs-profile-actions > .prof-action-btn:focus-visible { background: var(--surface2); }
body.ghostsocial-v2 .gs-profile-tools summary {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--surface2);
  color: var(--primary);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), background-color .18s, color .18s, box-shadow .18s;
}
body.ghostsocial-v2 .gs-profile-tools summary:hover,
body.ghostsocial-v2 .gs-profile-tools summary:focus-visible {
  background: #342b45;
  color: #d0bdff;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
body.ghostsocial-v2 .gs-profile-tools summary:active { transform: scale(.92); }
body.ghostsocial-v2 .gs-profile-tools summary i { font-size: 18px; line-height: 1; }
body.ghostsocial-v2 .gs-profile-tools[open] {
  width: min(230px, 80vw);
  padding: 8px;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 14px 38px rgba(0,0,0,.48);
  transform-origin: top right;
  animation: gs-profile-menu-reveal .2s cubic-bezier(.2,.8,.2,1) both;
}
body.ghostsocial-v2 .gs-profile-tools[open] summary {
  display: grid;
  width: 34px;
  height: 34px;
  margin: 0 0 5px auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface2);
  color: var(--primary);
}
body.ghostsocial-v2 .gs-profile-tools[open] summary i { transform: rotate(90deg); }
body.ghostsocial-v2 .gs-profile-tools[open] .prof-action-btn,
body.ghostsocial-v2 .gs-profile-tools[open] #fpMessageWrap {
  display: flex !important;
  width: 100% !important;
  min-height: 40px;
  margin: 4px 0 !important;
  padding: 9px 10px;
  border: 0 !important;
  border-radius: 11px;
  background: rgba(255,255,255,.055);
  color: var(--text);
  text-align: left;
}
body.ghostsocial-v2 .gs-profile-tools[open] .prof-action-btn:hover,
body.ghostsocial-v2 .gs-profile-tools[open] .prof-action-btn:focus-visible { background: var(--surface2); }
body.ghostsocial-v2 .gs-profile-tools[open] #fpMessageBtn {
  border: 0 !important;
  border-radius: 10px;
  background: rgba(179,154,244,.14) !important;
}
@keyframes gs-profile-menu-reveal {
  from { opacity: 0; transform: translateY(-5px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body.ghostsocial-v2 .gs-profile-tools[open] { animation: none; }
  body.ghostsocial-v2 .gs-profile-tools summary,
  body.ghostsocial-v2 #profAvEditBtn { transition: none; }
}



/* Profile overflow icon is pinned to its visual center; animate the menu, not the dots. */
body.ghostsocial-v2 .gs-profile-tools summary {
  display: grid !important;
  place-items: center;
  justify-content: center;
  position: relative;
  padding: 0 !important;
}
body.ghostsocial-v2 .gs-profile-tools summary span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
body.ghostsocial-v2 .gs-profile-tools summary i {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
body.ghostsocial-v2 .gs-profile-tools[open] summary i {
  transform: translate(-50%, -50%) scale(1.12);
  transform-origin: center;
}

/* Profile status floats beside the avatar at the right edge, freeing space for profile details. */
body.ghostsocial-v2 .gs-profile-card { position: relative; overflow: visible; }
body.ghostsocial-v2 .gs-profile-card > .gs-profile-status {
  position: absolute;
  top: calc(clamp(88px, 24.5vw, 110px) + 54px);
  right: 16px;
  z-index: 4;
  align-self: auto;
  width: fit-content;
  max-width: min(220px, calc(50% - 70px));
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
}
body.ghostsocial-v2 .gs-profile-status::before {
  top: -11px;
  left: 18px;
}
body.ghostsocial-v2 .gs-profile-status::after {
  top: -21px;
  left: 6px;
}



/* Keep the menu toggle in the popover corner without reserving its own row. */
body.ghostsocial-v2 .gs-profile-tools[open] > summary {
  position: absolute !important;
  top: 8px;
  right: 8px;
  margin: 0 !important;
  z-index: 4;
}


/* Put profile verification marks before the displayed name. */
body.ghostsocial-v2 .gs-profile-body .gs-profile-name-row .prof-name > .user-badges {
  order: -1;
  margin-left: 0;
  margin-right: 0;
}


/* Feed verification badge is before the name; keep the gap on its right side. */
body.ghostsocial-v2 .post-name .user-badges {
  margin-left: 0;
  margin-right: 4px;
}


/* Keep verification marks close to names, including feed cards. */
body.ghostsocial-v2 .user-badges { gap: 2px; margin-left: 2px; }
body.ghostsocial-v2 .post-name { gap: 1px; }
body.ghostsocial-v2 .post-name .user-badges {
  order: -1;
  margin-left: 0;
  margin-right: 1px;
}
body.ghostsocial-v2 .gs-profile-body .gs-profile-name-row .prof-name { gap: 2px; }
body.ghostsocial-v2 .gs-profile-body .gs-profile-name-row .prof-name > .user-badges { margin: 0; }

/* Keep the public follow action in document flow below the profile thought. */
body.ghostsocial-v2 #screenFullProfile .gs-profile-identity { padding-right: 0 !important; }
body.ghostsocial-v2 #screenFullProfile .gs-profile-actions-public {
  position: static;
  inset: auto;
  z-index: auto;
  justify-content: flex-end;
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  margin: -8px 0 0;
  padding: 0;
}


/* Place the full-profile overflow menu in the page title row, clear of the thought bubble. */
body.ghostsocial-v2 #screenFullProfile .full-profile-header { position: relative; }
body.ghostsocial-v2 #screenFullProfile .full-profile-header > .gs-profile-tools {
  position: relative;
  inset: auto;
  z-index: 20;
  align-self: center;
  flex: 0 0 auto;
  width: auto;
  margin: 0 0 0 auto;
  border: 0;
}
body.ghostsocial-v2 #screenFullProfile .full-profile-header > .gs-profile-tools > summary {
  display: grid !important;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0 !important;
  border: 0;
  border-radius: 50%;
  background: var(--surface2);
  color: var(--primary);
}
body.ghostsocial-v2 #screenFullProfile .full-profile-header > .gs-profile-tools[open] {
  position: absolute;
  top: 12px;
  right: 16px;
  width: min(230px, 80vw);
  margin: 0;
}


/* Put the own-profile menu on the free left side, opposite the floating thought. */
body.ghostsocial-v2 #screenProfile > .gs-profile-card > .gs-profile-tools {
  position: absolute;
  top: calc(clamp(88px, 24.5vw, 110px) + 54px);
  left: 16px;
  right: auto;
  z-index: 6;
  width: auto;
  margin: 0;
  border: 0;
  transform-origin: top left;
}
body.ghostsocial-v2 #screenProfile > .gs-profile-card > .gs-profile-tools[open] {
  top: calc(clamp(88px, 24.5vw, 110px) + 54px);
  left: 16px;
  right: auto;
  width: min(230px, 80vw);
  margin: 0;
}

/* Minisky touch feedback: scoped to the active V2 feed. */
body.ghostsocial-v2 #mskFeed .msk-card > .dt-heart {
  position:absolute; z-index:8; display:grid; place-items:center;
  width:78px; height:78px; margin:0; padding:0; overflow:visible;
  font-size:0; line-height:1; color:#ff4f78; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.48);
  filter:drop-shadow(0 8px 20px rgba(255,55,105,.45));
}
body.ghostsocial-v2 #mskFeed .msk-card > .dt-heart svg {
  display:block; width:100% !important; height:100% !important; max-width:none; max-height:none;
}
body.ghostsocial-v2 #mskFeed .msk-card > .dt-heart.go {
  animation:gsMskHeartPop .82s cubic-bezier(.18,.89,.32,1.22) forwards;
}
@keyframes gsMskHeartPop {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.48); }
  22% { opacity:1; transform:translate(-50%,-50%) scale(1.12); }
  66% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.25); }
}
body.ghostsocial-v2 #mskFeed .msk-card > .msk-repost-ring {
  position:absolute; inset:0; z-index:12; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:rgba(0,0,0,.34); color:#fff; opacity:0;
  pointer-events:none; transition:opacity .14s ease;
}
body.ghostsocial-v2 #mskFeed .msk-card > .msk-repost-ring.go { opacity:1; }
body.ghostsocial-v2 #mskFeed .msk-repost-ring .ring-wrap {
  position:relative; width:76px; height:76px; color:var(--primary);
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring svg {
  display:block; width:76px; height:76px; transform:rotate(-90deg);
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring circle {
  fill:none; stroke-width:5;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring circle.bg { stroke:rgba(255,255,255,.22); }
body.ghostsocial-v2 #mskFeed .msk-repost-ring circle.fg {
  stroke:var(--primary); stroke-linecap:round; stroke-dasharray:276.46;
  stroke-dashoffset:276.46;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring.go circle.fg {
  animation:gsMskRepostProgress 1.5s linear forwards;
}
@keyframes gsMskRepostProgress { to { stroke-dashoffset:0; } }
body.ghostsocial-v2 #mskFeed .msk-repost-ring .ring-wrap i {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:24px;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring .t {
  color:#fff; font-size:13px; font-weight:700; line-height:1.2;
  text-shadow:0 2px 8px rgba(0,0,0,.75);
}


/* Keep the browser's long-press selection UI out of minisky media. */
body.ghostsocial-v2 #mskFeed .msk-card,
body.ghostsocial-v2 #mskFeed .msk-card video,
body.ghostsocial-v2 #mskFeed .msk-card .mskc-ftrack,
body.ghostsocial-v2 #mskFeed .msk-card .mskc-fslide,
body.ghostsocial-v2 #mskFeed .msk-card .mskc-fslide img,
body.ghostsocial-v2 #mskFeed .msk-card .mskc-fslide video {
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none; -webkit-user-drag:none;
}


/* Minisky: badge before the display name and a clear two-finger repost sequence. */
body.ghostsocial-v2 #mskFeed .msk-info .name {
  display:flex; align-items:center; gap:0;
}
body.ghostsocial-v2 #mskFeed .msk-info .name > .user-badges {
  order:0; flex:none; margin:0 3px 0 0;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring .ring-wrap {
  opacity:.45; transform:scale(.72); filter:blur(5px);
  transition:opacity .24s ease, transform .32s cubic-bezier(.2,.85,.25,1.25), filter .32s ease;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring.go .ring-wrap {
  opacity:1; transform:scale(1); filter:blur(0);
  animation:gsMskRepostPulse .78s ease-in-out infinite alternate;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring .t {
  opacity:0; transform:translateY(7px);
  transition:opacity .22s ease, transform .26s ease;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring.go .t {
  opacity:1; transform:translateY(0); transition-delay:.06s;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring.sending .ring-wrap {
  animation:gsMskRepostSpin .72s linear infinite;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring.sending circle.fg {
  stroke-dashoffset:0; animation:none; transition:stroke-dashoffset .2s ease;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring.sending .t {
  animation:gsMskRepostSending .9s ease-in-out infinite alternate;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring.success circle.fg { stroke:#69e6b1; stroke-dashoffset:0; animation:none; }
body.ghostsocial-v2 #mskFeed .msk-repost-ring.success .ring-wrap i { color:#69e6b1; }
body.ghostsocial-v2 #mskFeed .msk-repost-ring.success .ring-wrap { animation:gsMskRepostConfirm .42s cubic-bezier(.2,.9,.25,1.35); }
body.ghostsocial-v2 #mskFeed .msk-repost-ring.error circle.fg { stroke:#ff7188; stroke-dashoffset:0; animation:none; }
body.ghostsocial-v2 #mskFeed .msk-repost-ring.error .ring-wrap i { color:#ff7188; }
body.ghostsocial-v2 #mskFeed .msk-repost-ring.cancelled,
body.ghostsocial-v2 #mskFeed .msk-repost-ring.finish {
  opacity:0; filter:blur(4px); transition:opacity .2s ease, filter .22s ease;
}
@keyframes gsMskRepostPulse { from { transform:scale(.97); } to { transform:scale(1.045); } }
@keyframes gsMskRepostSpin { to { transform:rotate(360deg) scale(1); } }
@keyframes gsMskRepostConfirm { 0% { transform:scale(.65); } 65% { transform:scale(1.18); } 100% { transform:scale(1); } }
@keyframes gsMskRepostSending { to { opacity:.66; } }
@media (prefers-reduced-motion: reduce) {
  body.ghostsocial-v2 #mskFeed .msk-repost-ring *,
  body.ghostsocial-v2 #mskFeed .msk-repost-ring *::before,
  body.ghostsocial-v2 #mskFeed .msk-repost-ring *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* Lightweight mobile repost motion: animate composited opacity/transform only. */
body.ghostsocial-v2 #mskFeed .msk-repost-ring {
  filter:none !important;
  transition:opacity .14s ease-out !important;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring .ring-wrap {
  opacity:.55; transform:scale(.94); filter:none !important;
  will-change:transform,opacity;
  transition:opacity .15s ease-out, transform .18s ease-out !important;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring.go .ring-wrap {
  opacity:1; transform:scale(1); filter:none !important; animation:none !important;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring .t {
  opacity:0; transform:translateY(4px);
  transition:opacity .14s ease-out, transform .14s ease-out !important;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring.go .t {
  opacity:1; transform:translateY(0); transition-delay:0s;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring.sending .ring-wrap,
body.ghostsocial-v2 #mskFeed .msk-repost-ring.sending .t {
  animation:none !important;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring.sending circle.fg {
  stroke-dashoffset:0; animation:none !important; transition:none;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring.success .ring-wrap {
  animation:gsMskRepostConfirmLite .24s ease-out both !important;
}
body.ghostsocial-v2 #mskFeed .msk-repost-ring.cancelled,
body.ghostsocial-v2 #mskFeed .msk-repost-ring.finish {
  opacity:0; filter:none !important; transition:opacity .14s ease-out !important;
}
@keyframes gsMskRepostConfirmLite {
  0% { transform:scale(.92); }
  70% { transform:scale(1.04); }
  100% { transform:scale(1); }
}


/* Flat minisky repost label and reposter sheet. */
body.ghostsocial-v2 .msk-repost-status {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; max-width: min(100%, 320px);
  margin: 0 0 9px; padding: 3px 10px 3px 4px; border: 0; border-radius: 999px;
  background: #25222b; color: #f4f1f8; font: inherit; font-size: 13px; line-height: 1.25;
  text-align: left; cursor: pointer;
}
body.ghostsocial-v2 .msk-repost-status[hidden] { display: none !important; }
body.ghostsocial-v2 .msk-repost-avatars { display: inline-flex; align-items: center; padding-left: 1px; flex: 0 0 auto; }
body.ghostsocial-v2 .msk-reposter-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 26px;
  overflow: hidden; border-radius: 50%; background: #39343f; color: #c9a8ff;
}
body.ghostsocial-v2 .msk-repost-avatars .msk-reposter-avatar + .msk-reposter-avatar { margin-left: -8px; box-shadow: 0 0 0 2px #000; }
body.ghostsocial-v2 .msk-reposter-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.ghostsocial-v2 .msk-repost-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gs-reposters-overlay {
  position: fixed; inset: 0; z-index: 10040; display: flex; align-items: flex-end; justify-content: center;
  padding: 0; background: rgba(0,0,0,.58); opacity: 0; transition: opacity .16s ease;
}
.gs-reposters-overlay.is-open { opacity: 1; }
.gs-reposters-sheet {
  width: min(100%, 560px); max-height: min(78dvh, 720px); overflow: hidden; display: flex; flex-direction: column;
  background: #111114; color: #f4f2f7; padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(18px); transition: transform .18s ease;
}
.gs-reposters-overlay.is-open .gs-reposters-sheet { transform: translateY(0); }
.gs-reposters-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; }
.gs-reposters-header h2 { margin: 0; font-size: 18px; font-weight: 700; }
.gs-reposters-close {
  width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%;
  color: #ece8f2; background: #242229; font-size: 16px; cursor: pointer;
}
.gs-reposters-list { overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 18px; }
.gs-reposter-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; }
.gs-reposter-row .gs-reposter-avatar { width: 42px; height: 42px; flex-basis: 42px; }
.gs-reposter-main { flex: 1; min-width: 0; }
.gs-reposter-name { font-size: 15px; line-height: 1.3; font-weight: 650; overflow-wrap: anywhere; }
.gs-reposter-name .user-badges { display: inline-flex; vertical-align: middle; margin-left: 3px; }
.gs-reposter-handle { margin-top: 2px; color: #9996a2; font-size: 13px; }
.gs-reposter-time { flex: 0 0 auto; color: #9996a2; font-size: 12px; }
.gs-reposter-delete {
  display: inline-flex; align-items: center; min-height: 30px; margin: 7px 0 0; padding: 4px 10px;
  border: 0; border-radius: 8px; color: #e4b2c0; background: #292027; font: inherit; font-size: 13px; cursor: pointer;
}
.gs-reposter-delete:disabled { opacity: .55; }
.gs-reposters-loading,.gs-reposters-empty { padding: 30px 8px; color: #aaa7b1; text-align: center; font-size: 14px; }
.gs-reposters-retry { margin-left: 6px; border: 0; border-radius: 8px; padding: 6px 10px; color: #eee; background: #29252f; font: inherit; cursor: pointer; }



/* Minisky repost status must float outside the snap-card layout. */
body.ghostsocial-v2.miniska-mode .msk-info { position: relative; }
body.ghostsocial-v2.miniska-mode .msk-repost-status {
  position: absolute;
  z-index: 7;
  left: 0;
  bottom: calc(100% + 8px);
  margin: 0;
  pointer-events: auto;
}


/* Камера: явное повторное действие после отказа браузера */
body.ghostsocial-v2 #mskCompose .mskc-camera-permission {
  position: absolute; z-index: 7; top: 50%; left: 50%; transform: translate(-50%,-50%);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 18px; border: 0; border-radius: 14px;
  background: var(--primary); color: #17131f; font-size: 14px; font-weight: 650;
  box-shadow: 0 8px 28px #0008;
}


/* Post composer: auto-grow text without a draggable full-screen field. */
body.ghostsocial-v2 #postText {
  height: 112px;
  min-height: 112px;
  max-height: min(32dvh, 220px);
  resize: none;
  overflow-y: hidden;
  box-sizing: border-box;
}


/* Hashtag and mention autocomplete in the post composer. */
body.ghostsocial-v2 .post-text-editor { position:relative; width:100%; min-height:112px; }
body.ghostsocial-v2 #postTextMirror {
  position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none;
  padding:12px 0; color:transparent; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word;
  font:inherit; font-size:16px; line-height:1.65; box-sizing:border-box;
}
body.ghostsocial-v2 #postText { position:relative; z-index:1; background:transparent; }
body.ghostsocial-v2 #postTextMirror .composer-token-tag { color:var(--primary); }
body.ghostsocial-v2 #postTextMirror .composer-token-user { color:#78d9ff; }
body.ghostsocial-v2 .composer-suggest {
  margin:10px 0 4px; padding:9px; border:0; border-radius:16px;
  background:var(--surface); box-shadow:0 10px 26px rgba(0,0,0,.2);
}
body.ghostsocial-v2 .composer-suggest-search {
  display:flex; align-items:center; gap:9px; min-height:44px; padding:0 8px 0 12px;
  border:0; border-radius:12px; background:var(--surface2);
}
body.ghostsocial-v2 .composer-suggest-marker {
  display:grid; place-items:center; flex:0 0 28px; height:28px; border-radius:9px;
  background:rgba(184,154,255,.18); color:var(--primary); font-size:17px; font-weight:800;
}
body.ghostsocial-v2 #composerSuggestQuery {
  min-width:0; flex:1; height:40px; padding:0; border:0; outline:0; background:transparent;
  color:var(--text); font:inherit; font-size:14px;
}
body.ghostsocial-v2 #composerSuggestQuery::placeholder { color:var(--muted); }
body.ghostsocial-v2 .composer-suggest-close {
  display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; padding:0;
  border:0; border-radius:10px; background:var(--surface); color:var(--sub);
}
body.ghostsocial-v2 .composer-suggest-list { display:flex; flex-direction:column; gap:4px; max-height:230px; margin-top:6px; overflow:auto; overscroll-behavior:contain; }
body.ghostsocial-v2 .composer-suggest-group {
  padding:9px 8px 4px; color:var(--muted); font-size:10px; font-weight:750;
  letter-spacing:.06em; text-transform:uppercase;
}
body.ghostsocial-v2 .composer-suggest-item {
  display:flex; align-items:center; width:100%; min-height:48px; gap:10px; padding:6px 9px;
  border:0; border-radius:12px; background:var(--surface2); color:var(--text); text-align:left;
}
body.ghostsocial-v2 .composer-suggest-item.active,
body.ghostsocial-v2 .composer-suggest-item:hover { background:rgba(184,154,255,.17); }
body.ghostsocial-v2 .composer-suggest-icon {
  display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; overflow:hidden;
  border-radius:50%; background:rgba(184,154,255,.17); color:var(--primary); font-size:18px; font-weight:800;
}
body.ghostsocial-v2 .composer-suggest-icon.user { font-size:14px; }
body.ghostsocial-v2 .composer-suggest-icon img { width:100%; height:100%; object-fit:cover; }
body.ghostsocial-v2 .composer-suggest-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:2px; }
body.ghostsocial-v2 .composer-suggest-copy strong { overflow:hidden; font-size:13px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
body.ghostsocial-v2 .composer-suggest-copy small { overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
body.ghostsocial-v2 .composer-suggest-empty { padding:14px 10px; color:var(--muted); font-size:13px; text-align:center; }
@media(max-width:600px) {
  body.ghostsocial-v2 .composer-suggest { padding:7px; }
  body.ghostsocial-v2 .composer-suggest-item { min-height:46px; }
}


/* Keep the main navigation available while the creator is open. */
body.ghostsocial-v2.mskc-open #appNav { z-index: 320 !important; }
body.ghostsocial-v2.mskc-open #mskCompose .mskc-stage {
  padding-bottom: calc(var(--nav-h, 48px) + 16px);
}
body.ghostsocial-v2.mskc-open #mskCompose .mskc-camera-controls {
  bottom: calc(24px + var(--nav-h, 48px));
}


/* Selected create action: quiet tinted surface and lavender plus. */
body.ghostsocial-v2 #appNav .nav-create.active .nav-icon-wrap {
  background: var(--surface2);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, var(--bg));
}
body.ghostsocial-v2 #appNav .nav-create.active .nav-label { color: var(--primary); font-weight: 700; }

/* Compact relative date labels that reveal the exact publication date on tap. */
.gs-date-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; vertical-align: top; }
.gs-date-toggle { padding: 1px 5px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gs-exact-date { display: none; color: var(--muted); font-size: .92em; line-height: 1.2; white-space: nowrap; }
.gs-date-wrap.is-open .gs-exact-date { display: block; }
.post-time .gs-date-wrap { align-items: flex-end; }


/* Profile music: open the playlist from the track details, play only from the play control. */
body.ghostsocial-v2 .gs-profile-music {
  gap: 10px;
  cursor: default;
}
body.ghostsocial-v2 .gs-profile-music-info {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
  min-height: 54px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
body.ghostsocial-v2 .gs-profile-music-play {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
  color: #fff;
  cursor: pointer;
  transition: background-color .16s ease, transform .16s ease;
}
body.ghostsocial-v2 .gs-profile-music-play:active { transform: scale(.94); }
body.ghostsocial-v2 .gs-profile-music.is-playing .gs-profile-music-play { background: rgba(184,150,255,.38); }
body.ghostsocial-v2 .gs-profile-music-play > [data-music-icon] {
  width: auto;
  margin: 0;
  font-size: 16px;
}
body.ghostsocial-v2 .gs-profile-music-sheet { padding-bottom: calc(20px + env(safe-area-inset-bottom,0px)); }
body.ghostsocial-v2 .gs-profile-music-count { margin-top: 4px; color: var(--muted); font-size: 12px; }
body.ghostsocial-v2 .gs-profile-track-list { display: flex; flex-direction: column; gap: 7px; }
body.ghostsocial-v2 .gs-profile-track {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 62px;
  gap: 12px;
  padding: 8px 12px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
body.ghostsocial-v2 .gs-profile-track.is-current { background: rgba(184,150,255,.17); }
body.ghostsocial-v2 .gs-profile-track-cover {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: var(--primary);
}
body.ghostsocial-v2 .gs-profile-track-cover img { width: 100%; height: 100%; object-fit: cover; }
body.ghostsocial-v2 .gs-profile-track-copy { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
body.ghostsocial-v2 .gs-profile-track-copy strong,
body.ghostsocial-v2 .gs-profile-track-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ghostsocial-v2 .gs-profile-track-copy strong { font-size: 14px; font-weight: 700; }
body.ghostsocial-v2 .gs-profile-track-copy small { color: var(--muted); font-size: 12px; }
body.ghostsocial-v2 .gs-profile-track > i { flex: none; color: var(--primary); font-size: 14px; }


/* Fade the profile player controls in step with the audio volume ramp. */
body.ghostsocial-v2 .gs-profile-music {
  transition: filter 320ms ease;
}
body.ghostsocial-v2 .gs-profile-music.is-playing {
  filter: brightness(1.045);
}
body.ghostsocial-v2 .gs-profile-music-play {
  filter: brightness(.88);
  transition: background-color 320ms ease, color 320ms ease, filter 320ms ease, box-shadow 320ms ease, transform 140ms ease;
}
body.ghostsocial-v2 .gs-profile-music.is-playing .gs-profile-music-play {
  filter: brightness(1.24);
  box-shadow: 0 0 15px rgba(184,150,255,.24);
}
body.ghostsocial-v2 .gs-profile-music-play > [data-music-icon] {
  transition: filter 320ms ease, transform 180ms ease;
}
body.ghostsocial-v2 .gs-profile-music.is-playing .gs-profile-music-play > [data-music-icon] {
  transform: scale(1.04);
}


/* Keep the player response quick on touch devices while audio gain fades. */
body.ghostsocial-v2 .gs-profile-music { transition: filter 180ms ease; }
body.ghostsocial-v2 .gs-profile-music-play {
  transition: background-color 180ms ease, color 180ms ease, filter 180ms ease, box-shadow 180ms ease, transform 140ms ease;
}
body.ghostsocial-v2 .gs-profile-music-play > [data-music-icon] { transition: filter 180ms ease, transform 180ms ease; }

/* Make the upload timeline visible in V2 and give its fill a real track. */
body.ghostsocial-v2 #mskCompose .mskc-progress.show { display: flex; }
body.ghostsocial-v2 #mskCompose .mskc-progress-track {
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border-strong);
}
body.ghostsocial-v2 #mskCompose .mskc-progress-bar {
  display: block;
  flex: 0 0 auto;
  width: 0;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 120ms linear;
}


/* Post feed: keep poll choices left aligned and fill media letterboxing with a
   dark, blurred copy of the first visible frame. */
body.ghostsocial-v2 .poll-opt {
  justify-content: flex-start;
  text-align: left;
}
body.ghostsocial-v2 .poll-opt-label { text-align: left; }
body.ghostsocial-v2 .mg-item { isolation: isolate; }
body.ghostsocial-v2 .mg-item > .gs-media-backdrop {
  position: absolute;
  z-index: 0;
  top: -14px;
  left: -14px;
  width: calc(100% + 28px);
  height: calc(100% + 28px);
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: blur(14px) brightness(.46) saturate(.82);
  transform: scale(1.04);
  pointer-events: none;
}
body.ghostsocial-v2.feed-mode #feedList .media-grid.g1 .mg-item > .gs-media-backdrop {
  max-height: none;
  object-fit: cover;
}
body.ghostsocial-v2 .gs-profile-post-grid > .post-card .media-grid .mg-item > .gs-media-backdrop {
  max-height: none;
  object-fit: cover;
}
body.ghostsocial-v2 .mg-item > img:not(.gs-media-backdrop),
body.ghostsocial-v2 .mg-item > video:not(.gs-media-backdrop) {
  position: relative;
  z-index: 1;
}
body.ghostsocial-v2 .mg-item > .video-play-overlay { z-index: 2; }
body.ghostsocial-v2 .mg-item > .gs-media-placeholder { z-index: 3; }


/* GhostSocial profile editor */
body.ghostsocial-v2 .gs-profile-editor-overlay { z-index: 720; }
body.ghostsocial-v2 .gs-profile-editor-sheet,
body.ghostsocial-v2 .gs-banner-editor-sheet {
  display: flex;
  flex-direction: column;
  width: min(100%, 620px);
  max-height: min(94dvh, 980px);
  overflow: hidden;
  padding: 12px 0 0;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: var(--surface);
}
body.ghostsocial-v2 .gs-profile-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 20px 16px;
  border-bottom: 1px solid var(--border);
}
body.ghostsocial-v2 .gs-profile-editor-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  line-height: 1.2;
  font-weight: 750;
}
body.ghostsocial-v2 .gs-profile-editor-head p {
  margin: 5px 0 0;
  color: var(--sub);
  font-size: 13px;
  line-height: 1.4;
}
body.ghostsocial-v2 .gs-profile-editor-head .close-btn {
  flex: none;
  width: 36px;
  height: 36px;
  margin: -3px -7px 0 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sub);
}
body.ghostsocial-v2 .gs-profile-editor-scroll,
body.ghostsocial-v2 .gs-banner-editor-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 20px 22px;
  scrollbar-width: thin;
}
body.ghostsocial-v2 .gs-profile-editor-hero { padding-bottom: 16px; }
body.ghostsocial-v2 .gs-profile-editor-banner {
  position: relative;
  height: clamp(112px, 29vw, 160px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface2);
}
body.ghostsocial-v2 .gs-profile-editor-banner .gs-profile-banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.ghostsocial-v2 .gs-profile-banner-action {
  position: absolute;
  top: 11px;
  right: 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(12,10,18,.62);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  backdrop-filter: blur(12px);
  cursor: pointer;
}
body.ghostsocial-v2 .gs-profile-editor-banner .gs-profile-banner-action:active { transform: scale(.97); }
body.ghostsocial-v2 .gs-profile-editor-avatar-wrap {
  position: relative;
  width: 82px;
  height: 82px;
  margin: -34px 0 0 18px;
  z-index: 1;
}
body.ghostsocial-v2 .gs-profile-editor-avatar {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  overflow: hidden;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--surface2);
  color: var(--primary);
  font-size: 29px;
  font-weight: 750;
}
body.ghostsocial-v2 .gs-profile-editor-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
body.ghostsocial-v2 .gs-profile-editor-avatar-action {
  position: absolute;
  right: -1px;
  bottom: 1px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--primary);
  color: #1a1427;
  font-size: 13px;
  cursor: pointer;
}
body.ghostsocial-v2 .gs-profile-editor-hint { margin: 8px 0 0 20px; color: var(--sub); font-size: 12px; }
body.ghostsocial-v2 .gs-profile-editor-fields {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
body.ghostsocial-v2 .gs-profile-editor-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
}
body.ghostsocial-v2 .gs-profile-editor-row:last-child { border-bottom: 0; }
body.ghostsocial-v2 .gs-profile-editor-icon {
  display: grid;
  width: 26px;
  place-items: center;
  color: var(--primary);
  font-size: 20px;
  line-height: 1;
}
body.ghostsocial-v2 .gs-profile-editor-at { font-size: 19px; font-weight: 700; }
body.ghostsocial-v2 .gs-profile-editor-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.ghostsocial-v2 .gs-profile-editor-affordance { display: grid; width: 28px; height: 34px; place-items: center; color: var(--sub); font-size: 14px; }
body.ghostsocial-v2 .gs-profile-editor-copy > small { color: var(--sub); font-size: 12px; line-height: 1.25; }
body.ghostsocial-v2 .gs-profile-editor-input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
}
body.ghostsocial-v2 .gs-profile-editor-input::placeholder { color: var(--sub); opacity: .72; font-weight: 450; }
body.ghostsocial-v2 .gs-profile-editor-handle { display: flex; align-items: center; gap: 3px; color: var(--primary); font-size: 16px; font-weight: 700; }
body.ghostsocial-v2 .gs-profile-editor-handle input { color: var(--text); }
body.ghostsocial-v2 .gs-profile-editor-row-about { align-items: start; padding-top: 15px; }
body.ghostsocial-v2 .gs-profile-editor-row-about .gs-profile-editor-icon { padding-top: 4px; }
body.ghostsocial-v2 .gs-profile-editor-about { min-height: 66px; resize: vertical; }
body.ghostsocial-v2 .gs-profile-editor-count { align-self: flex-end; color: var(--sub); font-size: 11px; }
body.ghostsocial-v2 .gs-profile-editor-id strong { color: var(--text); font-size: 16px; }
body.ghostsocial-v2 .gs-profile-editor-security {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
}
body.ghostsocial-v2 .gs-profile-editor-security summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 10px 14px;
  color: var(--sub);
  list-style: none;
  cursor: pointer;
}
body.ghostsocial-v2 .gs-profile-editor-security summary::-webkit-details-marker { display: none; }
body.ghostsocial-v2 .gs-profile-editor-security summary > span { display: flex; align-items: center; gap: 12px; color: var(--primary); }
body.ghostsocial-v2 .gs-profile-editor-security summary > span > span { display: flex; flex-direction: column; gap: 3px; }
body.ghostsocial-v2 .gs-profile-editor-security summary strong { color: var(--text); font-size: 14px; }
body.ghostsocial-v2 .gs-profile-editor-security summary small { color: var(--sub); font-size: 12px; }
body.ghostsocial-v2 .gs-profile-editor-security[open] summary > i { transform: rotate(180deg); }
body.ghostsocial-v2 .gs-profile-editor-password-fields { padding: 0 14px 14px; }
body.ghostsocial-v2 .gs-profile-editor-password-label { display: block; margin: 10px 0 4px; color: var(--sub); font-size: 12px; }
body.ghostsocial-v2 .gs-profile-editor-password-fields .modal-input { margin: 6px 0 10px; }
body.ghostsocial-v2 .gs-profile-editor-error { padding: 0 2px; }
body.ghostsocial-v2 .gs-profile-editor-footer,
body.ghostsocial-v2 .gs-banner-editor-footer {
  display: flex;
  gap: 10px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--surface);
}
body.ghostsocial-v2 .gs-profile-editor-cancel,
body.ghostsocial-v2 .gs-banner-reset {
  flex: 1;
  min-height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
body.ghostsocial-v2 .gs-profile-editor-save,
body.ghostsocial-v2 .gs-banner-save {
  flex: 1.2;
  min-height: 46px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #1a1427;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
}
body.ghostsocial-v2 .gs-profile-editor-save:disabled,
body.ghostsocial-v2 .gs-banner-save:disabled { opacity: .6; cursor: wait; }

/* Minimal profile light editor */
body.ghostsocial-v2 .gs-banner-editor-sheet { width: min(100%, 700px); }
body.ghostsocial-v2 .gs-banner-editor-help { margin: 0 0 14px; color: var(--sub); font-size: 13px; line-height: 1.45; }
body.ghostsocial-v2 .gs-banner-editor-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 2.15 / 1;
  min-height: 150px;
  overflow: visible;
  border-radius: 24px;
  touch-action: pan-y;
}
body.ghostsocial-v2 .gs-banner-editor-preview-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #020617;
}
body.ghostsocial-v2 .gs-banner-editor-preview-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.ghostsocial-v2 .gs-banner-editor-markers { position: absolute; inset: 0; pointer-events: none; }
body.ghostsocial-v2 .gs-banner-light-marker {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--gs-banner-marker-color, var(--primary));
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  touch-action: none;
  pointer-events: auto;
  cursor: grab;
}
body.ghostsocial-v2 .gs-banner-light-marker:active { cursor: grabbing; }
body.ghostsocial-v2 .gs-banner-light-marker.is-selected { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 32%, transparent), 0 2px 10px rgba(0,0,0,.35); }
body.ghostsocial-v2 .gs-banner-editor-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 12px; }
body.ghostsocial-v2 .gs-banner-editor-section-head h3 { margin: 0; color: var(--text); font-size: 17px; }
body.ghostsocial-v2 .gs-banner-editor-section-head p { margin: 4px 0 0; color: var(--sub); font-size: 12px; }
body.ghostsocial-v2 .gs-banner-source-count { padding: 6px 9px; border-radius: 999px; background: var(--surface2); color: var(--sub); font-size: 11px; font-weight: 650; }
body.ghostsocial-v2 .gs-banner-background-row,
body.ghostsocial-v2 .gs-banner-source-card {
  display: flex;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg);
}
body.ghostsocial-v2 .gs-banner-background-row {
  align-items: center;
  min-height: 70px;
  margin-bottom: 10px;
  padding: 10px 13px;
}
body.ghostsocial-v2 .gs-banner-background-row > span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
body.ghostsocial-v2 .gs-banner-background-row strong { color: var(--text); font-size: 14px; }
body.ghostsocial-v2 .gs-banner-background-row small { color: var(--sub); font-size: 12px; }
body.ghostsocial-v2 .gs-banner-background-row > i { color: var(--primary); }
body.ghostsocial-v2 .gs-banner-color-swatch {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  flex: none;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: #000;
  cursor: pointer;
}
body.ghostsocial-v2 .gs-banner-color-swatch input {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
body.ghostsocial-v2 .gs-banner-color-swatch::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gs-banner-swatch-color, transparent);
  content: "";
  pointer-events: none;
}
body.ghostsocial-v2 .gs-banner-source-card { display: block; margin-bottom: 10px; padding: 13px; transition: border-color .16s, background .16s; }
body.ghostsocial-v2 .gs-banner-source-card.is-selected { border-color: color-mix(in srgb, var(--primary) 60%, var(--border)); background: color-mix(in srgb, var(--primary) 7%, var(--bg)); }
body.ghostsocial-v2 .gs-banner-source-head { display: flex; align-items: center; gap: 11px; }
body.ghostsocial-v2 .gs-banner-source-name { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
body.ghostsocial-v2 .gs-banner-source-name strong { color: var(--text); font-size: 14px; }
body.ghostsocial-v2 .gs-banner-source-name small { color: var(--sub); font-size: 12px; }
body.ghostsocial-v2 .gs-banner-remove-source {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--sub);
  cursor: pointer;
}
body.ghostsocial-v2 .gs-banner-remove-source:disabled { opacity: .35; cursor: default; }
body.ghostsocial-v2 .gs-banner-strength-label { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 5px; color: var(--sub); font-size: 12px; }
body.ghostsocial-v2 .gs-banner-strength-label strong { color: var(--text); font-size: 13px; }
body.ghostsocial-v2 .gs-banner-strength { width: 100%; accent-color: var(--primary); }
body.ghostsocial-v2 .gs-banner-add-source {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 15px;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
body.ghostsocial-v2 .gs-banner-add-source:disabled { opacity: .5; cursor: default; }
body.ghostsocial-v2 .gs-banner-editor-error { min-height: 0; }
body.ghostsocial-v2 .gs-banner-editor-footer { position: relative; }
@media (min-width: 640px) {
  body.ghostsocial-v2 .gs-profile-editor-overlay,
  body.ghostsocial-v2 .gs-banner-editor-overlay { align-items: center; padding: 22px; }
  body.ghostsocial-v2 .gs-profile-editor-sheet,
  body.ghostsocial-v2 .gs-banner-editor-sheet {
    max-height: min(92dvh, 920px);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding-bottom: 0;
  }
}
@media (max-width: 420px) {
  body.ghostsocial-v2 .gs-profile-editor-scroll,
  body.ghostsocial-v2 .gs-banner-editor-scroll { padding-right: 16px; padding-left: 16px; }
  body.ghostsocial-v2 .gs-profile-editor-footer,
  body.ghostsocial-v2 .gs-banner-editor-footer { padding-right: 16px; padding-left: 16px; }
  body.ghostsocial-v2 .gs-profile-editor-head { padding-right: 16px; padding-left: 16px; }
}



/* Profile and banner editor cleanup */
body.ghostsocial-v2 .gs-profile-editor-sheet,
body.ghostsocial-v2 .gs-banner-editor-sheet {
  border: 0 !important;
}
body.ghostsocial-v2 .gs-profile-editor-head,
body.ghostsocial-v2 .gs-profile-editor-footer,
body.ghostsocial-v2 .gs-banner-editor-footer {
  border: 0;
}
body.ghostsocial-v2 .gs-profile-editor-banner,
body.ghostsocial-v2 .gs-profile-editor-avatar,
body.ghostsocial-v2 .gs-profile-editor-security,
body.ghostsocial-v2 .gs-profile-editor-fields,
body.ghostsocial-v2 .gs-profile-editor-row,
body.ghostsocial-v2 .gs-banner-editor-preview-bg,
body.ghostsocial-v2 .gs-banner-background-row,
body.ghostsocial-v2 .gs-banner-source-card {
  border: 0;
}
body.ghostsocial-v2 .gs-profile-editor-row {
  padding-top: 14px;
  padding-bottom: 14px;
}
body.ghostsocial-v2 .gs-profile-editor-security {
  border-radius: 0;
  background: transparent;
}
body.ghostsocial-v2 .gs-profile-editor-avatar-wrap {
  margin-top: -43px;
}
body.ghostsocial-v2 .gs-profile-editor-avatar-action {
  z-index: 2;
  right: -4px;
  bottom: -4px;
  width: 34px;
  height: 34px;
  border: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
body.ghostsocial-v2 .gs-profile-banner-action {
  border: 0;
}
body.ghostsocial-v2 .gs-profile-editor-fields {
  margin-top: 2px;
}
body.ghostsocial-v2 .gs-profile-editor-handle input:-webkit-autofill,
body.ghostsocial-v2 .gs-profile-editor-handle input:-webkit-autofill:hover,
body.ghostsocial-v2 .gs-profile-editor-handle input:-webkit-autofill:focus,
body.ghostsocial-v2 .gs-profile-editor-handle input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
  caret-color: var(--text);
  transition: background-color 99999s ease-out 0s;
}
body.ghostsocial-v2 .gs-profile-editor-cancel,
body.ghostsocial-v2 .gs-banner-reset,
body.ghostsocial-v2 .gs-profile-editor-password-fields .modal-input {
  border: 0;
}
body.ghostsocial-v2 .gs-banner-editor-section-head {
  margin-top: 18px;
  margin-bottom: 8px;
}
body.ghostsocial-v2 .gs-banner-editor-section-head p,
body.ghostsocial-v2 .gs-banner-editor-help,
body.ghostsocial-v2 .gs-banner-background-row small {
  display: none;
}
body.ghostsocial-v2 .gs-banner-source-count {
  padding: 0;
  background: transparent;
}
body.ghostsocial-v2 .gs-banner-background-row {
  min-height: 52px;
  margin-bottom: 4px;
  padding: 8px 0;
  background: transparent;
}
body.ghostsocial-v2 .gs-banner-color-swatch {
  border: 0;
}
body.ghostsocial-v2 .gs-banner-source-list {
  min-width: 0;
}
body.ghostsocial-v2 .gs-banner-source-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 2px 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.ghostsocial-v2 .gs-banner-source-tabs::-webkit-scrollbar { display: none; }
body.ghostsocial-v2 .gs-banner-source-tab {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
body.ghostsocial-v2 .gs-banner-source-tab.is-selected {
  border-color: var(--primary);
  box-shadow: none;
}
body.ghostsocial-v2 .gs-banner-source-tab-color {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--gs-banner-swatch-color, #777);
  pointer-events: none;
}
body.ghostsocial-v2 .gs-banner-source-tab-number {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  pointer-events: none;
}
body.ghostsocial-v2 .gs-banner-source-card,
body.ghostsocial-v2 .gs-banner-source-card.is-selected {
  margin: 0;
  padding: 10px 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.ghostsocial-v2 .gs-banner-source-name strong { font-size: 14px; }
body.ghostsocial-v2 .gs-banner-remove-source {
  border: 0;
  background: transparent;
}
body.ghostsocial-v2 .gs-banner-add-source {
  min-height: 38px;
  margin: 3px 0 8px;
  border: 0;
  background: transparent;
}
body.ghostsocial-v2 .gs-banner-light-marker.is-selected {
  border-color: var(--primary);
  box-shadow: none;
}
body.ghostsocial-v2 .gs-banner-editor-preview-bg {
  border-radius: 24px;
}


/* Sequential password change */
body.ghostsocial-v2 .gs-profile-editor-password-step[hidden],
body.ghostsocial-v2 .gs-profile-password-ready[hidden] {
  display: none !important;
}
body.ghostsocial-v2 .gs-profile-editor-password-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.ghostsocial-v2 .gs-profile-editor-password-label {
  margin: 8px 0 0;
}
body.ghostsocial-v2 .gs-profile-password-actions,
body.ghostsocial-v2 .gs-profile-password-ready {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.ghostsocial-v2 .gs-profile-password-ready {
  padding: 6px 0;
  color: var(--primary);
  font-size: 14px;
  font-weight: 650;
}
body.ghostsocial-v2 .gs-profile-password-step-button {
  min-height: 38px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
body.ghostsocial-v2 .gs-profile-password-step-button.is-secondary {
  color: var(--sub);
}
body.ghostsocial-v2 .gs-profile-password-step-button:disabled {
  opacity: .6;
  cursor: wait;
}


/* Keep browser autofill from painting password fields yellow */
body.ghostsocial-v2 .gs-profile-editor-password-fields .modal-input {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}
body.ghostsocial-v2 .gs-profile-editor-password-fields .modal-input:-webkit-autofill,
body.ghostsocial-v2 .gs-profile-editor-password-fields .modal-input:-webkit-autofill:hover,
body.ghostsocial-v2 .gs-profile-editor-password-fields .modal-input:-webkit-autofill:focus,
body.ghostsocial-v2 .gs-profile-editor-password-fields .modal-input:-webkit-autofill:active,
body.ghostsocial-v2 .gs-profile-editor-password-fields .modal-input:autofill {
  background-color: var(--surface) !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
  caret-color: var(--text);
  transition: background-color 99999s ease-out 0s;
}


/* Keep the profile editor banner geometry in sync with the profile card. */
body.ghostsocial-v2 .gs-profile-editor-banner {
  height: clamp(88px, 24.5vw, 110px);
  border-radius: 999px;
}
body.ghostsocial-v2 .gs-profile-editor-hero { padding-bottom: 29px; }
body.ghostsocial-v2 .gs-profile-editor-avatar-wrap {
  width: 110px;
  height: 110px;
  margin: -63px 0 0 18px;
}
body.ghostsocial-v2 .gs-profile-editor-avatar {
  width: 110px;
  height: 110px;
}

/* Suppress Android/Chromium autofill's yellow fill in the username field. */
body.ghostsocial-v2 #editUsername,
body.ghostsocial-v2 #editUsername:autofill,
body.ghostsocial-v2 #editUsername:-webkit-autofill,
body.ghostsocial-v2 #editUsername:-webkit-autofill:hover,
body.ghostsocial-v2 #editUsername:-webkit-autofill:focus,
body.ghostsocial-v2 #editUsername:-webkit-autofill:active {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
  caret-color: var(--text);
  transition: background-color 99999s ease-out 0s;
}


/* Measure the avatar center in JS and cut a crisp, evenly spaced notch around it. */
body.ghostsocial-v2 .gs-profile-editor-banner {
  border: 0 !important;
  border-radius: 999px;
  box-shadow: none;
  -webkit-mask-image: radial-gradient(circle var(--gs-editor-notch-radius, 72px) at var(--gs-editor-notch-x, 73px) var(--gs-editor-notch-y, calc(100% - 8px)), transparent 0, transparent var(--gs-editor-notch-radius, 72px), #000 var(--gs-editor-notch-radius, 72px));
  mask-image: radial-gradient(circle var(--gs-editor-notch-radius, 72px) at var(--gs-editor-notch-x, 73px) var(--gs-editor-notch-y, calc(100% - 8px)), transparent 0, transparent var(--gs-editor-notch-radius, 72px), #000 var(--gs-editor-notch-radius, 72px));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Make every banner color easy to find and edit on mobile. */
body.ghostsocial-v2 .gs-banner-source-tabs {
  gap: 9px;
  padding: 10px 0 12px;
}
body.ghostsocial-v2 .gs-banner-source-tab {
  display: flex;
  width: 58px;
  height: 68px;
  flex: 0 0 58px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 4px 3px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: transparent;
}
body.ghostsocial-v2 .gs-banner-source-tab.is-selected {
  border-color: var(--primary);
  background: transparent;
  box-shadow: none;
}
body.ghostsocial-v2 .gs-banner-source-tab-color {
  position: relative;
  inset: auto;
  display: block;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 50%;
}
body.ghostsocial-v2 .gs-banner-source-tab-number {
  position: static;
  z-index: auto;
  color: var(--sub);
  font-size: 12px;
  line-height: 1;
  text-shadow: none;
}
body.ghostsocial-v2 .gs-banner-source-tab.is-selected .gs-banner-source-tab-number {
  color: var(--text);
}
body.ghostsocial-v2 .gs-banner-color-control {
  display: inline-flex;
  min-height: 44px;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.ghostsocial-v2 .gs-banner-color-control .gs-banner-color-swatch {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}
body.ghostsocial-v2 .gs-banner-source-name {
  flex: 1;
}
body.ghostsocial-v2 .gs-banner-source-name small {
  display: block;
}
body.ghostsocial-v2 .gs-banner-background-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
}
body.ghostsocial-v2 .gs-banner-background-action i {
  color: inherit;
}


/* Full HSV color selection with direct HEX entry. */
body.ghostsocial-v2 .gs-banner-color-swatch { border: 0; }
body.ghostsocial-v2 .gs-banner-background-action,
body.ghostsocial-v2 .gs-banner-color-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.ghostsocial-v2 .gs-banner-color-control { flex: none; }
body.ghostsocial-v2 .gs-banner-background-action { flex: none; }
body.ghostsocial-v2 .gs-banner-color-control .gs-banner-color-swatch {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}
body.ghostsocial-v2 .gs-banner-background-action i,
body.ghostsocial-v2 .gs-banner-color-control i { color: inherit; }
body.ghostsocial-v2 .gs-color-picker-overlay[hidden] { display: none !important; }
body.ghostsocial-v2 .gs-color-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(3, 4, 12, .76);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, visibility .16s ease;
}
body.ghostsocial-v2 .gs-color-picker-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.ghostsocial-v2 .gs-color-picker-sheet {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(100%, 500px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 22px;
  border: 0;
  border-radius: 26px;
  background: var(--surface, #1b1a20);
  color: var(--text, #f6f5fa);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
body.ghostsocial-v2 .gs-color-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.ghostsocial-v2 .gs-color-picker-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.2;
}
body.ghostsocial-v2 .gs-color-picker-close {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sub);
  font-size: 22px;
  cursor: pointer;
}
body.ghostsocial-v2 .gs-color-picker-field {
  position: relative;
  width: 100%;
  aspect-ratio: 1.55;
  max-height: min(38vh, 300px);
  overflow: hidden;
  border-radius: 16px;
  background-color: hsl(var(--gs-color-picker-hue, 270deg) 100% 50%);
  background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent);
  touch-action: none;
  cursor: crosshair;
}
body.ghostsocial-v2 .gs-color-picker-marker {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0,0,0,.8);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
body.ghostsocial-v2 .gs-color-picker-hue-head {
  display: flex;
  justify-content: space-between;
  color: var(--sub);
  font-size: 13px;
}
body.ghostsocial-v2 .gs-color-picker-hue {
  width: 100%;
  height: 30px;
  margin: -9px 0 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
body.ghostsocial-v2 .gs-color-picker-hue::-webkit-slider-runnable-track {
  height: 15px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
body.ghostsocial-v2 .gs-color-picker-hue::-webkit-slider-thumb {
  width: 25px;
  height: 25px;
  margin-top: -5px;
  appearance: none;
  border: 3px solid #fff;
  border-radius: 50%;
  background: hsl(var(--gs-color-picker-hue, 270deg) 100% 50%);
  box-shadow: 0 1px 5px rgba(0,0,0,.55);
}
body.ghostsocial-v2 .gs-color-picker-hue::-moz-range-track {
  height: 15px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
body.ghostsocial-v2 .gs-color-picker-hue::-moz-range-thumb {
  width: 19px;
  height: 19px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: hsl(var(--gs-color-picker-hue, 270deg) 100% 50%);
}
body.ghostsocial-v2 .gs-color-picker-value-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.ghostsocial-v2 .gs-color-picker-preview {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 14px;
  background: #7C3AED;
}
body.ghostsocial-v2 .gs-color-picker-hex-label {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  color: var(--sub);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
}
body.ghostsocial-v2 .gs-color-picker-hex {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border, rgba(255,255,255,.18));
  border-radius: 13px;
  outline: none;
  background: var(--bg, #0b0e1b);
  color: var(--text, #fff);
  font: inherit;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.ghostsocial-v2 .gs-color-picker-hex:focus { border-color: var(--primary); }
body.ghostsocial-v2 .gs-color-picker-footer {
  display: flex;
  gap: 12px;
  margin-top: 2px;
}
body.ghostsocial-v2 .gs-color-picker-footer button {
  min-height: 48px;
  flex: 1;
  margin: 0;
}
@media (max-height: 620px) {
  body.ghostsocial-v2 .gs-color-picker-sheet { gap: 9px; padding: 16px; }
  body.ghostsocial-v2 .gs-color-picker-field { max-height: 30vh; }
}

/* Reduce only the avatar in the profile editor; keep its center aligned to the banner notch. */
body.ghostsocial-v2 .gs-profile-editor-avatar-wrap {
  width: 90px;
  height: 90px;
  margin: -53px 0 0 28px;
}
body.ghostsocial-v2 .gs-profile-editor-avatar {
  width: 90px;
  height: 90px;
}

/* Keep the reply target on its own line above the comment composer controls. */
body.ghostsocial-v2 .comment-input-row.is-replying {
  flex-wrap: wrap;
}
body.ghostsocial-v2 .comment-input-row.is-replying > .com-reply-bar {
  order: -1;
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
}


/* Reply target: show a compact quoted comment above the input, never beside it. */
body.ghostsocial-v2 #commentsModal .comment-composer {
  position:sticky; bottom:-24px; z-index:8; margin-top:14px; padding:10px 0 12px;
  border-top:1px solid var(--border); background:var(--surface);
}
body.ghostsocial-v2 #commentsModal .comment-composer .comment-input-row {
  position:static; bottom:auto; display:flex; align-items:center; flex-wrap:nowrap; gap:8px;
  margin:0; padding:0; border:0; background:transparent;
}
body.ghostsocial-v2 #commentsModal .com-reply-bar {
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:56px;
  box-sizing:border-box; margin:0 0 9px; padding:9px 10px 9px 12px;
  border:1px solid rgba(184,154,255,.22); border-left:3px solid var(--primary); border-radius:14px;
  background:var(--surface2); color:var(--sub); font-size:13px;
}
body.ghostsocial-v2 #commentsModal .com-reply-copy { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
body.ghostsocial-v2 #commentsModal .com-reply-copy > i {
  display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border-radius:10px;
  background:rgba(184,154,255,.13); color:var(--primary); font-size:13px;
}
body.ghostsocial-v2 #commentsModal .com-reply-meta { display:flex; min-width:0; flex-direction:column; gap:3px; }
body.ghostsocial-v2 #commentsModal .com-reply-meta strong { color:var(--text); font-size:12px; font-weight:700; }
body.ghostsocial-v2 #commentsModal .com-reply-meta span { display:-webkit-box; overflow:hidden; color:var(--muted); font-size:12px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
body.ghostsocial-v2 #commentsModal .com-reply-bar > button {
  display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; padding:0;
  border:0; border-radius:50%; background:rgba(255,255,255,.06); color:var(--sub);
}
body.ghostsocial-v2.feed-mode #commentsModal.feed-inline .comment-composer {
  position:static; bottom:auto; margin-top:10px; padding:10px 0 0; background:transparent;
}

/* Minisky description reuses the post editor's live hashtag and @mention behavior. */
body.ghostsocial-v2 #mskCompose .mskc-caption-editor { position:relative; width:100%; min-height:112px; }
body.ghostsocial-v2 #mskCompose .mskc-caption-mirror {
  position:absolute; inset:1px; z-index:2; overflow:hidden; padding:12px; color:transparent;
  pointer-events:none; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word;
  font:inherit; font-size:16px; line-height:1.5; box-sizing:border-box;
}
body.ghostsocial-v2 #mskCompose .mskc-caption-mirror .composer-token-tag { color:var(--primary); }
body.ghostsocial-v2 #mskCompose .mskc-caption-mirror .composer-token-user { color:#78d9ff; }
body.ghostsocial-v2 #mskCompose .mskc-caption-editor .mskc-caption {
  position:relative; z-index:1; display:block; min-height:112px; line-height:1.5;
  background:transparent; box-sizing:border-box;
}
body.ghostsocial-v2 #mskCompose .mskc-caption-suggest { position:relative; z-index:10; max-height:230px; overflow:auto; overscroll-behavior:contain; }

/* Wide miniskies fit the available screen width and keep the complete frame visible. */
body.ghostsocial-v2 #mskFeed .msk-card { min-width:0; max-width:100vw; box-sizing:border-box; }
body.ghostsocial-v2 #mskFeed .msk-card .mskc-ftrack {
  width:min(600px,56.25vh,100%) !important; max-width:100% !important; box-sizing:border-box;
}
body.ghostsocial-v2 #mskFeed .msk-card .mskc-fslide .mskc-fit-landscape {
  display:block; width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important;
  object-fit:contain !important; object-position:center !important;
}
@media (max-width:999px) {
  body.ghostsocial-v2 #mskFeed .msk-card .mskc-ftrack { width:100% !important; max-width:100% !important; }
}


/* Keep line breaks from minisky descriptions visible after publication. */
body.ghostsocial-v2 .msk-caption-text { white-space:pre-line; }


/* Multiline captions collapse to a one-line preview with ellipsis; expanded text keeps breaks. */
body.ghostsocial-v2 .msk-caption-wrap.has-linebreaks:not(.expanded) .msk-caption-text {
  display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:1; white-space:normal;
}

/* Expanded minisky captions: overlay the video with a bottom-up fade and readable line gaps. */
body.ghostsocial-v2.miniska-mode #mskFeed .msk-caption-break { display: none; }
body.ghostsocial-v2.miniska-mode #mskFeed .msk-caption-wrap.expanded .msk-caption-break {
  display: block;
  height: .45em;
}
body.ghostsocial-v2.miniska-mode #mskFeed .msk-info {
  isolation: isolate;
}
body.ghostsocial-v2.miniska-mode #mskFeed .msk-info::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: -72px;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .12) 28%,
    rgba(0, 0, 0, .4) 57%,
    rgba(0, 0, 0, .82) 88%,
    #000 100%
  );
  transition: opacity 240ms ease;
}
body.ghostsocial-v2.miniska-mode #mskFeed .msk-card.caption-expanded {
  grid-template-rows: minmax(0, 1fr);
}
body.ghostsocial-v2.miniska-mode #mskFeed .msk-card.caption-expanded .msk-overlay {
  position: absolute;
  inset: auto 0 0;
  grid-area: auto;
  z-index: 3;
  padding: 0;
  background: transparent !important;
}
body.ghostsocial-v2.miniska-mode #mskFeed .msk-info.caption-expanded {
  background: transparent !important;
}
body.ghostsocial-v2.miniska-mode #mskFeed .msk-info.caption-expanded::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  body.ghostsocial-v2.miniska-mode #mskFeed .msk-info::before { transition: none; }
}


/* Smooth minisky caption expand/collapse; keep the video behind its caption. */
body.ghostsocial-v2.miniska-mode #mskFeed .msk-card {
  grid-template-rows: minmax(0, 1fr);
}
body.ghostsocial-v2.miniska-mode #mskFeed .msk-card .msk-overlay {
  position: absolute;
  inset: auto 0 0;
  grid-area: auto;
  z-index: 3;
  min-width: 0;
  padding: 0;
  background: transparent !important;
}
body.ghostsocial-v2.miniska-mode #mskFeed .msk-info {
  position: relative;
  isolation: isolate;
}
body.ghostsocial-v2.miniska-mode #mskFeed .msk-caption-wrap {
  overflow: visible;
  transition: max-height 320ms cubic-bezier(.22, .61, .36, 1);
  will-change: max-height;
}
body.ghostsocial-v2.miniska-mode #mskFeed .msk-caption-break {
  display: inline-block;
  width: .36em;
  height: 1em;
  line-height: inherit;
  vertical-align: baseline;
}
body.ghostsocial-v2.miniska-mode #mskFeed .msk-caption-wrap.expanded .msk-caption-break {
  display: block;
  width: auto;
  height: .62em;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  body.ghostsocial-v2.miniska-mode #mskFeed .msk-caption-wrap { transition: none; }
}


/* Clear gutters between photos and a small outer margin around profile banners. */
body.ghostsocial-v2 .media-grid {
  gap: 5px;
  background: var(--bg);
}
body.ghostsocial-v2 .gs-profile-banner {
  width: calc(100% + 12px);
  margin: 0 -6px 0;
}
body.ghostsocial-v2 a.mention,
body.ghostsocial-v2 .post-content a.mention,
body.ghostsocial-v2 .comment-text a.mention {
  color: #78d9ff !important;
  -webkit-text-fill-color: #78d9ff !important;
}


/* Attachment thumbnails are square, and their action target opens the preview. */
body.ghostsocial-v2 .media-preview-item:not(.audio-expanded) > .media-preview-icon.mp-thumb {
  display: block;
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  min-width: 48px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface2);
  cursor: pointer;
}
body.ghostsocial-v2 .media-preview-icon.mp-thumb > img,
body.ghostsocial-v2 .media-preview-icon.mp-thumb > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.ghostsocial-v2 .media-preview-icon.mp-thumb[role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
body.ghostsocial-v2 .media-preview-item:not(.audio-expanded) .media-preview-del {
  width: 36px;
  height: 36px;
  min-width: 36px;
  color: var(--text);
  cursor: pointer;
}
body.ghostsocial-v2 .media-preview-item:not(.audio-expanded) .media-preview-del:active {
  transform: scale(.92);
}

/* Inverted rounded corners: the sheet reaches the screen edges, then curves down into its flat top. */
body.ghostsocial-v2 .attach-menu {
  box-sizing: border-box;
  position: relative;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  isolation: isolate;
  overflow: visible;
  border-radius: 0;
  border-top-color: transparent;
  box-shadow: 0 -18px 54px #0005;
}
body.ghostsocial-v2 .attach-menu::before,
body.ghostsocial-v2 .attach-menu::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -52px;
  width: 52px;
  height: 52px;
  /* SVG draws the fill and outline together; the contour starts 1px inside the viewport so its stroke stays visible at the screen edge. */
  background: transparent;
  -webkit-clip-path: none;
  clip-path: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='52'%20height='52'%20viewBox='0%200%2052%2052'%3E%3Cpath%20d='M0%200%20C0%2032%2022%2052%2052%2052%20L0%2052%20L0%200%20Z'%20fill='%231b1b1f'/%3E%3Cpath%20d='M0%200%20C0%2032%2022%2052%2052%2052'%20fill='none'%20stroke='%2328282e'%20stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
body.ghostsocial-v2 .attach-menu::before { left: -1px; }
body.ghostsocial-v2 .attach-menu::after {
  right: -1px;
  transform: scaleX(-1);
}

/* Match shared confirmation dialogs to GhostSocial surfaces and controls. */
body.ghostsocial-v2 .ge-dlg-overlay {
  z-index: 12000;
  background: rgb(8 7 12 / 72%);
  backdrop-filter: blur(8px);
}
body.ghostsocial-v2 .ge-dlg-box {
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 70px #0008;
}
body.ghostsocial-v2 .ge-dlg-title {
  margin-bottom: 8px;
  font-size: 19px;
  line-height: 1.3;
  color: var(--text);
}
body.ghostsocial-v2 .ge-dlg-msg {
  font-size: 14px;
  line-height: 1.5;
  color: var(--sub);
}
body.ghostsocial-v2 .ge-dlg-actions {
  gap: 10px;
  margin-top: 22px;
}
body.ghostsocial-v2 .ge-dlg-btn {
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
}
body.ghostsocial-v2 .ge-dlg-btn.cancel {
  border: 1px solid var(--border-strong);
  background: var(--surface2);
  color: var(--text);
}
body.ghostsocial-v2 .ge-dlg-btn.danger {
  border: 0;
  background: #e54870;
  color: #fff;
  opacity: 1;
}
body.ghostsocial-v2 .ge-dlg-btn.danger:disabled {
  opacity: .58;
}

/* Inverted edge corners for full-width mobile sheets.
   Their vertical position is measured against the real sheet so they stay attached
   to the top edge even when the sheet content or viewport height changes. */
@media (max-width: 639px) {
  body.ghostsocial-v2 .modal-overlay.open,
  body.ghostsocial-v2 .gs-modal-ov.open,
  body.ghostsocial-v2 .msk-sheet.open,
  body.ghostsocial-v2 #shareSheet,
  body.ghostsocial-v2 .gs-reposters-overlay.is-open,
  body.ghostsocial-v2 .gs-profile-editor-overlay.open {
    position: fixed;
    display: flex !important;
    grid-template-columns: none;
    grid-template-rows: none;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
    isolation: isolate;
  }

  /* Inline comments use their own expand/collapse motion, not the legacy sheet motion. */
  body.ghostsocial-v2.feed-mode #commentsModal.feed-inline,
  body.ghostsocial-v2.feed-mode #commentsModal.feed-inline > .modal-sheet {
    animation: none !important;
    transform: none !important;
    translate: none !important;
  }

  /* Inline comments expand inside the feed card: never draw sheet corner ornaments here. */
  body.ghostsocial-v2.feed-mode #commentsModal.feed-inline.open::before,
  body.ghostsocial-v2.feed-mode #commentsModal.feed-inline.open::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  body.ghostsocial-v2 .modal-overlay.open::before,
  body.ghostsocial-v2 .modal-overlay.open::after,
  body.ghostsocial-v2 .gs-modal-ov.open::before,
  body.ghostsocial-v2 .gs-modal-ov.open::after,
  body.ghostsocial-v2 .msk-sheet.open::before,
  body.ghostsocial-v2 .msk-sheet.open::after,
  body.ghostsocial-v2 #shareSheet::before,
  body.ghostsocial-v2 #shareSheet::after,
  body.ghostsocial-v2 .gs-reposters-overlay.is-open::before,
  body.ghostsocial-v2 .gs-reposters-overlay.is-open::after,
  body.ghostsocial-v2 .gs-profile-editor-overlay.open::before,
  body.ghostsocial-v2 .gs-profile-editor-overlay.open::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: var(--gs-sheet-edge-top, 200vh);
    width: 52px;
    height: 52px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='52'%20height='52'%20viewBox='0%200%2052%2052'%3E%3Cpath%20d='M0%200%20C0%2032%2022%2052%2052%2052%20L0%2052%20L0%200%20Z'%20fill='%231b1b1f'/%3E%3Cpath%20d='M0%200%20C0%2032%2022%2052%2052%2052'%20fill='none'%20stroke='%2328282e'%20stroke-width='1'/%3E%3C/svg%3E");
    transform: translateY(-52px);
    pointer-events: none;
  }
  body.ghostsocial-v2 .modal-overlay.open::before,
  body.ghostsocial-v2 .gs-modal-ov.open::before,
  body.ghostsocial-v2 .msk-sheet.open::before,
  body.ghostsocial-v2 #shareSheet::before,
  body.ghostsocial-v2 .gs-reposters-overlay.is-open::before,
  body.ghostsocial-v2 .gs-profile-editor-overlay.open::before { left: 0; }
  body.ghostsocial-v2 .modal-overlay.open::after,
  body.ghostsocial-v2 .gs-modal-ov.open::after,
  body.ghostsocial-v2 .msk-sheet.open::after,
  body.ghostsocial-v2 #shareSheet::after,
  body.ghostsocial-v2 .gs-reposters-overlay.is-open::after,
  body.ghostsocial-v2 .gs-profile-editor-overlay.open::after {
    right: 0;
    transform: translateY(-52px) scaleX(-1);
  }
  body.ghostsocial-v2 .gs-reposters-overlay.is-open::before,
  body.ghostsocial-v2 .gs-reposters-overlay.is-open::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='52'%20height='52'%20viewBox='0%200%2052%2052'%3E%3Cpath%20d='M0%200%20C0%2032%2022%2052%2052%2052%20L0%2052%20L0%200%20Z'%20fill='%23111114'/%3E%3Cpath%20d='M0%200%20C0%2032%2022%2052%2052%2052'%20fill='none'%20stroke='%2328282e'%20stroke-width='1'/%3E%3C/svg%3E");
  }

  body.ghostsocial-v2 .modal-overlay.open > .modal-sheet,
  body.ghostsocial-v2 .gs-modal-ov.open > .gs-modal,
  body.ghostsocial-v2 .msk-sheet.open > .msk-sheet-card,
  body.ghostsocial-v2 #shareSheet > div,
  body.ghostsocial-v2 .gs-reposters-overlay.is-open > .gs-reposters-sheet,
  body.ghostsocial-v2 .gs-profile-editor-overlay.open > .gs-profile-editor-sheet,
  body.ghostsocial-v2 .gs-profile-editor-overlay.open > .gs-banner-editor-sheet {
    position: relative;
    z-index: 3;
    justify-self: auto;
    align-self: auto;
    width: 100%;
    max-width: 600px;
    margin: 0;
    border-radius: 0;
    border-top-color: transparent;
  }
  body.ghostsocial-v2 #shareSheet > div { max-width: none; border-radius: 0 !important; border-top-color: transparent !important; }
  body.ghostsocial-v2 .gs-reposters-overlay.is-open > .gs-reposters-sheet { max-width: 560px; }

  /* The burger panel is its own fixed sheet, so its corners attach directly to it. */
  body.ghostsocial-v2 #gsMenuPanel.open,
  body.ghostsocial-v2 #gsMenuPanel.gs-motion-leaving {
    display: flex !important;
    flex-direction: column;
    overflow: visible;
    isolation: isolate;
    border-radius: 0;
    border-top-color: transparent;
  }
  body.ghostsocial-v2 #gsMenuPanel::before,
  body.ghostsocial-v2 #gsMenuPanel::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -52px;
    width: 52px;
    height: 52px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='52'%20height='52'%20viewBox='0%200%2052%2052'%3E%3Cpath%20d='M0%200%20C0%2032%2022%2052%2052%2052%20L0%2052%20L0%200%20Z'%20fill='%231b1b1f'/%3E%3Cpath%20d='M0%200%20C0%2032%2022%2052%2052%2052'%20fill='none'%20stroke='%2328282e'%20stroke-width='1'/%3E%3C/svg%3E");
    pointer-events: none;
  }
  body.ghostsocial-v2 #gsMenuPanel::before { left: 0; }
  body.ghostsocial-v2 #gsMenuPanel::after { right: 0; transform: scaleX(-1); }
  body.ghostsocial-v2 #gsMenuPanel > .gsm-page {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.ghostsocial-v2 #gsMenuPanel > .gsm-foot { position: relative; z-index: 1; flex: 0 0 auto; }
}


/* Profile media banner: same geometry as the gradient banner, with native hidden behavior. */
body.ghostsocial-v2 .gs-profile-card > .gs-media-banner {
  display: block;
  position: relative;
  box-sizing: border-box;
  flex: none;
  width: calc(100% + 32px);
  height: clamp(118px, 28vw, 152px);
  margin: 0 -16px 0;
  overflow: hidden;
  border-radius: 20px 20px 15px 15px;
  background: #171026;
  isolation: isolate;
}
body.ghostsocial-v2 .gs-profile-card > .gs-media-banner[hidden] { display: none !important; }
body.ghostsocial-v2 .gs-profile-card > .gs-media-banner img,
body.ghostsocial-v2 .gs-profile-card > .gs-media-banner video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The media banner is the same visual slot as the gradient banner:
   while loading it overlays the gradient; after load it takes over its flow slot. */
body.ghostsocial-v2 .gs-profile-card > .gs-media-banner:not(.gs-media-banner-loaded) {
  position:absolute;
  z-index:3;
  top:0;
  left:-16px;
  width:calc(100% + 32px);
  height:clamp(88px, 24.5vw, 110px);
  margin:0;
  border-radius:999px;
  background:#211631;
}
body.ghostsocial-v2 .gs-profile-card > .gs-media-banner.gs-media-banner-loaded {
  position:relative;
  top:auto;
  left:auto;
  width:calc(100% + 32px);
  height:clamp(88px, 24.5vw, 110px);
  margin:0 -16px 0;
}
/* Media banner occupies a real flex row like the gradient banner. This makes
   the profile content flow below it, while the avatar alone overlaps the banner. */
body.ghostsocial-v2 .gs-profile-card { position: relative; }
body.ghostsocial-v2 .gs-profile-card > .gs-media-banner {
  display: block;
  position: relative;
  z-index: 2;
  top: auto;
  left: auto;
  box-sizing: border-box;
  flex: none;
  width: calc(100% + 32px);
  height: clamp(88px, 24.5vw, 110px);
  margin: 0 -16px 0;
  overflow: hidden;
  border-radius: 999px;
  background: transparent;
  opacity: 1;
  pointer-events: none;
  transition: opacity 380ms ease;
  -webkit-mask-image: radial-gradient(circle 72px at 50% 100%, transparent 0, transparent 71px, #000 71px);
  mask-image: radial-gradient(circle 72px at 50% 100%, transparent 0, transparent 71px, #000 71px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
body.ghostsocial-v2 .gs-profile-card > .gs-media-banner[hidden] { display: none !important; }
body.ghostsocial-v2 .gs-profile-card > .gs-media-banner.gs-media-banner-loaded { opacity: 1; }
body.ghostsocial-v2 .gs-profile-card > .gs-media-banner img,
body.ghostsocial-v2 .gs-profile-card > .gs-media-banner video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.ghostsocial-v2 .gs-profile-card > .gs-profile-banner[hidden] { display:none !important; }
body.ghostsocial-v2 .gs-profile-card > .gs-profile-banner.gs-gradient-banner-covered { opacity: 0; }
body.ghostsocial-v2 .gs-profile-card > .gs-profile-banner { transition: opacity 380ms ease; }


/* Explicit diagnostic state for media banners. The gradient is removed while a
   media banner is configured; the user sees text until the media really loads. */
body.ghostsocial-v2 .gs-profile-card > .gs-media-banner { color:#fff; }
body.ghostsocial-v2 .gs-profile-card > .gs-media-banner .gs-media-banner-status {
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  padding:12px; box-sizing:border-box; text-align:center; font-size:12px; line-height:1.35;
  font-weight:600; color:#fff; background:#211631; overflow-wrap:anywhere;
}
body.ghostsocial-v2 .gs-profile-card > .gs-media-banner.gs-media-banner-error .gs-media-banner-status {
  background:#421f2b; color:#ffdce4;
}


/* Unified profile banner: gradient and media are modes of the SAME DOM element. */
body.ghostsocial-v2 .gs-profile-card > .gs-profile-banner.gs-banner-mode-media {
  background: #171026;
  background-image: none !important;
}
body.ghostsocial-v2 .gs-profile-card > .gs-profile-banner .gs-banner-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
body.ghostsocial-v2 .gs-profile-card > .gs-profile-banner .gs-media-banner-status {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  color: #fff;
  background: #211631;
  overflow-wrap: anywhere;
}
body.ghostsocial-v2 .gs-profile-card > .gs-profile-banner.gs-banner-media-loaded .gs-profile-banner-image { display: none !important; }


/* While media is loading, retain the banner's actual configured gradient mode. */
body.ghostsocial-v2 .gs-profile-card > .gs-profile-banner .gs-banner-media {
  opacity: 0;
  transition: opacity 180ms ease;
}
body.ghostsocial-v2 .gs-profile-card > .gs-profile-banner.gs-banner-media-loaded .gs-banner-media {
  opacity: 1;
}
body.ghostsocial-v2 .gs-profile-card > .gs-profile-banner.gs-banner-mode-media:not(.gs-banner-media-loaded) {
  background-image: var(--gs-profile-banner-gradient, linear-gradient(120deg,#301754,#171026 72%)) !important;
}


/* Register the radius so browsers interpolate the circular cut-out smoothly. */
@property --gs-banner-notch-radius {
  syntax: "<length>";
  inherits: false;
  initial-value: 72px;
}

/* Animated media-banner notch: the cut-out contracts to reveal media over the avatar. */
body.ghostsocial-v2 .gs-profile-card > .gs-profile-banner.gs-banner-mode-media {
  z-index: 2;
  --gs-banner-notch-radius: 72px;
  --gs-banner-notch-duration: 750ms;
  -webkit-mask-image: radial-gradient(circle var(--gs-banner-notch-radius) at 50% 100%, transparent 0, transparent calc(var(--gs-banner-notch-radius) - 1px), #000 var(--gs-banner-notch-radius)) !important;
  mask-image: radial-gradient(circle var(--gs-banner-notch-radius) at 50% 100%, transparent 0, transparent calc(var(--gs-banner-notch-radius) - 1px), #000 var(--gs-banner-notch-radius)) !important;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: --gs-banner-notch-radius var(--gs-banner-notch-duration) cubic-bezier(0.62, 0.02, 0.92, 0.42);
}
body.ghostsocial-v2 .gs-profile-card > .gs-profile-banner.gs-banner-mode-media .gs-banner-media {
  z-index: 2;
}
/* The notch itself is the wave edge; avoid a second ring layer that can ghost on rapid taps. */
body.ghostsocial-v2 .gs-profile-card > .gs-profile-banner.gs-banner-mode-media::after {
  z-index: 3;
}
body.ghostsocial-v2 .gs-profile-card > .gs-profile-banner.gs-banner-mode-media.gs-banner-notch-open {
  --gs-banner-notch-radius: 0px;
  z-index: 5;
}
/* Sibling overlay: lives outside the banner mask, so the fade can actually cover the avatar. */
body.ghostsocial-v2 .gs-profile-card > .gs-banner-avatar-gradient {
  position: absolute;
  height: 58px;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg, #070918) 0%, var(--bg, #070918) 8%, color-mix(in srgb, var(--bg, #070918) 72%, transparent) 48%, transparent 100%);
  opacity: 0;
  transition: opacity 180ms ease-out;
}
body.ghostsocial-v2 .gs-profile-card > .gs-banner-avatar-gradient.is-visible { opacity: 1; }
body.ghostsocial-v2 .gs-profile-card > .prof-av {
  position: relative;
  z-index: 1 !important;
}

/* Prevent the browser's default blue/gray tap flash on all interactive UI. */
body.ghostsocial-v2 *,
body.ghostsocial-v2 *::before,
body.ghostsocial-v2 *::after {
  -webkit-tap-highlight-color: transparent;
}
body.ghostsocial-v2 button,
body.ghostsocial-v2 [role="button"],
body.ghostsocial-v2 a,
body.ghostsocial-v2 label,
body.ghostsocial-v2 summary,
body.ghostsocial-v2 .prof-av,
body.ghostsocial-v2 .fp-avatar {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Keep the title fixed; move only the back arrow lower. */
body.ghostsocial-v2 #screenFullProfile .full-profile-header { align-items: center; }
body.ghostsocial-v2 #screenFullProfile #fullProfBack { position: relative; top: 8px; align-self: center; }
body.ghostsocial-v2 #screenFullProfile #fullProfBack > i { display: block; line-height: 1; transform: translateY(0); }

/* ============================================================================
   GhostSocial — Media banner editor (openMediaBannerEditor) · 2026-10-20
   Classes: gs-mbe-*. Fullscreen stage, banner-proportional frame with avatar
   notch, glass top bar, horizontal zoom card, action row. Works on touch
   (drag/pinch), mouse (drag/wheel) and has a desktop-width adaptation.
   ========================================================================== */
body.ghostsocial-v2 .gs-mbe-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  background: #070918;
  color: var(--text, #fff);
  font-family: inherit;
  overflow: hidden;
  animation: gs-mbe-in 200ms ease both;
}
@keyframes gs-mbe-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.ghostsocial-v2 .gs-mbe-overlay { animation: none; }
}

/* --- stage ---------------------------------------------------------------- */
body.ghostsocial-v2 .gs-mbe-stage {
  position: absolute;
  inset: 0;
  background: #101018;
  isolation: isolate;
  touch-action: none;
  cursor: grab;
  overflow: hidden;
}
body.ghostsocial-v2 .gs-mbe-stage:active { cursor: grabbing; }
body.ghostsocial-v2 .gs-mbe-stage-holder,
body.ghostsocial-v2 .gs-mbe-stage-holder > img,
body.ghostsocial-v2 .gs-mbe-stage-holder > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1);
  transform-origin: center;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* --- frame: real banner geometry, incl. avatar notch ---------------------- */
body.ghostsocial-v2 .gs-mbe-frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: clamp(118px, 28vw, 152px);
  border-radius: 22px;
  box-shadow:
    0 0 0 9999px rgba(3, 4, 12, .62),
    0 0 0 2px rgba(255, 255, 255, .96),
    0 18px 60px rgba(0, 0, 0, .45);
  z-index: 2;
  pointer-events: none;
  transition: box-shadow 200ms ease;
}
body.ghostsocial-v2 .gs-mbe-frame.is-moved {
  box-shadow:
    0 0 0 9999px rgba(3, 4, 12, .62),
    0 0 0 2px color-mix(in srgb, var(--primary, #a78bfa) 92%, #fff),
    0 18px 60px rgba(0, 0, 0, .45);
}
/* The cut-out the real profile banner shows under the avatar circle. */
body.ghostsocial-v2 .gs-mbe-frame-avatar {
  position: absolute;
  left: 50%;
  bottom: -72px;
  transform: translateX(-50%);
  width: 144px;
  height: 72px;
  border-radius: 144px 144px 0 0 / 144px 144px 0 0;
  background: #070918;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
}
body.ghostsocial-v2 .gs-mbe-frame-avatar i {
  margin-top: 16px;
  font-size: 26px;
  color: rgba(255, 255, 255, .28);
}

/* --- top bar -------------------------------------------------------------- */
body.ghostsocial-v2 .gs-mbe-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 12px;
  background: linear-gradient(180deg, rgba(7, 9, 24, .92) 0%, rgba(7, 9, 24, .55) 62%, transparent 100%);
  pointer-events: auto;
}
body.ghostsocial-v2 .gs-mbe-headline {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
  pointer-events: none;
}
body.ghostsocial-v2 .gs-mbe-headline strong {
  font-size: 15px;
  font-weight: 750;
  color: #fff;
}
body.ghostsocial-v2 .gs-mbe-headline span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- media controls (video) ----------------------------------------------- */
body.ghostsocial-v2 .gs-mbe-media-controls {
  position: absolute;
  left: 16px;
  bottom: calc(150px + env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- glass buttons -------------------------------------------------------- */
body.ghostsocial-v2 .gs-mbe-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 650;
  border-radius: 16px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.ghostsocial-v2 .gs-mbe-btn:active { transform: scale(.97); }
body.ghostsocial-v2 .gs-mbe-btn.gs-mbe-close,
body.ghostsocial-v2 .gs-mbe-btn.gs-mbe-reset,
body.ghostsocial-v2 .gs-mbe-btn.gs-mbe-chip {
  width: 46px;
  height: 46px;
  min-width: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
body.ghostsocial-v2 .gs-mbe-btn.gs-mbe-save {
  padding: 14px;
  border-color: transparent;
  background: linear-gradient(135deg, #8b5cf6, #6d5cf6);
  color: white;
  box-shadow: 0 10px 28px rgba(139, 92, 246, .35);
}
body.ghostsocial-v2 .gs-mbe-btn.gs-mbe-save:disabled { opacity: .6; cursor: wait; }
body.ghostsocial-v2 .gs-mbe-btn.gs-mbe-cancel {
  padding: 14px;
  background: rgba(255, 255, 255, .07);
}

/* --- bottom sheet --------------------------------------------------------- */
body.ghostsocial-v2 .gs-mbe-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent 0%, rgba(7, 9, 24, .84) 34%, rgba(7, 9, 24, .96) 100%);
  pointer-events: auto;
}
body.ghostsocial-v2 .gs-mbe-zoom-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.ghostsocial-v2 .gs-mbe-zoom-card > i { color: rgba(255, 255, 255, .72); font-size: 15px; }
body.ghostsocial-v2 .gs-mbe-zoom {
  flex: 1;
  height: 34px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
body.ghostsocial-v2 .gs-mbe-zoom::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary, #a78bfa), #6d5cf6);
}
body.ghostsocial-v2 .gs-mbe-zoom::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary, #a78bfa), #6d5cf6);
}
body.ghostsocial-v2 .gs-mbe-zoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
body.ghostsocial-v2 .gs-mbe-zoom::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
body.ghostsocial-v2 .gs-mbe-zoom-value {
  min-width: 52px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
}
body.ghostsocial-v2 .gs-mbe-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}
body.ghostsocial-v2 .gs-mbe-actions .gs-mbe-save[style] { pointer-events: auto; }

/* --- desktop adaptation --------------------------------------------------- */
@media (min-width: 761px) {
  body.ghostsocial-v2 .gs-mbe-stage {
    left: 22vw;
    right: 22vw;
    top: 64px;
    bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, .08);
    border-right: 1px solid rgba(255, 255, 255, .08);
  }
  body.ghostsocial-v2 .gs-mbe-frame { height: clamp(118px, 18vw, 240px); }
  body.ghostsocial-v2 .gs-mbe-top { padding-left: 24px; padding-right: 24px; }
  body.ghostsocial-v2 .gs-mbe-sheet {
    left: 24vw;
    right: auto;
    width: 52vw;
    border-radius: 24px 24px 0 0;
  }
  body.ghostsocial-v2 .gs-mbe-media-controls { top: 84px; bottom: auto; }
}
@media (max-width: 760px) {
  body.ghostsocial-v2 .gs-mbe-headline span { font-size: 11px; }
  body.ghostsocial-v2 .gs-mbe-actions { grid-template-columns: 1fr 2fr; }
}

/* === GhostSocial · Search v3 · 2026-10-21 ================================ */
#screenSearch{
  --gs-fast: 150ms;
  --gs-ease: cubic-bezier(.2,.7,.3,1);
  --sg-hair: rgba(255,255,255,.065);
  --sg-glass: rgba(27,27,31,.76);
  --sg-p08: rgba(179,154,244,.08);
  --sg-p16: rgba(179,154,244,.16);
  --sg-p32: rgba(179,154,244,.32);
  --sg-shadow: 0 16px 42px rgba(0,0,0,.42);
  /* Liquid glass: полупрозрачные поверхности + backdrop-blur */
  --sg-blur-strong: blur(24px) saturate(160%);
  --sg-blur-panel: blur(20px) saturate(150%);
  --sg-blur-card: blur(12px) saturate(140%);
  --sg-blur-chip: blur(10px) saturate(140%);
  --sg-blur-mini: blur(8px) saturate(130%);
  --sg-surface-97: color-mix(in srgb, var(--surface) 97%, transparent);
  --sg-surface-94: color-mix(in srgb, var(--surface) 94%, transparent);
  --sg-surface-90: color-mix(in srgb, var(--surface) 90%, transparent);
  --sg-surface-84: color-mix(in srgb, var(--surface) 84%, transparent);
  --sg-surface-72: color-mix(in srgb, var(--surface) 72%, transparent);
  --sg-surface-62: color-mix(in srgb, var(--surface) 62%, transparent);
}
.search-results{ position: relative; z-index: 1; }

/* --- липкая стеклянная панель ввода --- */
.search-sticky{
  position: sticky; top: var(--head-h); z-index: 40; margin: -6px 0 18px; padding: 10px;
  border: 1px solid var(--sg-hair); border-radius: 18px;
  background: var(--sg-surface-62);
  -webkit-backdrop-filter: var(--sg-blur-panel);
  backdrop-filter: var(--sg-blur-panel);
  box-shadow: var(--sg-shadow);
}
.search-bar { position: relative; margin: 0; }
.search-input{
  width: 100%; min-height: 44px; padding: 0 44px 0 42px;
  border: 1px solid transparent; border-radius: 12px;
  background: var(--surface2); color: var(--text); font-size: 16px;
  transition: background-color var(--gs-fast), border-color var(--gs-fast), box-shadow var(--gs-fast);
}
.search-input:hover { border-color: var(--border-strong); }
.search-input:focus{
  border-color: var(--sg-p32);
  background: color-mix(in srgb, var(--surface2) 88%, var(--primary));
  box-shadow: 0 0 0 3px var(--sg-p16); outline: none;
}
.search-icon{
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 15px; pointer-events: none;
  transition: color var(--gs-fast);
}
.search-bar:focus-within .search-icon { color: var(--primary); }
.search-clear{
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: none; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 13px;
}
.search-clear.show { display: grid; }
.search-clear:hover { background: var(--surface2); color: var(--text); }
/* --- выпадающий список подсказок --- */
.search-suggest{
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 60;
  padding: 6px; max-height: min(58vh, 420px); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--sg-hair); border-radius: 14px;
  background: var(--sg-surface-97);
  -webkit-backdrop-filter: var(--sg-blur-strong);
  backdrop-filter: var(--sg-blur-strong);
  box-shadow: 0 24px 60px rgba(0,0,0,.62), 0 2px 0 rgba(255,255,255,.03) inset;
  animation: gs-search-pop .16s var(--gs-ease) both;
}
.search-suggest-hint{
  margin: 4px 2px 2px; padding: 8px 10px; border-top: 1px solid var(--sg-hair);
  color: var(--muted); font-size: 11.5px; text-align: center;
  background: var(--sg-surface-72);
  -webkit-backdrop-filter: var(--sg-blur-mini);
  backdrop-filter: var(--sg-blur-mini);
}
.search-suggest-hint kbd{
  font: inherit; font-weight: 700; color: var(--sub);
  padding: 1px 5px; border-radius: 5px; background: var(--surface2);
}
@keyframes gs-search-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.search-suggest-item{
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 46px;
  padding: 7px 9px; border: 0; border-radius: 12px; background: transparent;
  color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  transition: background-color var(--gs-fast), box-shadow var(--gs-fast);
}
.search-suggest-item:hover { background: var(--surface2); }
/* Список недавних запросов — отдельная frosted-подложка */
#screenSearch:has(.search-suggest:not([hidden])) .gs-search-hint{ visibility: hidden; }
#screenSearch .search-results.gs-search-popup-open .search-history{ display: none; }
#screenSearch .search-history{
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  border: 1px solid var(--sg-hair); border-radius: 16px;
  background: var(--sg-surface-72);
  -webkit-backdrop-filter: var(--sg-blur-card);
  backdrop-filter: var(--sg-blur-card);
}
#screenSearch .search-history .search-suggest-item{
  background: transparent; border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#screenSearch .search-history .search-suggest-item:hover{ background: var(--surface2); }

.search-suggest-item[data-search-history]{
  background: transparent; border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.search-suggest-item[data-search-history]:hover{ background: var(--surface2); }
.search-suggest-item.active{
  background: var(--sg-p16); box-shadow: inset 0 0 0 1px var(--sg-p32);
  -webkit-backdrop-filter: var(--sg-blur-chip);
  backdrop-filter: var(--sg-blur-chip);
}
.search-suggest-icon{
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: var(--sg-p16); color: var(--primary); font-size: 13px; overflow: hidden;
  -webkit-backdrop-filter: var(--sg-blur-mini);
  backdrop-filter: var(--sg-blur-mini);
}
.search-suggest-icon.user { border-radius: 50%; }
.search-suggest-icon img { width: 100%; height: 100%; object-fit: cover; }
.search-suggest-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.search-suggest-label { min-width: 0; overflow: hidden; font-size: 13.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest-sub { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest-meta { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.search-suggest-meta[data-search-remove]{ display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; }
.search-suggest-meta[data-search-remove]:hover { background: var(--surface2); color: var(--text); }
/* --- группы --- */
.search-group { margin: 0 0 20px; flex: 0 0 auto; }
.search-group-head{
  display: flex; align-items: center; gap: 9px; margin: 0 0 10px; padding: 0 2px;
  color: var(--sub); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.search-group-head::before{
  content: ''; flex: none; width: 3px; height: 12px; border-radius: 2px; background: var(--primary); opacity: .75;
}
.search-group-head > span:first-child { flex: 1; min-width: 0; }
.search-group-count { color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
.search-suggest .search-group-head { margin: 2px 4px 6px; padding: 0; }
.search-suggest .search-group-head::before { display: none; }
.search-group-body { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.search-group-body > * { flex: 0 0 auto; }
.search-results { display: block; }
/* --- карточки результатов --- */
#screenSearch .user-card{
  gap: 12px; padding: 12px 0;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color var(--gs-fast), transform var(--gs-fast);
}
@media (hover: hover) { #screenSearch .user-card:hover { background: var(--surface2); border-color: var(--border-strong); } }
#screenSearch .user-card:active { transform: translateY(1px); }
#screenSearch .user-card:focus-visible{ outline: 1px solid var(--sg-p32); outline-offset: 1px; }
#screenSearch .user-card-av { width: 44px; height: 44px; }
#screenSearch .user-card-name{ font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screenSearch .user-card-user { color: var(--muted); font-size: 12px; }
#screenSearch .user-card-posts{
  flex: none; padding: 4px 9px; border-radius: 999px; background: var(--surface2);
  color: var(--muted); font-size: 11px; white-space: nowrap;
}
#screenSearch .search-chan-av{
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px;
  background: var(--sg-p16); color: var(--primary); font-size: 16px;
  -webkit-backdrop-filter: var(--sg-blur-mini);
  backdrop-filter: var(--sg-blur-mini);
}
#screenSearch .post-card{
  margin: 0 -16px; padding: 17px 16px 11px;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0; overflow: hidden;
  background: var(--bg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.search-comment{
  position: relative; padding: 12px 0 12px 14px; border: 0;
  border-bottom: 1px solid var(--border); background: transparent; cursor: pointer;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color var(--gs-fast);
}
.search-comment::before{
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px;
  background: var(--primary); opacity: .45;
}
@media (hover: hover) { .search-comment:hover { background: var(--surface2); } }
.search-comment-text { font-size: 14px; line-height: 1.5; }
.search-comment-meta{ display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--muted); font-size: 11.5px; }
/* --- чипы хэштегов --- */
.search-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.search-chip{
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--sg-surface-72);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  -webkit-backdrop-filter: var(--sg-blur-chip);
  backdrop-filter: var(--sg-blur-chip);
  transition: background-color var(--gs-fast), border-color var(--gs-fast), color var(--gs-fast);
}
.search-chip:hover { background: var(--surface2); border-color: var(--border-strong); color: var(--primary); }
.search-chip i { color: var(--muted); font-style: normal; font-size: 11px; }
/* --- фильтры по типам --- */
.search-filters{ display: flex; gap: 6px; margin: 10px -2px 0; padding: 0 2px; overflow-x: auto; scrollbar-width: none; }
.search-filters::-webkit-scrollbar { display: none; }
.search-filter{
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--sub);
  font: inherit; font-size: 12px; font-weight: 600;
  transition: background-color var(--gs-fast), color var(--gs-fast), border-color var(--gs-fast);
}
.search-filter:hover { background: var(--surface2); color: var(--text); }
.search-filter.active { background: var(--sg-p16); border-color: var(--sg-p32); color: var(--primary); }
.search-filter b { color: var(--muted); font-size: 11px; font-weight: 700; }
.search-filter.active b { color: var(--primary); opacity: .75; }
/* --- история запросов --- */
.search-history { display: flex; flex-direction: column; gap: 6px; }
#screenSearch .search-history .search-suggest-item{
  background: var(--sg-surface-72); border: 1px solid var(--sg-hair);
  -webkit-backdrop-filter: var(--sg-blur-mini);
  backdrop-filter: var(--sg-blur-mini);
}
@media (hover: hover) { #screenSearch .search-history .search-suggest-item:hover { background: var(--surface2); } }
/* --- пусто / ошибка --- */
.search-empty,.search-error{
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 42px 24px 36px; text-align: center; border: 0;
  border-radius: 18px; background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.search-empty::before,.search-error::before{
  content: ''; position: absolute; left: 50%; top: -80px; width: 280px; height: 200px; transform: translateX(-50%);
  pointer-events: none; background: radial-gradient(ellipse at 50% 50%, var(--sg-p16), transparent 70%);
}
.search-empty-ico{
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px;
  background: var(--sg-p16); color: var(--primary); font-size: 19px;
  -webkit-backdrop-filter: var(--sg-blur-mini);
  backdrop-filter: var(--sg-blur-mini);
}
.search-empty h3,.search-error h3{ color: var(--text); font-size: 16px; font-weight: 650; margin: 0; }
.search-empty p,.search-error p{ max-width: 36ch; color: var(--sub); font-size: 13px; margin: 0; }
.search-error .search-empty-ico{ background: rgba(242,120,137,.14); color: var(--red); }
.search-retry{
  margin-top: 4px; padding: 9px 18px; border: 0; border-radius: 10px;
  background: var(--sg-surface-72); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  -webkit-backdrop-filter: var(--sg-blur-chip);
  backdrop-filter: var(--sg-blur-chip);
}
/* --- скелет загрузки --- */
.search-skeleton{ display: flex; flex-direction: column; gap: 8px; }
.search-skel-row{
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.skel.search-skel-av{ width: 44px; height: 44px; border-radius: 50%; }
.search-skel-lines{ display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 9px; }
.skel.search-skel-line{ height: 11px; border-radius: 4px; }
@media (max-width: 600px){
  .search-sticky{ margin: -4px 0 14px; padding: 8px; border-radius: 16px; }
  .search-suggest-item{ min-height: 48px; }
  .search-empty,.search-error{ padding: 34px 18px 30px; }
}