/* ==================== متغیرهای اصلی ==================== */
:root {
    --bg-color: #000000;
    --bg-page: #000000;
    --bg-secondary: #16181c;
    --bg-tertiary: #1d1f23;
    --bg-hover: #080808;
    --bg-input: #202327;
    --border-color: #2f3336;
    --border-color-strong: #536471;
    --text-primary: #e7e9ea;
    --text-secondary: #71767b;
    --text-muted: #536471;
    --accent-color: #1d9bf0;
    --accent-hover: #1a8cd8;
    --accent-bg: rgba(29, 155, 240, 0.1);
    --like-color: #f91880;
    --like-bg: rgba(249, 24, 128, 0.1);
    --danger-color: #f4212e;
    --danger-bg: rgba(244, 33, 46, 0.1);
    --success-color: #00ba7c;
    --success-bg: rgba(0, 186, 124, 0.1);
    --warning-color: #ffd400;
    --white: #ffffff;
    --black: #000000;
    --accent-color-rgb: 29, 155, 240;
    --like-color-rgb: 249, 24, 128;
    --danger-color-rgb: 244, 33, 46;
    --success-color-rgb: 0, 186, 124;
    --text-primary-rgb: 231, 233, 234;
    --bg-color-rgb: 0, 0, 0;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --font-family: 'Vazir', Tahoma, sans-serif;
}

/* حالت روشن: متغیرها در انتهای فایل (body.light-mode) تعریف شده‌اند */

/* ==================== ریست عمومی ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
body {
    font-family: var(--font-family);
    background-color: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
}
a { color: var(--accent-color); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: var(--font-family); cursor: pointer; border: none; outline: none; }
input, textarea { font-family: var(--font-family); outline: none; }

/* ==================== اسکرول‌بار سراسری — مشکی/میکرو ==================== */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #000; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #26282c; }
::-webkit-scrollbar-corner { background: transparent; }
html { scrollbar-width: thin; scrollbar-color: #000 transparent; }
body { scrollbar-width: thin; scrollbar-color: #000 transparent; }
body.light-mode ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.45); }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.7); }
body.light-mode { scrollbar-color: rgba(0, 0, 0, 0.45) transparent; }
html:has(body.light-mode) { scrollbar-color: rgba(0, 0, 0, 0.45) transparent; }

/* ==================== هدر اصلی ==================== */
.main-header {
    position: fixed;
    top: 0;
    right: 0;
    width: 275px;
    height: 100vh;
    background-color: var(--bg-color);
    border-left: 1px solid var(--border-color);
    padding: 0 12px;
    z-index: 100;
    padding-top: env(safe-area-inset-top, 0);
}
.header-container { display: flex; flex-direction: column; height: 100%; }
.logo { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 20px; border-radius: 50px; color: var(--text-primary); text-decoration: none; font-size: 20px; font-weight: 700; }
.logo:hover { background-color: var(--bg-secondary); }
.logo-img { width: 50px; height: 50px; object-fit: contain; }
.main-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-link {
    display: flex; align-items: center; gap: 20px; padding: 12px; border-radius: 50px;
    color: var(--text-primary); font-size: 20px; text-decoration: none;
    transition: background-color 0.2s; position: relative;
}
.nav-link:hover { background-color: var(--bg-secondary); text-decoration: none; }
.nav-icon-img { width: 26px; height: 26px; object-fit: contain; filter: brightness(0) invert(1); }
.nav-icon-img.nav-icon-ai { filter: none; background: transparent; }
.nav-icon-img.nav-icon-dm { filter: none; background: transparent; }
.badge-notification {
    position: absolute; top: -2px; right: -2px; background: #f4212e; color: white;
    font-size: 10px; font-weight: bold; min-width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.nav-link.btn-primary { background-color: var(--accent-color); color: white; justify-content: center; margin-top: 20px; font-weight: 700; }
.nav-link.btn-primary:hover { background-color: var(--accent-hover); }

/* ==================== لایه‌بندی کلی ==================== */
.page-title {
    position: sticky; top: 0; background-color: var(--bg-color);
    backdrop-filter: blur(12px); padding: 12px 16px;
    border-bottom: 1px solid var(--border-color); z-index: 50; color: var(--text-primary);
    display: flex; justify-content: space-between; align-items: center;
}
.page-title h1 { font-size: 20px; font-weight: 700; margin: 0; }

/* ==================== سایدبار ==================== */
.sidebar-widgets {
    position: fixed;
    top: 0;
    left: 0;
    width: 350px;
    height: 100vh;
    overflow-y: auto;
    background: var(--bg-color);
    padding: 0 20px;
}
.sidebar-search { margin-bottom: 12px; position: sticky; top: 0; z-index: 10; background: var(--bg-color); padding: 6px 0; }
.sidebar-search-wrapper { display: flex; align-items: center; background: var(--bg-input); border: 1px solid transparent; border-radius: 24px; padding: 0 16px; transition: all 0.2s; }
.sidebar-search-wrapper:focus-within { background: var(--bg-color); border-color: var(--accent-color); }
.sidebar-search-icon { font-size: 16px; margin-left: 8px; }
.sidebar-search input { flex: 1; background: transparent; border: none; color: var(--text-primary); font-size: 14px; padding: 10px 0; outline: none; font-family: inherit; }
.sidebar-search input::placeholder { color: var(--text-secondary); }
.sidebar-card { background: var(--bg-secondary); border-radius: 16px; margin-bottom: 16px; overflow: hidden; }
.sidebar-card h3 { font-size: 20px; font-weight: 800; color: var(--text-primary); padding: 16px; margin: 0; }
.trends-list-sidebar { display: flex; flex-direction: column; }
.trend-item-sidebar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; text-decoration: none; transition: background 0.15s; }
.trend-item-sidebar:hover { background: var(--bg-tertiary); text-decoration: none; }
.trend-info-sidebar { display: flex; flex-direction: column; gap: 4px; }
.trend-tag-sidebar { color: var(--text-primary); font-weight: 700; font-size: 15px; }
.trend-count-sidebar { color: var(--text-secondary); font-size: 12px; }
.trend-more { color: var(--text-secondary); font-size: 18px; }
.show-more-link { display: block; padding: 16px; color: var(--accent-color); text-decoration: none; font-size: 14px; border-top: 1px solid var(--border-color); transition: background 0.15s; }
.show-more-link:hover { background: var(--bg-tertiary); text-decoration: none; }
.ad-card { padding: 0; }
.ad-label { padding: 12px 16px 0; font-size: 13px; color: var(--text-secondary); }
.ad-link { display: block; padding: 12px 16px 16px; text-decoration: none; transition: background 0.15s; }
.ad-link:hover { background: var(--bg-tertiary); text-decoration: none; }
.ad-image-wrapper { width: 100%; border-radius: 12px; overflow: hidden; margin-bottom: 10px; border: 1px solid var(--border-color); background: var(--bg-secondary); }
.ad-image { width: 100%; height: auto; display: block; object-fit: cover; }
.ad-info { display: flex; flex-direction: column; gap: 2px; }
.ad-title { color: var(--text-primary); font-size: 14px; font-weight: 500; }
.ad-url { color: var(--text-secondary); font-size: 12px; direction: ltr; text-align: right; }
.sidebar-footer-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 24px; }
.sidebar-footer-links a, .sidebar-footer-links span { color: var(--text-secondary); font-size: 12px; text-decoration: none; }
.sidebar-footer-links a:hover { text-decoration: underline; }

/* ==================== باکس توییت ==================== */
.tweet-box { padding: 16px; border-bottom: 1px solid var(--border-color); }
.tweet-box-header { display: flex; gap: 12px; }
.user-avatar { font-size: 40px; width: 48px; height: 48px; min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; background-color: var(--bg-tertiary); border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tweet-form { flex: 1; position: relative; }
.tweet-form textarea { width: 100%; background: transparent; border: none; color: var(--text-primary); font-size: 20px; resize: none; min-height: 50px; margin-bottom: 12px; }
.tweet-form textarea::placeholder { color: var(--text-secondary); }
.tweet-box-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--border-color); }
.tweet-icons { display: flex; gap: 4px; }
.icon-btn { background: transparent; font-size: 18px; padding: 10px; border-radius: 50%; transition: background-color 0.2s; cursor: pointer; }
.icon-btn img.composer-tool-icon { display: block; width: auto; height: 18px; object-fit: contain; pointer-events: none; }
body.light-mode .icon-btn img.composer-tool-icon { filter: brightness(0); opacity: .8; }
.icon-btn:hover { background-color: rgba(29, 155, 240, 0.1); }
.tweet-actions { display: flex; align-items: center; gap: 16px; }
.char-count { font-size: 14px; color: var(--text-secondary); }
.tweet-btn { background-color: var(--accent-color); color: white; padding: 8px 20px; border-radius: 50px; font-weight: 700; font-size: 15px; transition: background-color 0.2s; }
.tweet-btn:hover { background-color: var(--accent-hover); }

/* ==================== فید توییت‌ها ==================== */
.tweets-feed { display: flex; flex-direction: column; }
.tweet { padding: 16px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.2s; }
.tweet:hover { background-color: var(--bg-secondary); }
.tweet-header { display: flex; gap: 12px; margin-bottom: 4px; align-items: flex-start; position: relative; }
.tweet-avatar { font-size: 40px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: var(--bg-tertiary); border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.tweet-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tweet-user-info { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tweet-name, .tweet-name-link { font-weight: 700; color: var(--text-primary) !important; }
.tweet-username { color: var(--text-secondary); }
.tweet-time { color: var(--text-secondary); }
.tweet-content { margin-left: 60px; margin-bottom: 12px; }
.tweet-content p { font-size: 15px; line-height: 20px; white-space: pre-wrap; word-wrap: break-word; }
.tweet-actions-bar { display: flex; justify-content: space-between; align-items: center; gap: 0; flex-wrap: wrap; margin-left: 60px; }
.action-btn { background: transparent; color: var(--text-secondary); font-size: 13px; padding: 8px; border-radius: 50%; display: flex; align-items: center; gap: 6px; transition: color 0.2s, background-color 0.2s; }
.action-btn:hover { background-color: var(--accent-bg); color: var(--accent-color); }
.action-btn.liked { color: var(--danger-color); }
.bookmark-btn.bookmarked { color: var(--accent-color); }
.bookmark-btn.bookmarked:hover { color: var(--danger-color) !important; background: var(--danger-bg) !important; }
.delete-btn { background: transparent; color: var(--text-secondary); font-size: 16px; padding: 8px; border-radius: 50%; margin-right: auto; transition: color 0.2s, background-color 0.2s; }
.delete-btn:hover { color: var(--danger-color); background-color: var(--danger-bg); }

.action-btn img.action-icon,
.action-btn-static img.action-icon,
.delete-btn img.action-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity 0.2s, transform 0.15s;
}
.action-btn:hover img.action-icon,
.delete-btn:hover img.action-icon { opacity: 1; transform: scale(1.06); }
.action-btn-static img.action-icon { opacity: 0.6; }
.action-btn.liked img.action-icon { opacity: 1; }
.bookmark-btn.bookmarked img.action-icon { opacity: 1; }

/* تمایز بین آیکن لایک‌شده و نشده: پیش‌فرض empty-like نمایش داده می‌شود،
   در حالت liked فقط like نمایش داده می‌شود. */
.action-btn .like-icon-filled { display: none; }
.action-btn.liked .like-icon-empty { display: none; }
.action-btn.liked .like-icon-filled { display: inline-block; }

/* ==================== دکمه‌های فالو ==================== */
.follow-btn { background-color: var(--text-primary); color: var(--bg-color); padding: 8px 20px; border-radius: 9999px; font-weight: 700; font-size: 14px; cursor: pointer; transition: all 0.2s; min-width: 100px; text-align: center; }
.follow-btn:hover { opacity: 0.9; }
.follow-btn.following { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-primary); }
.follow-btn.following:hover { background-color: var(--danger-bg); border-color: var(--danger-color); color: var(--danger-color); }
.follow-btn-small, .follow-btn-tweet { background-color: var(--text-primary); color: var(--bg-color); padding: 6px 18px; border-radius: 9999px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all 0.2s; min-width: 90px; text-align: center; }
.follow-btn-small:hover, .follow-btn-tweet:hover { opacity: 0.9; }
.follow-btn-small.following, .follow-btn-tweet.following { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-primary); }
.follow-btn-small.following:hover, .follow-btn-tweet.following:hover { background-color: var(--danger-bg); border-color: var(--danger-color); color: var(--danger-color); }
.tweet-header .follow-btn-tweet { position: absolute; top: 0; left: 0; }
@media (max-width: 768px) {
    .tweet-header .follow-btn-tweet {
        position: static;
        margin-right: auto;
        margin-left: 0;
        font-size: 12px;
        padding: 4px 12px;
        min-width: 76px;
    }
}

/* ==================== Infinite Scroll ==================== */
.loader-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--bg-secondary);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: loaderSpin 0.8s linear infinite;
}
@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}
.infinite-scroll-loader,
.infinite-scroll-error {
    display: flex;
    align-items: center;
}
.infinite-scroll-loader {
    gap: 0;
}
.infinite-scroll-loader > span {
    margin-right: 10px;
    margin-left: 10px;
}
.infinite-scroll-error button {
    font-family: inherit;
}

/* ==================== ایموجی پیکر ==================== */
.emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: auto;
    margin-bottom: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 12px;
    z-index: 1000;
    width: 320px;
    max-width: calc(100vw - 24px);
    max-height: 300px;
    overflow-y: auto;
}
@media (max-width: 480px) {
    .emoji-picker { right: 0; left: auto; width: calc(100vw - 24px); }
}
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.emoji-grid span { cursor: pointer; font-size: 22px; padding: 4px; border-radius: 8px; transition: background 0.2s; text-align: center; }
.emoji-grid span:hover { background: var(--bg-tertiary); }

/* ==================== منشن‌ها ==================== */
.mention-dropdown { position: absolute; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 9999; max-height: 250px; overflow-y: auto; width: 280px; }
.mention-grid { padding: 6px 0; }
.mention-item { display: flex; align-items: center; padding: 9px 14px; cursor: pointer; transition: background 0.12s; gap: 10px; }
.mention-item:hover { background: var(--bg-secondary); }
.mention-avatar { width: 36px; height: 36px; flex-shrink: 0; }
.mention-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color); }
.mention-avatar .default-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: 16px; border: 1px solid var(--border-color); }
.mention-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mention-name { color: var(--text-primary); font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-handle { color: var(--text-secondary); font-size: 12px; }

/* ==================== منوی سه‌نقطه توییت ==================== */
.tweet-options { position: relative; display: flex; align-items: center; margin-right: auto; margin-left: 10px; }
.options-btn { background: transparent; border: none; cursor: pointer; padding: 10px; border-radius: 50%; transition: background 0.2s; display: flex; align-items: center; justify-content: center; }
.options-btn:hover { background: rgba(231, 233, 234, 0.1); }
.options-icon { width: 24px; height: 24px; opacity: 0.85; }
.tweet-menu { position: absolute; top: 40px; left: 0; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-lg); min-width: 160px; z-index: 100; overflow: hidden; display: flex; flex-direction: column; }
.tweet-menu button { width: 100%; padding: 12px 16px; background: transparent; border: none; color: var(--text-primary); text-align: right; cursor: pointer; font-size: 14px; transition: background 0.2s; direction: rtl; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
.tweet-menu button:last-child { border-bottom: none; }
.tweet-menu button:hover { background: var(--bg-secondary); color: var(--accent-color); }
.tweet-menu button img.action-icon { width: 16px; height: 16px; opacity: 0.75; flex-shrink: 0; }
.tweet-menu button:hover img.action-icon { opacity: 1; }

/* ==================== مودال ویرایش ==================== */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 2000; }
.modal-content { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 16px; width: 90%; max-width: 500px; padding: 20px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.modal-header h3 { margin: 0; color: var(--text-primary); }
.close-modal { background: transparent; border: none; color: var(--text-primary); cursor: pointer; padding: 5px; border-radius: 50%; transition: background 0.2s; font-size: 20px; line-height: 1; }
.close-modal:hover { background: rgba(231,233,234,0.1); }
.modal-body textarea { width: 100%; min-height: 120px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 18px; line-height: 1.5; resize: none; outline: none; padding: 15px; border-radius: 8px; margin-bottom: 10px; font-family: inherit; }
.modal-body textarea:focus { border-color: var(--accent-color); }

.image-preview { position: relative; margin: 10px 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-color); display: flex; justify-content: center; }
.image-preview img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.remove-image { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6); border: none; color: white; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background 0.2s; }
.remove-image:hover { background: rgba(255,255,255,0.2); }
.tweet-image { margin: 10px 60px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-color); }
.tweet-image img { width: 100%; max-height: 400px; object-fit: cover; display: block; }

/* ==================== احراز هویت (ورود و ثبت‌نام) ==================== */
.auth-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
.auth-box { width: 100%; max-width: 400px; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 16px; padding: 32px; }
.auth-header { text-align: center; margin-bottom: 32px; }
.auth-logo { font-size: 48px; display: block; margin-bottom: 16px; }
.auth-header h1 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.auth-header p { color: var(--text-secondary); font-size: 15px; }
.auth-form { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-size: 15px; font-weight: 500; color: var(--text-secondary); }
.form-group input { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 14px 16px; font-size: 15px; color: var(--text-primary); transition: border-color 0.2s; }
.form-group input:focus { border-color: var(--accent-color); }
.form-group input::placeholder { color: var(--text-secondary); }
.auth-btn { background-color: var(--text-primary); color: var(--bg-color); padding: 14px; border-radius: 50px; font-size: 17px; font-weight: 700; margin-top: 8px; transition: opacity 0.2s; }
.auth-btn:hover { opacity: 0.9; }
.auth-footer { text-align: center; margin-top: 24px; color: var(--text-secondary); font-size: 15px; }
.auth-footer a { font-weight: 700; }

.terms-checkbox { margin: 15px 0; }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.checkbox-label a { color: #1da1f2; text-decoration: none; }
.checkbox-label a:hover { text-decoration: underline; }

/* ==================== پیام‌های فلش ==================== */
.flash-messages { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.flash-message { background-color: var(--danger-color); color: white; padding: 12px 24px; border-radius: 8px; font-size: 14px; animation: slideDown 0.3s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

/* ==================== پروفایل ==================== */
.profile-header { position: relative; padding: 20px; padding-left: 130px; border-bottom: 1px solid var(--border-color); }
.profile-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.back-btn, .settings-btn { font-size: 20px; color: var(--text-primary); text-decoration: none; padding: 8px; border-radius: 50%; transition: background-color 0.2s; }
.back-btn:hover, .settings-btn:hover { background-color: var(--bg-secondary); }
.profile-image-container { width: 120px; height: 120px; margin-bottom: 16px; }
.profile-image, .profile-image-placeholder { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg-color); }
.profile-image-placeholder { background-color: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 60px; }
.profile-info h1 { font-size: 20px; font-weight: 800; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.profile-username { color: var(--text-secondary); font-size: 15px; }
.profile-bio { margin-top: 12px; font-size: 15px; line-height: 1.4; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; color: var(--text-secondary); font-size: 14px; }
.profile-meta a { color: var(--accent-color); }
.profile-links { margin-top: 12px; display: flex; gap: 12px; }
.profile-links a { font-size: 20px; }
.profile-stats { display: flex; padding: 16px 20px; border-bottom: 1px solid var(--border-color); gap: 30px; }
.stat-link { display: flex; gap: 4px; color: var(--text-secondary); text-decoration: none; }
.stat-link:hover { text-decoration: underline; }
.stat-number { font-weight: 700; color: var(--text-primary); }
.stat-label { color: var(--text-secondary); }
.profile-tabs { display: flex; border-bottom: 1px solid var(--border-color); }
.profile-tabs .tab { flex: 1; text-align: center; padding: 16px; color: var(--text-secondary); font-weight: 500; border-bottom: 3px solid transparent; transition: all 0.2s; text-decoration: none; }
.profile-tabs .tab:hover { background-color: var(--bg-secondary); }
.profile-tabs .tab.active { color: var(--text-primary); border-bottom-color: var(--accent-color); }
.verified-badge { width: 18px !important; height: 18px !important; vertical-align: middle; margin-right: 4px; display: inline-block; }
.verified-badge.vip { width: 20px !important; height: 20px !important; }

/* ==================== تنظیمات پروفایل ==================== */
.settings-section { padding: 20px; border-bottom: 1px solid var(--border-color); }
.settings-section h2 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.settings-form { display: flex; flex-direction: column; gap: 16px; }
.settings-form .form-group { display: flex; flex-direction: column; gap: 8px; }
.settings-form label { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.settings-form input, .settings-form textarea { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; font-size: 15px; color: var(--text-primary); }
.settings-form input:focus, .settings-form textarea:focus { border-color: var(--accent-color); }
.settings-form textarea { min-height: 80px; resize: vertical; }
.char-hint { font-size: 12px; color: var(--text-secondary); text-align: left; }
.save-btn { background-color: var(--accent-color); color: white; padding: 12px 24px; border-radius: 50px; font-weight: 700; font-size: 15px; align-self: flex-start; transition: background-color 0.2s; }
.save-btn:hover { background-color: var(--accent-hover); }
.avatar-preview-container { width: 100px; height: 100px; margin: 12px 0; border-radius: 50%; overflow: hidden; border: 2px solid var(--border-color); }
.avatar-preview-container img { width: 100%; height: 100%; object-fit: cover; }
.cropper-wrapper { margin: 16px 0; }
.cropper-container { position: relative; width: 100%; max-width: 350px; max-height: 350px; overflow: hidden; border-radius: 8px; background-color: var(--bg-tertiary); }
.cropper-container img { display: block; width: 100%; height: auto; max-height: 350px; object-fit: contain; }
.crop-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.6); pointer-events: none; }
.crop-box { position: absolute; border: 2px solid white; box-shadow: 0 0 0 9999px rgba(0,0,0,0.5); cursor: move; box-sizing: border-box; }
.crop-handle { position: absolute; width: 16px; height: 16px; background-color: white; border: 2px solid var(--accent-color); border-radius: 2px; }
.crop-handle.top-left { top: -8px; left: -8px; cursor: nw-resize; }
.crop-handle.top-right { top: -8px; right: -8px; cursor: ne-resize; }
.crop-handle.bottom-left { bottom: -8px; left: -8px; cursor: sw-resize; }
.crop-handle.bottom-right { bottom: -8px; right: -8px; cursor: se-resize; }
.crop-controls { display: flex; gap: 8px; margin-top: 12px; justify-content: center; }
.crop-btn { background-color: var(--accent-color); color: white; padding: 10px 20px; border-radius: 20px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.crop-btn:hover { background-color: var(--accent-hover); }
.crop-btn.cancel { background-color: var(--bg-secondary); color: var(--text-primary); }
.crop-btn.cancel:hover { background-color: var(--bg-tertiary); }
.logout-btn-settings { display: block; width: 100%; padding: 14px; background: transparent; border: 1px solid #f4212e; color: #f4212e; border-radius: 12px; text-align: center; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.2s; }
.logout-btn-settings:hover { background: rgba(244,33,46,0.1); text-decoration: none; }

/* ==================== صفحه خرید تیک آبی ==================== */
.premium-wrapper { display: flex; flex-direction: column; align-items: center; gap: 25px; padding: 20px 10px; width: 100%; }
.premium-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; padding: 30px 20px; width: 100%; max-width: 420px; text-align: center; color: var(--text-primary); }
.verified-icon-wrapper { width: 80px; height: 80px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; }
.verified-icon-wrapper img { width: 45px; height: 45px; }
.card-header h2 { font-size: 1.3rem; margin-bottom: 10px; }
.price-tag { font-size: 1.6rem; font-weight: 800; color: var(--accent-color); margin-bottom: 20px; }
.price-tag span { font-size: 0.9rem; font-weight: normal; color: var(--text-secondary); }
.features-list { list-style: none; padding: 0; margin: 0 0 25px; text-align: right; }
.features-list li { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px; background: var(--bg-tertiary); border-radius: 10px; border: 1px solid var(--border-color); color: var(--text-primary); transition: all 0.2s; }
.features-list li:hover { border-color: var(--accent-color); }
.check-circle { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--accent-color); color: white; border-radius: 50%; font-size: 0.75rem; font-weight: bold; flex-shrink: 0; }
.feature-text { font-size: 0.95rem; font-weight: 500; }
.buy-btn { display: inline-block; width: 100%; padding: 14px; background: var(--accent-color); color: white; border-radius: 30px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: transform 0.2s; text-align: center; text-decoration: none; }
.buy-btn:hover { transform: translateY(-2px); text-decoration: none; }
.secure-footer { margin-top: 15px; font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ==================== نوتیفیکیشن‌ها ==================== */
.notifications-list { display: flex; flex-direction: column; }
.notification-item { display: flex; padding: 12px 16px; border-bottom: 1px solid var(--border-color); transition: background-color 0.2s; background-color: var(--bg-color); }
.notification-item:hover { background-color: var(--bg-secondary); }
.notification-item.unread { background-color: var(--bg-secondary); }
.notification-item.unread::before { content: ''; display: inline-block; width: 4px; height: 4px; background-color: var(--accent-color); border-radius: 50%; margin-right: 12px; margin-top: 6px; flex-shrink: 0; }
.notification-avatar { margin-right: 12px; flex-shrink: 0; }
.notification-avatar img, .notification-avatar div { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.notification-content { flex: 1; min-width: 0; }
.notification-text { margin-bottom: 4px; line-height: 1.4; font-size: 15px; color: var(--text-primary); }
.notification-user { font-weight: 700; text-decoration: none; color: var(--text-primary); margin-right: 4px; }
.notification-user:hover { text-decoration: underline; }
.notification-time { color: var(--text-secondary); font-size: 15px; }
.notification-tweet-preview { margin-top: 10px; padding: 12px; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; font-size: 15px; color: var(--text-primary); }
.notification-tweet-preview p { margin: 0 0 8px 0; line-height: 1.4; }
.notification-tweet-preview img { max-width: 100%; border-radius: 16px; margin-top: 10px; border: 1px solid var(--border-color); }
.view-tweet-link { display: inline-block; margin-top: 8px; color: var(--accent-color); text-decoration: none; font-size: 14px; font-weight: 700; }
.view-tweet-link:hover { text-decoration: underline; }
.no-notifications { text-align: center; padding: 40px; color: var(--text-secondary); font-size: 15px; }
.btn-small { padding: 8px 16px; border-radius: 9999px; border: 1px solid var(--text-muted); background: transparent; color: var(--text-primary); cursor: pointer; font-size: 15px; font-weight: 700; transition: all 0.2s; }
.btn-small:hover { background-color: var(--accent-bg); border-color: var(--accent-color); color: var(--accent-color); }

/* ==================== صفحه بوکمارک‌ها ==================== */
.empty-bookmarks { text-align: center; padding: 60px 20px; }
.empty-icon { font-size: 64px; display: block; margin-bottom: 20px; }
.empty-bookmarks h2 { color: var(--text-primary); font-size: 20px; margin-bottom: 8px; }
.empty-bookmarks p { color: var(--text-secondary); font-size: 14px; margin-bottom: 24px; }
.browse-btn { display: inline-block; background: var(--accent-color); color: white; padding: 10px 24px; border-radius: 25px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.2s; }
.browse-btn:hover { background: var(--accent-hover); transform: scale(1.02); }

/* ==================== جستجو ==================== */
.search-box { padding: 16px; border-bottom: 1px solid var(--border-color); display: flex; gap: 8px; }
.search-input { flex: 1; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 50px; padding: 12px 20px; font-size: 15px; color: var(--text-primary); }
.search-input:focus { border-color: var(--accent-color); }
.search-btn { background-color: var(--accent-color); color: white; border: none; border-radius: 50%; width: 46px; height: 46px; font-size: 18px; cursor: pointer; }
.search-tabs { display: flex; border-bottom: 1px solid var(--border-color); }
.search-tabs .tab { flex: 1; text-align: center; padding: 16px; color: var(--text-secondary); font-weight: 500; border-bottom: 3px solid transparent; text-decoration: none; transition: all 0.2s; }
.search-tabs .tab:hover { background-color: var(--bg-secondary); }
.search-tabs .tab.active { color: var(--text-primary); border-bottom-color: var(--accent-color); }
.search-section { padding: 0; }
.search-section h2 { padding: 16px; font-size: 18px; font-weight: 700; border-bottom: 1px solid var(--border-color); }
.user-result { display: flex; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border-color); align-items: center; transition: background 0.2s; }
.user-result:hover { background-color: var(--bg-secondary); }
.user-result .user-avatar { width: 48px; height: 48px; border-radius: 50%; background-color: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: 24px; overflow: hidden; flex-shrink: 0; }
.user-result .user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.user-result .user-info { display: flex; flex-direction: column; gap: 2px; }
.user-result .user-name { font-weight: 700; color: var(--text-primary); }
.user-result .user-username { color: var(--text-secondary); font-size: 14px; }
.user-result .user-bio { color: var(--text-secondary); font-size: 14px; margin-top: 4px; }
.no-results { padding: 40px 16px; text-align: center; color: var(--text-secondary); }
.search-empty { padding: 60px 16px; text-align: center; color: var(--text-secondary); font-size: 18px; }

/* ==================== هشتگ و ترندها ==================== */
.hashtag-link { color: var(--accent-color) !important; text-decoration: none; font-weight: 500; }
.hashtag-link:hover { text-decoration: underline !important; }
.hashtag-search-box { padding: 12px 16px; border-bottom: 1px solid var(--border-color); position: relative; background: var(--bg-color); }
.hashtag-input-wrapper { display: flex; align-items: center; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 24px; padding: 2px 4px 2px 16px; transition: all 0.2s; }
.hashtag-input-wrapper:focus-within { border-color: var(--accent-color); background: var(--bg-color); box-shadow: 0 0 0 3px rgba(29,155,240,0.15); }
.hashtag-symbol { color: var(--text-secondary); font-size: 18px; font-weight: 600; margin-left: 6px; transition: color 0.2s; }
.hashtag-input-wrapper:focus-within .hashtag-symbol { color: var(--accent-color); }
.hashtag-search-box input { flex: 1; background: transparent; border: none; color: var(--text-primary); font-size: 15px; padding: 10px 0; outline: none; font-family: inherit; min-width: 0; }
.hashtag-search-box input::placeholder { color: var(--text-muted); }
.hashtag-search-btn { background: var(--accent-color); color: white; border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
.hashtag-search-btn:hover { background: var(--accent-hover); transform: scale(1.05); }
.hashtag-suggestions { position: absolute; top: calc(100% - 4px); left: 16px; right: 16px; background: var(--bg-color); border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 16px 16px; box-shadow: var(--shadow-lg); z-index: 100; overflow: hidden; }
.suggestion-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; cursor: pointer; transition: background 0.12s; border-bottom: 1px solid var(--border-color); }
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: var(--bg-secondary); }
.suggestion-text { color: var(--text-primary); font-weight: 600; font-size: 14px; }
.suggestion-count { color: var(--text-muted); font-size: 12px; background: var(--bg-secondary); padding: 2px 8px; border-radius: 12px; }
.hashtag-result-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border-color); }
.hashtag-result-header h2 { font-size: 18px; color: var(--text-primary); margin: 0; }
.hashtag-highlight { color: var(--accent-color); }
.result-count { color: var(--text-secondary); font-size: 13px; display: block; margin-top: 2px; }
.clear-search { color: var(--text-secondary); text-decoration: none; font-size: 18px; padding: 8px; border-radius: 50%; transition: all 0.2s; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
.clear-search:hover { background: var(--bg-secondary); color: var(--text-primary); text-decoration: none; }
.trending-section { padding: 0; }
.trending-hero { text-align: center; padding: 32px 16px 24px; border-bottom: 1px solid var(--border-color); }
.trending-fire { font-size: 48px; display: block; margin-bottom: 12px; animation: firePulse 2s ease-in-out infinite; }
@keyframes firePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.trending-hero h2 { font-size: 22px; color: var(--text-primary); margin: 0 0 6px; font-weight: 800; }
.trending-hero p { color: var(--text-secondary); font-size: 13px; margin: 0; }
.trending-list { display: flex; flex-direction: column; }
.trending-item { display: flex; align-items: center; padding: 15px 16px; text-decoration: none; border-bottom: 1px solid var(--border-color); transition: all 0.15s; gap: 12px; }
.trending-item:hover { background: var(--bg-hover); text-decoration: none; }
.trending-rank { width: 36px; flex-shrink: 0; display: flex; justify-content: center; }
.rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; font-size: 13px; color: white; }
.rank-badge.gold { background: linear-gradient(135deg, #ffd700, #ff8c00); box-shadow: 0 2px 8px rgba(255,215,0,0.3); }
.rank-badge.silver { background: linear-gradient(135deg, #c0c0c0, #808080); box-shadow: 0 2px 8px rgba(192,192,192,0.3); }
.rank-badge.bronze { background: linear-gradient(135deg, #cd7f32, #a0522d); box-shadow: 0 2px 8px rgba(205,127,50,0.3); }
.rank-number { color: var(--text-muted); font-size: 14px; font-weight: 700; }
.trending-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trending-tag { color: var(--text-primary); font-weight: 700; font-size: 15px; }
.trending-count { color: var(--text-secondary); font-size: 12px; }
.trending-arrow { color: var(--text-muted); flex-shrink: 0; transition: all 0.2s; }
.trending-item:hover .trending-arrow { color: var(--accent-color); transform: translateX(-4px); }
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state-icon { font-size: 56px; display: block; margin-bottom: 16px; }
.empty-state h3 { color: var(--text-primary); font-size: 18px; margin: 0 0 8px; }
.empty-state p { color: var(--text-secondary); font-size: 14px; margin: 0 0 20px; }
.back-to-trends { display: inline-block; background: var(--accent-color); color: white; padding: 10px 20px; border-radius: 24px; text-decoration: none; font-weight: 600; font-size: 14px; transition: all 0.2s; }
.back-to-trends:hover { background: var(--accent-hover); text-decoration: none; }
.no-trends { display: flex; justify-content: center; align-items: center; min-height: 300px; padding: 40px 20px; text-align: center; }

/* ==================== لیست دنبال‌کننده‌ها / دنبال‌شونده‌ها ==================== */
.follow-list { display: flex; flex-direction: column; }
.follow-item { display: flex; align-items: center; padding: 15px 20px; background: var(--bg-color); border-bottom: 1px solid var(--border-color); transition: background-color 0.2s; }
.follow-item:last-child { border-bottom: none; }
.follow-item:hover { background: var(--bg-hover); }
.follow-avatar { margin-left: 10px; margin-right: 15px; flex-shrink: 0; }
.follow-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color); }
.follow-info { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; margin-left: 10px; margin-right: 10px; overflow: hidden; }
.follow-name { font-weight: bold; color: var(--text-primary); text-decoration: none; font-size: 16px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.follow-name:hover { text-decoration: underline; }
.follow-username { color: var(--text-secondary); font-size: 14px; margin-top: 2px; display: block; }
.follow-bio { color: var(--text-secondary); font-size: 14px; margin-top: 4px; }

/* ==================== منوی موبایل ==================== */
.mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(16, 20, 26, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-color);
    padding: 6px 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    justify-content: space-around;
    align-items: stretch;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}
.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    text-decoration: none;
    color: var(--text-secondary);
    position: relative;
    border-radius: 12px;
    min-width: 48px;
    min-height: 48px;
    flex: 1 1 0;
    max-width: 72px;
    transition: background 0.2s, color 0.2s;
    gap: 3px;
}
.mobile-nav-item:hover,
.mobile-nav-item:active {
    background: rgba(231, 233, 234, 0.08);
    color: var(--text-primary);
    text-decoration: none;
}
.mobile-nav-item.active {
    color: var(--accent-color);
}
.mobile-nav .nav-icon-img {
    width: 22px;
    height: 22px;
    transition: transform 0.2s;
}
.mobile-nav .nav-icon-img.nav-icon-ai {
    background: transparent;
}
.mobile-nav-item:active .nav-icon-img {
    transform: scale(0.9);
}
.mobile-nav-text {
    font-size: 10px;
    color: inherit;
    line-height: 1;
}

/* ==================== هدر بالای موبایل ==================== */
.mobile-top-header {
    display: none;
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(16, 20, 26, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    direction: rtl;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
}
.mobile-menu-toggle {
    background: transparent;
    border: none;
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    padding: 0;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:active {
    background: var(--bg-secondary);
}
.mobile-top-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-primary);
    flex: 1;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    min-width: 0;
}
.mobile-top-logo:hover {
    text-decoration: none;
    color: var(--text-primary);
}
.mobile-top-logo img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}
.mobile-top-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-notif-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-secondary);
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}
.mobile-notif-btn:hover,
.mobile-notif-btn:active {
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
}
.mobile-notif-btn img {
    width: 22px;
    height: 22px;
}

/* ==================== منوی کشویی (Drawer) موبایل ==================== */
.mobile-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.mobile-drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    z-index: 1002;
    transform: translateX(105%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-secondary);
    padding: 0;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
    flex-direction: column;
    overflow: hidden;
}
.mobile-drawer.open {
    transform: translateX(0);
}
.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(29, 155, 240, 0.08) 0%, rgba(120, 86, 255, 0.08) 100%);
    flex-shrink: 0;
}
.mobile-drawer-user {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}
.mobile-drawer-user:hover {
    text-decoration: none;
    color: var(--text-primary);
}
.mobile-drawer-avatar,
.mobile-drawer-avatar-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    border: 2px solid #2f3336;
}
.mobile-drawer-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mobile-drawer-user-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-drawer-user-handle {
    font-size: 12px;
    color: var(--text-secondary);
    direction: ltr;
    text-align: right;
}
.mobile-drawer-close {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
.mobile-drawer-close:hover {
    background: rgba(255, 255, 255, 0.16);
}
.mobile-drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 2px;
    flex: 1;
    overflow-y: auto;
}
.mobile-drawer-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s;
    position: relative;
}
.mobile-drawer-item:hover,
.mobile-drawer-item:active {
    background: var(--bg-secondary);
    text-decoration: none;
    color: var(--text-primary);
}
.mobile-drawer-item img {
    width: 22px;
    height: 22px;
    opacity: 0.85;
    flex-shrink: 0;
}
.mobile-drawer-item > span:not(.mobile-drawer-badge) {
    flex: 1;
}
.mobile-drawer-badge {
    background: var(--danger-color);
    color: white;
    font-size: 11px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}
.mobile-drawer-logout {
    color: #f4212e;
}
.mobile-drawer-logout:hover,
.mobile-drawer-logout:active {
    background: rgba(244, 33, 46, 0.1) !important;
    color: #f4212e !important;
}
.mobile-drawer-logout img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(95%) saturate(7471%) hue-rotate(354deg) brightness(95%) contrast(96%);
    opacity: 1;
}
.mobile-drawer-footer {
    padding: 14px;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
    flex-shrink: 0;
}
.mobile-top-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--danger-color);
    color: white;
    font-size: 10px;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* ==================== فوتر ==================== */
.main-footer { text-align: center; padding: 20px; color: var(--text-secondary); font-size: 13px; border-top: 1px solid var(--border-color); }

/* ==================== ریسپانسیو ==================== */

/* تبلت بزرگ و دسکتاپ کوچک (1265px و کمتر) */
@media (max-width: 1265px) {
    .main-header { width: 88px; }
    .sidebar-widgets { width: 290px; padding: 0 12px; }
    .logo-text, .nav-link span:not(.nav-icon) { display: none; }
    .nav-link { justify-content: center; padding: 12px; }
    .logo { justify-content: center; }
    .main-content { margin-right: 88px; max-width: 600px; }
    .main-content.admin-full,
    .main-content.full-width {
        max-width: calc(100% - 88px);
        width: calc(100% - 88px);
        margin-right: 88px;
    }
}

/* تبلت (1024px و کمتر) — حذف سایدبار */
@media (max-width: 1024px) {
    .sidebar-widgets { display: none !important; }
    .main-content.admin-full,
    .main-content.full-width {
        max-width: calc(100% - 88px);
        width: calc(100% - 88px);
    }
}

/* موبایل بزرگ و تبلت کوچک (768px و کمتر) — هیدر تمام‌عرض، حذف سایدبار ثابت */
@media (max-width: 768px) {
    body { padding-bottom: env(safe-area-inset-bottom, 0px); }
    .main-header,
    .sidebar-widgets { display: none !important; }
    .main-wrapper { padding: 0; }
    .main-content,
    .main-content.admin-full,
    .main-content.full-width {
        margin-right: 0 !important;
        margin-left: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 0 !important;
        border: none !important;
        padding: 0 !important;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .mobile-nav { display: flex; }
    .mobile-top-header { display: flex; }
    .mobile-drawer { display: flex; }
    .mobile-drawer-overlay { display: block; }
    .main-footer { display: none; }
    .tweet-content, .tweet-actions-bar { margin-left: 0; }
    .tweet { padding: 12px 14px; }
    .tweet-header { padding-bottom: 6px; margin-bottom: 4px; }
    .tweet-content { margin-top: 4px; padding-top: 2px; margin-bottom: 10px; }
    .tweet-image { margin: 10px 0; border-radius: 12px; }
    .tweet-image img { max-height: 280px; border-radius: 12px; }
    .tweet-actions-bar {
        justify-content: space-between;
        margin-top: 8px;
    }
    .action-btn {
        font-size: 12px;
        padding: 6px 4px;
        min-height: 32px;
        gap: 4px;
    }
    .action-btn img.action-icon { width: 16px; height: 16px; }
    .profile-header { padding-left: 20px; padding: 16px 16px 16px 110px; }
    .profile-image-container { width: 90px; height: 90px; }
    .profile-image, .profile-image-placeholder { width: 90px; height: 90px; }
    .profile-info h1 { font-size: 18px; }
    .profile-stats { padding: 12px 16px; gap: 18px; font-size: 13px; }
    .profile-tabs .tab { padding: 12px 8px; font-size: 14px; }
    .page-title { padding: 10px 14px; }
    .page-title h1 { font-size: 18px; }
    .tweet-box { padding: 12px 14px; }
    .tweet-box-header { gap: 10px; }
    .user-avatar { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 32px; }
    .tweet-form textarea { font-size: 17px; min-height: 44px; margin-bottom: 10px; }
    .tweet-box-footer { padding-top: 10px; }
    .tweet-icons { gap: 0; }
    .icon-btn { padding: 8px; font-size: 17px; }
    .tweet-actions { gap: 12px; }
    .char-count { font-size: 13px; }
    .tweet-btn { padding: 7px 18px; font-size: 14px; }
    .tweet-avatar { width: 40px; height: 40px; font-size: 32px; }
    .guest-message { margin: 12px; padding: 18px 14px; border-radius: 14px; }
    .guest-message .guest-icon { font-size: 36px; }
    .guest-message p { font-size: 14px; }
    .modal-content { width: 94%; padding: 16px; border-radius: 14px; }
    .modal-body textarea { font-size: 16px; padding: 12px; min-height: 100px; }
    .emoji-picker { width: calc(100vw - 32px); max-width: 320px; right: 0; left: auto; }
    .emoji-grid { grid-template-columns: repeat(7, 1fr); gap: 3px; }
    .emoji-grid span { font-size: 20px; padding: 3px; }
    .search-box { padding: 12px 14px; flex-wrap: wrap; }
    .search-input { padding: 10px 16px; font-size: 14px; }
    .search-btn { width: 42px; height: 42px; font-size: 16px; }
    .search-tabs .tab { padding: 12px 8px; font-size: 13px; }
    .hashtag-search-box { padding: 10px 14px; }
    .hashtag-search-btn { width: 32px; height: 32px; }
    .hashtag-search-box input { font-size: 14px; padding: 8px 0; }
    .hashtag-result-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
    .hashtag-result-header h2 { font-size: 16px; }
    .trending-hero { padding: 24px 14px 18px; }
    .trending-fire { font-size: 36px; margin-bottom: 8px; }
    .trending-hero h2 { font-size: 18px; }
    .trending-item { padding: 12px 14px; gap: 10px; }
    .trending-tag { font-size: 14px; }
    .trending-count { font-size: 11px; }
    .rank-badge { width: 26px; height: 26px; font-size: 12px; }
    .reply-compose-box { padding: 10px 14px; }
    .compose-header { gap: 10px; }
    .compose-form textarea { font-size: 16px; min-height: 50px; }
    .compose-footer { padding-top: 8px; }
    .compose-actions { gap: 10px; }
    .replies-header { padding: 12px 14px; }
    .replies-header h2 { font-size: 17px; }
    .reply-item { padding: 12px 14px; }
    .parent-tweet-container { padding: 14px; }
    .bookmarks-header { padding: 10px 14px; gap: 12px; }
    .bookmarks-header h1 { font-size: 18px; }
    .follow-item { padding: 12px 14px; }
    .follow-name { font-size: 15px; }
    .follow-avatar { width: 40px; height: 40px; }
    .follow-avatar img { width: 40px; height: 40px; }
    .notification-item { padding: 10px 14px; }
    .notification-avatar img, .notification-avatar div { width: 36px; height: 36px; }
    .notification-text { font-size: 14px; }
    .notification-time { font-size: 13px; }
    .premium-wrapper { padding: 14px 10px; gap: 18px; }
    .premium-card { padding: 24px 18px; border-radius: 14px; }
    .premium-card .card-header h2 { font-size: 1.15rem; }
    .premium-card .price-tag { font-size: 1.4rem; }
    .features-list li { padding: 10px; font-size: 0.92rem; }
    .buy-btn { padding: 12px; font-size: 1rem; }
    .legal-modal { width: 94%; max-height: 85vh; border-radius: 14px; }
    .legal-modal-header { padding: 14px 16px; }
    .legal-modal-body { padding: 16px; font-size: 13px; }
    .legal-modal-footer { padding: 12px 16px; }
    .interests-page { padding: 14px; }
    .interests-grid { gap: 8px; }
    .interest-card { padding: 12px; border-radius: 12px; }
    .interest-icon { font-size: 20px; }
    .interest-name { font-size: 13px; }
    .interests-actions { flex-direction: column; gap: 10px; }
    .interests-save-btn, .interests-cancel-btn { width: 100%; }
    .settings-section { padding: 16px; }
    .settings-section h2 { font-size: 16px; }
    .avatar-preview-container { width: 80px; height: 80px; }
    .cropper-container { max-width: 100%; max-height: 280px; }
    .crop-controls { flex-wrap: wrap; gap: 6px; }
    .crop-btn { padding: 9px 16px; font-size: 13px; flex: 1; }
    .flash-messages { top: 10px; left: 12px; right: 12px; transform: none; max-width: calc(100% - 24px); }
    .flash-message { font-size: 13px; padding: 10px 14px; }
    .verified-badge { width: 16px !important; height: 16px !important; }
    .verified-badge.vip { width: 18px !important; height: 18px !important; }
}

/* موبایل متوسط (640px و کمتر) — تنظیمات بیشتر برای iPhone و گوشی‌های کوچک */
@media (max-width: 640px) {
    .admin-login-container { margin: 30px 14px; padding: 28px 20px; }
    .admin-login-container h1 { font-size: 22px; }
    .admin-login-container .login-icon { width: 60px; height: 60px; font-size: 28px; }
    .admin-panel-wrapper { padding: 8px; }
    .admin-panel-header { padding: 12px 14px; border-radius: 12px; margin-bottom: 12px; gap: 10px; }
    .admin-panel-header h1 { font-size: 18px; }
    .admin-actions { width: 100%; justify-content: space-between; }
    .admin-btn { padding: 8px 14px; font-size: 13px; }
    .admin-table-header { padding: 12px 14px; }
    .admin-table-header h2 { font-size: 16px; }
    .admin-table th, .admin-table td { padding: 10px 6px; font-size: 12px; }
    .btn-action { padding: 5px 9px; font-size: 11px; }
    .btn-action-grant, .btn-action-revoke, .btn-action-vip { padding: 4px 8px; }
    .btn-action-suspend, .btn-action-unsuspend { padding: 4px 8px; }
    .user-result { padding: 12px 14px; gap: 10px; }
    .user-result .user-avatar { width: 42px; height: 42px; font-size: 20px; }
    .user-result .user-name { font-size: 14px; }
    .user-result .user-username { font-size: 13px; }
    .follow-btn-small { padding: 5px 14px; font-size: 12px; min-width: 80px; }
    .user-suspended-header { padding: 24px 14px 20px; }
    .user-suspended-avatar { width: 64px; height: 64px; font-size: 28px; margin-bottom: 12px; }
    .user-suspended-header h2 { font-size: 18px; }
    .user-suspended-reason-card, .user-suspended-help-card { margin: 14px; padding: 14px; }
    .delete-account-page { padding: 12px; }
    .delete-account-card { padding: 28px 20px; border-radius: 16px; }
    .delete-icon-wrapper { width: 70px; height: 70px; margin-bottom: 20px; }
    .delete-icon { font-size: 36px; }
    .delete-account-card h2 { font-size: 20px; }
    .delete-consequences li { font-size: 13px; padding: 10px 14px; }
    .delete-submit-btn { padding: 14px; font-size: 15px; }
    .suspended-card { padding: 28px 20px; }
    .suspended-icon-wrapper { width: 70px; height: 70px; margin-bottom: 20px; }
    .suspended-icon { font-size: 36px; }
    .suspended-card h2 { font-size: 20px; }
    .suspended-actions { flex-direction: column; }
    .suspended-back-btn, .suspended-home-btn { min-width: 100%; }
    .auth-container { padding: 14px; min-height: 100vh; }
    .auth-box { padding: 24px 20px; border-radius: 14px; }
    .auth-header h1 { font-size: 22px; }
    .auth-logo { font-size: 40px; }
    .form-group input { padding: 12px 14px; font-size: 15px; }
    .auth-btn { padding: 13px; font-size: 16px; }
    .interests-mini-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .interest-mini { padding: 8px 10px; font-size: 12px; }
    .terms-checkbox { margin: 10px 0; }
    .checkbox-label { font-size: 13px; }
    .pagination-container { padding: 12px 14px; }
    .pagination { font-size: 13px; gap: 8px; }
    .page-link { padding: 6px 12px; }
    .page-current { font-size: 12px; }
}

/* موبایل کوچک (480px و کمتر) — iPhone SE و مشابه */
@media (max-width: 480px) {
    .tweet-box { padding: 10px 12px; }
    .tweet-box-header { gap: 8px; }
    .user-avatar { width: 36px; height: 36px; min-width: 36px; min-height: 36px; font-size: 28px; }
    .tweet-form textarea { font-size: 16px; min-height: 40px; }
    .tweet-box-footer { padding-top: 8px; gap: 8px; flex-wrap: wrap; }
    .icon-btn { padding: 6px; font-size: 16px; }
    .tweet-btn { padding: 6px 16px; font-size: 13px; }
    .char-count { font-size: 12px; }
    .tweet { padding: 10px 12px; }
    .tweet-avatar { width: 36px; height: 36px; font-size: 28px; }
    .tweet-user-info { gap: 3px; font-size: 13px; }
    .tweet-name, .tweet-name-link { font-size: 14px; }
    .tweet-username, .tweet-time { font-size: 12px; }
    .tweet-content { margin-bottom: 8px; }
    .tweet-content p { font-size: 14px; line-height: 1.6; }
    .action-btn { font-size: 11px; padding: 4px 2px; min-height: 28px; gap: 3px; }
    .action-btn img.action-icon { width: 15px; height: 15px; }
    .action-btn-static img.action-icon { width: 15px; height: 15px; }
    .tweet-options { margin-left: 6px; }
    .options-btn { padding: 6px; }
    .options-icon { width: 20px; height: 20px; }
    .tweet-menu { min-width: 140px; }
    .tweet-menu button { padding: 10px 14px; font-size: 13px; }
    .page-title { padding: 8px 12px; }
    .page-title h1 { font-size: 16px; }
    .profile-header { padding: 14px 14px 14px 90px !important; }
    .profile-image-container { width: 70px; height: 70px; margin-bottom: 12px; }
    .profile-image, .profile-image-placeholder { width: 70px; height: 70px; }
    .profile-info h1 { font-size: 16px; }
    .profile-username { font-size: 13px; }
    .profile-bio { font-size: 13px; }
    .profile-meta { font-size: 12px; gap: 10px; }
    .profile-stats { padding: 10px 12px; gap: 12px; }
    .stat-number { font-size: 15px; }
    .stat-label { font-size: 11px; }
    .profile-tabs .tab { padding: 10px 4px; font-size: 13px; }
    .follow-btn { font-size: 13px; padding: 6px 16px; min-width: 86px; }
    .settings-section { padding: 12px; }
    .settings-form input, .settings-form textarea { padding: 10px; font-size: 14px; }
    .save-btn { padding: 10px 20px; font-size: 14px; }
    .flash-messages { top: 8px; }
    .modal-content { width: 96%; padding: 14px; }
    .modal-header h3 { font-size: 15px; }
    .modal-body textarea { font-size: 15px; padding: 10px; min-height: 80px; }
    .emoji-picker { width: calc(100vw - 24px); padding: 10px; }
    .emoji-grid { grid-template-columns: repeat(8, 1fr); }
    .guest-message { margin: 10px; padding: 16px 12px; }
    .guest-message .guest-icon { font-size: 32px; }
    .guest-message p { font-size: 13px; }
    .interests-grid { grid-template-columns: 1fr; }
    .interests-page { padding: 12px; }
    .interest-card { padding: 10px; }
    .auth-box { padding: 22px 16px; }
    .auth-header h1 { font-size: 20px; }
    .auth-btn { padding: 12px; font-size: 15px; }
    .hashtag-result-header h2 { font-size: 15px; }
    .result-count { font-size: 12px; }
    .trending-hero { padding: 20px 12px 16px; }
    .trending-fire { font-size: 32px; }
    .trending-hero h2 { font-size: 16px; }
    .trending-item { padding: 10px 12px; }
    .trending-rank { width: 30px; }
    .trending-tag { font-size: 13px; }
    .reply-item { padding: 10px 12px; }
    .parent-tweet-container { padding: 12px; }
    .compose-form textarea { font-size: 15px; }
    .follow-item { padding: 10px 12px; }
    .follow-name { font-size: 14px; }
    .follow-username { font-size: 12px; }
    .notification-item { padding: 8px 12px; }
    .notification-avatar img, .notification-avatar div { width: 32px; height: 32px; }
    .notification-text { font-size: 13px; }
    .pagination { flex-wrap: wrap; }
    .admin-login-container { margin: 20px 10px; padding: 24px 16px; }
    .admin-table th, .admin-table td { padding: 8px 4px; font-size: 11px; }
    .btn-action { padding: 4px 7px; font-size: 10px; }
    .admin-user-count { font-size: 11px; padding: 3px 8px; }
    .delete-account-card { padding: 22px 16px; }
    .suspended-card { padding: 22px 16px; }
    .suspended-card h2 { font-size: 18px; }
    .user-suspended-reason-card, .user-suspended-help-card { margin: 10px; padding: 12px; }
    .premium-card { padding: 20px 14px; }
    .premium-card .card-header h2 { font-size: 1.05rem; }
    .premium-card .price-tag { font-size: 1.2rem; }
    .features-list li { padding: 8px 10px; font-size: 0.88rem; }
}

/* موبایل خیلی کوچک (375px و کمتر) — iPhone SE 1st gen */
@media (max-width: 375px) {
    .tweet-box { padding: 8px 10px; }
    .tweet { padding: 8px 10px; }
    .action-btn span { font-size: 11px; }
    .profile-stats { gap: 8px; }
    .stat-link { font-size: 11px; }
    .emoji-grid { grid-template-columns: repeat(7, 1fr); }
    .modal-content { width: 98%; padding: 12px; }
}

/* تنظیمات safe area برای iPhone X به بعد */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-nav {
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }
}

/* بهینه‌سازی برای لمس (touch targets حداقل 44px) */
@media (hover: none) and (pointer: coarse) {
    .action-btn,
    .delete-btn,
    .follow-btn,
    .follow-btn-tweet,
    .follow-btn-small,
    .icon-btn,
    .mobile-nav-item,
    .tweet-options button {
        min-height: 44px;
    }
    .action-btn {
        padding: 10px 4px;
    }
}

/* ==================== صفحات تأیید ایمیل (verify_*) ==================== */
.verify-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 20px;
}
.verify-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color-strong);
    border-radius: 20px;
    padding: 40px 30px;
    max-width: 480px;
    width: 100%;
    text-align: center;
}
.verify-icon {
    font-size: 60px;
    margin-bottom: 16px;
}
.verify-card h2 {
    color: var(--text-primary);
    font-size: 22px;
    margin: 0;
}
.verify-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 16px 0 12px;
}
.verify-form {
    margin-top: 20px;
}
.verify-code-input {
    width: 100%;
    padding: 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color-strong);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 24px;
    text-align: center;
    letter-spacing: 8px;
    font-family: inherit;
    direction: ltr;
    margin-bottom: 20px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.verify-code-input:focus {
    border-color: #1d9bf0;
    outline: none;
    box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.15);
}
.verify-submit-btn {
    width: 100%;
    padding: 14px;
    background: #1d9bf0;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, transform 0.2s;
}
.verify-submit-btn:hover {
    background: #1a8cd8;
    transform: translateY(-1px);
}
.verify-actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.verify-resend-btn {
    background: transparent;
    color: #1d9bf0;
    padding: 10px;
    border-radius: 30px;
    border: 1px solid #1d9bf0;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s;
    font-size: 14px;
}
.verify-resend-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.verify-resend-btn:hover:not(:disabled) {
    background: rgba(29, 155, 240, 0.1);
}
.verify-logout-link {
    background: transparent;
    color: var(--text-secondary);
    padding: 10px;
    border-radius: 30px;
    text-decoration: none;
    border: 1px solid var(--border-color-strong);
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
    display: block;
}
.verify-logout-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    text-decoration: none;
}
.verify-timer-message {
    color: #ffd400;
    font-size: 13px;
    display: none;
    margin-top: 4px;
}
.verify-foot-note {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 20px;
}
.verify-success-icon {
    background: rgba(0, 186, 124, 0.1);
    color: #00ba7c;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
}
.verify-fail-icon {
    background: rgba(244, 33, 46, 0.1);
    color: #f4212e;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
}
@media (max-width: 480px) {
    .verify-page { padding: 14px; min-height: 90vh; }
    .verify-card { padding: 28px 20px; border-radius: 16px; }
    .verify-icon { font-size: 50px; }
    .verify-success-icon, .verify-fail-icon { width: 64px; height: 64px; font-size: 36px; }
    .verify-card h2 { font-size: 19px; }
    .verify-card p { font-size: 14px; margin: 14px 0 10px; }
    .verify-code-input { font-size: 22px; letter-spacing: 6px; padding: 12px; }
    .verify-submit-btn { padding: 12px; font-size: 15px; }
}

/* ==================== صفحه suspended (ساده) ==================== */
.suspended-page-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 20px;
}
.suspended-page-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color-strong);
    border-radius: 20px;
    padding: 40px 32px;
    max-width: 520px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.suspended-page-card h2 {
    color: var(--text-primary);
    font-size: 24px;
    margin: 0 0 16px;
}
.suspended-page-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 24px;
}
.suspended-page-card .suspended-actions-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
@media (max-width: 480px) {
    .suspended-page-wrapper { padding: 14px; min-height: 90vh; }
    .suspended-page-card { padding: 28px 20px; border-radius: 16px; }
    .suspended-page-card h2 { font-size: 20px; }
    .suspended-page-card p { font-size: 14px; }
    .suspended-page-card .suspended-actions-row { flex-direction: column; }
}

/* ==================== admin_suspend.html ==================== */
.admin-suspend-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 20px;
}
.admin-suspend-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color-strong);
    border-radius: 20px;
    padding: 40px 32px;
    max-width: 480px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.admin-suspend-card h2 {
    color: var(--text-primary);
    margin: 0 0 16px;
    text-align: center;
    font-size: 22px;
}
.admin-suspend-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 20px;
    text-align: center;
}
.admin-suspend-card label {
    display: block;
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 500;
}
.admin-suspend-card select,
.admin-suspend-card input[type="number"],
.admin-suspend-card input[type="text"],
.admin-suspend-card textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color-strong);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s;
    margin-bottom: 16px;
}
.admin-suspend-card textarea {
    min-height: 80px;
    resize: vertical;
}
.admin-suspend-card select:focus,
.admin-suspend-card input:focus,
.admin-suspend-card textarea:focus {
    border-color: #1d9bf0;
    outline: none;
    box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.15);
}
.admin-suspend-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #f4212e, #d91c28);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s;
    margin-top: 8px;
}
.admin-suspend-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(244, 33, 46, 0.4);
}
.admin-suspend-back {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    padding: 10px;
    border-radius: 12px;
    transition: all 0.2s;
}
.admin-suspend-back:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    text-decoration: none;
}
@media (max-width: 480px) {
    .admin-suspend-wrapper { padding: 14px; }
    .admin-suspend-card { padding: 28px 20px; border-radius: 16px; }
    .admin-suspend-card h2 { font-size: 19px; }
}

/* ==================== admin_user_content.html ==================== */
.admin-user-content-wrapper {
    max-width: 700px;
    margin: 20px auto;
    padding: 0 14px;
}
@media (max-width: 480px) {
    .admin-user-content-wrapper { padding: 0 10px; }
}

/* ==================== لاگین ادمین (ورود) ==================== */
.admin-login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}
@media (max-width: 480px) {
    .admin-login-page { padding: 14px; }
}

/* ==================== follow_list.html ==================== */
.follow-list-page {
    display: flex;
    flex-direction: column;
    min-height: 80vh;
}
.follow-list-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 50;
}
.follow-list-header .back-link {
    color: var(--text-primary);
    font-size: 20px;
    text-decoration: none;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}
.follow-list-header .back-link:hover {
    background-color: var(--bg-secondary);
    text-decoration: none;
}
.follow-list-header h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}
@media (max-width: 480px) {
    .follow-list-header { padding: 10px 14px; gap: 12px; }
    .follow-list-header h1 { font-size: 18px; }
}

/* ==================== notifications.html ==================== */
.notifications-page {
    display: flex;
    flex-direction: column;
    min-height: 80vh;
}
.notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 50;
}
.notifications-header h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}
@media (max-width: 480px) {
    .notifications-header { padding: 10px 14px; }
    .notifications-header h1 { font-size: 18px; }
}

/* ==================== interests.html ==================== */
@media (max-width: 768px) {
    .interest-card { padding: 12px; }
    .interest-icon { font-size: 22px; }
}
@media (max-width: 480px) {
    .interests-mini-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .interest-mini { padding: 8px 10px; font-size: 12px; }
}

/* ==================== settings.html ==================== */
.settings-page-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--bg-color);
    backdrop-filter: blur(12px);
    z-index: 50;
}
.settings-page-header h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}
@media (max-width: 480px) {
    .settings-page-header { padding: 12px 14px; }
    .settings-page-header h1 { font-size: 18px; }
}

/* ==================== buy_verified.html ==================== */
@media (max-width: 480px) {
    .premium-wrapper { padding: 10px 8px; }
    .verified-icon-wrapper { width: 60px; height: 60px; }
    .verified-icon-wrapper img { width: 36px; height: 36px; }
}

/* ==================== email_verification.html (برای ایمیل) ==================== */
.email-template-wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}
@media (max-width: 480px) {
    .email-template-wrapper { padding: 16px; }
}

/* ==================== base.html - رفع padding در حالت admin-full موبایل ==================== */
@media (max-width: 768px) {
    .main-content.admin-full {
        padding: 12px;
    }
    .admin-panel-wrapper {
        padding: 8px !important;
    }
}
/* ==================== پنل ادمین ==================== */

/* ========== صفحه ورود ادمین ========== */
.admin-login-container {
    max-width: 420px;
    margin: 80px auto;
    padding: 40px 30px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color-strong);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    text-align: center;
}
.admin-login-container h1 {
    font-size: 24px; color: var(--text-primary); margin-bottom: 8px; font-weight: 800;
}
.admin-login-container .admin-subtitle { color: var(--text-secondary); font-size: 14px; margin-bottom: 28px; }
.admin-login-container .login-icon {
    width: 70px; height: 70px; background: linear-gradient(135deg, #1d9bf0, #7856ff);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px; font-size: 32px; box-shadow: 0 4px 12px rgba(29, 155, 240, 0.3);
}
.admin-login-container form { display: flex; flex-direction: column; gap: 16px; }
.admin-login-container .input-group { text-align: right; }
.admin-login-container .input-group label { display: block; color: var(--text-secondary); font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.admin-login-container .input-wrapper { position: relative; }
.admin-login-container .input-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #536471; font-size: 16px; transition: color 0.2s; }
.admin-login-container input[type="password"] {
    width: 100%; padding: 14px 40px 14px 16px; background: var(--bg-tertiary);
    border: 1px solid var(--border-color-strong); border-radius: 12px; color: var(--text-primary);
    font-size: 15px; font-family: 'Vazir', Tahoma, sans-serif; transition: all 0.2s;
    direction: ltr; letter-spacing: 4px;
}
.admin-login-container input[type="password"]::placeholder { color: #536471; letter-spacing: 0; }
.admin-login-container input[type="password"]:focus {
    border-color: #1d9bf0; outline: none; box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.15); background: var(--bg-secondary);
}
.admin-login-container input[type="password"]:focus ~ .input-icon,
.admin-login-container input[type="password"]:focus + .input-icon { color: #1d9bf0; }
.admin-login-container .admin-login-btn {
    width: 100%; padding: 14px; background: linear-gradient(135deg, #1d9bf0, #0d8bd9);
    color: white; border: none; border-radius: 30px; font-size: 16px; font-weight: 700;
    cursor: pointer; transition: all 0.2s; margin-top: 8px; font-family: 'Vazir', Tahoma, sans-serif;
}
.admin-login-container .admin-login-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(29, 155, 240, 0.4); }
.admin-login-container .admin-login-btn:active { transform: translateY(0); }
.admin-login-container .back-home { display: inline-block; margin-top: 20px; color: var(--text-secondary); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.admin-login-container .back-home:hover { color: #1d9bf0; text-decoration: none; }
.admin-login-container .admin-shield { font-size: 48px; margin-bottom: 16px; display: block; }

/* ========== پنل مدیریت (لیست کاربران) ========== */
.admin-panel-wrapper { padding: 20px; }
.admin-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; background: var(--bg-secondary); border: 1px solid var(--border-color-strong);
    border-radius: 16px; margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.admin-panel-header h1 { font-size: 22px; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: 10px; }
.admin-panel-header .admin-badge { background: linear-gradient(135deg, #1d9bf0, #0d8bd9); color: white; font-size: 12px; padding: 4px 12px; border-radius: 20px; font-weight: 600; }
.admin-actions { display: flex; gap: 10px; align-items: center; }
.admin-btn {
    padding: 10px 20px; border-radius: 25px; font-size: 14px; font-weight: 600;
    cursor: pointer; text-decoration: none; transition: all 0.2s;
    font-family: 'Vazir', Tahoma, sans-serif; border: none; display: inline-flex; align-items: center; gap: 6px;
}
.admin-btn-logout { background: #f4212e; color: white; }
.admin-btn-logout:hover { background: #d91c28; text-decoration: none; }
.admin-btn-refresh { background: transparent; border: 1px solid var(--border-color-strong); color: var(--text-primary); }
.admin-btn-refresh:hover { background: var(--bg-tertiary); text-decoration: none; }

/* ========== جدول کاربران ========== */
.admin-table-container { background: var(--bg-secondary); border: 1px solid var(--border-color-strong); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); }
.admin-table-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color-strong); display: flex; justify-content: space-between; align-items: center; }
.admin-table-header h2 { font-size: 18px; color: var(--text-primary); margin: 0; font-weight: 700; }
.admin-user-count { background: var(--bg-tertiary); color: var(--text-secondary); padding: 4px 12px; border-radius: 20px; font-size: 13px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table thead { background: var(--bg-tertiary); }
.admin-table th { padding: 14px 16px; text-align: center; color: #8899a6; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--border-color-strong); white-space: nowrap; color: var(--text-secondary); }
.admin-table td { padding: 14px 16px; text-align: center; color: var(--text-primary); border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.admin-table tbody tr { transition: background 0.2s; }
.admin-table tbody tr:hover { background: var(--bg-hover); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table .user-id { color: #536471; font-size: 12px; font-weight: 500; }
.admin-table .user-name-cell { font-weight: 700; color: var(--text-primary); }
.admin-table .user-username-cell { color: var(--text-secondary); direction: ltr; display: inline-block; }
.status-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; }
.status-badge.active { background: rgba(0, 186, 124, 0.15); color: #00ba7c; }
.status-badge.inactive { background: rgba(244, 33, 46, 0.1); color: #f4212e; font-size: 18px; }
.admin-table .actions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.btn-action { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; border: none; transition: all 0.2s; font-family: 'Vazir', Tahoma, sans-serif; white-space: nowrap; }
.btn-action-grant { background: rgba(29, 155, 240, 0.15); color: #1d9bf0; border: 1px solid rgba(29, 155, 240, 0.3); }
.btn-action-grant:hover { background: #1d9bf0; color: white; text-decoration: none; }
.btn-action-revoke { background: rgba(244, 33, 46, 0.1); color: #f4212e; border: 1px solid rgba(244, 33, 46, 0.3); }
.btn-action-revoke:hover { background: #f4212e; color: white; text-decoration: none; }
.btn-action-vip { background: rgba(120, 86, 255, 0.15); color: #7856ff; border: 1px solid rgba(120, 86, 255, 0.3); }
.btn-action-vip:hover { background: #7856ff; color: white; text-decoration: none; }
@media (max-width: 900px) {
    .admin-table-container { overflow-x: auto; }
    .admin-table { min-width: 700px; }
    .admin-panel-header { flex-direction: column; align-items: flex-start; }
    .admin-actions { width: 100%; justify-content: flex-end; }
}
@media (max-width: 600px) {
    .admin-login-container { margin: 40px 16px; padding: 30px 20px; }
    .admin-panel-wrapper { padding: 10px; }
    .admin-table th, .admin-table td { padding: 10px 8px; font-size: 12px; }
    .btn-action { padding: 5px 10px; font-size: 11px; }
}
@keyframes adminFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.admin-login-container { animation: adminFadeIn 0.4s ease-out; }
.admin-table-container { animation: adminFadeIn 0.3s ease-out; }

/* ==================== باکس مهمان (Guest Message) ==================== */
.guest-message {
    padding: 20px 16px; border-bottom: 1px solid var(--border-color); text-align: center;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-radius: 16px; margin: 16px; position: relative; overflow: hidden;
}
.guest-message::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, #1d9bf0, #7856ff, #1d9bf0);
    background-size: 200% 100%; animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.guest-message .guest-icon { display: block; font-size: 40px; margin-bottom: 12px; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } }
.guest-message p { color: var(--text-secondary); font-size: 15px; line-height: 1.8; margin: 0; }
.guest-message a {
    color: #1d9bf0; font-weight: 700; text-decoration: none; padding: 6px 16px;
    border-radius: 20px; transition: all 0.2s; display: inline-block; position: relative;
}
.guest-message a:hover { background: rgba(29, 155, 240, 0.15); color: var(--text-primary); text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(29, 155, 240, 0.2); }
.guest-message .guest-subtitle { display: block; color: #536471; font-size: 13px; margin-top: 8px; }

/* ==================== استایل لینک‌های قوانین ==================== */
.terms-link {
    color: #1d9bf0; text-decoration: none; font-weight: 600; position: relative;
    padding: 2px 4px; transition: all 0.2s; border-bottom: 1px dashed transparent;
}
.terms-link:hover { color: #4da3ff; border-bottom-color: #1d9bf0; text-decoration: none; }
.terms-link:active { transform: scale(0.95); }

/* ==================== مودال نمایش قوانین ==================== */
.legal-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); z-index: 2000; justify-content: center; align-items: center;
}
.legal-modal-overlay.active { display: flex; }
.legal-modal {
    background: var(--bg-secondary); border: 1px solid var(--border-color-strong); border-radius: 16px;
    width: 90%; max-width: 600px; max-height: 80vh; display: flex; flex-direction: column;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); animation: modalSlideUp 0.3s ease;
}
@keyframes modalSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.legal-modal-header {
    display: flex; justify-content: space-between; align-items: center; padding: 20px;
    border-bottom: 1px solid var(--border-color-strong); background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    border-radius: 16px 16px 0 0;
}
.legal-modal-header h2 { margin: 0; font-size: 18px; color: var(--text-primary); }
.legal-modal-close { background: transparent; border: none; color: var(--text-secondary); font-size: 24px; cursor: pointer; padding: 8px; border-radius: 50%; transition: all 0.2s; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.legal-modal-close:hover { background: rgba(244, 33, 46, 0.15); color: #f4212e; }
.legal-modal-body { padding: 20px; overflow-y: auto; flex: 1; color: var(--text-primary); font-size: 14px; line-height: 1.8; }
.legal-modal-body h3 { color: var(--text-primary); font-size: 16px; margin: 20px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color-strong); }
.legal-modal-body h3:first-child { margin-top: 0; }
.legal-modal-body h4 { color: #1d9bf0; font-size: 14px; margin: 16px 0 8px; }
.legal-modal-body ul { padding-right: 20px; margin: 8px 0; }
.legal-modal-body li { margin: 6px 0; color: var(--text-secondary); }
.legal-modal-footer { padding: 16px 20px; border-top: 1px solid var(--border-color-strong); display: flex; justify-content: flex-end; }
.legal-modal-btn {
    background: #1d9bf0; color: white; border: none; padding: 10px 24px;
    border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: 600;
    transition: all 0.2s; font-family: 'Vazir', Tahoma, sans-serif;
}
.legal-modal-btn:hover { background: #1a8cd8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(29, 155, 240, 0.3); }

/* ==================== صفحه بوکمارک‌ها (نشان‌ها) ==================== */
.bookmarks-header {
    display: flex; align-items: center; gap: 16px; padding: 12px 16px;
    border-bottom: 1px solid var(--border-color); background: var(--bg-color);
    backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 50;
}
.bookmarks-header .back-link { color: var(--text-primary); font-size: 20px; text-decoration: none; padding: 8px; border-radius: 50%; transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; }
.bookmarks-header .back-link:hover { background-color: var(--bg-secondary); text-decoration: none; }
.bookmarks-header h1 { font-size: 20px; font-weight: 700; margin: 0; color: var(--text-primary); }
.bookmark-remove-btn { background: transparent; border: none; cursor: pointer; padding: 10px; border-radius: 50%; transition: all 0.2s; display: flex; align-items: center; justify-content: center; position: relative; }
.bookmark-remove-btn:hover { background: rgba(29, 155, 240, 0.1); }
.bookmark-remove-btn .bookmark-icon { width: 20px; height: 20px; opacity: 0.85; transition: all 0.3s; }
.bookmark-remove-btn .bookmark-icon.saved { opacity: 1; }
.bookmark-remove-btn:hover .bookmark-icon { opacity: 1; animation: bookmarkShake 0.4s ease; }
@keyframes bookmarkShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.tweet.removing { transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; transform: translateX(-60px) scale(0.95); max-height: 0; padding: 0 16px; margin: 0; border: none; overflow: hidden; }

/* ==================== حالت خالی (Empty State) عمومی ==================== */
.no-tweets, .no-replies, .no-likes, .no-results, .no-notifications, .no-bookmarks, .no-followers, .no-following {
    display: flex; justify-content: center; align-items: center; min-height: 400px; padding: 40px 20px; text-align: center;
}
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 380px; margin: 0 auto; animation: fadeInUp 0.5s ease; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.empty-state-icon-wrapper { width: 100px; height: 100px; margin-bottom: 24px; background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%); border: 1px solid var(--border-color-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: float 3s ease-in-out infinite; position: relative; }
.empty-state-icon-wrapper::after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: #1d9bf0; animation: spin 3s linear infinite; opacity: 0.3; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state-icon { font-size: 48px; display: block; position: relative; z-index: 1; }
.empty-state h2, .empty-state h3 { color: var(--text-primary); font-size: 22px; font-weight: 800; margin: 0 0 12px 0; line-height: 1.3; }
.empty-state p { color: var(--text-secondary); font-size: 15px; line-height: 1.7; margin: 0 0 28px 0; max-width: 340px; }
.empty-state .action-btn-empty { display: inline-flex; align-items: center; gap: 8px; background: #1d9bf0; color: white; padding: 12px 28px; border-radius: 30px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(29, 155, 240, 0.3); border: none; cursor: pointer; font-family: inherit; }
.empty-state .action-btn-empty:hover { background: #1a8cd8; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(29, 155, 240, 0.4); text-decoration: none; color: white; }

/* ==================== صفحه پاسخ (Reply) ==================== */
.parent-tweet-container { padding: 16px; border-bottom: 1px solid var(--border-color); }
.tweet-time-full { margin-top: 12px; color: var(--text-secondary); font-size: 14px; border-top: 1px solid var(--border-color); padding-top: 12px; }
.reply-compose-box { padding: 12px 16px; border-bottom: 1px solid var(--border-color); }
.compose-header { display: flex; gap: 12px; }
.compose-form { flex: 1; position: relative; }
.compose-form textarea { width: 100%; background: transparent; border: none; color: var(--text-primary); font-size: 19px; resize: none; min-height: 60px; margin-bottom: 8px; font-family: var(--font-family); }
.compose-form textarea::placeholder { color: var(--text-muted); }
.compose-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-color); padding-top: 10px; }
.compose-tools { display: flex; gap: 4px; }
.compose-actions { display: flex; align-items: center; gap: 14px; }
.replies-section { border-top: 1px solid var(--border-color); }
.replies-header { padding: 14px 16px; border-bottom: 1px solid var(--border-color); background: var(--bg-color); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; }
.replies-header h2 { font-size: 19px; font-weight: 700; margin: 0; color: var(--text-primary); }
.reply-item { padding: 14px 16px; border-bottom: 1px solid var(--border-color); transition: background 0.2s; }
.reply-item:hover { background-color: var(--bg-hover); }
.no-replies { display: flex; justify-content: center; align-items: center; min-height: 250px; }
.action-btn-static.action-btn-reply, .action-btn-static.action-btn-view { display: flex; align-items: center; gap: 4px; padding: 8px 12px; color: var(--text-secondary); font-size: 13px; border-radius: 50px; transition: background 0.2s; }
.action-btn-static.action-btn-reply:hover, .action-btn-static.action-btn-view:hover { background-color: var(--accent-bg); color: var(--accent-color); }

/* ==================== رفع قطعی فاصله در تب "همه" جستجو ==================== */
#searchResultsContainer.all-tab .search-section .no-results {
    padding: 8px 16px !important;
    margin: 0 !important;
    font-size: 13px !important;
    min-height: auto !important;
}
#searchResultsContainer.all-tab .search-section {
    padding: 0 !important;
    margin: 0 !important;
}
#searchResultsContainer.all-tab .search-section h2 {
    padding: 6px 16px !important;
    font-size: 14px !important;
    margin: 0 !important;
}
#searchResultsContainer.all-tab #tweets-section:only-child,
#searchResultsContainer.all-tab #tweets-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
#searchResultsContainer.all-tab #users-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==================== بهبود فاصله و خوانایی توییت ==================== */

/* افزایش فاصله بین هدر توییت و متن */
.tweet-content {
    margin-top: 6px;
    padding-top: 4px;
}

/* خط جداکننده ظریف بین هدر و محتوا */
.tweet-header {
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(47, 51, 54, 0.3);
}

/* بهتر شدن فاصله خطوط متن توییت */
.tweet-content p {
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: 0.2px;
}

/* ==================== لینک‌های منشن و هشتگ آبی ==================== */

/* منشن‌ها */
a.mention-link {
    color: #1d9bf0 !important;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

a.mention-link:hover {
    text-decoration: underline !important;
    color: #4da3ff !important;
}

/* هشتگ‌ها (که قبلاً با فیلتر linkify_hashtags ساخته می‌شن) */
a.hashtag-link {
    color: #1d9bf0 !important;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

a.hashtag-link:hover {
    text-decoration: underline !important;
    color: #4da3ff !important;
}

/* ==================== لینک منشن ==================== */
/* (تعریف در بالا) */

/* ==================== تبلیغات موبایل ==================== */
.mobile-ad-bar {
    display: none;
    position: fixed;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 16px;
    z-index: 999;
}

.mobile-ad-content {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 600px;
    margin: 0 auto;
    text-decoration: none;
}

.mobile-ad-image {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-color-strong);
}

.mobile-ad-info {
    flex: 1;
    min-width: 0;
}

.mobile-ad-title {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-ad-url {
    color: var(--text-secondary);
    font-size: 11px;
    direction: ltr;
    text-align: right;
}

.mobile-ad-badge {
    background: #f4212e;
    color: white;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    flex-shrink: 0;
}

.mobile-ad-close {
    background: transparent;
    border: none;
    color: #536471;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 8px;
}

.mobile-ad-close:hover {
    background: rgba(244, 33, 46, 0.1);
    color: #f4212e;
}

/* ==================== دکمه حذف حساب در تنظیمات ==================== */
.delete-account-link {
    flex: 1;
    min-width: 180px;
    padding: 14px;
    background: transparent;
    border: 1px solid #f4212e;
    color: #f4212e;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.2s;
    display: block;
}

.delete-account-link:hover {
    background: rgba(244, 33, 46, 0.1);
    text-decoration: none;
    color: #ff4d4d;
}

.logout-btn-settings {
    flex: 1;
    min-width: 180px;
    padding: 14px;
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-primary);
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.2s;
    display: block;
}

.logout-btn-settings:hover {
    background: rgba(231, 233, 234, 0.1);
    text-decoration: none;
}

/* ==================== صفحه حذف حساب ==================== */
.delete-account-page {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 100px);
}

.delete-account-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color-strong);
    border-radius: 20px;
    padding: 40px 32px;
    max-width: 520px;
    width: 100%;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    animation: deleteCardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

@keyframes deleteCardIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* خط بالای کارت */
.delete-account-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f4212e, #ff6b6b, #f4212e);
    background-size: 200% 100%;
    animation: deleteShimmer 2s ease-in-out infinite;
}

@keyframes deleteShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* آیکون هشدار */
.delete-icon-wrapper {
    width: 90px;
    height: 90px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, rgba(244, 33, 46, 0.1) 0%, rgba(244, 33, 46, 0.05) 100%);
    border: 2px solid rgba(244, 33, 46, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: deletePulse 2s ease-in-out infinite;
}

@keyframes deletePulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(244, 33, 46, 0.2);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(244, 33, 46, 0);
    }
}

.delete-icon {
    font-size: 44px;
    animation: deleteShake 3s ease-in-out infinite;
}

@keyframes deleteShake {
    0%, 90%, 100% { transform: rotate(0); }
    92% { transform: rotate(-8deg); }
    94% { transform: rotate(8deg); }
    96% { transform: rotate(-5deg); }
    98% { transform: rotate(5deg); }
}

/* عنوان */
.delete-account-card h2 {
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 8px 0;
}

.delete-account-card .delete-warning-label {
    display: inline-block;
    background: rgba(244, 33, 46, 0.15);
    color: #f4212e;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* توضیحات */
.delete-description {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 24px 0;
}

.delete-description strong {
    color: #ff6b6b;
    font-weight: 700;
}

/* لیست عواقب */
.delete-consequences {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    text-align: right;
    background: rgba(244, 33, 46, 0.04);
    border: 1px solid rgba(244, 33, 46, 0.1);
    border-radius: 14px;
    overflow: hidden;
}

.delete-consequences li {
    color: var(--text-primary);
    font-size: 14px;
    padding: 12px 16px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(56, 68, 77, 0.3);
}

.delete-consequences li:last-child {
    border-bottom: none;
}

.delete-consequences li:hover {
    background: rgba(244, 33, 46, 0.06);
    padding-right: 22px;
}

.delete-consequences li .consequence-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

/* فرم */
.delete-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.delete-form .form-group {
    text-align: right;
}

.delete-form .form-group label {
    display: block;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

.delete-form .password-input-wrapper {
    position: relative;
}

.delete-form .password-input-wrapper .lock-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #536471;
    font-size: 18px;
    transition: color 0.2s;
    pointer-events: none;
}

.delete-form input[type="password"] {
    width: 100%;
    padding: 16px 48px 16px 16px;
    background: var(--bg-color);
    border: 1.5px solid var(--border-color-strong);
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 16px;
    font-family: 'Vazir', Tahoma, sans-serif;
    transition: all 0.3s;
    letter-spacing: 3px;
    direction: ltr;
}

.delete-form input[type="password"]::placeholder {
    color: #536471;
    letter-spacing: 0;
}

.delete-form input[type="password"]:focus {
    border-color: #f4212e;
    outline: none;
    box-shadow: 0 0 0 4px rgba(244, 33, 46, 0.1), 0 4px 16px rgba(244, 33, 46, 0.1);
}

.delete-form input[type="password"]:focus ~ .lock-icon {
    color: #f4212e;
}

/* دکمه‌ها */
.delete-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.delete-submit-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #f4212e 0%, #d91c28 100%);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Vazir', Tahoma, sans-serif;
    position: relative;
    overflow: hidden;
}

.delete-submit-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.delete-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(244, 33, 46, 0.4);
    background: linear-gradient(135deg, #ff3344 0%, #e01c2e 100%);
}

.delete-submit-btn:hover::after {
    width: 600px;
    height: 600px;
}

.delete-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(244, 33, 46, 0.3);
}

.cancel-delete-btn {
    display: block;
    width: 100%;
    padding: 14px;
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-color-strong);
    border-radius: 16px;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s;
}

.cancel-delete-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: #536471;
    text-decoration: none;
    transform: translateY(-1px);
}

.cancel-delete-btn:active {
    transform: translateY(0);
}

/* پیام امنیتی */
.delete-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    color: #536471;
    font-size: 12px;
}

.delete-security-note .shield-icon {
    font-size: 14px;
}

/* ریسپانسیو */
@media (max-width: 600px) {
    .delete-account-page {
        padding: 10px;
    }
    
    .delete-account-card {
        padding: 28px 20px;
        border-radius: 16px;
    }
    
    .delete-icon-wrapper {
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
    }
    
    .delete-icon {
        font-size: 36px;
    }
    
    .delete-account-card h2 {
        font-size: 20px;
    }
    
    .delete-consequences li {
        font-size: 13px;
        padding: 10px 14px;
    }
    
    .delete-submit-btn {
        padding: 14px;
        font-size: 15px;
    }
}

.btn-action-suspend {
    background: rgba(255, 212, 0, 0.1);
    color: #ffd400;
    border: 1px solid rgba(255, 212, 0, 0.3);
}

.btn-action-suspend:hover {
    background: #ffd400;
    color: #000;
}

.btn-action-unsuspend {
    background: rgba(0, 186, 124, 0.1);
    color: #00ba7c;
    border: 1px solid rgba(0, 186, 124, 0.3);
}

.btn-action-unsuspend:hover {
    background: #00ba7c;
    color: white;
}

.status-badge.suspended {
    background: rgba(255, 212, 0, 0.15);
    color: #ffd400;
}

/* ==================== صفحه تعلیق (suspended.html) ==================== */
.suspended-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    background: radial-gradient(ellipse at center, rgba(255, 212, 0, 0.03) 0%, transparent 70%);
}

.suspended-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color-strong);
    border-radius: 20px;
    padding: 40px 32px;
    max-width: 520px;
    width: 100%;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 212, 0, 0.1);
    animation: suspendedCardIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

@keyframes suspendedCardIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* خط بالای کارت - زرد */
.suspended-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffd400, #ff8c00, #ffd400);
    background-size: 200% 100%;
    animation: suspendedShimmer 2s ease-in-out infinite;
}

@keyframes suspendedShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* آیکون */
.suspended-icon-wrapper {
    width: 90px;
    height: 90px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, rgba(255, 212, 0, 0.1) 0%, rgba(255, 140, 0, 0.05) 100%);
    border: 2px solid rgba(255, 212, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: suspendedPulse 2s ease-in-out infinite;
}

@keyframes suspendedPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 212, 0, 0.2);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(255, 212, 0, 0);
    }
}

.suspended-icon {
    font-size: 44px;
    animation: suspendedShake 3s ease-in-out infinite;
}

@keyframes suspendedShake {
    0%, 90%, 100% { transform: rotate(0); }
    92% { transform: rotate(-8deg); }
    94% { transform: rotate(8deg); }
    96% { transform: rotate(-5deg); }
    98% { transform: rotate(5deg); }
}

/* عنوان */
.suspended-card h2 {
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 8px 0;
}

.suspended-card h2.suspended-username {
    font-size: 20px;
    color: #ffd400;
    direction: ltr;
}

.suspended-badge {
    display: inline-block;
    background: rgba(255, 212, 0, 0.15);
    color: #ffd400;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* توضیحات */
.suspended-description {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 24px 0;
}

/* باکس دلیل */
.suspended-reason-box {
    background: rgba(255, 212, 0, 0.05);
    border: 1px solid rgba(255, 212, 0, 0.15);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
    text-align: right;
}

.suspended-reason-box h4 {
    color: #ffd400;
    font-size: 14px;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.suspended-reason-box p {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* تاریخ */
.suspended-date {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* باکس راهنما */
.suspended-info-box {
    background: rgba(29, 155, 240, 0.05);
    border: 1px solid rgba(29, 155, 240, 0.1);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 24px;
}

.suspended-info-box p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* دکمه‌ها */
.suspended-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.suspended-back-btn,
.suspended-home-btn,
.suspended-logout-btn {
    flex: 1;
    min-width: 140px;
    padding: 12px 20px;
    border-radius: 14px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s;
}

.suspended-back-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color-strong);
}

.suspended-back-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    text-decoration: none;
    border-color: #536471;
}

.suspended-home-btn {
    background: #1d9bf0;
    color: white;
    border: none;
}

.suspended-home-btn:hover {
    background: #1a8cd8;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 155, 240, 0.3);
}

/* رسپانسیو */
@media (max-width: 600px) {
    .suspended-card {
        padding: 28px 20px;
    }
    
    .suspended-icon-wrapper {
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
    }
    
    .suspended-icon {
        font-size: 36px;
    }
    
    .suspended-card h2 {
        font-size: 20px;
    }
    
    .suspended-actions {
        flex-direction: column;
    }
    
    .suspended-back-btn,
    .suspended-home-btn {
        min-width: 100%;
    }
}

/* ==================== پروفایل کاربر تعلیق شده (user_suspended.html) ==================== */
.user-suspended-page {
    min-height: 100vh;
    background: var(--bg-color);
}

/* هدر پروفایل کاربر تعلیق شده */
.user-suspended-header {
    background: linear-gradient(180deg, rgba(255, 212, 0, 0.08) 0%, transparent 100%);
    padding: 40px 20px 30px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.user-suspended-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd400, transparent);
}

.user-suspended-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, rgba(255, 212, 0, 0.1), rgba(255, 140, 0, 0.05));
    border: 2px solid rgba(255, 212, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    opacity: 0.7;
    position: relative;
}

.user-suspended-avatar::after {
    content: '🚫';
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 20px;
    background: var(--bg-secondary);
    border-radius: 50%;
    padding: 2px;
}

.user-suspended-header h2 {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.user-suspended-username {
    color: #ffd400;
    font-size: 14px;
    direction: ltr;
    display: block;
    margin-bottom: 12px;
}

.user-suspended-badge {
    display: inline-block;
    background: rgba(255, 212, 0, 0.15);
    color: #ffd400;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* کارت دلیل */
.user-suspended-reason-card {
    margin: 20px;
    background: rgba(255, 212, 0, 0.04);
    border: 1px solid rgba(255, 212, 0, 0.12);
    border-radius: 12px;
    padding: 16px;
}

.user-suspended-reason-card h3 {
    color: #ffd400;
    font-size: 14px;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-suspended-reason-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* کارت راهنما */
.user-suspended-help-card {
    margin: 20px;
    background: rgba(29, 155, 240, 0.05);
    border: 1px solid rgba(29, 155, 240, 0.1);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.user-suspended-help-card p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.user-suspended-help-card .back-home-btn {
    display: inline-block;
    padding: 8px 20px;
    background: #1d9bf0;
    color: white;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}

.user-suspended-help-card .back-home-btn:hover {
    background: #1a8cd8;
    text-decoration: none;
    transform: translateY(-1px);
}

/* رسپانسیو */
@media (max-width: 600px) {
    .user-suspended-header {
        padding: 30px 16px 24px;
    }
    
    .user-suspended-avatar {
        width: 64px;
        height: 64px;
        font-size: 28px;
        margin-bottom: 12px;
    }
    
    .user-suspended-header h2 {
        font-size: 18px;
    }
}

/* ==================== ساختار اصلی ==================== */
body {
    background-color: var(--bg-page);
    color: var(--text-primary);
}

.main-content {
    margin-right: 275px;
    max-width: 600px;
    min-height: 100vh;
    border-right: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    background: var(--bg-color);
}

/* ==================== پنل ادمین فول واید ==================== */
.main-content.admin-full,
.main-content.full-width {
    max-width: calc(100% - 275px);
    width: calc(100% - 275px);
    margin-right: 275px;
    margin-left: 0;
    border-left: none;
    border-right: none;
}

/* ==================== علاقه‌مندی‌ها در ثبت‌نام ==================== */
.interests-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 4px;
}

.interest-mini {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color-strong);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.2s;
    text-align: right;
}

.interest-mini:hover {
    border-color: #1d9bf0;
    background: rgba(29, 155, 240, 0.05);
}

.interest-mini:has(input:checked) {
    border-color: #1d9bf0;
    background: rgba(29, 155, 240, 0.1);
    color: #1d9bf0;
    font-weight: 600;
}

.interest-mini input[type="checkbox"] {
    display: none;
}

/* ==================== بخش علاقه‌مندی‌ها در تنظیمات ==================== */
.interests-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.interests-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.interest-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color-strong);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.interest-card:hover {
    border-color: #1d9bf0;
    background: rgba(29, 155, 240, 0.05);
}

.interest-card.selected {
    border-color: #1d9bf0;
    background: rgba(29, 155, 240, 0.1);
}

.interest-card input[type="checkbox"] {
    display: none;
}

.interest-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.interest-name {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    flex: 1;
}

.interest-check {
    color: #1d9bf0;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

/* دکمه ذخیره و انصراف */
.interests-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.interests-save-btn {
    flex: 1;
    background-color: #1d9bf0;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.2s;
}

.interests-save-btn:hover {
    background-color: #1a8cd8;
}

.interests-cancel-btn {
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--border-color-strong);
    color: var(--text-secondary);
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.interests-cancel-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: #536471;
    text-decoration: none;
}

/* توضیحات بالای صفحه */
.interests-description {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.interests-description small {
    color: #536471;
    font-size: 12px;
}

/* ریسپانسیو */
@media (max-width: 480px) {
    .interests-grid {
        grid-template-columns: 1fr;
    }
    
    .interests-page {
        padding: 15px;
    }
}

/* ==================== پنل محتوای کاربر (ادمین) ==================== */
.admin-tab {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}
.admin-tab.active {
    color: #1d9bf0;
    border-bottom-color: #1d9bf0;
    font-weight: 600;
}
.admin-tweet-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color-strong);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
}
.admin-tweet-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}
.admin-tweet-body {
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 12px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.admin-tweet-actions {
    display: flex;
    gap: 8px;
}
.admin-btn-edit, .admin-btn-delete {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
}
.admin-btn-edit {
    background: rgba(29,155,240,0.15);
    color: #1d9bf0;
    border: 1px solid rgba(29,155,240,0.3);
}
.admin-btn-edit:hover { background: #1d9bf0; color: white; }
.admin-btn-delete {
    background: rgba(244,33,46,0.1);
    color: #f4212e;
    border: 1px solid rgba(244,33,46,0.3);
}
.admin-btn-delete:hover { background: #f4212e; color: white; }

/* مودال ویرایش */
#edit-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
#edit-modal .modal-content {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    padding: 20px;
}
#edit-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
#edit-modal .modal-header h3 {
    margin: 0;
    color: var(--text-primary);
}
#edit-modal .close-modal {
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.2s;
    font-size: 20px;
    line-height: 1;
}
#edit-modal .close-modal:hover {
    background: rgba(231,233,234,0.1);
}
#edit-modal textarea {
    width: 100%;
    min-height: 120px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.5;
    resize: none;
    outline: none;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-family: inherit;
}
#edit-modal textarea:focus {
    border-color: #1d9bf0;
}

/* ==================== استایل‌های مودال (پاپ‌آپ راهنمای پرداخت) ==================== */

/* لایه‌ی پس‌زمینه‌ی تیره‌ی نیمه‌شفاف */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

/* کارت اصلی مودال */
.modal-content {
    background: var(--bg-secondary) !important;   /* خاکستری تیره */
    padding: 30px;
    border-radius: 16px;
    max-width: 380px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    color: #ffffff !important;        /* متن سفید */
}

/* پاراگراف داخل مودال */
.modal-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 25px;
    color: #ffffff !important;        /* متن سفید */
}

/* دکمه‌ی لینک به درگاه پرداخت */
.modal-donate-link {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(135deg, #1da1f2, #0d8bd9);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    transition: background 0.2s;
}

.modal-donate-link:hover {
    background: #0d8bd9;
}

/* دکمه‌ی بستن (ضربدر) */
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #aaaaaa;                    /* خاکستری روشن برای دیده شدن */
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

/* نسخه‌ی دارک مود (کمی تیره‌تر در صورت تمایل) */
@media (prefers-color-scheme: dark) {
    .modal-content {
        background: var(--bg-secondary) !important;   /* تیره‌تر از قبل */
    }

    .modal-close {
        color: #999999;
    }

    .modal-close:hover {
        color: #ffffff;
    }
}

/* ==================== کارت توضیحات (info-card) ==================== */
.info-card {
    background: var(--bg-secondary) !important;      /* خاکستری تیره، هماهنگ با مودال */
    border: 1px solid var(--border-color-strong);           /* حاشیه کمی روشن‌تر */
    border-radius: 16px;
    padding: 25px 20px;
    width: 100%;
    max-width: 420px;
    text-align: center;
    color: var(--text-primary) !important;           /* متن */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.info-card h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--text-primary) !important;           /* عنوان */
    margin-bottom: 12px;
}

.info-card p {
    color: var(--text-secondary) !important;           /* متن کمی روشن‌تر برای خوانایی بهتر */
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0;
}

/* نسخه دارک مود (اختیاری) */
@media (prefers-color-scheme: dark) {
    .info-card {
        background: var(--bg-secondary) !important;  /* تیره‌تر در دارک مود */
        border-color: var(--border-color-strong);
    }
    .info-card p {
        color: var(--text-secondary) !important;
    }
}

/* ==================== حالت روشن (Light Mode) ==================== */
body.light-mode {
    /* Design Tokens — Light Mode (inspired by X) */
    --bg-color: #ffffff;          /* Background */
    --bg-page: #fbfcfd;           /* Page canvas — فقط کمی از سفید تیره‌تر برای عمق */
    --bg-secondary: #f7f9f9;      /* Surface / Secondary */
    --bg-tertiary: #eff3f4;       /* Muted surface (nested elements - باید از secondary متمایز باشد) */
    --bg-hover: #e8edf0;          /* Hover surface (تیره‌تر از tertiary برای حس کلیک) */
    --bg-input: #f7f9f9;          /* Input surface */
    --border-color: #eff3f4;      /* Border / Divider */
    --border-color-strong: #cfd9de; /* Strong border */
    --text-primary: #0f1419;      /* Foreground */
    --text-secondary: #536471;    /* Secondary foreground */
    --text-muted: #8b98a5;        /* Muted foreground */
    --accent-color: #1d9bf0;      /* Primary */
    --accent-hover: #1a8cd8;      /* Primary hover */
    --accent-bg: rgba(29, 155, 240, 0.1);
    --like-color: #f91880;        /* Like / Favorite */
    --like-bg: rgba(249, 24, 128, 0.1);
    --danger-color: #f4212e;      /* Error */
    --danger-bg: rgba(244, 33, 46, 0.1);
    --success-color: #00ba7c;     /* Success (icons/badges) */
    --success-text: #00875f;        /* Success text - AA compliant */
    --success-bg: rgba(0, 186, 124, 0.1);
    --warning-color: #ffd400;
    --white: #ffffff;
    --black: #000000;
    /* RGB tokens (برای rgba() در hover/focus) */
    --accent-color-rgb: 29, 155, 240;
    --like-color-rgb: 249, 24, 128;
    --danger-color-rgb: 244, 33, 46;
    --success-color-rgb: 0, 186, 124;
    --text-primary-rgb: 15, 20, 25;
    --bg-color-rgb: 255, 255, 255;
    --secondary-accent: #1a8cd8;  /* fallback برای gradientهای قالب‌ها */
    /* سایه‌های لایت مود — ظریف و خنثی */
    --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.06);
    --shadow-md: 0 2px 8px rgba(15, 20, 25, 0.08);
    --shadow-lg: 0 8px 24px rgba(15, 20, 25, 0.12);
}
body.light-mode .main-header { border-left-color: var(--border-color); }
body.light-mode .tweet:hover { background-color: var(--bg-secondary); }
body.light-mode .modal-overlay { background: rgba(0,0,0,0.4); }
body.light-mode .nav-link.btn-primary { color: var(--bg-color); }
body.light-mode .nav-icon-img:not(.nav-icon-ai) { filter: brightness(0); }
body.light-mode .mobile-nav { background: rgba(255,255,255,0.95); border-top-color: var(--border-color); }
body.light-mode .mobile-nav-item { color: var(--text-secondary); }
body.light-mode .mobile-nav-item.active { color: var(--accent-color); }
body.light-mode .mobile-drawer { background: var(--bg-color); }
body.light-mode .mobile-drawer-user-name, body.light-mode .mobile-drawer-user-handle { color: var(--text-primary); }
body.light-mode .mobile-drawer-item { color: var(--text-primary); }
body.light-mode .mobile-top-header { background: rgba(247,249,250,0.9); border-bottom-color: var(--border-color); }
body.light-mode .mobile-top-logo { color: var(--text-primary); }
body.light-mode .mobile-notif-btn { color: var(--text-secondary); }
body.light-mode .logo { color: var(--text-primary); }
body.light-mode .logo:hover { background-color: var(--bg-tertiary); }
body.light-mode .nav-link { color: var(--text-primary); }
body.light-mode .nav-link:hover { background-color: var(--bg-tertiary); }
body.light-mode .sidebar-widgets { background: var(--bg-color); }
body.light-mode .sidebar-footer-links a, body.light-mode .sidebar-footer-links span { color: var(--text-secondary); }
body.light-mode .sidebar-footer-links a:hover { color: var(--accent-color); }
body.light-mode .settings-section { border-color: var(--border-color); }
body.light-mode .delete-account-link { border-color: var(--danger-color); color: var(--danger-color); }
body.light-mode .delete-account-link:hover { background: var(--danger-bg); }
body.light-mode .logout-btn-settings { border-color: var(--border-color); color: var(--text-primary); }
body.light-mode .logout-btn-settings:hover { background: var(--bg-hover); }
body.light-mode .premium-card { background: var(--bg-secondary); border-color: var(--border-color); }
body.light-mode .verified-btn { background-color: var(--accent-color) !important; border-color: var(--accent-color) !important; }
body.light-mode .vip-btn { background-color: #9c27b0 !important; border-color: #9c27b0 !important; }
body.light-mode .buy-btn { background-color: var(--accent-color); }
body.light-mode .buy-btn:hover { background-color: var(--accent-hover); }
body.light-mode .crop-btn.cancel { background: var(--bg-secondary); color: var(--text-primary); }
body.light-mode .mention-dropdown { background: var(--bg-color); border-color: var(--border-color); }
body.light-mode .hashtag-suggestions { background: var(--bg-color); border-color: var(--border-color); }
body.light-mode .ad-card { background: var(--bg-secondary); }
body.light-mode .sidebar-card { background: var(--bg-secondary); }
body.light-mode .trending-item { border-color: var(--border-color); }
body.light-mode .trending-item:hover { background: var(--bg-hover); }
body.light-mode .follow-item { background: var(--bg-color); border-color: var(--border-color); }
body.light-mode .follow-item:hover { background: var(--bg-hover); }
body.light-mode .notification-item { background: var(--bg-color); border-color: var(--border-color); }
body.light-mode .notification-item.unread { background: var(--bg-secondary); }
body.light-mode .notification-tweet-preview { background: var(--bg-secondary); border-color: var(--border-color); }
body.light-mode .search-box { background: var(--bg-color); border-color: var(--border-color); }
body.light-mode .search-input { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); }
body.light-mode .empty-bookmarks h2 { color: var(--text-primary); }
body.light-mode .empty-bookmarks p { color: var(--text-secondary); }
body.light-mode .no-tweets, body.light-mode .no-results, body.light-mode .search-empty { color: var(--text-secondary); }
body.light-mode .auth-box { background: var(--bg-secondary); border-color: var(--border-color); }
body.light-mode .auth-btn { background-color: var(--accent-color); color: #fff; }
body.light-mode .auth-footer { color: var(--text-secondary); }
body.light-mode .flash-message { background-color: var(--danger-color); }
body.light-mode .profile-tabs .tab { color: var(--text-secondary); }
body.light-mode .profile-tabs .tab.active { color: var(--text-primary); border-bottom-color: var(--accent-color); }
body.light-mode .profile-header { border-color: var(--border-color); }
body.light-mode .profile-stats { border-color: var(--border-color); }
body.light-mode .stat-link { color: var(--text-secondary); }
body.light-mode .stat-number { color: var(--text-primary); }
body.light-mode .stat-label { color: var(--text-secondary); }
body.light-mode .settings-form input, body.light-mode .settings-form textarea { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); }
body.light-mode .settings-form input:focus, body.light-mode .settings-form textarea:focus { border-color: var(--accent-color); }
body.light-mode .settings-form label { color: var(--text-secondary); }
body.light-mode .char-hint { color: var(--text-muted); }
body.light-mode .modal-content { background: var(--bg-secondary); border-color: var(--border-color); }
body.light-mode .modal-header { border-color: var(--border-color); }
body.light-mode .close-modal { color: var(--text-primary); }
body.light-mode .close-modal:hover { background: var(--bg-hover); }
body.light-mode .form-group input { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); }
body.light-mode .form-group input:focus { border-color: var(--accent-color); }
body.light-mode .auth-header h1 { color: var(--text-primary); }
body.light-mode .auth-header p { color: var(--text-secondary); }
body.light-mode .terms-checkbox .checkbox-label { color: var(--text-secondary); }
body.light-mode .terms-checkbox .checkbox-label a { color: var(--accent-color); }
body.light-mode .hashtag-search-box { background: var(--bg-color); border-color: var(--border-color); }
body.light-mode .hashtag-input-wrapper { background: var(--bg-input); border-color: var(--border-color); }
body.light-mode .hashtag-symbol { color: var(--text-secondary); }
body.light-mode .hashtag-search-btn { background: var(--accent-color); }
body.light-mode .hashtag-result-header { border-color: var(--border-color); }
body.light-mode .hashtag-result-header h2 { color: var(--text-primary); }
body.light-mode .result-count { color: var(--text-secondary); }
body.light-mode .clear-search { color: var(--text-secondary); }
body.light-mode .clear-search:hover { background: var(--bg-hover); color: var(--text-primary); }
body.light-mode .trending-hero { border-color: var(--border-color); }
body.light-mode .trending-hero h2 { color: var(--text-primary); }
body.light-mode .trending-hero p { color: var(--text-secondary); }
body.light-mode .trending-arrow { color: var(--text-muted); }
body.light-mode .trending-arrow:hover { color: var(--accent-color); }
body.light-mode .back-to-trends { background: var(--accent-color); color: white; }
body.light-mode .back-to-trends:hover { background: var(--accent-hover); }
body.light-mode .show-more-link { color: var(--accent-color); border-color: var(--border-color); }
body.light-mode .show-more-link:hover { background: var(--bg-hover); }
body.light-mode .ad-title { color: var(--text-primary); }
body.light-mode .ad-url { color: var(--text-secondary); }
body.light-mode .ad-link:hover { background: var(--bg-hover); }
body.light-mode .trend-tag-sidebar { color: var(--text-primary); }
body.light-mode .trend-count-sidebar { color: var(--text-secondary); }
body.light-mode .trend-more { color: var(--text-muted); }
body.light-mode .notification-user { color: var(--text-primary); }
body.light-mode .notification-time { color: var(--text-secondary); }
body.light-mode .notification-text { color: var(--text-primary); }
body.light-mode .search-tabs .tab { color: var(--text-secondary); }
body.light-mode .search-tabs .tab.active { color: var(--text-primary); border-bottom-color: var(--accent-color); }
body.light-mode .search-tabs .tab:hover { background: var(--bg-hover); }
body.light-mode .btn-small { border-color: var(--text-muted); color: var(--text-primary); }
body.light-mode .btn-small:hover { background: var(--accent-bg); border-color: var(--accent-color); color: var(--accent-color); }
body.light-mode .browse-btn { background: var(--accent-color); color: white; }
body.light-mode .page-title { background: rgba(247,249,250,0.85); border-color: var(--border-color); }
body.light-mode .page-title h1 { color: var(--text-primary); }
body.light-mode .tweet { border-color: var(--border-color); }
body.light-mode .tweet-box { border-color: var(--border-color); }
body.light-mode .tweet-form textarea { color: var(--text-primary); }
body.light-mode .tweet-form textarea::placeholder { color: var(--text-muted); }
body.light-mode .tweet-name, body.light-mode .tweet-name-link { color: var(--text-primary) !important; }
body.light-mode .tweet-username, body.light-mode .tweet-time { color: var(--text-secondary); }
body.light-mode .tweet-content p { color: var(--text-primary); }
body.light-mode .action-btn { color: var(--text-secondary); }
body.light-mode .action-btn:hover { color: var(--accent-color); background: var(--accent-bg); }
body.light-mode .delete-btn { color: var(--text-secondary); }
body.light-mode .delete-btn:hover { color: var(--danger-color); background: var(--danger-bg); }
body.light-mode .follow-btn, body.light-mode .follow-btn-small, body.light-mode .follow-btn-tweet { color: var(--bg-color); }
body.light-mode .follow-btn.following, body.light-mode .follow-btn-small.following, body.light-mode .follow-btn-tweet.following { border-color: var(--border-color); color: var(--text-primary); }
body.light-mode .mobile-drawer-overlay.active { background: rgba(0,0,0,0.4); }
body.light-mode .suspended-card, body.light-mode .user-suspended-header, body.light-mode .delete-account-card { background: var(--bg-secondary); border-color: var(--border-color); }
body.light-mode .suspended-card h2, body.light-mode .delete-account-card h2 { color: var(--text-primary); }
body.light-mode .suspended-description, body.light-mode .delete-description { color: var(--text-secondary); }
body.light-mode .cancel-delete-btn { color: var(--text-secondary); border-color: var(--border-color); }
body.light-mode .cancel-delete-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
body.light-mode .delete-security-note { color: var(--text-secondary); }
body.light-mode .admin-panel-header { background: var(--bg-secondary); border-color: var(--border-color); }
body.light-mode .admin-panel-header h1 { color: var(--text-primary); }
body.light-mode .admin-table-container { background: var(--bg-secondary); border-color: var(--border-color); }
body.light-mode .admin-table-header h2 { color: var(--text-primary); }
body.light-mode .admin-user-count { background: var(--bg-tertiary); color: var(--text-secondary); }
body.light-mode .admin-table th { color: var(--text-secondary); border-color: var(--border-color); }
body.light-mode .admin-table td { color: var(--text-primary); border-color: var(--border-color); }
body.light-mode .admin-table tbody tr:hover { background: var(--bg-tertiary); }
body.light-mode .admin-btn-refresh { border-color: var(--border-color); color: var(--text-primary); }
body.light-mode .admin-btn-refresh:hover { background: var(--bg-hover); }
body.light-mode .user-suspended-header { border-color: var(--border-color); }
body.light-mode .user-suspended-header h2 { color: var(--text-primary); }
body.light-mode .user-suspended-badge { background: rgba(255,212,0,0.15); color: var(--warning-color); }
body.light-mode .interest-card { background: var(--bg-secondary); border-color: var(--border-color); }
body.light-mode .interest-card:hover { border-color: var(--accent-color); background: var(--accent-bg); }
body.light-mode .interest-card.selected { border-color: var(--accent-color); background: var(--accent-bg); }
body.light-mode .interest-icon { color: var(--text-primary); }
body.light-mode .interest-name { color: var(--text-primary); }
body.light-mode .interests-description { color: var(--text-secondary); }
body.light-mode .interests-description small { color: var(--text-muted); }
body.light-mode .interests-cancel-btn { border-color: var(--border-color); color: var(--text-primary); }
body.light-mode .interests-cancel-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
body.light-mode .verify-card { background: var(--bg-secondary); border-color: var(--border-color); }
body.light-mode .verify-card h2 { color: var(--text-primary); }
body.light-mode .verify-card p { color: var(--text-secondary); }
body.light-mode .verify-submit-btn { background: var(--accent-color); }
body.light-mode .verify-resend-btn { color: var(--accent-color); border-color: var(--accent-color); }
body.light-mode .verify-logout-link { color: var(--text-secondary); }
body.light-mode .verify-logout-link:hover { background: var(--bg-hover); color: var(--text-primary); }
body.light-mode .suspended-page-container { background: var(--bg-color); }
body.light-mode .follow-list-header { background: rgba(247,249,250,0.65); border-color: var(--border-color); }
body.light-mode .follow-list-header h1 { color: var(--text-primary); }
body.light-mode .notifications-header { background: rgba(247,249,250,0.65); border-color: var(--border-color); }
body.light-mode .notifications-header h1 { color: var(--text-primary); }
body.light-mode .bookmarks-header { background: rgba(247,249,250,0.65); border-color: var(--border-color); }
body.light-mode .bookmarks-header h1 { color: var(--text-primary); }
body.light-mode .bookmark-remove-btn:hover { background: var(--accent-bg); }
body.light-mode .admin-tab { color: var(--text-secondary); }
body.light-mode .admin-tab.active { color: var(--accent-color); border-bottom-color: var(--accent-color); }
body.light-mode .admin-tweet-item { background: var(--bg-secondary); border-color: var(--border-color); }
body.light-mode .admin-tweet-header { color: var(--text-secondary); }
body.light-mode .admin-tweet-body { color: var(--text-primary); }
body.light-mode .admin-btn-edit { background: rgba(29,155,240,0.1); color: var(--accent-color); border-color: rgba(29,155,240,0.3); }
body.light-mode .admin-btn-edit:hover { background: var(--accent-color); color: white; }
body.light-mode .admin-btn-delete { background: rgba(244,33,46,0.05); color: var(--danger-color); border-color: rgba(244,33,46,0.3); }
body.light-mode .admin-btn-delete:hover { background: var(--danger-color); color: white; }
body.light-mode .modal-content { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }
body.light-mode .modal-content p { color: var(--text-primary) !important; }
body.light-mode .modal-close { color: var(--text-secondary); }
body.light-mode .modal-close:hover { color: var(--text-primary); }
body.light-mode .info-card { background: var(--bg-secondary) !important; border-color: var(--border-color); color: var(--text-primary) !important; }
body.light-mode .info-card h3 { color: var(--text-primary) !important; }
body.light-mode .info-card p { color: var(--text-secondary) !important; }
body.light-mode .guest-message { background: var(--bg-secondary); }
body.light-mode .guest-message p { color: var(--text-secondary); }
body.light-mode .guest-message a:hover { background: rgba(29,155,240,0.1); color: var(--accent-color); }
body.light-mode .terms-link:hover { color: var(--accent-color); }
body.light-mode .empty-state h2, body.light-mode .empty-state h3 { color: var(--text-primary); }
body.light-mode .empty-state p { color: var(--text-secondary); }
body.light-mode .empty-state .action-btn-empty { background: var(--accent-color); color: white; }
body.light-mode .empty-state .action-btn-empty:hover { background: var(--accent-hover); color: white; text-decoration: none; }
body.light-mode .empty-state-icon-wrapper { background: var(--bg-secondary); border-color: var(--border-color); }
body.light-mode .empty-state-icon-wrapper::after { border-top-color: var(--accent-color); }
body.light-mode .hashtag-link { color: var(--accent-color) !important; }
body.light-mode .mention-link { color: var(--accent-color) !important; }
body.light-mode .action-btn-static img.action-icon { opacity: 0.5; }

/* ==================== حالت روشن — تکمیلی (Light Mode Fixes) ==================== */

/* آیکون‌های سفید PNG باید در لایت مود سیاه شوند (بدون opacity کم که باعث خاکستری کم‌کنتراست می‌شود) */
body.light-mode .action-btn img.action-icon,
body.light-mode .action-btn-static img.action-icon,
body.light-mode .delete-btn img.action-icon,
body.light-mode .tweet-menu img.action-icon { filter: brightness(0); }
body.light-mode .action-btn:hover img.action-icon { filter: brightness(0); }
/* لایک‌شده: آیکون سفید like.png با فیلتر به صورتی برند (#F91880) تبدیل می‌شود */
body.light-mode .action-btn.liked .like-icon-filled { filter: invert(52%) sepia(30%) saturate(5000%) hue-rotate(295deg) brightness(92%); }
body.light-mode .action-btn.liked { color: var(--like-color); }
body.light-mode .mobile-drawer-item img { filter: brightness(0); }
body.light-mode .mobile-drawer-logout img { filter: brightness(0); }
body.light-mode .mobile-notif-btn img { filter: brightness(0); }
body.light-mode .mobile-nav .nav-icon-img:not(.nav-icon-ai) { filter: brightness(0); }
body.light-mode .session-delete img { filter: brightness(0); }
body.light-mode .session-delete:hover img { filter: brightness(0); }
body.light-mode .bookmark-remove-btn img.bookmark-icon { filter: brightness(0); }
body.light-mode .verified-badge { filter: none; }
/* ai.png سفید — در لایت مود تیره می‌شود */
body.light-mode .nav-icon-img.nav-icon-ai { filter: brightness(0); }
body.light-mode .nav-link:hover .nav-icon-img.nav-icon-ai { filter: brightness(0) opacity(0.7); }

/* nav آیکون‌ها — سیاه خالص با طبقه‌بندی واضح */
body.light-mode .nav-icon-img:not(.nav-icon-ai) { filter: brightness(0); }
body.light-mode .nav-link:hover .nav-icon-img:not(.nav-icon-ai) { filter: brightness(0); opacity: 0.7; }


/* Focus State — ظریف و قابل مشاهده (فقط لایت مود) */
body.light-mode a:focus-visible, body.light-mode button:focus-visible,
body.light-mode input:focus-visible, body.light-mode textarea:focus-visible,
body.light-mode select:focus-visible, body.light-mode [tabindex]:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Disabled State — از Active متمایز باشد */
body.light-mode button:disabled, body.light-mode input:disabled, body.light-mode textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== سایه‌های لایت مود — تفکیک باکس‌ها از پس‌زمینه ==================== */
/* کارت‌های سطح ثانویه روی پس‌زمینه سفید (بدون بوردر هم دیده شوند) */
body.light-mode .sidebar-card,
body.light-mode .ad-card { box-shadow: var(--shadow-md) !important; }

/* کارت‌های محتوایی مهم — سایه واضح‌تر */
body.light-mode .auth-box,
body.light-mode .premium-card,
body.light-mode .info-card,
body.light-mode .verify-card,
body.light-mode .interest-card,
body.light-mode .trending-hero,
body.light-mode .modal-content,
body.light-mode .legal-modal,
body.light-mode .delete-account-card { box-shadow: var(--shadow-md) !important; }

/* پاپ‌آپ‌ها و منوها — بلند از سطح، سایه سنگین‌تر برای عمق */
body.light-mode .tweet-menu,
body.light-mode .mention-dropdown,
body.light-mode .hashtag-suggestions,
body.light-mode .emoji-picker { box-shadow: var(--shadow-lg) !important; }

/* باکس‌های جستجو و لیست‌ها — سایه ظریف */
body.light-mode .search-box,
body.light-mode .hashtag-search-box,
body.light-mode .follow-item,
body.light-mode .notification-tweet-preview { box-shadow: var(--shadow-sm) !important; }

/* پنل‌های ادمین */
body.light-mode .admin-table-container,
body.light-mode .admin-panel-header,
body.light-mode .admin-login-container,
body.light-mode .admin-suspend-card,
body.light-mode .admin-ads-add-card,
body.light-mode .admin-ads-list-card,
body.light-mode .admin-tweet-item { box-shadow: var(--shadow-md) !important; }

/* کارت‌های تعلیق و وضعیت */
body.light-mode .suspended-card,
body.light-mode .user-suspended-header,
body.light-mode .suspended-page-card,
body.light-mode .user-suspended-reason-card { box-shadow: var(--shadow-md) !important; }

/* دراور موبایل — سایه ظریف لایت به‌جای سایه سیاه سنگین دارک */
body.light-mode .mobile-drawer { box-shadow: -4px 0 24px rgba(15, 20, 25, 0.12) !important; }

/* ==================== صفحات سئو (Pillar/Cluster) ==================== */
.tweet-pillar { padding: 20px 16px 60px; color: var(--text-primary); line-height: 1.9; }
.pillar-breadcrumb { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 14px; }
.pillar-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.pillar-breadcrumb a:hover { color: var(--accent-color); }
.pillar-breadcrumb span[aria-hidden] { margin: 0 6px; }
.tweet-pillar h1 { font-size: 1.7rem; font-weight: 800; margin: 0 0 14px; line-height: 1.5; }
.pillar-lede { font-size: 1.02rem; margin: 0 0 18px; padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; }
.pillar-lede strong { color: var(--accent-color); }
.tweet-pillar h2 { font-size: 1.25rem; font-weight: 800; margin: 30px 0 10px; line-height: 1.6; }
.tweet-pillar h3 { font-size: 1rem; font-weight: 700; margin: 18px 0 6px; }
.tweet-pillar p { margin: 0 0 14px; }
.tweet-pillar a { color: var(--accent-color); }
.pillar-feature-list { margin: 0 0 14px; padding: 0 18px; }
.pillar-feature-list li { margin-bottom: 8px; }
.pillar-steps { margin: 0 0 14px; padding: 0 20px; }
.pillar-steps li { margin-bottom: 10px; }
.pillar-table-wrap { border: 1px solid var(--border-color); border-radius: 14px; overflow: auto; margin: 10px 0 22px; }
.pillar-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pillar-table td, .pillar-table th { padding: 10px 14px; border-top: 1px solid var(--border-color); vertical-align: top; text-align: right; }
.pillar-table thead th { background: var(--bg-secondary); font-weight: 800; color: var(--text-primary); border-top: none; }
.pillar-table tr:first-child td { border-top: none; }
.pillar-table td:first-child { font-weight: 700; color: var(--text-primary); background: var(--bg-secondary); }
.pillar-table td { color: var(--text-secondary); }
.mark-yes { color: var(--success-color); font-weight: 800; }
.mark-no { color: var(--danger-color); font-weight: 800; }
.mark-maybe { color: var(--warning-color); font-weight: 800; }
.pillar-cta { background: var(--accent-color); border-radius: 16px; padding: 22px 20px; color: #fff; text-align: center; margin: 30px 0; }
.pillar-cta h2 { margin: 0 0 6px; color: #fff; }
.pillar-cta p { color: rgba(255,255,255,0.85); margin: 0 0 16px; font-size: 0.95rem; }
.pillar-cta-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pillar-btn { display: inline-block; background: #fff; color: #1d9bf0; font-weight: 800; text-decoration: none; padding: 11px 26px; border-radius: 999px; transition: transform 0.15s ease; }
.pillar-btn:hover { transform: translateY(-1px); color: #1d9bf0; }
.pillar-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.6); }
.pillar-faq { border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; background: var(--bg-secondary); }
.pillar-faq summary { cursor: pointer; font-weight: 700; font-size: 0.95rem; }
.pillar-faq p { margin: 10px 0 0; color: var(--text-secondary); font-size: 0.92rem; }
/* صفحات حقوقی (قوانین / حریم خصوصی / راهنما / درباره) */
.legal-updated { font-size: 0.8rem; color: var(--text-muted); margin: -6px 0 16px; }
.legal-page .danger-text { color: var(--danger-color); }
.legal-page .highlight-text { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 16px; }
.contact-channels { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 18px; }
.contact-channels a { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 999px; padding: 9px 18px; color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; transition: background 0.2s, border-color 0.2s; }
.contact-channels a:hover { background: var(--bg-hover); border-color: var(--border-color-strong); text-decoration: none; }
.pillar-related { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--border-color); font-size: 0.9rem; color: var(--text-muted); }
@media (max-width: 700px) {
    .tweet-pillar h1 { font-size: 1.35rem; }
    .pillar-table { min-width: 560px; }
}

/* ============================================================
   FIX: دکمه سه‌نقطه (⋯) — رفع تداخل با دکمه فالو + رنگ در دارک مود
   این پچ در انتهای فایل قرار می‌گیرد تا تمام قوانین قبلی را override کند.
   فقط و فقط مربوط به .tweet-options و .options-btn است.
   ============================================================ */

/* ۱. حذف margin-right:auto از tweet-options */
/* دلیل: auto-margin این المان را به لبه چپ فیزیکی می‌چسباند — همان‌جایی که */
/* دکمه فالو (با position:absolute; left:0) قرار دارد. حذف auto-margin باعث */
/* می‌شود ... در جای طبیعی خودش (بعد از user-info) بنشیند و با فالو تداخل نکند. */
.tweet-options {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 0;
    margin-left: 0;
    margin-inline-start: 8px;
    margin-inline-end: 0;
    z-index: 5;
    flex-shrink: 0;
}

/* ۲. رنگ دکمه سه‌نقطه — دارک مود (پیش‌فرض) */
body:not(.light-mode) .options-btn {
    color: #8b98a5;
}
body:not(.light-mode) .options-btn svg {
    fill: #8b98a5;
    color: #8b98a5;
}
body:not(.light-mode) .options-btn:hover {
    color: #e7e9ea;
    background: rgba(255, 255, 255, 0.08);
}
body:not(.light-mode) .options-btn:hover svg {
    fill: #e7e9ea;
    color: #e7e9ea;
}

/* ۳. رنگ دکمه سه‌نقطه — لایت مود */
body.light-mode .options-btn {
    color: #536471;
}
body.light-mode .options-btn svg {
    fill: #536471;
    color: #536471;
}
body.light-mode .options-btn:hover {
    color: #1d9bf0;
    background: rgba(29, 155, 240, 0.08);
}
body.light-mode .options-btn:hover svg {
    fill: #1d9bf0;
    color: #1d9bf0;
}

/* ۴. رنگ دکمه سه‌نقطه — حالت پایه (پشتیبان برای هر دو تم) */
.options-btn {
    color: var(--text-secondary, #71767b);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
    flex-shrink: 0;
    line-height: 1;
}

.options-btn svg {
    display: block;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.options-btn:focus-visible {
    outline: 2px solid var(--accent-color, #1d9bf0);
    outline-offset: 2px;
}

/* ۵. منوی بازشده — بالاتر از همه چیز */
.tweet-menu {
    z-index: 200;
}

/* ۶. موبایل: کمی کوچک‌تر */
@media (max-width: 640px) {
    .tweet-options {
        margin-inline-start: 6px;
    }
    .options-btn {
        padding: 6px;
    }
    .options-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================================
   FIX: چیدمان نوار پایین توییت — فاصله‌ی مساوی بین دکمه‌ها
   + سه‌نقطه در انتهای بصری (چپ در RTL)
   ============================================================ */

/* ۱. نوار عملیات: فاصله‌ی مساوی بین دکمه‌ها */
.tweet-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;                 /* فاصله بین دکمه‌ها */
    padding-inline-end: 8px;  /* کمی از لبه فاصله */
    padding-inline-start: 8px;
    margin-left: 60px;
    margin-right: 0;
    flex-wrap: nowrap;
}

/* ۲. سه‌نقطه — به انتهای بصری (چپ در RTL) هل داده شود */
.tweet-header .tweet-options {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    margin: 0;
    z-index: 5;
}

/* ۳. دکمه‌های عملیات — کمی از هم فاصله بگیرند */
.tweet-actions-bar .action-btn,
.tweet-actions-bar .action-btn-static,
.tweet-actions-bar .bookmark-btn {
    flex: 0 0 auto;
    padding: 8px;
    min-width: 36px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ۴. موبایل: gap کمی بیشتر برای لمس بهتر */
@media (max-width: 768px) {
    .tweet-actions-bar {
        gap: 8px;
        margin-left: 0;
        padding-inline-end: 4px;
        padding-inline-start: 4px;
    }
    .tweet-actions-bar .action-btn,
    .tweet-actions-bar .action-btn-static,
    .tweet-actions-bar .bookmark-btn {
        padding: 6px 4px;
        min-width: 32px;
    }
}

/* ============================================================
   FIX: چیدمان دکمه‌های نوار عملیات توییت
   مشکل: margin-right:auto روی .tweet-options (که در فوتر است)
          بقیه دکمه‌ها را به لبه راست و سه‌نقطه را به لبه چپ پرت می‌کرد.
   حل: در بافت tweet-actions-bar، auto-margin را صفر می‌کنیم تا
       justify-content: space-between دکمه‌ها را به‌طور مساوی پخش کند.
   ============================================================ */

.tweet-actions-bar .tweet-options {
    margin-right: 0;
    margin-left: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    flex-shrink: 0;
    z-index: 3;
}

/* منوی سه‌نقطه: از گوشه‌ی دکمه باز شود، نه از بالای کارت */
.tweet-actions-bar .tweet-menu {
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    right: auto;
    z-index: 300;
}

/* اطمینان از پخش مساوی: تمام آیتم‌ها فضای مساوی بگیرند */
.tweet-actions-bar {
    justify-content: space-between;
    gap: 0;
}

/* موبایل: gap کوچک به‌جای صفر برای لمس بهتر */
@media (max-width: 768px) {
    .tweet-actions-bar {
        gap: 4px;
    }
    .tweet-actions-bar .action-btn,
    .tweet-actions-bar .action-btn-static {
        padding: 6px 4px;
    }
}

/* ============================================================
   FIX: پخش مساوی دکمه‌های نوار عملیات توییت
   علت: .tweet-options با margin-right:auto تمام فضای خالی را می‌خورد
   حل: auto-margin صفر + justify-content:space-between برای پخش مساوی
   ============================================================ */

.tweet-actions-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin-left: 60px !important;
    margin-right: 0 !important;
    padding: 0 4px !important;
}

/* کشتن کامل auto-margin سه‌نقطه در فوتر */
.tweet-actions-bar .tweet-options {
    margin: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 3 !important;
}

.tweet-actions-bar > .action-btn,
.tweet-actions-bar > .action-btn-static,
.tweet-actions-bar > .bookmark-btn {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 8px !important;
}

/* موبایل — ۶۰px margin چپ حذف شود تا فضا تنگ نشود */
@media (max-width: 768px) {
    .tweet-actions-bar {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    .tweet-actions-bar > .action-btn,
    .tweet-actions-bar > .action-btn-static,
    .tweet-actions-bar > .bookmark-btn {
        padding: 6px 4px !important;
    }
}


/* ============================================================
   FINAL FIX: نوار عملیات توییت
   کلاس اختصاصی tweet-actions-clean — دور از تمام پچ‌های قدیمی
   ============================================================ */

.tweet-actions-clean {
    display: flex;
    align-items: center;
    /* در RTL: flex-start = راست */
    justify-content: flex-start;
    /* فاصله بین دکمه‌ها */
    gap: 16px;
    /* فاصله از لبه راست کارت (هم‌تراز با آواتار) */
    margin-right: 60px;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    flex-wrap: nowrap;
    width: auto;
    box-sizing: border-box;
}

/* هر آیتم نوار — خودش را جمع نکند */
.tweet-actions-clean > a,
.tweet-actions-clean > button,
.tweet-actions-clean > span,
.tweet-actions-clean > .tweet-options {
    flex: 0 0 auto;
}

/* ===== سه‌نقطه — پرت به لبه چپ (در RTL: انتهای بصری) ===== */
.tweet-actions-clean > .tweet-options {
    /* در RTL: margin-inline-end = margin-left فیزیکی */
    margin-inline-end: auto;
    margin-inline-start: 0;
    margin-left: auto;
    margin-right: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0;
}

/* دکمه سه‌نقطه — رنگ در دارک مود */
.tweet-actions-clean > .tweet-options .options-btn {
    color: #8b98a5;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}
.tweet-actions-clean > .tweet-options .options-btn:hover {
    color: #e7e9ea;
    background: rgba(255, 255, 255, 0.08);
}
.tweet-actions-clean > .tweet-options .options-btn svg {
    display: block;
    fill: currentColor;
    color: inherit;
    pointer-events: none;
}

/* لایت مود — سه‌نقطه */
body.light-mode .tweet-actions-clean > .tweet-options .options-btn {
    color: #536471;
}
body.light-mode .tweet-actions-clean > .tweet-options .options-btn:hover {
    color: #1d9bf0;
    background: rgba(29, 155, 240, 0.08);
}

/* منوی سه‌نقطه — بالای دکمه باز شود */
.tweet-actions-clean > .tweet-options .tweet-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    top: auto;
    left: 0;
    right: auto;
    z-index: 300;
    min-width: 180px;
}

/* ===== ریسپانسیو موبایل ===== */
@media (max-width: 768px) {
    .tweet-actions-clean {
        margin-right: 0;
        gap: 8px;
    }
}

/* ============================================================
   FINAL FIX v2: نوار عملیات توییت — با ساختار wrapper
   ============================================================ */

/* نوار اصلی: دو سر — دکمه‌ها راست، سه‌نقطه چپ */
.tweet-actions-clean {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* ۶۰px فاصله از راست (هم‌تراز با آواتار) */
    margin-right: 60px;
    margin-left: 0;
    padding: 0;
    flex-wrap: nowrap;
    width: auto;
    box-sizing: border-box;
}

/* باکس ۵ دکمه — راست چیده می‌شود */
.tweet-actions-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}

.tweet-actions-buttons > a,
.tweet-actions-buttons > button,
.tweet-actions-buttons > span {
    flex: 0 0 auto;
}

/* ===== سه‌نقطه — سر جای خودش در انتهای چپ ===== */
.tweet-actions-clean > .tweet-options {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

.tweet-actions-clean > .tweet-options .options-btn {
    color: #8b98a5;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}

.tweet-actions-clean > .tweet-options .options-btn:hover {
    color: #e7e9ea;
    background: rgba(255, 255, 255, 0.08);
}

.tweet-actions-clean > .tweet-options .options-btn svg {
    display: block;
    fill: currentColor;
    color: inherit;
    pointer-events: none;
}

body.light-mode .tweet-actions-clean > .tweet-options .options-btn {
    color: #536471;
}
body.light-mode .tweet-actions-clean > .tweet-options .options-btn:hover {
    color: #1d9bf0;
    background: rgba(29, 155, 240, 0.08);
}

/* منوی سه‌نقطه — به‌جای باز شدن به پایین، به بالا باز شود */
.tweet-actions-clean > .tweet-options .tweet-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    top: auto;
    left: 0;
    right: auto;
    z-index: 300;
    min-width: 180px;
}

/* ===== موبایل: کمی کم‌فاصله‌تر ===== */
@media (max-width: 768px) {
    .tweet-actions-clean {
        margin-right: 0;
    }
    .tweet-actions-buttons {
        gap: 12px;
    }
}


/* ==================== 🎯 تب‌های فید (همه / برای شما) ==================== */
.feed-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color);
    position: sticky;
    top: 53px;
    z-index: 90;
}
.feed-tab {
    flex: 1;
    padding: 14px 8px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.feed-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.feed-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-color);
}

/* ==================== 🖼️ بنر پروفایل ==================== */
.profile-banner {
    width: 100%;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    background: var(--bg-secondary);
}
.profile-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* وقتی بنر هست، دکمه برگشت روی آن شناور شود */
.profile-banner ~ .profile-header .profile-header-top {
    position: relative;
    z-index: 2;
}

/* 🖼️ بنر — پیش‌نمایش در تنظیمات */
.banner-preview-wrap { width: 100%; max-width: 400px; aspect-ratio: 3/1; border-radius: 12px; overflow: hidden; background: var(--bg-secondary); border: 1px solid var(--border-color); }
.banner-preview-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary); font-size: 13px; }
.banner-btn { padding: 8px 16px; background: transparent; border: 1px solid var(--border-color-strong); color: var(--text-primary); border-radius: 50px; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 13px; }
.banner-btn:hover { background: var(--bg-secondary); }
.banner-btn-danger { color: #f4212e; border-color: rgba(244, 33, 46, 0.4); }
.banner-btn-danger:hover { background: rgba(244, 33, 46, 0.1); }

/* ============================================================
   X-Style Profile Layout — بنر بالا + آواتار شناور روی بنر
   + Drag-to-Reposition برای بنر (settings)
   ============================================================ */

/* ریشه بخش بالای پروفایل */
.profile-top {
    position: relative;
    width: 100%;
}

/* بنر ۳:۱ با موقعیت قابل تنظیم */
.profile-banner {
    width: 100%;
    aspect-ratio: 3 / 1;
    min-height: 120px;
    max-height: 240px;
    overflow: hidden;
    background: var(--bg-secondary);
    position: relative;
}

/* وقتی بنر انتخاب نشده — گرادیان زیبا */
.profile-banner-empty {
    background: linear-gradient(135deg, #1d9bf0 0%, #7856ff 100%);
}

.profile-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: 50% 50%;
    user-select: none;
    -webkit-user-drag: none;
}

/* نوار دکمه‌های شناور روی بنر */
.profile-top-actions {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    pointer-events: none;
}

.profile-round-btn {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.profile-round-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    text-decoration: none;
}

.profile-round-btn svg {
    display: block;
    width: 20px;
    height: 20px;
}

.profile-round-btn-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

/* آواتار شناور روی لبه پایین بنر */
.profile-avatar-float {
    position: absolute;
    bottom: -66px;
    right: 16px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    border: 4px solid var(--bg-color);
    overflow: hidden;
    background: var(--bg-secondary);
    z-index: 4;
    box-sizing: border-box;
}

.profile-avatar-float img,
.profile-avatar-float .profile-avatar-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.profile-avatar-float .profile-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    background: var(--bg-secondary);
}

/* بدنه اطلاعات پروفایل */
.profile-body {
    padding: 16px;
    padding-top: 80px; /* جا برای آواتار شناور */
    border-bottom: 1px solid var(--border-color);
}

.profile-body-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-height: 42px;    /* ← ارتفاع دکمه‌ها */
    margin-bottom: 0;    /* ← حذف فاصله اضافی */
}

.profile-display-name {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--text-primary);
}

.profile-body .profile-username {
    display: block;
    color: var(--text-secondary);
    font-size: 15px;
    margin-bottom: 12px;
}

.profile-body .profile-bio {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.profile-body .profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 14px;
}

.profile-body .profile-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.profile-body .profile-meta .meta-item svg {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.profile-body .profile-meta .meta-item a {
    color: var(--accent-color);
    direction: ltr;
}

.profile-body .profile-links {
    margin-top: 12px;
    display: flex;
    gap: 14px;
}

.profile-body .profile-links a {
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    transition: color 0.2s;
}

.profile-body .profile-links a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

/* دکمه ویرایش پروفایل (سبک outline مثل X) */
.edit-profile-btn {
    padding: 8px 18px;
    border: 1px solid var(--border-color-strong);
    border-radius: 50px;
    color: var(--text-primary);
    background: transparent;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
}

.edit-profile-btn:hover {
    background: var(--bg-secondary);
    text-decoration: none;
    color: var(--text-primary);
}

/* ریست استایل قدیمی .profile-header تا با چیدمان جدید تداخل نکند */
.profile-header {
    position: static;
    padding: 0;
    border-bottom: none;
}

/* ============ ریسپانسیو ============ */
@media (max-width: 768px) {
    .profile-avatar-float {
        width: 100px;
        height: 100px;
        bottom: -50px;
        right: 12px;
        border-width: 3px;
    }
    .profile-avatar-float .profile-avatar-placeholder {
        font-size: 42px;
    }
    .profile-body {
        padding-top: 62px;
    }
    .profile-display-name {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .profile-avatar-float {
        width: 88px;
        height: 88px;
        bottom: -44px;
        right: 10px;
    }
    .profile-avatar-float .profile-avatar-placeholder {
        font-size: 36px;
    }
    .profile-body {
        padding: 14px;
        padding-top: 56px;
    }
    .profile-round-btn {
        width: 36px;
        height: 36px;
    }
    .profile-round-btn svg { width: 18px; height: 18px; }
    .profile-round-btn-icon { width: 18px; height: 18px; }
    .profile-banner {
        max-height: 160px;
    }
}

/* ============ هشدار تأیید ایمیل (پروفایل) ============ */
.verify-warning-banner {
    background: rgba(255, 212, 0, 0.1);
    border: 1px solid #ffd400;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 16px;
    text-align: center;
    color: #ffd400;
    font-size: 14px;
}
.verify-warning-banner a {
    color: #1d9bf0;
    font-weight: 600;
    margin-right: 8px;
}

/* ============================================================
   🖼️ بنر پروفایل در تنظیمات (settings.html) — Drag-to-Reposition
   ============================================================ */

.banner-preview-wrap {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 3 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    position: relative;
}

.banner-preview-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    cursor: grab;
    touch-action: none;
}

.banner-preview-wrap img:active {
    cursor: grabbing;
}

.banner-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    font-size: 13px;
}

.banner-btn {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color-strong);
    color: var(--text-primary);
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    transition: background 0.2s;
}

.banner-btn:hover {
    background: var(--bg-secondary);
}

.banner-btn-danger {
    color: #f4212e;
    border-color: rgba(244, 33, 46, 0.4);
}

.banner-btn-danger:hover {
    background: rgba(244, 33, 46, 0.1);
}

.profile-info {
    margin-top: 20px;    /* ← کنترل‌شده: فقط اندازه‌ای که زیر آواتار دربیاد */
}

/* ============================================================
   FIX FINAL: فشرده کردن فاصله پروفایل (X-Style)
   - اکشن‌ها کنار آواتار (نه زیر اون)
   - اسم دقیقاً زیر آواتار
   ============================================================ */

/* ۱. بدنه پروفایل: بدون padding بالایی، با position:relative */
.profile-body {
    padding: 16px !important;
    padding-top: 0 !important;
    position: relative !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* ۲. اکشن‌ها: کنار آواتار — سمت چپ (مخالف آواتار) */
.profile-body-actions {
    position: absolute !important;
    top: 8px !important;           /* کمی زیر لبه بنر */
    left: 16px !important;         /* در RTL = سمت چپ بصری */
    right: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    z-index: 5 !important;
}

/* ۳. اطلاعات کاربر: دقیقاً زیر آواتار (نه بیشتر) */
.profile-info {
    margin-top: 74px !important;   /* 66px (overflow آواتار) + 8px فاصله */
    padding: 0 !important;
}

/* ۴. خطوط فشرده‌تر */
.profile-display-name {
    margin: 0 0 2px 0 !important;
    line-height: 1.3 !important;
}
.profile-body .profile-username {
    margin-bottom: 8px !important;
}
.profile-body .profile-bio {
    margin: 8px 0 0 0 !important;
}
.profile-body .profile-meta {
    margin-top: 8px !important;
}