:root { --bg:#000; --bg2:#0b0b0d; --card:#121215; --line:#26262b; --ink:#f2f2f4; --muted:#8e8e98; --accent:#5aa0ff; --danger:#ff6b6b; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", sans-serif; -webkit-text-size-adjust:100%; }
.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px; padding:12px 16px; background:rgba(0,0,0,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.brand { display:flex; color:var(--ink); }
.mark { width:28px; height:28px; display:block; }
.gate-mark .mark { width:64px; height:64px; margin-bottom:8px; }
.who { margin-left:auto; color:var(--muted); font-size:13px; max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sign-out { margin-left:8px; }
.gate { max-width:520px; margin:12vh auto 0; padding:0 20px; text-align:left; }
.gate h1 { font-size:24px; line-height:1.3; margin:0 0 12px; }
.gate p { color:var(--muted); }
.signbtn { min-height:32px; margin:20px 0 8px; }
.fine { font-size:12px; color:var(--muted); }
#app { max-width:660px; margin:0 auto; padding:12px 12px 80px; }
.bar { display:flex; gap:8px; }
#q { flex:1; min-width:0; background:var(--bg2); border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:10px 12px; font:inherit; }
#q:focus { outline:none; border-color:var(--accent); }
.ghost { background:none; border:1px solid var(--line); color:var(--muted); border-radius:10px; padding:0 12px; font:inherit; cursor:pointer; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 4px; }
.chip { border:1px solid var(--line); background:none; color:var(--muted); border-radius:999px; padding:4px 12px; font:inherit; font-size:13px; cursor:pointer; }
.chip.on { background:var(--ink); color:#000; border-color:var(--ink); }
.status { color:var(--muted); font-size:13px; padding:8px 4px; min-height:34px; }
.list { display:flex; flex-direction:column; }
.post { padding:14px 4px 10px; border-bottom:1px solid var(--line); }
.meta { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); min-width:0; }
.dot { width:9px; height:9px; border-radius:50%; flex:none; }
.plat { color:var(--ink); font-weight:700; }
.author { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.when { margin-left:auto; flex:none; }
.title { margin:6px 0 0; font-weight:700; }
.text { margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.post.open .text { display:block; -webkit-line-clamp:unset; }
.note { margin:8px 0 0; padding:8px 10px; background:var(--bg2); border-left:3px solid #8b5cf6; border-radius:6px; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.thumb { margin-top:8px; width:100%; max-height:340px; object-fit:cover; border-radius:12px; background:var(--bg2); display:block; }
.thumb[hidden] { display:none; }
.tags { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.tag { color:var(--accent); font-size:13px; }
.badge { font-size:12px; border-radius:6px; padding:1px 7px; border:1px solid var(--line); color:var(--muted); }
.badge.todo { color:#fbbf24; border-color:#fbbf2466; }
.badge.done { color:#4ade80; border-color:#4ade8066; }
.acts { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:13px; }
.acts button, .acts a { background:none; border:0; padding:4px 0; color:var(--muted); font:inherit; cursor:pointer; text-decoration:none; }
.acts button:hover, .acts a:hover { color:var(--ink); }
.acts .danger:hover { color:var(--danger); }
.empty { color:var(--muted); padding:40px 8px; text-align:center; white-space:pre-line; }
.foot { margin-top:28px; }
.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:#1f1f24; border:1px solid var(--line); padding:10px 16px; border-radius:10px; font-size:14px; max-width:90vw; z-index:9; }
textarea.noteedit { width:100%; min-height:90px; margin-top:8px; background:var(--bg2); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:8px; font:inherit; }