/* ── VRCFeed: X/Bluesky feed + Pinterest explore ──────────────────────────── */
@font-face { font-family: "OpenDyslexic"; src: url("/fonts/OpenDyslexic-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/fonts/OpenDyslexic-Bold.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Michroma"; src: url("/fonts/michroma.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("/fonts/plex-sans.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex"; src: url("/fonts/plex-sans-italic.woff2") format("woff2"); font-weight: 100 700; font-style: italic; font-display: swap; }

:root {
  --bg: #060608;
  --bg-2: #0b0b0e;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.09);
  --surface-solid: #16161b;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);
  --ink: #f4f4f7;
  --muted: #a3a3ad;
  --faint: #6e6e78;
  --uv: #7c5cff;
  --uv-2: #8f74ff;
  --neon: #7c5cff;
  --neon-2: #a998ff;
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --like: #f472b6;
  --repost: #34d399;
  --head: "Michroma", "Plex", -apple-system, "Segoe UI", Roboto, sans-serif;
  --ui: "Plex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lnav-w: 250px;
  --rnav-w: 330px;
  --center-w: 620px;
  --r: 8px;
  --r-lg: 14px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  --glow-a: 0.12;
  --img-bg: #000000;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f7f7f9;
  --bg-2: #ffffff;
  --surface: rgba(0, 0, 0, 0.035);
  --surface-2: rgba(0, 0, 0, 0.07);
  --surface-solid: #ffffff;
  --line: rgba(0, 0, 0, 0.09);
  --line-strong: rgba(0, 0, 0, 0.18);
  --ink: #0b0b0e;
  --muted: #5d5d66;
  --faint: #9a9aa3;
  --neon: #6a4cf0;
  --neon-2: #6a4cf0;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
  --glow-a: 0.1;
  --img-bg: #e9e9ee;
  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--ui); font-size: 15px; line-height: 1.45; min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 500px at 10% -10%, rgba(124, 92, 255, var(--glow-a)), transparent 60%);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--ink); background: none; border: none; outline: none; }
::placeholder { color: var(--faint); }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--uv); color: #fff; }
h1, h2, .head { font-family: var(--head); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 400; }
h3, .h3 { font-family: var(--ui); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.h1 { font-size: clamp(16px, 2vw, 20px); font-weight: 400; line-height: 1.2; }
.h2 { font-size: 14px; font-weight: 400; line-height: 1.2; }
.h3 { font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 14px; white-space: nowrap; border: 1px solid transparent; user-select: none; transition: transform 0.15s var(--ease), background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.2s, opacity 0.15s; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn.primary { background: var(--uv); color: #fff; }
.btn.primary:hover { background: var(--uv-2); }
.btn.secondary { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { border-color: var(--line-strong); }
.btn.outline { color: var(--ink); border-color: var(--line-strong); }
.btn.outline:hover { background: var(--surface-2); }
.btn.ghost { color: var(--muted); }
.btn.ghost:hover { color: var(--ink); background: var(--surface-2); }
.btn.danger { color: var(--bad); border-color: rgba(248, 113, 113, 0.35); }
.btn.danger:hover { background: rgba(248, 113, 113, 0.1); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13.5px; }
.btn.lg { height: 46px; padding: 0 26px; font-size: 15px; }
.btn.icon { width: 38px; padding: 0; }
.btn.icon.sm { width: 32px; }
.btn.block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.sm svg { width: 16px; height: 16px; }
.link { color: var(--neon-2); font-weight: 600; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── shell ── */
.shell { display: grid; grid-template-columns: var(--lnav-w) minmax(0, var(--center-w)) var(--rnav-w); justify-content: center; gap: 0 24px; min-height: 100vh; }
.shell.wide { grid-template-columns: var(--lnav-w) minmax(0, 1400px); }
.lnav { position: sticky; top: 0; height: 100vh; padding: 14px 8px 14px 16px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.lnav .brand { display: flex; align-items: center; padding: 10px 12px 16px; }
.brand img { display: block; height: 26px; width: auto; }
.brand .lockup { display: block; }
.brand .mark { display: none; height: 30px; }
:root:not([data-theme="light"]) .brand img.light, :root[data-theme="light"] .brand img.dark { display: none !important; }
.lnav a.nl, .lnav button.nl { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 14px; border-radius: 999px; font-size: 17px; font-weight: 500; color: var(--ink); transition: background 0.15s; position: relative; }
.lnav .nl:hover { background: var(--surface-2); }
.lnav .nl.here { font-weight: 700; }
.lnav .nl svg { width: 24px; height: 24px; flex: none; }
.lnav .nl .badge { margin-left: auto; }
.lnav .post-btn { margin: 12px 8px 8px 0; height: 48px; font-size: 16px; }
.lnav .spacer { flex: 1; }
.lnav .me { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 999px; }
.lnav .me:hover { background: var(--surface-2); }
.lnav .me .names { min-width: 0; line-height: 1.2; flex: 1; }
.lnav .me .names b { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lnav .me .names span { color: var(--faint); font-size: 13px; }
.lnav .me svg { width: 18px; height: 18px; color: var(--muted); }
.lnav .signin { margin: 8px 8px 0 0; display: grid; gap: 8px; }
.center { min-width: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 100vh; background: var(--bg-2); }
.shell.wide .center { border-right: none; background: transparent; }
.rnav { position: sticky; top: 0; height: 100vh; padding: 14px 16px 14px 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; scrollbar-width: none; }
.rnav::-webkit-scrollbar { display: none; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
.panel .h3 { margin-bottom: 8px; font-size: 12px; font-family: var(--head); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.panel .row-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.panel .row-item .names { min-width: 0; flex: 1; line-height: 1.2; }
.panel .row-item .names b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel .row-item .names span { color: var(--faint); font-size: 13px; }
.panel .tagrow { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 14.5px; font-weight: 600; }
.panel .tagrow:hover { color: var(--neon-2); }
.panel .tagrow small { color: var(--faint); font-weight: 500; font-size: 12.5px; }
.panel .evrow { display: flex; gap: 10px; align-items: center; padding: 7px 0; }
.panel .evrow .cv { width: 56px; height: 36px; border-radius: 6px; background: var(--img-bg); overflow: hidden; flex: none; }
.panel .evrow .cv img { width: 100%; height: 100%; object-fit: cover; }
.panel .evrow b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.panel .evrow span { color: var(--faint); font-size: 12.5px; }
.panel .more { display: block; padding-top: 8px; color: var(--neon-2); font-size: 13.5px; font-weight: 600; }
.rnav .foot { color: var(--faint); font-size: 12.5px; padding: 0 4px; display: flex; gap: 12px; flex-wrap: wrap; }
.rnav .foot a:hover { color: var(--ink); }

/* search */
.search { position: relative; }
.search svg.i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--faint); pointer-events: none; }
.search input { width: 100%; height: 44px; padding: 0 16px 0 42px; border-radius: 999px; background: var(--surface-2); border: 1px solid transparent; font-size: 15px; transition: border-color 0.15s, background 0.15s; }
.search input:focus { border-color: rgba(124, 92, 255, 0.6); background: var(--bg-2); }
.sugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; display: none; z-index: 40; }
.sugg.open { display: block; }
.sugg .grp { padding: 8px 14px 4px; }
.sugg a, .sugg button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; font-size: 14px; text-align: left; }
.sugg a:hover, .sugg button:hover, .sugg .sel { background: var(--surface-2); }
.sugg small { color: var(--faint); margin-left: auto; }

/* top bar (center column header) */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg-2) 80%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.topbar .title { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-family: var(--head); font-weight: 400; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.topbar .title .back { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; margin-left: -8px; }
.topbar .title .back:hover { background: var(--surface-2); }
.topbar .title .back svg { width: 20px; height: 20px; }
.topbar .title .sub { color: var(--faint); font-family: var(--ui); font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none; }
.topbar .title #tName { font-family: var(--ui); text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 17px; }
.tabs { display: flex; }
.tabs button, .tabs a { flex: 1; height: 46px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; color: var(--muted); position: relative; transition: background 0.15s; }
.tabs button:hover, .tabs a:hover { background: var(--surface); }
.tabs .on { color: var(--ink); }
.tabs .on::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 56px; height: 3px; border-radius: 3px 3px 0 0; background: var(--uv); }
.newpill { position: sticky; top: 100px; z-index: 19; display: flex; justify-content: center; pointer-events: none; height: 0; }
.newpill button { pointer-events: auto; transform: translateY(12px); box-shadow: var(--shadow); }

/* ── post card ── */
.post { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px 16px 6px; border-bottom: 1px solid var(--line); transition: background 0.15s; position: relative; }
.post:hover { background: var(--surface); }
.post.focus { box-shadow: inset 3px 0 0 var(--neon); }
.post .rp { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 13px; font-weight: 600; margin: -4px 0 -2px 30px; }
.post .rp svg { width: 15px; height: 15px; }
.post .rp a:hover { text-decoration: underline; }
.post .av { align-self: start; }
.avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden; background: var(--uv); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; text-transform: uppercase; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.xs { width: 22px; height: 22px; font-size: 9px; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.avatar.md { width: 40px; height: 40px; font-size: 14px; }
.avatar.lg { width: 96px; height: 96px; font-size: 34px; }
.avatar.xl { width: 128px; height: 128px; font-size: 44px; }
.post .hd { display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 1.25; height: 32px; }
.post .hd .names { display: grid; grid-auto-flow: column; grid-template-columns: minmax(0, max-content) minmax(0, max-content); grid-auto-columns: max-content; align-items: baseline; column-gap: 6px; min-width: 0; flex: 0 1 auto; white-space: nowrap; }
.post .hd .names > a, .post .hd .names > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.post .hd b { font-weight: 700; font-size: 15px; }
.post .hd b:hover { text-decoration: underline; }
.post .hd .h { color: var(--faint); font-size: 14px; }
.post .hd .t { color: var(--faint); font-size: 14px; }
.post .hd .t::before { content: "·"; margin-right: 6px; }
.post .hd .more { margin-left: auto; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--faint); }
.post .hd .more:hover { background: rgba(124, 92, 255, 0.15); color: var(--neon-2); }
.post .hd .more svg { width: 18px; height: 18px; }
.post .hd .flag { flex: none; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); line-height: 1.3; }
.post .hd .flag.pin { background: rgba(124, 92, 255, 0.25); color: var(--neon-2); }
.post .hd .flag.m { background: rgba(248, 113, 113, 0.15); color: var(--bad); }
.post .hd .flag.hidden { background: rgba(251, 191, 36, 0.15); color: var(--warn); }
.cap { margin-top: 3px; font-size: 15.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.cap.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cap a { color: var(--neon-2); }
.cap a:hover { text-decoration: underline; }
.showmore { color: var(--neon-2); font-weight: 600; font-size: 14px; margin-top: 2px; }
.showmore:hover { text-decoration: underline; }
.post .evchip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--muted); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); }
.post .evchip:hover { color: var(--ink); border-color: var(--line-strong); }
.post .evchip svg { width: 14px; height: 14px; }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chips-row .evchip { margin-top: 0; }
.loc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--neon-2); padding: 5px 11px 5px 9px; border-radius: 999px; background: rgba(124, 92, 255, 0.14); border: 1px solid rgba(124, 92, 255, 0.28); max-width: 100%; }
.loc:hover { background: rgba(124, 92, 255, 0.26); }
.loc svg { width: 14px; height: 14px; flex: none; }
.loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc small { color: var(--muted); font-weight: 500; flex: none; }
.loc .x { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); margin-left: 2px; flex: none; }
.loc .x:hover { background: rgba(255, 255, 255, 0.15); color: var(--ink); }
.loc .x svg { width: 11px; height: 11px; }
.loc.ghost { background: transparent; border-style: dashed; color: var(--muted); }
.loc.ghost:hover { color: var(--neon-2); border-color: rgba(124, 92, 255, 0.5); }

/* media grid */
.mgrid { margin-top: 10px; border-radius: 14px; overflow: hidden; display: grid; gap: 3px; background: var(--img-bg); border: 1px solid var(--line); }
.mgrid.n1 { grid-template-columns: 1fr; }
.mgrid.n2 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; }
.mgrid.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; aspect-ratio: auto; }
.mgrid.n3 .mi[data-i="0"] { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.mgrid.n3 .mi[data-i="1"], .mgrid.n3 .mi[data-i="2"] { aspect-ratio: 1 / 1; }
.mgrid.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9; }
.mgrid.tall.n2, .mgrid.tall.n4 { aspect-ratio: 4 / 3; }
.mgrid.tall.n3 .mi[data-i="0"] { aspect-ratio: 16 / 9; }
.mi { position: relative; overflow: hidden; cursor: pointer; background: var(--img-bg); min-height: 0; }
.mgrid.n1 .mi { width: 100%; max-height: 640px; display: grid; place-items: center; }
.mgrid.n1 .mi img, .mgrid.n1 .mi video { width: 100%; height: auto; max-height: 640px; object-fit: contain; }
.mgrid.n1 .mi.wide img, .mgrid.n1 .mi.wide video { object-fit: cover; height: 100%; }
.mi img, .mi video { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.mi .plus { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: #fff; font-family: var(--head); font-size: 30px; font-weight: 700; }
.mi .dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
.mi .snd { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; display: grid; place-items: center; }
.mi .snd svg { width: 16px; height: 16px; }
.mi .proc { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13.5px; text-align: center; padding: 20px; gap: 6px; }
.mi .proc b { display: block; color: var(--ink); font-family: var(--head); }
.mi.processing { min-height: 160px; }
.mgrid.m18 .mi img, .mgrid.m18 .mi video { filter: blur(24px) brightness(0.55); transform: scale(1.1); }
.mgrid.m18.revealed .mi img, .mgrid.m18.revealed .mi video { filter: none; transform: none; }
.mgrid .m18o { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #fff; text-align: center; font-weight: 600; font-size: 14px; cursor: pointer; }
.mgrid .m18o b { display: block; font-family: var(--head); font-size: 24px; }
.mgrid.revealed .m18o { display: none; }
.mgrid { position: relative; }
.noctx { -webkit-touch-callout: none; }
.shield { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lb .pic .shield { pointer-events: auto; }
.embed { margin-top: 10px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--img-bg); aspect-ratio: 16 / 9; position: relative; }
.embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.embed .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; background: linear-gradient(135deg, #2a1a4a, #101014); }
.embed .ph .pl { width: 60px; height: 60px; border-radius: 50%; background: var(--uv-2); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(124, 92, 255, 0.4); }
.embed .ph .pl svg { width: 26px; height: 26px; margin-left: 3px; }
.embed .ph span { font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.embed .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; z-index: -1; }

/* actions */
.acts { display: flex; align-items: center; gap: 22px; margin: 6px 0 0 -8px; }
@media (max-width: 480px) { .acts { gap: 12px; } }
.act { display: inline-flex; align-items: center; gap: 1px; height: 36px; padding: 0; color: var(--faint); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; transition: color 0.15s; }
.act .ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; transition: background 0.15s; }
.act svg { width: 19px; height: 19px; }
.act span:empty { display: none; }
.act span { padding-right: 6px; }
.act:hover { color: var(--neon-2); }
.act:hover .ic { background: rgba(124, 92, 255, 0.14); }
.act.like:hover { color: var(--like); }
.act.like:hover .ic { background: rgba(244, 114, 182, 0.14); }
.act.like.on { color: var(--like); }
.act.like.on svg { fill: currentColor; }
.act.rp:hover { color: var(--repost); }
.act.rp:hover .ic { background: rgba(52, 211, 153, 0.14); }
.act.rp.on { color: var(--repost); }
.act.save.on { color: var(--neon-2); }
.act.save.on svg { fill: currentColor; }

/* menus */
.menu { position: absolute; min-width: 220px; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; z-index: 50; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 9px; font-size: 14.5px; font-weight: 500; text-align: left; color: var(--ink); }
.menu a:hover, .menu button:hover { background: var(--surface-2); }
.menu button.danger { color: var(--bad); }
.menu svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.menu .sep { border-top: 1px solid var(--line); margin: 6px 0; }
.menu .hd { padding: 8px 12px 4px; font-size: 12px; color: var(--faint); font-weight: 600; }
.menu label.chk { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: 14.5px; }
.menu label.chk:hover { background: var(--surface-2); }
.menu label.chk input { accent-color: var(--neon); width: 16px; height: 16px; }
.menu label.chk small { margin-left: auto; color: var(--faint); }

/* modal */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.6); display: grid; place-items: center; padding: 16px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal .box { width: min(600px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow); }
.modal .box.sm { width: min(440px, 100%); }
.modal .bh { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-2); z-index: 2; }
.modal .bh .h2 { flex: 1; font-size: 13px; }
.modal .bb { padding: 16px; display: grid; gap: 12px; }
.modal .bf { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 14px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--bg-2); }

/* composer */
.composer { display: grid; grid-template-columns: 44px 1fr; gap: 12px; }
.composer textarea { width: 100%; min-height: 90px; font-size: 17px; line-height: 1.4; resize: none; padding: 8px 0; overflow: hidden; }
.composer .tools { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; flex-wrap: wrap; }
.composer .tools .btn.icon { color: var(--neon-2); }
.composer .tools .btn.icon:hover { background: rgba(124, 92, 255, 0.12); }
.composer .tools .sp { flex: 1; }
.composer .tools .count { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.composer .tools select { height: 34px; padding: 0 30px 0 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 14px, calc(100% - 11px) 14px; background-size: 5px 5px; background-repeat: no-repeat; max-width: 200px; }
.composer .tools select option { background: var(--surface-solid); }
.composer .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); padding: 0 8px; height: 34px; border-radius: 999px; cursor: pointer; user-select: none; }
.composer .chk:hover { background: var(--surface-2); }
.composer .chk input { accent-color: var(--neon); }
.composer .locrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.composer .locrow:empty { display: none; }
.dropzone { position: relative; }
.dropzone .dropov { position: absolute; inset: -6px; border: 2px dashed var(--neon); border-radius: 16px; background: rgba(124, 92, 255, 0.14); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: none; place-items: center; z-index: 5; pointer-events: none; color: var(--ink); font-weight: 700; font-family: var(--head); font-size: 18px; }
.dropzone .dropov div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dropzone .dropov svg { width: 30px; height: 30px; color: var(--neon-2); }
.dropzone .dropov span { font-family: var(--ui); font-weight: 500; font-size: 13px; color: var(--muted); }
.dropzone.over .dropov { display: grid; }
.pagedrop { position: fixed; inset: 0; z-index: 75; background: rgba(10, 10, 12, 0.6); display: none; place-items: center; pointer-events: none; }
.pagedrop.over { display: grid; }
.pagedrop div { padding: 28px 40px; border-radius: 18px; border: 2px dashed var(--neon); background: var(--bg-2); font-family: var(--head); font-weight: 700; font-size: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pagedrop svg { width: 34px; height: 34px; color: var(--neon-2); }
.pagedrop span { font-family: var(--ui); font-weight: 500; font-size: 13.5px; color: var(--muted); }
.attach .it[draggable] { cursor: grab; }
.attach .it.dragging { opacity: 0.35; }
.attach .it.dropL { box-shadow: -4px 0 0 var(--neon); }
.attach .it.dropR { box-shadow: 4px 0 0 var(--neon); }
.attach .it .grip { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; display: grid; place-items: center; cursor: grab; }
.attach .it .grip svg { width: 13px; height: 13px; }
.attach .it .mv { left: 34px; }
.attach { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.attach .it { position: relative; border-radius: 10px; overflow: hidden; background: var(--img-bg); aspect-ratio: 1; border: 1px solid var(--line); }
.attach .it img, .attach .it video { width: 100%; height: 100%; object-fit: cover; }
.attach .it .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.15); }
.attach .it .bar i { display: block; height: 100%; background: var(--neon); width: 0; transition: width 0.2s; }
.attach .it .x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; display: grid; place-items: center; }
.attach .it .x svg { width: 14px; height: 14px; }
.attach .it .mv { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; }
.attach .it .mv button { width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; display: grid; place-items: center; }
.attach .it .mv svg { width: 12px; height: 12px; }
.attach .it .alt { position: absolute; left: 6px; bottom: 8px; right: 6px; }
.attach .it .alt input { width: 100%; height: 26px; padding: 0 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 12px; }
.attach .it .st { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 12.5px; font-weight: 600; text-align: center; padding: 8px; }
.attach .it.err { border-color: var(--bad); }
.mention-box { position: absolute; z-index: 60; }

/* ── lightbox ── */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(6, 6, 8, 0.96); display: none; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb.open { display: grid; height: 100vh; height: 100dvh; }
.lb .top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #fff; }
.lb .top .sp { flex: 1; }
.lb .top .cnt { color: rgba(255, 255, 255, 0.6); font-size: 13px; font-variant-numeric: tabular-nums; }
.lb .top .btn { color: #fff; }
.lb .top .btn.ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.lb .stage { position: relative; display: grid; place-items: center; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); touch-action: pan-y; }
.lb .stage .pic { position: relative; max-width: calc(100% - 24px); max-height: 100%; display: grid; }
.lb .stage img, .lb .stage video { max-width: 100%; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); object-fit: contain; border-radius: 4px; user-select: none; -webkit-user-drag: none; }
.lb .navbtn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); display: grid; place-items: center; color: #fff; z-index: 4; }
.lb .navbtn:hover { background: rgba(255, 255, 255, 0.18); }
.lb .navbtn svg { width: 20px; height: 20px; }
.lb .navbtn.prev { left: 14px; }
.lb .navbtn.next { right: 14px; }
.lb .bottom { padding: 10px 14px 14px; color: #fff; display: flex; align-items: center; gap: 12px; }
.lb .bottom .cap { flex: 1; font-size: 14px; color: rgba(255, 255, 255, 0.85); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.lb .bottom .who { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.lb .bottom .who span { color: rgba(255, 255, 255, 0.6); font-weight: 500; }
.lb .bottom .btn { color: #fff; border-color: rgba(255, 255, 255, 0.25); }

/* ── explore wall (rbn-style columns) ── */
.wall { display: flex; gap: 12px; align-items: flex-start; }
.wall .col { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tile { position: relative; display: block; width: 100%; border-radius: 12px; overflow: hidden; background: var(--img-bg); cursor: pointer; isolation: isolate; animation: rise 0.4s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tile img { width: 100%; height: auto; opacity: 0; transition: opacity 0.35s, filter 0.2s; }
.tile img.in { opacity: 1; }
.tile:hover img { filter: brightness(0.85); }
.tile .ov { position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.tile:hover .ov, .tile:focus-within .ov { opacity: 1; }
.tile .ov > * { pointer-events: auto; }
.tile .ov .sv { position: absolute; top: 10px; right: 10px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--uv-2); color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.tile .ov .sv:hover { background: var(--uv-2); }
.tile .ov .sv.on { background: #fff; color: #17171b; }
.tile .ov .sv svg { width: 16px; height: 16px; }
.tile .ov .bt { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 10px 10px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7)); display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; }
.tile .ov .bt .who { display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tile .ov .bt .n { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: #fff; }
.tile .ov .bt .n svg { width: 14px; height: 14px; }
.tile .ov .bt .n.on svg { fill: currentColor; color: var(--like); }
.tile .nm { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; display: inline-flex; gap: 4px; align-items: center; }
.tile .nm svg { width: 12px; height: 12px; }
.tile.m18 img { filter: blur(22px) brightness(0.55); transform: scale(1.1); }
.tile.m18.revealed img { filter: none; transform: none; }
.tile .m18o { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-align: center; font-weight: 600; font-size: 13px; }
.tile .m18o b { display: block; font-family: var(--head); font-size: 22px; }
.tile.revealed .m18o { display: none; }
.tile .vid { position: absolute; right: 10px; bottom: 10px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; }
.explore-head { display: flex; align-items: center; gap: 10px; padding: 14px 0 12px; flex-wrap: wrap; }
.explore-head .search { flex: 1 1 260px; max-width: 420px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.seg button { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.seg button svg { width: 15px; height: 15px; }
.seg button.on { background: var(--surface-2); color: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 12px; border-radius: 999px; background: rgba(124, 92, 255, 0.18); border: 1px solid rgba(124, 92, 255, 0.4); font-size: 13.5px; font-weight: 600; }
.pill .x { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.pill .x:hover { background: var(--surface-2); color: var(--ink); }
.pill .x svg { width: 13px; height: 13px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: 0.15s; }
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip.on { background: rgba(124, 92, 255, 0.22); border-color: rgba(124, 92, 255, 0.5); color: var(--ink); }
.chip small { opacity: 0.6; }
.count { color: var(--faint); font-size: 13px; margin-left: auto; font-variant-numeric: tabular-nums; }
.empty { padding: 60px 20px; text-align: center; color: var(--muted); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.empty b { color: var(--ink); font-family: var(--head); font-size: 20px; }
div.more { display: flex; justify-content: center; padding: 24px 0; }
.sentinel { height: 1px; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(127, 127, 127, 0.3); border-top-color: var(--neon); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--surface-solid); color: var(--ink); border: 1px solid var(--line-strong); padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.3s var(--ease); z-index: 100; box-shadow: var(--shadow); display: flex; gap: 12px; align-items: center; }
.toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.toast button { color: var(--neon-2); font-weight: 700; }

/* ── status page ── */
.status .post { border-bottom: none; }
.status .post .cap { font-size: 18px; }
.status .post .cap.clamp { display: block; -webkit-line-clamp: unset; }
.status .meta { padding: 4px 16px 10px 72px; color: var(--faint); font-size: 14px; display: flex; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.status .meta b { color: var(--ink); font-weight: 600; }
.status .replybox { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.status .replybox textarea { width: 100%; min-height: 40px; max-height: 200px; padding: 8px 0; font-size: 16px; resize: none; }
.status .replybox .signin { grid-column: 2 / -1; color: var(--muted); font-size: 14px; }
.reply { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.reply .hd { display: flex; gap: 6px; align-items: baseline; font-size: 14px; }
.reply .hd b { font-weight: 700; font-size: 15px; }
.reply .hd span { color: var(--faint); }
.reply .hd button { margin-left: auto; color: var(--faint); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; opacity: 0; }
.reply:hover .hd button { opacity: 1; }
.reply .hd button:hover { background: var(--surface-2); color: var(--ink); }
.reply .hd button svg { width: 15px; height: 15px; }
.reply p { font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.reply.hid { opacity: 0.55; }
.section-h { padding: 18px 16px 8px; font-family: var(--head); font-weight: 400; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: baseline; gap: 8px; }
.section-h span { color: var(--faint); font-family: var(--ui); font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none; }
.hrow { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 14px; scrollbar-width: none; }
.hrow::-webkit-scrollbar { display: none; }
.hrow .mini { flex: none; width: 150px; border-radius: 10px; overflow: hidden; background: var(--img-bg); aspect-ratio: 4 / 5; position: relative; }
.hrow .mini img { width: 100%; height: 100%; object-fit: cover; }
.hrow .mini .cp { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 8px 8px; font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.status .related { padding: 0 16px 24px; }

/* ── profile ── */
.phead { padding: 0 16px 12px; }
.phead .banner { height: 120px; margin: 0 -16px; background: linear-gradient(120deg, rgba(124, 92, 255, 0.35), rgba(124, 92, 255, 0.08) 60%, transparent); }
.phead .avrow { display: flex; align-items: flex-end; justify-content: space-between; margin-top: -48px; gap: 10px; }
.phead .avrow .avatar { border: 4px solid var(--bg-2); }
.phead .avrow .cta { display: flex; gap: 8px; padding-bottom: 6px; }
.phead .names { margin-top: 10px; }
.phead .names .h1 { font-family: var(--ui); text-transform: none; letter-spacing: -0.01em; font-weight: 700; font-size: 22px; }
.phead .names .handle { color: var(--faint); font-size: 15px; }
.phead .bio { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.phead .links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; color: var(--muted); }
.phead .links a { color: var(--neon-2); display: inline-flex; gap: 4px; align-items: center; }
.phead .links a svg, .phead .links span svg { width: 14px; height: 14px; }
.phead .links a:hover { text-decoration: underline; }
.pstats { display: flex; gap: 18px; margin-top: 10px; font-size: 14px; color: var(--faint); }
.pstats b { color: var(--ink); font-weight: 700; }
.pstats a:hover, .pstats button.stat:hover { text-decoration: underline; }
.pstats button.stat { color: inherit; font: inherit; display: inline-flex; align-items: center; gap: 4px; }
.pstats .lock svg { width: 13px; height: 13px; vertical-align: -2px; opacity: 0.7; }
.ulist .row-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ulist .row-item .names { min-width: 0; flex: 1; line-height: 1.25; }
.ulist .row-item .names b { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ulist .row-item .names span { color: var(--faint); font-size: 13px; }
.ulist .row-item .names .fy { font-style: normal; color: var(--muted); }
.ulist .more { text-align: center; padding: 8px 0 4px; }
.banner-warn { margin: 12px 16px 0; padding: 10px 14px; border-radius: 10px; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.35); color: var(--bad); font-size: 13.5px; }

/* folders */
.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 14px 16px; }
.folder { display: block; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: border-color 0.15s; }
.folder:hover { border-color: var(--line-strong); }
.folder .cv { aspect-ratio: 4 / 3; background: var(--img-bg); display: grid; place-items: center; color: var(--faint); }
.folder .cv img { width: 100%; height: 100%; object-fit: cover; }
.folder .cv svg { width: 28px; height: 28px; }
.folder .nm { padding: 10px 12px; }
.folder .nm b { display: block; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder .nm span { color: var(--faint); font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.folder .nm span svg { width: 12px; height: 12px; }
.folder.new .cv { border: 1.5px dashed var(--line-strong); }

/* ── pages / forms ── */
.page { padding: 16px; }
.page.narrow { max-width: 720px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.note { padding: 48px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); }
.note b { color: var(--ink); font-family: var(--head); font-size: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; transition: border-color 0.15s, box-shadow 0.15s; }
.field textarea { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.field select option { background: var(--surface-solid); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: rgba(124, 92, 255, 0.5); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.18); }
.field .help { font-size: 12.5px; color: var(--faint); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; user-select: none; }
.check input { appearance: none; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; flex: none; cursor: pointer; }
.check input:checked { background: var(--uv-2); border-color: var(--uv-2); }
.check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: none; border-right: none; transform: translateY(-1px) rotate(-45deg); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); cursor: pointer; }
.switch:last-child { border-bottom: none; }
.switch b { display: block; font-weight: 600; font-size: 14.5px; }
.switch span { color: var(--faint); font-size: 13px; }
.switch input { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-strong); position: relative; cursor: pointer; flex: none; transition: background 0.2s; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s var(--ease); }
.switch input:checked { background: var(--uv-2); border-color: var(--uv-2); }
.switch input:checked::after { transform: translateX(18px); }
.radios { display: grid; gap: 8px; }
.radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.radio.on { border-color: rgba(124, 92, 255, 0.5); background: rgba(124, 92, 255, 0.12); }
.radio input { margin-top: 3px; accent-color: var(--neon); }
.radio b { display: block; font-size: 14.5px; }
.radio span { color: var(--faint); font-size: 13px; }
.radio.disabled { opacity: 0.45; pointer-events: none; }
.section { margin-bottom: 26px; }
.section > .h3 { margin-bottom: 10px; }
.section .card { padding: 16px 18px; }
.section .card:has(.switch) { padding: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.warn-box { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.35); font-size: 13.5px; color: #d9a521; }
[data-theme="light"] .warn-box { color: #7a5a00; }
.warn-box svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.kbd { font-family: ui-monospace, Menlo, monospace; font-size: 11px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-strong); color: var(--muted); background: var(--surface); }
.st { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--muted); }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st.live { color: var(--ok); }
.st.hidden { color: var(--warn); }
.st.processing { color: var(--neon-2); }
.st.failed { color: var(--bad); }
.welcome { max-width: 480px; margin: 40px auto; padding: 0 16px; }
.welcome .card { padding: 26px; }
.welcome .brand img { height: 28px; margin-bottom: 18px; }
.welcome .at { position: relative; }
.welcome .at input { padding-left: 32px; font-size: 18px; height: 50px; }
.welcome .at::before { content: "@"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 18px; }
.welcome .status-t { font-size: 13px; min-height: 18px; margin-top: 6px; }
.welcome .status-t.ok { color: var(--ok); }
.welcome .status-t.bad { color: var(--bad); }
.prose { max-width: 70ch; }
.prose h2 { font-size: 18px; margin: 22px 0 6px; }
.prose p, .prose li { color: var(--muted); font-size: 15px; line-height: 1.6; }
.prose ul { padding-left: 20px; display: grid; gap: 6px; }
.prose strong { color: var(--ink); }
.rcard { padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.rcard .rh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.rcard .rh b { color: var(--bad); }
.rcard .reasons { display: flex; gap: 6px; flex-wrap: wrap; }
.rcard .reasons span { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(248, 113, 113, 0.14); color: var(--bad); }
.rcard .notes { font-size: 13px; color: var(--faint); display: grid; gap: 2px; }
.rcard .decide { display: flex; gap: 8px; flex-wrap: wrap; }
.rcard .post { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ulist { display: grid; gap: 8px; padding: 12px 16px; }
.urow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.urow .names { min-width: 0; flex: 1; line-height: 1.25; }
.urow .names b { display: block; font-weight: 600; }
.urow .names span { color: var(--faint); font-size: 12.5px; }
.flag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.flag.m { background: rgba(248, 113, 113, 0.15); color: var(--bad); }
.elist { display: grid; gap: 12px; padding: 12px 16px; }
.erow { padding: 14px 16px; display: grid; gap: 8px; }
.erow b { font-family: var(--head); font-size: 16px; }
.erow > span { color: var(--faint); font-size: 13px; }
.evcard { display: flex; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: center; }
.evcard .cv { width: 130px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--img-bg); flex: none; }
.evcard .cv img { width: 100%; height: 100%; object-fit: cover; }
.evcard b { display: block; font-family: var(--head); font-size: 17px; }
.evcard span { color: var(--faint); font-size: 13.5px; }
.ehead { padding: 14px 16px; display: flex; gap: 14px; align-items: flex-end; border-bottom: 1px solid var(--line); }
.ehead .cv { width: 160px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--img-bg); flex: none; }
.ehead .cv img { width: 100%; height: 100%; object-fit: cover; }
.ehead .desc { color: var(--muted); margin-top: 6px; font-size: 14.5px; white-space: pre-wrap; }
.ehead .h2 { font-family: var(--ui); text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 20px; }
.live { display: inline-flex; align-items: center; gap: 6px; color: #fff; background: #e91916; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; letter-spacing: 0.04em; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

/* mobile tab bar */
.tabbar { display: none; }

/* ── responsive ── */
@media (max-width: 1280px) { :root { --lnav-w: 76px; } .lnav .nl span, .lnav .brand .lockup, .lnav .me .names, .lnav .me svg, .lnav .post-btn span, .lnav .signin { display: none; } .lnav .brand .mark { display: block; } .lnav .brand { padding: 8px 0 14px; } .lnav { padding-left: 10px; align-items: center; } .lnav .nl { width: 52px; justify-content: center; padding: 0; } .lnav .post-btn { width: 50px; padding: 0; border-radius: 50%; } .lnav .post-btn svg { width: 22px; height: 22px; } .lnav .nl .badge { display: inline-flex; position: absolute; top: 6px; right: 4px; margin: 0; } .lnav .nl .badge[hidden] { display: none; } }
@media (max-width: 1000px) { .shell { grid-template-columns: var(--lnav-w) minmax(0, var(--center-w)); } .rnav { display: none; } .shell.wide { grid-template-columns: var(--lnav-w) minmax(0, 1fr); } }
@media (max-width: 680px) {
  .shell, .shell.wide { grid-template-columns: 1fr; gap: 0; }
  .lnav { display: none; }
  .center { border: none; padding-bottom: 64px; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 60px; padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--bg-2) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); z-index: 30; }
  .tabbar a, .tabbar button { flex: 1; display: grid; place-items: center; color: var(--muted); }
  .tabbar .here { color: var(--ink); }
  .tabbar svg { width: 26px; height: 26px; }
  .tabbar .compose { color: #fff; }
  .tabbar .compose span { width: 44px; height: 44px; border-radius: 50%; background: var(--uv); display: grid; place-items: center; }
  .tabbar .compose svg { width: 22px; height: 22px; }
  .tabbar .avatar { width: 28px; height: 28px; font-size: 11px; }
  .topbar .title { padding: 10px 14px; font-size: 18px; }
  .topbar .title .mob-search { margin-left: auto; }
  .post { padding: 12px 12px 4px; gap: 10px; grid-template-columns: 40px minmax(0, 1fr); }
  .post .hd .names .t.ed { display: none; }
  .post .hd .flag { padding: 2px 6px; font-size: 10.5px; }
  .post .avatar.md { width: 40px; height: 40px; }
  .mgrid.n1 .mi img, .mgrid.n1 .mi video { max-height: 70vh; }
  .wall, .wall .col { gap: 8px; }
  .tile { border-radius: 8px; }
  .tile .ov { display: none; }
  .status .meta { padding-left: 16px; }
  .grid2 { grid-template-columns: 1fr; }
  .composer textarea { font-size: 16px; }
  .modal { padding: 0; align-items: end; }
  .modal.top { align-items: start; }
  .modal.top .box { border-radius: 0 0 16px 16px; overflow: visible; }
  .explore-head .search { flex-basis: 100%; max-width: none; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button, .tabs a { flex: 1 0 auto; padding: 0 14px; font-size: 14.5px; }
  .lb { background: var(--bg); }
  body:has(.lb.open) .tabbar, body:has(.modal) .tabbar { display: none; }
  .modal .box { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .lb .stage img, .lb .stage video { max-height: calc(100dvh - 150px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* ── accessibility (html[data-a11y-*]) ─────────────────────────────────── */
.skip { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--uv); color: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 8px; }
[data-a11y-text="s"] body { zoom: 0.9; }
[data-a11y-text="l"] body { zoom: 1.12; }
[data-a11y-text="xl"] body { zoom: 1.28; }
[data-a11y-font="dyslexic"] body { --ui: "OpenDyslexic", "Plex", sans-serif; --head: "OpenDyslexic", "Michroma", sans-serif; }
[data-a11y-font="dyslexic"] h1, [data-a11y-font="dyslexic"] h2, [data-a11y-font="dyslexic"] .head { text-transform: none; letter-spacing: 0; font-weight: 700; }
[data-a11y-spacing] .cap, [data-a11y-spacing] .reply p, [data-a11y-spacing] .prose p, [data-a11y-spacing] .prose li, [data-a11y-spacing] .phead .bio, [data-a11y-spacing] .ehead .desc { line-height: 1.85; letter-spacing: 0.03em; word-spacing: 0.1em; }
[data-a11y-spacing] .post { padding-top: 18px; padding-bottom: 10px; }
[data-a11y-motion="reduce"] *, [data-a11y-motion="reduce"] *::before, [data-a11y-motion="reduce"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
[data-a11y-contrast] { --ink: #ffffff; --muted: #d6d6de; --faint: #b0b0ba; --line: rgba(255, 255, 255, 0.28); --line-strong: rgba(255, 255, 255, 0.5); --surface: rgba(255, 255, 255, 0.08); --surface-2: rgba(255, 255, 255, 0.16); --neon-2: #c9bfff; --img-bg: #000; }
[data-a11y-contrast][data-theme="light"] { --ink: #000000; --muted: #2a2a30; --faint: #4a4a52; --line: rgba(0, 0, 0, 0.3); --line-strong: rgba(0, 0, 0, 0.55); --neon-2: #4b2fd6; --neon: #4b2fd6; --uv: #4b2fd6; }
[data-a11y-contrast] .btn.primary { background: var(--uv); color: #fff; outline: 2px solid #fff; outline-offset: -2px; }
[data-a11y-contrast] .btn.outline, [data-a11y-contrast] .btn.secondary, [data-a11y-contrast] .chip, [data-a11y-contrast] .seg, [data-a11y-contrast] .panel, [data-a11y-contrast] .card, [data-a11y-contrast] .field input, [data-a11y-contrast] .field textarea, [data-a11y-contrast] .field select, [data-a11y-contrast] .search input { border-color: var(--line-strong); }
[data-a11y-contrast] .act, [data-a11y-contrast] .post .hd .h, [data-a11y-contrast] .post .hd .t { color: var(--muted); }
[data-a11y-transparency] .topbar, [data-a11y-transparency] .tabbar, [data-a11y-transparency] .modal, [data-a11y-transparency] .lb, [data-a11y-transparency] .dropzone .dropov, [data-a11y-transparency] .mgrid .m18o { -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-a11y-transparency] .topbar, [data-a11y-transparency] .tabbar { background: var(--bg-2); }
[data-a11y-transparency] .modal { background: rgba(0, 0, 0, 0.85); }
[data-a11y-transparency] .panel, [data-a11y-transparency] .card { background: var(--surface-solid); }
[data-a11y-links] .cap a, [data-a11y-links] .link, [data-a11y-links] .reply p a, [data-a11y-links] .panel .tagrow, [data-a11y-links] .panel .more, [data-a11y-links] .phead .links a, [data-a11y-links] .prose a { text-decoration: underline; text-underline-offset: 3px; }
[data-a11y-targets] .btn, [data-a11y-targets] .btn.sm { min-height: 44px; }
[data-a11y-targets] .btn.icon, [data-a11y-targets] .btn.icon.sm { min-width: 44px; }
[data-a11y-targets] .act .ic, [data-a11y-targets] .act { height: 44px; }
[data-a11y-targets] .act .ic { width: 44px; }
[data-a11y-targets] .post .hd .more, [data-a11y-targets] .reply .hd button, [data-a11y-targets] .pill .x, [data-a11y-targets] .loc .x { width: 40px; height: 40px; }
[data-a11y-targets] .lnav .nl { height: 52px; }
[data-a11y-targets] .tabs button, [data-a11y-targets] .tabs a { height: 52px; }
[data-a11y-targets] .chip, [data-a11y-targets] .seg button { height: 44px; }
[data-a11y-targets] .field input, [data-a11y-targets] .field select { height: 48px; }
[data-a11y-targets] .tabbar { height: 68px; }
[data-a11y-focus] a:focus, [data-a11y-focus] button:focus, [data-a11y-focus] input:focus, [data-a11y-focus] textarea:focus, [data-a11y-focus] select:focus, [data-a11y-focus] [tabindex]:focus { outline: 3px solid var(--uv) !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px var(--bg) !important; }
.altcap { display: none; }
[data-a11y-captions] .altcap { display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 12.5px; line-height: 1.3; }
[data-a11y-captions] .lb .bottom .cap { -webkit-line-clamp: 6; }
[data-a11y-dim] .mi img, [data-a11y-dim] .mi video, [data-a11y-dim] .tile img, [data-a11y-dim] .lb .stage img, [data-a11y-dim] .lb .stage video, [data-a11y-dim] .hrow .mini img, [data-a11y-dim] .folder .cv img, [data-a11y-dim] .evcard .cv img, [data-a11y-dim] .panel .evrow .cv img { filter: brightness(0.55) !important; transition: filter 0.2s; }
[data-a11y-dim] .mi:hover img, [data-a11y-dim] .mi:focus-within img, [data-a11y-dim] .tile:hover img, [data-a11y-dim] .lb .stage img:hover, [data-a11y-dim] .lb .stage video:hover { filter: brightness(1) !important; }
[data-a11y-counts] .act span, [data-a11y-counts] .tile .ov .bt .n, [data-a11y-counts] .status .meta b, [data-a11y-counts] .pstats, [data-a11y-counts] .panel .tagrow small, [data-a11y-counts] .badge { display: none !important; }
[data-a11y-cb] .shell, [data-a11y-cb] .tabbar, [data-a11y-cb] .modal, [data-a11y-cb] .lb, [data-a11y-cb] .menu.pop { filter: var(--cb-filter); }
[data-a11y-cb="achromatomaly"] { --cb-filter: saturate(1.8); }
[data-a11y-cb="achromatopsia"] { --cb-filter: grayscale(1) contrast(1.25); }
[data-a11y-cb="protanopia"] { --cb-filter: url(#cb-protanopia); }
[data-a11y-cb="protanomaly"] { --cb-filter: url(#cb-protanomaly); }
[data-a11y-cb="deuteranopia"] { --cb-filter: url(#cb-deuteranopia); }
[data-a11y-cb="deuteranomaly"] { --cb-filter: url(#cb-deuteranomaly); }
[data-a11y-cb="tritanopia"] { --cb-filter: url(#cb-tritanopia); }
[data-a11y-cb="tritanomaly"] { --cb-filter: url(#cb-tritanomaly); }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.a11y-grid .radio { padding: 10px 12px; }
.a11y-grid .radio b { font-size: 14px; }
.a11y-note { font-size: 13px; color: var(--faint); padding: 0 2px 8px; }
@media (max-width: 640px) { .a11y-grid { grid-template-columns: 1fr; } }

/* ── sign-in page ────────────────────────────────────────────────────────── */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; position: relative; overflow: hidden; background: var(--bg); }
.login .wallbg { position: absolute; inset: -6%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; opacity: 0; transition: opacity 0.9s ease; pointer-events: none; filter: saturate(0.85); transform: rotate(-4deg) scale(1.08); }
.login .wallbg.on { opacity: 1; }
.login .wallbg img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 10px; opacity: 0; animation: wallin 0.8s ease forwards; }
@keyframes wallin { to { opacity: 1; } }
.login::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--bg) 55%, transparent), var(--bg) 100%); pointer-events: none; }
.login .glow { position: absolute; left: 50%; top: 50%; width: 1100px; height: 1100px; border-radius: 50%; transform: translate(-50%, -52%); z-index: 1; background: radial-gradient(circle closest-side, rgba(124, 92, 255, 0.28) 0%, rgba(124, 92, 255, 0.10) 35%, rgba(124, 92, 255, 0.02) 62%, transparent 100%); pointer-events: none; }
.login .wallbg.on ~ .glow { opacity: 0.5; }
.login::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, transparent), color-mix(in srgb, var(--bg) 82%, transparent)); pointer-events: none; }
.login .card { position: relative; z-index: 2; width: 100%; max-width: 400px; padding: 28px 26px 22px; background: color-mix(in srgb, var(--bg-2) 92%, transparent); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(124, 92, 255, 0.08); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); text-align: center; }
.login .brand { display: inline-block; margin-bottom: 14px; }
.login .brand .mark { width: 52px; height: 52px; display: none; }
:root[data-theme="dark"] .login .brand .mark.dark, :root:not([data-theme="light"]) .login .brand .mark.dark { display: block; }
:root[data-theme="light"] .login .brand .mark.light { display: block; }
.login .h1 { font-size: 22px; letter-spacing: 0.06em; margin: 0 0 6px; }
.login .sub { font-size: 14px; margin: 0 0 22px; }
.login .providers { display: grid; gap: 10px; }
.login .prov { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 15px; transition: border-color 0.15s, background 0.15s, transform 0.1s; }
.login .prov svg { width: 22px; height: 22px; flex: none; }
.login .prov span { flex: 1; text-align: center; padding-right: 22px; }
.login .prov:hover { border-color: var(--uv); background: color-mix(in srgb, var(--uv) 10%, var(--surface)); }
.login .prov:active, .login .prov.busy { transform: scale(0.985); opacity: 0.85; }
.login .or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
.login .or::before, .login .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login .emailrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.login .emailrow .field { margin: 0; }
.login .emailrow input { height: 48px; border-radius: 14px; }
.login .emailrow input.bad { border-color: var(--like); }
.login .emailrow .btn { height: 48px; border-radius: 14px; padding: 0 18px; }
.login .fine { font-size: 12.5px; margin: 18px 0 0; line-height: 1.5; }
.login .fine a { color: var(--neon-2); }
@media (max-width: 480px) { .login { padding: 16px 12px; align-items: end; } .login .card { padding: 24px 18px 18px; border-radius: 20px; } .login .wallbg { grid-template-columns: repeat(3, 1fr); } .login .emailrow { grid-template-columns: 1fr; } }
[data-a11y-motion="reduce"] .login .wallbg img { animation: none; opacity: 1; }
[data-a11y-transparency] .login .card { background: var(--bg-2); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── library ─────────────────────────────────────────────────────────────── */
.lib .page { padding: 16px 20px 40px; max-width: 1600px; }
.lib-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.lib-title .h1 { font-size: 20px; letter-spacing: 0.06em; }
.lib-title .muted { font-size: 13px; margin-top: 2px; }
.lib-head .search { flex: 1 1 260px; max-width: 460px; }
.lib-actions { display: flex; gap: 8px; margin-left: auto; }
.lib-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.lib-filters .chip svg { width: 14px; height: 14px; }
.lib-filters .chip.clear { color: var(--faint); }
.menu .ddsearch { padding: 6px 8px 8px; }
.menu .ddsearch input { width: 100%; height: 34px; border-radius: 10px; }
.menu .ddlist { max-height: 320px; overflow-y: auto; min-width: 240px; }
.menu .ddlist button { display: flex; justify-content: space-between; gap: 16px; }
.menu .ddlist button small { color: var(--faint); }
.menu .ddlist button.on { color: var(--neon-2); }
.lib-grid .day { margin: 18px 0 6px; }
.lib-grid .day header { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; position: sticky; top: 0; z-index: 3; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 8px 0; }
.lib-grid .day header h2 { font: 600 15px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.lib-grid .day header .muted { font-size: 13px; }
.lib-grid .day header .tick { position: static; opacity: 0.35; }
.lib-grid .day header .tick.on, .lib-grid .day header:hover .tick, body.selecting .lib-grid .day header .tick { opacity: 1; }
.lib-grid .row { display: flex; flex-wrap: wrap; gap: 4px; }
.lib-grid .row::after { content: ""; flex-grow: 1000000; }
.ph { position: relative; border-radius: 6px; overflow: hidden; background: var(--surface); cursor: pointer; }
.ph i { display: block; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.ph:hover img { transform: scale(1.02); }
.ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 40%); opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.ph:hover::after, .ph.sel::after { opacity: 1; }
.tick { position: absolute; left: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.35); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity 0.15s, background 0.15s; z-index: 2; }
.tick svg { width: 14px; height: 14px; }
.ph:hover .tick, .ph.sel .tick, body.selecting .ph .tick { opacity: 1; }
.ph.sel .tick, .tick.on { background: var(--uv); border-color: var(--uv); }
.ph.sel { outline: 3px solid var(--uv); outline-offset: -3px; }
.ph.sel img { transform: scale(0.92); border-radius: 4px; }
.ph .vid, .ph .posted, .ph .notei { position: absolute; right: 8px; top: 8px; height: 22px; padding: 0 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; z-index: 2; }
.ph .posted { padding: 0; width: 22px; justify-content: center; } .ph .posted svg, .ph .notei svg { width: 12px; height: 12px; }
.ph .notei { top: auto; bottom: 8px; width: 22px; padding: 0; justify-content: center; }
@media (pointer: coarse) { .ph .tick { opacity: 0.85; } }
.lib-empty { text-align: center; padding: 80px 20px; max-width: 460px; margin: 0 auto; }
.lib-empty .big svg { width: 44px; height: 44px; color: var(--faint); }
.lib-empty b { display: block; font-size: 18px; margin: 12px 0 6px; }
.lib-empty p { color: var(--muted); font-size: 14px; margin-bottom: 18px; line-height: 1.5; }
.selbar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-strong); box-shadow: var(--shadow); min-width: 320px; }
.selbar .sp { flex: 1; }
.selbar .btn.danger { color: var(--like); border-color: rgba(244, 114, 182, 0.4); }
@media (max-width: 680px) { .selbar { bottom: 74px; min-width: 0; width: calc(100% - 24px); } }
.upcard { position: fixed; right: 20px; bottom: 24px; z-index: 41; width: 300px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line-strong); box-shadow: var(--shadow); display: grid; gap: 8px; }
.upcard .h { display: flex; align-items: center; gap: 8px; } .upcard .h b { flex: 1; }
.upcard .bar { height: 6px; border-radius: 3px; background: var(--surface); overflow: hidden; } .upcard .bar i { display: block; height: 100%; background: var(--uv); transition: width 0.2s; }
.upcard .small { font-size: 12.5px; } .upcard .bad { color: var(--like); }
@media (max-width: 680px) { .upcard { right: 12px; left: 12px; width: auto; bottom: 74px; } body.selecting .upcard { bottom: 130px; } }
/* viewer */
.lv { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.lv .stage { position: relative; display: grid; place-items: center; min-width: 0; }
.lv .stage img, .lv .stage video { max-width: calc(100% - 32px); max-height: calc(100vh - 32px); object-fit: contain; border-radius: 6px; }
.lv .top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--muted); font-size: 13px; }
.lv .top .sp { flex: 1; }
.lv .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; display: grid; place-items: center; opacity: 0.7; } .lv .nav:hover { opacity: 1; }
.lv .nav.prev { left: 14px; } .lv .nav.next { right: 14px; } .lv .nav svg { width: 22px; height: 22px; }
.lv .info { border-left: 1px solid var(--line); background: var(--bg-2); padding: 18px 18px 24px; overflow-y: auto; display: grid; gap: 14px; align-content: start; }
.lv .info .h3 { font-size: 15px; }
.lv .kv { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.lv .kv > svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--faint); }
.lv .kv > span { flex: 1; min-width: 0; } .lv .kv a { color: var(--ink); }
.lv .kv .link.sm { font-size: 12.5px; color: var(--neon-2); }
.lv .kv.people span { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { height: 26px; padding: 0 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 12.5px; font-weight: 600; } .pchip:hover { border-color: var(--uv); }
.lv .note { display: grid; gap: 6px; } .lv .note span { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }
.lv .info { text-align: left; }
.lv .note textarea { min-height: 90px; font-size: 14px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); resize: vertical; }
.lv .note textarea:focus { border-color: var(--uv); outline: none; }
.lv .acts { display: flex; gap: 8px; flex-wrap: wrap; } .lv .acts .danger { color: var(--like); }
@media (max-width: 800px) { .lv { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; } .lv .info { border-left: none; border-top: 1px solid var(--line); max-height: 45vh; } .lv .stage img, .lv .stage video { max-height: 55vh; } }
/* composer library picker */
.lpick { display: grid; gap: 10px; }
.lpick .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; max-height: 52vh; overflow-y: auto; }
.lpick .ph { aspect-ratio: 1; } .lpick .ph i { display: none; }
.lpick .foot { display: flex; align-items: center; gap: 10px; } .lpick .foot .sp { flex: 1; }

/* ── profile themes ─────────────────────────────────────────────────────── */
.phead.themed { background: var(--p-bg); color: var(--p-ink); position: relative; isolation: isolate; font-family: var(--pf, var(--ui)); padding-bottom: 16px; }
.phead.themed .banner { background: var(--p-banner); background-size: cover; background-position: 50% var(--p-focus, 50%); height: var(--p-bh); }
.phead.themed.bn-none .banner { height: 28px; background: none; }
.phead.themed .avrow .avatar { border-color: var(--p-bgc); border-radius: var(--p-av-r); width: var(--p-av); height: var(--p-av); font-size: calc(var(--p-av) * 0.34); margin-top: calc(var(--p-av) * -0.375 + 48px); }
.phead.themed.bn-none .avrow { margin-top: 0; }
.phead.themed.bn-none .avrow .avatar { margin-top: 0; }
.phead.themed.ring .avrow .avatar { box-shadow: 0 0 0 3px var(--p-accent); }
.phead.themed .pbody { position: relative; z-index: 1; }
.phead.themed .names .h1 { color: var(--p-ink); }
.phead.themed.caps .names .h1 { text-transform: uppercase; letter-spacing: 0.08em; }
.phead.themed .names .handle, .phead.themed .links, .phead.themed .pstats { color: var(--p-muted); }
.phead.themed .pronouns { color: var(--p-muted); }
.phead .tagline { margin-top: 6px; font-size: 15px; }
.phead.themed .tagline, .phead.themed .bio { color: var(--p-ink); }
.phead.themed .links a, .phead.themed .bio a { color: var(--p-accent); }
.phead.themed .pstats b { color: var(--p-ink); }
.phead.themed .btn.primary { background: var(--p-accent); color: var(--p-on-accent); }
.phead.themed .btn.outline { border-color: var(--p-line); color: var(--p-ink); background: color-mix(in srgb, var(--p-bgc) 60%, transparent); }
.phead.themed .btn.outline:hover { background: var(--p-surface); }
.phead.themed .flag.m { border-color: var(--p-line); }
.phead.themed.card-glass .pbody, .phead.themed.card-outline .pbody { margin-top: 12px; padding: 14px 16px; border-radius: var(--p-r); }
.phead.themed.card-glass .pbody { background: color-mix(in srgb, var(--p-surface) 78%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--p-line); }
.phead.themed.card-outline .pbody { border: 1px solid var(--p-line); }
.phead.themed::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; }
.phead.themed.pat-dots::before { opacity: 1; background-image: radial-gradient(var(--p-line) 1.2px, transparent 1.2px); background-size: 16px 16px; }
.phead.themed.pat-grid::before { opacity: 1; background-image: linear-gradient(var(--p-line) 1px, transparent 1px), linear-gradient(90deg, var(--p-line) 1px, transparent 1px); background-size: 24px 24px; }
.phead.themed.pat-lines::before { opacity: 1; background-image: repeating-linear-gradient(135deg, var(--p-line) 0 1px, transparent 1px 12px); }
.phead.themed .banner, .phead.themed .avrow { position: relative; z-index: 1; }
.phead.font-michroma { --pf: "Michroma", var(--ui); } .phead.font-michroma .names .h1 { font-size: 19px; }
.phead.font-serif { --pf: Georgia, "Times New Roman", "Noto Serif", serif; }
.phead.font-mono { --pf: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
.phead.font-rounded { --pf: ui-rounded, "Nunito", "Varela Round", "Hiragino Maru Gothic ProN", system-ui, sans-serif; }
.phead.themed .names .h1, .phead.themed .btn { font-family: var(--pf, var(--ui)); }
main.center.pbg { background: var(--p-bg); }
main.center.pbg .tabs { background: transparent; }
main.center.pbg .tabs button, main.center.pbg .tabs a { color: var(--p-muted); }
main.center.pbg .tabs button.on, main.center.pbg .tabs a.on { color: var(--p-ink); }
main.center.pbg .tabs button.on::after, main.center.pbg .tabs a.on::after { background: var(--p-accent); }
main.center.pbg .tabs button:hover { background: color-mix(in srgb, var(--p-ink) 8%, transparent); }
main.center.pbg #content, main.center.pbg .pvtabs + * { background: var(--bg-2); color: var(--ink); }
main.center.pbg #note { background: var(--bg-2); }
/* viewer accessibility always wins */
[data-a11y-font="dyslexic"] .phead.themed, [data-a11y-font="dyslexic"] .phead.themed * { font-family: "OpenDyslexic", "Plex", sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; }
[data-a11y-transparency] .phead.themed.card-glass .pbody { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--p-surface); }
[data-a11y-transparency] .phead.themed .btn.outline { background: var(--p-bgc); }
[data-a11y-links] .phead.themed .links a, [data-a11y-links] .phead.themed .bio a { text-decoration: underline; text-underline-offset: 3px; }
[data-a11y-focus] .phead.themed :focus-visible { outline: 3px solid var(--p-ink); outline-offset: 2px; }
.phead.themed :focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
@media (max-width: 680px) { .phead.themed { --p-bh: min(var(--p-bh), 140px); } .phead.themed .avrow .avatar { --p-av: min(var(--p-av), 112px); } }
/* editor */
.cz { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 22px; align-items: start; }
.cz-controls { display: grid; gap: 16px; }
.cz-sec { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 12px; }
.cz-sec h3 { font: 700 13px/1 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin: 0 0 2px; }
.cz-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cz-label { min-width: 72px; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.cz-row .seg { flex-wrap: wrap; }
.cz-row select { height: 36px; border-radius: 10px; }
.cz-color { display: inline-flex; align-items: center; gap: 8px; }
.cz-color input[type=color] { width: 42px; height: 36px; padding: 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.cz-color .hex { width: 96px; height: 36px; border-radius: 10px; font-family: ui-monospace, monospace; font-size: 13px; text-transform: lowercase; }
.cz-range { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; }
.cz-range input[type=range] { flex: 1; accent-color: var(--uv); }
.cz-range output { min-width: 44px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cz-img { display: inline-flex; align-items: center; gap: 8px; }
.cz-img img { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.cz-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cz-presets .preset { display: grid; gap: 6px; justify-items: center; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--muted); }
.cz-presets .preset i { width: 100%; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--c) 0 45%, var(--b) 45%); position: relative; }
.cz-presets .preset i::after { content: ""; position: absolute; left: 8px; bottom: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--a); }
.cz-presets .preset.on { border-color: var(--uv); color: var(--ink); box-shadow: 0 0 0 1px var(--uv); }
.cz-preview { position: sticky; top: 16px; display: grid; gap: 14px; }
.cz-frame { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg-2); }
.cz-frame .center { min-height: 0; border: none; }
.cz-frame .pvtabs button { pointer-events: none; }
.cz-note { font-size: 13px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.cz-a11y { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; }
.cz-a11y .h3 { font-size: 13px; }
.a11y-line { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.a11y-line > span:first-child svg { width: 16px; height: 16px; }
.a11y-line.good > span:first-child { color: var(--repost); } .a11y-line.bad > span:first-child { color: var(--bad); }
.a11y-line .ratio { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.a11y-line em { font-style: normal; font-size: 12px; color: var(--faint); }
@media (max-width: 900px) { .cz { grid-template-columns: 1fr; } .cz-preview { position: static; order: -1; } .cz-presets { grid-template-columns: repeat(4, 1fr); } }

/* ── fixes: native controls, nav overflow, sidebar scroll, pattern behind text ── */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
.lnav { overflow-x: hidden; }
.lnav .me { min-width: 0; max-width: 100%; }
.lnav .me .names { min-width: 0; flex: 1; }
.lnav .me .names b, .lnav .me .names span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rnav { height: auto; max-height: 100vh; align-self: start; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.rnav::-webkit-scrollbar { display: block; width: 6px; }
.rnav::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.rnav::-webkit-scrollbar-track { background: transparent; }
.phead.themed:not(.pat-none) .pbody { margin-top: 12px; padding: 14px 16px; border-radius: var(--p-r); background: var(--p-bgc); }
.phead.themed:not(.pat-none).card-glass .pbody { background: color-mix(in srgb, var(--p-surface) 94%, transparent); }
.phead.themed:not(.pat-none).card-outline .pbody { border: 1px solid var(--p-line); }

/* banner edge: fade / seamless */
.phead.themed.edge-fade .banner { position: relative; }
.phead.themed.edge-fade .banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: linear-gradient(to bottom, transparent, var(--p-bgc)); }
.phead.themed.edge-full { overflow: hidden; }
.phead.themed.edge-full .banner { position: absolute; inset: 0; height: auto; z-index: 0; }
.phead.themed.edge-full .banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--p-bgc) 55%, transparent) 45%, color-mix(in srgb, var(--p-bgc) 80%, transparent) 100%); }
.phead.themed.edge-full .avrow { margin-top: calc(var(--p-bh) - 48px); }
.phead.themed.edge-full .avrow .avatar { margin-top: 0; }
.phead.themed.edge-full .pbody { margin-top: 12px; padding: 14px 16px; border-radius: var(--p-r); background: color-mix(in srgb, var(--p-bgc) 92%, transparent); }
.phead.themed.edge-full.card-outline .pbody { border: 1px solid var(--p-line); }
.phead.themed.edge-full.card-glass .pbody { background: color-mix(in srgb, var(--p-surface) 94%, transparent); }
[data-a11y-transparency] .phead.themed.edge-full .pbody { background: var(--p-bgc); }

.cz-sec h3 { display: flex; align-items: center; gap: 10px; }
.cz-sec h3 .sec-reset { margin-left: auto; font: 600 12px/1 var(--ui); letter-spacing: 0; text-transform: none; color: var(--neon-2); background: none; padding: 4px 0; }
.cz-sec h3 .sec-reset:hover { text-decoration: underline; }
.cz-sec.cz-danger { border-color: color-mix(in srgb, var(--line) 60%, var(--like)); }

/* per-photo like / save */
.mi .pact { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity 0.15s; z-index: 4; }
.mi:hover .pact, .mi:focus-within .pact, .mi .pact:has(.on) { opacity: 1; }
@media (pointer: coarse) { .mi .pact { opacity: 1; } }
.mi .pact button { height: 28px; padding: 0 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: auto; }
.mi .pact button svg { width: 14px; height: 14px; }
.mi .pact button span:empty { display: none; }
.mi .pact .pl.on { color: var(--like); } .mi .pact .pl.on svg { fill: currentColor; }
.mi .pact .ps.on { color: var(--neon-2); } .mi .pact .ps.on svg { fill: currentColor; }
.mgrid .mi .pact { pointer-events: auto; }
.lb .top .lact span:empty { display: none; }
.lb .top .lact.on { color: var(--like); } .lb .top .lact.on svg { fill: currentColor; }
.lb .top #lbSave.on { color: var(--neon-2); }
[data-a11y-counts] .pact span, [data-a11y-counts] .lb .lact span { display: none !important; }
/* one search box: the title-bar search only when the sidebar is hidden */
.topbar .title .mob-search { display: none !important; }
@media (max-width: 1000px) { .topbar .title .mob-search { display: inline-flex !important; margin-left: auto; } }
/* bug report cards (moderation) */
.rep { padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.rep .rhd { display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.rep .rhd b a { color: var(--ink); }
.rep .rbody { font-size: 15px; line-height: 1.5; }
.rep .decide { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

.bugshot { display: grid; gap: 8px; }
.bugshot img { width: 100%; max-height: 220px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.bugshot .row { display: flex; align-items: center; gap: 8px; }
.bugshot-thumb { display: block; margin-top: 8px; width: min(100%, 420px); }
.bugshot-thumb img { width: 100%; border-radius: 10px; border: 1px solid var(--line); }
kbd { font: 600 11.5px/1 var(--ui); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }

.login .signin-err { margin: -8px 0 16px; padding: 10px 12px; border-radius: 12px; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.35); font-size: 13.5px; text-align: left; display: grid; gap: 4px; }
.login .signin-err b { color: var(--ink); } .login .signin-err span { color: var(--muted); font-size: 12.5px; }

/* audit log */
.aud { padding: 12px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; font-size: 14px; }
.aud .aud-hd { display: flex; align-items: center; gap: 8px; }
.aud .aud-hd .aud-txt { flex: 1; min-width: 0; line-height: 1.4; }
.aud .aud-hd .avatar { flex: none; }
.aud .aud-act { color: var(--muted); }
.aud time { font-size: 12.5px; white-space: nowrap; }
.aud .aud-x { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-left: 36px; font-size: 13px; }
.aud .aud-kv small { color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; margin-right: 4px; }
.aud .aud-ip { padding-left: 36px; font-size: 11.5px; font-family: ui-monospace, monospace; }

.flag.mod { background: rgba(124, 92, 255, 0.18); color: var(--neon-2); }
.urow .urow-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ── messages ─────────────────────────────────────────────────────────────── */
.center.dm { display: flex; flex-direction: column; min-height: 100vh; }
.dmwrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); flex: 1; min-height: 0; height: calc(100vh - 0px); }
.dmlist { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.dmhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.dmhead .h1 { font-size: 20px; letter-spacing: 0.06em; }
.dmlist .search { margin: 0 12px 8px; }
.thr { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.thr:hover, .thr.on { background: var(--surface); }
.thr .tx { flex: 1; min-width: 0; } .thr .l1 { display: flex; justify-content: space-between; gap: 8px; font-size: 14.5px; } .thr .l1 time { color: var(--faint); font-size: 12px; white-space: nowrap; }
.thr .l2 { color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thr.unread .l2 { color: var(--ink); font-weight: 600; } .thr .n { min-width: 20px; height: 20px; border-radius: 10px; background: var(--uv); color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; }
.dmview { display: flex; flex-direction: column; min-height: 0; }
.dmempty { padding: 60px 20px; text-align: center; font-size: 15px; }
.dmtop { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-2); z-index: 2; }
.dmtop .names { display: flex; flex-direction: column; line-height: 1.2; color: var(--ink); } .dmtop .names span { color: var(--faint); font-size: 13px; } .dmtop .sp { flex: 1; }
.dmtop .dmback { display: none; }
.dmmsgs { flex: 1; overflow-y: auto; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 6px; }
.msg { max-width: min(78%, 560px); align-self: flex-start; }
.msg .b { padding: 9px 13px; border-radius: 18px 18px 18px 6px; background: var(--surface-2); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.msg.me { align-self: flex-end; } .msg.me .b { background: var(--uv); color: #fff; border-radius: 18px 18px 6px 18px; } .msg.me .b a { color: #fff; text-decoration: underline; }
.msg time { display: block; font-size: 11px; color: var(--faint); margin: 3px 6px 0; } .msg.me time { text-align: right; }
.dmcompose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg-2); }
.dmcompose textarea { flex: 1; min-height: 40px; max-height: 160px; border-radius: 18px; padding: 9px 14px; resize: none; }
.tabbar .tb-dm { position: relative; } .tabbar .tb-dm .dot { position: absolute; top: 12px; right: calc(50% - 16px); width: 9px; height: 9px; border-radius: 50%; background: var(--uv); border: 2px solid var(--bg-2); }
@media (max-width: 800px) { .dmwrap { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 60px); } .dmview { display: none; } body.dm-open .dmview { display: flex; min-height: calc(100vh - 60px); } body.dm-open .dmlist { display: none; } .dmtop .dmback { display: inline-flex; } }
/* banned notice */
.bannote { display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px; background: rgba(248, 113, 113, 0.14); border-bottom: 1px solid rgba(248, 113, 113, 0.4); color: var(--ink); font-size: 14px; position: sticky; top: 0; z-index: 50; }
.bannote svg { width: 18px; height: 18px; flex: none; color: var(--bad); margin-top: 1px; }
/* visibility + audience */
.post .hd .flag.vis { display: inline-flex; align-items: center; gap: 4px; background: rgba(124, 92, 255, 0.16); color: var(--neon-2); } .post .hd .flag.vis svg { width: 11px; height: 11px; }
.post .hd .flag.lockr { background: var(--surface-2); }
.composer .tools select#cVis { max-width: 160px; }
.audrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px; font-size: 13px; }
.audrow .lbl { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); } .audrow .lbl svg { width: 14px; height: 14px; }
.achip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border-radius: 999px; background: rgba(124, 92, 255, 0.16); color: var(--neon-2); font-weight: 600; }
.achip button { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: inherit; } .achip button svg { width: 10px; height: 10px; }
.asearch { position: relative; } .asearch input { height: 28px; width: 150px; border-radius: 999px; padding: 0 10px; font-size: 13px; }
.asearch .sugg { position: absolute; top: 32px; left: 0; z-index: 5; min-width: 220px; }
.phead .uid { font: 600 11.5px/1 ui-monospace, monospace; padding: 3px 7px; border-radius: 6px; background: var(--surface-2); color: var(--muted); margin-left: 4px; cursor: pointer; } .phead .uid:hover { color: var(--ink); }
.flag.note { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
.rcard .rhead { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px 0; font-size: 14px; }
.dmlog { margin-top: 10px; display: grid; gap: 8px; max-height: 360px; overflow-y: auto; }
.dmline { font-size: 14px; padding: 8px 10px; border-radius: 10px; background: var(--surface); }

/* ── events v72: timeline, event page, editor ─────────────────────────── */
.evtop{display:flex;justify-content:flex-end;padding:12px 16px 0}
.evsec{display:flex;align-items:center;gap:8px;padding:18px 16px 8px;font:600 13px/1 var(--head,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.evsec svg{width:15px;height:15px}
.evday{position:relative;margin:14px 0 6px 16px;padding-left:18px;font-size:13px;font-weight:600;color:var(--muted)}
.evday::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;border-radius:50%;background:var(--neon,#7C5CFF);transform:translateY(-50%)}
.evtl{position:relative;padding:0 16px 4px}
.evtl .evrow{margin-left:18px}
.evrow{position:relative;display:flex;gap:12px;align-items:stretch;padding:10px;margin-bottom:10px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);color:inherit;text-decoration:none;transition:border-color .15s}
.evrow:hover{border-color:var(--line-strong)}
.ebnr{flex:0 0 190px;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:var(--img-bg,#111);align-self:center}
.ebnr img,.ebnr video{width:100%;height:100%;object-fit:cover;display:block}
.ebnr.none{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.ebnr.none svg{width:28px;height:28px}
.einfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center}
.einfo b{font-size:15.5px}
.ewhen{font-size:13px;color:var(--ink)}
.ewhen.local{color:var(--muted);font-size:12.5px}
.ehosts{display:flex;align-items:center;gap:4px;margin-top:2px}
.ehosts img{width:20px;height:20px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.ehosts small{color:var(--muted);margin-left:3px}
.emeta2{font-size:12.5px;color:var(--muted)}
.emeta2 i{font-style:normal;color:var(--neon,#7C5CFF)}
.evrow .evsave{position:absolute;top:8px;right:8px}
.evpast{margin:10px 16px}
.evpast summary{cursor:pointer;color:var(--muted);font-size:13.5px;padding:6px 0}
/* event page */
.evnote{margin:12px 16px 0}
.epage{display:flex;gap:18px;padding:16px;align-items:flex-start}
.eposter{flex:0 0 240px;aspect-ratio:2/3;border-radius:14px;overflow:hidden;background:var(--img-bg,#111)}
.eposter img,.eposter video{width:100%;height:100%;object-fit:cover;display:block}
.emeta{flex:1;min-width:0}
.ewhenblk{display:flex;flex-direction:column;gap:2px;margin:8px 0}
.ewhenblk span{display:flex;align-items:center;gap:7px;font-size:14px}
.ewhenblk svg{width:16px;height:16px;color:var(--muted)}
.ewhenblk .local{color:var(--muted);font-size:12.5px;margin-left:23px}
.ehostrow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.ehost{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border:1px solid var(--line);border-radius:999px;color:inherit;text-decoration:none}
.ehost:hover{border-color:var(--line-strong)}
.ehost img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.ehost span{display:flex;flex-direction:column;line-height:1.15}
.ehost b{font-size:13px}
.ehost small{font-size:11px;color:var(--muted)}
.etags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.etags a{font-size:12.5px;color:var(--neon,#7C5CFF);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.eacts{margin-top:12px;gap:8px;flex-wrap:wrap}
.lineup{padding:4px 16px 18px}
.lineup .h3{margin:8px 0}
.lslot{display:flex;gap:14px;padding:9px 0;border-top:1px solid var(--line)}
.ltime{flex:0 0 92px;display:flex;flex-direction:column;line-height:1.25}
.ltime b{font-size:14px}
.ltime small{color:var(--muted);font-size:11.5px}
.lact{flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lgenre{color:var(--muted);font-size:12.5px}
/* editor */
.evform .help{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.evup{display:flex;gap:10px;align-items:center}
.evup .prev{flex:0 0 150px;border-radius:8px;overflow:hidden;background:var(--img-bg,#111);display:flex;align-items:center;justify-content:center;font-size:12px;min-height:44px}
.evup .prev.banner{aspect-ratio:16/9}
.evup .prev.poster{flex-basis:88px;aspect-ratio:2/3}
.evup .prev img,.evup .prev video{width:100%;height:100%;object-fit:cover;display:block}
.upacts{display:flex;gap:6px;flex-wrap:wrap}
.lurow{display:grid;grid-template-columns:180px 1fr 130px 32px;gap:6px;margin-bottom:6px}
.flag.cat{background:color-mix(in srgb,var(--neon,#7C5CFF) 18%,transparent);color:var(--neon,#7C5CFF)}
@media (max-width:700px){
  .epage{flex-direction:column}
  .eposter{width:60%;max-width:260px;align-self:center}
  .ebnr{flex-basis:130px}
  .lurow{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
}