.forum-category-page {
     --featured-color: #000;
     --master-reset: 48 84 0;
     --reset: 0 12 84;
     --pk: 116 0 0;
     --hero: 6 122 187;
     --online-time: 110 70 0;
     --guild-war: 40 5 96;
     --guild-up: 12 96 5;
     --guild-kill: 116 0 0;
     --event: 60 60 60;
     /* padding-block: var(--spacing-12); */
     min-height: calc(100dvh - 184px);
 }

 .forum-category-page::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: -1;

     background-size: cover;
     background-position-y: 0;
     background-position-x: center;
     background-repeat: no-repeat;

     background-image: url(/assets/images/nebula.png);
     background-color: rgb(var(--featured-color));

     max-width: 2560px;
     margin-inline: auto;
     height: 198px;
     -webkit-mask-image: linear-gradient(to bottom,
             rgba(0, 0, 0, 1),
             rgba(0, 0, 0, 0.6),
             rgba(0, 0, 0, 1));
     mask-image: linear-gradient(to bottom,
             rgba(0, 0, 0, 1),
             rgba(0, 0, 0, 0.6),
             rgba(0, 0, 0, 0));
 }

 .forum-category-container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 var(--spacing-6);
 }

 /* Breadcrumbs */
 .forum-breadcrumbs {
     background: var(--clr-surface-02);
     border: 1px solid var(--clr-forSurface-02);
     border-radius: var(--radius-2);
     padding: var(--spacing-3) var(--spacing-4);
     margin-bottom: var(--spacing-4);
 }

 .breadcrumb-list {
     display: flex;
     align-items: center;
     gap: var(--spacing-2);
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .breadcrumb-item {
     color: var(--clr-onSurface-02);
     font-size: 0.875rem;
 }

 .breadcrumb-link {
     color: var(--clr-accent-brand);
     text-decoration: none;
 }

 .breadcrumb-link:hover {
     color: var(--clr-accent-brand--strong);
     text-decoration: underline;
 }

 .breadcrumb-separator {
     color: var(--clr-onSurface-02--subtle);
 }

 /* Category Header */
 .category-header {
     background: var(--clr-surface-02);
     border: 1px solid var(--clr-forSurface-02);
     border-radius: var(--radius-3);
     padding: var(--spacing-6);
     text-align: center;
 }

 .category-title {
     color: var(--clr-white);
     text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
     font-family: var(--font-serif);
     font-size: 2.5rem;
     font-style: normal;
     font-weight: 700;
     line-height: 2.5rem;
     text-transform: uppercase;
     margin-bottom: var(--spacing-2);

     filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 1px) drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 1px) drop-shadow(rgba(var(--featured-color), 0.6) 0px 0px 4px) drop-shadow(rgb(var(--featured-color), 0.4) 0px 0px 12px) brightness(1.6);
 }

 .category-description {
     color: var(--clr-onSurface-02);
     font-size: 1.1rem;
     line-height: 1.5;
 }

 /* Controls Section */
 .category-controls {
     background: var(--clr-surface-02);
     border: 1px solid var(--clr-forSurface-02);
     border-radius: var(--radius-3);
     padding: var(--spacing-4);
     margin-bottom: var(--spacing-4);
 }

 .controls-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: var(--spacing-4);
     flex-wrap: wrap;
 }

 .filter-group {
     display: flex;
     align-items: center;
     gap: var(--spacing-3);
     flex-wrap: wrap;
 }

 .filter-select {
     background: var(--clr-surface-03);
     border: 1px solid var(--clr-forSurface-03);
     color: var(--clr-onSurface-03);
     padding: var(--spacing-2) var(--spacing-3);
     border-radius: var(--radius-2);
     font-family: var(--font-sans);
     font-size: 0.875rem;
     font-weight: 600;
 }

 .filter-select:focus {
     outline: none;
     border-color: var(--clr-accent-brand);
 }

 .search-box {
     background: var(--clr-surface-03);
     border: 1px solid var(--clr-forSurface-03);
     color: var(--clr-onSurface-03);
     padding: var(--spacing-2) var(--spacing-3);
     border-radius: var(--radius-2);
     font-family: var(--font-sans);
     font-size: 0.875rem;
     min-width: 200px;
 }

 .search-box:focus {
     outline: none;
     border-color: var(--clr-accent-brand);
 }

 .new-topic-btn {
     background: var(--clr-accent-brand);
     border: 1px solid var(--clr-forAccent-brand);
     color: var(--clr-onAccent-brand);
     padding: var(--spacing-2) var(--spacing-4);
     border-radius: var(--radius-2);
     font-family: var(--font-sans);
     font-size: 0.875rem;
     font-weight: 600;
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: var(--spacing-2);
     transition: all 0.3s ease;
 }

 .new-topic-btn:hover {
     background: var(--clr-accent-brand--strong);
     border-color: var(--clr-forAccent-brand--strong);
     color: var(--clr-onAccent-brand--strong);
     text-decoration: none;
     transform: translateY(-1px);
 }

 /* Topics List */
 .topics-section {
     background: var(--clr-surface-02);
     border: 1px solid var(--clr-forSurface-02);
     border-radius: var(--radius-3);
     overflow: hidden;
 }

 .topics-header {
     background: var(--clr-surface-03);
     padding: var(--spacing-4);
     border-bottom: 1px solid var(--clr-forSurface-03);
     display: grid;
     grid-template-columns: 1fr auto auto auto;
     gap: var(--spacing-4);
     align-items: center;
     font-weight: 600;
     color: var(--clr-onSurface-03--strong);
     font-size: 0.875rem;
     text-transform: uppercase;
 }

 .topic-item {
     display: grid;
     grid-template-columns: 1fr auto auto auto;
     gap: var(--spacing-4);
     align-items: center;
     padding: var(--spacing-4);
     border-bottom: 1px solid rgba(var(--clr-forSurface-02-rgb), 0.5);
     transition: background 0.3s ease;
 }

 .topic-item:hover {
     background: rgba(var(--clr-accent-brand-rgb), 0.1);
 }

 .topic-item:last-child {
     border-bottom: none;
 }

 .topic-info {
     min-width: 0;
     display: flex;
     align-items: center;
     gap: var(--spacing-3);
 }

 .topic-status {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.75rem;
     flex-shrink: 0;
 }

 .topic-status.pinned {
     background: var(--clr-accent-brand);
     color: var(--clr-onAccent-brand);
 }

 .topic-status.locked {
     background: #dc3545;
     color: white;
 }

 .topic-status.solved {
     background: #28a745;
     color: white;
 }

 .topic-status.normal {
     background: var(--clr-surface-03);
     color: var(--clr-onSurface-03);
 }

 .topic-details {
     min-width: 0;
 }

 .topic-title {
     color: var(--clr-onSurface-02--strong);
     font-size: 1rem;
     font-weight: 600;
     margin-bottom: var(--spacing-1);
     text-decoration: none;
     display: block;
 }

 .topic-title:hover {
     color: var(--clr-accent-brand);
     text-decoration: none;
 }

 .topic-meta {
     color: var(--clr-onSurface-02--subtle);
     font-size: 0.875rem;
 }


 .topic-stats {
     text-align: center;
     color: var(--clr-onSurface-02);
     font-size: 0.875rem;
     min-width: 80px;
 }

 .topic-stat-value {
     font-weight: 700;
     color: var(--clr-accent-brand);
     display: block;
 }

 .topic-stat-label {
     color: var(--clr-onSurface-02--subtle);
     font-size: 0.75rem;
 }

 .topic-activity {
     text-align: right;
     color: var(--clr-onSurface-02--subtle);
     font-size: 0.875rem;
     min-width: 120px;
 }

 .topic-last-post {
     color: var(--clr-onSurface-02);
     font-weight: 600;
     margin-bottom: var(--spacing-1);
 }

 /* Sidebar */
 .sidebar {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-4);
     position: sticky;
     top: var(--spacing-6);
     align-self: start;
 }

 .sidebar-section {
     background: var(--clr-surface-02);
     border: 1px solid var(--clr-forSurface-02);
     border-radius: var(--radius-3);
     overflow: hidden;
 }

 .sidebar-header {
     background: var(--clr-surface-03);
     padding: var(--spacing-3) var(--spacing-4);
     border-bottom: 1px solid var(--clr-forSurface-03);
 }

 .sidebar-title {
     color: var(--clr-onSurface-03--strong);
     font-size: 1rem;
     font-weight: 700;
     margin: 0;
 }

 .sidebar-content {
     padding: var(--spacing-4);
 }

 .stat-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--spacing-3);
 }

 .stat-item {
     text-align: center;
 }

 .stat-value {
     color: var(--clr-accent-brand);
     font-size: 1.5rem;
     font-weight: 700;
     display: block;
 }

 .stat-label {
     color: var(--clr-onSurface-02--subtle);
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.05rem;
 }

 .moderator-list {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-3);
 }

 .moderator-item {
     display: flex;
     align-items: center;
     gap: var(--spacing-3);
 }

 .moderator-avatar {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: var(--clr-accent-brand);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--clr-onAccent-brand);
     font-weight: 700;
     font-size: 0.875rem;
 }

 .moderator-info {
     flex: 1;
 }

 .moderator-name {
     color: var(--clr-onSurface-02--strong);
     font-weight: 600;
     font-size: 0.875rem;
 }

 .moderator-status {
     color: var(--clr-onSurface-02--subtle);
     font-size: 0.75rem;
 }

 .moderator-status.online {
     color: #28a745;
 }

 /* Pagination */
 .pagination-wrapper {
     padding: var(--spacing-4);
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .custom-pagination {
     display: flex;
     align-items: center;
     gap: var(--spacing-2);
     flex-wrap: wrap;
     justify-content: center;
 }

 .pagination-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: var(--spacing-2) var(--spacing-3);
     min-width: 44px;
     height: 44px;

     background: var(--clr-surface-02);
     border: 1px solid var(--clr-forSurface-02);
     border-radius: var(--radius-2);
     color: var(--clr-onSurface-02);
     text-decoration: none;

     font-family: var(--font-sans);
     font-size: 0.875rem;
     font-weight: 600;
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .pagination-btn:hover {
     background: var(--clr-surface-03);
     border-color: var(--clr-forSurface-03);
     color: var(--clr-onSurface-03--strong);
     text-decoration: none;
     transform: translateY(-1px);
 }

 .pagination-btn.active {
     background: var(--clr-accent-brand) !important;
     border-color: var(--clr-forAccent-brand) !important;
     color: var(--clr-onAccent-brand) !important;
     font-weight: 700 !important;
 }

 .pagination-btn.disabled {
     background: var(--clr-surface-01) !important;
     border-color: var(--clr-forSurface-01) !important;
     color: var(--clr-onSurface-01--subtle) !important;
     cursor: not-allowed !important;
     opacity: 0.5 !important;
 }

 .pagination-dots {
     color: var(--clr-onSurface-02--subtle);
     padding: var(--spacing-2);
 }

 /* Responsive Design */
 @media (max-width: 991.98px) {
     .sidebar {
         position: static;
         margin-top: var(--spacing-6);
     }

     .category-controls .controls-row {
         flex-direction: column;
         align-items: stretch;
     }

     .topics-header {
         grid-template-columns: 1fr auto;
     }

     .topic-item {
         grid-template-columns: 1fr auto;
     }

     .topic-stats:nth-child(3),
     .topic-activity:nth-child(4) {
         display: none;
     }
 }

 @media (max-width: 767.98px) {
     .category-title {
         font-size: 2rem;
         line-height: 2rem;
     }

     .filter-group {
         flex-direction: column;
         align-items: stretch;
     }

     .search-box {
         min-width: auto;
     }

     .topic-info {
         flex-direction: column;
         align-items: flex-start;
         gap: var(--spacing-2);
     }
 }

 /* ==============================================
           TOPIC PAGE STYLES
           ============================================== */

 /* Breadcrumbs */
 .forum-breadcrumbs {
     margin-bottom: var(--spacing-6);
 }

 .breadcrumb-list {
     display: flex;
     align-items: center;
     gap: var(--spacing-2);
     margin: 0;
     padding: 0;
     list-style: none;
     background: var(--clr-surface-02);
     padding: var(--spacing-3) var(--spacing-4);
     border-radius: var(--radius-2);
     border: 1px solid var(--clr-forSurface-02);
 }

 .breadcrumb-item {
     display: flex;
     align-items: center;
     gap: var(--spacing-2);
     color: var(--clr-onSurface-02--subtle);
     font-size: 0.875rem;
 }

 .breadcrumb-link {
     color: var(--clr-accent-brand);
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .breadcrumb-link:hover {
     color: var(--clr-accent-brand);
     opacity: 0.8;
 }

 .breadcrumb-separator {
     color: var(--clr-onSurface-02--subtle);
     margin: 0 var(--spacing-1);
 }

 /* Topic Header */
 .topic-header {
     background: var(--clr-surface-02);
     border: 1px solid var(--clr-forSurface-02);
     border-radius: var(--radius-3);
     padding: var(--spacing-6);
     margin-bottom: var(--spacing-6);
 }

 .topic-status-indicators {
     display: flex;
     gap: var(--spacing-2);
     margin-bottom: var(--spacing-4);
 }

 .topic-badge {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-1);
     padding: var(--spacing-1) var(--spacing-3);
     border-radius: var(--radius-full);
     font-size: 0.75rem;
     font-weight: 600;
 }

 .topic-badge.pinned {
     background: rgba(255, 193, 7, 0.2);
     color: #ffc107;
     border: 1px solid rgba(255, 193, 7, 0.3);
 }

 .topic-badge.locked {
     background: rgba(220, 53, 69, 0.2);
     color: #dc3545;
     border: 1px solid rgba(220, 53, 69, 0.3);
 }

 .topic-badge.solved {
     background: rgba(40, 167, 69, 0.2);
     color: #28a745;
     border: 1px solid rgba(40, 167, 69, 0.3);
 }

 .topic-title {
     font-size: 2rem;
     font-weight: 700;
     color: var(--clr-onSurface-02--strong);
     margin-bottom: var(--spacing-4);
     line-height: 1.3;
 }

 .topic-tags {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-2);
     margin-bottom: var(--spacing-5);
 }

 .topic-tag {
     padding: var(--spacing-1) var(--spacing-3);
     border-radius: var(--radius-full);
     font-size: 0.75rem;
     font-weight: 500;
     border: 1px solid;
 }

 .topic-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: var(--spacing-4);
 }

 .topic-author-info {
     display: flex;
     align-items: center;
     gap: var(--spacing-3);
 }


 .topic-date {
     color: var(--clr-onSurface-02--subtle);
     font-size: 0.875rem;
 }

 .topic-actions {
     display: flex;
     gap: var(--spacing-2);
     flex-wrap: wrap;
 }

 .topic-action-btn {
     background: var(--clr-surface-03);
     border: 1px solid var(--clr-forSurface-03);
     border-radius: var(--radius-2);
     padding: var(--spacing-2) var(--spacing-3);
     color: var(--clr-onSurface-03);
     font-size: 0.75rem;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .topic-action-btn:hover {
     background: var(--clr-surface-04);
     transform: translateY(-1px);
 }

 .topic-action-btn.active {
     background: var(--clr-accent-brand);
     color: var(--clr-onAccent-brand);
     border-color: var(--clr-accent-brand);
 }

 .topic-action-btn.favorite.active {
     background: #ffc107;
     color: #000;
     border-color: #ffc107;
 }

 .topic-action-btn.subscribe.active {
     background: #28a745;
     color: white;
     border-color: #28a745;
 }

 /* Posts Section */
 .posts-section {
     margin-bottom: var(--spacing-6);
 }

 .post-item {
     background: var(--clr-surface-02);
     border: 1px solid var(--clr-forSurface-02);
     border-radius: var(--radius-3);
     margin-bottom: var(--spacing-5);
     overflow: hidden;
     transition: all 0.3s ease;
 }

 .post-item:hover {
     border-color: var(--clr-forSurface-03);
     box-shadow: var(--shadow-3);
 }

 .post-item.highlighted {
     border-color: var(--clr-accent-brand);
     box-shadow: 0 0 20px rgba(var(--clr-accent-brand-rgb), 0.3);
 }

 /* New Post Layout: Side by Side */
 .post-layout {
     display: flex;
     min-height: 200px;
 }

 /* Left Column: Author Info */
 .post-author-column {
     width: 200px;
     flex-shrink: 0;
     background: var(--clr-surface-03);
     border-right: 1px solid var(--clr-forSurface-03);
     padding: var(--spacing-4);
 }

 .post-author-card {
     text-align: center;
 }

 .post-author-avatar {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: var(--clr-accent-brand);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     color: var(--clr-onAccent-brand);
     font-size: 2rem;
     margin: 0 auto var(--spacing-3);
 }

 .post-author-name {
     font-weight: 600;
     color: var(--clr-onSurface-03--strong);
     font-size: 1rem;
     margin-bottom: var(--spacing-1);
 }

 .post-author-role {
     color: var(--clr-onSurface-03--subtle);
     font-size: 0.75rem;
     margin-bottom: var(--spacing-4);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     font-weight: 500;
 }

 .post-author-stats {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-2);
     font-size: 0.75rem;
 }

 .author-stat {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--spacing-1) 0;
     border-bottom: 1px solid rgba(var(--clr-forSurface-03-rgb), 0.3);
 }

 .author-stat:last-child {
     border-bottom: none;
 }

 .stat-label {
     color: var(--clr-onSurface-03--subtle);
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     font-size: 0.65rem;
 }

 .stat-value {
     color: var(--clr-onSurface-03--strong);
     font-weight: 600;
     font-size: 0.75rem;
 }

 /* Right Column: Post Content */
 .post-content-column {
     flex: 1;
     display: flex;
     flex-direction: column;
 }

 .post-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--spacing-4) var(--spacing-5);
     border-bottom: 1px solid var(--clr-forSurface-02);
     background: rgba(var(--clr-surface-03-rgb), 0.3);
 }

 .post-meta-left {
     display: flex;
     align-items: center;
     gap: var(--spacing-3);
 }

 .post-number {
     background: var(--clr-surface-04);
     padding: var(--spacing-1) var(--spacing-2);
     border-radius: var(--radius-1);
     font-size: 0.75rem;
     font-weight: 600;
     color: var(--clr-onSurface-04--subtle);
 }

 .post-date {
     color: var(--clr-onSurface-02--subtle);
     font-size: 0.875rem;
 }

 .post-actions {
     display: flex;
     gap: var(--spacing-2);
 }

 .post-action-btn {
     background: transparent;
     border: 1px solid var(--clr-forSurface-03);
     color: var(--clr-onSurface-02--subtle);
     font-size: 0.75rem;
     cursor: pointer;
     padding: var(--spacing-1) var(--spacing-2);
     border-radius: var(--radius-1);
     transition: all 0.3s ease;
 }

 .post-action-btn:hover {
     background: var(--clr-surface-03);
     color: var(--clr-onSurface-03);
     border-color: var(--clr-forSurface-03);
 }

 .post-action-btn.like:hover {
     background: rgba(40, 167, 69, 0.1);
     color: #28a745;
     border-color: #28a745;
 }

 .post-action-btn.reply:hover {
     background: rgba(0, 123, 255, 0.1);
     color: #007bff;
     border-color: #007bff;
 }

 .post-action-btn.report:hover {
     background: rgba(220, 53, 69, 0.1);
     color: #dc3545;
     border-color: #dc3545;
 }

 .post-action-btn.active {
     font-weight: 600;
 }

 .post-action-btn.like.active {
     background: rgba(40, 167, 69, 0.2);
     color: #28a745;
     border-color: #28a745;
 }

 .post-action-btn.report:disabled {
     background: rgba(40, 167, 69, 0.1);
     color: #28a745;
     border-color: #28a745;
     cursor: not-allowed;
     opacity: 0.7;
 }

 .post-content {
     padding: var(--spacing-5);
     color: var(--clr-onSurface-02);
     line-height: 1.6;
     font-size: 0.9375rem;
     flex: 1;
 }

/* Ensure emoji glyphs render by providing emoji-capable font fallbacks */
.post-content, .article-body {
    font-family: var(--body-font), 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'EmojiOne Color', sans-serif;
}

 .post-reactions {
     padding: 0 var(--spacing-5) var(--spacing-4);
     display: flex;
     gap: var(--spacing-2);
     flex-wrap: wrap;
 }

 /* Post Footer for Bottom Actions */
 .post-footer {
     border-top: 1px solid var(--clr-forSurface-02);
     padding: var(--spacing-3) var(--spacing-5);
     background: rgba(var(--clr-surface-03-rgb), 0.3);
 }

 .post-footer .post-actions {
     display: flex;
     gap: var(--spacing-2);
     justify-content: flex-start;
 }

 .reaction-group {
     background: var(--clr-surface-03);
     border: 1px solid var(--clr-forSurface-03);
     border-radius: var(--radius-full);
     padding: var(--spacing-1) var(--spacing-3);
     display: flex;
     align-items: center;
     gap: var(--spacing-1);
     font-size: 0.75rem;
 }

 .reaction-emoji {
     font-size: 0.875rem;
 }

 .reaction-count {
     color: var(--clr-onSurface-03--subtle);
     font-weight: 500;
 }

 /* Reply Section */
 .reply-section {
     background: var(--clr-surface-02);
     border: 1px solid var(--clr-forSurface-02);
     border-radius: var(--radius-3);
     padding: var(--spacing-6);
     margin-bottom: var(--spacing-6);
 }

 .reply-title {
     font-size: 1.25rem;
     font-weight: 600;
     color: var(--clr-onSurface-02--strong);
     margin-bottom: var(--spacing-5);
 }

 .reply-form {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-4);
 }

 .form-group {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-2);
 }

 .form-label {
     font-weight: 500;
     color: var(--clr-onSurface-02--strong);
     font-size: 0.875rem;
 }

 .form-textarea {
     background: var(--clr-surface-03);
     border: 1px solid var(--clr-forSurface-03);
     border-radius: var(--radius-2);
     padding: var(--spacing-3) var(--spacing-4);
     color: var(--clr-onSurface-03);
     font-size: 0.9375rem;
     line-height: 1.5;
     resize: vertical;
     min-height: 120px;
     transition: all 0.3s ease;
 }

 .form-textarea:focus {
     outline: none;
     border-color: var(--clr-accent-brand);
     box-shadow: 0 0 0 3px rgba(var(--clr-accent-brand-rgb), 0.1);
 }

 .form-textarea::placeholder {
     color: var(--clr-onSurface-03--subtle);
 }

 .form-actions {
     display: flex;
     gap: var(--spacing-3);
     flex-wrap: wrap;
 }

 .btn {
     padding: var(--spacing-3) var(--spacing-5);
     border: none;
     border-radius: var(--radius-2);
     text-decoration: none;
     font-weight: 500;
     font-size: 0.875rem;
     transition: all 0.3s ease;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-2);
 }

 .btn-primary {
     background: var(--clr-accent-brand);
     color: var(--clr-onAccent-brand);
 }

 .btn-primary:hover {
     background: var(--clr-accent-brand);
     opacity: 0.9;
     transform: translateY(-2px);
     box-shadow: var(--shadow-3);
 }

 .btn-secondary {
     background: var(--clr-surface-03);
     color: var(--clr-onSurface-03);
     border: 1px solid var(--clr-forSurface-03);
 }

 .btn-secondary:hover {
     background: var(--clr-surface-04);
     transform: translateY(-1px);
 }

 .login-prompt {
     text-align: center;
     padding: var(--spacing-8) var(--spacing-5);
 }

 .login-prompt h3 {
     font-size: 1.25rem;
     color: var(--clr-onSurface-02--strong);
     margin-bottom: var(--spacing-3);
 }

 .login-prompt p {
     color: var(--clr-onSurface-02--subtle);
     margin-bottom: var(--spacing-6);
 }

 /* Participants List */
 .participants-list {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-3);
 }

 .participant-item {
     display: flex;
     align-items: center;
     gap: var(--spacing-3);
     padding: var(--spacing-2) 0;
 }

 .participant-avatar {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: var(--clr-accent-brand);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
     color: var(--clr-onAccent-brand);
     font-size: 0.75rem;
     flex-shrink: 0;
 }

 .participant-name {
     font-weight: 500;
     color: var(--clr-onSurface-02--strong);
     font-size: 0.875rem;
 }

 .participant-posts {
     color: var(--clr-onSurface-02--subtle);
     font-size: 0.75rem;
 }

 /* Related Topics */
 .related-topics-list {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-3);
 }

 .related-topic-item {
     padding: var(--spacing-2) 0;
     border-bottom: 1px solid var(--clr-forSurface-02);
 }

 .related-topic-item:last-child {
     border-bottom: none;
 }

 .related-topic-title {
     color: var(--clr-onSurface-02--strong);
     text-decoration: none;
     font-size: 0.875rem;
     line-height: 1.4;
     transition: color 0.3s ease;
 }

 .related-topic-title:hover {
     color: var(--clr-accent-brand);
 }

 /* Topic Page Responsive Design */
 @media (max-width: 991.98px) {
     .topic-header {
         padding: var(--spacing-4);
     }

     .topic-title {
         font-size: 1.75rem;
     }

     .topic-meta {
         flex-direction: column;
         align-items: flex-start;
         gap: var(--spacing-3);
     }

     /* Stack post layout on medium screens */
     .post-layout {
         flex-direction: column;
         min-height: auto;
     }

     .post-author-column {
         width: 100%;
         border-right: none;
         border-bottom: 1px solid var(--clr-forSurface-03);
     }

     .post-author-card {
         display: flex;
         align-items: center;
         gap: var(--spacing-3);
         text-align: left;
     }

     .post-author-avatar {
         width: 60px;
         height: 60px;
         font-size: 1.5rem;
         margin: 0;
     }

     .post-author-stats {
         flex-direction: row;
         flex-wrap: wrap;
         gap: var(--spacing-3);
     }

     .author-stat {
         border-bottom: none;
         padding: 0;
         min-width: 120px;
     }

     .form-actions {
         flex-direction: column;
     }

     .form-actions .btn {
         justify-content: center;
     }
 }

 @media (max-width: 767.98px) {
     .post-header {
         flex-direction: column;
         gap: var(--spacing-3);
         align-items: flex-start;
     }

     .post-meta-left {
         flex-direction: column;
         align-items: flex-start;
         gap: var(--spacing-2);
     }

     .post-content {
         padding: var(--spacing-4);
     }

     .post-reactions {
         padding: 0 var(--spacing-4) var(--spacing-4);
     }

     .reply-section {
         padding: var(--spacing-4);
     }

     .topic-header {
         padding: var(--spacing-4);
     }

     .breadcrumb-list {
         padding: var(--spacing-2) var(--spacing-3);
         font-size: 0.8125rem;
     }

     .post-author-card {
         flex-direction: column;
         text-align: center;
         gap: var(--spacing-2);
     }

     .post-author-avatar {
         width: 50px;
         height: 50px;
         font-size: 1.25rem;
     }

     .post-author-stats {
         flex-direction: column;
         gap: var(--spacing-2);
     }

     .author-stat {
         min-width: auto;
         border-bottom: 1px solid rgba(var(--clr-forSurface-03-rgb), 0.5);
         padding: var(--spacing-1) 0;
     }

     .author-stat:last-child {
         border-bottom: none;
     }
 }



 /* Labels */
 .form-label {
     color: var(--clr-onSurface-02--strong);
     font-weight: 600;
 }

 /* Inputs/selects/textarea: better contrast and comfortable height */
 .form-textarea,
 input[type="text"],
 select {
     background: var(--clr-surface-03);
     border: 1px solid var(--clr-forSurface-02);
     color: var(--clr-onSurface-02);
     padding: var(--spacing-3) var(--spacing-4);
     min-height: 44px;
     font-size: 0.95rem;
 }

 .form-textarea:focus,
 input[type="text"]:focus,
 select:focus {
     outline: none;
     border-color: var(--clr-accent-brand);
     box-shadow: 0 0 0 3px rgba(var(--clr-accent-brand-rgb), 0.12);
 }

 .form-textarea::placeholder,
 input[type="text"]::placeholder {
     color: var(--clr-onSurface-02--subtle);
     opacity: 0.95;
 }

 select {
     height: 44px;
 }

 /* Summernote dark theme to match site */
 .note-editor.note-frame {
     background: var(--clr-surface-02);
     border: 1px solid var(--clr-forSurface-02);
 }

 .note-toolbar {
     background: var(--clr-surface-03);
     border-bottom: 1px solid var(--clr-forSurface-03);
 }

 .note-toolbar .note-btn {
     background: var(--clr-surface-03);
     color: var(--clr-onSurface-03);
     border-color: var(--clr-forSurface-03);
 }

 .note-toolbar .note-btn:hover {
     background: var(--clr-surface-04);
     color: var(--clr-onSurface-03--strong);
 }

 .note-editing-area .note-editable {
     background: var(--clr-surface-02);
     color: var(--clr-onSurface-02);
     min-height: 280px;
 }

 .dropdown-menu {
     background: var(--clr-surface-03);
     color: var(--clr-onSurface-03);
     border: 1px solid var(--clr-forSurface-03);
 }

 .dropdown-item {
     color: var(--clr-onSurface-03);
 }

 .dropdown-item:hover {
     background: var(--clr-surface-04);
     color: var(--clr-onSurface-03--strong);
 }

 /* Buttons spacing */
 .form-actions .btn {
     min-height: 42px;
 }

 .topic-details .topic-title {
     color: var(--clr-onSurface-02--strong);
     font-size: 1rem;
     font-weight: 600;
     margin-bottom: var(--spacing-1);
     text-decoration: none;
     display: block;
 }

 .topic-meta {
    color: var(--clr-onSurface-02--subtle);
    font-size: 0.875rem;
}