:root{--bg:#f6f4ef;--card:#fff;--ink:#1d1d1f;--muted:#6b6b70;--line:#e4e0d6;--red:#b3261e;--red2:#8c1d17;--chip:#f1ece2}
@media (prefers-color-scheme:dark){:root{--bg:#121212;--card:#1c1c1e;--ink:#ececec;--muted:#9a9aa0;--line:#2c2c2e;--red:#e5534b;--red2:#ff7b72;--chip:#2a2a2c}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
a{color:var(--red)}
.top{background:var(--red);color:#fff;padding:22px 0 18px;border-bottom:4px solid var(--red2)}
.top h1{margin:0;font-size:34px;letter-spacing:.12em;font-weight:800}
.top h1 a{color:#fff;text-decoration:none}
.tag{margin:4px 0 0;opacity:.9;font-size:14px}
.controls{position:sticky;top:0;z-index:5;background:var(--bg);padding:14px 0 10px;border-bottom:1px solid var(--line)}
#q{width:100%;font-size:16px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:10px;font-size:14px;color:var(--muted)}
select,button{font:inherit;font-size:14px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
button{cursor:pointer}
button:hover{border-color:var(--red)}
.chk{display:flex;gap:4px;align-items:center}
.stats{font-size:13px;color:var(--muted);margin-top:8px}
.sources{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.srccard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--muted)}
.srccard b{color:var(--ink)}
.list{list-style:none;margin:0;padding:0}
.item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:12px 0}
.meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13px;color:var(--muted)}
.meta .who{color:var(--ink);font-weight:600}
.chip{background:var(--chip);border-radius:999px;padding:0 8px;font-size:12px}
.chip.thread{color:var(--red)}
.text{white-space:pre-wrap;word-break:break-word;margin:8px 0 6px;font-size:16px}
.media{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:8px 0}
.media .m{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:var(--chip);cursor:zoom-in;border:0;padding:0}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media .play{position:absolute;inset:auto auto 8px 8px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;border-radius:6px;padding:1px 7px}
.quoted{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:8px 0;font-size:14px;color:var(--muted)}
.quoted .text{font-size:14px;color:var(--ink);margin:4px 0}
.foot2{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);margin-top:6px}
.foot2 a{text-decoration:none}
mark{background:#ffe08a;color:#000;border-radius:3px}
.more{text-align:center;margin:18px 0}
.more button{padding:8px 26px}
.empty{text-align:center;color:var(--muted);padding:40px 0}
.foot{font-size:12px;color:var(--muted);padding:24px 16px 40px;border-top:1px solid var(--line);margin-top:30px}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:50;cursor:zoom-out}
#lightbox[hidden]{display:none}
#lightbox img,#lightbox video{max-width:96vw;max-height:92vh}
@media (max-width:520px){.top h1{font-size:28px}.item{padding:12px;border-radius:12px}.text{font-size:15px}}
