.community-hub { margin-top:42px; scroll-margin-top:95px; }
.eyebrow { color:#e2bd81; font-size:10px; font-weight:750; letter-spacing:.16em; }
.community-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.community-heading h2 { font-size:32px; font-weight:650; letter-spacing:-.04em; margin:7px 0; line-height:1.3; }.title-dot { color:#e6be78; }
.community-heading p { color:#9babbe; margin:0; font-size:13px; }
.primary-button,.secondary-button { display:inline-flex; justify-content:center; align-items:center; gap:18px; min-height:42px; border-radius:8px; padding:10px 16px; font-size:12px; font-weight:700; cursor:pointer; }
.primary-button { background:linear-gradient(115deg,#f3d6a0,#d2a25e); color:#2c2317; border:1px solid #e8c18a; box-shadow:inset 0 1px 0 #fff5; }
.secondary-button { color:#ddc292; background:#23334a; border:1px solid #51617a; }.primary-button:hover { background:#efcd94; }.secondary-button:hover { background:#35475f; border-color:#b39b70; }button:disabled { opacity:.55; cursor:wait; transform:none; }
.community-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(310px,1fr); gap:20px; align-items:start; }
.news-board { min-width:0; }.news-filters { display:flex; gap:5px; background:#101c2d; padding:7px; border:1px solid #33445d; border-radius:11px; }
.news-filters button { flex:1; border:1px solid transparent; border-radius:7px; padding:10px 6px; font-size:12px; font-weight:650; color:#aabbd0; background:transparent; cursor:pointer; }
.news-filters button[aria-pressed=true] { color:#edce97; border-color:#7a704f; background:#c29d441c; }.news-filters button:hover { transform:none; background:#283b53; box-shadow:none; }
#news-status { font-size:10px; color:#91a4bf; padding:0 3px; margin:14px 0; min-height:16px; }
.news-list { display:grid; gap:13px; }.news-card { padding:23px; background:linear-gradient(140deg,#1a2a40,#132135); border:1px solid #34465f; border-radius:12px; }.news-card.pinned { border-color:#927a51; background:radial-gradient(ellipse at 100% 0%,#b69a441c,transparent 75%),#192a40; }
.news-meta { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }.news-tag { padding:3px 8px; border-radius:5px; font-size:10px; font-weight:700; background:#75aef41c; color:#adcff6; border:1px solid #6794c64d; }.tag-notice { background:#bc935020; border-color:#bca0704d; color:#eac48c; }.tag-event { background:#a58ad41a; border-color:#a98bd24d; color:#d3b7f4; }.pinned-label { color:#d4b680; font-size:10px; }.news-meta time { margin-left:auto; color:#90a4bf; font-size:10px; }
.news-card h3 { margin:16px 0 10px; font-size:20px; line-height:1.5; letter-spacing:-.02em; overflow-wrap:anywhere; }.news-excerpt { color:#a9bbd3; font-size:13px; line-height:1.85; margin:0 0 21px; overflow-wrap:anywhere; }
.news-card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid #33445e; padding-top:15px; }.news-card-footer>span { font-size:8px; color:#8fa2bd; letter-spacing:.1em; }.read-post { flex-shrink:0; background:none; border:0; color:#e9c58f; font-size:12px; padding:7px 0 7px 8px; cursor:pointer; }.read-post:hover { box-shadow:none; }
.news-empty { min-height:430px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:45px 35px; text-align:center; border:1px solid #354861; border-radius:13px; background:radial-gradient(ellipse at 50% 25%,#46659135,transparent 65%),linear-gradient(145deg,#17273d,#101d30); }
.empty-emblem { display:grid; place-items:center; width:76px; height:76px; margin-bottom:30px; border:1px solid #ad915b88; outline:1px solid #ad915b22; outline-offset:8px; border-radius:21px; background:linear-gradient(135deg,#b4985730,#30415e); color:#e5c389; font-size:25px; font-weight:800; letter-spacing:-.06em; }.news-empty h3 { font-size:23px; line-height:1.4; margin:13px 0; max-width:310px; }.news-empty p { font-size:13px; color:#9eafc6; line-height:1.9; max-width:340px; margin:0; }.load-news { margin-top:15px; width:100%; }
.community-chat { position:relative; border:1px solid #43546c; border-radius:13px; background:#111e31; overflow:hidden; }.community-chat>header { display:flex; align-items:center; gap:11px; padding:20px 17px; border-bottom:1px solid #33465f; background:linear-gradient(120deg,#253951,#1b2b40); }.chat-symbol { display:grid; place-items:center; width:37px; height:37px; flex-shrink:0; background:#e7bb7020; border:1px solid #ac976057; border-radius:10px; color:#e6c188; font-size:23px; }.community-chat h3 { margin:0; font-size:16px; font-weight:650; }.community-chat header p { margin:3px 0 0; color:#9cafc7; font-size:10px; }
.connection-state { margin-left:auto; font-size:9px; color:#b5c1d4; text-align:right; max-width:80px; }.connection-state::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:#b4a573; margin-right:5px; vertical-align:middle; }.connection-state[data-state=online] { color:#9fd2b8; }.connection-state[data-state=online]::before { background:#77c39f; box-shadow:0 0 8px #77c39f50; }
.chat-welcome { margin:16px 17px 0; padding:12px 14px; background:#2d435f4a; border:1px solid #38506e; border-radius:8px; }.chat-welcome b { color:#d3deef; font-size:12px; }.chat-welcome p { color:#95a9c4; font-size:11px; line-height:1.7; margin:4px 0 0; }
.chat-messages { height:320px; overflow-y:auto; overscroll-behavior:contain; padding:20px 17px; scrollbar-width:thin; scrollbar-color:#405572 transparent; }.chat-empty { color:#8d9fb9; font-size:12px; text-align:center; padding:70px 20px; line-height:1.9; }
.chat-message { display:flex; gap:9px; margin-bottom:17px; }.chat-avatar { width:29px; height:29px; display:grid; place-items:center; flex-shrink:0; border-radius:9px; background:#283d58; color:#e2c291; border:1px solid #4a5a71; font-size:11px; font-weight:700; }.chat-message-content { min-width:0; flex:1; }.chat-message-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }.chat-message-meta b { font-size:11px; color:#d3def0; overflow-wrap:anywhere; }.guest-badge { font-size:8px; color:#91a4bf; }.chat-message-meta time { color:#8295b0; font-size:9px; margin-left:auto; }.chat-message-content p { background:#1d3049; border:1px solid #304763; border-radius:0 9px 9px; padding:8px 11px; margin:5px 0 0; color:#bbcae0; font-size:12px; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
.community-chat form { padding:16px 17px 18px; border-top:1px solid #33465f; background:#142339; }.community-chat label,.editor-body label { display:block; color:#becbe0; font-size:11px; font-weight:600; margin-bottom:7px; }.community-chat label span { color:#8196b2; font-weight:400; }
.community-chat input,.community-chat textarea,.editor-body input:not([type=checkbox]),.editor-body select,.editor-body textarea { width:100%; border:1px solid #3d516f; border-radius:8px; color:#e2ebf7; background:#0d1a2c; padding:10px 12px; font:12px/1.6 Inter,"Segoe UI",sans-serif; outline:0; }.community-chat input:focus,.community-chat textarea:focus,.editor-body input:focus,.editor-body select:focus,.editor-body textarea:focus { border-color:#d3b57a; box-shadow:0 0 0 3px #d3b57a12; }.community-chat textarea { margin-top:10px; resize:vertical; min-height:68px; max-height:180px; }.community-chat input::placeholder,.community-chat textarea::placeholder,.editor-body input::placeholder,.editor-body textarea::placeholder { color:#7187a5; }
.chat-compose-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }.chat-compose-bottom>span { color:#8499b6; font-size:9px; }.chat-compose-bottom button { min-height:36px; padding:7px 14px; font-size:11px; }.chat-rules { display:block; font-size:9px; color:#8599b5; line-height:1.8; margin-top:10px; }#chat-feedback,#editor-feedback { color:#e1bd87; font-size:12px; line-height:1.7; margin:8px 0 0; }#chat-feedback:empty,#editor-feedback:empty { display:none; }.chat-new { display:block; width:calc(100% - 34px); margin:0 17px 12px; border:1px solid #8d805e; border-radius:6px; background:#293b52; color:#ead1a6; cursor:pointer; font-size:11px; padding:7px; }
.community-dialog { position:fixed; width:min(720px,calc(100% - 30px)); max-height:88svh; padding:0; border:1px solid #59667d; border-radius:15px; color:#e9eff9; background:#152338; box-shadow:0 35px 100px #0009; overflow-y:auto; }.community-dialog::backdrop { background:#050b17cc; backdrop-filter:blur(7px); }.community-close { position:absolute; top:12px; right:12px; width:34px; height:34px; border:1px solid #5e718b; border-radius:8px; color:#dbe7f8; background:#15283e; cursor:pointer; font-size:23px; }.community-dialog>header { padding:35px 32px 25px; background:linear-gradient(130deg,#263c56,#1a2c44); border-bottom:1px solid #3a506c; }.community-dialog h2 { font-size:28px; line-height:1.45; margin:12px 20px 10px 0; overflow-wrap:anywhere; }.community-dialog header p { color:#9db0cb; font-size:12px; margin:0; }.article-body { padding:30px 32px 38px; font-size:15px; line-height:2; white-space:pre-wrap; overflow-wrap:anywhere; }.editor-body { padding:25px 32px 32px; }.editor-body label { margin-top:15px; }.editor-body input,.editor-body select { min-height:43px; }.editor-body textarea { resize:vertical; }.editor-body .primary-button { margin-top:20px; }.editor-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:end; }.editor-row .pin-label { display:flex; align-items:center; gap:8px; margin-bottom:11px; }.pin-label input { accent-color:#e2bd7e; }.editor-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }.editor-actions .secondary-button { margin-top:20px; }
@media(max-width:1180px) { .community-layout { grid-template-columns:minmax(0,1fr) minmax(285px,.9fr); gap:15px; }.community-chat>header { gap:8px; padding-inline:14px; }.chat-symbol { display:none; }.news-card { padding:19px; }.news-card-footer { align-items:flex-start; }.news-card-footer>span { max-width:105px; } }
@media(max-width:980px) { .community-layout { grid-template-columns:1fr; }.community-chat { max-width:none; }.chat-symbol { display:grid; }.community-heading { align-items:flex-start; }.community-heading h2 { font-size:28px; }.community-manage { font-size:10px; padding:8px 12px; gap:8px; }.news-empty { min-height:330px; }.chat-messages { height:310px; } }
@media(max-width:600px) { .community-heading { flex-direction:column; gap:16px; }.community-heading h2 { font-size:28px; }.community-heading p { font-size:12px; }.community-manage { font-size:11px; }.news-filters button { font-size:11px; }.news-meta time { width:100%; margin-left:0; }.news-card h3 { font-size:19px; }.news-card-footer>span { max-width:none; font-size:7px; }.news-empty { padding:35px 22px; }.news-empty h3 { font-size:21px; }.community-dialog>header,.editor-body,.article-body { padding-inline:22px; }.community-dialog h2 { font-size:24px; }.editor-row { grid-template-columns:1fr; gap:0; }.editor-row .pin-label { margin-top:16px; }.community-chat input,.community-chat textarea,.editor-body input:not([type=checkbox]),.editor-body select,.editor-body textarea { font-size:16px; } }

/* Compact news directory, following the supplied forum reference. */
.community-layout { grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr); gap:18px; }
.news-board { color-scheme:light; padding:16px 15px 12px; background:#fff; color:#263345; border:1px solid #dedfe2; border-radius:5px; box-shadow:0 3px 14px #0002; }
.news-board-title { margin:0; padding:0 0 12px; border-bottom:1px solid #eceef1; font-size:15px; line-height:1.4; font-weight:700; color:#586170; }
.news-filters { display:flex; flex-wrap:wrap; gap:5px; padding:22px 0 11px; border:0; border-bottom:1px solid #e6e8eb; border-radius:0; background:transparent; }
.news-filters button { flex:1 0 auto; white-space:nowrap; padding:7px 12px; min-height:33px; border:1px solid #dadddf; border-radius:20px; background:#fff; color:#586170; font-size:11px; font-weight:650; line-height:1.4; }
.news-filters button[aria-pressed=true] { background:#199bff; border-color:#199bff; color:#fff; box-shadow:0 2px 5px #199bff30; }.news-filters button:hover { color:#087fcf; border-color:#85caff; background:#f1f9ff; transform:none; box-shadow:none; }.news-filters button[aria-pressed=true]:hover { background:#0789ee; color:#fff; }
.news-board button:focus-visible,.news-list:focus-visible { outline:2px solid #078de9; outline-offset:2px; }
#news-status { margin:0; padding:0; height:0; min-height:0; overflow:hidden; }.news-board:has(.news-list:empty) #news-status { height:auto; padding:20px 5px; color:#738095; }
.news-list { display:block; height:480px; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#919191 #f7f7f7; overscroll-behavior:contain; }
.news-list::-webkit-scrollbar { width:9px; }.news-list::-webkit-scrollbar-track { background:#f6f6f6; }.news-list::-webkit-scrollbar-thumb { background:#969696; border:2px solid #f6f6f6; border-radius:9px; }
.news-row { display:grid; grid-template-columns:89px minmax(0,1fr) 43px; align-items:center; gap:10px; min-height:38px; padding:8px 10px 8px 12px; border-bottom:1px solid #edf0f2; transition:background .15s; }.news-row:hover { background:#f4f9fd; }.news-row.is-pinned { background:#fffdf4; }.news-row:last-child { border-bottom:0; }
.news-row .news-tag { display:block; width:89px; padding:3px 5px; border:0; border-radius:14px; text-align:center; white-space:nowrap; font-size:10px; font-weight:750; line-height:1.4; color:#fff; background:#179aff; }
.news-row .tag-notice { background:#189bff; }.news-row .tag-event { background:#ec5065; }.news-row .tag-feature { background:#782bdf; }.news-row .tag-guide { background:#ff8e10; }.news-row .tag-character { background:#1caa88; }.news-row .tag-ranking { background:#ffdf00; color:#292608; }.news-row .tag-news { background:#5b78c3; }
.news-row-content { display:flex; align-items:center; gap:6px; min-width:0; }.news-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0; color:#213246; background:none; border:0; border-radius:0; font-size:12px; font-weight:400; text-align:left; line-height:1.65; cursor:pointer; }.news-title:hover,.news-title:active { color:#0a88d9; text-decoration:underline; background:none; transform:none; filter:none; box-shadow:none; }.row-pin { color:#b79332; font-size:8px; flex-shrink:0; }
.news-views { display:inline-flex; align-items:center; gap:4px; color:#929ba8; font-size:11px; white-space:nowrap; flex-shrink:0; }.news-views::before { content:'('; }.news-views::after { content:')'; }.view-eye { display:inline-block; position:relative; width:12px; height:8px; border:1px solid #97a0ad; border-radius:70% 30% / 70% 30%; transform:rotate(35deg); }.view-eye::after { content:''; position:absolute; inset:2px 4px; background:#97a0ad; border-radius:50%; }
.news-row-date { color:#929ba8; text-align:right; font-size:11px; white-space:nowrap; }
.news-board .news-empty { min-height:100%; padding:35px 24px; border:0; border-radius:0; background:linear-gradient(180deg,#fff,#f7fafc); }.news-board .empty-emblem { width:60px; height:60px; background:#edf6ff; border-color:#c7dcef; outline-color:#edf3fa; color:#5598cf; font-size:21px; }.news-board .news-empty .eyebrow { color:#718ca4; }.news-board .news-empty h3 { color:#52657b; font-size:20px; }.news-board .news-empty p { color:#8994a3; font-size:12px; }
@media(max-width:1180px) { .community-layout { grid-template-columns:minmax(0,1.6fr) minmax(285px,1fr); }.news-filters button { padding-inline:9px; }.news-row { grid-template-columns:75px minmax(0,1fr) 38px; gap:8px; padding-inline:6px; }.news-row .news-tag { width:75px; font-size:9px; } }
@media(max-width:980px) { .community-layout { grid-template-columns:1fr; }.news-row { grid-template-columns:89px minmax(0,1fr) 43px; padding-inline:10px; }.news-row .news-tag { width:89px; font-size:10px; } }
@media(max-width:600px) { .news-board { padding:14px 10px 10px; }.news-filters { gap:6px; padding-top:16px; }.news-filters button { flex:1 0 29%; font-size:11px; padding:8px 5px; }.news-list { height:450px; }.news-row { grid-template-columns:70px minmax(0,1fr) 33px; gap:7px; padding:10px 3px; align-items:start; }.news-row .news-tag { width:70px; font-size:9px; margin-top:2px; }.news-row-content { flex-wrap:wrap; gap:3px 5px; }.news-title { flex:1 1 100%; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:12px; }.news-views { font-size:10px; }.news-row-date { font-size:10px; margin-top:3px; }.row-pin { display:none; } }

/* Videos fill the lower news panel; chat shares its light forum palette. */
:root { --chat-member:#17863c; --chat-admin:#dc2626; --chat-mod:#a87800; }
.news-list { height:auto; min-height:205px; max-height:280px; }.news-board .news-empty { min-height:230px; padding:24px; }.news-board .empty-emblem { display:none; }
.news-guides { margin-top:20px; padding-top:17px; border-top:1px solid #e8ecf0; }.news-guides-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }.news-guides-heading h3 { margin:0; color:#556373; font-size:15px; }.news-guides-heading>span { font-size:8px; font-weight:750; letter-spacing:.09em; border:1px solid #d5e7f4; background:#eef7ff; color:#4285b6; border-radius:4px; padding:3px 6px; }.news-guides>p { color:#8a95a2; font-size:11px; margin:5px 0 15px; }
.news-guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.news-guide { display:flex; flex-direction:column; padding:0 0 12px; overflow:hidden; min-width:0; text-align:left; background:#fff; border:1px solid #dfe6ed; border-radius:8px; cursor:pointer; }.news-guide:hover { border-color:#76b7e8; box-shadow:0 4px 12px #3983b91c; transform:translateY(-2px); }.guide-cover { display:block; position:relative; width:100%; aspect-ratio:16/10; background:#273448; overflow:hidden; }.guide-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#0a172466,transparent 65%); }.guide-cover img { width:100%; height:100%; object-fit:cover; transition:transform .2s; }.news-guide:hover img { transform:scale(1.04); }.guide-cover i { position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:34px; height:34px; border:1px solid #ffffffc9; border-radius:50%; background:#fffffff0; color:#168feb; font-style:normal; font-size:13px; padding-left:2px; box-shadow:0 3px 15px #0004; }.guide-cover small { position:absolute; z-index:1; left:8px; bottom:7px; color:#fff; font-size:8px; letter-spacing:.06em; }.news-guide>b { font-size:12px; color:#344e66; margin:11px 9px 4px; line-height:1.5; }.news-guide>span:last-child { font-size:10px; color:#8a97a4; margin-inline:9px; line-height:1.5; }.news-guide-note { display:block; font-size:10px; color:#98a2af; margin:13px 0 3px; line-height:1.7; }
.demo-video-dialog { width:min(960px,calc(100% - 28px)); }.demo-video-dialog video { display:block; width:100%; max-height:62svh; background:#000; }.demo-video-note,#demo-video-error { margin:15px 24px; font-size:12px; color:#b6c8de; }
.community-chat { color-scheme:light; background:#fff; border:1px solid #dce1e7; border-radius:6px; color:#3f4c5b; box-shadow:0 3px 14px #0002; }.community-chat>header { background:#fff; border-bottom:1px solid #e6ebef; padding:18px 17px; }.community-chat h3 { color:#546171; }.community-chat header p { color:#8e99a6; }.chat-symbol { color:#2794e5; border-color:#c7e6fc; background:#edf7ff; }.connection-state { color:#8995a2; }.connection-state[data-state=online] { color:#39835a; }.connection-state[data-state=online]::before { background:#39a46b; }
.chat-welcome { background:#f1f8ff; border-color:#dbeaf7; }.chat-welcome b { color:#477295; }.chat-welcome p { color:#7990a4; }.chat-messages { background:#fff; height:310px; scrollbar-color:#bdc5cf #f7f9fb; }.chat-empty { color:#8798aa; }.chat-avatar { background:#eef5fa; color:#6191b1; border-color:#dbe6ee; }.chat-message-meta b { color:#4a5a6c; }.chat-message-meta time { color:#9aa6b2; }.chat-message-content p { background:#f4f7fa; border-color:#e2e9ef; color:#506275; }
.role-label { font-size:11px; font-weight:750; white-space:nowrap; }.role-label[data-role=member] { color:var(--chat-member); }.role-label[data-role=admin] { color:var(--chat-admin); }.role-label[data-role=mod] { color:var(--chat-mod); }
.chat-identity-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid #e9edf2; padding:12px 17px; background:#fafcfe; color:#8a98a8; font-size:10px; }.chat-identity-bar button { border:0; background:none; color:#328ac5; padding:3px 0; font-size:10px; cursor:pointer; }.chat-identity-bar button:hover { box-shadow:none; transform:none; text-decoration:underline; }
.community-chat form { background:#fff; border-color:#e7ecf1; padding-top:13px; }.community-chat label { color:#788899; }.community-chat input,.community-chat textarea { color:#42586c; background:#fff; border-color:#dce3ea; box-shadow:inset 0 1px 3px #192b3b04; }.community-chat input::placeholder,.community-chat textarea::placeholder { color:#a0acb9; }.community-chat input:focus,.community-chat textarea:focus { border-color:#6eb9ef; box-shadow:0 0 0 3px #179aff10; }.community-chat .primary-button { background:#199bff; border-color:#199bff; color:#fff; box-shadow:0 2px 5px #199bff22; }.community-chat .primary-button:hover { background:#0a87e7; }.chat-compose-bottom>span,.chat-rules { color:#99a5b2; }#chat-feedback { color:#397eac; }.chat-new { color:#3288c5; border-color:#cbe6fb; background:#f0f8fe; }
.chat-colors-form { margin-top:30px; border-top:1px solid #40536d; padding-top:20px; }.chat-colors-form h3 { margin:0; font-size:18px; }.chat-colors-form>p { color:#a6b7ce; font-size:12px; line-height:1.8; }.role-color-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.role-color-grid label { padding:13px; border:1px solid #3b506c; border-radius:9px; background:#102036; }.editor-body .role-color-grid input[type=color] { display:block; padding:3px; width:100%; height:42px; margin-block:10px; cursor:pointer; }.role-color-grid label>span { display:block; background:#fff; border-radius:5px; padding:10px; font-size:13px; font-weight:750; }#staff-feedback,#color-feedback { color:#e2c58f; font-size:12px; }.editor-body .pin-label input { min-height:0; }
@media(max-width:1180px) { .news-guide-grid { gap:7px; }.news-guide>b { font-size:11px; }.news-guide>span:last-child { font-size:9px; } }
@media(max-width:600px) { .news-list { max-height:310px; height:auto; min-height:200px; }.news-guide-grid { grid-template-columns:1fr; gap:10px; }.news-guide { display:grid; grid-template-columns:110px 1fr; grid-template-rows:auto auto; column-gap:0; padding:0; align-items:center; }.guide-cover { grid-row:1/3; height:100%; min-height:80px; aspect-ratio:auto; }.news-guide>b { margin:12px 12px 3px; font-size:12px; align-self:end; }.news-guide>span:last-child { margin:0 12px 12px; font-size:10px; align-self:start; }.role-color-grid { grid-template-columns:1fr; }.chat-messages { height:320px; } }

.guide-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.guide-pagination button { border:1px solid #d5e7f4; border-radius:7px; padding:7px 12px; color:#267dbd; background:#f0f8ff; font-size:11px; cursor:pointer; }
.guide-pagination button:disabled { opacity:.4; cursor:default; }
.guide-pagination span { font-size:11px; color:#75869a; }

/* Equal-height columns on desktop; the scrolling areas absorb extra space. */
@media(min-width:981px) {
  .community-layout { align-items:stretch; }
  .news-board,.community-chat { display:flex; flex-direction:column; min-width:0; }
  .news-board-title,.news-filters,.news-guides { flex-shrink:0; }
  .news-list { flex:1 1 280px; height:0; min-height:205px; max-height:none; }
  .community-chat>header,.chat-welcome,.chat-identity-bar,.community-chat>form,.chat-new { flex-shrink:0; }
  .chat-messages { flex:1 1 310px; height:0; min-height:250px; }
}

/* Messenger-style header and compact message interactions. */
.community-chat .messenger-symbol { display:grid; background:#edf7ff; border-color:#c8e5ff; width:39px; height:39px; padding:5px; }.messenger-symbol svg { display:block; width:28px; height:28px; }
.chat-message { display:block; margin-bottom:19px; }.chat-message-meta { gap:5px; }.chat-message-content { width:100%; }.chat-message-content>p { margin-top:6px; border-radius:0 9px 9px; }.chat-message-actions { display:flex; gap:12px; align-items:center; padding:4px 0 0; }
.chat-message-actions button { padding:3px 0; min-height:25px; background:none; border:0; border-radius:3px; color:#8c9bad; font-size:10px; line-height:1.4; cursor:pointer; }.chat-message-actions button:hover { transform:none; box-shadow:none; color:#198cdd; text-decoration:underline; }.chat-message-actions .chat-like[aria-pressed=true] { color:#1e8cd7; font-weight:650; }.chat-message-actions .chat-delete { margin-left:auto; color:#d45a5a; }.chat-message-actions .chat-delete:hover { color:#ba2222; }
.chat-quote { border-left:3px solid #a8cfee; background:#f1f7fc; border-radius:0 6px 6px 0; margin:8px 0 0; padding:8px 10px; display:flex; flex-direction:column; gap:4px; }.chat-quote b { color:#5681a5; font-size:10px; }.chat-quote span { color:#8a9eb0; font-size:11px; line-height:1.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-reply-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:9px 11px; border-left:3px solid #199bff; border-radius:4px; background:#f0f8ff; }.chat-reply-bar>div { min-width:0; }.chat-reply-bar b { color:#3685be; font-size:11px; }.chat-reply-bar p { margin:3px 0 0; color:#8a9cac; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.chat-reply-bar button { width:28px; height:28px; flex-shrink:0; padding:0; border:0; border-radius:50%; background:#e5f1fc; color:#5b8bad; font-size:19px; cursor:pointer; }
.chat-compose-tools { display:flex; align-items:center; gap:10px; position:relative; }.chat-compose-tools>span { color:#99a5b2; font-size:9px; }#emoji-toggle { display:grid; place-items:center; width:33px; height:33px; padding:0; border:1px solid #dce8f3; border-radius:8px; color:#3998d9; background:#f2f8fe; cursor:pointer; }#emoji-toggle>span { font-size:25px; line-height:1; }#emoji-toggle:hover,#emoji-toggle[aria-expanded=true] { border-color:#8dc7ee; background:#e6f4ff; transform:none; box-shadow:none; }
.emoji-picker { position:absolute; z-index:10; bottom:calc(100% + 10px); left:0; width:244px; display:grid; grid-template-columns:repeat(6,1fr); gap:3px; padding:10px; border:1px solid #d6e3f1; border-radius:12px; background:#fff; box-shadow:0 8px 25px #20456826; }.emoji-picker .emoji-option { display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:6px; padding:0; color:#263344; background:#fff; font-size:23px; line-height:1; cursor:pointer; }.emoji-picker .emoji-option:hover,.emoji-picker .emoji-option:focus-visible { background:#edf6ff; transform:none; box-shadow:none; }

/* Compact chat: more room for messages, one-line nickname confirmation. */
.community-chat>header { padding:12px 14px; gap:9px; }
.community-chat .messenger-symbol { width:33px; height:33px; padding:4px; }
.community-chat .messenger-symbol svg { width:25px; height:25px; }
.community-chat h3 { font-size:14px; }
.chat-messages { padding:12px 14px 8px; height:440px; }
.chat-message { margin-bottom:9px; }
.chat-message-meta { gap:5px; line-height:1.4; }
.chat-message-content>p { margin-top:3px; padding:6px 9px; line-height:1.5; border-radius:0 7px 7px; }
.chat-message-actions { gap:12px; padding-top:1px; }
.chat-message-actions button { min-height:22px; padding:1px 0; }
.chat-quote { margin-top:4px; padding:5px 8px; gap:2px; }
.chat-identity-bar { padding:7px 14px; gap:4px 10px; }
.chat-identity-bar>span { display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-width:0; }
#chat-name-display { color:#4a5a6c; font-size:11px; overflow-wrap:anywhere; }
.chat-identity-bar #chat-name-edit { font-size:10px; padding:3px; }
.community-chat #chat-form { position:relative; padding:9px 14px 10px; }
.chat-name-editor { display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.chat-name-editor label { margin:0; white-space:nowrap; font-size:11px; }
.community-chat .chat-name-editor input { flex:1; min-width:0; width:0; padding:6px 8px; height:33px; }
#chat-name-ok { height:33px; padding:0 12px; background:#199bff; border:1px solid #199bff; color:white; border-radius:7px; font-size:11px; font-weight:700; cursor:pointer; }
.community-chat #chat-text { display:block; margin-top:0; min-height:44px; height:48px; max-height:120px; padding:7px 10px; }
.chat-compose-bottom { margin-top:6px; }
.chat-compose-bottom .primary-button { min-height:32px; padding:6px 12px; }
.chat-rules { margin-top:5px; font-size:9px; line-height:1.4; }
#chat-feedback { font-size:10px; margin-top:4px; }
.chat-reply-bar { margin:0 0 6px; padding:6px 8px; }
.chat-compose-tools { position:static; }
.emoji-picker { display:block; left:12px; bottom:75px; width:calc(100% - 24px); max-width:340px; padding:9px; border-radius:12px; }
.emoji-heading-row { display:flex; align-items:center; justify-content:space-between; }
.emoji-heading { font-size:12px; color:#4a5a6c; }
.emoji-picker .emoji-close { min-height:28px; padding:3px 7px; border:0; background:transparent; color:#3985b8; font-size:11px; cursor:pointer; }
.emoji-tabs { display:grid; grid-template-columns:repeat(6,1fr); gap:3px; margin:5px 0 8px; padding-bottom:7px; border-bottom:1px solid #e5edf4; }
.emoji-picker .emoji-category { padding:4px 0; min-height:33px; border:0; border-radius:7px; background:#f5f8fc; font-size:20px; cursor:pointer; }
.emoji-picker .emoji-category[aria-pressed=true] { background:#e4f2ff; box-shadow:inset 0 -2px #199bff; }
.emoji-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; max-height:185px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.emoji-picker .emoji-option { width:100%; min-width:0; height:33px; min-height:33px; padding:0; font-size:23px; }
@media(min-width:981px) { .chat-messages { flex:1 1 440px; height:0; min-height:390px; } }
@media(max-width:600px) {
  .chat-messages { height:420px; }
  .community-chat .chat-name-editor input,.community-chat #chat-text { font-size:16px; }
  .chat-message-actions button { min-height:28px; }
  .emoji-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}

/* Community accounts: compact guest prompt, account forms, and staff controls. */
.community-chat [hidden],.community-dialog [hidden] { display:none !important; }
.chat-identity-bar #chat-staff-login { padding:7px 10px; border:1px solid #b8daf6; border-radius:7px; background:#eaf6ff; color:#176ca5; font-size:11px; font-weight:750; text-decoration:none; }
.chat-identity-bar #chat-staff-login:hover { border-color:#70b8eb; background:#d9efff; text-decoration:none; }
.account-auth { display:grid; gap:12px; }
.account-tabs { display:flex; gap:6px; }
.account-tabs button { flex:1; padding:10px; border:1px solid #425878; border-radius:7px; background:#172942; color:#c6d6ea; cursor:pointer; }
.account-tabs button[aria-pressed=true] { background:#e4b974; border-color:#e4b974; color:#182336; font-weight:750; }
.account-auth form { display:grid; gap:9px; }
.account-auth form label { color:#c5d1df; font-size:12px; }
.account-auth form input { width:100%; padding:10px 12px; border:1px solid #425878; border-radius:7px; background:#0c1b2d; color:white; }
.account-auth form .primary-button { justify-self:start; margin-top:7px; }
#admin-setup-form { border-top:1px solid #40536d; padding-top:15px; }
#admin-setup-form h3 { margin:0; color:#e4b974; }
#admin-setup-form p { color:#c5d1df; font-size:12px; line-height:1.6; }
.account-admin { border-top:1px solid #40536d; margin-top:26px; padding-top:18px; }
.account-admin h3 { margin:0 0 6px; font-size:18px; }
.account-admin>p { color:#c5d1df; font-size:12px; }
.accounts-list { display:grid; gap:7px; max-height:300px; overflow:auto; margin-top:12px; }
.account-row { display:grid; grid-template-columns:minmax(0,1fr) 100px 74px 55px; align-items:center; gap:8px; padding:8px; border:1px solid #3c506b; border-radius:7px; background:#102036; }
.account-row-name { display:grid; min-width:0; }
.account-row-name strong,.account-row-name small { overflow:hidden; text-overflow:ellipsis; }
.account-row-name small { color:#9caec5; font-size:11px; }
.account-row select { min-width:0; padding:6px; border:1px solid #526785; border-radius:5px; background:#172942; color:white; }
.account-status { display:flex; align-items:center; gap:4px; font-size:11px; }
.account-row .secondary-button { padding:6px; min-height:0; }
@media(max-width:600px) { .account-row { grid-template-columns:minmax(0,1fr) 80px; }.account-row .secondary-button { justify-self:end; } }