/* Original stylesheet. Base component styles; Frame tokens below and refinements in frame.css. */
/* Frame tokens (original palette, see DESIGN.md §0). Internal theme keys: dark = Carbon, light = Paper, dim = Dusk. */
/* Minimal purple pass (DESIGN.md §0): neutral greys with a faint violet cast; purple is reserved for --accent. */
:root, [data-theme="dark"] {
  --bg: #0E0E11; --bg-elev: #16161A; --surface-1: #16161A; --surface-2: #1F1E24; --text: #F4F3F7; --muted: #A09DAA; --text-3: #75727E; --border: #26252C; --border-strong: #35343C;
  --hover: rgba(244,243,247,.06); --row-hover: rgba(244,243,247,.025); --card: #16161A; --input: #1A1A1F;
  --overlay: rgba(8,8,11,.7); --btn-bg: #F4F3F7; --btn-text: #0E0E11; --shadow: 0 16px 40px rgba(0,0,0,.55);
  --blur-bg: rgba(14,14,17,.82); --like: #FF6B8A; --link: var(--accent-ink); --success: #4ADE80; --warning: #FFB547; --danger: #FF6B6B; --track: .005em;
}
[data-theme="dim"] {
  --bg: #15131B; --bg-elev: #1D1A25; --surface-1: #1D1A25; --surface-2: #27232F; --text: #F3F0F8; --muted: #A7A0B4; --text-3: #7A7387; --border: #2E2A38; --border-strong: #3D3849;
  --hover: rgba(243,240,248,.06); --row-hover: rgba(243,240,248,.025); --card: #1D1A25; --input: #211E29;
  --overlay: rgba(10,9,14,.7); --btn-bg: #F3F0F8; --btn-text: #15131B; --shadow: 0 16px 40px rgba(0,0,0,.5);
  --blur-bg: rgba(21,19,27,.84); --like: #FF7A95; --link: var(--accent-ink); --success: #4ADE80; --warning: #FFB547; --danger: #FF7474; --track: .005em;
}
[data-theme="light"] {
  --bg: #FFFFFF; --bg-elev: #FFFFFF; --surface-1: #F6F5F9; --surface-2: #EDECF2; --text: #131218; --muted: #5F5C69; --text-3: #8A8794; --border: #E8E7ED; --border-strong: #D3D1DA;
  --hover: rgba(19,18,24,.05); --row-hover: rgba(19,18,24,.02); --card: #FFFFFF; --input: #F6F5F9;
  --overlay: rgba(19,18,24,.36); --btn-bg: #131218; --btn-text: #FFFFFF; --shadow: 0 16px 40px rgba(19,18,24,.12), 0 0 0 1px rgba(19,18,24,.05);
  --blur-bg: rgba(255,255,255,.88); --like: #D6335C; --link: var(--accent-ink); --success: #1F8F4E; --warning: #A86400; --danger: #C9302C; --track: 0;
}
:root { --accent: #7C5CFF; --repost: var(--success); --fs: 15px; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: var(--fs); line-height: 1.3333; -webkit-font-smoothing: antialiased; overflow-y: scroll; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
svg { display: block; }
.ic svg { width: 1.25em; height: 1.25em; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.bold { font-weight: 700; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.link { color: var(--accent); } .link:hover { text-decoration: underline; }
.sample-tag { font-size: 11px; border: 1px solid var(--border); color: var(--muted); border-radius: 4px; padding: 0 4px; margin-left: 4px; font-weight: 400; }

/* ---------- layout ---------- */
.layout { display: flex; justify-content: center; min-height: 100vh; }
.sidenav { width: 275px; flex-shrink: 0; display: flex; justify-content: flex-end; }
.sidenav-inner { position: sticky; top: 0; height: 100vh; width: 275px; padding: 0 12px 0 8px; display: flex; flex-direction: column; overflow-y: auto; }
.primary { width: 600px; flex-shrink: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); min-height: 100vh; }
.sidebar { width: 350px; margin-left: 30px; margin-right: 10px; flex-shrink: 0; }
.sidebar-inner { position: sticky; top: 0; padding-bottom: 60px; }
.layout.wide .primary { width: 990px; display: flex; }
.layout.wide .sidebar { display: none; }

.logo { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin: 2px 0; }
.logo:hover { background: var(--hover); }
.logo svg { width: 30px; height: 30px; }
.nav-item { display: flex; padding: 4px 0; }
.nav-item > span { display: inline-flex; align-items: center; gap: 20px; padding: 12px; border-radius: 9999px; font-size: 20px; line-height: 24px; transition: background .2s; }
.nav-item:hover > span { background: var(--hover); }
.nav-item .ic svg { width: 26px; height: 26px; stroke-width: 1.75; }
.nav-item.active { font-weight: 700; } .nav-item.active .ic svg { stroke-width: 2.6; }
.nav-icon { position: relative; }
.badge { position: absolute; top: -6px; right: -8px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 1px solid var(--bg); }
.post-btn { margin: 16px 0; width: 90%; height: 52px; border-radius: 9999px; background: var(--btn-bg); color: var(--btn-text); font-size: 17px; font-weight: 700; box-shadow: rgba(0,0,0,.08) 0 8px 28px; }
.post-btn:hover { opacity: .9; }
.post-btn .ic { display: none; }
.account-switch { margin: auto 0 12px; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 9999px; width: 100%; text-align: left; }
.account-switch:hover { background: var(--hover); }
.account-switch .names { flex: 1; min-width: 0; line-height: 20px; }

/* sticky headers */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--blur-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.topbar-row { display: flex; align-items: center; min-height: 53px; padding: 0 16px; gap: 24px; }
.topbar h2 { font-size: 20px; line-height: 24px; margin: 0; font-weight: 700; }
.topbar .sub { font-size: 13px; color: var(--muted); }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-btn:hover { background: var(--hover); }
.icon-btn .ic svg { width: 20px; height: 20px; }
.tabs { display: flex; }
.tab { flex: 1; display: flex; justify-content: center; height: 53px; color: var(--muted); font-weight: 500; position: relative; min-width: 56px; padding: 0 16px; }
.tab:hover { background: var(--hover); }
.tab > span { display: flex; align-items: center; position: relative; height: 100%; white-space: nowrap; }
.tab.active { color: var(--text); font-weight: 700; }
.tab.active > span::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; border-radius: 9999px; background: var(--accent); }
.tabs.scroll { overflow-x: auto; scrollbar-width: none; } .tabs.scroll .tab { flex: 0 0 auto; }

/* ---------- avatars & buttons ---------- */
.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; background: var(--muted); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 32px; height: 32px; font-size: 14px; } .avatar.xs { width: 24px; height: 24px; font-size: 11px; }
.avatar.lg { width: 134px; height: 134px; font-size: 54px; border: 4px solid var(--bg); }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 9999px; font-weight: 700; font-size: 15px; white-space: nowrap; transition: background .2s, opacity .2s; }
.btn-primary { background: var(--btn-bg); color: var(--btn-text); } .btn-primary:hover { opacity: .9; }
.btn-accent { background: var(--accent); color: #fff; } .btn-accent:hover { filter: brightness(.92); }
.btn-outline { border: 1px solid var(--border-strong); color: var(--text); } .btn-outline:hover { background: var(--hover); }
.btn-danger { background: var(--danger); color: #fff; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn-lg { height: 52px; font-size: 17px; width: 100%; }
.btn-sm { height: 32px; font-size: 14px; padding: 0 14px; }
.follow-btn.following:hover { border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.follow-btn.following:hover .lbl { display: none; } .follow-btn.following:hover::after { content: "Unfollow"; }
.follow-btn.following { min-width: 104px; }
.verified { display: inline-flex; vertical-align: -3px; margin-left: 2px; } .verified svg { width: 18px; height: 18px; }

/* ---------- composer ---------- */
.composer { display: flex; gap: 12px; padding: 12px 16px 8px; border-bottom: 1px solid var(--border); }
.composer .c-body { flex: 1; min-width: 0; }
.composer textarea { width: 100%; background: none; border: 0; outline: none; resize: none; font-size: 20px; line-height: 24px; padding: 8px 0; min-height: 52px; color: var(--text); }
.composer textarea::placeholder { color: var(--muted); }
.composer .c-toolbar { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
.composer.collapsed .c-toolbar { border-top-color: transparent; }
.c-tools { display: flex; margin-left: -8px; }
.c-tools .icon-btn { color: var(--accent); width: 34px; height: 34px; } .c-tools .icon-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.c-tools .icon-btn[disabled] { opacity: .5; }
.c-right { display: flex; align-items: center; gap: 12px; }
.c-ring { position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); }
.c-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.c-ring.over { color: var(--danger); }
.c-sep { width: 1px; height: 30px; background: var(--border-strong); }
.c-media { position: relative; margin: 8px 0; border-radius: 16px; overflow: hidden; }
.c-media img { width: 100%; display: block; max-height: 500px; object-fit: cover; }
.c-media .icon-btn { position: absolute; top: 4px; left: 4px; background: rgba(15,20,25,.75); color: #fff; }
.reply-audience { color: var(--accent); font-weight: 700; font-size: 14px; padding-bottom: 4px; }
.poll-editor { border: 1px solid var(--border); border-radius: 16px; margin: 8px 0; }
.poll-editor .opts { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.poll-editor .row { display: flex; gap: 8px; align-items: center; }
.field { position: relative; border: 1px solid var(--border-strong); border-radius: 4px; flex: 1; }
.field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field label { position: absolute; left: 8px; top: 6px; font-size: 13px; color: var(--muted); pointer-events: none; }
.field:focus-within label { color: var(--accent); }
.field input, .field textarea, .field select { width: 100%; border: 0; outline: none; background: transparent; padding: 26px 8px 8px; font-size: 17px; resize: vertical; }
.field select option { background: var(--bg); }
.field .count { position: absolute; right: 8px; top: 6px; font-size: 13px; color: var(--muted); display: none; } .field:focus-within .count { display: block; }
.poll-editor .dur { border-top: 1px solid var(--border); padding: 12px; }
.poll-editor .dur .row .field { flex: 1; }
.poll-editor .remove { border-top: 1px solid var(--border); width: 100%; padding: 16px; color: var(--danger); }
.poll-editor .remove:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.emoji-pop { display: grid; grid-template-columns: repeat(8, 36px); gap: 2px; padding: 8px; font-size: 22px; }
.emoji-pop button { width: 36px; height: 36px; border-radius: 50%; } .emoji-pop button:hover { background: var(--hover); }

/* ---------- posts ---------- */
.post { padding: 12px 16px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .2s; display: block; }
.post:hover { background: var(--row-hover); }
.post.no-border { border-bottom: 0; }
.post-ctx { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; font-weight: 700; margin-bottom: 2px; padding-left: 20px; }
.post-ctx .ic svg { width: 16px; height: 16px; } .post-ctx a:hover { text-decoration: underline; }
.post-row { display: flex; gap: 12px; }
.post-left { display: flex; flex-direction: column; align-items: center; }
.thread-line { width: 2px; background: var(--border-strong); flex: 1; margin-top: 4px; min-height: 8px; }
.post-body { flex: 1; min-width: 0; padding-bottom: 12px; }
.post-head { display: flex; align-items: center; gap: 4px; line-height: 20px; }
.post-head .name { font-weight: 700; } .post-head .name:hover { text-decoration: underline; }
.post-head .meta { display: flex; gap: 4px; min-width: 0; color: var(--muted); }
.post-head time:hover { text-decoration: underline; }
.post-head .more { margin-left: auto; color: var(--muted); margin-top: -8px; margin-bottom: -8px; width: 34px; height: 34px; }
.post-head .more:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.replying { color: var(--muted); margin: 2px 0; } .replying a { color: var(--accent); }
.post-text { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; line-height: 20px; }
.post-text a { color: var(--accent); } .post-text a:hover { text-decoration: underline; }
.post-media { margin-top: 12px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.post-media img { width: 100%; display: block; max-height: 510px; object-fit: cover; }
.quote-card { margin-top: 12px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; padding: 12px; transition: background .2s; }
.quote-card:hover { background: var(--row-hover); }
.quote-card .post-head { margin-bottom: 2px; } .quote-card .post-media { margin: 8px -12px -12px; border: 0; border-radius: 0; border-top: 1px solid var(--border); }
.post-actions { display: flex; justify-content: space-between; margin-top: 12px; max-width: 100%; color: var(--muted); }
.act { display: inline-flex; align-items: center; font-size: 13px; color: var(--muted); }
.act .bubble { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin: -8px 0 -8px -8px; transition: background .2s, color .2s; }
.act .ic svg { width: 18.75px; height: 18.75px; }
.act .n { padding: 0 12px 0 2px; min-width: 1ch; }
.act.reply:hover, .act.views:hover, .act.share:hover, .act.bm:hover { color: var(--accent); }
.act.reply:hover .bubble, .act.views:hover .bubble, .act.share:hover .bubble, .act.bm:hover .bubble { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.act.rt:hover, .act.rt.on { color: var(--repost); } .act.rt:hover .bubble { background: color-mix(in srgb, var(--repost) 12%, transparent); }
.act.like:hover, .act.like.on { color: var(--like); } .act.like:hover .bubble { background: color-mix(in srgb, var(--like) 12%, transparent); }
.act.like.on svg { fill: var(--like); }
.act.bm.on { color: var(--accent); } .act.bm.on svg { fill: var(--accent); }
.act.like.pop svg { animation: pop .35s ease; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
.act-group { display: flex; }
.poll { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.poll-opt { border: 1px solid var(--accent); color: var(--accent); border-radius: 9999px; height: 32px; font-weight: 700; width: 100%; }
.poll-opt:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.poll-res { position: relative; height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 6px; overflow: hidden; }
.poll-res .bar { position: absolute; inset: 0 auto 0 0; background: var(--hover); border-radius: 6px; }
.poll-res.win .bar { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.poll-res span { position: relative; } .poll-res.win span { font-weight: 700; }
.poll-meta { color: var(--muted); font-size: 15px; }

/* post detail */
.detail { padding: 12px 16px 0; }
.detail .post-head { margin-bottom: 12px; }
.detail .post-text { font-size: 17px; line-height: 24px; }
.detail .stamp { color: var(--muted); padding: 16px 0; border-bottom: 1px solid var(--border); }
.detail .stamp a:hover { text-decoration: underline; }
.detail .stats { display: flex; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.detail .stats a:hover { text-decoration: underline; }
.detail .post-actions { margin: 0; padding: 4px 4px; border-bottom: 1px solid var(--border); height: 48px; align-items: center; }
.detail .act .ic svg { width: 22.5px; height: 22.5px; }
.reply-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }

/* ---------- sidebar ---------- */
.search-wrap { position: sticky; top: 0; background: var(--bg); padding: 4px 0 12px; z-index: 5; }
.searchbox { display: flex; align-items: center; gap: 12px; height: 44px; border-radius: 9999px; background: var(--input); border: 1px solid transparent; padding: 0 16px; color: var(--muted); }
.searchbox:focus-within { border-color: var(--accent); background: var(--bg); color: var(--accent); }
.searchbox input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font-size: 15px; }
.searchbox .ic svg { width: 18px; height: 18px; }
.card { border: 1px solid var(--border); border-radius: 16px; margin-bottom: 16px; overflow: hidden; }
.card h3 { font-size: 20px; font-weight: 800; margin: 0; padding: 12px 16px; }
.card .row { padding: 12px 16px; display: flex; gap: 12px; align-items: center; transition: background .2s; cursor: pointer; }
.card .row:hover { background: var(--row-hover); }
.card .more-link { display: block; padding: 16px; color: var(--accent); } .card .more-link:hover { background: var(--row-hover); }
.trend { padding: 12px 16px; display: flex; justify-content: space-between; cursor: pointer; transition: background .2s; }
.trend:hover { background: var(--row-hover); }
.trend .cat, .trend .cnt { font-size: 13px; color: var(--muted); }
.trend .tag { font-weight: 700; margin: 2px 0; }
.trend .rank { color: var(--muted); font-size: 13px; }
.footer { font-size: 13px; color: var(--muted); padding: 0 16px; line-height: 20px; }
.footer a:hover { text-decoration: underline; }

/* user rows */
.user-row { display: flex; gap: 12px; padding: 12px 16px; cursor: pointer; transition: background .2s; }
.user-row:hover { background: var(--row-hover); }
.user-row .info { flex: 1; min-width: 0; }
.user-row .top { display: flex; align-items: center; gap: 8px; }
.user-row .names { flex: 1; min-width: 0; line-height: 20px; }
.user-row .bio { margin-top: 4px; }
.fy { background: var(--input); color: var(--muted); font-size: 12px; padding: 1px 4px; border-radius: 4px; margin-left: 4px; font-weight: 400; }

/* ---------- profile ---------- */
.banner { height: 200px; background-size: cover; background-position: center; }
.profile-head { padding: 12px 16px 0; }
.profile-top { display: flex; justify-content: space-between; align-items: flex-start; height: 70px; }
.profile-top .avatar { margin-top: -82px; }
.profile-actions { display: flex; gap: 8px; }
.profile-name { font-size: 20px; font-weight: 800; line-height: 24px; margin-top: 4px; }
.profile-bio { margin: 12px 0; white-space: pre-wrap; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); }
.profile-meta span { display: inline-flex; align-items: center; gap: 4px; } .profile-meta .ic svg { width: 18px; height: 18px; }
.profile-counts { display: flex; gap: 20px; margin: 12px 0; } .profile-counts a:hover { text-decoration: underline; }
.known { color: var(--muted); font-size: 13px; margin-bottom: 12px; display: flex; gap: 8px; align-items: center; }

/* ---------- notifications ---------- */
.notif { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.notif:hover { background: var(--row-hover); }
.notif.unread { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.notif .n-icon { width: 40px; display: flex; justify-content: flex-end; }
.notif .n-icon svg { width: 30px; height: 30px; }
.n-icon.like { color: var(--like); } .n-icon.like svg { fill: var(--like); }
.n-icon.repost { color: var(--repost); } .n-icon.follow { color: var(--accent); } .n-icon.follow svg { fill: var(--accent); }
.notif .n-body { flex: 1; min-width: 0; }
.notif .avs { display: flex; gap: 4px; margin-bottom: 8px; }
.notif .n-text { margin-top: 8px; color: var(--muted); }

/* ---------- messages ---------- */
.dm-list { width: 390px; border-right: 1px solid var(--border); flex-shrink: 0; min-height: 100vh; }
.dm-thread { flex: 1; display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; min-width: 0; }
.dm-item { display: flex; gap: 12px; padding: 16px; cursor: pointer; border-right: 2px solid transparent; }
.dm-item:hover { background: var(--row-hover); }
.dm-item.active { background: var(--card); border-right-color: var(--accent); }
.dm-item .info { flex: 1; min-width: 0; }
.dm-item.unread .preview { color: var(--text); font-weight: 700; }
.dm-empty { margin: auto; max-width: 400px; padding: 32px; }
.dm-empty h2 { font-size: 31px; line-height: 36px; margin: 0 0 8px; font-weight: 800; }
.dm-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.dm-profile { text-align: center; padding: 20px 16px 48px; border-bottom: 1px solid var(--border); margin: -16px -16px 16px; cursor: pointer; }
.dm-profile:hover { background: var(--row-hover); }
.bubble-row { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 8px; }
.bubble-row.mine { align-items: flex-end; }
.msg { max-width: 75%; padding: 12px 16px; border-radius: 24px 24px 24px 4px; background: var(--input); white-space: pre-wrap; overflow-wrap: anywhere; }
.mine .msg { background: var(--accent); color: #fff; border-radius: 24px 24px 4px 24px; }
.msg-time { font-size: 13px; color: var(--muted); margin-top: 4px; }
.dm-compose { border-top: 1px solid var(--border); padding: 4px 12px; display: flex; align-items: center; gap: 4px; }
.dm-compose .box { flex: 1; display: flex; align-items: center; background: var(--input); border-radius: 16px; padding: 4px 4px 4px 12px; margin: 4px 0; }
.dm-compose textarea { flex: 1; background: none; border: 0; outline: none; resize: none; padding: 8px 4px; max-height: 160px; height: 36px; }
.dm-compose .icon-btn { color: var(--accent); }

/* ---------- lists / communities ---------- */
.list-row { display: flex; gap: 12px; padding: 12px 16px; align-items: center; cursor: pointer; }
.list-row:hover { background: var(--row-hover); }
.list-thumb { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.section-title { font-size: 20px; font-weight: 800; padding: 12px 16px; margin: 0; }
.hero-banner { height: 190px; }
.center-head { text-align: center; padding: 12px 16px 16px; border-bottom: 1px solid var(--border); }
.center-head h2 { font-size: 20px; margin: 8px 0 4px; }
.comm-card { display: flex; gap: 12px; padding: 12px 16px; cursor: pointer; align-items: center; }
.comm-card:hover { background: var(--row-hover); }
.comm-thumb { width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0; }
.facepile { display: flex; } .facepile .avatar { border: 2px solid var(--bg); margin-left: -6px; } .facepile .avatar:first-child { margin-left: 0; }

/* ---------- settings ---------- */
.set-nav { width: 390px; border-right: 1px solid var(--border); flex-shrink: 0; min-height: 100vh; }
.set-main { flex: 1; min-width: 0; }
.set-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; cursor: pointer; gap: 12px; }
.set-item:hover { background: var(--row-hover); }
.set-item.active { background: var(--card); border-right: 2px solid var(--accent); }
.set-item .ic { color: var(--muted); }
.set-item .left { display: flex; gap: 16px; align-items: center; }
.set-desc { color: var(--muted); font-size: 13px; padding: 0 16px 12px; }
.set-section { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.set-section h3 { margin: 0 0 12px; font-size: 20px; font-weight: 800; }
.toggle-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 16px; cursor: pointer; }
.toggle-row:hover { background: var(--row-hover); }
.checkbox { width: 20px; height: 20px; border: 2px solid var(--border-strong); border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.checkbox.on { background: var(--accent); border-color: var(--accent); color: #fff; } .checkbox svg { width: 14px; height: 14px; stroke-width: 3; }
.swatches { display: flex; justify-content: space-around; padding: 8px 0; }
.swatch { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.theme-opts { display: flex; gap: 12px; }
.theme-opt { flex: 1; height: 64px; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: 700; border: 1px solid var(--border-strong); }
.theme-opt.on { border: 2px solid var(--accent); }
.fs-slider { display: flex; align-items: center; gap: 16px; padding: 8px 0; }
.fs-slider input { flex: 1; accent-color: var(--accent); }
.preview-post { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin: 8px 0; }
.form { display: flex; flex-direction: column; gap: 20px; padding: 16px; }
.err { color: var(--danger); font-size: 14px; }

/* ---------- modal / popovers / toast ---------- */
.modal-back { position: fixed; inset: 0; background: var(--overlay); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding-top: 5vh; overflow-y: auto; }
.modal { background: var(--bg); border-radius: 16px; width: 600px; max-width: 96vw; margin-bottom: 5vh; overflow: hidden; }
.modal.narrow { width: 400px; } .modal.auth { width: 600px; min-height: 400px; }
.modal-head { display: flex; align-items: center; gap: 24px; height: 53px; padding: 0 16px; position: sticky; top: 0; background: var(--blur-bg); backdrop-filter: blur(12px); z-index: 2; }
.modal-head h2 { font-size: 20px; margin: 0; flex: 1; }
.modal .composer { border-bottom: 0; }
.confirm { padding: 32px; } .confirm h2 { margin: 0 0 8px; font-size: 20px; } .confirm p { color: var(--muted); margin: 0 0 24px; }
.confirm .btn { width: 100%; height: 44px; margin-bottom: 12px; }
.popover { position: absolute; z-index: 120; background: var(--bg); border-radius: 12px; box-shadow: var(--shadow); min-width: 260px; max-width: 380px; overflow: hidden; padding: 4px 0; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-weight: 700; width: 100%; text-align: left; }
.menu-item:hover { background: var(--row-hover); }
.menu-item.danger { color: var(--danger); }
.menu-item .ic svg { width: 18.75px; height: 18.75px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 12px 16px; border-radius: 4px; z-index: 200; display: flex; gap: 24px; box-shadow: rgba(0,0,0,.3) 0 4px 12px; animation: fadein .2s; }
.toast a { font-weight: 700; } .toast a:hover { text-decoration: underline; }
@keyframes fadein { from { opacity: 0; transform: translate(-50%, 10px); } }
.empty { padding: 32px; max-width: 400px; margin: 32px auto; }
.empty h2 { font-size: 31px; line-height: 36px; font-weight: 800; margin: 0 0 8px; }
.empty p { color: var(--muted); margin: 0 0 28px; }
.spinner { width: 26px; height: 26px; border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 24px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.show-more { display: block; padding: 16px; color: var(--accent); text-align: left; width: 100%; } .show-more:hover { background: var(--row-hover); }
.new-posts-pill { position: sticky; top: 110px; z-index: 9; display: flex; justify-content: center; height: 0; }
.new-posts-pill button { background: var(--accent); color: #fff; padding: 8px 16px; border-radius: 9999px; font-weight: 700; box-shadow: rgba(0,0,0,.3) 0 2px 8px; height: 36px; }

/* ---------- landing / auth ---------- */
.landing { display: flex; min-height: 100vh; align-items: center; }
.landing .big-logo { flex: 1; display: flex; align-items: center; justify-content: center; }
.landing .big-logo svg { width: 55%; max-width: 380px; height: auto; }
.landing .right { flex: 1; padding: 16px 36px; max-width: 760px; }
.landing h1 { font-size: 64px; line-height: 84px; font-weight: 800; margin: 48px 0; letter-spacing: -1.2px; }
.landing h3 { font-size: 31px; font-weight: 800; margin: 0 0 32px; }
.landing .cta { width: 300px; display: flex; flex-direction: column; gap: 8px; }
.landing .cta .btn { height: 40px; }
.landing .fine { font-size: 11px; color: var(--muted); margin: 4px 0 12px; }
.landing .note { margin-top: 40px; color: var(--muted); font-size: 13px; max-width: 420px; }
.auth-body { padding: 0 80px 48px; }
.auth-body h2 { font-size: 31px; line-height: 36px; margin: 20px 0 28px; font-weight: 800; }
.auth-body .field { margin-bottom: 20px; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .sidenav, .sidenav-inner { width: 88px; } .sidenav-inner { align-items: center; padding: 0 4px; }
  .nav-item .lbl, .account-switch .names, .account-switch > .ic { display: none; }
  .post-btn { width: 52px; height: 52px; } .post-btn .lbl { display: none; } .post-btn .ic { display: flex; justify-content: center; }
  .account-switch { width: auto; }
}
@media (max-width: 1020px) { .sidebar { display: none; } .layout.wide .primary { width: 100%; max-width: 920px; } }
@media (max-width: 700px) {
  .sidenav { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 53px; z-index: 50; background: var(--bg); border-top: 1px solid var(--border); }
  .sidenav-inner { flex-direction: row; height: 53px; width: 100%; justify-content: space-around; position: static; overflow: visible; }
  .logo, .account-switch, .nav-item.opt { display: none; }
  .post-btn { position: fixed; right: 16px; bottom: 70px; margin: 0; width: 56px; height: 56px; background: var(--accent); color: #fff; }
  .primary { width: 100%; border: 0; padding-bottom: 60px; } .dm-list, .set-nav { width: 100%; }
  .layout.wide .dm-thread, .layout.wide .set-main { display: none; } .layout.wide.detail-open .dm-list, .layout.wide.detail-open .set-nav { display: none; } .layout.wide.detail-open .dm-thread, .layout.wide.detail-open .set-main { display: flex; flex-direction: column; }
  .landing { flex-direction: column; } .landing h1 { font-size: 40px; line-height: 48px; } .auth-body { padding: 0 24px 32px; }
}
.new-posts-pill[hidden],[hidden]{display:none !important}

/* ---------- deep settings (added) ---------- */
.na-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: #b7791f; border: 1px solid rgba(255,173,31,.45); background: rgba(255,173,31,.1); border-radius: 999px; padding: 0 6px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
.na-tag .ic svg { width: 11px; height: 11px; }
.na-tag.soft { color: var(--muted); border-color: var(--border-strong); background: transparent; }
.na-banner { display: flex; gap: 10px; align-items: flex-start; margin: 12px 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,173,31,.45); background: rgba(255,173,31,.08); font-size: 14px; line-height: 1.4; }
.na-banner .ic { color: #ffad1f; flex-shrink: 0; }
.set-heading { font-weight: 800; font-size: 20px; padding: 16px 16px 6px; }
.set-sub { font-weight: 700; padding: 14px 16px 4px; }
.small { font-size: 13px; }
.radio-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; cursor: pointer; gap: 12px; }
.radio-row:hover { background: var(--row-hover); }
.radio-row input { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }
.is-na { opacity: .62; cursor: default; }
.is-na:hover { background: transparent; }
.set-item.static { cursor: default; }
.set-item.static:hover { background: transparent; }
.set-item .right { display: flex; align-items: center; gap: 8px; }
.data-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px 16px 12px; }
.data-stat { border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; text-transform: capitalize; font-size: 13px; }
.data-stat b { font-size: 20px; }
.secret { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 17px; letter-spacing: 1px; padding: 10px 12px; border-radius: 8px; background: var(--input); margin: 8px 0; word-break: break-all; user-select: all; }
.pill { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--repost); margin-left: 6px; }
kbd { display: inline-block; min-width: 22px; text-align: center; font: 12px ui-monospace, Menlo, monospace; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; }
.sc-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; }
article.post.kb-focus { box-shadow: inset 3px 0 0 var(--accent); background: var(--row-hover); }
.danger-link { color: var(--danger); }
.lock { display: inline-flex; margin-left: 3px; vertical-align: -2px; } .lock svg { width: 15px; height: 15px; }
.post-media { position: relative; }
.post-media.sensitive img, .post-media.sensitive .ds-ph { filter: blur(28px); }
.post-media.sensitive { overflow: hidden; }
.sens-cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; background: rgba(0,0,0,.45); color: #fff; }
.sens-cover > div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.sens-cover .btn-outline { color: #fff; border-color: rgba(255,255,255,.6); }
.alt-badge { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.75); color: #fff; font: 700 12px/1 inherit; padding: 4px 6px; border-radius: 4px; }
.alt-edit { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.75); color: #fff; font-weight: 700; font-size: 13px; padding: 4px 8px; border-radius: 6px; }
.c-media { position: relative; }
.ds-ph { display: flex; align-items: center; justify-content: center; gap: 8px; height: 160px; color: var(--muted); background: var(--card); cursor: pointer; }
.reply-audience { color: var(--accent); font-weight: 700; font-size: 14px; display: inline-flex; gap: 4px; align-items: center; padding: 4px 10px; border-radius: 999px; margin: 4px 0 6px -10px; }
.reply-audience:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.reply-audience .ic svg { width: 16px; height: 16px; }
.ra-note { color: var(--muted); font-size: 13px; display: flex; gap: 4px; align-items: center; margin: 2px 0; } .ra-note svg { width: 14px; height: 14px; }
.icon-btn.accent { color: var(--accent); }
.automated { display: flex; align-items: center; gap: 4px; font-size: 14px; margin: -4px 0 10px; }
.empty .big svg { width: 40px; height: 40px; }
.dm-req-banner { margin: 8px 16px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
.dm-req-banner p { margin: 0; }
.req-link .n-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); }
html[data-hc] { --muted: #a9b2ba; --border: #6e767d; --border-strong: #9aa3ab; }
html[data-hc][data-theme="light"] { --text: #000; --muted: #33353A; --border: #8E8F88; --border-strong: #5F6168; }
html[data-rm] *, html[data-rm] *::before, html[data-rm] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* ===================== Short video (Watch, grids, inline) — original styles ===================== */
.watch { position: relative; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.watch-top { position: relative; flex: none; }
.vfeed { flex: 1; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; outline: none; background: #000; }
.vfeed::-webkit-scrollbar { display: none; }
.vslide { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding: 12px 8px; box-sizing: border-box; position: relative; }
.vslide.vend, .vslide.vgone { align-items: center; color: #fff; }
.vslide.vend .empty p, .vslide.vgone .empty p { color: #aab; }
.vstage { position: relative; height: 100%; max-width: calc(100% - 64px); aspect-ratio: var(--ar, 9 / 16); border-radius: 14px; overflow: hidden; background: #111; cursor: pointer; user-select: none; }
.vstage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.vstage.sensitive video { filter: blur(28px) brightness(.6); }
.vstage .sens-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; text-align: center; padding: 24px; background: rgba(0,0,0,.35); }
.vstage .sens-cover > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vstage .sens-cover .btn { color: #fff; border-color: #fff8; }
.v-mute { position: absolute; top: 12px; left: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 3; }
.v-paused { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: #fffd; }
.v-paused .ic svg { width: 72px; height: 72px; fill: rgba(255,255,255,.25); }
.v-info { position: absolute; left: 0; right: 0; bottom: 6px; padding: 40px 14px 14px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events: none; font-size: 14px; line-height: 1.35; }
.v-info a { pointer-events: auto; color: #fff; }
.v-info .v-author { font-weight: 700; } .v-info .v-author span { font-weight: 400; opacity: .75; }
.v-info .sample-tag { margin-left: 6px; }
.v-cap { margin: 4px 0 6px; overflow-wrap: anywhere; } .v-cap a { font-weight: 700; }
.v-sound { display: flex; gap: 6px; align-items: center; opacity: .9; font-size: 13px; } .v-sound .ic svg { width: 14px; height: 14px; }
.v-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; z-index: 4; cursor: pointer; touch-action: none; display: flex; align-items: flex-end; }
.v-prog::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.28); }
.v-prog-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #fff; transform-origin: left; transform: scaleX(0); }
.v-prog-knob { position: absolute; bottom: -4px; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s; }
.v-prog:hover::before, .v-prog.scrubbing::before, .v-prog:hover .v-prog-fill, .v-prog.scrubbing .v-prog-fill { height: 5px; }
.v-prog:hover .v-prog-knob, .v-prog.scrubbing .v-prog-knob, .v-prog:focus-visible .v-prog-knob { opacity: 1; }
.v-time { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-weight: 700; font-size: 18px; text-shadow: 0 1px 4px #000; white-space: nowrap; }
.v-hearts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.v-heart { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot)); color: var(--like); animation: vheart .9s ease-out forwards; }
.v-heart .ic svg { width: 96px; height: 96px; fill: currentColor; stroke: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
@keyframes vheart { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--rot)) scale(.4); } 15% { opacity: 1; transform: translate(-50%,-50%) rotate(var(--rot)) scale(1.15); } 30% { transform: translate(-50%,-50%) rotate(var(--rot)) scale(.95); } 100% { opacity: 0; transform: translate(-50%,-160%) rotate(var(--rot)) scale(1.3); } }
.watch.rm .v-heart, [data-rm] .v-heart { animation: vheart-rm .5s linear forwards; }
@keyframes vheart-rm { 0%, 80% { opacity: 1; transform: translate(-50%,-50%); } 100% { opacity: 0; transform: translate(-50%,-50%); } }
.vrail { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 18px; width: 52px; flex: none; color: #fff; }
.vr-av { position: relative; margin-bottom: 6px; } .vr-av .avatar { width: 46px; height: 46px; border: 2px solid #fff; }
.vr-follow { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.vr-follow .ic svg { width: 14px; height: 14px; }
.vr-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; color: #fff; cursor: pointer; font-size: 12px; font-weight: 600; padding: 0; }
.vr-ic { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; transition: background .15s; }
.vr-btn:hover .vr-ic { background: rgba(255,255,255,.22); }
.vr-btn.like.on .vr-ic { color: var(--accent); } .vr-btn.like.on svg { fill: currentColor; }
.vr-btn.rt.on .vr-ic { color: #4ADE80; } .vr-btn.bm.on .vr-ic { color: var(--accent); } .vr-btn.bm.on svg { fill: currentColor; }
.vr-btn.pop .vr-ic { animation: vrpop .35s ease-out; } @keyframes vrpop { 50% { transform: scale(1.25); } }
[data-rm] .vr-btn.pop .vr-ic { animation: none; }
.vr-plays { display: flex; flex-direction: column; align-items: center; font-size: 11px; opacity: .75; } .vr-plays .ic svg { width: 14px; height: 14px; }
.vnav { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 5; }
.vnav .icon-btn { background: var(--card, #222); border: 1px solid var(--border); }
@media (max-width: 700px) { .vnav { display: none; } .vslide { padding: 0; gap: 0; } .vstage { border-radius: 0; max-width: 100%; } .vrail { position: absolute; right: 6px; bottom: 90px; } }
.vsheet-back { position: absolute; inset: 0; background: rgba(0,0,0,.35); z-index: 9; opacity: 0; transition: opacity .25s; }
.vsheet { position: absolute; left: 0; right: 0; bottom: 0; height: 68%; z-index: 10; background: var(--bg); border-radius: 16px 16px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -8px 30px rgba(0,0,0,.35); }
.watch.sheet-open .vsheet { transform: none; } .watch.sheet-open .vsheet-back { opacity: 1; }
.watch.rm .vsheet, [data-rm] .vsheet, .watch.rm .vsheet-back { transition: none; }
.vsheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--border); }
.vsheet-head h3 { margin: 0; font-size: 16px; }
.vsheet-body { flex: 1; overflow-y: auto; } .vsheet-foot { border-top: 1px solid var(--border); }
.vsheet-foot .composer { padding: 8px 12px; }
/* grids */
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; }
.vg-cell { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #111; display: block; color: #fff; }
.vg-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; } .vg-cell:hover img { transform: scale(1.03); }
.vg-cell.sensitive img { filter: blur(18px); }
.vg-plays, .vg-len, .vg-dur { position: absolute; bottom: 6px; display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; text-shadow: 0 1px 3px #000; color: #fff; }
.vg-plays { left: 6px; } .vg-len { right: 6px; } .vg-dur { right: 6px; }
.vg-plays .ic svg, .vg-dur .ic svg { width: 13px; height: 13px; fill: currentColor; }
.vg-sens { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; }
.vg-sample { position: absolute; top: 6px; left: 6px; font-size: 10px; background: rgba(0,0,0,.55); padding: 1px 6px; border-radius: 9px; }
/* inline */
.post-video { position: relative; aspect-ratio: var(--ar, 9 / 16); max-height: 510px; background: #000; cursor: pointer; }
.post-video video { width: 100%; height: 100%; object-fit: contain; display: block; }
.post-video.sensitive video { filter: blur(26px); }
.pv-len, .pv-plays { position: absolute; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 4px; display: flex; align-items: center; gap: 3px; }
.pv-len { left: 8px; } .pv-plays { left: 56px; } .pv-plays .ic svg { width: 12px; height: 12px; fill: currentColor; }
.pv-open { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgba(0,0,0,.4); color: #fff; display: grid; place-items: center; transition: opacity .2s; }
.pv-open .ic svg { width: 40px; height: 40px; } .post-video.playing .pv-open { opacity: 0; }
.c-video video { max-height: 320px; width: 100%; border-radius: 16px; background: #000; }
.why { margin: 0 0 12px; padding-left: 20px; line-height: 1.6; }
pre.dbg { font-size: 11px; max-height: 260px; overflow: auto; background: var(--input, #111); padding: 8px; border-radius: 8px; }
.v-ana { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); }
.v-ana div { background: var(--bg); padding: 16px; display: flex; flex-direction: column; } .v-ana b { font-size: 22px; }
html:has(.watch), body:has(.watch) { overflow: hidden; height: 100%; }

/* ================= photo + stories layer (social.js) — original styles ================= */
:root { --ring: linear-gradient(135deg, #14b8a6, #6366f1 55%, #a3e635); --ring-close: #f59e0b; --ring-seen: #9ca3af; }
.ring { display: inline-flex; border-radius: 50%; padding: 3px; background: transparent; flex-shrink: 0; }
.ring > .avatar { border: 2px solid var(--bg); box-sizing: content-box; }
.ring.unseen { background: var(--ring); } .ring.seen { background: var(--ring-seen); } .ring.close { background: var(--ring-close); } .ring.close.seen { background: color-mix(in srgb, var(--ring-close) 55%, var(--ring-seen)); }
.ring.none { padding: 3px; }
.ring.st > .avatar { width: 60px; height: 60px; font-size: 24px; }
.ring.nb { padding: 2px; }
/* tray */
.story-tray { position: relative; border-bottom: 1px solid var(--border); }
.story-tray:empty { display: none; }
.st-scroll { display: flex; gap: 14px; padding: 12px 16px; overflow-x: auto; scrollbar-width: none; }
.st-scroll::-webkit-scrollbar { display: none; }
.st-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; flex-shrink: 0; cursor: pointer; }
.st-item .ring { pointer-events: none; }
.st-name { font-size: 12px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.st-add { position: absolute; right: 2px; top: 48px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; border: 2px solid var(--bg); display: flex; align-items: center; justify-content: center; }
.st-add svg { width: 14px; height: 14px; stroke-width: 3; }
.st-arrow { position: absolute; top: 34px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; }
.st-arrow.left { left: 4px; } .st-arrow.right { right: 4px; } .st-arrow svg { width: 16px; height: 16px; }
/* viewer */
.sv-back { position: fixed; inset: 0; z-index: 90; background: #111; display: flex; align-items: center; justify-content: center; gap: 16px; color: #fff; user-select: none; }
.sv { position: relative; height: min(92vh, 860px); aspect-ratio: 9/16; max-width: 100vw; background: #000; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; outline: none; }
.sv-close { position: absolute; top: 16px; right: 16px; color: #fff; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.sv-close svg { width: 28px; height: 28px; }
.sv-nav-user { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.85); color: #111; display: flex; align-items: center; justify-content: center; }
.sv-bars { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 3px; z-index: 3; }
.sv-bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; } .sv-bar i { display: block; height: 100%; background: #fff; width: 0; }
.sv-head { position: absolute; top: 18px; left: 10px; right: 10px; z-index: 3; display: flex; align-items: center; gap: 8px; font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,.6); flex-wrap: wrap; }
.sv-who { display: flex; align-items: center; gap: 8px; color: #fff; } .sv-who .avatar { width: 32px; height: 32px; }
.sv-time { opacity: .8; } .sv-hl { font-weight: 700; }
.sv-cf { background: var(--ring-close); color: #111; border-radius: 10px; padding: 1px 8px; font-weight: 700; display: inline-flex; gap: 3px; align-items: center; text-shadow: none; } .sv-cf svg { width: 12px; height: 12px; fill: #111; }
.sv-sample, .tile-sample { background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 6px; padding: 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.sv-reshare { color: #fff; display: inline-flex; gap: 3px; align-items: center; } .sv-reshare svg { width: 14px; height: 14px; }
.sv-ic { color: #fff; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } .sv-ic:hover { background: rgba(255,255,255,.15); } .sv-ic svg { width: 20px; height: 20px; }
.sv-ic.on svg, .sv-ic.pop svg { fill: #f43f5e; stroke: #f43f5e; }
.sv-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.sv-media { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sv-textstory { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 32px; text-align: center; }
.sv-textstory p { font-size: 26px; font-weight: 800; line-height: 1.25; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sbg-teal { background: linear-gradient(160deg, #0d9488, #134e4a); color: #fff; } .sbg-indigo { background: linear-gradient(160deg, #6366f1, #312e81); color: #fff; }
.sbg-lime { background: linear-gradient(160deg, #a3e635, #4d7c0f); color: #10200a; } .sbg-amber { background: linear-gradient(160deg, #fbbf24, #b45309); color: #2a1600; }
.sbg-rose { background: linear-gradient(160deg, #fb7185, #9f1239); color: #fff; } .sbg-slate { background: linear-gradient(160deg, #64748b, #0f172a); color: #fff; }
.sbg-sky { background: linear-gradient(160deg, #38bdf8, #075985); color: #fff; } .sbg-violet { background: linear-gradient(160deg, #a78bfa, #4c1d95); color: #fff; }
.sv-caption { position: absolute; left: 12px; right: 12px; bottom: 16px; text-align: center; background: rgba(0,0,0,.5); padding: 6px 10px; border-radius: 8px; font-size: 15px; z-index: 1; }
.sv-tap { position: absolute; top: 0; bottom: 0; z-index: 1; } .sv-tap.left { left: 0; width: 30%; } .sv-tap.right { right: 0; width: 70%; }
.sv-stickers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sv-sticker { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; background: #fff; color: #111; border-radius: 12px; padding: 6px 12px; font-weight: 700; font-size: 15px; box-shadow: 0 2px 10px rgba(0,0,0,.3); max-width: 80%; display: inline-flex; gap: 4px; align-items: center; text-decoration: none; }
.sv-sticker svg { width: 16px; height: 16px; }
.sk-mention, .sk-hashtag { color: #4f46e5; } .sk-location { color: #be123c; } .sk-link { color: #0369a1; }
.sk-poll, .sk-question, .sk-slider, .sk-countdown { flex-direction: column; align-items: stretch; width: 230px; padding: 12px; gap: 6px; }
.sk-q { text-align: center; font-size: 15px; }
.sk-opt { padding: 8px; border-radius: 8px; border: 1px solid #ddd; font-weight: 700; color: #4f46e5; background: #fff; } .sk-opt:hover { background: #eef2ff; }
.sk-res { position: relative; padding: 8px; border-radius: 8px; border: 1px solid #ddd; display: flex; justify-content: space-between; overflow: hidden; }
.sk-res i { position: absolute; inset: 0 auto 0 0; background: #e0e7ff; z-index: 0; } .sk-res span, .sk-res b { position: relative; } .sk-res.mine { border-color: #6366f1; }
.sk-meta { font-size: 12px; color: #555; font-weight: 500; text-align: center; }
.sk-ask { display: flex; gap: 4px; } .sk-ask input { flex: 1; border: 1px solid #ddd; border-radius: 8px; padding: 6px 8px; font: inherit; font-weight: 400; color: #111; background: #f5f5f5; min-width: 0; } .sk-ask button { color: #4f46e5; }
.sk-answers { color: #4f46e5; font-weight: 700; }
.sk-slider input[type=range] { width: 100%; accent-color: #6366f1; } .sk-emoji { text-align: center; font-size: 22px; }
.sk-cd { font-variant-numeric: tabular-nums; font-size: 22px; text-align: center; color: #4f46e5; }
.sk-remind { border-radius: 8px; padding: 6px; background: #eef2ff; color: #4f46e5; display: flex; justify-content: center; gap: 4px; align-items: center; } .sk-remind.on { background: #4f46e5; color: #fff; }
.sv-foot { display: flex; align-items: center; gap: 6px; padding: 10px; background: linear-gradient(transparent, rgba(0,0,0,.6)); position: relative; z-index: 3; }
.sv-reply { flex: 1; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.6); border-radius: 22px; padding: 0 4px 0 14px; }
.sv-reply input { flex: 1; background: none; border: 0; color: #fff; font: inherit; height: 40px; outline: none; min-width: 0; } .sv-reply input::placeholder { color: #ddd; }
.sv-btn { color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 18px; padding: 6px 12px; display: inline-flex; gap: 4px; align-items: center; font-size: 14px; } .sv-btn svg { width: 16px; height: 16px; }
.sv-btn.accent { background: #fff; color: #111; }
.sv-seen { color: #fff; display: inline-flex; gap: 4px; align-items: center; font-weight: 700; } .sv-seen svg { width: 18px; height: 18px; }
.sv-quick { position: absolute; left: 10px; right: 10px; bottom: 64px; z-index: 4; display: flex; justify-content: space-around; background: rgba(0,0,0,.6); border-radius: 16px; padding: 8px; }
.sv-quick button { font-size: 26px; transition: transform .1s; } .sv-quick button:hover { transform: scale(1.25); }
.sv-back.held .sv-head, .sv-back.held .sv-foot, .sv-back.held .sv-bars { opacity: 0; transition: opacity .2s; }
.v-react { font-size: 20px; } .cf-chip { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--ring-close); color: #fff; align-items: center; justify-content: center; vertical-align: -3px; } .cf-chip svg { width: 11px; height: 11px; fill: #fff; }
@media (max-width: 640px) { .sv { height: 100vh; border-radius: 0; } .sv-nav-user { display: none; } .sv-close { z-index: 5; top: 26px; } }
/* creator */
.modal.wide-modal { width: 860px; }
.m-body { max-height: calc(90vh - 53px); overflow-y: auto; }
.sc, .pc { display: flex; gap: 20px; padding: 12px 16px 20px; }
.sc-left { flex: 0 0 280px; } .sc-right, .pc-right { flex: 1; min-width: 0; }
.sc-canvas { position: relative; width: 280px; aspect-ratio: 9/16; background: #111; border-radius: 12px; overflow: hidden; color: #fff; }
.sc-canvas.close { box-shadow: 0 0 0 3px var(--ring-close); }
.sc-canvas .sv-textstory p { font-size: 20px; }
.sc-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #aaa; } .sc-empty svg { width: 40px; height: 40px; }
.sc-sk { position: absolute; transform: translate(-50%, -50%); background: #fff; color: #111; border-radius: 10px; padding: 4px 22px 4px 10px; font-size: 13px; font-weight: 700; cursor: grab; touch-action: none; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.sc-sk button { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); color: #666; } .sc-sk button svg { width: 13px; height: 13px; }
.seg { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.seg button { flex: 1; padding: 8px; display: flex; gap: 6px; justify-content: center; align-items: center; font-weight: 600; } .seg button.on { background: var(--text); color: var(--bg); } .seg svg { width: 16px; height: 16px; }
.sc-bgs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .sc-bg { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; } .sc-bg.on { outline: 2px solid var(--text); outline-offset: 2px; }
.sc-stickers, .hw-list { display: flex; flex-wrap: wrap; gap: 6px; }
.hw-list { padding: 12px 16px; }
.chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 16px; padding: 4px 10px; font-size: 13px; font-weight: 600; background: var(--bg); color: var(--text); }
.chip svg { width: 14px; height: 14px; } .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); } .chip button { display: inline-flex; color: var(--muted); }
.sc-skform { margin-top: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.sc-skform .bold svg { width: 16px; height: 16px; vertical-align: -3px; }
.sc-file { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
@media (max-width: 760px) { .sc, .pc { flex-direction: column; } .sc-left { flex: none; align-self: center; } }
/* profile */
.profile-top .p-av { position: relative; margin-top: -82px; border-radius: 50%; padding: 4px; line-height: 0; }
.profile-top .p-av .avatar { margin-top: 0; }
.p-av.ring { cursor: pointer; background: var(--ring-seen); } .p-av.ring.unseen { background: var(--ring); } .p-av.ring.close { background: var(--ring-close); }
.p-note { position: absolute; top: -6px; left: 70%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 14px; padding: 6px 10px; font-size: 13px; line-height: 1.25; max-width: 170px; text-align: left; box-shadow: 0 2px 8px rgba(0,0,0,.12); white-space: normal; z-index: 1; }
.p-note.add { color: var(--muted); display: inline-flex; gap: 2px; align-items: center; } .p-note svg { width: 14px; height: 14px; }
.p-postcount { order: -1; }
.rel-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 10px; }
.rel-chip { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; color: var(--muted); border: 1px solid var(--border); border-radius: 12px; padding: 2px 8px; } .rel-chip svg { width: 13px; height: 13px; }
.rel-chip.cf { color: #b45309; border-color: var(--ring-close); } .rel-chip.cf svg { fill: var(--ring-close); stroke: var(--ring-close); }
.hl-row { display: flex; gap: 16px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: thin; }
.hl-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; flex-shrink: 0; }
.hl-cover { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--border); padding: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg); background-clip: content-box; }
.hl-cover img, .hl-cover > span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; text-align: center; overflow: hidden; }
.hl-cover.new svg { width: 28px; height: 28px; color: var(--muted); }
.hl-name { font-size: 12px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-pick { display: flex; gap: 12px; flex-wrap: wrap; } .hl-pick-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; font-size: 12px; } .hl-pick-item em { position: absolute; top: 0; right: 4px; background: var(--accent); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .hl-pick-item em svg { width: 13px; height: 13px; }
.arch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.arch-grid.big { grid-template-columns: repeat(3, 1fr); padding: 4px; }
.arch-tile { position: relative; aspect-ratio: 9/16; overflow: hidden; border-radius: 6px; cursor: pointer; display: block; background: #222; }
.arch-tile .thumb { width: 100%; height: 100%; object-fit: cover; display: flex; align-items: center; justify-content: center; padding: 6px; font-size: 11px; font-weight: 700; text-align: center; }
.arch-tile input { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; accent-color: var(--accent); }
.arch-date { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; border-radius: 4px; padding: 0 4px; }
/* grids */
.grid-bar { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.grid-bar > svg { width: 16px; height: 16px; } .grid-bar span { flex: 1; } .grid-bar .link { display: inline-flex; gap: 4px; align-items: center; } .grid-bar .link svg { width: 15px; height: 15px; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px 0; }
.pgrid .tile { aspect-ratio: 4/5; }
.pgrid.mixed { grid-auto-flow: dense; } .pgrid.mixed .tile { aspect-ratio: 1; } .pgrid.mixed .tile.big { grid-row: span 2; aspect-ratio: auto; }
.tile { position: relative; display: block; overflow: hidden; background: var(--card, #222); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-text { position: absolute; inset: 0; padding: 12px; font-size: 13px; color: var(--text); display: flex; align-items: center; background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.tile-icons { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); } .tile-icons svg { width: 18px; height: 18px; }
.tile-hover { position: absolute; inset: 0; background: rgba(0,0,0,.45); color: #fff; display: flex; gap: 18px; align-items: center; justify-content: center; font-weight: 700; opacity: 0; transition: opacity .15s; }
.tile-hover span { display: inline-flex; gap: 4px; align-items: center; } .tile-hover svg { width: 18px; height: 18px; fill: #fff; } .tile:hover .tile-hover, .tile:focus-visible .tile-hover { opacity: 1; }
.tile-sample { position: absolute; left: 6px; bottom: 6px; }
/* carousel */
.car { position: relative; margin-top: 12px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #000; }
.car-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .car-track::-webkit-scrollbar { display: none; }
.car-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4/5; max-height: 560px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.car.big .car-slide { max-height: 680px; }
.car-slide img, .car-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-tag { position: absolute; transform: translate(-50%, 8px); background: rgba(0,0,0,.78); color: #fff !important; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; white-space: nowrap; text-decoration: none; }
.car-tag::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top: 0; border-bottom-color: rgba(0,0,0,.78); }
.car-tag.pending { border: 1px dashed #fff; } .car-slide.show-tags .car-tag, .car-tag.on { opacity: 1; pointer-events: auto; }
.car-tag.on button { color: #fff; margin-left: 4px; display: inline-flex; vertical-align: -2px; } .car-tag.on button svg { width: 12px; height: 12px; }
.car-tagbtn { position: absolute; left: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; display: flex; align-items: center; justify-content: center; } .car-tagbtn svg { width: 15px; height: 15px; fill: #fff; }
.car-alt { position: absolute; left: 44px; bottom: 10px; }
.car-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.88); color: #111; display: flex; align-items: center; justify-content: center; z-index: 1; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.car-arrow.prev { left: 10px; } .car-arrow.next { right: 10px; } .car-arrow svg { width: 18px; height: 18px; } .car-arrow[hidden] { display: none; }
.car-count { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.car-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; } .car-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); } .car-dots i.on { background: #fff; }
.car.sensitive .car-track { filter: blur(30px); }
/* post extras */
.pe { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.pe > * { display: inline-flex; gap: 4px; align-items: center; } .pe svg { width: 15px; height: 15px; } .pe a { color: var(--accent); }
.pe-flag.warn { color: #b45309; } .pe-flag.fav svg { fill: var(--ring-close); stroke: var(--ring-close); }
.pe-invite { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; flex-wrap: wrap; } .pe-invite span { flex: 1; min-width: 180px; } .pe-invite > svg { width: 18px; height: 18px; }
/* composer */
.pc-left { flex: 0 0 360px; } .pc-stage { position: relative; width: 360px; aspect-ratio: 4/5; background: var(--card, #f2f2f2); border-radius: 12px; overflow: hidden; cursor: crosshair; border: 1px solid var(--border); }
.pc-stage img, .pc-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-pick { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); cursor: pointer; } .pc-pick svg { width: 48px; height: 48px; }
.pc-strip { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; }
.pc-th { position: relative; width: 56px; height: 56px; flex-shrink: 0; border-radius: 6px; overflow: hidden; border: 2px solid transparent; } .pc-th.on { border-color: var(--accent); } .pc-th img { width: 100%; height: 100%; object-fit: cover; }
.pc-th.add { border: 1px dashed var(--border-strong, #999); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); }
.pc-x { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.7); color: #fff; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; } .pc-x svg { width: 11px; height: 11px; }
.pc-tagform { position: absolute; transform: translate(-50%, 8px); background: var(--bg); border-radius: 8px; padding: 6px; display: flex; gap: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.35); z-index: 2; } .pc-tagform input { width: 130px; border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font: inherit; background: var(--bg); color: var(--text); }
@media (max-width: 760px) { .pc-left { flex: none; } .pc-stage { width: 100%; } }
/* collections */
.coll-row { display: flex; gap: 10px; overflow-x: auto; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.coll-card { display: flex; flex-direction: column; gap: 4px; width: 96px; flex-shrink: 0; font-size: 13px; font-weight: 600; position: relative; text-align: left; }
.coll-card img, .coll-card .coll-ph { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; border: 2px solid transparent; }
.coll-card.on img, .coll-card.on .coll-ph { border-color: var(--accent); }
.coll-card em { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.6); color: #fff; font-style: normal; font-size: 11px; border-radius: 8px; padding: 0 6px; }
.coll-ph { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 10%, var(--bg)); color: var(--accent); } .coll-ph svg { width: 28px; height: 28px; }
.coll-line { display: flex; gap: 10px; align-items: center; } .coll-line img, .coll-line .coll-ph { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; } .coll-line .coll-ph svg { width: 18px; height: 18px; }
/* DM notes + extras */
.dm-notes { display: flex; gap: 12px; overflow-x: auto; padding: 34px 16px 10px; border-bottom: 1px solid var(--border); }
.dm-notes:empty { display: none; }
.note-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 74px; flex-shrink: 0; cursor: pointer; }
.note-item .avatar { width: 56px; height: 56px; }
.note-bub { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 4px 8px; font-size: 11px; line-height: 1.2; max-width: 92px; max-height: 30px; overflow: hidden; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.12); z-index: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.note-bub.add { color: var(--muted); } .note-bub.liked { border-color: #f43f5e; }
.note-bub.big { position: static; transform: none; font-size: 15px; max-width: 240px; max-height: none; padding: 8px 12px; margin-bottom: -6px; display: inline-block; }
.note-name { font-size: 12px; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-preview { display: flex; flex-direction: column; align-items: center; gap: 0; margin-bottom: 12px; }
.icon-btn.liked { color: #f43f5e; } .icon-btn.liked svg { fill: #f43f5e; }
.dm-ref { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; } .dm-ref > svg { width: 14px; height: 14px; }
.bubble-row.mine .dm-ref { justify-content: flex-end; }
.dm-story { width: 56px; height: 96px; border-radius: 8px; overflow: hidden; display: block; flex-shrink: 0; } .dm-story img, .dm-story span { width: 100%; height: 100%; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 9px; padding: 3px; text-align: center; }
.msg-line { display: flex; align-items: center; gap: 4px; } .bubble-row.mine .msg-line { flex-direction: row-reverse; }
.msg-react-btn { opacity: 0; color: var(--muted); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .msg-react-btn svg { width: 16px; height: 16px; }
.bubble-row:hover .msg-react-btn, .msg-react-btn:focus-visible { opacity: 1; } .msg-react-btn:hover { background: var(--row-hover); }
.msg.emoji-big { background: none !important; font-size: 40px; padding: 0; }
.msg.hw summary { cursor: pointer; display: flex; gap: 4px; align-items: center; color: var(--muted); } .msg.hw summary svg { width: 14px; height: 14px; }
.msg-rx { display: flex; gap: 2px; margin-top: -6px; position: relative; z-index: 1; } .bubble-row.mine .msg-rx { justify-content: flex-end; }
.rx { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 0 6px; font-size: 13px; } .rx.mine { border-color: var(--accent); }
.rx-pick { display: flex; gap: 4px; padding: 6px; } .rx-pick button { font-size: 22px; width: 36px; height: 36px; border-radius: 50%; } .rx-pick button:hover { background: var(--row-hover); }
.vanish-tag { color: var(--muted); display: inline-flex; } .vanish-tag svg { width: 12px; height: 12px; }
.dm-system { text-align: center; color: var(--muted); font-size: 13px; margin: 12px 0; display: flex; gap: 4px; justify-content: center; align-items: center; } .dm-system svg { width: 14px; height: 14px; }
.vanish-banner { background: #1e1b4b; color: #e0e7ff; padding: 8px 16px; font-size: 13px; display: flex; gap: 6px; align-items: center; } .vanish-banner svg { width: 16px; height: 16px; } .vanish-banner .link { color: #a5b4fc; margin-left: auto; font-weight: 700; }
.vanish-on .dm-msgs { background: #0f0d24; } .vanish-on .dm-msgs .msg-time, .vanish-on .dm-msgs .dm-profile { color: #a5b4fc; }
#dm-vanish[aria-pressed=true] { color: #818cf8; background: rgba(99,102,241,.15); }
/* notifications */
.n-icon.story, .n-icon.tag { color: #6366f1; } .n-icon.collab { color: #0d9488; }
.n-story { display: flex; gap: 10px; align-items: center; margin-top: 8px; } .n-thumb { width: 56px; height: 70px; object-fit: cover; border-radius: 6px; margin-top: 8px; display: block; }
/* nav + misc */
.fav-note { padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--muted); display: flex; gap: 6px; align-items: center; } .fav-note svg { width: 16px; height: 16px; fill: var(--ring-close); stroke: var(--ring-close); } .fav-note a { color: var(--accent); }
.al-res { position: absolute; left: 16px; right: 16px; top: 52px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; z-index: 5; box-shadow: 0 4px 16px rgba(0,0,0,.15); } .al-res:empty { display: none; }
.al-item { display: flex; gap: 10px; align-items: center; padding: 8px 12px; }
.tagrev { border-bottom: 1px solid var(--border); } .tagrev .post { border-bottom: 0; } .tagrev-btns { display: flex; gap: 8px; padding: 0 16px 12px 68px; }
.link { color: var(--accent); }
.sc-right .radio-row, .modal .radio-row { padding: 10px 4px; } .radio-row > span svg { width: 16px; height: 16px; vertical-align: -3px; }
.dm-notes { padding-top: 44px; } .note-bub { top: -38px; font-size: 12px; max-width: 104px; max-height: 36px; padding: 5px 9px; }
.grid-bar span { min-width: 160px; }
.sc-aud > span svg { display: inline-block !important; margin-right: 4px; }