.community-shell {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
}
.public-topbar {
    position: sticky;
    top: 0;
    z-index: 250;
    width: 100%;
    min-height: 66px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}
.public-topbar-left,
.public-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.public-drawer-brand {
    display: inline-flex;
    align-items: center;
    height: 40px;
    color: var(--text-primary);
    text-decoration: none;
}
.public-brand-logo {
    display: block;
    width: auto;
    height: 30px;
    object-fit: contain;
}
.public-brand-logo-dark { display: none; }
body.dark-mode .public-brand-logo-light { display: none; }
body.dark-mode .public-brand-logo-dark { display: block; }
.public-top-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid #c8d2df;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
body.dark-mode .public-top-btn { border-color: var(--border-color); }
.public-top-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: var(--input-bg);
}
.public-icon-btn {
    width: 40px;
    min-width: 40px;
    padding: 0;
}
.public-top-btn .material-symbols-outlined { font-size: 20px; line-height: 1; }
.public-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 299;
    opacity: 0;
    background: rgba(15, 23, 42, .38);
    transition: opacity .2s ease;
}
.public-nav-backdrop.open { opacity: 1; }
.public-nav-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 300;
    width: min(290px, calc(100vw - 38px));
    padding: 14px;
    box-sizing: border-box;
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(-105%);
    transition: transform .22s ease;
}
.public-nav-drawer.open { transform: translateX(0); }
.public-nav-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.public-nav-links { display: grid; gap: 5px; margin-top: 22px; }
.public-nav-links a {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 0 12px;
    color: var(--text-primary);
    border-radius: 8px;
    font-weight: 650;
    text-decoration: none;
}
.public-nav-links a:hover { color: var(--primary-color); background: var(--input-bg); }
.public-nav-links .material-symbols-outlined { font-size: 21px; }
.public-status-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    background: #ef4444;
    border: 2px solid var(--card-bg);
    border-radius: 50%;
}
@media (max-width: 620px) {
    .public-topbar { min-height: 64px; padding: 0 12px; }
    .public-login-btn { width: 40px; padding: 0; font-size: 0; gap: 0; }
    .public-login-btn .material-symbols-outlined { font-size: 20px; }
}
.community-hero { padding: 58px 0 28px; }
.community-hero.compact { padding-bottom: 20px; }
.community-hero-actions {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.community-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.community-eyebrow .material-symbols-outlined { font-size: 19px; }
.community-hero h1 {
    max-width: 760px;
    margin: 12px 0 12px;
    color: var(--text-primary);
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}
.community-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 17px;
    line-height: 1.65;
}
.community-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; padding: 12px 0 64px; }
.community-card {
    grid-column: span 6;
    padding: 24px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}
.community-card.full { grid-column: 1 / -1; }
.community-card-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    color: var(--primary-color);
    background: rgba(176,128,66,.1);
    border-radius: 8px;
}
.community-card h2,
.community-card h3 { margin: 0 0 8px; color: var(--text-primary); }
.community-card h2 { font-size: 21px; }
.community-card h3 { font-size: 18px; }
.community-card p { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.community-card a { color: inherit; text-decoration: none; }
.community-card-link { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.community-card-link:hover { transform: translateY(-3px); border-color: var(--primary-color); box-shadow: var(--shadow-md); }
.community-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; color: var(--text-secondary); font-size: 13px; font-weight: 700; }
.community-tag { padding: 5px 8px; color: var(--primary-color); background: rgba(176,128,66,.1); border-radius: 6px; }
.community-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    color: var(--primary-color) !important;
    font-size: 14px;
    font-weight: 800;
}
.community-action .material-symbols-outlined { font-size: 19px; }
.release-list { display: grid; gap: 18px; padding: 12px 0 64px; }
.release {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 24px;
    padding: 26px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
}
.release-version { color: var(--primary-color); font-size: 26px; font-weight: 900; }
.release-date { margin-top: 5px; color: var(--text-secondary); font-size: 13px; }
.release h2 { margin: 0 0 12px; color: var(--text-primary); font-size: 22px; }
.release-content { display: grid; gap: 20px; }
.release-section h2 { margin-bottom: 9px; }
.release ul { margin: 0; padding-left: 20px; color: var(--text-secondary); line-height: 1.65; }
.release li + li { margin-top: 7px; }
.changelog-intro { margin: 0 0 4px; color: var(--text-secondary); line-height: 1.6; }
.article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; padding: 10px 0 64px; }
.article-body,
.article-side {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
}
.article-body { padding: clamp(24px, 5vw, 48px); }
.article-body h2 { margin: 30px 0 10px; color: var(--text-primary); }
.article-body p,
.article-body li { color: var(--text-secondary); font-size: 16px; line-height: 1.75; }
.article-side { align-self: start; padding: 20px; position: sticky; top: 92px; }
.article-side h3 { margin: 0 0 12px; font-size: 16px; }
.article-side a { display: block; padding: 9px 0; color: var(--text-secondary); text-decoration: none; border-top: 1px solid var(--border-color); }
.article-side a:hover { color: var(--primary-color); }
.forum-status { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; padding: 18px; background: rgba(176,128,66,.08); border: 1px solid rgba(176,128,66,.3); border-radius: 8px; }
.forum-status .material-symbols-outlined { color: var(--primary-color); }
.forum-status strong { display: block; margin-bottom: 4px; }
.community-notice {
    margin: 24px 0 0;
    padding: 13px 15px;
    color: var(--text-primary);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 4px solid #16a34a;
    border-radius: 8px;
}
.community-notice.error { border-left-color: #dc2626; }
.community-primary-btn,
.community-small-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 8px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
}
.community-primary-btn {
    padding: 11px 16px;
    color: #fff;
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}
.community-primary-btn:hover { filter: brightness(.94); }
.community-primary-btn .material-symbols-outlined { font-size: 19px; }
.community-small-btn {
    padding: 7px 10px;
    color: var(--text-primary);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}
.community-small-btn.approve { color: #fff; background: #15803d; border-color: #15803d; }
.community-filters {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 4px 0 16px;
}
.community-filters a {
    flex: 0 0 auto;
    padding: 8px 11px;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 750;
}
.community-filters a:hover,
.community-filters a.active { color: var(--primary-color); border-color: var(--primary-color); background: rgba(176,128,66,.08); }
.community-editor,
.community-moderation {
    margin: 10px 0 24px;
    padding: 24px;
    color: var(--text-primary);
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
}
.community-editor h2,
.community-moderation h2 { margin: 0 0 7px; }
.community-editor > p { margin: 0 0 18px; color: var(--text-secondary); }
.community-editor form { display: grid; gap: 15px; }
.community-editor label { display: grid; gap: 7px; font-weight: 750; }
.community-editor input,
.community-editor select,
.community-editor textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    color: var(--text-primary);
    background: var(--input-bg, var(--card-bg));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font: inherit;
}
.community-editor textarea { resize: vertical; line-height: 1.55; }
.community-editor input:focus,
.community-editor select:focus,
.community-editor textarea:focus { outline: 2px solid color-mix(in srgb, var(--primary-color) 35%, transparent); border-color: var(--primary-color); }
.community-editor .community-primary-btn { justify-self: start; }
.community-moderation > article {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
    border-top: 1px solid var(--border-color);
}
.community-moderation > article:first-of-type { margin-top: 14px; }
.community-moderation article span { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 13px; }
.community-moderation article p { margin: 8px 0 0; color: var(--text-secondary); }
.community-inline-actions { display: flex; align-items: flex-start; gap: 8px; }
.community-back { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-color); text-decoration: none; font-weight: 800; }
.community-back .material-symbols-outlined { font-size: 19px; }
.forum-category-list,
.forum-topic-list,
.forum-thread { display: grid; gap: 12px; padding: 8px 0 28px; }
.forum-category,
.forum-topic,
.forum-post,
.community-empty,
.forum-rules {
    color: var(--text-primary);
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
}
.forum-category,
.forum-topic {
    display: grid;
    align-items: center;
    gap: 18px;
    padding: 20px;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}
.forum-category { grid-template-columns: 46px minmax(0, 1fr) 72px 72px 24px; }
.forum-topic { grid-template-columns: minmax(0, 1fr) 76px 24px; }
.forum-category:hover,
.forum-topic:hover { border-color: var(--primary-color); transform: translateY(-2px); }
.forum-category-icon { display: grid; place-items: center; width: 46px; height: 46px; color: var(--primary-color); background: rgba(176,128,66,.1); border-radius: 8px; }
.forum-category h2,
.forum-topic h2 { margin: 0 0 5px; font-size: 18px; }
.forum-category p { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.forum-stat,
.forum-count { text-align: center; color: var(--text-secondary); }
.forum-stat strong,
.forum-count strong { display: block; color: var(--text-primary); font-size: 18px; }
.forum-stat span,
.forum-count span,
.forum-topic div > span { font-size: 12px; color: var(--text-secondary); }
.forum-post { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; padding: 22px; }
.forum-post.original { border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color)); }
.forum-author { display: flex; flex-direction: column; gap: 4px; color: var(--text-secondary); font-size: 13px; }
.forum-author strong { color: var(--text-primary); font-size: 15px; }
.forum-post-content p { margin: 0 0 12px; color: var(--text-secondary); line-height: 1.65; }
.forum-post-content p:last-child { margin-bottom: 0; }
.forum-thread > h2 { margin: 20px 0 0; }
.community-empty { padding: 28px; color: var(--text-secondary); text-align: center; }
.forum-rules { display: flex; gap: 14px; margin: 0 0 64px; padding: 18px; }
.forum-rules > .material-symbols-outlined { color: var(--primary-color); }
.forum-rules strong { display: block; margin-bottom: 4px; }
.forum-rules p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.forum-reply-box { margin-bottom: 64px; }
@media (max-width: 760px) {
    .community-hero { padding-top: 38px; }
    .community-hero-actions { align-items: flex-start; flex-direction: column; }
    .community-card { grid-column: 1 / -1; }
    .release { grid-template-columns: 1fr; gap: 12px; }
    .article-wrap { grid-template-columns: 1fr; }
    .article-side { position: static; }
    .community-moderation > article { flex-direction: column; }
    .forum-category { grid-template-columns: 42px minmax(0, 1fr) 20px; }
    .forum-category .forum-stat { display: none; }
    .forum-topic { grid-template-columns: minmax(0, 1fr) 20px; }
    .forum-count { display: none; }
    .forum-post { grid-template-columns: 1fr; gap: 12px; }
}