.sqw-community-home,
.sqw-community-topics,
.sqw-community-topic-detail,
.sqw-community-topic-new {
    padding-top: 0;
    background: var(--sq-website-bg-page);
}

.sqw-community-home svg,
.sqw-community-topics svg,
.sqw-community-topic-detail svg,
.sqw-community-topic-new svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.sqw-community-home [hidden],
.sqw-community-topics [hidden],
.sqw-community-topic-detail [hidden],
.sqw-community-topic-new [hidden] {
    display: none;
}

/* 首页：先建立社区定位，再进入版块与话题。 */
.sqw-community-home .sqw-container {
    padding-bottom: var(--sq-website-spacing-9);
}

.sqw-community-home__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--sq-website-spacing-5) var(--sq-website-spacing-7);
    padding-block: var(--sq-website-spacing-6);
    border-bottom: 1px solid var(--sq-website-border-default);
}

.sqw-community-banner-art {
    width: 100%;
    max-height: 22rem;
    aspect-ratio: 8 / 5;
    object-fit: contain;
}

.sqw-community-home__hero-copy,
.sqw-community-home__stats {
    position: relative;
    z-index: 1;
}

.sqw-community-home__hero-copy {
    max-width: 48rem;
}

.sqw-community-home h1 {
    margin-bottom: var(--sq-website-spacing-4);
    color: var(--sq-website-theme-ink);
    font-size: var(--sq-website-text-3xl);
    line-height: 1.18;
}

.sqw-community-home h1 em {
    color: var(--sq-website-theme-primary);
    font-style: normal;
}

.sqw-community-home__hero-copy > p {
    max-width: 34rem;
    margin-bottom: var(--sq-website-spacing-5);
    color: var(--sq-website-text-muted);
    font-size: var(--sq-website-text-lg);
}

.sqw-community-hero-actions,
.sqw-community-compose-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sq-website-spacing-3);
}

.sqw-community-home__stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sq-website-spacing-5);
    width: 100%;
    padding-top: var(--sq-website-spacing-5);
    border-top: 1px solid var(--sq-website-border-default);
}

.sqw-community-home__stats > span {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--sq-website-spacing-2);
    align-items: center;
}

.sqw-community-home__stats svg {
    grid-row: span 2;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--sq-website-theme-primary);
}

.sqw-community-home__stats strong {
    color: var(--sq-website-text-title);
    font-family: var(--sq-website-font-mono);
    font-size: var(--sq-website-text-lg);
}

.sqw-community-home__stats small {
    color: var(--sq-website-text-muted);
    font-size: var(--sq-website-text-xs);
}

.sqw-community-section {
    padding-top: var(--sq-website-spacing-8);
}

.sqw-community-section-heading,
.sqw-community-side-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sq-website-spacing-4);
}

.sqw-community-section-heading {
    margin-bottom: var(--sq-website-spacing-4);
}

.sqw-community-section-heading h2,
.sqw-community-page-heading h1 {
    margin-bottom: var(--sq-website-spacing-2);
    font-size: var(--sq-website-text-2xl);
}

.sqw-community-section-heading p,
.sqw-community-page-heading p {
    margin-bottom: 0;
    color: var(--sq-website-text-muted);
}

.sqw-community-section-heading a,
.sqw-community-side-heading a {
    flex: 0 0 auto;
    font-size: var(--sq-website-text-sm);
}

.sqw-community-channel-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sq-website-spacing-3);
}

.sqw-community-channel-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sq-website-spacing-3);
    min-width: 0;
    min-height: 7rem;
    padding: var(--sq-website-spacing-4);
    color: inherit;
    background: var(--sq-website-bg-surface);
    border: 1px solid var(--sq-website-border-default);
    border-radius: var(--sq-website-radius-md);
    text-decoration: none;
    transition: transform var(--sq-website-motion-fast) ease-out, border-color var(--sq-website-motion-fast) ease-out, box-shadow var(--sq-website-motion-fast) ease-out;
}

.sqw-community-channel-card:hover {
    border-color: #9abaf0;
    box-shadow: var(--sq-website-shadow-sm);
    transform: translateY(-2px);
}

.sqw-community-channel-card > span:nth-child(2) {
    display: grid;
    align-content: start;
    gap: var(--sq-website-spacing-1);
    min-width: 0;
}

.sqw-community-channel-card strong,
.sqw-community-channel-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sqw-community-channel-card strong {
    color: var(--sq-website-text-title);
    font-size: var(--sq-website-text-sm);
}

.sqw-community-channel-card small {
    color: var(--sq-website-text-muted);
    font-size: var(--sq-website-text-xs);
}

.sqw-community-channel-card em {
    position: absolute;
    bottom: var(--sq-website-spacing-3);
    left: 4.35rem;
    color: var(--sq-website-text-muted);
    font-family: var(--sq-website-font-mono);
    font-size: var(--sq-website-text-xs);
    font-style: normal;
}

.sqw-community-channel-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--sq-website-radius-md);
}

.sqw-community-channel-icon svg,
.sqw-community-side-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.sqw-community-channel-icon--blue,
.sqw-community-side-icon { color: var(--sq-website-theme-primary); background: #e8f0ff; }
.sqw-community-channel-icon--cyan { color: #1499a8; background: #e3f8fa; }
.sqw-community-channel-icon--violet { color: var(--sq-website-theme-violet); background: #eeeaff; }
.sqw-community-channel-icon--orange { color: var(--sq-website-theme-orange); background: #fff0dc; }

.sqw-community-channel-arrow {
    position: absolute;
    right: var(--sq-website-spacing-3);
    bottom: var(--sq-website-spacing-3);
    width: 0.9rem;
    height: 0.9rem;
    color: var(--sq-website-text-muted);
}

.sqw-community-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: var(--sq-website-spacing-6);
    align-items: start;
    padding-top: var(--sq-website-spacing-8);
}

.sqw-community-topic-column,
.sqw-community-home-sidebar,
.sqw-community-list-sidebar,
.sqw-community-list-right,
.sqw-community-detail-sidebar,
.sqw-community-compose-sidebar {
    display: grid;
    align-content: start;
    gap: var(--sq-website-spacing-5);
    min-width: 0;
}

.sqw-community-tabs {
    display: flex;
    gap: var(--sq-website-spacing-5);
    overflow-x: auto;
    border-bottom: 1px solid var(--sq-website-border-default);
}

.sqw-community-tabs button {
    min-height: 3.25rem;
    padding: 0;
    color: var(--sq-website-text-muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: var(--sq-website-text-sm);
    font-weight: 600;
    white-space: nowrap;
}

.sqw-community-tabs button:hover,
.sqw-community-tabs button.is-active {
    color: var(--sq-website-theme-primary);
    border-color: var(--sq-website-theme-primary);
}

.sqw-community-topic-list {
    overflow: hidden;
    background: var(--sq-website-bg-surface);
    border-top: 1px solid var(--sq-website-border-default);
}

.sqw-community-topic-list--boxed {
    display: grid;
    gap: var(--sq-website-spacing-2);
    padding-top: var(--sq-website-spacing-3);
    background: transparent;
    border-top: 0;
}

.sqw-community-topic-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6rem;
    gap: var(--sq-website-spacing-4);
    align-items: center;
    min-width: 0;
    padding: var(--sq-website-spacing-4) 0;
    border-bottom: 1px solid var(--sq-website-border-default);
}

.sqw-community-topic-row--boxed {
    padding: var(--sq-website-spacing-4) var(--sq-website-spacing-5);
    background: var(--sq-website-bg-surface);
    border: 1px solid var(--sq-website-border-default);
    border-radius: var(--sq-website-radius-md);
}

.sqw-community-topic-row__main,
.sqw-community-topic-meta,
.sqw-community-topic-row__label,
.sqw-community-topic-people,
.sqw-community-topic-metrics {
    min-width: 0;
}

.sqw-community-topic-row__label,
.sqw-community-topic-meta,
.sqw-community-topic-metrics,
.sqw-community-topic-people {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sq-website-spacing-2);
}

.sqw-community-topic-row__label {
    margin-bottom: var(--sq-website-spacing-2);
}

.sqw-community-topic-type,
.sqw-community-topic-resolved,
.sqw-community-topic-pin,
.sqw-community-detail-tags span,
.sqw-community-suggested-tags span,
.sqw-community-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sq-website-spacing-1);
    padding: var(--sq-website-spacing-1) var(--sq-website-spacing-2);
    border-radius: var(--sq-website-radius-sm);
    font-size: var(--sq-website-text-xs);
    line-height: 1.4;
}

.sqw-community-topic-type--question { color: var(--sq-website-theme-primary-strong); background: #e8f0ff; }
.sqw-community-topic-type--experience { color: var(--sq-website-theme-green); background: #e2f7f0; }
.sqw-community-topic-type--discussion { color: var(--sq-website-theme-orange); background: #fff0dc; }
.sqw-community-topic-type--feedback { color: var(--sq-website-theme-violet); background: #eeeaff; }
.sqw-community-topic-type--plugin { color: #148f9d; background: #e3f8fa; }
.sqw-community-topic-resolved { color: var(--sq-website-theme-green); background: #e2f7f0; }
.sqw-community-topic-pin { color: var(--sq-website-theme-orange); background: #fff4e3; }
.sqw-community-topic-pin svg { width: 0.8rem; height: 0.8rem; }

.sqw-community-topic-title {
    display: block;
    color: var(--sq-website-text-title);
    font-size: var(--sq-website-text-base);
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.sqw-community-topic-title:hover { color: var(--sq-website-theme-primary); }

.sqw-community-topic-row__main > p {
    display: -webkit-box;
    margin: var(--sq-website-spacing-1) 0 var(--sq-website-spacing-2);
    overflow: hidden;
    color: var(--sq-website-text-muted);
    font-size: var(--sq-website-text-sm);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.sqw-community-topic-meta {
    color: var(--sq-website-text-muted);
    font-size: var(--sq-website-text-xs);
}

.sqw-community-topic-meta > span:not(.sqw-community-avatar) { white-space: nowrap; }
.sqw-community-topic-meta > span + span::before { margin-right: var(--sq-website-spacing-2); color: var(--sq-website-border-strong); content: "·"; }

.sqw-community-avatar {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: var(--sq-website-text-xs);
    font-weight: 700;
}

.sqw-community-avatar--large { width: 3rem; height: 3rem; font-size: var(--sq-website-text-base); }
.sqw-community-avatar--blue { background: var(--sq-website-theme-primary); }
.sqw-community-avatar--violet { background: var(--sq-website-theme-violet); }
.sqw-community-avatar--orange { background: var(--sq-website-theme-orange); }
.sqw-community-avatar--cyan { background: #1499a8; }
.sqw-community-avatar--green { background: var(--sq-website-theme-green); }

.sqw-community-avatar-stack { display: flex; padding-left: 0.5rem; }
.sqw-community-avatar-stack .sqw-community-avatar { margin-left: -0.5rem; }

.sqw-community-topic-metrics { justify-content: flex-end; gap: var(--sq-website-spacing-4); }
.sqw-community-topic-metrics span { display: grid; justify-items: end; gap: 0.1rem; }
.sqw-community-topic-metrics strong { color: var(--sq-website-text-title); font-family: var(--sq-website-font-mono); font-size: var(--sq-website-text-sm); }
.sqw-community-topic-metrics small { color: var(--sq-website-text-muted); font-size: var(--sq-website-text-xs); }

.sqw-community-more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sq-website-spacing-2);
    min-height: 3.5rem;
    color: var(--sq-website-theme-primary-strong);
    border-bottom: 1px solid var(--sq-website-border-default);
    font-size: var(--sq-website-text-sm);
    font-weight: 600;
    text-decoration: none;
}

.sqw-community-more svg,
.sqw-community-side-heading svg,
.sqw-community-side-panel > a svg { width: 1rem; height: 1rem; }

.sqw-community-side-panel {
    min-width: 0;
    padding-block: var(--sq-website-spacing-4);
    border-top: 1px solid var(--sq-website-border-default);
}

.sqw-community-side-panel h2,
.sqw-community-side-panel h3 {
    margin-bottom: var(--sq-website-spacing-4);
    color: var(--sq-website-text-title);
    font-size: var(--sq-website-text-base);
}

.sqw-community-side-panel > p:last-child { margin-bottom: 0; color: var(--sq-website-text-muted); font-size: var(--sq-website-text-sm); }
.sqw-community-side-panel > a:not(.sparq-button),
.sqw-community-side-heading a { color: var(--sq-website-theme-primary-strong); text-decoration: none; }

.sqw-community-side-panel > a:not(.sparq-button) {
    display: flex;
    align-items: center;
    gap: var(--sq-website-spacing-3);
    min-height: 3.5rem;
    border-bottom: 1px solid var(--sq-website-border-default);
}

.sqw-community-side-panel > a:not(.sparq-button):last-child { border-bottom: 0; }
.sqw-community-side-panel > a:not(.sparq-button) > span:nth-child(2) { display: grid; flex: 1; gap: var(--sq-website-spacing-1); min-width: 0; }
.sqw-community-side-panel > a:not(.sparq-button) strong { color: var(--sq-website-text-title); font-size: var(--sq-website-text-sm); }
.sqw-community-side-panel > a:not(.sparq-button) small { color: var(--sq-website-text-muted); font-size: var(--sq-website-text-xs); }
.sqw-community-side-icon { display: grid; flex: 0 0 auto; place-items: center; width: 2rem; height: 2rem; border-radius: var(--sq-website-radius-sm); }

.sqw-community-tag-cloud { display: flex; flex-wrap: wrap; gap: var(--sq-website-spacing-2); }
.sqw-community-tag { color: var(--sq-website-text-body); background: var(--sq-website-bg-subtle); text-decoration: none; }
.sqw-community-tag:hover { color: var(--sq-website-theme-primary); background: #e5efff; }
.sqw-community-tag small { color: var(--sq-website-text-muted); font-family: var(--sq-website-font-mono); font-size: 0.68rem; }

.sqw-community-user-list { display: grid; gap: var(--sq-website-spacing-3); }
.sqw-community-user-row { display: grid; grid-template-columns: 1.1rem auto minmax(0, 1fr); gap: var(--sq-website-spacing-2); align-items: center; }
.sqw-community-user-row > strong { color: var(--sq-website-theme-orange); font-family: var(--sq-website-font-mono); font-size: var(--sq-website-text-sm); }
.sqw-community-user-row > span { display: grid; min-width: 0; gap: 0.1rem; }
.sqw-community-user-row b { overflow: hidden; color: var(--sq-website-text-title); font-size: var(--sq-website-text-sm); text-overflow: ellipsis; white-space: nowrap; }
.sqw-community-user-row small { color: var(--sq-website-text-muted); font-size: var(--sq-website-text-xs); }
.sqw-community-user-row em { color: var(--sq-website-theme-orange); font-size: var(--sq-website-text-xs); font-style: normal; }

/* 列表页：频道导航、过滤器和内容保持同一条阅读轴。 */
.sqw-community-channel-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--sq-website-spacing-5);
    padding-block: var(--sq-website-spacing-5);
    border-bottom: 1px solid var(--sq-website-border-default);
}

.sqw-community-channel-hero .sqw-community-banner-art { max-height: 14rem; }
.sqw-community-channel-hero h1 { margin-bottom: var(--sq-website-spacing-3); font-size: var(--sq-website-text-2xl); }
.sqw-community-channel-hero p { max-width: 38rem; margin-bottom: var(--sq-website-spacing-4); color: var(--sq-website-text-muted); }
.sqw-community-channel-stats { display: flex; flex-wrap: wrap; gap: var(--sq-website-spacing-5); }
.sqw-community-channel-stats span { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sq-website-spacing-2); align-items: center; }
.sqw-community-channel-stats svg { grid-row: span 2; width: 1rem; height: 1rem; color: var(--sq-website-theme-primary); }
.sqw-community-channel-stats strong { color: var(--sq-website-text-title); font-family: var(--sq-website-font-mono); font-size: var(--sq-website-text-sm); }
.sqw-community-channel-stats small { color: var(--sq-website-text-muted); font-size: var(--sq-website-text-xs); }

.sqw-community-list-layout {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr) 17rem;
    gap: var(--sq-website-spacing-5);
    align-items: start;
    padding-block: var(--sq-website-spacing-7) var(--sq-website-spacing-9);
}

.sqw-community-list-sidebar { position: sticky; top: 5.25rem; min-width: 0; }
.sqw-community-channel-menu { display: grid; gap: 0.15rem; }
.sqw-community-channel-menu .sqw-community-channel-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sq-website-spacing-2); min-height: 3.3rem; padding: var(--sq-website-spacing-2); background: transparent; border: 0; border-radius: var(--sq-website-radius-sm); box-shadow: none; }
.sqw-community-channel-menu .sqw-community-channel-card:hover { background: var(--sq-website-bg-subtle); transform: none; }
.sqw-community-channel-menu .sqw-community-channel-card:nth-child(n + 1) .sqw-community-channel-icon { width: 1.85rem; height: 1.85rem; border-radius: var(--sq-website-radius-sm); }
.sqw-community-channel-menu .sqw-community-channel-card small { display: none; }
.sqw-community-channel-menu .sqw-community-channel-card em { position: static; transform: none; }
.sqw-community-channel-menu .sqw-community-channel-card[aria-current="page"] { background: var(--sq-website-bg-subtle); color: var(--sq-website-theme-primary); }
.sqw-community-channel-menu .sqw-community-channel-arrow { display: none; }
.sqw-community-advice { background: #f1f6ff; border-color: #dce8fc; }
.sqw-community-advice h3 { margin-bottom: var(--sq-website-spacing-2); font-size: var(--sq-website-text-base); }
.sqw-community-advice .sparq-button { width: 100%; margin-top: var(--sq-website-spacing-3); }

.sqw-community-list-main { min-width: 0; }
.sqw-community-tabs--large { margin-bottom: var(--sq-website-spacing-4); }
.sqw-community-topic-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sq-website-spacing-4); margin-bottom: var(--sq-website-spacing-3); }
.sqw-community-filter-pills { display: flex; flex-wrap: wrap; gap: var(--sq-website-spacing-2); }
.sqw-community-filter-pills button { min-height: 2.5rem; padding: var(--sq-website-spacing-2) var(--sq-website-spacing-3); color: var(--sq-website-text-body); background: var(--sq-website-bg-surface); border: 1px solid var(--sq-website-border-default); border-radius: var(--sq-website-radius-sm); font-size: var(--sq-website-text-xs); }
.sqw-community-filter-pills button:hover,
.sqw-community-filter-pills button.is-active { color: var(--sq-website-theme-primary-strong); border-color: #9abaf0; background: #f3f7ff; }
.sqw-community-topic-toolbar > div:last-child { display: flex; flex: 0 0 auto; align-items: center; gap: var(--sq-website-spacing-3); }
.sqw-community-topic-toolbar select,
.sqw-community-replies-heading select { width: auto; }
.sqw-community-topic-toolbar .sparq-button { white-space: nowrap; }
.sqw-community-full-button { width: 100%; margin-top: var(--sq-website-spacing-4); }
.sqw-community-check-list { display: grid; gap: var(--sq-website-spacing-2); margin: 0; padding: 0; list-style: none; }
.sqw-community-check-list li { position: relative; padding-left: 1.2rem; color: var(--sq-website-text-muted); font-size: var(--sq-website-text-sm); }
.sqw-community-check-list li::before { position: absolute; top: 0.55em; left: 0; width: 0.45rem; height: 0.45rem; background: var(--sq-website-theme-green); border-radius: 50%; content: ""; }
.sqw-community-empty { display: grid; justify-items: center; gap: var(--sq-website-spacing-2); padding: var(--sq-website-spacing-8) var(--sq-website-spacing-5); text-align: center; background: var(--sq-website-bg-surface); border: 1px solid var(--sq-website-border-default); border-radius: var(--sq-website-radius-md); }
.sqw-community-empty svg { width: 2.5rem; height: 2.5rem; color: var(--sq-website-theme-primary); }
.sqw-community-empty h1, .sqw-community-empty h2 { margin-bottom: 0; }
.sqw-community-empty p { margin-bottom: var(--sq-website-spacing-3); color: var(--sq-website-text-muted); }
.sqw-community-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sq-website-spacing-2); margin-top: var(--sq-website-spacing-5); }
.sqw-community-pagination button { display: inline-grid; place-items: center; min-width: 2.5rem; min-height: 2.5rem; padding: var(--sq-website-spacing-2); color: var(--sq-website-text-body); background: var(--sq-website-bg-surface); border: 1px solid var(--sq-website-border-default); border-radius: var(--sq-website-radius-sm); }
.sqw-community-pagination button:hover:not(:disabled), .sqw-community-pagination button[aria-current="page"] { color: #fff; background: var(--sq-website-theme-primary); border-color: var(--sq-website-theme-primary); }
.sqw-community-pagination button:disabled { cursor: not-allowed; opacity: 0.45; }

/* 详情页：正文保持阅读宽度，参与动作放在右侧。 */
.sqw-community-detail-loading { display: flex; justify-content: center; align-items: center; gap: var(--sq-website-spacing-3); min-height: 20rem; color: var(--sq-website-text-muted); }
.sqw-community-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--sq-website-spacing-6); align-items: start; padding-block: var(--sq-website-spacing-7) var(--sq-website-spacing-9); }
.sqw-community-detail-main { min-width: 0; }
.sqw-community-detail-header { position: relative; padding: var(--sq-website-spacing-5) 0; border-bottom: 1px solid var(--sq-website-border-default); }
.sqw-community-detail-labels { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sq-website-spacing-2); margin-bottom: var(--sq-website-spacing-3); }
.sqw-community-detail-labels > span:last-child { display: inline-flex; align-items: center; gap: var(--sq-website-spacing-1); color: var(--sq-website-theme-orange); font-size: var(--sq-website-text-xs); }
.sqw-community-detail-labels svg { width: 0.85rem; height: 0.85rem; }
.sqw-community-detail-header h1 { max-width: calc(100% - 10rem); margin-bottom: var(--sq-website-spacing-4); font-size: var(--sq-website-text-2xl); overflow-wrap: anywhere; }
.sqw-community-detail-author { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sq-website-spacing-2); color: var(--sq-website-text-muted); font-size: var(--sq-website-text-xs); }
.sqw-community-detail-author > span { display: grid; gap: 0.1rem; }
.sqw-community-detail-author strong { color: var(--sq-website-text-title); font-size: var(--sq-website-text-sm); }
.sqw-community-detail-author small { color: var(--sq-website-text-muted); }
.sqw-community-detail-actions { position: absolute; top: var(--sq-website-spacing-5); right: 0; display: flex; gap: var(--sq-website-spacing-2); }
.sqw-community-icon-button { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--sq-website-spacing-2); color: var(--sq-website-text-body); background: var(--sq-website-bg-surface); border: 1px solid var(--sq-website-border-default); border-radius: var(--sq-website-radius-md); }
.sqw-community-detail-tags { display: flex; flex-wrap: wrap; gap: var(--sq-website-spacing-2); padding-block: var(--sq-website-spacing-4); }
.sqw-community-detail-tags span { color: var(--sq-website-text-muted); background: var(--sq-website-bg-subtle); }
.sqw-community-detail-prose { max-width: var(--sq-website-reading-width); padding-block: var(--sq-website-spacing-3) var(--sq-website-spacing-6); color: var(--sq-website-text-body); line-height: 1.8; }
.sqw-community-detail-prose p { margin-bottom: var(--sq-website-spacing-5); }
.sqw-community-detail-prose h2 { margin: var(--sq-website-spacing-6) 0 var(--sq-website-spacing-3); font-size: var(--sq-website-text-lg); }
.sqw-community-detail-prose pre { position: relative; margin: var(--sq-website-spacing-3) 0 var(--sq-website-spacing-5); padding: var(--sq-website-spacing-4) 4.5rem var(--sq-website-spacing-4) var(--sq-website-spacing-4); overflow-x: auto; color: #d9e7ff; background: #0f234b; border-radius: var(--sq-website-radius-sm); font-family: var(--sq-website-font-mono); font-size: var(--sq-website-text-sm); line-height: 1.7; }
.sqw-community-detail-prose code { font-family: inherit; }
.sqw-community-detail-prose pre button { position: absolute; top: var(--sq-website-spacing-3); right: var(--sq-website-spacing-3); min-height: 2rem; padding: var(--sq-website-spacing-1) var(--sq-website-spacing-2); color: #d9e7ff; background: rgb(255 255 255 / 12%); border: 1px solid rgb(255 255 255 / 22%); border-radius: var(--sq-website-radius-sm); font-size: var(--sq-website-text-xs); }
.sqw-community-detail-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sq-website-spacing-3); padding-block: var(--sq-website-spacing-4); border-top: 1px solid var(--sq-website-border-default); border-bottom: 1px solid var(--sq-website-border-default); }
.sqw-community-detail-footer > span:first-child { display: inline-flex; align-items: center; gap: var(--sq-website-spacing-1); color: var(--sq-website-theme-orange); font-family: var(--sq-website-font-mono); }
.sqw-community-detail-footer svg { width: 1rem; height: 1rem; }
.sqw-community-detail-footer button,
.sqw-community-reply button { min-height: 2.25rem; padding: var(--sq-website-spacing-2) var(--sq-website-spacing-3); color: var(--sq-website-text-body); background: var(--sq-website-bg-surface); border: 1px solid var(--sq-website-border-default); border-radius: var(--sq-website-radius-sm); font-size: var(--sq-website-text-xs); }
.sqw-community-detail-footer > span:last-child { display: inline-flex; align-items: center; margin-left: auto; color: var(--sq-website-text-muted); font-size: var(--sq-website-text-xs); }
.sqw-community-detail-footer > span:last-child .sqw-community-avatar + .sqw-community-avatar { margin-left: -0.45rem; }
.sqw-community-replies { padding-top: var(--sq-website-spacing-6); }
.sqw-community-replies-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--sq-website-spacing-3); margin-bottom: var(--sq-website-spacing-3); }
.sqw-community-replies-heading h2 { margin-bottom: 0; font-size: var(--sq-website-text-xl); }
.sqw-community-reply { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sq-website-spacing-3); padding-block: var(--sq-website-spacing-4); border-bottom: 1px solid var(--sq-website-border-default); }
.sqw-community-reply > div:nth-child(2) > strong { color: var(--sq-website-text-title); font-size: var(--sq-website-text-sm); }
.sqw-community-reply time { margin-left: var(--sq-website-spacing-2); color: var(--sq-website-text-muted); font-size: var(--sq-website-text-xs); }
.sqw-community-reply p { margin: var(--sq-website-spacing-2) 0; color: var(--sq-website-text-body); }
.sqw-community-reply > div:nth-child(2) > div { display: flex; align-items: center; gap: var(--sq-website-spacing-2); }
.sqw-community-reply > div:nth-child(2) > div > span { color: var(--sq-website-theme-orange); font-size: var(--sq-website-text-xs); }
.sqw-community-reply > div:nth-child(2) > div svg { display: inline-block; width: 0.85rem; height: 0.85rem; vertical-align: -0.1rem; }
.sqw-community-reply-form { display: flex; align-items: end; gap: var(--sq-website-spacing-3); padding-top: var(--sq-website-spacing-4); }
.sqw-community-reply-form textarea { flex: 1; min-height: 5rem; }
.sqw-community-reply-form .sparq-button { flex: 0 0 auto; }
.sqw-community-author-card { display: flex; align-items: center; gap: var(--sq-website-spacing-3); }
.sqw-community-author-card > div { display: grid; gap: 0.1rem; }
.sqw-community-author-card strong { color: var(--sq-website-text-title); }
.sqw-community-author-card small { color: var(--sq-website-text-muted); font-size: var(--sq-website-text-xs); }
.sqw-community-author-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sq-website-spacing-2); margin-top: var(--sq-website-spacing-4); padding-top: var(--sq-website-spacing-4); border-top: 1px solid var(--sq-website-border-default); }
.sqw-community-author-stats span { display: grid; justify-items: center; gap: 0.1rem; }
.sqw-community-author-stats strong { color: var(--sq-website-text-title); font-family: var(--sq-website-font-mono); }
.sqw-community-author-stats small { color: var(--sq-website-text-muted); font-size: var(--sq-website-text-xs); }
.sqw-community-toc { display: grid; gap: var(--sq-website-spacing-2); margin: 0; padding-left: 1.2rem; color: var(--sq-website-text-muted); font-size: var(--sq-website-text-sm); }
.sqw-community-toc li:first-child { color: var(--sq-website-theme-primary); font-weight: 600; }
.sqw-community-side-panel > .sqw-community-related-topic { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sq-website-spacing-2); min-height: 2.75rem; border-bottom: 0; }
.sqw-community-related-topic span { overflow: hidden; color: var(--sq-website-text-body); font-size: var(--sq-website-text-xs); overflow-wrap: anywhere; }
.sqw-community-related-topic small { color: var(--sq-website-text-muted); font-family: var(--sq-website-font-mono); }
.sqw-community-participation { display: grid; gap: var(--sq-website-spacing-2); margin: 0 0 var(--sq-website-spacing-4); }
.sqw-community-participation div { display: flex; justify-content: space-between; gap: var(--sq-website-spacing-3); font-size: var(--sq-website-text-sm); }
.sqw-community-participation dt { color: var(--sq-website-text-muted); }
.sqw-community-participation dd { margin: 0; color: var(--sq-website-text-title); }
.sqw-community-detail-sidebar .sparq-button { width: 100%; margin-top: var(--sq-website-spacing-2); }

/* 发布页：表单字段有明确标签，辅助说明与错误空间不互相挤压。 */
.sqw-community-page-heading { max-width: 42rem; padding-block: var(--sq-website-spacing-7) var(--sq-website-spacing-5); }
.sqw-community-compose-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--sq-website-spacing-6); align-items: start; padding-bottom: var(--sq-website-spacing-9); }
.sqw-community-compose { display: grid; gap: var(--sq-website-spacing-5); padding: var(--sq-website-spacing-6); background: var(--sq-website-bg-surface); border: 1px solid var(--sq-website-border-default); border-radius: var(--sq-website-radius-md); }
.sqw-community-form-field { display: grid; gap: var(--sq-website-spacing-2); }
.sqw-community-form-field > span,
.sqw-community-topic-types legend,
.sqw-community-options legend { color: var(--sq-website-text-title); font-size: var(--sq-website-text-sm); font-weight: 700; }
.sqw-community-form-field > span b { margin-right: var(--sq-website-spacing-1); color: #c0392b; }
.sqw-community-form-field > small { color: var(--sq-website-text-muted); font-size: var(--sq-website-text-xs); }
.sqw-community-input-count { position: relative; }
.sqw-community-input-count input { padding-right: 4rem; }
.sqw-community-input-count small { position: absolute; top: 50%; right: var(--sq-website-spacing-3); color: var(--sq-website-text-muted); font-size: var(--sq-website-text-xs); transform: translateY(-50%); }
.sqw-community-editor { overflow: hidden; border: 1px solid var(--sq-website-border-strong); border-radius: var(--sq-website-radius-sm); }
.sqw-community-editor-toolbar { display: flex; flex-wrap: wrap; gap: var(--sq-website-spacing-1); padding: var(--sq-website-spacing-2); border-bottom: 1px solid var(--sq-website-border-default); }
.sqw-community-editor-toolbar button { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: var(--sq-website-spacing-1); color: var(--sq-website-text-body); background: transparent; border: 0; border-radius: var(--sq-website-radius-sm); font-size: var(--sq-website-text-sm); }
.sqw-community-editor-toolbar button:hover { color: var(--sq-website-theme-primary); background: var(--sq-website-bg-subtle); }
.sqw-community-editor textarea { display: block; width: 100%; min-height: 12rem; padding: var(--sq-website-spacing-4); resize: vertical; border: 0; outline: 0; }
.sqw-community-editor-footer { display: flex; justify-content: space-between; gap: var(--sq-website-spacing-3); padding: var(--sq-website-spacing-2) var(--sq-website-spacing-4); color: var(--sq-website-text-muted); background: #fafbfe; border-top: 1px solid var(--sq-website-border-default); font-size: var(--sq-website-text-xs); }
.sqw-community-suggested-tags { display: flex; flex-wrap: wrap; gap: var(--sq-website-spacing-2); }
.sqw-community-suggested-tags span { color: var(--sq-website-theme-primary-strong); background: #eef4ff; cursor: pointer; }
.sqw-community-topic-types,
.sqw-community-options { display: grid; gap: var(--sq-website-spacing-3); margin: 0; padding: 0; border: 0; }
.sqw-community-topic-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sqw-community-topic-types legend,
.sqw-community-options legend { grid-column: 1 / -1; }
.sqw-community-topic-types label { display: flex; align-items: start; gap: var(--sq-website-spacing-2); min-height: 3rem; padding: var(--sq-website-spacing-3); border: 1px solid var(--sq-website-border-default); border-radius: var(--sq-website-radius-sm); cursor: pointer; }
.sqw-community-topic-types label.is-active { border-color: var(--sq-website-theme-primary); background: #f2f6ff; }
.sqw-community-topic-types label > span { display: grid; gap: var(--sq-website-spacing-1); }
.sqw-community-topic-types strong { color: var(--sq-website-text-title); font-size: var(--sq-website-text-sm); }
.sqw-community-topic-types small,
.sqw-community-options small { color: var(--sq-website-text-muted); font-size: var(--sq-website-text-xs); }
.sqw-community-options label { display: grid; grid-template-columns: auto 1fr; gap: var(--sq-website-spacing-2); align-items: start; color: var(--sq-website-text-body); font-size: var(--sq-website-text-sm); }
.sqw-community-options label small { grid-column: 2; }
.sqw-community-compose-actions { justify-content: flex-end; padding-top: var(--sq-website-spacing-3); border-top: 1px solid var(--sq-website-border-default); }
.sqw-community-form-success { padding: var(--sq-website-spacing-3); color: var(--sq-website-theme-green); background: #eaf8f3; border-radius: var(--sq-website-radius-sm); font-size: var(--sq-website-text-sm); }
.sqw-community-compose-sidebar { position: sticky; top: 5.25rem; }
.sqw-community-compose-sidebar ol { display: grid; gap: var(--sq-website-spacing-4); margin: 0; padding-left: 1.4rem; }
.sqw-community-compose-sidebar ol li { padding-left: var(--sq-website-spacing-1); color: var(--sq-website-text-title); font-size: var(--sq-website-text-sm); }
.sqw-community-compose-sidebar ol small { display: block; margin-top: var(--sq-website-spacing-1); color: var(--sq-website-text-muted); font-size: var(--sq-website-text-xs); }
.sqw-community-markdown-reference { display: grid; gap: var(--sq-website-spacing-3); margin-bottom: var(--sq-website-spacing-4); }
.sqw-community-markdown-reference span { display: flex; justify-content: space-between; gap: var(--sq-website-spacing-2); color: var(--sq-website-text-body); font-family: var(--sq-website-font-mono); font-size: var(--sq-website-text-xs); }
.sqw-community-markdown-reference small { color: var(--sq-website-text-muted); font-family: var(--sq-website-font-sans); }

.sqw-community-list-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sq-website-spacing-3); margin-block: var(--sq-website-spacing-4); }
.sqw-community-list-search label { display: flex; flex: 1 1 14rem; align-items: center; gap: var(--sq-website-spacing-2); min-width: 0; padding-inline: var(--sq-website-spacing-3); border: 1px solid var(--sq-website-border-strong); border-radius: var(--sq-website-radius-sm); }
.sqw-community-list-search input { flex: 1; min-width: 0; }
.sqw-community-results-summary { color: var(--sq-website-text-muted); font-size: var(--sq-website-text-sm); }
.sqw-community-side-heading { flex-wrap: wrap; gap: var(--sq-website-spacing-2); margin-bottom: var(--sq-website-spacing-3); }
.sqw-community-side-heading h2 { margin: 0; }
.sqw-community-side-heading a { display: inline-flex; align-items: center; gap: var(--sq-website-spacing-1); }
.sqw-community-side-panel > .sqw-text-link { justify-content: flex-start; }
.sqw-community-form-field { min-width: 0; }
.sqw-community-compose { min-width: 0; }
.sqw-community-reply-form textarea { min-width: 0; }
.sqw-community-editor:focus-within { outline: 2px solid var(--sq-website-theme-primary); outline-offset: 2px; }

.sqw-community-home__hero,
.sqw-community-channel-hero {
    border: 1px solid var(--sq-website-border-default);
    border-radius: var(--sq-website-radius-sm);
}

.sqw-community-side-panel,
.sqw-community-topic-row--boxed,
.sqw-community-compose {
    background: var(--sq-website-bg-surface);
    border-color: var(--sq-website-border-default);
    box-shadow: none;
}

.sqw-community-topic-row:hover,
.sqw-community-channel-card:hover {
    border-color: var(--sq-website-theme-primary);
}

@media (max-width: 72rem) {
    .sqw-community-channel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sqw-community-list-layout { grid-template-columns: 13rem minmax(0, 1fr); }
    .sqw-community-list-right { display: none; }
}

@media (max-width: 60rem) {
    .sqw-community-home__stats { max-width: none; }
    .sqw-community-content-grid { grid-template-columns: minmax(0, 1fr); }
    .sqw-community-home-sidebar { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
    .sqw-community-detail-layout,
    .sqw-community-compose-layout { grid-template-columns: minmax(0, 1fr); }
    .sqw-community-detail-sidebar,
    .sqw-community-compose-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 48rem) {
    .sqw-community-home__hero,
    .sqw-community-channel-hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--sq-website-spacing-6); }
    .sqw-community-home h1 { font-size: var(--sq-website-text-2xl); }
    .sqw-community-banner-art { max-height: 13rem; }
    .sqw-community-channel-hero .sqw-community-banner-art { max-height: 10rem; }
    .sqw-community-home__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sq-website-spacing-4); }
    .sqw-community-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sqw-community-list-layout { grid-template-columns: minmax(0, 1fr); padding-top: var(--sq-website-spacing-5); }
    .sqw-community-list-sidebar { position: static; }
    .sqw-community-channel-menu { display: flex; overflow-x: auto; gap: var(--sq-website-spacing-2); }
    .sqw-community-channel-menu .sqw-community-channel-card { flex: 0 0 12rem; }
    .sqw-community-topic-toolbar { align-items: stretch; flex-direction: column; }
    .sqw-community-topic-toolbar > div:last-child { justify-content: space-between; }
    .sqw-community-topic-row { grid-template-columns: minmax(0, 1fr); gap: var(--sq-website-spacing-3); }
    .sqw-community-topic-people { grid-column: 1; }
    .sqw-community-topic-metrics { grid-column: 1; grid-row: auto; flex-direction: row; justify-content: start; gap: var(--sq-website-spacing-4); }
    .sqw-community-topic-metrics span { display: flex; gap: var(--sq-website-spacing-2); }
    .sqw-community-topic-row--boxed { padding: var(--sq-website-spacing-3); }
    .sqw-community-home-sidebar,
    .sqw-community-detail-sidebar,
    .sqw-community-compose-sidebar { grid-template-columns: 1fr; }
    .sqw-community-detail-header h1 { max-width: none; padding-right: 0; }
    .sqw-community-detail-actions { position: static; margin-top: var(--sq-website-spacing-4); }
    .sqw-community-detail-footer > span:last-child { margin-left: 0; }
    .sqw-community-reply-form { align-items: stretch; flex-direction: column; }
    .sqw-community-topic-types { grid-template-columns: 1fr; }
    .sqw-community-compose { padding: var(--sq-website-spacing-4); }
}

@media (max-width: 34rem) {
    .sqw-community-channel-grid { grid-template-columns: 1fr; }
    .sqw-community-filter-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sqw-community-filter-pills button { width: 100%; }
    .sqw-community-home__stats strong { font-size: var(--sq-website-text-base); }
}