:root { --orange:#df813e; --orange-bright:#ff8a13; --ink:#272727; --panel:#efefef; --line:#b9b9b9; }
* { box-sizing:border-box; }
body { margin:0; min-width:1120px; color:var(--ink); background-color:#252526; background-image:url("assets/web_bg.png"),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-position:center top,center top,center top; background-size:max(1920px,100vw) auto,60px 60px,60px 60px; background-repeat:no-repeat,repeat,repeat; background-attachment:fixed; font-family:"Microsoft YaHei","Noto Sans SC",sans-serif; }
button,input,textarea { font:inherit; } button,a { color:inherit; } a { text-decoration:none; }
.community-shell { min-height:100vh; overflow:hidden; }
.topbar { position:fixed; z-index:100; top:0; left:0; width:100%; height:92px; display:grid; grid-template-columns:360px 1fr 268px; align-items:stretch; color:#f7f7f7; background:rgba(20,15,16,.98); border-bottom:2px solid rgba(255,255,255,.07); }
.brand { display:grid; place-items:center start; padding-left:20px; }.brand img { width:175px; height:65px; object-fit:contain; }
.topbar > nav { display:flex; justify-content:space-around; align-items:stretch; } .topbar > nav > a { min-width:180px; display:grid; place-items:center; position:relative; font-size:29px; font-weight:bold; letter-spacing:5px; transition:color .15s ease; } .topbar > nav > a:hover,.topbar > nav > a.is-active { color:var(--orange-bright); } .topbar > nav > a.is-active::after { content:""; position:absolute; bottom:0; width:182px; height:6px; background:var(--orange-bright); box-shadow:0 -3px 12px rgba(245,125,18,.6); }
.download { background:url("assets/web_download_btn.png") center / 268px 91px no-repeat; }
.account-bar { position:relative; z-index:99; width:100%; height:73px; margin-top:92px; padding:0 max(78px,calc((100vw - 1740px)/2)); display:flex; align-items:center; justify-content:flex-end; gap:12px; color:#f4f4f4; font-size:22px; background:rgba(0,0,0,.3); box-shadow:0 8px 22px rgba(0,0,0,.18); }
.account-bar b { padding:2px 9px; color:#0d3110; border-radius:15px; background:#8df442; font-size:17px; }.account-bar i { height:37px; margin:0 8px; border-left:1px solid #eee; }.account-bar .logout { margin-left:70px; color:#1fbaff; }
.message-indicator { position:relative; width:28px; height:32px; display:block; }.message-indicator img { display:block; width:28px; height:32px; }.message-indicator.has-unread::after { content:""; position:absolute; top:-3px; right:-4px; width:11px; height:11px; border:2px solid #1b1c1d; border-radius:50%; background:#ff2630; }
.community-main { position:relative; width:min(1738px,calc(100vw - 182px)); margin:0 auto; }
.forum { min-height:915px; background:rgba(239,239,239,.97); box-shadow:0 18px 60px rgba(0,0,0,.16); }
.forum-toolbar { height:90px; display:grid; grid-template-columns:840px minmax(330px,414px) 1fr; align-items:center; background:var(--orange); }
.sections { width:640px; align-self:stretch; display:flex; }.section-tab { position:relative; width:50%; padding:0; color:#191919; border:0; background:transparent; font-size:24px; cursor:pointer; }.section-tab.is-active { color:#f6f6f6; font-weight:bold; }.section-tab.is-active::after { content:""; position:absolute; left:50%; bottom:0; width:234px; height:18px; transform:translateX(-50%); background:url("assets/web_community_btn.png") center bottom / 234px 18px no-repeat; }
.search-box { height:54px; padding:0 28px; display:flex; align-items:center; border-radius:29px; background:#f7e7dc; }.search-box input { min-width:0; flex:1; padding:0; color:#333; border:0; outline:0; background:transparent; font-size:20px; }.search-box input::placeholder { color:#343434; }.search-box img { width:30px; height:30px; opacity:.27; }
.sorts { justify-self:end; height:64px; margin-right:109px; display:flex; gap:20px; }.sort-button { width:133px; padding:0; border:0; background:#a75f2d; font-size:23px; cursor:pointer; }.sort-button.is-active { color:#c76f31; background:#f2d1bb; font-weight:bold; }.sort-button:hover { filter:brightness(1.07); }
.forum-body { min-height:825px; padding:12px 42px 38px; }.post-list { display:block; }.post-item { position:relative; display:block; padding:20px 138px 18px 28px; border-bottom:1px solid var(--line); transition:background .15s ease; }.post-item.has-moderation-actions { padding-right:210px; }.post-item:hover { background:rgba(255,255,255,.58); }.post-author { display:flex; align-items:center; gap:20px; }.avatar-link { flex:0 0 88px; }.avatar { width:88px; height:88px; flex:0 0 88px; display:grid; place-items:center; overflow:hidden; color:#fff; border-radius:2px; background:radial-gradient(circle at 32% 20%,#c3a3ff 0 15%,#7154bb 37%,#22255e 72%); box-shadow:inset 0 0 24px rgba(255,255,255,.24); font-size:30px; font-weight:bold; transition:transform .15s,box-shadow .15s; }.avatar-link:hover .avatar { transform:scale(1.04); box-shadow:inset 0 0 24px rgba(255,255,255,.24),0 0 0 3px #df813e; }.author-name { display:block; font-size:24px; font-weight:500; }.author-name:hover { color:#df813e; }.post-author time { display:block; margin-top:13px; color:#111; font-size:17px; }.post-content-link { display:block; }.post-moderation-actions { position:absolute; z-index:2; top:116px; right:16px; display:flex; align-items:center; gap:8px; }.post-moderation-actions form { margin:0; }.post-moderation-button { min-width:76px; height:38px; padding:0 14px; color:#333; border:1px solid #8f8f8f; border-radius:3px; background:#f5f5f5; font-size:16px; font-weight:700; cursor:pointer; transition:color .15s,border-color .15s,background .15s; }.post-moderation-button:hover,.post-moderation-button:focus-visible { color:#fff; outline:0; border-color:#2e6ea3; background:#2e6ea3; }.post-moderation-button.is-publish { color:#17662b; border-color:#4d9c60; background:#edf8ef; }.post-moderation-button.is-publish:hover,.post-moderation-button.is-publish:focus-visible { color:#fff; border-color:#28733b; background:#28733b; }.post-moderation-button.is-delete { color:#a12626; border-color:#c96b6b; background:#fff1f1; }.post-moderation-button.is-delete:hover,.post-moderation-button.is-delete:focus-visible { color:#fff; border-color:#ad2929; background:#ad2929; }
.post-title { margin:14px 0 16px; display:flex; align-items:center; gap:16px; font-size:24px; font-weight:bold; }.pin { flex:0 0 auto; padding:5px 16px; color:#111; background:#ff3942; font-size:20px; }.post-excerpt { margin:0; padding:8px 9px; display:flex; align-items:center; gap:10px; overflow:hidden; color:#393939; background:#c7c8c8; font-size:19px; white-space:nowrap; }.post-excerpt-copy { min-width:0; overflow:hidden; text-overflow:ellipsis; }.post-excerpt-copy .bbs-emote { width:30px; height:30px; margin:0 2px; object-fit:contain; vertical-align:middle; }.excerpt-badge { flex:0 0 auto; padding:1px 8px; border-radius:12px; font-size:15px; font-weight:700; }.excerpt-badge.is-admin { color:#0b5313; background:#66df42; }.excerpt-badge.is-moderator { color:#35124e; background:#d47bff; }.post-meta { margin-top:16px; display:flex; justify-content:space-between; color:#444; font-size:18px; }
.pagination { min-height:82px; padding:28px 130px 4px 28px; display:flex; justify-content:center; align-items:center; gap:8px; }.pagination:empty { display:none; }.page-button { min-width:38px; height:38px; padding:0 11px; color:#555; border:1px solid #bbb; background:#f8f8f8; cursor:pointer; transition:color .15s ease,border-color .15s ease,background .15s ease; }.page-button:hover,.page-button.is-active { color:#fff; border-color:#df813e; background:#df813e; }.page-button:disabled { color:#aaa; border-color:#d5d5d5; background:#eee; cursor:not-allowed; }.page-ellipsis { padding:0 4px; color:#777; }
.empty-state { min-height:700px; padding-top:270px; text-align:center; }.empty-state p { margin:0 0 18px; font-size:28px; }.empty-state button { padding:0; color:#209133; border:0; border-bottom:1px solid currentColor; background:transparent; font-size:26px; cursor:pointer; }.empty-state button:hover { color:#ff7b1b; }.search-empty-state p { color:#555; }
.floating-actions { position:fixed; z-index:20; right:max(108px,calc((100vw - 1738px)/2 + 34px)); top:min(74vh,795px); display:grid; gap:25px; }.floating-actions button,.floating-actions a { width:80px; padding:0; display:grid; justify-items:center; gap:7px; color:#333; border:0; background:transparent; cursor:pointer; }.floating-actions img { width:70px; height:70px; border-radius:50%; transition:transform .18s ease,filter .18s ease; }.floating-actions button:hover img,.floating-actions a:hover img { transform:rotate(-5deg) scale(1.08); filter:brightness(1.08); }.floating-actions span { font-size:16px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
dialog { width:min(620px,calc(100vw - 60px)); padding:0; color:#eee; border:1px solid #d97915; background:linear-gradient(145deg,#241c1c,#111); box-shadow:0 25px 80px #000; } dialog::backdrop { background:rgba(0,0,0,.72); }.dialog-close { float:right; margin:12px 16px 0 0; color:#fff; border:0; background:transparent; font-size:30px; cursor:pointer; } #publishForm { padding:35px 42px 38px; }.dialog-eyebrow { margin:0; color:var(--orange-bright); letter-spacing:3px; font-size:11px; } dialog h2 { margin:6px 0 24px; font-size:27px; } dialog label { display:block; margin-top:16px; font-size:14px; } dialog input,dialog textarea { width:100%; margin-top:7px; padding:12px; color:#fff; border:1px solid #555; background:#0a0a0a; outline-color:var(--orange-bright); } dialog textarea { min-height:130px; resize:vertical; }.dialog-actions { margin-top:24px; display:flex; justify-content:flex-end; gap:12px; }.dialog-actions button { padding:10px 28px; cursor:pointer; }.dialog-actions .cancel { color:#ddd; border:1px solid #666; background:transparent; }.dialog-actions .publish { color:#fff; border:1px solid var(--orange-bright); background:var(--orange-bright); font-weight:bold; }
@media (max-width:1500px) { .forum-toolbar { grid-template-columns:520px minmax(300px,390px) 1fr; }.sorts { margin-right:38px; }.community-main { width:calc(100vw - 120px); }.floating-actions { right:78px; }.account-bar { padding-left:60px; padding-right:60px; } }
@media (max-width:1350px) { .topbar { grid-template-columns:270px 1fr 210px; } .topbar > nav > a { min-width:110px; }.forum-toolbar { grid-template-columns:440px 330px 1fr; }.sorts { gap:10px; }.sort-button { width:100px; }.section-tab { font-size:21px; }.forum-body { padding-left:28px; padding-right:28px; }.post-item { padding-right:125px; } }