:root { color-scheme:dark; --bg:#100f17; --panel:#1b1925; --line:#34303f; --text:#eeeaf1; --muted:#aaa2b7; --accent:#fa625e; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.7 "Microsoft YaHei","PingFang SC",sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.45; cursor:default; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.skip-link { position:absolute; left:20px; top:-60px; padding:8px; background:var(--panel); z-index:5; }
.skip-link:focus { top:10px; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:80px; border-bottom:1px solid var(--line); padding:16px max(24px,calc((100vw - 1280px)/2)); }
.brand { display:flex; gap:8px; align-items:center; font:900 20px/1.2 Georgia,serif; letter-spacing:1px; white-space:nowrap; }
.brand>span:last-child { color:var(--accent); }
.brand-mark { display:grid; place-items:center; width:30px; height:32px; color:var(--bg); background:var(--accent); font-style:italic; margin-right:5px; }
.site-header nav { display:flex; align-items:center; gap:26px; font-size:13px; color:var(--muted); }
.site-header [aria-current] { color:var(--text); border-bottom:2px solid var(--accent); padding:10px 0; }
#logout { border:0; background:none; color:var(--muted); padding:8px 0; }
.shell { max-width:1280px; margin:auto; padding:54px 24px 70px; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.eyebrow { font-size:11px; letter-spacing:2px; font-weight:bold; color:var(--accent); margin:0 0 12px; }
h1 { margin:0; font-size:clamp(36px,5vw,62px); line-height:1.25; letter-spacing:-2px; font-weight:900; }
h1 em { font-family:Georgia,serif; font-weight:400; color:var(--accent); }
.intro { color:var(--muted); margin:16px 0 0; }
.button { border:1px solid var(--line); background:var(--panel); color:var(--text); padding:10px 18px; min-height:44px; border-radius:4px; }
.primary { background:var(--accent); color:#180e13; border-color:var(--accent); font-weight:700; }
.text-button { border:0; background:none; color:var(--muted); min-height:44px; padding:8px 4px; }
.text-button:hover,a:hover { color:var(--accent); }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 266px; gap:36px; }
.main-column { min-width:0; }
.status { margin:16px 0; min-height:26px; color:#f4bc87; overflow-wrap:anywhere; }
.browse-toolbar,.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.browse-toolbar { border-bottom:1px solid var(--line); }
.tabs { display:flex; gap:20px; flex-wrap:wrap; }
.tabs button { border:0; border-bottom:2px solid transparent; background:none; color:var(--muted); padding:12px 0; min-height:44px; font-size:14px; }
.tabs button[aria-pressed=true] { color:var(--text); border-bottom-color:var(--accent); }
.community-note { border-top:3px solid var(--accent); padding:24px; background:var(--panel); }
.community-note .eyebrow { font-size:9px; letter-spacing:1.5px; }
.community-note h2 { font-size:27px; line-height:1.5; margin:12px 0; }
.community-note p,.sidebar-caption { color:var(--muted); font-size:13px; }
.rule { display:flex; gap:18px; border-top:1px solid var(--line); padding:13px 0; font-size:12px; }
.rule b { color:var(--accent); font-family:Georgia,serif; }
.sidebar-caption { font-size:10px; letter-spacing:1px; padding:16px 4px; }
#reviewButton { margin-top:20px; width:100%; }
.post-card { border-bottom:1px solid var(--line); padding:25px 2px; overflow-wrap:anywhere; }
.post-card:first-child { padding-top:8px; }
.post-card h2 { font-size:22px; line-height:1.5; margin:10px 0; }
.post-excerpt { margin:10px 0 18px; color:var(--muted); white-space:pre-wrap; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.meta { display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.badge { font-size:11px; font-weight:700; letter-spacing:.5px; color:var(--accent); }
.post-cover { display:block; width:100%; height:auto; border:1px solid var(--line); margin:0 0 20px; }
.post-card.featured { padding:0 0 28px; }
.featured h2 { font-size:clamp(23px,3vw,32px); }
.featured .badge::before { content:'本期话题 / '; color:var(--muted); }
.post-detail { overflow-wrap:anywhere; }
.post-detail h2 { font-size:clamp(25px,3vw,38px); line-height:1.45; margin:12px 0 18px; }
.post-body { white-space:pre-wrap; line-height:1.95; margin:26px 0; overflow-wrap:anywhere; }
.post-body a { color:#f7aaa5; text-decoration:underline; text-underline-offset:3px; }
.discussion-poll { border:1px solid var(--line); border-top:3px solid #f0b44d; background:var(--panel); padding:24px; margin:24px 0; scroll-margin-top:24px; }
.discussion-poll h3 { font-size:23px; line-height:1.5; margin:0 0 12px; }
.poll-form { margin-top:18px; }
.poll-choices { border:0; padding:0; margin:0; min-width:0; }
.poll-choices legend { margin-bottom:12px; }
.poll-option { grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:8px 10px; padding:14px 0; cursor:pointer; }
.poll-option input { width:18px; height:18px; margin:0; accent-color:var(--accent); }
.poll-option progress { grid-column:2 / -1; width:100%; height:8px; accent-color:var(--accent); border:0; }
.poll-count { color:var(--muted); font-size:12px; white-space:nowrap; }
.actions { display:flex; gap:16px; margin-top:12px; flex-wrap:wrap; }
.actions button { font-size:12px; }
.reply-heading { margin-top:40px; padding-top:24px; border-top:1px solid var(--line); font-size:20px; }
.reply { border-bottom:1px solid var(--line); padding:18px 0; overflow-wrap:anywhere; }
.reply .post-body { margin:10px 0; }
.composer { border:1px solid var(--line); border-top:3px solid var(--accent); padding:26px; background:var(--panel); margin:0 0 32px; }
.composer h2,.section-heading h2 { margin:0; font-size:22px; }
form { display:grid; gap:16px; }
label { display:grid; gap:7px; font-size:13px; }
input,textarea,select { width:100%; min-width:0; border:1px solid #514956; background:var(--bg); color:var(--text); padding:11px 12px; border-radius:3px; }
textarea { resize:vertical; }
form .button { justify-self:start; }
.muted { color:var(--muted); font-size:12px; margin:0; }
#loginPrompt a,.login-note a { color:var(--accent); text-decoration:underline; }
.login-note { background:var(--panel); padding:18px; color:var(--muted); }
.pagination { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:30px; font-size:12px; color:var(--muted); }
.empty-state { padding:50px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line); }
.review-card { padding:22px; border:1px solid var(--line); margin:20px 0; background:var(--panel); overflow-wrap:anywhere; }
.review-card h3 { margin:10px 0; }
.reports { white-space:pre-wrap; color:#f4bc87; font-size:13px; }
footer { border-top:1px solid rgba(226,216,196,.18); padding:24px; text-align:center; font-size:12px; line-height:2; color:#cfc5b2; }
footer a { color:#eee5d4; text-decoration:none; }
footer a:hover { color:#fff8e9; text-decoration:underline; }
footer span { padding:0 14px; color:var(--accent); }
@media(max-width:800px) { .layout { grid-template-columns:minmax(0,1fr); } .sidebar { display:none; } .sidebar:has(#reviewButton:not([hidden])) { display:block; } .sidebar:has(#reviewButton:not([hidden])) .community-note,.sidebar-caption { display:none; } .shell { padding-top:32px; } }
@media(max-width:480px) { .site-header { padding:14px 18px; flex-wrap:wrap; gap:10px; } .brand { font-size:17px; } .site-header nav { gap:20px; width:100%; justify-content:space-between; } .shell { padding:30px 18px 45px; } .page-heading { align-items:flex-start; flex-direction:column; gap:20px; } h1 { font-size:43px; } .intro { font-size:13px; } .tabs { gap:16px; } .tabs button { font-size:12px; } .browse-toolbar { gap:8px; } .composer { padding:18px; } .post-card h2 { font-size:21px; } }