/* 社区页精细化样式 */

.main-nav .is-active {
    color: var(--custom-nav-hover, #a0522d);
    font-weight: bold;
    background: color-mix(in srgb, var(--custom-section-bg, #f7e8d0) 90%, transparent);
    border-color: var(--custom-section-border, #dcc9ba);
}

.community-hero {
    margin: 6px 0 22px;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--custom-header-bg, #fdf3e7) 0%, var(--custom-section-bg, #f7e8d0) 100%);
    border: 1px solid var(--custom-section-border, #dcc9ba);
    border-radius: 12px;
}

.community-hero h1 {
    margin: 0 0 8px;
    color: var(--custom-primary-text, #6b4f4f);
}

.community-hero p {
    margin: 0;
    color: var(--custom-secondary-text, #8b7355);
}

.community-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.2fr);
    gap: 20px;
    align-items: start;
}

.panel {
    background: var(--custom-section-bg, #fdf3e7);
    border: 1px solid var(--custom-section-border, #dcc9ba);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(74, 63, 53, 0.12);
    padding: 20px;
}

.panel h2 {
    margin-top: 0;
    margin-bottom: 16px;
}

.upload-form .form-group {
    margin-bottom: 14px;
}

.upload-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    color: var(--custom-primary-text, #6b4f4f);
}

.upload-form input[type="text"],
.upload-form select,
.upload-form textarea,
.upload-form input[type="file"] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--custom-input-border, #d8c3b2);
    border-radius: 8px;
    background: var(--custom-input-bg, #fffaf4);
    color: var(--custom-input-text, #4a3f35);
}

.upload-form input[type="text"],
.upload-form select,
.upload-form textarea {
    padding: 10px 12px;
}

.upload-form input[type="file"] {
    padding: 6px;
    cursor: pointer;
}

.file-input-cn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    border: 1px solid var(--custom-input-border, #d8c3b2);
    border-radius: 8px;
    background: var(--custom-input-bg, #fffaf4);
    padding: 6px 8px;
}

.file-input-native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.file-input-trigger {
    border: 1px solid var(--btn-primary-border);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-radius: var(--btn-radius);
    padding: 6px 12px;
    font-weight: var(--btn-font-weight);
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease;
    user-select: none;
    flex-shrink: 0;
}

.file-input-trigger:hover {
    filter: brightness(1.06);
}

.file-input-trigger:active {
    transform: translateY(1px);
}

.file-input-name {
    color: var(--custom-input-text, #4a3f35);
    font-size: 0.92em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-input-name.is-empty {
    color: var(--custom-secondary-text, #8b7355);
}

.upload-form input[type="file"]::file-selector-button,
.upload-form input[type="file"]::-webkit-file-upload-button {
    border: 1px solid var(--custom-accent, #8b4513);
    background: linear-gradient(180deg, color-mix(in srgb, var(--custom-accent, #8b4513) 75%, #ffffff) 0%, var(--custom-accent, #8b4513) 100%);
    color: var(--custom-accent-text, #fdf3e7);
    border-radius: 999px;
    padding: 6px 12px;
    margin-right: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease;
}

.upload-form input[type="file"]:hover::file-selector-button,
.upload-form input[type="file"]:hover::-webkit-file-upload-button {
    filter: brightness(1.06);
}

.upload-form input[type="file"]:active::file-selector-button,
.upload-form input[type="file"]:active::-webkit-file-upload-button {
    transform: translateY(1px);
}

.upload-form textarea {
    resize: vertical;
    min-height: 110px;
}

.upload-form input:focus,
.upload-form select:focus,
.upload-form textarea:focus {
    outline: none;
    border-color: var(--custom-accent, #a0522d);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--custom-accent, #a0522d) 18%, transparent);
    background: var(--custom-input-bg, #fff);
}

.upload-form small {
    display: block;
    margin-top: 4px;
    color: var(--custom-secondary-text, #8b7355);
    font-size: 0.85em;
}

.btn-submit,
.btn-ghost {
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.2s ease, background 0.2s ease;
}

.btn-submit {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--btn-primary-border);
    color: var(--btn-primary-text);
    background: var(--btn-primary-bg);
}

.btn-submit:hover,
.btn-ghost:hover {
    filter: brightness(1.05);
}

.btn-submit:active,
.btn-ghost:active {
    transform: scale(0.98);
}

.feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.feed-header h2 {
    margin: 0;
}

.feed-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feed-sort-label {
    color: var(--custom-secondary-text, #8b7355);
    font-size: 0.9em;
}

.feed-sort-select {
    border: 1px solid var(--custom-input-border, #dcc9ba);
    background: var(--custom-input-bg, #fffaf4);
    color: var(--custom-input-text, #6b4f4f);
    border-radius: 8px;
    padding: 7px 10px;
}

.feed-sort-select:focus {
    outline: none;
    border-color: var(--custom-accent, #a0522d);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--custom-accent, #a0522d) 18%, transparent);
}

.btn-ghost {
    border: 1px solid var(--btn-secondary-border);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    padding: 8px 14px;
}

.posts-list {
    display: grid;
    gap: 12px;
}

.post-card {
    background: var(--custom-card-bg, #fffaf4);
    border: 1px solid var(--custom-card-border, #e6d7c9);
    border-radius: 10px;
    padding: 14px;
}

.post-cover-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--custom-card-border, #dcc9ba);
    background: color-mix(in srgb, var(--custom-card-bg, #fffaf4) 85%, var(--custom-section-bg, #efe2d2));
    margin-bottom: 10px;
    display: block;
}

.post-cover-media.is-video {
    background: color-mix(in srgb, var(--custom-page-bg, #faebd7) 12%, #111);
}

.post-card.is-clickable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.post-card.is-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
    border-color: color-mix(in srgb, var(--custom-card-border, #dcc9ba) 80%, var(--custom-accent, #8b4513));
}

.post-card.is-clickable:focus-visible {
    outline: 2px solid var(--custom-accent, #8b4513);
    outline-offset: 2px;
}

.post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--custom-secondary-text, #8b7355);
    font-size: 0.85em;
}

.post-section {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--custom-card-border, #dcc9ba);
    background: color-mix(in srgb, var(--custom-section-bg, #f7e8d0) 85%, transparent);
    color: var(--custom-primary-text, #6b4f4f);
    font-weight: bold;
}

.post-card h3 {
    margin: 0 0 8px;
    color: var(--custom-primary-text, #6b4f4f);
    font-size: 1.05em;
}

.post-card p {
    position: relative;
    margin: 0 0 8px;
    color: var(--custom-page-text, #4a3f35);
}

.post-engagement {
    color: var(--custom-secondary-text, #8b7355);
    font-size: 0.9em;
}

.media-link {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    color: var(--custom-accent, #8b4513);
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

.post-card-avatar-float {
    position: absolute;
    top: -14px;
    left: 12px;
    z-index: 2;
}

.post-card-avatar-float .author-avatar-badge {
    width: 28px;
    height: 28px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.media-link:hover {
    color: var(--custom-nav-hover, #a0522d);
    text-decoration: underline;
}

.post-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.post-like-btn {
    border: 1px solid var(--btn-secondary-border);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-radius: var(--btn-radius);
    padding: 4px 10px;
    font-weight: var(--btn-font-weight);
    cursor: pointer;
}

.post-like-btn:hover {
    filter: brightness(1.03);
}

.post-like-btn.is-liked {
    border-color: color-mix(in srgb, var(--custom-accent, #8b4513) 35%, #c66a5b);
    color: color-mix(in srgb, var(--custom-accent, #8b4513) 75%, #8f2f2f);
    background: color-mix(in srgb, var(--custom-accent, #8b4513) 12%, #fde9e6);
}

.post-like-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.detail-link {
    color: var(--custom-accent, #8b4513);
    font-weight: bold;
    text-decoration: none;
}

.detail-link:hover {
    color: var(--custom-nav-hover, #a0522d);
    text-decoration: underline;
}

.post-author {
    margin: 0 0 8px;
    color: var(--custom-secondary-text, #8b7355);
    font-size: 0.9em;
}

.post-author-row,
.detail-author-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.author-avatar-badge,
.detail-author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: var(--custom-primary-text, #6b4f4f);
    border: 1px solid var(--custom-card-border, #dcc9ba);
    background: color-mix(in srgb, var(--custom-section-bg, #f7e8d0) 80%, transparent);
    flex-shrink: 0;
}

.author-avatar-badge.has-avatar,
.detail-author-avatar.has-avatar,
.comment-avatar.has-avatar {
    background-color: var(--custom-input-bg, #fff);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: transparent;
}

.post-author-link {
    color: var(--custom-accent, #8b4513);
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

.post-author-link:hover {
    color: var(--custom-nav-hover, #a0522d);
    text-decoration: underline;
}

.post-author-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--custom-accent, #8b4513) 35%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
    color: var(--custom-nav-hover, #a0522d);
    text-decoration: underline;
}

.detail-author-link {
    color: var(--custom-accent, #8b4513);
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

.detail-author-link:hover {
    color: var(--custom-nav-hover, #a0522d);
    text-decoration: underline;
}

.detail-author-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--custom-accent, #8b4513) 35%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
    color: var(--custom-nav-hover, #a0522d);
    text-decoration: underline;
}

.comment-author-link {
    color: var(--custom-accent, #8b4513);
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

.comment-author-link:hover {
    color: var(--custom-nav-hover, #a0522d);
    text-decoration: underline;
}

.comment-author-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--custom-accent, #8b4513) 35%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
    color: var(--custom-nav-hover, #a0522d);
    text-decoration: underline;
}

.post-comment-count {
    margin: 0 0 8px;
    color: var(--custom-secondary-text, #8b7355);
    font-size: 0.9em;
}

.post-detail-page {
    padding-top: 8px;
    padding-bottom: 24px;
}

.post-detail-page.container {
    max-width: 1320px;
}

.back-community {
    display: inline-block;
    margin: 6px 0 12px;
    color: var(--custom-accent, #8b4513);
    text-decoration: none;
    font-weight: bold;
}

.back-community:hover {
    color: var(--custom-nav-hover, #a0522d);
    text-decoration: underline;
}

.post-detail-panel {
    min-height: 180px;
}

.post-detail-layout {
    display: grid;
    grid-template-columns: minmax(560px, 1.45fr) minmax(380px, 1fr);
    gap: 24px;
    align-items: start;
}

.post-detail-media {
    background: var(--custom-card-bg, #fffaf4);
    border: 1px solid var(--custom-card-border, #e6d7c9);
    border-radius: 12px;
    padding: 14px;
}

.post-detail-content {
    display: grid;
    gap: 14px;
}

.detail-title {
    margin: 0 0 8px;
    color: var(--custom-primary-text, #6b4f4f);
    font-size: 1.8rem;
    line-height: 1.35;
}

.detail-author {
    margin: 0 0 10px;
    color: var(--custom-secondary-text, #8b7355);
}

.detail-description {
    margin: 0 0 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.detail-media-wrap {
    min-height: 420px;
}

.detail-cover-wrap {
    margin-bottom: 12px;
}

.detail-cover-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--custom-card-border, #dcc9ba);
    background: color-mix(in srgb, var(--custom-card-bg, #fffaf4) 85%, var(--custom-section-bg, #efe2d2));
    display: block;
}

.detail-cover-media.is-video {
    background: color-mix(in srgb, var(--custom-page-bg, #faebd7) 12%, #111);
}

.detail-media-main {
    margin-top: 10px;
}

.detail-media-image,
.detail-media-video {
    width: 100%;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 8px;
    background: var(--custom-card-bg, #fffaf4);
}

.detail-media-audio {
    width: 100%;
}

.post-comments {
    border-top: 1px dashed var(--custom-card-border, #dcc9ba);
    padding-top: 14px;
}

.post-enhance,
.related-posts {
    border-top: 1px dashed var(--custom-card-border, #dcc9ba);
    padding-top: 14px;
}

.post-enhance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.post-enhance-header h2 {
    margin: 0;
    font-size: 1.05em;
    color: var(--custom-primary-text, #6b4f4f);
}

.post-enhance-status {
    color: var(--custom-secondary-text, #8b7355);
    font-size: 0.9em;
}

.post-enhance-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 10px;
}

.post-enhance-actions .btn-ghost {
    width: 100%;
}

.post-enhance-actions .btn-ghost.is-active {
    border-color: var(--custom-accent, #8b4513);
    color: var(--custom-accent, #8b4513);
    background: color-mix(in srgb, var(--custom-accent, #8b4513) 8%, transparent);
}

.post-enhance-tip {
    margin: 10px 0 0;
    color: var(--custom-secondary-text, #8b7355);
    font-size: 0.9em;
}

.related-posts-list {
    display: grid;
    gap: 10px;
}

.related-post-item {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--custom-card-border, #e6d7c9);
    border-radius: 10px;
    background: var(--custom-card-bg, #fffaf4);
    padding: 10px 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.related-post-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    border: 1px solid var(--custom-card-border, #dcc9ba);
    object-fit: cover;
    display: block;
    margin-bottom: 8px;
    background: color-mix(in srgb, var(--custom-card-bg, #fffaf4) 85%, var(--custom-section-bg, #efe2d2));
}

.related-post-cover.is-video {
    background: color-mix(in srgb, var(--custom-page-bg, #faebd7) 12%, #111);
}

.related-post-item:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--custom-card-border, #dcc9ba) 75%, var(--custom-accent, #8b4513));
    box-shadow: 0 8px 18px rgba(74, 63, 53, 0.08);
}

.related-post-item h3 {
    margin: 0 0 4px;
    color: var(--custom-primary-text, #6b4f4f);
    font-size: 1rem;
}

.related-post-item p {
    margin: 0;
    color: var(--custom-secondary-text, #8b7355);
    font-size: 0.88em;
}

.post-comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.post-comments-header h2 {
    margin: 0;
    font-size: 1.05em;
    color: var(--custom-primary-text, #6b4f4f);
}

.comment-count {
    color: var(--custom-secondary-text, #8b7355);
    font-size: 0.9em;
}

.comment-form {
    margin-bottom: 12px;
}

.comment-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--custom-input-border, #d8c3b2);
    border-radius: 8px;
    background: var(--custom-input-bg, #fffaf4);
    color: var(--custom-input-text, #4a3f35);
    padding: 10px 12px;
    resize: vertical;
    min-height: 88px;
}

.comment-form textarea:focus {
    outline: none;
    border-color: var(--custom-accent, #a0522d);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--custom-accent, #a0522d) 18%, transparent);
    background: var(--custom-input-bg, #fff);
}

.comment-form-actions {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.comment-form .btn-submit {
    width: auto;
    min-width: 110px;
    padding: 9px 14px;
}

.comment-login-tip {
    margin: 0;
    color: var(--custom-accent, #8b4513);
    font-size: 0.9em;
}

.comments-list {
    display: grid;
    gap: 10px;
}

.comment-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--custom-card-border, #e6d7c9);
    border-radius: 10px;
    background: var(--custom-card-bg, #fffaf4);
}

.comment-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: bold;
    color: var(--custom-primary-text, #6b4f4f);
    border: 1px solid var(--custom-card-border, #dcc9ba);
    background: color-mix(in srgb, var(--custom-section-bg, #f7e8d0) 80%, transparent);
}

.comment-main {
    min-width: 0;
}

.comment-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    color: var(--custom-secondary-text, #8b7355);
    font-size: 0.86em;
}

.comment-head strong {
    color: var(--custom-primary-text, #6b4f4f);
}

.comment-content {
    margin: 6px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.loading-state,
.empty-state,
.error-state {
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    background: var(--custom-card-bg, #fffaf4);
    border: 1px dashed var(--custom-card-border, #dcc9ba);
    color: var(--custom-primary-text, #6b4f4f);
}

.error-state {
    color: var(--custom-accent, #8b4513);
}

.media-preview-modal {
    position: fixed;
    inset: 0;
    background: rgba(24, 18, 14, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 20px;
}

.media-preview-panel {
    width: min(960px, 100%);
    max-height: 88vh;
    background: var(--custom-panel-bg, #fdf3e7);
    border: 1px solid var(--custom-card-border, #dcc9ba);
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.media-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--custom-card-border, #e6d7c9);
}

.media-preview-header h3 {
    margin: 0;
    color: var(--custom-primary-text, #6b4f4f);
    font-size: 1em;
}

.media-preview-body {
    padding: 12px;
    overflow: auto;
}

.preview-image,
.preview-frame {
    width: 100%;
    border: none;
    border-radius: 8px;
    display: block;
    background: var(--custom-card-bg, #fffaf4);
}

.preview-video {
    width: 100%;
    max-height: 70vh;
    border-radius: 8px;
    background: color-mix(in srgb, var(--custom-page-bg, #faebd7) 10%, #111);
}

.preview-audio {
    width: 100%;
    margin: 12px 0;
}

.preview-image {
    max-height: 70vh;
    object-fit: contain;
}

.preview-frame {
    height: 70vh;
}

.preview-fallback,
.preview-tip {
    margin: 12px 0 8px;
    color: var(--custom-primary-text, #6b4f4f);
}

.preview-open-link {
    display: inline-block;
    color: var(--custom-accent, #8b4513);
    font-weight: bold;
    text-decoration: none;
}

.preview-open-link:hover {
    color: var(--custom-nav-hover, #a0522d);
    text-decoration: underline;
}

.hidden {
    display: none !important;
}

@media (max-width: 900px) {
    .community-layout {
        grid-template-columns: 1fr;
    }

    .post-detail-layout {
        grid-template-columns: 1fr;
    }

    .detail-media-image,
    .detail-media-video {
        max-height: 56vh;
    }

    .detail-media-wrap {
        min-height: 260px;
    }

    .post-enhance-actions {
        grid-template-columns: 1fr;
    }

    .feed-tools {
        width: 100%;
        flex-wrap: wrap;
    }

    .feed-sort-select {
        flex: 1;
        min-width: 120px;
    }

    .comment-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .comment-form .btn-submit {
        width: 100%;
    }
}

[data-theme="dark"] .community-hero,
[data-theme="dark"] .panel,
[data-theme="dark"] .post-card,
[data-theme="dark"] .post-detail-media,
[data-theme="dark"] .post-cover-media,
[data-theme="dark"] .detail-cover-media,
[data-theme="dark"] .related-post-cover,
[data-theme="dark"] .comment-item,
[data-theme="dark"] .loading-state,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .error-state,
[data-theme="dark"] .media-preview-panel,
[data-theme="dark"] .related-post-item {
    background: hsl(275, 41%, 19%);
    border-color: #444;
    color: antiquewhite;
}

[data-theme="dark"] .post-cover-media.is-video,
[data-theme="dark"] .detail-cover-media.is-video,
[data-theme="dark"] .related-post-cover.is-video {
    background: #121212;
}

[data-theme="dark"] .community-hero p,
[data-theme="dark"] .upload-form small,
[data-theme="dark"] .post-meta,
[data-theme="dark"] .comment-head,
[data-theme="dark"] .comment-count,
[data-theme="dark"] .post-enhance-status,
[data-theme="dark"] .post-enhance-tip,
[data-theme="dark"] .related-post-item p {
    color: #d7d1c8;
}

[data-theme="dark"] .upload-form label,
[data-theme="dark"] .community-hero h1,
[data-theme="dark"] .post-card h3,
[data-theme="dark"] .post-comments-header h2,
[data-theme="dark"] .comment-head strong,
[data-theme="dark"] .post-enhance-header h2,
[data-theme="dark"] .related-post-item h3 {
    color: antiquewhite;
}

[data-theme="dark"] .upload-form input[type="text"],
[data-theme="dark"] .upload-form textarea,
[data-theme="dark"] .comment-form textarea,
[data-theme="dark"] .upload-form input[type="file"] {
    background: hsl(278, 72%, 17%);
    border-color: #444;
    color: antiquewhite;
}

[data-theme="dark"] .file-input-cn {
    background: hsl(278, 72%, 17%);
    border-color: #444;
}

[data-theme="dark"] .file-input-trigger {
    border-color: #8c4f2a;
    background: linear-gradient(180deg, #8c4f2a 0%, #6b3412 100%);
    color: #f4e6d6;
}

[data-theme="dark"] .file-input-name,
[data-theme="dark"] .file-input-name.is-empty {
    color: antiquewhite;
}

[data-theme="dark"] .upload-form input[type="file"]::file-selector-button,
[data-theme="dark"] .upload-form input[type="file"]::-webkit-file-upload-button {
    border-color: #8c4f2a;
    background: linear-gradient(180deg, #8c4f2a 0%, #6b3412 100%);
    color: #f4e6d6;
}

[data-theme="dark"] .upload-form input:focus,
[data-theme="dark"] .upload-form textarea:focus,
[data-theme="dark"] .comment-form textarea:focus {
    border-color: #d4a574;
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.25);
    background: #2f2f36;
}

[data-theme="dark"] .comment-avatar {
    background: #2a2a2a;
    border-color: #444;
    color: #d4a574;
}

[data-theme="dark"] .btn-ghost {
    background: #2a2a2a;
    border-color: #444;
    color: antiquewhite;
}
[data-theme="dark"] .post-enhance-actions .btn-ghost.is-active {
    background: rgba(212, 165, 116, 0.18);
    border-color: #d4a574;
    color: #f3dfc7;
}

[data-theme="dark"] .feed-sort-select {
    background: #2a2a2a;
    border-color: #444;
    color: antiquewhite;
}

[data-theme="dark"] .post-section {
    background: #2a2a2a;
    border-color: #444;
    color: #d4a574;
}

[data-theme="dark"] .media-link {
    color: #d4a574;
}

[data-theme="dark"] .post-engagement {
    color: #d7d1c8;
}

[data-theme="dark"] .post-like-btn {
    background: #2a2a2a;
    border-color: #444;
    color: antiquewhite;
}

[data-theme="dark"] .post-like-btn.is-liked {
    background: #4a1f2a;
    border-color: #8f4052;
    color: #ffd6d6;
}

[data-theme="dark"] .media-preview-header {
    border-color: #444;
}

[data-theme="dark"] .media-preview-header h3 {
    color: antiquewhite;
}

[data-theme="dark"] .preview-image,
[data-theme="dark"] .preview-frame {
    background: hsl(278, 72%, 17%);
}

[data-theme="dark"] .preview-fallback,
[data-theme="dark"] .preview-tip,
[data-theme="dark"] .preview-open-link {
    color: #d4a574;
}

.community-page {
    background: var(--custom-page-bg, #faebd7);
    color: var(--custom-page-text, #4a3f35);
}

.community-page .site-header {
    background: var(--custom-header-bg, #fdf3e7);
    border-bottom-color: var(--custom-header-border, #e4d9c9);
}

.community-page .site-footer {
    background: var(--custom-footer-bg, #ffffff);
    border-top-color: var(--custom-footer-border, #dddddd);
    color: var(--custom-footer-text, #6b4f4f);
}

.community-page .main-nav a,
.community-page .logo span,
.community-page .nav-user-name,
.community-page .dropdown-item {
    color: var(--custom-nav-text, #333333);
}

.community-page .main-nav a:hover,
.community-page .main-nav .is-active {
    color: var(--custom-nav-hover, #a0522d);
}

.community-page .community-hero,
.community-page .panel,
.community-page .post-card,
.community-page .post-engagement,
.community-page .comment-card,
.community-page .media-preview-panel {
    background: var(--custom-card-bg, #fffaf4);
    border-color: var(--custom-card-border, #dcc9ba);
}

.community-page .community-hero h1,
.community-page .panel h2,
.community-page .post-title,
.community-page .post-author,
.community-page .post-time,
.community-page .media-preview-header h3 {
    color: var(--custom-primary-text, #6b4f4f);
}

.community-page .community-hero p,
.community-page .feed-sort-label,
.community-page .post-section,
.community-page .post-description,
.community-page .post-engagement,
.community-page .preview-tip,
.community-page .empty-state {
    color: var(--custom-secondary-text, #8b7355);
}

.community-page .upload-form label,
.community-page .upload-form small,
.community-page .media-link,
.community-page .preview-open-link {
    color: var(--custom-primary-text, #6b4f4f);
}

.community-page .upload-form input[type="text"],
.community-page .upload-form select,
.community-page .upload-form textarea,
.community-page .file-input-cn,
.community-page .feed-sort-select,
.community-page .comment-input {
    background: var(--custom-input-bg, #ffffff);
    border-color: var(--custom-input-border, #dcc9ba);
    color: var(--custom-input-text, #4a3f35);
}

.community-page .upload-form input:focus,
.community-page .upload-form select:focus,
.community-page .upload-form textarea:focus,
.community-page .feed-sort-select:focus,
.community-page .comment-input:focus {
    border-color: var(--custom-accent, #8b4513);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--custom-accent, #8b4513) 24%, transparent);
}

.community-page .btn-submit,
.community-page .post-like-btn,
.community-page .btn-primary {
    background: var(--custom-accent, #8b4513);
    border-color: var(--custom-accent, #8b4513);
    color: var(--custom-accent-text, #fdf3e7);
}

.community-page .btn-ghost,
.community-page .post-action,
.community-page .post-delete-btn {
    background: var(--custom-card-bg, #fffaf4);
    border-color: var(--custom-card-border, #dcc9ba);
    color: var(--custom-accent, #8b4513);
}

.community-page .post-detail-media,
.community-page .post-cover-media,
.community-page .detail-cover-media,
.community-page .related-post-cover,
.community-page .detail-media-image,
.community-page .detail-media-video,
.community-page .preview-image,
.community-page .preview-frame,
.community-page .comment-item,
.community-page .related-post-item,
.community-page .loading-state,
.community-page .empty-state,
.community-page .error-state,
.community-page .post-section,
.community-page .comment-avatar,
.community-page .author-avatar-badge,
.community-page .detail-author-avatar {
    background: var(--custom-card-bg, #fffaf4);
    border-color: var(--custom-card-border, #dcc9ba);
}

.community-page .post-cover-media.is-video,
.community-page .detail-cover-media.is-video,
.community-page .related-post-cover.is-video,
.community-page .preview-video {
    background: color-mix(in srgb, var(--custom-page-bg, #faebd7) 10%, #111);
}

.community-page .post-card h3,
.community-page .detail-title,
.community-page .post-comments-header h2,
.community-page .post-enhance-header h2,
.community-page .related-post-item h3,
.community-page .comment-head strong,
.community-page .preview-fallback {
    color: var(--custom-primary-text, #6b4f4f);
}

.community-page .post-meta,
.community-page .post-comment-count,
.community-page .comment-count,
.community-page .comment-head,
.community-page .detail-author,
.community-page .related-post-item p,
.community-page .post-enhance-status,
.community-page .post-enhance-tip,
.community-page .post-card p,
.community-page .detail-description,
.community-page .comment-content {
    color: var(--custom-secondary-text, #8b7355);
}

.community-page .media-link,
.community-page .detail-link,
.community-page .back-community,
.community-page .post-author-link,
.community-page .detail-author-link,
.community-page .comment-author-link,
.community-page .comment-login-tip,
.community-page .error-state {
    color: var(--custom-accent, #8b4513);
}

.community-page .media-link:hover,
.community-page .detail-link:hover,
.community-page .back-community:hover,
.community-page .post-author-link:hover,
.community-page .detail-author-link:hover,
.community-page .comment-author-link:hover,
.community-page .preview-open-link:hover {
    color: var(--custom-nav-hover, #a0522d);
}

.community-page .post-card.is-clickable:hover,
.community-page .related-post-item:hover {
    border-color: color-mix(in srgb, var(--custom-card-border, #dcc9ba) 70%, var(--custom-accent, #8b4513));
}

.community-page .post-card.is-clickable:focus-visible,
.community-page .post-author-link:focus-visible,
.community-page .detail-author-link:focus-visible,
.community-page .comment-author-link:focus-visible {
    outline-color: color-mix(in srgb, var(--custom-accent, #8b4513) 55%, transparent);
}

.community-page .post-like-btn.is-liked {
    border-color: color-mix(in srgb, var(--custom-accent, #8b4513) 35%, #c66a5b);
    color: color-mix(in srgb, var(--custom-accent, #8b4513) 75%, #8f2f2f);
    background: color-mix(in srgb, var(--custom-accent, #8b4513) 12%, #fde9e6);
}

[data-theme="dark"] .community-page .community-hero,
[data-theme="dark"] .community-page .panel,
[data-theme="dark"] .community-page .post-card,
[data-theme="dark"] .community-page .post-detail-media,
[data-theme="dark"] .community-page .post-cover-media,
[data-theme="dark"] .community-page .detail-cover-media,
[data-theme="dark"] .community-page .related-post-cover,
[data-theme="dark"] .community-page .comment-item,
[data-theme="dark"] .community-page .loading-state,
[data-theme="dark"] .community-page .empty-state,
[data-theme="dark"] .community-page .error-state,
[data-theme="dark"] .community-page .media-preview-panel,
[data-theme="dark"] .community-page .related-post-item {
    background: var(--custom-card-bg, #fffaf4);
    border-color: var(--custom-card-border, #dcc9ba);
    color: var(--custom-page-text, #4a3f35);
}

[data-theme="dark"] .community-page .upload-form input[type="text"],
[data-theme="dark"] .community-page .upload-form textarea,
[data-theme="dark"] .community-page .comment-form textarea,
[data-theme="dark"] .community-page .upload-form input[type="file"],
[data-theme="dark"] .community-page .file-input-cn,
[data-theme="dark"] .community-page .feed-sort-select {
    background: var(--custom-input-bg, #ffffff);
    border-color: var(--custom-input-border, #dcc9ba);
    color: var(--custom-input-text, #4a3f35);
}

[data-theme="dark"] .community-page .upload-form label,
[data-theme="dark"] .community-page .community-hero h1,
[data-theme="dark"] .community-page .post-card h3,
[data-theme="dark"] .community-page .post-comments-header h2,
[data-theme="dark"] .community-page .comment-head strong,
[data-theme="dark"] .community-page .post-enhance-header h2,
[data-theme="dark"] .community-page .related-post-item h3,
[data-theme="dark"] .community-page .media-preview-header h3 {
    color: var(--custom-primary-text, #6b4f4f);
}

[data-theme="dark"] .community-page .community-hero p,
[data-theme="dark"] .community-page .upload-form small,
[data-theme="dark"] .community-page .post-meta,
[data-theme="dark"] .community-page .comment-head,
[data-theme="dark"] .community-page .comment-count,
[data-theme="dark"] .community-page .post-enhance-status,
[data-theme="dark"] .community-page .post-enhance-tip,
[data-theme="dark"] .community-page .related-post-item p,
[data-theme="dark"] .community-page .post-engagement,
[data-theme="dark"] .community-page .preview-fallback,
[data-theme="dark"] .community-page .preview-tip,
[data-theme="dark"] .community-page .preview-open-link,
[data-theme="dark"] .community-page .media-link,
[data-theme="dark"] .community-page .post-section {
    color: var(--custom-secondary-text, #8b7355);
}

[data-theme="dark"] .community-page .btn-ghost,
[data-theme="dark"] .community-page .post-like-btn,
[data-theme="dark"] .community-page .comment-avatar {
    background: var(--custom-card-bg, #fffaf4);
    border-color: var(--custom-card-border, #dcc9ba);
    color: var(--custom-primary-text, #6b4f4f);
}