/* ============ FONTS ============ */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/ibm-plex-arabic-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/ibm-plex-latin-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-024F, U+0300-036F;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/ibm-plex-arabic-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/ibm-plex-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0000-024F, U+0300-036F;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/ibm-plex-arabic-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('fonts/ibm-plex-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0000-024F, U+0300-036F;
}

/* ============ VARIABLES ============ */
:root {
    --primary: #E53030;
    --primary-dark: #B71C1C;
    --primary-light: #FFEBEE;
    --bg: #0F0F0F;
    --bg-light: #1A1A1A;
    --card: #1E1E1E;
    --card-hover: #252525;
    --border: #2A2A2A;
    --text: #F0F0F0;
    --text-secondary: #B0B0B0;
    --text-muted: #666;
    --hover-bg: #222;
    --radius: 10px;
    --max-w: 1100px;
    --gradient-red: linear-gradient(135deg, #E53030, #B71C1C);
}

/* ============ RESET ============ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    direction: rtl;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }

/* ============ TOP BAR ============ */
.top-bar {
    background: #0A0A0A;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
}
.top-bar-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.top-bar-date { display: flex; align-items: center; gap: 6px; }
.top-bar-date i { color: var(--primary); }
.top-bar-socials { display: flex; gap: 14px; }
.top-bar-socials a { color: var(--text-muted); transition: color 0.2s; font-size: 13px; }
.top-bar-socials a:hover { color: var(--primary); }

/* ============ HEADER ============ */
.header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    gap: 20px;
}
.logo a {
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo-icon {
    width: 44px; height: 44px;
    background: var(--gradient-red);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px; flex-shrink: 0;
}
.logo-img { height: 48px; width: auto; object-fit: contain; }
.logo-text { font-size: 24px; font-weight: 700; color: var(--text); white-space: nowrap; }
.logo-text span { color: var(--primary); }

.header-search { flex: 0 1 380px; position: relative; }
.header-search input {
    width: 100%; padding: 10px 18px 10px 42px;
    border: 1px solid var(--border); border-radius: 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 14px; outline: none;
    background: var(--bg-light); color: var(--text);
    transition: border-color 0.3s;
}
.header-search input:focus { border-color: var(--primary); }
.header-search input::placeholder { color: var(--text-muted); }
.header-search button {
    position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 16px; padding: 8px;
}
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-icon {
    width: 38px; height: 38px; border-radius: 8px;
    background: var(--bg-light); border: 1px solid var(--border);
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 16px; transition: all 0.2s;
}
.btn-icon:hover { color: var(--primary); border-color: var(--primary); }

.mobile-search-btn { display: none; }

.user-greeting {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.user-greeting a {
    color: var(--primary);
    font-weight: 700;
}
.user-greeting a:hover { text-decoration: underline; }

/* ============ NAV TABS ============ */
.nav-tabs {
    background: var(--card);
    border-bottom: 2px solid var(--primary);
}
.nav-tabs-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex; padding: 0 20px; overflow-x: auto;
}
.nav-tabs-inner::-webkit-scrollbar { display: none; }
.nav-tab {
    padding: 12px 20px; color: var(--text-secondary);
    font-size: 14px; font-weight: 600;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
    transition: all 0.2s; margin-bottom: -2px;
}
.nav-tab:hover { color: var(--primary); }
.nav-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: rgba(229,48,48,0.05);
}
.nav-tab i { font-size: 13px; }

/* ============ LINKS BAR ============ */
.links-bar {
    background: #D4C94A;
    padding: 10px 0;
}
.links-bar-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
    line-height: 2;
}
.links-bar-label {
    color: #8B0000;
    font-weight: 700;
    margin-left: 8px;
}
.links-bar a {
    color: #333;
    font-weight: 600;
    transition: color 0.2s;
}
.links-bar a:hover { color: #8B0000; }
.links-sep { color: #999; margin: 0 4px; }

/* ============ TICKER ============ */
.ticker {
    background: var(--primary);
    color: #fff;
    overflow: hidden;
}
.ticker-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex; align-items: center;
}
.ticker-label {
    background: var(--primary-dark);
    padding: 8px 18px;
    font-size: 13px; font-weight: 700;
    white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}
.ticker-label i { animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.ticker-content {
    flex: 1; padding: 8px 20px;
    font-size: 13px; font-weight: 600;
    overflow: hidden; white-space: nowrap;
}
.ticker-scroll {
    display: inline-flex; gap: 40px;
    animation: ticker-scroll 60s linear infinite;
}
.ticker-scroll a { color: #fff; white-space: nowrap; transition: opacity 0.2s; }
.ticker-scroll a:hover { opacity: 0.7; }
.ticker-scroll .sep { color: rgba(255,255,255,0.4); }
@keyframes ticker-scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* ============ AD BANNER ============ */
.ad-banner {
    background: var(--bg-light);
    padding: 16px 0;
}
.ad-banner-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ============ CONTAINER ============ */
.container { max-width: var(--max-w); margin: 0 auto; padding: 24px 20px; }

/* ============ PAGE TITLE ============ */
.page-title {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px; padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
    position: relative;
}
.page-title::after {
    content: ''; position: absolute;
    bottom: -2px; right: 0;
    width: 80px; height: 2px;
    background: var(--primary);
}
.page-title i { color: var(--primary); font-size: 18px; }

/* ============ FORUM LIST ============ */
.forum-list {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 20px;
}
.forum-list-header {
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    font-size: 15px; font-weight: 700;
    color: var(--text);
    display: flex; align-items: center; gap: 8px;
    background: rgba(229,48,48,0.05);
}
.forum-list-header i { color: var(--primary); }

.forum-item {
    display: flex; align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}
.forum-item:last-child { border-bottom: none; }
.forum-item:hover { background: var(--hover-bg); }

.forum-icon-grid {
    width: 44px; height: 44px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px; margin-left: 18px; flex-shrink: 0;
}
.forum-icon-grid span { border-radius: 3px; }
.forum-icon-grid .red { background: var(--primary); }
.forum-icon-grid .dark { background: #444; }

.forum-content { flex: 1; min-width: 0; }
.forum-name { font-size: 16px; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.forum-name a { color: var(--primary); }
.forum-name a:hover { text-decoration: underline; }
.forum-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.forum-subforums { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.forum-subforums a {
    font-size: 12px; color: var(--text-secondary);
    background: var(--bg-light); padding: 2px 10px;
    border-radius: 4px; border: 1px solid var(--border);
    transition: all 0.2s;
}
.forum-subforums a:hover { color: var(--primary); border-color: var(--primary); }

.forum-meta {
    display: flex; gap: 20px;
    padding-right: 20px;
    font-size: 12px; color: var(--text-muted); text-align: center;
    flex-shrink: 0;
}
.forum-meta .meta-item span {
    display: block; font-size: 16px; font-weight: 700; color: var(--primary);
}

/* ============ BREADCRUMB ============ */
.breadcrumb {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 15px; font-size: 13px; color: var(--text-muted);
    flex-wrap: wrap;
}
.breadcrumb a { color: var(--primary); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb i { font-size: 10px; color: var(--text-muted); }

/* ============ THREADS LIST ============ */
.threads-list {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
}
.threads-list-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    background: rgba(229,48,48,0.05);
}
.threads-list-header h2 { font-size: 15px; font-weight: 700; color: var(--primary); }
.threads-list-header .count { font-size: 12px; color: var(--text-muted); }
.btn-new-thread {
    background: var(--gradient-red); color: #fff;
    border: none; padding: 7px 18px; border-radius: 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 13px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: opacity 0.2s; white-space: nowrap;
}
.btn-new-thread:hover { opacity: 0.9; color: #fff; }

.thread-item {
    display: flex; align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}
.thread-item:last-child { border-bottom: none; }
.thread-item:hover { background: var(--hover-bg); }
.thread-item.sticky {
    background: rgba(255,179,0,0.05);
    border-right: 3px solid #FFB300;
}

.thread-status {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-left: 14px; flex-shrink: 0; font-size: 14px;
}
.thread-status.new { background: rgba(229,48,48,0.15); color: var(--primary); }
.thread-status.hot { background: rgba(255,152,0,0.15); color: #FF9800; }
.thread-status.closed { background: rgba(150,150,150,0.15); color: #888; }
.thread-status.pinned { background: rgba(255,179,0,0.15); color: #FFB300; }

.thread-content { flex: 1; min-width: 0; }
.thread-title {
    font-size: 14px; font-weight: 600; color: var(--text);
    margin-bottom: 2px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.thread-title a { color: var(--text); }
.thread-title a:hover { color: var(--primary); }
.thread-title .badge {
    font-size: 10px; padding: 1px 8px; border-radius: 4px;
    font-weight: 600; margin-left: 6px; vertical-align: middle;
}
.badge.pin { background: rgba(255,179,0,0.15); color: #FFB300; }
.badge.lock { background: rgba(150,150,150,0.15); color: #888; }
.badge.fire { background: rgba(255,152,0,0.15); color: #FF9800; }

.thread-info { font-size: 12px; color: var(--text-muted); }
.thread-info .author { color: var(--primary); font-weight: 600; }

.thread-numbers {
    display: flex; gap: 20px; text-align: center;
    margin: 0 15px; flex-shrink: 0;
}
.thread-numbers .num { font-size: 14px; font-weight: 700; color: var(--text-secondary); display: block; }
.thread-numbers .label { font-size: 11px; color: var(--text-muted); }

.thread-last { min-width: 130px; text-align: start; flex-shrink: 0; }
.thread-last .last-author { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.thread-last .last-date { font-size: 11px; color: var(--text-muted); }

/* ============ THREAD PAGE LAYOUT ============ */
.page-layout {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}
.thread-area { min-width: 0; }

/* ============ TOPIC HEADER ============ */
.topic-header {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 16px;
}
.topic-title-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    margin-bottom: 10px;
}
.topic-header h1 {
    font-size: 20px; font-weight: 700; color: var(--text);
    line-height: 1.6; flex: 1;
}
.topic-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.topic-tag {
    font-size: 12px; color: var(--primary);
    background: rgba(229,48,48,0.1);
    padding: 2px 12px; border-radius: 20px;
}
.topic-stats {
    display: flex; gap: 20px; font-size: 13px; color: var(--text-muted);
    padding-top: 12px; border-top: 1px solid var(--border);
}
.topic-stats i { color: var(--primary); margin-left: 4px; }
.topic-stats strong { color: var(--text-secondary); }
.sort-toggle {
    margin-right: auto;
    font-size: 12px; font-weight: 600;
    color: var(--primary);
    background: rgba(229,48,48,0.1);
    padding: 4px 14px;
    border-radius: 20px;
    display: flex; align-items: center; gap: 5px;
    transition: all 0.2s;
}
.sort-toggle:hover { background: rgba(229,48,48,0.2); }

/* ============ VIEW TABS ============ */
.view-tabs {
    display: flex;
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 20px;
}
.view-tab {
    flex: 1;
    text-align: center;
    padding: 14px;
    font-size: 15px; font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.view-tab:hover { color: var(--primary); background: rgba(229,48,48,0.03); }
.view-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: rgba(229,48,48,0.05);
}

/* ============ TIMELINE ============ */
.timeline-container {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.timeline-post {
    display: flex; gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.timeline-post:last-child { border-bottom: none; }
.timeline-post:hover { background: var(--card-hover); }

.tl-context {
    font-size: 13px; color: var(--text-muted);
    margin-bottom: 8px;
}
.tl-context i { margin-left: 4px; color: var(--text-muted); font-size: 12px; }
.tl-context a { color: var(--primary); }
.tl-context a:hover { text-decoration: underline; }

.tl-thread-card {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--bg-light);
    transition: all 0.2s;
}
.tl-thread-card:hover {
    background: var(--hover-bg);
    border-color: rgba(229,48,48,0.3);
}
.tl-thread-title {
    font-size: 15px; font-weight: 700; color: var(--text);
    margin-bottom: 8px; line-height: 1.6;
}
.tl-thread-stats {
    display: flex; gap: 16px;
    font-size: 12px; color: var(--text-muted);
}
.tl-thread-stats i { margin-left: 4px; }

.tl-new-badge {
    font-size: 11px; font-weight: 600;
    background: rgba(229,48,48,0.15);
    color: var(--primary);
    padding: 1px 8px;
    border-radius: 10px;
}
.tl-preview {
    font-size: 14px; color: var(--text-secondary);
    line-height: 1.8; margin-bottom: 8px;
}
.tl-preview-text { color: var(--text-secondary); }
.tl-read-more {
    color: var(--primary); font-weight: 600; font-size: 13px;
}
.tl-image {
    border-radius: 8px; overflow: hidden;
    margin-bottom: 8px; max-height: 200px;
}
.tl-image img {
    width: 100%; height: 100%;
    object-fit: cover; max-height: 200px;
}
.tl-loading {
    text-align: center; padding: 24px;
    color: var(--primary); font-size: 14px;
    display: none;
}
.tl-end {
    text-align: center; padding: 24px;
    color: var(--text-muted); font-size: 14px;
}

/* ============ MOD ACTIONS ============ */
.mod-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.mod-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 12px; font-weight: 600;
    background: var(--bg-light); color: var(--text-secondary);
    border: 1px solid var(--border);
    transition: all 0.2s;
}
.mod-btn:hover { border-color: var(--primary); color: var(--primary); }
.mod-btn.mod-danger:hover { border-color: #F44336; color: #F44336; }

/* ============ SHARE BUTTONS ============ */
.share-buttons {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding-top: 12px; margin-top: 12px;
    border-top: 1px solid var(--border);
}
.share-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 20px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
    border: 1px solid var(--border);
    background: var(--bg-light); color: var(--text-secondary);
}
.share-btn:hover { transform: translateY(-1px); }
.share-btn.whatsapp:hover { background: #25D366; color: #fff; border-color: #25D366; }
.share-btn.twitter:hover { background: #000; color: #fff; border-color: #000; }
.share-btn.telegram:hover { background: #0088cc; color: #fff; border-color: #0088cc; }
.share-btn.copy:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ============ THREAD POSTS (Twitter Style) ============ */
.thread-posts-container {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.thread-post {
    display: flex; gap: 14px;
    padding: 18px 20px;
    position: relative;
    transition: background 0.15s;
}
.thread-post:hover { background: var(--card-hover); }
.thread-post:not(:last-child) { border-bottom: 1px solid var(--border); }

/* Vertical connecting line */
.thread-post:not(.last-post) .post-avatar-col::after {
    content: ''; position: absolute;
    top: 62px; right: 43px;
    width: 2px; bottom: 0;
    background: var(--border);
}
.thread-post.op {
    background: rgba(229,48,48,0.03);
    border-bottom: 2px solid rgba(229,48,48,0.15) !important;
}

.post-avatar-col { flex-shrink: 0; position: relative; }
.post-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--gradient-red);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px; font-weight: 700;
    position: relative; z-index: 2;
    overflow: hidden;
}
.post-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}

.post-main { flex: 1; min-width: 0; }

.post-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px; flex-wrap: wrap;
}
.post-name { font-size: 15px; font-weight: 700; color: var(--text); }
.post-name a { color: var(--text); }
.post-name a:hover { color: var(--primary); }
.post-handle { font-size: 13px; color: var(--text-muted); }
.post-dot { font-size: 12px; color: var(--text-muted); }
.post-time { font-size: 13px; color: var(--text-muted); }
.post-role {
    font-size: 11px; font-weight: 600;
    padding: 1px 10px; border-radius: 20px;
}
.post-role.admin { background: rgba(229,48,48,0.15); color: var(--primary); }
.post-role.mod { background: rgba(255,143,0,0.15); color: #FF8F00; }
.post-role.expert { background: rgba(33,150,243,0.15); color: #42A5F5; }
.post-role.member { background: rgba(102,102,102,0.15); color: var(--text-muted); }
.post-role.op-badge { background: rgba(229,48,48,0.15); color: var(--primary); }

.post-body {
    font-size: 15px; line-height: 2;
    color: var(--text-secondary);
    margin-bottom: 12px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.post-body p { margin-bottom: 8px; }
.post-body img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.post-body a { color: var(--primary); }
.post-body a:hover { text-decoration: underline; }

/* Quoted post (embedded tweet style) */
.quoted-post {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 10px 0;
    background: var(--bg-light);
    transition: background 0.2s;
}
.quoted-post:hover { background: var(--hover-bg); }
.quoted-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.quoted-avatar {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--gradient-red);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 10px; font-weight: 700;
}
.quoted-name { font-size: 13px; font-weight: 700; color: var(--text); }
.quoted-body {
    font-size: 13px; color: var(--text-secondary); line-height: 1.8;
    max-height: 80px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
}
.quoted-body.expanded {
    max-height: none;
}
.quote-toggle {
    font-size: 12px; color: var(--primary); font-weight: 600;
    cursor: pointer; padding: 6px 0;
    display: none;
}
.quote-toggle:hover { text-decoration: underline; }

/* Legacy blockquote (fallback) */
.post-body blockquote {
    background: var(--bg-light);
    border-right: 3px solid var(--primary);
    padding: 14px 20px;
    margin: 10px 0;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.9;
}

/* Post actions */
.post-actions {
    display: flex; gap: 0;
    justify-content: space-between;
    max-width: 420px;
}
.post-action {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--text-muted);
    cursor: pointer; padding: 6px 12px;
    border-radius: 20px; transition: all 0.2s;
}
.post-action i { font-size: 15px; }
.post-action.reply:hover { color: #1D9BF0; background: rgba(29,155,240,0.1); }
.post-action.repost:hover { color: #00BA7C; background: rgba(0,186,124,0.1); }
.post-action.like:hover { color: #F91880; background: rgba(249,24,128,0.1); }
.post-action.like.liked { color: #F91880; }
.post-action.share:hover { color: var(--primary); background: rgba(229,48,48,0.1); }
.post-action.bookmark:hover { color: #1D9BF0; background: rgba(29,155,240,0.1); }

/* Reply Composer */
.reply-composer {
    display: flex; gap: 14px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    background: var(--card);
}
.reply-composer .post-avatar { width: 40px; height: 40px; font-size: 16px; }
.reply-input-area { flex: 1; }
.reply-placeholder {
    padding: 12px 0;
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
}
.reply-placeholder:hover { color: var(--text-secondary); }

/* Quick Reply */
.quick-reply {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}
.quick-reply-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 10px;
}
.quick-reply textarea {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 14px; line-height: 1.8;
    background: var(--bg-light); color: var(--text);
    outline: none; resize: vertical; min-height: 60px;
    transition: border-color 0.3s;
}
.quick-reply textarea:focus { border-color: var(--primary); min-height: 100px; }
.quick-reply-bar {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px;
}
.quick-reply-tools {
    display: flex; gap: 2px; align-items: center;
}
.quick-reply-tools button, .quick-reply-tools a {
    width: 32px; height: 32px;
    background: transparent; border: none; border-radius: 6px;
    color: var(--text-muted); cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.quick-reply-tools button:hover { background: var(--card); color: var(--primary); }
.quick-reply-btn {
    padding: 8px 20px;
    background: var(--gradient-red); color: #fff;
    border: none; border-radius: 20px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer; transition: opacity 0.2s;
    display: flex; align-items: center; gap: 6px;
}
.quick-reply-btn:hover { opacity: 0.9; }

/* Show more */
.show-more {
    text-align: center; padding: 14px;
    color: var(--primary);
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    border-top: 1px solid var(--border);
    transition: background 0.2s;
}
.show-more:hover { background: rgba(229,48,48,0.05); }

/* ============ SIDEBAR ============ */
.sidebar { position: sticky; top: 80px; }
.sidebar-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
}
.sidebar-card-header {
    padding: 14px 18px;
    font-size: 16px; font-weight: 700; color: var(--text);
    border-bottom: 1px solid var(--border);
}
.sidebar-item {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s; cursor: pointer;
}
.sidebar-item:last-child { border-bottom: none; }
.sidebar-item:hover { background: var(--hover-bg); }
.sidebar-item-title {
    font-size: 14px; font-weight: 600; color: var(--text);
    margin-bottom: 2px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.sidebar-item-meta {
    font-size: 12px; color: var(--text-muted);
    display: flex; gap: 10px;
}
.sidebar-item-meta .hot { color: #FF9800; }

/* Author Card */
.author-card { padding: 18px; }
.author-card-top { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.author-card-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--gradient-red);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 24px; font-weight: 700;
    overflow: hidden; flex-shrink: 0;
}
.author-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-card-info h3 { font-size: 16px; font-weight: 700; color: var(--text); }
.author-card-info .handle { font-size: 13px; color: var(--text-muted); }
.author-card-bio {
    font-size: 13px; color: var(--text-secondary);
    line-height: 1.8; margin-bottom: 14px;
}
.author-card-stats {
    display: flex; gap: 20px; font-size: 13px; color: var(--text-muted);
}
.author-card-stats strong { color: var(--text); font-weight: 700; }

.thread-info-items { padding: 14px 18px; }
.thread-info-item {
    display: flex; justify-content: space-between;
    padding: 6px 0; font-size: 13px;
}
.thread-info-item .ti-label { color: var(--text-muted); }
.thread-info-item .ti-value { color: var(--text); font-weight: 600; }
.thread-info-item .ti-value.red { color: var(--primary); }

/* ============ STATS GRID ============ */
.stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-top: 20px;
}
.stat-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    display: flex; align-items: center; gap: 16px;
    transition: border-color 0.2s;
}
.stat-card:hover { border-color: rgba(229,48,48,0.3); }
.stat-icon {
    width: 52px; height: 52px;
    background: rgba(229,48,48,0.1);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--primary);
    flex-shrink: 0;
}
.stat-info { flex: 1; }
.stat-card .stat-num {
    font-size: 22px; font-weight: 700; color: var(--text);
    display: block; line-height: 1.3;
}
.stat-card .stat-label { font-size: 12px; color: var(--text-muted); }

/* ============ ONLINE BAR ============ */
.online-bar {
    background: var(--card); border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 18px 24px; margin-top: 20px;
    font-size: 13px; color: var(--text-muted);
}
.online-summary {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px;
}
.online-summary i { color: #4CAF50; font-size: 10px; }
.online-bar strong { color: var(--primary); font-weight: 700; }
.online-members {
    padding-top: 12px; margin-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px; color: var(--text-muted);
    line-height: 2.2;
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
}
.online-member {
    font-weight: 600;
    transition: opacity 0.2s;
}
.online-member:hover { opacity: 0.7; text-decoration: underline; }

/* ============ PAGINATION ============ */
.pagination {
    display: flex; justify-content: center;
    align-items: center; gap: 4px; margin: 20px 0;
}
.pagination a, .pagination span {
    min-width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; font-size: 13px; font-weight: 600;
    transition: all 0.2s;
}
.pagination a {
    background: var(--card); color: var(--text-secondary);
    border: 1px solid var(--border);
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination .current {
    background: var(--primary); color: #fff; border: none; padding: 0 12px;
}

/* ============ PROFILE PAGE ============ */
.profile-header {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 20px;
}
.profile-cover {
    height: 120px;
    background: var(--gradient-red);
}
.profile-info {
    padding: 0 24px 24px;
    position: relative;
}
.profile-avatar {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: var(--card);
    border: 4px solid var(--card);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 40px; font-weight: 700;
    margin-top: -48px;
    overflow: hidden;
    position: relative; z-index: 2;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-name {
    font-size: 22px; font-weight: 700; color: var(--text);
    margin-top: 12px;
}
.profile-handle { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; }
.profile-title { font-size: 14px; color: var(--primary); font-weight: 600; margin-bottom: 12px; }
.profile-stats {
    display: flex; gap: 24px; font-size: 14px; color: var(--text-muted);
    padding-top: 12px; border-top: 1px solid var(--border);
}
.profile-stats strong { color: var(--text); font-weight: 700; }
.profile-meta {
    display: flex; gap: 20px; font-size: 13px; color: var(--text-muted);
    margin-bottom: 12px;
}
.profile-meta i { color: var(--primary); margin-left: 4px; }
.profile-online-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600;
    color: #4CAF50;
    margin-bottom: 8px;
}
.profile-online-badge i { font-size: 8px; }

.profile-group {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    margin-bottom: 8px;
}

.profile-actions {
    position: absolute; top: 16px; left: 24px;
    display: flex; gap: 8px;
}
.profile-btn {
    padding: 8px 20px; border-radius: 20px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
    border: 1px solid var(--border);
    background: var(--bg-light); color: var(--text);
}
.profile-btn:hover { border-color: var(--primary); color: var(--primary); }
.profile-btn.primary {
    background: var(--gradient-red); color: #fff; border: none;
}

/* Profile Tabs */
.profile-tabs {
    display: flex;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
}
.profile-tab {
    flex: 1;
    text-align: center;
    padding: 14px;
    font-size: 14px; font-weight: 600;
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
}
.profile-tab:hover { color: var(--primary); background: rgba(229,48,48,0.03); }
.profile-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: rgba(229,48,48,0.05);
}

/* Activity Preview */
.activity-preview {
    font-size: 13px; color: var(--text-muted);
    line-height: 1.8; margin: 4px 0;
    padding: 8px 12px;
    background: var(--bg);
    border-radius: 6px;
    border-right: 2px solid var(--border);
}

/* Activity list */
.activity-list {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.activity-list-header {
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    font-size: 15px; font-weight: 700; color: var(--text);
    background: rgba(229,48,48,0.05);
    display: flex; align-items: center; gap: 8px;
}
.activity-list-header i { color: var(--primary); }
.activity-item {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}
.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background: var(--hover-bg); }
.activity-type {
    font-size: 12px; color: var(--text-muted);
    margin-bottom: 4px;
    display: flex; align-items: center; gap: 6px;
}
.activity-type i { color: var(--primary); }
.activity-title {
    font-size: 14px; font-weight: 600; color: var(--text);
    margin-bottom: 2px;
}
.activity-title a { color: var(--text); }
.activity-title a:hover { color: var(--primary); }
.activity-meta { font-size: 12px; color: var(--text-muted); }
.activity-meta .forum-link { color: var(--primary); }

/* ============ SEARCH PAGE ============ */
.search-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
}
.search-form {
    display: flex; gap: 10px;
}
.search-form input {
    flex: 1; padding: 12px 18px;
    border: 1px solid var(--border); border-radius: 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 15px; outline: none;
    background: var(--bg-light); color: var(--text);
    transition: border-color 0.3s;
}
.search-form input:focus { border-color: var(--primary); }
.search-form input::placeholder { color: var(--text-muted); }
.search-form button {
    padding: 12px 28px;
    background: var(--gradient-red); color: #fff;
    border: none; border-radius: 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 15px; font-weight: 600;
    cursor: pointer; transition: opacity 0.2s;
}
.search-form button:hover { opacity: 0.9; }
.search-info {
    padding: 14px 20px;
    font-size: 13px; color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.search-info strong { color: var(--primary); }
.search-error {
    text-align: center; padding: 40px;
    color: var(--text-muted); font-size: 15px;
}
.search-error i { font-size: 40px; color: var(--primary); margin-bottom: 12px; display: block; }

/* ============ LOGIN PAGE ============ */
.login-box {
    max-width: 440px;
    margin: 40px auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 32px;
}
.login-header {
    text-align: center;
    margin-bottom: 28px;
}
.login-header h1 {
    font-size: 22px; font-weight: 700; color: var(--text);
    margin-bottom: 6px;
}
.login-header p {
    font-size: 14px; color: var(--text-muted);
}
.login-error {
    background: rgba(229,48,48,0.1);
    border: 1px solid rgba(229,48,48,0.3);
    color: var(--primary);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 8px;
}
.login-btn {
    width: 100%;
    padding: 14px;
    background: var(--gradient-red);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 16px; font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.login-btn:hover { opacity: 0.9; }
.login-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-muted);
    display: flex; justify-content: center; gap: 10px;
}
.login-footer a { color: var(--primary); }
.login-footer a:hover { text-decoration: underline; }

/* ============ NEW THREAD ============ */
.newthread-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.newthread-header {
    padding: 16px 24px;
    font-size: 17px; font-weight: 700; color: var(--text);
    border-bottom: 1px solid var(--border);
    background: rgba(229,48,48,0.05);
    display: flex; align-items: center; gap: 10px;
}
.newthread-header i { color: var(--primary); }
.newthread-form { padding: 24px; }
.newthread-form .form-group { margin-bottom: 20px; }
.newthread-form select {
    width: 100%; padding: 12px 16px;
    border: 1px solid var(--border); border-radius: 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 14px; outline: none;
    background: var(--bg-light); color: var(--text);
    transition: border-color 0.3s;
    -webkit-appearance: none;
}
.newthread-form select:focus { border-color: var(--primary); }

.editor-toolbar {
    display: flex; gap: 2px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}
.editor-toolbar button {
    width: 36px; height: 36px;
    background: transparent; border: none;
    border-radius: 6px; color: var(--text-secondary);
    cursor: pointer; font-size: 15px;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.editor-toolbar button:hover { background: var(--card); color: var(--primary); }
.toolbar-sep {
    width: 1px; background: var(--border); margin: 4px 6px;
}
.toolbar-dropdown {
    position: relative; display: inline-block;
}
.toolbar-dropdown-menu {
    display: none;
    position: absolute; top: 100%; right: 0;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px;
    min-width: 100px; z-index: 50;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.toolbar-dropdown.open > .toolbar-dropdown-menu { display: block; }
.toolbar-dropdown-menu a,
.toolbar-dropdown-menu span {
    display: block; padding: 8px 14px;
    font-size: 13px; color: var(--text);
    border-radius: 6px; cursor: pointer;
    transition: background 0.15s;
    -webkit-user-select: none; user-select: none;
}
.toolbar-dropdown-menu a:hover,
.toolbar-dropdown-menu span:hover { background: var(--hover-bg); }
.toolbar-dropdown-menu.color-grid {
    display: none; grid-template-columns: repeat(5, 1fr);
    gap: 4px; min-width: 160px; padding: 8px;
}
.toolbar-dropdown:hover .color-grid,
.toolbar-dropdown.open .color-grid { display: grid; }
.color-grid a {
    width: 28px; height: 28px; border-radius: 50%;
    padding: 0; border: 2px solid transparent;
    transition: transform 0.15s; cursor: pointer;
}
.color-grid a:hover { transform: scale(1.2); border-color: #fff; }

.toolbar-dropdown-menu.emoji-grid {
    display: none; grid-template-columns: repeat(5, 1fr);
    gap: 2px; min-width: 180px; padding: 8px;
}
.toolbar-dropdown:hover .emoji-grid,
.toolbar-dropdown.open .emoji-grid { display: grid; }
.emoji-grid a {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; border-radius: 6px; padding: 0; cursor: pointer;
}
.emoji-grid a:hover { background: var(--hover-bg); transform: scale(1.2); }

/* Rich Editor */
.rich-editor {
    width: 100%; min-height: 250px; padding: 16px;
    border: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 15px; line-height: 2;
    background: var(--bg-light); color: var(--text);
    outline: none; overflow-y: auto;
    direction: rtl; text-align: right;
}
.rich-editor:focus { border-color: var(--primary); }
.rich-editor:empty:before {
    content: attr(data-placeholder);
    color: var(--text-muted);
}
.rich-editor img {
    max-width: 100%; border-radius: 8px; margin: 8px 0;
    display: block;
}
.rich-editor a { color: var(--primary); }

/* Preview */
.preview-content {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    font-size: 15px;
    line-height: 2;
    color: var(--text-secondary);
    direction: rtl;
}
.preview-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 8px 0;
    display: block;
}
.preview-content a { color: var(--primary); }
.preview-content strong { color: var(--text); }

.newthread-form textarea {
    width: 100%; padding: 16px;
    border: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 15px; line-height: 2; outline: none;
    background: var(--bg-light); color: var(--text);
    transition: border-color 0.3s;
    resize: vertical; min-height: 250px;
}
.newthread-form textarea:focus { border-color: var(--primary); }

.form-actions {
    display: flex; gap: 12px; align-items: center;
    padding-top: 10px;
}
.submit-btn {
    padding: 12px 32px;
    background: var(--gradient-red); color: #fff;
    border: none; border-radius: 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 15px; font-weight: 700;
    cursor: pointer; transition: opacity 0.2s;
    display: flex; align-items: center; gap: 8px;
}
.submit-btn:hover { opacity: 0.9; }
.submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cancel-btn {
    padding: 12px 24px;
    background: var(--bg-light); color: var(--text-secondary);
    border: 1px solid var(--border); border-radius: 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 14px; font-weight: 600;
    transition: all 0.2s;
}
.cancel-btn:hover { border-color: var(--primary); color: var(--primary); }
/* Admin Actions Panel */
.admin-actions-panel {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.admin-actions-title {
    padding: 10px 16px;
    font-size: 13px; font-weight: 700;
    color: var(--text-muted);
    background: var(--bg);
    display: flex; align-items: center; gap: 8px;
}
.admin-actions-title i { color: var(--primary); }
.admin-actions-buttons {
    padding: 12px 16px;
    display: flex; gap: 10px; flex-wrap: wrap;
}
.admin-action-btn {
    padding: 8px 18px;
    border-radius: 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border);
    background: var(--bg-light); color: var(--text-secondary);
}
.admin-action-btn:hover { border-color: var(--primary); color: var(--primary); }
.admin-action-btn.danger { color: #F44336; border-color: rgba(244,67,54,0.3); }
.admin-action-btn.danger:hover { background: rgba(244,67,54,0.1); border-color: #F44336; }
.admin-action-btn.move { color: #42A5F5; border-color: rgba(66,165,245,0.3); }
.admin-action-btn.move:hover { background: rgba(66,165,245,0.1); border-color: #42A5F5; }

.move-thread-row {
    padding: 12px 16px;
    display: flex; gap: 10px; align-items: center;
}
.move-select {
    flex: 1; padding: 10px 14px;
    border: 1px solid var(--border); border-radius: 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 13px;
    background: var(--bg-light); color: var(--text);
    -webkit-appearance: none;
}

/* ============ EMPTY STATE ============ */
.empty-state {
    text-align: center; padding: 60px 20px;
    color: var(--text-muted);
}
.empty-state i { font-size: 48px; color: var(--text-muted); margin-bottom: 16px; }
.empty-state p { font-size: 15px; }

/* ============ CONTACT ============ */
.contact-form { max-width: 600px; margin: 0 auto; }
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block; font-size: 14px; font-weight: 600;
    color: var(--text); margin-bottom: 6px;
}
.form-group input, .form-group textarea {
    width: 100%; padding: 12px 16px;
    border: 1px solid var(--border); border-radius: 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 14px; outline: none;
    background: var(--bg-light); color: var(--text);
    transition: border-color 0.3s;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--primary); }
.form-group textarea { min-height: 150px; resize: vertical; }
.form-submit {
    padding: 12px 32px;
    background: var(--gradient-red); color: #fff;
    border: none; border-radius: 8px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 15px; font-weight: 600;
    cursor: pointer; transition: opacity 0.2s;
}
.form-submit:hover { opacity: 0.9; }

/* ============ FOOTER ============ */
.footer {
    background: #0A0A0A;
    border-top: 1px solid var(--border);
    padding: 40px 0 0;
    margin-top: 30px;
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border);
}
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand .logo-icon { width: 36px; height: 36px; font-size: 16px; }
.footer-brand span { font-size: 20px; font-weight: 700; color: var(--text); }
.footer-about p { font-size: 13px; color: var(--text-muted); line-height: 1.9; margin-bottom: 16px; }
.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
    width: 36px; height: 36px;
    background: var(--bg-light); border: 1px solid var(--border);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 14px; transition: all 0.2s;
}
.footer-socials a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.footer-col h4 {
    font-size: 15px; font-weight: 700; color: #fff;
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 2px solid var(--primary); display: inline-block;
}
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a {
    font-size: 13px; color: var(--text-muted);
    transition: color 0.2s;
    display: flex; align-items: center; gap: 6px;
}
.footer-col ul li a:hover { color: var(--primary); }
.footer-col ul li a i { font-size: 10px; color: var(--primary); }
.footer-bottom {
    text-align: center; padding: 18px 20px;
    font-size: 12px; color: var(--text-muted);
}
.footer-bottom span { color: var(--primary); font-weight: 700; }

/* ============ LIGHT MODE ============ */
body.light {
    --bg: #F5F5F5;
    --bg-light: #EBEBEB;
    --card: #FFFFFF;
    --card-hover: #F8F8F8;
    --border: #E0E0E0;
    --text: #1A1A1A;
    --text-secondary: #555555;
    --text-muted: #999999;
    --hover-bg: #F0F0F0;
}
body.light .top-bar { background: #E8E8E8; }
body.light .top-bar, body.light .top-bar-socials a { color: #888; }
body.light .header { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
body.light .logo-text { color: #1A1A1A; }
body.light .nav-tabs { background: #fff; }
body.light .links-bar { background: #F5E642; }
body.light .footer { background: #1A1A1A; }
body.light .footer-col h4 { color: #fff; }
body.light .footer-about p, body.light .footer-col ul li a { color: #aaa; }
body.light .footer-bottom { color: #666; }
body.light .forum-icon-grid .dark { background: #ccc; }
body.light .online-bar { background: #fff; }
body.light .stat-icon { background: rgba(229,48,48,0.08); }
body.light .thread-item.sticky { background: rgba(255,179,0,0.08); }
body.light .post-body { color: #444; }
body.light .ad-banner { background: #EBEBEB; }
body.light .rich-editor { background: #fff; color: #1A1A1A; }
body.light .editor-toolbar { background: #F5F5F5; }
body.light .login-box { background: #fff; }
body.light .newthread-box { background: #fff; }
body.light .search-box { background: #fff; }
body.light .profile-cover { opacity: 0.9; }
body.light .quick-reply textarea { background: #fff; color: #1A1A1A; }

/* Theme Toggle Button */
.theme-toggle {
    cursor: pointer;
    font-size: 16px;
    transition: transform 0.3s;
}
.theme-toggle:hover { transform: rotate(30deg); }
body.light .theme-toggle { color: #FF9800; }
body.light .btn-icon { background: #F0F0F0; border-color: #ddd; color: #555; }
body.light .btn-icon:hover { color: var(--primary); border-color: var(--primary); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 900px) {
    .page-layout { grid-template-columns: 1fr; padding: 12px; }
    .sidebar { display: none; }
}
@media (max-width: 768px) {
    .top-bar { display: none; }
    .header-search { display: none; }
    .mobile-search-btn { display: flex !important; }
    .header-inner { padding: 10px 15px; }
    .logo-text { font-size: 20px; }
    .logo-img { height: 36px; }
    .user-greeting { display: none; }
    .btn-new-thread span, .btn-new-thread { font-size: 0; padding: 8px 10px; }
    .btn-new-thread i { font-size: 16px; }
    .header-inner { flex-wrap: nowrap; gap: 10px; }
    .header-actions { gap: 6px; }
    .container { padding: 16px 14px; }
    .nav-tab { padding: 10px 14px; font-size: 13px; }
    .forum-item { padding: 14px 16px; }
    .forum-meta { display: none; }
    .thread-numbers, .thread-last { display: none; }
    .thread-item { padding: 12px 16px; }
    .thread-post { padding: 14px 12px; }
    .post-avatar { width: 40px; height: 40px; font-size: 16px; }
    .thread-post:not(.last-post) .post-avatar-col::after { right: 31px; top: 54px; }
    .post-actions { max-width: 100%; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .profile-cover { height: 80px; }
    .profile-avatar { width: 72px; height: 72px; font-size: 30px; margin-top: -36px; }
    .profile-actions { position: static; margin-top: 12px; }
    .search-form { flex-direction: column; }
}