/* ============================================================
   ForumHub — Layout & Page-level Styles
   File: assets/css/layout.css
   ============================================================ */

/* ── Site wrapper ────────────────────────────────────────── */
.main-content { flex: 1; }

/* ── Container ───────────────────────────────────────────── */
.container {
    max-width:  var(--max-width);
    margin:     0 auto;
    padding:    var(--space-8) var(--space-5);
}
.container--narrow { max-width: 760px; }
.container--xs     { max-width: 480px; }

/* ── Navbar ──────────────────────────────────────────────── */
.navbar {
    position:      sticky;
    top:           0;
    z-index:       200;
    height:        var(--nav-height);
    background:    var(--surface-card);
    border-bottom: 1px solid var(--border-color);
    box-shadow:    var(--shadow-sm);
}
.navbar__inner {
    max-width:   var(--max-width);
    margin:      0 auto;
    height:      100%;
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
    padding:     0 var(--space-5);
}
.navbar__brand {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-family: var(--font-head);
    font-size:   1.2rem;
    font-weight: 800;
    color:       var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}
.navbar__brand:hover { opacity: 1; }
.navbar__brand-icon  { color: var(--color-primary); font-size: 1.35rem; }
.navbar__brand-name  {}

.navbar__search {
    flex:      1;
    max-width: 380px;
    position:  relative;
}
.navbar__search-input {
    width:         100%;
    padding:       9px 16px;
    border:        1.5px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    background:    var(--surface-bg);
    color:         var(--text-primary);
    font-size:     14px;
    transition:    border-color var(--transition-fast);
}
.navbar__search-input:focus { outline: none; border-color: var(--color-primary); }

.navbar__actions {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    margin-left: auto;
}

/* ── User menu ───────────────────────────────────────────── */
.user-menu         { position: relative; }
.user-menu__trigger {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    background:  var(--surface-muted);
    border:      none;
    border-radius: var(--border-radius-pill);
    padding:     5px 12px 5px 5px;
    cursor:      pointer;
    transition:  background var(--transition-fast);
}
.user-menu__trigger:hover { background: var(--border-color); }
.user-menu__name  { font-size: 13px; font-weight: 500; }
.user-menu__chevron { flex-shrink: 0; transition: transform var(--transition-fast); }
.user-menu__trigger[aria-expanded="true"] .user-menu__chevron { transform: rotate(180deg); }

.user-menu__dropdown {
    display:       none;
    position:      absolute;
    right:         0;
    top:           calc(100% + 8px);
    background:    var(--surface-card);
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow:    var(--shadow-lg);
    min-width:     190px;
    overflow:      hidden;
    z-index:       300;
}
.user-menu__dropdown.is-open { display: block; }
.user-menu__item {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    padding:     10px 16px;
    color:       var(--text-primary);
    font-size:   14px;
    transition:  background var(--transition-fast);
}
.user-menu__item:hover { background: var(--surface-muted); opacity: 1; }
.user-menu__item--danger { color: var(--color-danger); }
.user-menu__item svg    { width: 15px; height: 15px; flex-shrink: 0; }
.user-menu__divider     { height: 1px; background: var(--border-color); margin: 4px 0; }

/* ── Hamburger ───────────────────────────────────────────── */
.hamburger {
    display:    none;
    background: none;
    border:     none;
    padding:    var(--space-1);
    color:      var(--text-primary);
}
.hamburger svg { width: 22px; height: 22px; }

/* ── Mobile menu ─────────────────────────────────────────── */
.mobile-menu {
    display:       none;
    flex-direction: column;
    background:    var(--surface-card);
    border-bottom: 1px solid var(--border-color);
    padding:       var(--space-2) 0;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__item {
    padding:    12px var(--space-5);
    color:      var(--text-primary);
    font-size:  15px;
    font-weight:500;
    transition: background var(--transition-fast);
}
.mobile-menu__item:hover { background: var(--surface-muted); opacity: 1; }
.mobile-menu__item--danger { color: var(--color-danger); }

/* ── Search dropdown ─────────────────────────────────────── */
.search-dropdown {
    display:       none;
    position:      absolute;
    top:           calc(100% + 6px);
    left:          0;
    right:         0;
    background:    var(--surface-card);
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow:    var(--shadow-lg);
    z-index:       300;
    overflow:      hidden;
}
.search-dropdown.is-open { display: block; }
.search-result {
    display:  flex;
    flex-direction: column;
    padding:  10px 14px;
    cursor:   pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--border-color);
}
.search-result:last-child  { border-bottom: none; }
.search-result:hover        { background: var(--surface-muted); }
.search-result__title       { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.search-result__category    { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ── Hero ────────────────────────────────────────────────── */
.forum-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color:      #fff;
    padding:    var(--space-12) var(--space-5);
    text-align: center;
}
.forum-hero__title { font-family: var(--font-head); font-size: clamp(1.8rem,4vw,3rem); font-weight: 800; margin-bottom: var(--space-2); }
.forum-hero__desc  { font-size: 1.05rem; opacity: .9; margin-bottom: var(--space-6); }
.forum-hero__stats { display: flex; justify-content: center; gap: var(--space-10); flex-wrap: wrap; }
.hero-stat__num    { display: block; font-family: var(--font-head); font-size: 1.9rem; font-weight: 800; }
.hero-stat__lbl    { font-size: 13px; opacity: .85; }

/* ── Page header ─────────────────────────────────────────── */
.page-header { margin-bottom: var(--space-6); }
.page-header h1 { margin-bottom: var(--space-1); }
.page-header p  { color: var(--text-secondary); font-size: 14px; }
.page-header--row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-4);
    flex-wrap:       wrap;
}

/* ── Two-column grid ─────────────────────────────────────── */
.page-grid {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap:    var(--space-7, 28px);
    align-items: start;
}

/* ── Category cards ──────────────────────────────────────── */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px,1fr));
    gap:    var(--space-4);
}
.category-card {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-4);
    padding:     var(--space-5);
    background:  var(--surface-card);
    border:      1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    color:       inherit;
    transition:  all var(--transition-base);
    cursor:      pointer;
}
.category-card:hover {
    border-color: var(--color-primary);
    box-shadow:   0 4px 20px rgba(var(--color-primary-rgb),.12);
    transform:    translateY(-2px);
    opacity:      1;
}
.category-card__icon {
    width:           48px;
    height:          48px;
    border-radius:   var(--border-radius-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.category-card__icon svg { width: 22px; height: 22px; color: #fff; }
.category-card__body h3  { font-weight: 700; font-size: .95rem; margin-bottom: var(--space-1); }
.category-card__body p   { font-size: 13px; color: var(--text-secondary); line-height: 1.45; margin-bottom: var(--space-2); }
.category-card__stats    { display: flex; gap: var(--space-4); }
.category-card__stat     { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 3px; }
.category-card__stat svg { width: 12px; height: 12px; }

/* ── Topic list ──────────────────────────────────────────── */
.topic-list {
    background:    var(--surface-card);
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow:      hidden;
}
.topic-item {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    padding:       var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-color);
    transition:    background var(--transition-fast);
}
.topic-item:last-child  { border-bottom: none; }
.topic-item:hover       { background: var(--surface-muted); }
.topic-item__body       { flex: 1; min-width: 0; }
.topic-item__title {
    display:       block;
    font-weight:   600;
    font-size:     14.5px;
    color:         var(--text-primary);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    margin-bottom: var(--space-1);
}
.topic-item__title:hover { color: var(--color-primary); opacity: 1; }
.topic-item__meta {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    flex-wrap:   wrap;
    font-size:   12px;
    color:       var(--text-muted);
}
.topic-item__meta span  { display: flex; align-items: center; gap: 3px; }
.topic-item__meta svg   { width: 11px; height: 11px; }
.topic-item__stats      { display: flex; gap: var(--space-5); flex-shrink: 0; }
.topic-stat             { text-align: center; }
.topic-stat__num        { display: block; font-weight: 700; font-size: 14px; color: var(--text-primary); }
.topic-stat__lbl        { font-size: 11px; color: var(--text-muted); }

/* ── Post cards ──────────────────────────────────────────── */
.post-card {
    background:    var(--surface-card);
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow:      hidden;
    margin-bottom: var(--space-4);
}
.post-card__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px var(--space-5);
    background:      var(--surface-muted);
    border-bottom:   1px solid var(--border-color);
    flex-wrap:       wrap;
    gap:             var(--space-2);
}
.post-card__author       { display: flex; align-items: center; gap: var(--space-2); }
.post-card__author-name  { font-weight: 600; font-size: 14px; }
.post-card__time         { font-size: 12px; color: var(--text-muted); }
.post-card__body         { padding: var(--space-5) var(--space-5); }
.post-card__footer {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    padding:     10px var(--space-5);
    border-top:  1px solid var(--border-color);
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar             { display: flex; flex-direction: column; gap: var(--space-5); }
.sidebar-card {
    background:    var(--surface-card);
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow:      hidden;
}
.sidebar-card__header {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    padding:     12px var(--space-4);
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-head);
    font-weight: 700;
    font-size:   .88rem;
}
.sidebar-card__header svg { width: 15px; height: 15px; color: var(--color-primary); }
.sidebar-list li {
    padding:       10px var(--space-4);
    border-bottom: 1px solid var(--border-color);
    display:       flex;
    align-items:   center;
    gap:           var(--space-2);
    font-size:     13px;
}
.sidebar-list li:last-child { border-bottom: none; }
.stat-grid {
    display:    grid;
    grid-template-columns: 1fr 1fr;
    gap:        1px;
    background: var(--border-color);
}
.stat-box {
    background: var(--surface-card);
    padding:    var(--space-4);
    text-align: center;
}
.stat-box__num { display: block; font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--color-primary); }
.stat-box__lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ── Auth forms ──────────────────────────────────────────── */
.auth-card {
    background:    var(--surface-card);
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding:       var(--space-10) var(--space-8);
    max-width:     440px;
    margin:        var(--space-10) auto;
    box-shadow:    var(--shadow-md);
}
.auth-card__brand {
    text-align:    center;
    margin-bottom: var(--space-7, 28px);
}
.auth-card__brand-icon  { font-size: 2rem; color: var(--color-primary); display: block; }
.auth-card__brand h2    { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; margin-top: var(--space-2); }
.auth-card__brand p     { color: var(--text-secondary); font-size: 14px; margin-top: var(--space-1); }
.auth-card__footer      { text-align: center; font-size: 14px; color: var(--text-secondary); margin-top: var(--space-5); }

/* ── Admin layout ────────────────────────────────────────── */
.admin-layout {
    display:    flex;
    min-height: calc(100vh - var(--nav-height));
}
.admin-sidebar {
    width:       250px;
    flex-shrink: 0;
    background:  var(--surface-card);
    border-right: 1px solid var(--border-color);
    padding:     var(--space-4) 0;
    position:    sticky;
    top:         var(--nav-height);
    height:      calc(100vh - var(--nav-height));
    overflow-y:  auto;
}
.admin-sidebar__section {
    padding:        6px var(--space-4);
    font-size:      10px;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          var(--text-muted);
    margin-top:     var(--space-4);
}
.admin-sidebar__link {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    padding:     10px var(--space-5);
    color:       var(--text-secondary);
    font-size:   14px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition:  all var(--transition-fast);
}
.admin-sidebar__link svg { width: 16px; height: 16px; flex-shrink: 0; }
.admin-sidebar__link:hover,
.admin-sidebar__link.is-active {
    background:         rgba(var(--color-primary-rgb),.06);
    color:              var(--color-primary);
    border-left-color:  var(--color-primary);
    opacity:            1;
}
.admin-content {
    flex:       1;
    padding:    var(--space-8);
    overflow:   auto;
    min-width:  0;
}
.admin-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--space-4);
    margin-bottom:   var(--space-7, 28px);
    padding-bottom:  var(--space-5);
    border-bottom:   1px solid var(--border-color);
}
.admin-header h1 { font-size: 1.6rem; }
.admin-header p  { color: var(--text-secondary); font-size: 14px; margin-top: 2px; }

/* ── Stats cards (admin) ─────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
    gap:    var(--space-4);
    margin-bottom: var(--space-8);
}
.stats-card {
    background:    var(--surface-card);
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding:       var(--space-5);
    position:      relative;
    overflow:      hidden;
}
.stats-card::before {
    content:  '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height:   3px;
    background: var(--color-primary);
}
.stats-card__num {
    font-family: var(--font-head);
    font-size:   2rem;
    font-weight: 800;
    color:       var(--color-primary);
    line-height: 1;
}
.stats-card__label { font-size: 13px; color: var(--text-secondary); margin-top: var(--space-1); }
.stats-card__icon {
    position: absolute;
    right: var(--space-4);
    top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px;
    color: var(--color-primary);
    opacity: .12;
}

/* ── Site Footer ─────────────────────────────────────────── */
.site-footer {
    background:    var(--surface-card);
    border-top:    1px solid var(--border-color);
    padding:       var(--space-8) var(--space-5);
    margin-top:    auto;
}
.site-footer__inner  { max-width: var(--max-width); margin: 0 auto; text-align: center; }
.site-footer__brand {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    font-family:     var(--font-head);
    font-size:       1.1rem;
    font-weight:     800;
    margin-bottom:   var(--space-2);
    color:           var(--text-primary);
}
.site-footer__desc  { color: var(--text-secondary); font-size: 14px; margin-bottom: var(--space-4); }
.site-footer__links { display: flex; justify-content: center; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-4); }
.site-footer__links a { font-size: 14px; color: var(--text-secondary); }
.site-footer__copy  { font-size: 13px; color: var(--text-muted); }

/* ── Sort tabs ───────────────────────────────────────────── */
.sort-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-grid { grid-template-columns: 1fr; }
    .sidebar   { display: none; }
    .admin-sidebar { display: none; }
    .admin-content { padding: var(--space-5); }
}
@media (max-width: 768px) {
    .navbar__search   { display: none; }
    .hamburger        { display: flex; }
    .navbar__actions .btn--sm:not(.hamburger) { display: none; }
    .navbar__actions .user-menu { display: none; }
    .category-grid    { grid-template-columns: 1fr; }
    .topic-item__stats{ display: none; }
    .stats-grid       { grid-template-columns: 1fr 1fr; }
    .auth-card        { padding: var(--space-6); margin: var(--space-5) auto; }
    .forum-hero       { padding: var(--space-8) var(--space-5); }
    .forum-hero__stats{ gap: var(--space-6); }
    .container        { padding: var(--space-5) var(--space-4); }
    .data-table       { font-size: 13px; }
    .data-table th,
    .data-table td    { padding: 10px 12px; }
}
@media (max-width: 480px) {
    h1 { font-size: 1.4rem; }
    .stats-grid { grid-template-columns: 1fr; }
    .modal { max-width: 100%; }
}

/* ============================================================
   NEW FEATURE STYLES — Reputation, Badges, Follow, DMs,
   Online Status, Notifications
   ============================================================ */

/* ── Online dot ──────────────────────────────────────────── */
.avatar-wrap {
    position: relative;
    display:  inline-block;
    line-height: 0;
}
.online-dot {
    display:       block;
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    var(--color-success);
    border:        2px solid var(--surface-card);
}
.online-dot--nav {
    position: absolute;
    bottom:   0;
    right:    0;
    width:    9px;
    height:   9px;
}
.online-dot--sm {
    width:  8px;
    height: 8px;
}
.online-dot--profile {
    position: absolute;
    bottom:   3px;
    right:    3px;
    width:    14px;
    height:   14px;
    border-width: 2.5px;
}

/* ── Navbar icon button (bell, DM) ───────────────────────── */
.navbar__icon-btn {
    position:    relative;
    width:       36px;
    height:      36px;
    border-radius: 50%;
    background:  var(--surface-muted);
    border:      none;
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    cursor:      pointer;
    color:       var(--text-secondary);
    transition:  background var(--transition-fast);
    text-decoration: none;
    flex-shrink: 0;
}
.navbar__icon-btn:hover { background: var(--border-color); color: var(--text-primary); opacity: 1; }
.navbar__icon-btn svg   { width: 18px; height: 18px; }

/* Badge dot on icon button */
.navbar__badge {
    position:      absolute;
    top:           -2px;
    right:         -2px;
    min-width:     17px;
    height:        17px;
    border-radius: 9px;
    background:    var(--color-danger);
    color:         #fff;
    font-size:     10px;
    font-weight:   700;
    display:       flex;
    align-items:   center;
    justify-content: center;
    padding:       0 4px;
    border:        2px solid var(--surface-card);
    line-height:   1;
}

/* ── Notification dropdown ───────────────────────────────── */
.notif-menu { position: relative; }
.notif-dropdown {
    display:       none;
    position:      absolute;
    right:         0;
    top:           calc(100% + 8px);
    width:         340px;
    background:    var(--surface-card);
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow:    var(--shadow-lg);
    z-index:       300;
    overflow:      hidden;
}
.notif-dropdown.is-open { display: block; animation: modalIn .18s ease; }
.notif-dropdown__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 16px;
    border-bottom:   1px solid var(--border-color);
}
.notif-dropdown__title { font-family: var(--font-head); font-weight: 700; font-size: .9rem; }
.notif-dropdown__clear {
    font-size: 12px;
    color:     var(--color-primary);
    background: none;
    border:    none;
    cursor:    pointer;
    padding:   0;
}
.notif-dropdown__clear:hover { text-decoration: underline; }
.notif-dropdown__list { max-height: 320px; overflow-y: auto; }
.notif-dropdown__footer {
    display:       block;
    text-align:    center;
    padding:       10px;
    font-size:     13px;
    font-weight:   500;
    color:         var(--color-primary);
    border-top:    1px solid var(--border-color);
}
.notif-dropdown__footer:hover { background: var(--surface-muted); opacity: 1; }

/* Notification item (shared between dropdown & full page) */
.notif-item {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-3);
    padding:     12px 16px;
    border-bottom: 1px solid var(--border-color);
    transition:  background var(--transition-fast);
    text-decoration: none;
    color:       var(--text-primary);
}
.notif-item:last-child  { border-bottom: none; }
.notif-item:hover       { background: var(--surface-muted); }
.notif-item--unread     { background: rgba(var(--color-primary-rgb),.04); }
.notif-item__icon       { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.notif-item__body       { flex: 1; min-width: 0; }
.notif-item__message    { font-size: 13px; line-height: 1.45; margin-bottom: 3px; }
.notif-item__time       { font-size: 11px; color: var(--text-muted); }

/* ── DM layout ───────────────────────────────────────────── */
.dm-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap:    var(--space-4);
    height: calc(100vh - var(--nav-height) - 140px);
    min-height: 500px;
}
.dm-sidebar {
    overflow-y: auto;
    display:    flex;
    flex-direction: column;
}
.dm-sidebar__header {
    padding:     12px var(--space-4);
    font-family: var(--font-head);
    font-weight: 700;
    font-size:   .88rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.dm-conv-item {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    padding:     12px var(--space-4);
    border-bottom: 1px solid var(--border-color);
    cursor:      pointer;
    transition:  background var(--transition-fast);
    text-decoration: none;
    color:       var(--text-primary);
}
.dm-conv-item:hover, .dm-conv-item.is-active { background: rgba(var(--color-primary-rgb),.06); }
.dm-conv-item.is-active { border-left: 3px solid var(--color-primary); }
.dm-thread {
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
}
.dm-thread__header {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    padding:     14px var(--space-5);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background:  var(--surface-muted);
}
.dm-messages {
    flex:       1;
    overflow-y: auto;
    padding:    var(--space-4) var(--space-5);
    display:    flex;
    flex-direction: column;
    gap:        var(--space-3);
}
.dm-bubble-wrap {
    display:     flex;
    align-items: flex-end;
    gap:         var(--space-2);
    max-width:   80%;
}
.dm-bubble-wrap--self {
    align-self:      flex-end;
    flex-direction:  row-reverse;
}
.dm-bubble {
    padding:       10px 14px;
    border-radius: var(--border-radius-lg);
    font-size:     14px;
    line-height:   1.5;
    word-break:    break-word;
}
.dm-bubble--other {
    background:      var(--surface-muted);
    color:           var(--text-primary);
    border-bottom-left-radius: 4px;
}
.dm-bubble--self {
    background:      var(--color-primary);
    color:           #fff;
    border-bottom-right-radius: 4px;
}
.dm-compose {
    display:     flex;
    align-items: flex-end;
    gap:         var(--space-2);
    padding:     var(--space-3) var(--space-4);
    border-top:  1px solid var(--border-color);
    flex-shrink: 0;
}
.dm-compose__input {
    flex:       1;
    min-height: 40px;
    max-height: 120px;
    resize:     none;
    border-radius: var(--border-radius-sm);
}

/* ── Responsive DMs ──────────────────────────────────────── */
@media (max-width: 768px) {
    .dm-layout { grid-template-columns: 1fr; height: auto; }
    .dm-sidebar { max-height: 220px; }
    .dm-thread  { min-height: 400px; }
    .dm-messages { height: 300px; }
}

/* ============================================================
   EDITOR, POLL, ATTACHMENT STYLES
   ============================================================ */

/* ── Rendered Markdown ───────────────────────────────────── */
.md-rendered h2          { font-size:1.25rem;font-weight:700;margin:1.2em 0 .5em; }
.md-rendered h3          { font-size:1.05rem;font-weight:700;margin:1em 0 .4em; }
.md-rendered p           { margin-bottom:.85em; }
.md-rendered p:last-child{ margin-bottom:0; }
.md-rendered ul,.md-rendered ol { padding-left:1.6em;margin-bottom:.85em; }
.md-rendered li          { margin-bottom:.2em; }
.md-rendered ol          { list-style:decimal; }
.md-rendered ul          { list-style:disc; }
.md-rendered blockquote  { border-left:4px solid var(--color-primary);padding-left:var(--space-4);color:var(--text-secondary);font-style:italic;margin-bottom:.85em; }
.md-rendered code        { background:var(--surface-muted);border-radius:4px;padding:1px 6px;font-size:13px;font-family:'Courier New',monospace; }
.md-rendered pre         { background:var(--surface-muted);border-radius:var(--border-radius-sm);padding:var(--space-4);overflow-x:auto;font-size:13px;margin-bottom:.85em; }
.md-rendered pre code    { background:none;padding:0; }
.md-rendered a           { color:var(--color-primary);text-decoration:underline; }
.md-rendered hr          { border:none;border-top:1px solid var(--border-color);margin:1em 0; }
.md-rendered strong      { font-weight:700; }
.md-rendered em          { font-style:italic; }
.md-rendered del         { text-decoration:line-through;opacity:.7; }

/* ── EasyMDE overrides ───────────────────────────────────── */
.editor-card-body        { padding:0 !important; }
.EasyMDEContainer        { border-radius:0 0 var(--border-radius-lg) var(--border-radius-lg);overflow:hidden; }
.CodeMirror              { font-family:var(--font-body)!important;font-size:14px!important;background:var(--surface-bg)!important;color:var(--text-primary)!important;border:none!important; }
.editor-toolbar          { background:var(--surface-muted)!important;border-bottom:1px solid var(--border-color)!important;border-top:none!important;border-left:none!important;border-right:none!important; }
.editor-toolbar a        { color:var(--text-secondary)!important; }
.editor-toolbar a:hover,.editor-toolbar a.active { color:var(--color-primary)!important;background:transparent!important; }
.editor-toolbar i.separator { border-color:var(--border-color)!important; }
.editor-preview          { background:var(--surface-card)!important;color:var(--text-primary)!important; }
.editor-preview-side     { border-left:1px solid var(--border-color)!important; }

/* ── Attachment drop zone ────────────────────────────────── */
.attachment-drop {
    border:        2px dashed var(--border-color);
    border-radius: var(--border-radius-md);
    transition:    border-color var(--transition-fast),background var(--transition-fast);
    min-height:    100px;
}
.attachment-drop.is-drag-over {
    border-color: var(--color-primary);
    background:   rgba(var(--color-primary-rgb),.04);
}
.attachment-drop svg { color:var(--text-muted); margin:0 auto; }

/* ── Post card attachments ───────────────────────────────── */
.post-card__attachments {
    display:     flex;
    flex-wrap:   wrap;
    gap:         var(--space-2);
    padding:     var(--space-3) var(--space-5);
    border-top:  1px solid var(--border-color);
    background:  var(--surface-muted);
}
.attachment-thumb {
    display:       block;
    border-radius: var(--border-radius-sm);
    overflow:      hidden;
    border:        1px solid var(--border-color);
    max-width:     200px;
    transition:    transform var(--transition-fast);
}
.attachment-thumb:hover { transform:scale(1.02); opacity:1; }
.attachment-thumb img   { width:100%;height:auto;display:block;max-height:160px;object-fit:cover; }

/* ── Poll card ───────────────────────────────────────────── */
.poll-card { margin-bottom:var(--space-4); }
.poll-result { }
.poll-bar {
    height:        10px;
    background:    var(--surface-muted);
    border-radius: var(--border-radius-pill);
    overflow:      hidden;
}
.poll-bar__fill {
    height:           100%;
    background:       var(--color-primary);
    border-radius:    var(--border-radius-pill);
    transition:       width .5s ease;
    opacity:          .6;
}
.poll-bar__fill--voted { opacity:1; }
.poll-result--voted .poll-bar__fill { background:var(--color-primary); }
.poll-option-label {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    padding:     10px 14px;
    border:      1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--space-2);
    cursor:      pointer;
    font-size:   14px;
    transition:  all var(--transition-fast);
}
.poll-option-label:hover { border-color:var(--color-primary);background:rgba(var(--color-primary-rgb),.04); }
.poll-option-label input[type=radio] { accent-color:var(--color-primary); }

/* ============================================================
   TRENDING RANK, RELATED TOPICS, MODERATION STYLES
   ============================================================ */

/* ── Trending rank number ────────────────────────────────── */
.trending-rank {
    width:           22px;
    height:          22px;
    border-radius:   50%;
    background:      rgba(var(--color-primary-rgb), .1);
    color:           var(--color-primary);
    font-size:       11px;
    font-weight:     800;
    font-family:     var(--font-head);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.sidebar-list li:first-child .trending-rank { background: var(--color-primary);  color: #fff; }
.sidebar-list li:nth-child(2) .trending-rank { background: var(--text-secondary); color: #fff; }
.sidebar-list li:nth-child(3) .trending-rank { background: var(--color-warning);  color: #fff; }

/* ── Related topics block ────────────────────────────────── */
.related-topics {
    margin-top:    var(--space-8);
    margin-bottom: var(--space-8);
}
.related-topics__header {
    display:         flex;
    align-items:     center;
    gap:             var(--space-2);
    font-family:     var(--font-head);
    font-weight:     700;
    font-size:       .95rem;
    margin-bottom:   var(--space-3);
    color:           var(--text-primary);
}
.related-topics__list {
    background:    var(--surface-card);
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow:      hidden;
}
.related-topic-item {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    padding:     13px var(--space-4);
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color:       var(--text-primary);
    transition:  background var(--transition-fast);
}
.related-topic-item:last-child  { border-bottom: none; }
.related-topic-item:hover       { background: var(--surface-muted); opacity: 1; }
.related-topic-item__cat-dot {
    width:       8px;
    height:      8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.related-topic-item__body { flex: 1; min-width: 0; }
.related-topic-item__title {
    display:       block;
    font-size:     14px;
    font-weight:   500;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
.related-topic-item__meta {
    display:  flex;
    gap:      var(--space-2);
    font-size: 12px;
    color:     var(--text-muted);
}

/* ── Moderation status badges ────────────────────────────── */
.status-pending  { background: #fef3c7; color: #92400e; }
.status-approved { background: #d1fae5; color: #065f46; }
.status-rejected { background: #fef2f2; color: #991b1b; }

/* ============================================================
   MOBILE SLIDE-IN DRAWER
   ============================================================ */

/* Overlay backdrop */
.mobile-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.45);
    z-index:    290;
    backdrop-filter: blur(2px);
}
.mobile-overlay.is-visible { display: block; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* Override old mobile-menu to be a slide-in drawer */
.mobile-drawer {
    position:   fixed !important;
    top:        0;
    left:       0;
    bottom:     0;
    width:      min(300px, 85vw);
    background: var(--surface-card);
    box-shadow: var(--shadow-lg);
    z-index:    300;
    display:    flex !important;
    flex-direction: column;
    overflow-y: auto;
    transform:  translateX(-110%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    border-right: 1px solid var(--border-color);
    /* Important: always in DOM, hidden via transform */
}
.mobile-drawer.is-open {
    transform: translateX(0);
}

/* Drawer header */
.mobile-drawer__header {
    display:         flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         16px var(--space-5);
    border-bottom:   1px solid var(--border-color);
    background:      var(--surface-muted);
    flex-shrink:     0;
}
.mobile-drawer__header .navbar__brand-icon { color: var(--color-primary); font-size: 1.3rem; }
.mobile-drawer__close {
    margin-left:     auto;
    background:      none;
    border:          none;
    font-size:       1.5rem;
    line-height:     1;
    color:           var(--text-muted);
    cursor:          pointer;
    padding:         4px 6px;
    border-radius:   var(--border-radius-sm);
    transition:      background var(--transition-fast);
}
.mobile-drawer__close:hover { background: var(--border-color); color: var(--text-primary); }

/* Drawer nav items */
.mobile-menu__item {
    padding:       13px var(--space-5) !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-size:     15px !important;
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
}
.mobile-menu__item:last-child { border-bottom: none !important; }

/* Report button in posts */
.report-btn {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    background:  none;
    border:      none;
    cursor:      pointer;
    font-size:   12px;
    color:       var(--text-muted);
    padding:     5px 8px;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-body);
    transition:  all var(--transition-fast);
}
.report-btn:hover { color: var(--color-danger); background: rgba(239,68,68,.06); }
.report-btn svg { width: 13px; height: 13px; }

/* 2FA / Security badge on profile */
.security-badge {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    padding:     4px 10px;
    border-radius: var(--border-radius-pill);
    font-size:   12px;
    font-weight: 700;
}
.security-badge--on  { background: #d1fae5; color: #065f46; }
.security-badge--off { background: #fef3c7; color: #92400e; }

/* ── Earning / payout stat cards ─────────────────────────── */
.stat-card {
    background:    var(--surface-card);
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding:       var(--space-4) var(--space-5);
    text-align:    center;
}
.stat-card__num {
    font-family:  var(--font-head);
    font-size:    1.6rem;
    font-weight:  800;
    color:        var(--color-primary);
    display:      block;
    line-height:  1;
    margin-bottom: 4px;
}
.stat-card__lbl { font-size:12px; color:var(--text-muted); font-weight:500; }