.xxzh-community-page { max-width:900px; padding-top:20px; padding-bottom:30px; color:#4e5358; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
.xxzh-community-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }.xxzh-community-heading h1 { font-size:24px; font-weight:700; margin:0; }.xxzh-community-heading a { font-size:13px; color:#999; }.xxzh-community-heading .xxzh-community-publish { color:#f04494; }
.xxzh-community-card { background:#fff; border-radius:8px; padding:20px; margin-bottom:16px; box-shadow:0 2px 12px rgba(116,116,116,.04); }
.xxzh-board-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:20px 12px; }.xxzh-board-item { display:flex; align-items:center; flex-direction:column; gap:10px; color:#777; font-size:13px; }.xxzh-board-item.is-active { color:#f04494; }.xxzh-board-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; font-size:23px; color:#38aaf2; background:#edf7ff; }.board-1 { color:#8e80f8; background:#f3f0ff; }.board-2 { color:#ff9745; background:#fff4e8; }.board-3 { color:#f04494; background:#ffeff7; }
.xxzh-community-search { display:flex; border-radius:8px; background:#fff; margin:0 0 16px; overflow:hidden; }.xxzh-community-search input { flex:1; min-width:0; padding:12px 14px; background:transparent; border:0; color:inherit; font-size:14px; }.xxzh-community-search button { width:44px; border:0; background:transparent; color:#999; }
.xxzh-community-search .screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.xxzh-community-tabs { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; font-size:14px; }.xxzh-community-tabs > * { padding:5px 12px; border-radius:20px; color:#777; }.xxzh-community-tabs .is-active { color:#fff; background:#f04494; }
.xxzh-topic-author { display:flex; align-items:center; gap:10px; margin-bottom:14px; min-width:0; }.xxzh-topic-author > img { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }.xxzh-topic-author > div { min-width:0; }.xxzh-topic-author strong { font-size:14px; font-weight:500; overflow-wrap:anywhere; }.xxzh-topic-author time { display:block; color:#999; font-size:12px; margin-top:2px; }.xxzh-topic-edit { margin-left:auto; font-size:12px; color:#999; }
.xxzh-topic-main { display:block; color:inherit; }.xxzh-topic-main h2 { font-size:17px; font-weight:700; line-height:1.5; margin:0 0 8px; overflow-wrap:anywhere; }.xxzh-topic-main > p { font-size:14px; line-height:1.7; margin:0 0 12px; color:#777; white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.xxzh-topic-images { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }.xxzh-topic-images img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; }.xxzh-topic-images img:nth-child(4) { display:none; }.xxzh-topic-images:has(img:only-child) { grid-template-columns:minmax(0,220px); }.xxzh-topic-images img:only-child { aspect-ratio:4/3; }
.xxzh-topic-boards { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }.xxzh-topic-boards a { font-size:12px; border-radius:5px; padding:3px 8px; background:rgba(41,151,247,.08); color:#2997f7; }.xxzh-topic-video { font-size:14px; color:#2997f7; }
.xxzh-community-back { display:flex; justify-content:space-between; font-size:13px; margin-bottom:16px; }.xxzh-community-back a { color:#999; }.xxzh-topic-detail h1 { font-size:22px; line-height:1.5; font-weight:700; margin-bottom:20px; overflow-wrap:anywhere; }.xxzh-community-content { font-size:16px; line-height:1.9; overflow-wrap:anywhere; }.xxzh-community-content img,.xxzh-community-content video { display:block; max-width:100%; height:auto; margin:12px auto; }.xxzh-community-content iframe { max-width:100%; }
.xxzh-community-empty { text-align:center; padding:40px 20px; color:#aaa; font-size:14px; }.xxzh-community-empty > i { font-size:34px; margin-bottom:8px; }.xxzh-community-empty a { color:#f04494; }
.xxzh-community-pagination { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:24px 0; font-size:14px; }
#xxzh-topic-form { display:flex; flex-direction:column; gap:10px; }#xxzh-topic-form > label { margin:6px 0 0; font-size:14px; }#xxzh-topic-form > input:not([hidden]),#xxzh-topic-form > select { padding:10px 12px; font-size:16px; border:1px solid #e5e7eb; border-radius:8px; width:100%; background:transparent; color:inherit; }
.xxzh-topic-toolbar { display:flex; gap:16px; padding:10px 12px; background:#f5f6f7; border-radius:8px 8px 0 0; }.xxzh-topic-toolbar button { padding:0; font-size:14px; border:0; color:#777; background:transparent; }
#xxzh-topic-content { min-height:260px; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; margin-top:-10px; font-size:16px; line-height:1.8; overflow-wrap:anywhere; }#xxzh-topic-content:empty:before { content:attr(data-placeholder); color:#aaa; pointer-events:none; }#xxzh-topic-content img,#xxzh-topic-content video { max-width:100%; height:auto; display:block; margin:12px auto; }#xxzh-topic-status { font-size:13px; margin:0; color:#999; }#xxzh-topic-status.is-error { color:#d93838; }
.xxzh-topic-actions { display:flex; gap:12px; }.xxzh-topic-actions button { flex:1; min-height:44px; border:0; border-radius:8px; font-size:14px; color:#777; background:#eee; }.xxzh-topic-actions button[value="publish"] { color:#fff; background:#f04494; }#xxzh-topic-form button:disabled { opacity:.6; }
.xxzh-publish-sheet { border:0; border-radius:18px 18px 0 0; padding:20px 16px max(20px,env(safe-area-inset-bottom)); position:fixed; top:auto; bottom:0; left:0; right:0; width:min(100%,520px); max-width:100%; margin:0 auto; color:#4e5358; background:#fff; box-shadow:0 -8px 40px #0001; }.xxzh-publish-sheet::backdrop { background:rgba(0,0,0,.35); }.xxzh-publish-sheet h2 { font-size:17px; text-align:center; font-weight:700; margin:0 0 16px; }.xxzh-publish-sheet a { display:flex; align-items:center; gap:12px; padding:16px 12px; border-radius:10px; color:inherit; font-size:16px; }.xxzh-publish-sheet a > i:first-child { width:28px; color:#f04494; font-size:23px; }.xxzh-publish-sheet a > span { flex:1; }.xxzh-publish-sheet a:hover { background:#fff2f8; }.xxzh-publish-sheet [data-close-publish] { display:block; width:100%; min-height:44px; border:0; border-radius:10px; background:#f5f6f7; color:#777; font-size:15px; margin-top:12px; }.xxzh-publish-sheet p { text-align:center; color:#999; font-size:14px; }
[data-bs-theme="dark"] .xxzh-community-page { color:#e5eef7; }[data-bs-theme="dark"] .xxzh-community-card,[data-bs-theme="dark"] .xxzh-community-search,[data-bs-theme="dark"] .xxzh-publish-sheet { background:#21242b; color:#e5eef7; }
@media(max-width:767.98px){.xxzh-community-page { padding:12px 10px 24px; }.xxzh-community-card { padding:16px; }.xxzh-board-list { padding:16px 8px; }.xxzh-community-heading h1 { font-size:21px; }.xxzh-topic-detail h1 { font-size:20px; }}