/* Community design system: deliberately scoped away from the shared site chrome. */
.community-page {
    --cm-bg: #f6f8fc;
    --cm-surface: #fff;
    --cm-ink: #202b43;
    --cm-muted: #7b8497;
    --cm-secondary: #5e6a80;
    --cm-line: #e9edf4;
    --cm-accent: #4265dc;
    --cm-soft: #eef2fe;
    --cm-hover: #fafbfe;
    background: var(--cm-bg);
    color: var(--cm-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1.6;
}
html.dark .community-page {
    --cm-bg: #101623;
    --cm-surface: #182132;
    --cm-ink: #e5ebf6;
    --cm-muted: #96a3b9;
    --cm-secondary: #b0bdd1;
    --cm-line: #29364c;
    --cm-accent: #96b0ff;
    --cm-soft: #253451;
    --cm-hover: #1e293d;
}
.community-page .site-nav-links > a[href="community.php"] { color: var(--cm-accent); background: var(--cm-soft); }
.community-page .site-footer { margin-top: 0; }
.cm-main { max-width: 1360px; margin: 0 auto; padding: 88px 28px 52px; }
.cm-main a { text-decoration: none; }
.cm-main a, .cm-main button { transition: color .16s, background .16s, border-color .16s; }
.cm-main a:hover { color: var(--cm-accent); }
.cm-main h1, .cm-main h2, .cm-main h3 { font-weight: 650; }
.cm-main button, .cm-compose-dialog button { cursor: pointer; font: inherit; }
.cm-main a:focus-visible, .cm-main button:focus-visible, .cm-main input:focus-visible, .cm-compose-dialog :focus-visible { outline: 3px solid var(--cm-accent); outline-offset: 4px; }
.cm-skip { position: fixed; top: 8px; left: 12px; padding: 10px 18px; background: var(--cm-surface); color: var(--cm-accent); border-radius: 8px; z-index: 200; transform: translateY(-160%); }
.cm-skip:focus { transform: translateY(0); }
.cm-topbar { display: flex; align-items: center; gap: 24px; padding: 0 0 24px; margin-bottom: 25px; border-bottom: 1px solid var(--cm-line); }
.cm-community-brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.cm-community-brand strong { font-size: 18px; letter-spacing: -.5px; }
.cm-community-symbol { color: var(--cm-accent); font-size: 21px; }
.cm-beta { font-size: 9px; font-weight: 700; letter-spacing: 1px; background: #e8edfa; color: #6178b9; padding: 2px 5px; border-radius: 4px; }
.cm-search { display: flex; align-items: center; gap: 12px; width: 400px; max-width: 100%; height: 42px; border: 1px solid var(--cm-line); background: var(--cm-surface); border-radius: 8px; margin-left: auto; padding: 0 6px 0 14px; color: var(--cm-muted); }
.cm-search:focus-within { border-color: var(--cm-accent); }
.cm-search input { width: 100%; min-width: 0; outline: none; border: none; box-shadow: none; background: transparent; color: var(--cm-ink); font: inherit; font-size: 12px; }
.cm-search input::placeholder { color: var(--cm-muted); }
.cm-search button { flex-shrink: 0; width: 30px; height: 30px; border-radius: 5px; background: var(--cm-bg); color: var(--cm-secondary); border: 0; }
.cm-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 16px; border: 1px solid var(--cm-line); border-radius: 7px; background: var(--cm-surface); color: var(--cm-secondary); font-size: 12px; font-weight: 550; text-decoration: none; }
.cm-button:hover { border-color: var(--cm-accent); color: var(--cm-accent); }
.cm-button-primary { background: #4666db; color: #fff; border-color: #4666db; box-shadow: 0 3px 7px #4265dc12; }
.cm-main .cm-button-primary:hover, .cm-compose-dialog .cm-button-primary:hover { background: #3456cc; color: #fff; border-color: #3456cc; }
.cm-topbar > .cm-button { height: 42px; white-space: nowrap; }
.cm-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr) 268px; gap: 24px; align-items: start; }
.cm-left { position: sticky; top: 90px; }
.cm-side-nav { display: flex; flex-direction: column; gap: 5px; }
.cm-side-nav > a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 10px 12px; border-radius: 7px; color: var(--cm-secondary); font-size: 13px; }
.cm-side-nav > a > i:first-child { width: 17px; text-align: center; font-size: 15px; opacity: .85; }
.cm-side-nav > a.is-active { color: var(--cm-accent); background: #e9eefd; font-weight: 650; }
.cm-side-nav > a:hover { background: var(--cm-soft); }
.cm-nav-arrow { margin-left: auto; font-size: 10px; }
.cm-nav-heading { display: flex; align-items: center; justify-content: space-between; margin: 27px 12px 12px; color: var(--cm-muted); font-size: 11px; letter-spacing: 1px; }
.cm-nav-heading a { font-size: 10px; }
.cm-nav-count { margin-left: auto; font-size: 10px; color: var(--cm-muted); font-variant-numeric: tabular-nums; }
.cm-board-nav > a { min-height: 39px; font-size: 12px; gap: 11px; }
.cm-board-nav > a > i:first-child { font-size: 13px; }
.cm-sidebar-note { margin: 26px 5px 0; padding: 17px 14px; border: 1px solid #e5eafb; border-radius: 9px; background: linear-gradient(145deg, #eef2fd, #f7f8fd); }
.cm-note-icon { display: block; color: #627ed8; margin-bottom: 10px; font-size: 21px; }
.cm-sidebar-note h3 { font-size: 12px; line-height: 1.8; }
.cm-sidebar-note p { font-size: 11px; color: var(--cm-secondary); line-height: 1.9; margin: 8px 0 14px; }
.cm-sidebar-note a { font-size: 11px; color: var(--cm-accent); }
.cm-sidebar-note a i { font-size: 9px; margin-left: 5px; }
.cm-sidebar-foot { margin: 25px 12px; font-size: 9px; line-height: 2.2; color: var(--cm-muted); letter-spacing: .6px; }
.cm-center, .cm-right { min-width: 0; }
.cm-panel { background: var(--cm-surface); border: 1px solid var(--cm-line); border-radius: 11px; overflow: hidden; }
.cm-hero { position: relative; display: flex; min-height: 257px; padding: 29px 28px; border: 1px solid #e2e8fb; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 100% 0, #d9e3ff88, transparent 65%), linear-gradient(110deg, #edf2ff 0%, #f6f7ff 65%, #edeffe 100%); }
.cm-hero-copy { position: relative; z-index: 2; flex: 0 0 58%; }
.cm-eyebrow { font-size: 9px; font-weight: 650; letter-spacing: 1.3px; color: #788bbb; }
.cm-hero .cm-eyebrow { display: flex; align-items: center; gap: 7px; font-size: 8px; letter-spacing: 1px; white-space: nowrap; }
.cm-hero .cm-eyebrow > span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #6980c5; }
.cm-hero h1 { font-size: clamp(25px, 2.35vw, 32px); line-height: 1.55; letter-spacing: -1px; margin: 13px 0 11px; color: #263762; }
.cm-hero p { font-size: 12px; line-height: 1.95; color: #73809d; }
.cm-hero-copy > a { display: inline-flex; align-items: center; gap: 9px; color: #536cca; font-size: 11px; font-weight: 600; margin-top: 20px; }
.cm-hero-copy > a i { font-size: 9px; }
.cm-hero-art { position: absolute; width: 265px; height: 230px; right: -5px; top: 15px; }
.cm-orbit { width: 227px; height: 227px; position: absolute; top: 0; left: 20px; border: 1px solid #d2dcf77a; border-radius: 50%; }
.cm-orbit::after { content: ''; position: absolute; inset: 24px; border: 1px dashed #ced7f2; border-radius: 50%; }
.cm-art-window { position: absolute; width: 208px; height: 143px; top: 52px; left: 21px; background: linear-gradient(120deg, #fff, #f9faff); border: 1px solid #fff; border-radius: 10px; transform: rotate(-7deg); box-shadow: 0 18px 30px -12px #7588c44d, 0 0 0 1px #dce3f75e; }
.cm-window-bar { height: 28px; border-bottom: 1px solid #edf0f7; display: flex; align-items: center; gap: 4px; padding: 0 12px; }
.cm-window-bar b { width: 4px; height: 4px; border-radius: 50%; background: #b9c8ee; }
.cm-window-bar b:nth-child(2) { background: #d5def4; }
.cm-window-bar span { margin-left: auto; font: 7px monospace; color: #9aa8c4; }
.cm-art-code { padding: 15px; display: flex; flex-direction: column; gap: 6px; font: 9px monospace; color: #8d9dd1; }
.cm-art-code strong { color: #657cac; font: 11px sans-serif; font-weight: 600; padding-left: 10px; }
.cm-art-code > div { display: flex; gap: 5px; padding: 0 10px; }
.cm-art-code > div b { display: block; width: 33px; height: 4px; background: #dce5fa; border-radius: 3px; }
.cm-art-code > div b:nth-child(2) { width: 51px; background: #e9def5; }
.cm-art-code > div b:nth-child(3) { width: 20px; }
.cm-art-float { position: absolute; display: grid; place-items: center; border-radius: 12px; font-weight: 700; box-shadow: 0 8px 18px #687cca1a; }
.cm-art-code-icon { width: 49px; height: 47px; top: 16px; right: 38px; background: linear-gradient(135deg, #6b85e5, #4565cd); color: #fff; font: 21px monospace; transform: rotate(12deg); }
.cm-art-spark { width: 37px; height: 37px; background: #fff; color: #9b82d0; bottom: 25px; left: 8px; transform: rotate(-12deg); }
.cm-art-note { position: absolute; bottom: 6px; right: 16px; background: #ffffffad; border: 1px solid #fff; border-radius: 7px; padding: 8px 11px; color: #96a0bc; font-size: 7px; letter-spacing: .8px; transform: rotate(5deg); }
.cm-art-note span { color: #f1ba6a; font-size: 15px; margin-right: 5px; }
.cm-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 20px 15px; }
.cm-section-heading h2 { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.cm-section-heading h2 > i { color: var(--cm-accent); font-size: 12px; }
.cm-section-heading h2 > span { font-size: 11px; color: var(--cm-muted); font-weight: 400; }
.cm-section-heading > a { color: var(--cm-muted); font-size: 10px; }
.cm-section-heading > a i { margin-left: 4px; font-size: 9px; }
.cm-featured { margin: 5px 0 22px; }
.cm-featured > .cm-section-heading { padding: 21px 1px 13px; }
.cm-featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cm-feature-card { min-width: 0; border: 1px solid #e2e8f5; background: linear-gradient(110deg, #f0f5fd, #f9fbff); border-radius: 9px; padding: 17px 18px; }
.cm-feature-2 { background: linear-gradient(110deg, #f5f1fb, #fdfaff); border-color: #eae3f3; }
.cm-feature-type { display: flex; align-items: center; justify-content: space-between; font-size: 8px; letter-spacing: 1.4px; color: #8296bc; }
.cm-feature-2 .cm-feature-type { color: #a18bbd; }
.cm-feature-type i { font-size: 9px; }
.cm-feature-card h3 { font-size: 13px; line-height: 1.8; margin: 11px 0 12px; color: var(--cm-ink); }
.cm-feature-bottom { font-size: 10px; color: var(--cm-muted); }
.cm-feature-bottom > span { padding: 0 5px; }
.cm-feed-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 20px; min-height: 56px; border-bottom: 1px solid var(--cm-line); }
.cm-tabs { display: flex; gap: 24px; }
.cm-tabs > a { position: relative; display: flex; align-items: center; min-height: 56px; font-size: 12px; white-space: nowrap; color: var(--cm-secondary); }
.cm-tabs > a.is-active { color: var(--cm-accent); font-weight: 650; }
.cm-tabs > a.is-active::after { content: ''; position: absolute; height: 3px; border-radius: 3px; bottom: -1px; left: 0; right: 0; background: var(--cm-accent); }
.cm-feed-total { color: var(--cm-muted); font-size: 10px; white-space: nowrap; }
.cm-topic-row { display: flex; gap: 12px; padding: 22px 20px; border-bottom: 1px solid var(--cm-line); }
.cm-topic-row:last-child { border-bottom: 0; }
.cm-topic-row:hover { background: var(--cm-hover); }
.cm-avatar { display: inline-grid; place-items: center; width: 35px; height: 35px; flex-shrink: 0; border-radius: 11px; font-size: 13px; font-weight: 600; border: 1px solid #ffffff55; }
.cm-avatar-link { display: block; flex-shrink: 0; padding-top: 2px; }
.cm-blue { background: #e9effd; color: #607fcc; }
.cm-purple { background: #f0eafa; color: #9575b5; }
.cm-green { background: #e5f4ed; color: #589d82; }
.cm-orange { background: #fbefdf; color: #c29053; }
.cm-text-blue { color: #6584d6; }
.cm-text-purple { color: #9c85c6; }
.cm-text-green { color: #68a997; }
.cm-text-orange { color: #d2a068; }
.cm-topic-content { flex: 1; min-width: 0; }
.cm-topic-title { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.cm-topic-title h3 { display: contents; font-size: 13px; font-weight: 600; line-height: 1.8; }
.cm-topic-title h3 a { overflow-wrap: anywhere; }
.cm-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 5px; border-radius: 4px; font-size: 9px; line-height: 1.7; font-weight: 500; vertical-align: middle; white-space: nowrap; }
.cm-badge-blue { background: #edf2ff; color: #6780cb; }
.cm-badge-green { background: #eaf5ef; color: #54927a; }
.cm-badge-orange { background: #fff4e5; color: #bd9559; }
.cm-topic-excerpt { font-size: 11px; color: var(--cm-muted); line-height: 1.9; margin: 7px 0 11px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cm-topic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 10px; line-height: 1.8; color: var(--cm-muted); }
.cm-topic-meta > a:first-child { color: var(--cm-secondary); }
.cm-meta-dot { opacity: .7; }
.cm-board-label { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }
.cm-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cm-inline-tag { color: #919aae; }
.cm-topic-counts { display: flex; flex-direction: column; align-items: flex-end; gap: 11px; flex-shrink: 0; padding-top: 5px; min-width: 38px; font-size: 10px; color: var(--cm-muted); }
.cm-topic-counts > a { background: var(--cm-bg); padding: 2px 7px; border-radius: 5px; color: var(--cm-secondary); }
.cm-topic-counts i { font-size: 10px; margin-right: 3px; }
.cm-pagination { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; font-size: 11px; color: var(--cm-muted); }
.cm-pagination > div { display: flex; gap: 6px; }
.cm-pagination a { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--cm-line); border-radius: 5px; }
.cm-pagination a.is-active { background: var(--cm-soft); border-color: transparent; color: var(--cm-accent); }
.cm-demo-note { display: flex; justify-content: center; gap: 7px; color: var(--cm-muted); font-size: 10px; margin: 22px 10px 0; line-height: 1.9; }
.cm-demo-note i { flex-shrink: 0; margin-top: 4px; }
.cm-right { display: flex; flex-direction: column; gap: 18px; }
.cm-welcome { padding: 21px 19px 0; }
.cm-welcome-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #f4f0e7; color: #b5a277; font-size: 18px; margin-bottom: 13px; }
.cm-welcome h2 { font-size: 14px; letter-spacing: -.3px; }
.cm-welcome > p { font-size: 11px; color: var(--cm-muted); line-height: 1.9; margin: 9px 0 16px; }
.cm-welcome > .cm-button { width: 100%; font-size: 11px; }
.cm-welcome-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 19px; border-top: 1px solid var(--cm-line); padding: 17px 0; }
.cm-welcome-stats > div { display: flex; flex-direction: column; text-align: center; border-right: 1px solid var(--cm-line); }
.cm-welcome-stats > div:last-child { border: 0; }
.cm-welcome-stats strong { font-size: 17px; font-weight: 650; line-height: 1.3; }
.cm-welcome-stats span { font-size: 9px; color: var(--cm-muted); margin-top: 4px; }
.cm-trending ol { list-style: none; padding: 0 19px 18px; }
.cm-trending li { display: flex; gap: 11px; margin-bottom: 17px; }
.cm-trending li:last-child { margin: 0; }
.cm-trending li > span { color: #a6b1c9; font-size: 14px; font-weight: 600; font-style: italic; }
.cm-trending li:first-child > span { color: #da9a8a; }
.cm-trending li a { font-size: 11px; line-height: 1.8; display: block; }
.cm-trending li p { font-size: 9px; color: var(--cm-muted); margin-top: 5px; }
.cm-trending li p span { padding: 0 4px; }
.cm-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-tags a { background: var(--cm-bg); color: var(--cm-secondary); border: 1px solid var(--cm-line); border-radius: 5px; padding: 4px 9px; font-size: 10px; }
.cm-tags a:hover { background: var(--cm-soft); border-color: #cbd8ff; }
.cm-tag-card > .cm-tags { padding: 0 19px 20px; }
.cm-creators { padding-bottom: 12px; }
.cm-creators > .cm-section-heading > i { color: var(--cm-muted); }
.cm-creator { display: flex; gap: 10px; align-items: center; margin: 0 12px; padding: 8px; border-radius: 7px; }
.cm-creator:hover { background: var(--cm-bg); }
.cm-creator > span:nth-child(2) { flex: 1; }
.cm-creator strong { font-size: 11px; font-weight: 550; display: block; }
.cm-creator small { font-size: 9px; color: var(--cm-muted); display: block; margin-top: 2px; }
.cm-creator > i { font-size: 10px; color: var(--cm-muted); }
.cm-doc-link { display: flex; align-items: center; gap: 11px; background: #eceff8; padding: 17px 14px; border-radius: 9px; color: #7181aa; }
.cm-doc-link > i:first-child { font-size: 19px; }
.cm-doc-link > span { flex: 1; }
.cm-doc-link strong { display: block; font-size: 11px; font-weight: 550; }
.cm-doc-link small { display: block; font-size: 9px; margin-top: 3px; }
.cm-doc-link > i:last-child { font-size: 10px; }
/* Inner pages */
.cm-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 11px; color: var(--cm-muted); padding: 0 0 17px; }
.cm-breadcrumb > span:last-child { color: var(--cm-secondary); }
.cm-entity-header { display: flex; gap: 21px; padding: 28px; margin-bottom: 22px; }
.cm-directory-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; font-size: 20px; flex-shrink: 0; }
.cm-entity-header h1 { font-size: 26px; margin: 5px 0 9px; }
.cm-entity-header p { font-size: 12px; color: var(--cm-secondary); line-height: 1.9; }
.cm-entity-count { display: inline-block; color: var(--cm-muted); font-size: 11px; margin-top: 18px; }
.cm-directory-header { padding: 14px 0 28px; }
.cm-directory-header h1 { font-size: 26px; margin: 12px 0; line-height: 1.5; letter-spacing: -.5px; }
.cm-directory-header p { color: var(--cm-secondary); font-size: 12px; line-height: 1.9; }
.cm-directory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.cm-directory-card { display: block; padding: 24px; }
.cm-directory-card:hover { border-color: #b7c7ee; }
.cm-directory-card h2 { font-size: 16px; margin: 16px 0 8px; }
.cm-directory-card p { font-size: 12px; color: var(--cm-muted); line-height: 1.9; min-height: 69px; }
.cm-directory-card > div { display: flex; align-items: center; justify-content: space-between; color: var(--cm-muted); font-size: 11px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--cm-line); }
.cm-directory-card > div i { font-size: 10px; }
.cm-board-guide { padding: 20px; }
.cm-board-guide h2, .cm-toc h2 { font-size: 13px; margin-bottom: 15px; }
.cm-board-guide h2 i { color: var(--cm-accent); margin-right: 5px; }
.cm-board-guide ol { padding-left: 16px; list-style: decimal; font-size: 12px; color: var(--cm-secondary); }
.cm-board-guide li { margin-bottom: 14px; padding-left: 4px; line-height: 1.9; }
.cm-board-guide > a { color: var(--cm-accent); font-size: 11px; }
.cm-article { padding: 30px; }
.cm-article-labels { display: flex; gap: 8px; margin-bottom: 13px; }
.cm-article h1 { font-size: 27px; line-height: 1.55; letter-spacing: -.5px; }
.cm-article-author { display: flex; gap: 11px; align-items: center; margin: 22px 0; }
.cm-article-author strong { font-size: 12px; font-weight: 550; }
.cm-article-author p { color: var(--cm-muted); font-size: 10px; margin-top: 3px; }
.cm-article-author p span { margin: 0 5px; }
.cm-sample-label { margin-left: auto; font-size: 9px; color: var(--cm-muted); white-space: nowrap; }
.cm-article-lead { padding: 16px 20px; background: var(--cm-bg); border-left: 3px solid #a5b8f2; border-radius: 0 7px 7px 0; color: var(--cm-secondary); font-size: 13px; line-height: 2; }
.cm-prose { font-size: 14px; line-height: 2.1; color: var(--cm-secondary); margin: 28px 0; overflow-wrap: anywhere; }
.cm-prose h2 { font-size: 18px; margin: 28px 0 12px; color: var(--cm-ink); }
.cm-prose section, #replies, #discussions { scroll-margin-top: 90px; }
.cm-article-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--cm-line); margin-top: 25px; padding-top: 23px; }
.cm-action-reply { margin-left: auto; font-size: 11px; color: var(--cm-muted); }
.cm-bookmark[aria-pressed="true"] { background: var(--cm-soft); color: var(--cm-accent); border-color: var(--cm-accent); }
.cm-author-card { padding: 25px 21px; text-align: center; }
.cm-avatar-large { width: 68px; height: 68px; border-radius: 20px; font-size: 26px; }
.cm-author-card .cm-avatar { display: grid; margin: 20px auto 13px; }
.cm-author-card h2 { font-size: 16px; margin: 0 0 4px; }
.cm-muted { font-size: 11px; color: var(--cm-muted); }
.cm-author-card > p { font-size: 12px; line-height: 1.9; color: var(--cm-muted); margin: 17px 0; }
.cm-author-card > .cm-button { width: 100%; }
.cm-toc { padding: 20px; }
.cm-toc a { display: flex; gap: 9px; font-size: 11px; color: var(--cm-secondary); line-height: 1.8; padding: 9px 0; }
.cm-toc a > span { color: var(--cm-muted); font-size: 10px; }
.cm-replies { margin: 22px 0; }
.cm-replies > .cm-section-heading { border-bottom: 1px solid var(--cm-line); }
.cm-reply { display: flex; gap: 12px; padding: 23px; border-bottom: 1px solid var(--cm-line); }
.cm-reply > div { flex: 1; min-width: 0; }
.cm-reply-heading { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.cm-reply-heading > span:not(.cm-badge) { color: var(--cm-muted); font-size: 10px; }
.cm-reply p { color: var(--cm-secondary); font-size: 13px; line-height: 2; margin: 12px 0; }
.cm-reply time, .cm-author-reply time { font-size: 10px; color: var(--cm-muted); }
.cm-reply-accepted { background: #f2faf670; border-left: 3px solid #94c8af; }
.cm-reply-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; padding: 24px; background: var(--cm-hover); }
.cm-reply-invite > i { font-size: 23px; color: var(--cm-muted); }
.cm-reply-invite strong { font-size: 12px; font-weight: 550; }
.cm-reply-invite p { font-size: 10px; color: var(--cm-muted); margin-top: 5px; }
.cm-reply-invite > .cm-button { margin-left: auto; }
.cm-empty-small { padding: 30px; font-size: 12px; color: var(--cm-muted); }
.cm-profile { margin-bottom: 23px; }
.cm-profile-cover { height: 112px; background: radial-gradient(ellipse at 85% 40%, #d3d8f6 0, transparent 60%), repeating-linear-gradient(45deg, transparent, transparent 35px, #ffffff40 36px, transparent 37px), #e8edf9; display: flex; align-items: flex-start; justify-content: flex-end; padding: 24px; color: #8293bf; font-size: 8px; letter-spacing: 1.5px; }
.cm-profile-body { padding: 0 28px 25px; position: relative; }
.cm-profile-body > .cm-avatar { margin-top: -35px; border: 5px solid var(--cm-surface); width: 80px; height: 80px; }
.cm-profile-role { float: right; margin-top: 20px; border: 1px solid var(--cm-line); padding: 3px 9px; border-radius: 5px; font-size: 10px; color: var(--cm-secondary); }
.cm-profile h1 { font-size: 25px; margin: 9px 0; }
.cm-profile-body > p { font-size: 13px; color: var(--cm-secondary); line-height: 1.9; max-width: 480px; }
.cm-profile-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--cm-muted); font-size: 10px; margin-top: 17px; }
.cm-profile-meta i { margin-right: 4px; }
.cm-profile-stats { display: flex; gap: 34px; border-top: 1px solid var(--cm-line); padding-top: 18px; margin-top: 22px; }
.cm-profile-stats > div { display: flex; align-items: baseline; gap: 8px; }
.cm-profile-stats strong { font-size: 19px; }
.cm-profile-stats span { font-size: 10px; color: var(--cm-muted); }
.cm-author-reply { padding: 22px; border-bottom: 1px solid var(--cm-line); }
.cm-author-reply > a { font-size: 13px; font-weight: 600; }
.cm-author-reply > a i { font-size: 9px; color: var(--cm-muted); margin-left: 5px; }
.cm-author-reply p { background: var(--cm-bg); border-left: 2px solid var(--cm-line); padding: 12px 16px; font-size: 12px; color: var(--cm-secondary); line-height: 2; margin: 14px 0 9px; }
.cm-search-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; border-bottom: 1px solid var(--cm-line); }
.cm-search-result h1 { font-size: 15px; overflow-wrap: anywhere; min-width: 0; }
.cm-search-result h1 > span { color: var(--cm-accent); }
.cm-search-result > a { font-size: 11px; color: var(--cm-muted); }
.cm-empty { text-align: center; padding: 60px 24px; }
.cm-empty-icon { display: block; font-size: 36px; color: #a1b1d4; margin-bottom: 16px; }
.cm-empty h1, .cm-empty h2 { font-size: 19px; margin-bottom: 12px; }
.cm-empty p { font-size: 12px; color: var(--cm-muted); margin-bottom: 24px; }
.cm-compose-dialog { margin: auto; width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 40px); background: var(--cm-surface); color: var(--cm-ink); border: 1px solid var(--cm-line); border-radius: 16px; box-shadow: 0 30px 100px #101a4033; padding: 28px; }
.cm-compose-dialog::backdrop { background: #101b3e66; backdrop-filter: blur(4px); }
.cm-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.cm-dialog-heading h2 { font-size: 23px; font-weight: 650; margin-top: 7px; }
.cm-dialog-close { display: grid; place-items: center; width: 32px; height: 32px; color: var(--cm-muted); border-radius: 6px; background: var(--cm-bg); border: 0; }
.cm-draft-notice { font-size: 12px; line-height: 1.8; padding: 13px; background: var(--cm-soft); color: var(--cm-secondary); border-radius: 7px; margin: 18px 0; }
.cm-compose-dialog label { display: block; font-size: 12px; font-weight: 600; margin: 15px 0 7px; }
.cm-compose-dialog input, .cm-compose-dialog textarea, .cm-compose-dialog select { display: block; width: 100%; border: 1px solid var(--cm-line); background: var(--cm-bg); color: var(--cm-ink); border-radius: 7px; padding: 11px 12px; font: inherit; font-size: 13px; }
.cm-compose-dialog textarea { resize: vertical; }
.cm-dialog-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
#cm-draft-status { margin-top: 10px; }
.cm-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); width: max-content; padding: 12px 22px; border: 1px solid var(--cm-line); background: var(--cm-surface); color: var(--cm-ink); border-radius: 9px; box-shadow: 0 8px 40px #16234522; font-size: 13px; z-index: 150; }
.cm-compose-dialog [hidden], .cm-toast[hidden] { display: none; }
html.dark .cm-side-nav > a.is-active { background: var(--cm-soft); }
html.dark .cm-hero { background: radial-gradient(ellipse at 100% 0, #344a7944, transparent 65%), #1d2a44; border-color: #304266; }
html.dark .cm-hero h1 { color: #dde6ff; }
html.dark .cm-hero p { color: #a0b1ce; }
html.dark .cm-hero-copy > a, html.dark .cm-eyebrow { color: #9bb1eb; }
html.dark .cm-hero-art { opacity: .72; }
html.dark .cm-feature-card { background: #1c2b42; border-color: #2a3d58; }
html.dark .cm-feature-2 { background: #29253c; border-color: #3b334f; }
html.dark .cm-sidebar-note { background: #1b2840; border-color: #2c3b57; }
html.dark .cm-doc-link { background: #1f2d45; color: #a0b5dd; }
html.dark .cm-blue, html.dark .cm-badge-blue { background: #2a3b60; color: #a8bdf4; }
html.dark .cm-purple { background: #3a2e4d; color: #ceb2ec; }
html.dark .cm-green, html.dark .cm-badge-green { background: #22443b; color: #a1d4bf; }
html.dark .cm-orange, html.dark .cm-badge-orange { background: #463a2d; color: #e3c69a; }
html.dark .cm-profile-cover { background: repeating-linear-gradient(45deg, transparent, transparent 35px, #ffffff08 36px, transparent 37px), #2a3757; color: #a0b2da; }
html.dark .cm-reply-accepted { background: #23413633; }
html.dark .cm-beta { background: #293857; color: #a2b4e2; }
@media (min-width: 1440px) { .cm-main { max-width: 1420px; } .cm-layout { grid-template-columns: 192px minmax(0, 1fr) 282px; gap: 28px; } .cm-hero { min-height: 276px; } .cm-hero-art { right: 12px; top: 23px; } .cm-topic-row { padding-top: 24px; padding-bottom: 24px; } }
@media (max-width: 1199px) { .cm-layout { grid-template-columns: 162px minmax(0, 1fr) 238px; gap: 18px; } .cm-main { padding-left: 20px; padding-right: 20px; } .cm-hero { padding: 25px 22px; } .cm-hero-art { transform: scale(.8); transform-origin: right center; right: -20px; } .cm-hero-copy { flex-basis: 70%; } .cm-hero .cm-eyebrow { font-size: 7px; letter-spacing: .4px; } .cm-topic-row { gap: 9px; padding: 20px 15px; } .cm-inline-tag { display: none; } .cm-tabs { gap: 20px; } .cm-feed-toolbar { padding: 0 16px; } .cm-welcome { padding-left: 16px; padding-right: 16px; } .cm-welcome h2 { font-size: 13px; } .cm-welcome > p { font-size: 10px; } .cm-profile-stats { gap: 20px; } }
@media (max-width: 1023px) { .cm-layout { grid-template-columns: 160px minmax(0, 1fr); gap: 22px; } .cm-right { display: none; } .cm-search { width: 330px; } .cm-community-brand strong { font-size: 16px; } .cm-topbar { gap: 16px; } .cm-hero-copy { flex-basis: 57%; } .cm-hero-art { transform: scale(.95); right: -5px; } .cm-inline-tag { display: inline; } }
@media (max-width: 767px) {
    .cm-main { padding: 82px 16px 36px; }
    .cm-topbar { flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 18px; gap: 15px; }
    .cm-topbar > .cm-button { margin-left: auto; height: 37px; padding: 7px 12px; font-size: 11px; }
    .cm-community-brand { gap: 7px; }
    .cm-community-brand strong { font-size: 16px; }
    .cm-community-symbol { font-size: 18px; }
    .cm-search { order: 3; width: 100%; height: 40px; margin: 0; }
    .cm-layout { display: block; }
    .cm-left { position: static; margin-bottom: 18px; }
    .cm-side-nav:first-child { flex-direction: row; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--cm-line); padding-bottom: 12px; }
    .cm-side-nav:first-child a { flex: 1; justify-content: center; white-space: nowrap; gap: 7px; font-size: 11px; padding: 8px 7px; min-height: 37px; }
    .cm-side-nav > a > i:first-child { font-size: 12px; width: auto; }
    .cm-nav-arrow, .cm-nav-heading, .cm-board-nav, .cm-sidebar-note, .cm-sidebar-foot { display: none; }
    .cm-hero { padding: 22px; min-height: 241px; }
    .cm-hero h1 { font-size: 28px; }
    .cm-hero .cm-eyebrow { font-size: 7px; }
    .cm-hero-copy { flex-basis: 60%; }
    .cm-hero p { font-size: 11px; }
    .cm-hero-art { transform: scale(.83); right: -29px; top: 7px; }
    .cm-featured-grid { gap: 10px; }
    .cm-feature-card { padding: 15px; }
    .cm-feature-card h3 { font-size: 12px; }
    .cm-feature-type { font-size: 7px; letter-spacing: .6px; }
    .cm-feature-bottom { font-size: 9px; }
    .cm-featured { margin-bottom: 18px; }
    .cm-topic-row { padding: 20px 15px; gap: 10px; }
    .cm-topic-row .cm-avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
    .cm-topic-title h3 { font-size: 13px; }
    .cm-topic-counts { min-width: 31px; }
    .cm-topic-counts > span { display: none; }
    .cm-topic-excerpt { -webkit-line-clamp: 2; font-size: 11px; }
    .cm-inline-tag { display: none; }
    .cm-topic-meta { font-size: 9px; gap: 5px; }
    .cm-board-label { margin-left: 2px; }
    .cm-tabs { gap: 24px; }
    .cm-tabs > a { font-size: 11px; }
    .cm-feed-total { font-size: 9px; }
    .cm-article { padding: 23px 20px; }
    .cm-article h1 { font-size: 24px; }
    .cm-article-author { flex-wrap: wrap; }
    .cm-sample-label { display: none; }
    .cm-article-lead { font-size: 12px; padding: 13px 16px; }
    .cm-prose { font-size: 14px; }
    .cm-prose h2 { font-size: 18px; }
    .cm-action-reply { margin-left: 0; }
    .cm-reply { padding: 20px 16px; }
    .cm-reply-invite { padding: 20px; }
    .cm-reply-invite > .cm-button { margin-left: 0; }
    .cm-directory-header h1 { font-size: 24px; }
    .cm-directory-grid { gap: 12px; }
    .cm-directory-card { padding: 19px; }
    .cm-directory-card p { font-size: 11px; min-height: 85px; }
    .cm-directory-card h2 { font-size: 15px; }
    .cm-entity-header { gap: 16px; padding: 23px; }
    .cm-entity-header h1 { font-size: 24px; }
    .cm-profile-body { padding: 0 22px 22px; }
    .cm-profile-stats { gap: 24px; }
    .cm-profile-stats > div { flex-direction: column; gap: 1px; }
    .cm-compose-dialog { padding: 22px; }
    .cm-dialog-heading h2 { font-size: 21px; }
}
@media (max-width: 420px) {
    .cm-main { padding-left: 12px; padding-right: 12px; }
    .cm-hero { min-height: 237px; padding: 20px; }
    .cm-hero h1 { font-size: 26px; }
    .cm-hero-copy { flex-basis: 75%; }
    .cm-hero-art { transform: scale(.6); right: -55px; top: 36px; opacity: .8; }
    .cm-hero p { font-size: 10px; }
    .cm-feature-card { padding: 13px; }
    .cm-feature-bottom > span { padding: 0 1px; }
    .cm-feed-toolbar { padding: 0 13px; }
    .cm-tabs { gap: 19px; }
    .cm-topic-row { gap: 9px; padding: 19px 13px; }
    .cm-topic-counts { display: none; }
    .cm-topic-title h3 { font-size: 12px; }
    .cm-directory-grid { grid-template-columns: 1fr; }
    .cm-directory-card p { min-height: 0; }
    .cm-article { padding: 20px 17px; }
    .cm-article h1 { font-size: 22px; }
    .cm-article .cm-button { font-size: 11px; padding: 9px 12px; }
    .cm-profile-role { font-size: 9px; }
    .cm-profile-stats { gap: 30px; }
    .cm-entity-header { padding: 22px 18px; gap: 13px; }
    .cm-entity-header > .cm-directory-icon { width: 35px; height: 35px; border-radius: 10px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .community-page { scroll-behavior: auto; } .cm-main *, .cm-compose-dialog * { transition: none; } }