/* ESO Social — home feed, posts, reactions, comments, people, profiles. Graphite + chrome, same palette as site.css. */
.sx { display: grid; grid-template-columns: 250px minmax(0, 640px) 320px; gap: 22px; justify-content: center; max-width: 1320px; margin: 0 auto; padding: 22px 18px 60px; align-items: start; }
.sx-pf { grid-template-columns: 250px minmax(0, 940px); }
.sx-left, .sx-right { position: sticky; top: 84px; display: grid; gap: 14px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; }
.sx-main { display: grid; gap: 14px; min-width: 0; }
.sx-me { display: flex; gap: 12px; align-items: center; padding: 12px 14px; color: var(--text); text-decoration: none !important; line-height: 1.3; }
.sx-me:hover { border-color: var(--line2); }
.sx-nav { display: grid; gap: 2px; }
.sx-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; color: var(--muted); font-weight: 600; text-decoration: none; position: relative; transition: background .15s, color .15s; }
.sx-nav a:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.sx-nav a[aria-current] { background: rgba(143, 179, 217, .14); color: var(--text); }
.sx-nav a[aria-current] .ic { color: var(--acc2); }
.sx-badge { margin-inline-start: auto; background: var(--red); color: #fff; font-style: normal; font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 1px 7px; }
.sx-foot { padding-inline: 14px; }
.sx-grow { flex: 1; }
.ic-xs { width: 13px; height: 13px; vertical-align: -2px; }
.c-green { color: #7ccf8a; } .c-blue { color: #79b4ff; }

/* tabs + pills */
.sx-tabs { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.sx-tab { flex: 1; background: none; border: 0; color: var(--muted); font: inherit; font-weight: 650; padding: 9px; border-radius: 10px; cursor: pointer; transition: background .15s, color .15s; }
.sx-tab:hover { color: var(--text); }
.sx-tab.on { background: var(--metal); color: #0f1215; }
.sx-pill { position: sticky; top: 80px; z-index: 5; justify-self: center; background: var(--acc); color: #0b0d10; border: 0; border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 8px 26px rgba(0, 0, 0, .4); animation: sx-drop .3s ease; }
@keyframes sx-drop { from { transform: translateY(-10px); opacity: 0; } }

/* composer */
.sx-comp { padding: 16px; display: grid; gap: 12px; transition: box-shadow .2s, border-color .2s; }
.sx-comp.open { border-color: var(--line2); box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.sx-comp-out { display: flex; align-items: center; gap: 14px; }
.sx-comp-out p { margin: 0; }
.sx-crow { display: flex; gap: 12px; align-items: flex-start; }
.sx-ta { flex: 1; resize: none; border: 0; background: #0e1116; color: var(--text); border-radius: 22px; padding: 11px 16px; font: inherit; font-size: 1.02rem; min-height: 46px; transition: border-radius .2s; overflow: hidden; }
.sx-ta:focus { outline: 1px solid var(--line2); border-radius: 14px; }
.sx-ta.sx-bg { min-height: 220px; text-align: center; font-size: 1.6rem; font-weight: 750; padding-top: 74px; border-radius: 14px; color: #fff; }
.sx-ta.sx-bg::placeholder { color: rgba(255, 255, 255, .75); }
.sx-bgs { display: flex; gap: 8px; padding-inline-start: 52px; }
.sx-bgs[hidden] { display: none; }
.sx-bgdot { width: 28px; height: 28px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.sx-bgdot.on { border-color: #fff; transform: scale(1.08); }
.sx-bg-none { background: #0e1116; border-color: var(--line2); }
.sx-bg-sunset { background: linear-gradient(135deg, #ff7e5f, #feb47b); }
.sx-bg-ocean { background: linear-gradient(135deg, #2b5876, #4e4376); }
.sx-bg-forest { background: linear-gradient(135deg, #134e5e, #71b280); }
.sx-bg-night { background: linear-gradient(135deg, #0f2027, #2c5364); }
.sx-bg-fire { background: linear-gradient(135deg, #e52d27, #b31217); }
.sx-bg-candy { background: linear-gradient(135deg, #d53369, #daae51); }
.sx-ctools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.sx-tool { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--muted); font: inherit; font-weight: 600; font-size: .93rem; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.sx-tool:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.sx-vis { flex: none; min-width: 0; width: auto; padding: 7px 10px; font-size: .88rem; border-radius: 10px; }
.sx-postbtn { min-width: 92px; justify-content: center; }
.sx-postbtn:disabled { opacity: .45; cursor: not-allowed; }
.sx-prev { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.sx-prev:empty { display: none; }
.sx-pv { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #0e1116; }
.sx-pv img, .sx-pv video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-pvx { position: absolute; top: 6px; inset-inline-end: 6px; background: rgba(0, 0, 0, .65) !important; color: #fff !important; }
.sx-pvbadge { position: absolute; bottom: 6px; inset-inline-start: 6px; background: rgba(0, 0, 0, .65); color: #fff; font-size: .75rem; padding: 2px 7px; border-radius: 6px; display: inline-flex; gap: 4px; align-items: center; }
.sx-prog { height: 6px; background: #0e1116; border-radius: 99px; overflow: hidden; }
.sx-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), #c3dbf3); transition: width .2s; }

/* icon buttons */
.sx-ib { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--muted); cursor: pointer; flex: none; }
.sx-ib:hover { background: rgba(255, 255, 255, .07); color: var(--text); }

/* post */
.sx-feed { display: grid; gap: 14px; }
.sx-post { padding: 0; overflow: visible; animation: sx-in .35s ease both; }
@keyframes sx-in { from { opacity: 0; transform: translateY(8px); } }
.sx-post.sx-new { animation: sx-pop .5s ease both; }
@keyframes sx-pop { 0% { opacity: 0; transform: scale(.96); } 60% { transform: scale(1.01); } }
.sx-gone-anim { opacity: 0; transform: scale(.97); transition: all .25s; }
.sx-phead { display: flex; gap: 11px; align-items: center; padding: 14px 16px 6px; }
.sx-pmeta { flex: 1; min-width: 0; line-height: 1.35; }
.sx-pmeta .uname { font-weight: 700; color: var(--text); }
.sx-time { color: var(--dim) !important; }
.sx-body { padding: 4px 16px 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.02rem; }
.sx-body.sx-clip { max-height: 13.5em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.sx-post > .linkb { margin: -4px 16px 10px; }
.sx-body.sx-bg { margin: 4px 0 10px; min-height: 260px; display: grid; place-items: center; text-align: center; font-size: 1.75rem; font-weight: 800; color: #fff; padding: 40px 26px; line-height: 1.3; text-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.sx-at { font-weight: 650; }
.sx-tag { color: var(--acc2); font-weight: 600; }
.sx-media { display: grid; gap: 3px; background: #07090c; }
.sx-media.n1 { grid-template-columns: 1fr; }
.sx-media.n2 { grid-template-columns: 1fr 1fr; }
.sx-media.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.sx-media.n3 .sx-cell:first-child { grid-row: span 2; }
.sx-media.n4 { grid-template-columns: 1fr 1fr; }
.sx-media.n5 { grid-template-columns: repeat(6, 1fr); }
.sx-media.n5 .sx-cell:nth-child(-n+2) { grid-column: span 3; }
.sx-media.n5 .sx-cell:nth-child(n+3) { grid-column: span 2; }
.sx-cell { position: relative; border: 0; padding: 0; margin: 0; background: #07090c; cursor: zoom-in; overflow: hidden; display: block; min-height: 0; }
.sx-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.sx-media.n1 .sx-cell img { height: auto; max-height: 680px; object-fit: contain; aspect-ratio: auto; }
.sx-media:not(.n1) .sx-cell { aspect-ratio: 1; }
.sx-media.n3 .sx-cell:first-child { aspect-ratio: auto; }
.sx-cell:hover img { transform: scale(1.025); }
.sx-vcell { cursor: default; }
.sx-vcell video { width: 100%; max-height: 720px; display: block; background: #000; }
.sx-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; font-size: 2rem; font-weight: 800; }
.sx-embed { margin: 0 16px 12px; border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; }
.sx-post-in { border: 0; border-radius: 0; background: #11151b; animation: none; }
.sx-gone { margin: 0 16px 12px; padding: 14px; border: 1px dashed var(--line2); border-radius: 12px; }
.sx-counts { display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-height: 38px; }
.sx-rsum { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--muted); font: inherit; font-size: .9rem; cursor: pointer; padding: 0; }
.sx-rsum:hover span:last-child { text-decoration: underline; }
.sx-rems { display: inline-flex; }
.sx-rems i { font-style: normal; font-size: .95rem; width: 21px; height: 21px; display: grid; place-items: center; background: #1b2028; border: 2px solid var(--card); border-radius: 50%; margin-inline-end: -6px; }
.sx-rems i:last-child { margin-inline-end: 0; }
.sx-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-top: 1px solid var(--line); margin: 0 12px; padding: 4px 0; }
.sx-act { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: none; border: 0; color: var(--muted); font: inherit; font-weight: 650; font-size: .94rem; padding: 9px; border-radius: 10px; cursor: pointer; width: 100%; transition: background .15s, color .15s; }
.sx-act:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.sx-act:active .ic, .sx-act:active .sx-aemo { transform: scale(.85); }
.sx-aemo { font-size: 1.15rem; line-height: 1; transition: transform .15s; }
.sx-like.on { color: var(--acc2); }
.sx-like.r-love { color: #f3677d; } .sx-like.r-haha, .sx-like.r-wow, .sx-like.r-sad { color: #f7c948; } .sx-like.r-angry { color: #f08a4b; }
.sx-like.on .sx-aemo { animation: sx-boing .4s ease; }
@keyframes sx-boing { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.sx-likew { position: relative; }
.sx-picker { position: absolute; bottom: calc(100% + 6px); inset-inline-start: 0; display: flex; gap: 4px; background: #1a1f27; border: 1px solid var(--line2); border-radius: 999px; padding: 6px 8px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transform: translateY(8px) scale(.9); transform-origin: bottom left; transition: all .18s; z-index: 20; }
.sx-picker.show { opacity: 1; pointer-events: auto; transform: none; }
.sx-pick { font-size: 1.75rem; line-height: 1; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; border-radius: 50%; transition: transform .15s; padding: 0; }
.sx-pick:hover { transform: translateY(-6px) scale(1.3); }
.sx-picker.show .sx-pick { animation: sx-pickin .3s ease both; }
.sx-picker.show .sx-pick:nth-child(2) { animation-delay: .03s; } .sx-picker.show .sx-pick:nth-child(3) { animation-delay: .06s; }
.sx-picker.show .sx-pick:nth-child(4) { animation-delay: .09s; } .sx-picker.show .sx-pick:nth-child(5) { animation-delay: .12s; } .sx-picker.show .sx-pick:nth-child(6) { animation-delay: .15s; }
@keyframes sx-pickin { from { transform: translateY(12px) scale(.5); opacity: 0; } }

/* menu */
.sx-menuw { position: relative; }
.sx-menu { position: absolute; top: 100%; inset-inline-end: 0; z-index: 30; min-width: 210px; padding: 6px; display: grid; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.sx-menu[hidden] { display: none; }
.sx-mi { display: flex; gap: 10px; align-items: center; background: none; border: 0; color: var(--text); font: inherit; font-size: .93rem; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: start; }
.sx-mi:hover { background: rgba(255, 255, 255, .06); }
.sx-mi.bad { color: #f0a0a7; }

/* comments */
.sx-cbox { padding: 4px 16px 14px; display: grid; gap: 8px; }
.sx-cbox[hidden] { display: none; }
.sx-clist { display: grid; gap: 8px; }
.sx-comment { display: flex; gap: 8px; align-items: flex-start; animation: sx-in .25s ease both; }
.sx-creply { margin-inline-start: 34px; }
.sx-cmain { min-width: 0; }
.sx-bubble { position: relative; background: #1c222b; border-radius: 16px; padding: 7px 12px; display: inline-block; max-width: 100%; }
.sx-cname { font-size: .88rem; font-weight: 700; }
.sx-cname .uname { color: var(--text); }
.sx-ctext { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; }
.sx-clikes { position: absolute; bottom: -9px; inset-inline-end: -6px; background: #262d37; border-radius: 999px; padding: 0 6px; font-size: .75rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.sx-clikes i { font-style: normal; }
.sx-cacts { display: flex; gap: 12px; padding: 2px 10px; }
.sx-cacts .linkb { font-weight: 700; color: var(--muted); }
.sx-cacts .linkb.on { color: var(--acc2); }
.sx-cform { display: flex; gap: 8px; align-items: flex-end; }
.sx-cform .inp { border-radius: 18px; resize: none; padding: 8px 14px; min-height: 38px; min-width: 0; }
.sx-send { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--acc); color: #0b0d10; cursor: pointer; display: grid; place-items: center; flex: none; }
.sx-send .ic { width: 18px; height: 18px; }
.sx-replybar { padding-inline-start: 34px; }

/* right column */
.sx-search { position: relative; }
.sx-search .inp { width: 100%; border-radius: 999px; padding-inline: 16px; }
.sx-qres { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; padding: 8px; display: grid; gap: 4px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.sx-qres[hidden] { display: none; }
.sx-box { padding: 14px; }
.sx-box header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sx-box h3 { margin: 0; font-size: 1rem; }
.sx-people, .sx-plist { display: grid; gap: 4px; }
.sx-plist { max-height: 60vh; overflow-y: auto; }
.sx-person { display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: 12px; }
.sx-person:hover { background: rgba(255, 255, 255, .03); }
.sx-pinfo { flex: 1; min-width: 0; line-height: 1.3; }
.sx-pinfo .uname { color: var(--text); font-weight: 650; }
.sx-pinfo > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-following { min-width: 96px; justify-content: center; }
.sx-remo { font-size: 1.1rem; margin-inline-start: -22px; margin-top: 22px; z-index: 1; }
.sx-notifs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 420px; overflow-y: auto; }
.sx-notifs a { display: flex; gap: 10px; padding: 8px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: .9rem; line-height: 1.35; }
.sx-notifs a:hover { background: rgba(255, 255, 255, .04); }
.sx-notifs li.unread a { background: rgba(143, 179, 217, .08); }
.sx-notifs li.unread a::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); flex: none; margin-top: 6px; margin-inline-start: auto; }
.sx-rtabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px; }
.sx-rtab { background: none; border: 0; color: var(--muted); font: inherit; font-weight: 650; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.sx-rtab.on { background: rgba(143, 179, 217, .14); color: var(--text); }

/* empty / skeleton / end */
.sx-empty { text-align: center; padding: 40px 20px; }
.sx-end { text-align: center; color: var(--dim); font-size: .9rem; min-height: 30px; }
.sx-back { justify-self: start; }
.sx-skel { background: linear-gradient(90deg, #161b22 25%, #1e242d 50%, #161b22 75%); background-size: 200% 100%; animation: sx-sh 1.3s infinite linear; border-radius: 10px; }
@keyframes sx-sh { to { background-position: -200% 0; } }
.sx-skel-post { padding: 16px; display: grid; gap: 10px; }
.sx-sk1 { height: 40px; width: 45%; } .sx-sk2 { height: 16px; width: 85%; } .sx-sk3 { height: 220px; }

/* modal + lightbox + toast */
.sx-modal { position: fixed; inset: 0; z-index: 200; background: rgba(4, 6, 9, .72); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; animation: sx-fade .2s ease; }
@keyframes sx-fade { from { opacity: 0; } }
.sx-mbox { width: min(480px, 100%); max-height: 88vh; overflow-y: auto; padding: 16px; animation: sx-pop .25s ease; }
.sx-mwide { width: min(640px, 100%); }
.sx-mhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sx-mhead h3 { margin: 0; }
.sx-sharebox, .sx-editbox { display: grid; gap: 12px; }
.sx-sharebox .sx-embed { margin: 0; max-height: 40vh; overflow-y: auto; }
.sx-pmodal .sx-post { border: 0; background: none; }
.sx-lb { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .94); animation: sx-fade .2s ease; }
.sx-lbstage { position: absolute; inset: 48px 64px; display: grid; place-items: center; }
.sx-lbstage img, .sx-lbstage video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.sx-lbx { position: absolute; top: 10px; inset-inline-end: 10px; color: #fff !important; }
.sx-lbp, .sx-lbn { position: absolute; top: 50%; transform: translateY(-50%); color: #fff !important; background: rgba(255, 255, 255, .1) !important; width: 46px; height: 46px; }
.sx-lbp { left: 10px; } .sx-lbn { right: 10px; }
.sx-lbcnt { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); color: #ccd; font-size: .9rem; }
.sx-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 400; background: #e8edf2; color: #0b0d10; padding: 11px 18px; border-radius: 12px; font-weight: 650;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45); animation: sx-up .25s ease; transition: opacity .4s, transform .4s; }
.sx-toast.bad { background: #f3b2b8; }
.sx-toast.go { opacity: 0; transform: translate(-50%, 10px); }
@keyframes sx-up { from { opacity: 0; transform: translate(-50%, 12px); } }

/* ── profile ── */
.pf2 { display: grid; gap: 14px; }
.pf2-head { padding: 0; overflow: hidden; }
.pf2-cover { height: clamp(150px, 26vw, 300px); position: relative; background: #11151b; overflow: hidden; border-radius: var(--r) var(--r) 0 0; }
.pf2-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf2-cover-def { background: radial-gradient(1200px 300px at 20% 0%, rgba(143, 179, 217, .45), transparent 60%), radial-gradient(900px 300px at 90% 100%, rgba(198, 120, 221, .35), transparent 60%), linear-gradient(135deg, #141a22, #1d2633); }
.pf2-coverbtn { position: absolute; bottom: 12px; inset-inline-end: 12px; background: rgba(10, 12, 16, .7) !important; backdrop-filter: blur(6px); }
.pf2-row { display: flex; gap: 18px; align-items: flex-end; padding: 0 24px; margin-top: -56px; position: relative; flex-wrap: wrap; }
.pf2-av { width: 148px !important; height: 148px !important; font-size: 3.4rem !important; border: 5px solid var(--card2); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.pf2-who { flex: 1; min-width: 200px; padding-bottom: 6px; }
.pf2-name { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf2-name .bdg { width: 24px; height: 24px; }
.pf2-handle { margin: 2px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pf2-acts { display: flex; gap: 8px; align-items: center; padding-bottom: 10px; flex-wrap: wrap; }
.pf2-acts .btn .ic { width: 16px; height: 16px; }
.pf2-ib { border: 1px solid var(--line2); }
.pf2-bio { padding: 6px 24px 0; margin: 0; white-space: pre-wrap; max-width: 70ch; }
.pf2-facts { display: flex; gap: 18px; flex-wrap: wrap; padding: 10px 24px 0; }
.pf2-facts > * { display: inline-flex; gap: 6px; align-items: center; }
.pf2-stats { display: flex; gap: 8px; padding: 14px 24px 18px; flex-wrap: wrap; }
.pf2-stats > * { display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 10px 14px; border-radius: 14px; background: #10141a; border: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; }
.pf2-stats > div { cursor: default; }
.pf2-stats > button:hover { border-color: var(--line2); background: #131820; }
.pf2-stats strong { font-size: 1.3rem; line-height: 1.2; }
.pf2-stats span { color: var(--muted); font-size: .85rem; }
.pf2-mutual { display: flex; align-items: center; gap: 8px; padding: 0 24px 18px; margin: -6px 0 0; }
.pf2-mav { display: inline-flex; }
.pf2-mav .av { border: 2px solid var(--card); margin-inline-end: -8px; }
.pf2-tabs { display: flex; gap: 4px; justify-content: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px; position: sticky; top: 74px; z-index: 6; }
.pf2-tab { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 8px; background: none; border: 0; color: var(--muted); font: inherit; font-weight: 650; padding: 10px; border-radius: 10px; cursor: pointer; }
.pf2-tab .ic { width: 18px; height: 18px; }
.pf2-tab.on { background: var(--metal); color: #0f1215; }
.pf2-body { display: grid; gap: 14px; }
.pf2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pf2-cell { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: #0e1116; cursor: pointer; overflow: hidden; border-radius: 4px; }
.pf2-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.pf2-cell:hover img { transform: scale(1.05); }
.pf2-badge { position: absolute; top: 8px; inset-inline-end: 8px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8)); }
.pf2-badge .ic-xs { width: 18px; height: 18px; }
.pf2-hover { position: absolute; inset: 0; display: flex; gap: 18px; justify-content: center; align-items: center; background: rgba(0, 0, 0, .45); color: #fff; font-weight: 800; opacity: 0; transition: opacity .2s; }
.pf2-cell:hover .pf2-hover, .pf2-cell:focus-visible .pf2-hover { opacity: 1; }
.pf2-grid .sx-empty { grid-column: 1 / -1; }
.pf2-about { display: grid; gap: 8px; }
.pf2-alist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pf2-alist li { display: flex; gap: 10px; align-items: center; color: var(--muted); }

@media (max-width: 1180px) {
  .sx { grid-template-columns: 220px minmax(0, 640px); }
  .sx-right { display: none; }
}
@media (max-width: 860px) {
  .sx, .sx-pf { grid-template-columns: minmax(0, 1fr); padding: 12px 10px 70px; }
  .sx-left { position: fixed; bottom: 0; left: 0; right: 0; top: auto; z-index: 50; max-height: none; background: rgba(11, 13, 16, .94); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 4px; overflow: visible; }
  .sx-me, .sx-foot { display: none !important; }
  .sx-nav { grid-auto-flow: column; justify-content: space-around; }
  .sx-nav a { flex-direction: column; gap: 2px; padding: 6px 8px; font-size: .68rem; }
  .sx-nav a span { white-space: nowrap; }
  .sx-badge { position: absolute; top: 0; right: 0; }
  .pf2-row { padding: 0 14px; margin-top: -46px; }
  .pf2-av { width: 110px !important; height: 110px !important; }
  .pf2-stats > * { min-width: 0; flex: 1; }
  .sx-lbstage { inset: 48px 8px; }
}
@media (prefers-reduced-motion: reduce) { .sx-post, .sx-comment, .sx-pick { animation: none !important; } }
@media (max-width: 600px) {
  .pf2-coverbtn { top: 10px; bottom: auto !important; width: auto !important; padding: 8px 10px !important; }
  .pf2-coverbtn span { display: none; }
  .pf2-tab { white-space: nowrap; font-size: .88rem; padding: 10px 6px; gap: 6px; }
  .pf2-tab .ic { display: none; }
}
/* side columns never grow past their track (the people-search box used to push the right column 45px wider and get clipped) */
.sx-left, .sx-right { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.sx-right > *, .sx-left > * { max-width: 100%; }
.sx-search .inp { display: block; width: 100%; min-width: 0; }
.sx-people, .sx-plist, .sx-box { grid-template-columns: minmax(0, 1fr); }
.sx-person > div { min-width: 0; flex: 1; }
.sx-person > div > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-person > button, .sx-person > .btn { flex: none; }