/* ==================== Chat Styles ==================== */
/* پس‌زمینه صفحه چت */
.chat-room-bg {
    background-color: transparent;
    background-image: none;
}
html.dark .chat-room-bg {
    background-color: transparent;
    background-image: none;
}
/* پیام‌ها */
.chat-bubble {
    max-width: 75%;
    padding: 0.6rem 0.9rem;
    border-radius: 1.2rem !important;
    position: relative;
    word-wrap: break-word;
    line-height: 1.6;
    font-size: 0.9rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.chat-bubble.sent {
    border-bottom-right-radius: 0.25rem !important;
    background-color: #e9d5ff;
    margin-left: auto;
    margin-right: 0.5rem;
}
html.dark .chat-bubble.sent {
    background-color: #4c1d95;
    color: #f3f4f6;
}
.chat-bubble.received {
    border-bottom-left-radius: 0.25rem !important;
    background-color: #ffffff;
    margin-right: auto;
    margin-left: 0.5rem;
    border: 1px solid #e5e7eb;
}
html.dark .chat-bubble.received {
    background-color: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

/* اسم فرستنده */
.chat-sender-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: #8b5cf6;
    margin-bottom: 0.2rem;
}
html.dark .chat-sender-name {
    color: #c4b5fd;
}

/* تصویر / استیکر در پیام */
.chat-bubble img {
    max-width: 220px;
    border-radius: 0.75rem;
    margin-top: 0.2rem;
    cursor: pointer;
    transition: transform 0.2s;
}
.chat-bubble img:hover {
    transform: scale(1.02);
}
.sticker-bubble {
    background: transparent !important;
    max-width: 140px;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
.sticker-bubble img {
    max-width: 100%;
}

/* زمان پیام */
.message-meta {
    font-size: 0.6rem;
    color: #9ca3af;
    margin-top: 0.25rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.3rem;
    direction: ltr;
}
.message-meta svg {
    width: 12px;
    height: 12px;
}

/* اسکرول سفارشی بخش پیام‌ها */
#chat-messages {
    scroll-behavior: smooth;
}

/* نوار ورودی شیشه‌ای فوق‌مدرن */
.chat-input-area {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, 0.35); /* شفافیت بسیار بالا مثل هدر مسیر */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.75rem 1rem;
    margin: 0;
    box-shadow: 0 -10px 30px -5px rgba(0, 0, 0, 0.05);
}
html.dark .chat-input-area {
    background: rgba(31, 41, 55, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 -10px 30px -5px rgba(0, 0, 0, 0.4);
}

/* باکس تایپ پیام */
.chat-input-area textarea {
    background: rgba(255, 255, 255, 0.5); /* نیمه شفاف */
    backdrop-filter: blur(8px);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 1.5rem;
    padding: 0.6rem 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}
html.dark .chat-input-area textarea {
    background: rgba(17, 24, 39, 0.5);
    border-color: rgba(139, 92, 246, 0.3);
    color: #f9fafb;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.chat-input-area textarea:focus {
    background: rgba(255, 255, 255, 0.9);
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
html.dark .chat-input-area textarea:focus {
    background: rgba(31, 41, 55, 0.9);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}

/* ==================== Pinned Messages ==================== */
/* نوار کلی پین‌ها (مات‌تر از هدر) */
#pinned-messages {
    background: rgba(250, 245, 255, 0.65); /* کمی رنگ بنفش مات */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
    padding: 0.4rem 0.5rem;
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
}
html.dark #pinned-messages {
    background: rgba(17, 24, 39, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* هر آیتم پین شده */
.pinned-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.6rem;
    margin-bottom: 0.2rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.4); /* شیشه‌ای */
    border: 1px solid rgba(255, 255, 255, 0.5);
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}
html.dark .pinned-item {
    background: rgba(55, 65, 81, 0.4);
    border-color: rgba(255, 255, 255, 0.05);
}

.pinned-item:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.1);
}
html.dark .pinned-item:hover {
    background: rgba(75, 85, 99, 0.6);
}

/* بقیه کدهای پین که داشتید دست نخورده بماند */
.pinned-item-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}
.pinned-icon {
    width: 1.1rem;
    height: 1.1rem;
    color: #8b5cf6;
    flex-shrink: 0;
}
html.dark .pinned-icon {
    color: #c4b5fd;
}
.pinned-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}
.pinned-sender {
    font-weight: 700;
    font-size: 0.7rem;
    color: #7c3aed;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.dark .pinned-sender {
    color: #c4b5fd;
}
.pinned-preview {
    font-size: 0.7rem;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
html.dark .pinned-preview {
    color: #d1d5db;
}
.pinned-remove-btn {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
    flex-shrink: 0;
}
.pinned-item:hover .pinned-remove-btn {
    opacity: 1;
}
.pinned-remove-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* دکمه‌های کنار ورودی */
.chat-input-area button {
    transition: all 0.2s;
}
.chat-input-area button:hover {
    transform: scale(1.1);
}

/* دکمه ضبط صدا */
#voice-record-btn.recording {
    animation: pulse-red 1s infinite;
}
@keyframes pulse-red {
    0%, 100% { background-color: rgba(239,68,68,0.1); }
    50% { background-color: rgba(239,68,68,0.3); }
}

/* تصاویر در مودال (برای بزرگ‌نمایی) */
.clickable-media {
    cursor: pointer;
    transition: opacity 0.2s;
}
.clickable-media:hover {
    opacity: 0.9;
}

/* بلاک حاوی آواتار و حباب */
.message-row {
    max-width: 85%;
}

/* حباب ویس فضای کامل را بگیرد */
.voice-bubble {
    max-width: 90% !important;
}

/* پلیر صوتی داخل حباب */
.voice-player {
    width: 100% !important;
    min-width: 180px;
    height: 40px;
    display: block;
    box-sizing: border-box;
}

/* چسباندن آواتار به پایین */
.chat-avatar-bottom {
    align-self: flex-end !important;
}
/* placeholder تصویر */
.message-image-placeholder {
    transition: background 0.2s;
    user-select: none;
}
.message-image-placeholder:hover {
    background-color: #e5e7eb;
}
html.dark .message-image-placeholder:hover {
    background-color: #374151;
}

/* ==================== Action Sheet Styles ==================== */

/* مخفی کردن دکمه‌های شناور قدیمی */
.message-actions {
    display: none !important;
}

/* Overlay (پس‌زمینه تیره) */
.chat-action-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.chat-action-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Bottom Sheet (منوی شیشه‌ای) */
.chat-action-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 1rem 1.5rem;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: none;
}
html.dark .chat-action-sheet {
    background: rgba(17, 24, 39, 0.8);
    border-color: rgba(55, 65, 81, 0.6);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}
.chat-action-sheet.active {
    transform: translateY(0);
}

/* Handle bar (نشانگر کشیدن) */
.action-handle {
    width: 40px;
    height: 5px;
    background-color: #d1d5db;
    border-radius: 1rem;
    margin: 0 auto 1rem;
}
html.dark .action-handle {
    background-color: #6b7280;
}

/* دکمه‌های Action */
.action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #1f2937;
    transition: all 0.2s;
    border: 1px solid rgba(229, 231, 235, 0.8);
    cursor: pointer;
    box-sizing: border-box;
}
html.dark .action-btn {
    background: rgba(55, 65, 81, 0.6);
    color: #f3f4f6;
    border-color: rgba(75, 85, 99, 0.8);
}
.action-btn:hover {
    background: #f3f4f6;
    transform: scale(1.02);
}
html.dark .action-btn:hover {
    background: #374151;
}
.action-btn svg {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
}

/* دکمه لغو */
.action-cancel-btn {
    width: 100%;
    padding: 0.9rem;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-radius: 1rem;
    font-weight: 700;
    text-align: center;
    margin-top: 0.5rem;
    cursor: pointer;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
html.dark .action-cancel-btn {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}
/* جداکننده تاریخ در چت */
.chat-date-separator {
    position: relative;
    z-index: 2;
}

.chat-date-separator > div {
    border: 1px solid rgba(0, 0, 0, 0.05);
}

html.dark .chat-date-separator > div {
    border: 1px solid rgba(255, 255, 255, 0.05);
}
/* دکمه حذف در Action Sheet */
.action-delete-btn span {
    color: #ef4444 !important; /* red-500 */
}

.action-delete-btn:hover {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

html.dark .action-delete-btn:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

.action-delete-btn svg {
    color: #ef4444 !important;
}
#action-copy-btn svg {
    color: #6366f1; /* indigo */
}
#action-copy-btn:hover {
    background-color: rgba(99, 102, 241, 0.1);
}
/* ==================== Pinned Messages ==================== */
#pinned-messages {
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    background: rgba(250, 245, 255, 0.7);
    padding: 0.4rem 1rem;                 /* کمی padding راست/چپ برای تنفس */
    overflow-x: hidden;                   /* جلوگیری از اسکرول افقی */
    box-sizing: border-box;
    width: 100%;
}
html.dark #pinned-messages {
    background: rgba(88, 28, 135, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
}

.pinned-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.25rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(139, 92, 246, 0.15);
    max-width: 100%;
    box-sizing: border-box;
}
html.dark .pinned-item {
    background: rgba(55, 65, 81, 0.5);
    border-color: rgba(139, 92, 246, 0.3);
}
.pinned-item:hover {
    background: rgba(139, 92, 246, 0.08);
}

.pinned-item-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;                        /* اجازه کوچک‌شدن به فرزند flex */
    flex: 1;
    overflow: hidden;                    /* محتوا بیش از حد مخفی شود */
}

.pinned-icon {
    width: 1.1rem;
    height: 1.1rem;
    color: #8b5cf6;
    flex-shrink: 0;
}
html.dark .pinned-icon {
    color: #c4b5fd;
}

.pinned-text {
    display: flex;
    flex-direction: column;
    min-width: 0;                        /* مهم: جلوگیری از گسترش بی‌رویه */
    flex: 1;
    overflow: hidden;
}

.pinned-sender {
    font-weight: 700;
    font-size: 0.7rem;
    color: #7c3aed;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.dark .pinned-sender {
    color: #c4b5fd;
}

.pinned-preview {
    font-size: 0.7rem;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
html.dark .pinned-preview {
    color: #d1d5db;
}

.pinned-remove-btn {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
    flex-shrink: 0;
}
.pinned-item:hover .pinned-remove-btn {
    opacity: 1;
}
.pinned-remove-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}
/* تنظیمات نمایش پیام‌های پین‌شده در موبایل */
#pinned-messages {
    padding: 0.2rem 0.5rem;          /* فضای خیلی کمتر */
}

.pinned-item {
    padding: 0.25rem 0.5rem;         /* حاشیه‌ی داخلی کمتر */
    margin-bottom: 0.15rem;          /* فاصله بین آیتم‌ها */
}

.pinned-icon {
    width: 0.9rem;                   /* آیکون کوچکتر */
    height: 0.9rem;
}

.pinned-sender {
    font-size: 0.65rem;              /* اسم فرستنده کوچکتر */
}

.pinned-preview {
    font-size: 0.65rem;              /* پیش‌نمایش کوچکتر */
}
/* فشرده‌سازی input های صفحه auth */
#login-form .input-field,
#register-form .input-field {
    padding: 0.55rem 0.85rem !important;
    font-size: 0.875rem !important;
}

/* کاهش فاصله بین تب‌ها و فرم */
#login-form,
#register-form {
    margin-top: 0.5rem !important;
}

/* کوچک‌تر کردن تب‌های ورود/ثبت‌نام */
.auth-tab-btn {
    padding: 0.45rem 1rem !important;
    font-size: 0.8rem !important;
}

/* کاهش فاصله تب‌ها از بالا */
.mentor-card .flex.justify-center.mb-8 {
    margin-bottom: 0.75rem !important;
}
/* ==================== تب‌های ورود/ثبت‌نام بازطراحی شده ==================== */

/* کانتینر تب‌ها */
.auth-tabs-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
    background: rgba(139, 92, 246, 0.06);
    padding: 0.35rem;
    border-radius: 1rem;
    position: relative;
    gap: 0.25rem;
}

html.dark .auth-tabs-container {
    background: rgba(139, 92, 246, 0.1);
}

/* استایل پایه تب */
.auth-tab-btn {
    flex: 1;
    padding: 0.6rem 1rem;
    border-radius: 0.85rem;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    color: #6b7280;
    outline: none;
}

html.dark .auth-tab-btn {
    color: #9ca3af;
}

/* تب فعال - با گرادینت بنفش */
.auth-tab-btn.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4), 
                0 1px 3px rgba(0, 0, 0, 0.08);
    transform: scale(1.02);
    letter-spacing: -0.01em;
}

html.dark .auth-tab-btn.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5),
                0 1px 3px rgba(0, 0, 0, 0.2);
}

/* تب غیرفعال - hover */
.auth-tab-btn:not(.active):hover {
    color: #7c3aed;
    background: rgba(139, 92, 246, 0.08);
    transform: translateY(-1px);
}

html.dark .auth-tab-btn:not(.active):hover {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.12);
}

/* افکت ripple روی کلیک */
.auth-tab-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.85rem;
    background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.auth-tab-btn:active::after {
    opacity: 1;
    transition: opacity 0s;
}

/* انیمیشن تغییر فرم */
#login-form,
#register-form {
    animation: formFadeSlide 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes formFadeSlide {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* وقتی فرم مخفی میشه انیمیشن خروج هم داشته باشه */
#login-form.hidden,
#register-form.hidden {
    display: none !important;
}

/* برای اینکه انیمیشن خروج هم کار کنه، از transition group استفاده می‌کنیم */
.form-wrapper {
    position: relative;
    overflow: hidden;
}

/* نشانگر sliding background برای تب فعال */
.auth-tabs-container {
    position: relative;
    overflow: hidden;
}

/* حذف استایل‌های قبلی auth-tab-btn که تداخل دارن */
.auth-tab-btn.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4), 
                0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* فوکوس روی input ها */
#login-form .input-field:focus,
#register-form .input-field:focus {
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
    transform: translateY(-1px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* دکمه submit هم گرادینت بنفش */
#login-submit-btn,
#register-submit-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

#login-submit-btn:hover,
#register-submit-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5) !important;
}

#login-submit-btn:active,
#register-submit-btn:active {
    transform: translateY(0) scale(0.98) !important;
}
/* دکمه‌های تب پنل استاد */
.admin-tab-btn {
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 0.75rem;
}
.admin-tab-btn:not(.active) {
    color: #4b5563; /* gray-600 */
}
html.dark .admin-tab-btn:not(.active) {
    color: #9ca3af; /* gray-400 */
}
.admin-tab-btn.active {
    background-color: #f3e8ff; /* purple-100 */
    color: #6b21a8; /* purple-800 */
    font-weight: 600;
}
html.dark .admin-tab-btn.active {
    background-color: rgba(88, 28, 135, 0.25); /* purple-900/25 */
    color: #d8b4fe; /* purple-300 */
}
/* رفع برش استوری‌ها هنگام هاور */
#stories-container {
    scroll-snap-type: x mandatory;
}
#stories-container > div {
    scroll-snap-align: center;
}
/* ارتقای فیلد جستجو و تب‌های دسته‌بندی در بخش آزمون‌ها */
#quiz-search-input {
    background-color: rgba(255,255,255,0.45) !important;
    backdrop-filter: blur(10px);
}
html.dark #quiz-search-input {
    background-color: rgba(55,65,81,0.45) !important;
}
.category-tab-btn.active {
    border-bottom-color: #7c3aed !important;
    color: #6d28d9 !important;
}
/* ==================== SEPIA THEME ==================== */
html.theme-sepia body {
    background-color: #f4ecd8 !important;
    background-image: none !important;
    color: #4b3b2b !important;
}
html.theme-sepia .card,
html.theme-sepia .mentor-card,
html.theme-sepia .bg-white\/40,
html.theme-sepia .bg-white\/80 {
    background-color: rgba(255, 248, 235, 0.85) !important;
    border-color: #d6c8a9 !important;
    box-shadow: 0 10px 25px rgba(139, 69, 19, 0.1) !important;
    backdrop-filter: blur(8px) !important;
}
html.theme-sepia .input-field {
    background-color: #fffaf0 !important;
    border-color: #c9b896 !important;
    color: #4b3b2b !important;
}
html.theme-sepia .input-field::placeholder {
    color: #8b7355 !important;
}
html.theme-sepia .btn-primary {
    background-image: linear-gradient(to right, #a0522d, #8b4513, #a0522d) !important;
    box-shadow: 0 4px 10px rgba(139, 69, 19, 0.3) !important;
}
html.theme-sepia .btn-primary:hover:not(:disabled) {
    background-position: 100% 0 !important;
    box-shadow: 0 8px 20px rgba(139, 69, 19, 0.4) !important;
}
html.theme-sepia .option {
    background-color: #fff7e6 !important;
    border-color: #d6c8a9 !important;
    color: #4b3b2b !important;
}
html.theme-sepia .option:hover {
    background-color: #efe3ce !important;
    border-color: #8b5a2b !important;
}
html.theme-sepia .option.selected {
    background-color: #e6d5b8 !important;
    border-color: #8b4513 !important;
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.3) !important;
}
html.theme-sepia .tab-btn.active {
    background-color: #8b4513 !important;
    color: #fff8e7 !important;
}
html.theme-sepia .category-tab-btn.active {
    background-color: transparent !important; /* جلوگیری از قهوه ای شدن کل باکس */
    color: #8b4513 !important; /* متن قهوه ای تیره */
    border-bottom-color: #8b4513 !important; /* خط زیرین قهوه ای تیره */
}

/* برای زمانی که ماوس روی تب‌های غیرفعال می‌رود */
html.theme-sepia .category-tab-btn:not(.active):hover {
    background-color: transparent !important;
    color: #a0522d !important;
    border-bottom-color: #c9b896 !important;
}
html.theme-sepia .tab-btn:not(.active):hover {
    background-color: #efe3ce !important;
    color: #5c3317 !important;
}
/* مودال‌های شیشه‌ای در تم کاغذی */
html.theme-sepia .custom-modal-content {
    background: rgba(255, 246, 229, 0.85) !important; /* کرم نیمه‌شفاف */
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    color: #4b3b2b !important;
    border: 1px solid rgba(139, 69, 19, 0.2) !important;
    box-shadow: 0 25px 50px -12px rgba(139, 69, 19, 0.15) !important;
}

/* دکمه انصراف/بستن در تم کاغذی */
html.theme-sepia .custom-modal-content .modal-cancel-btn {
    background-color: rgba(139, 69, 19, 0.05) !important;
    border-color: rgba(139, 69, 19, 0.2) !important;
    color: #8b4513 !important;
}
html.theme-sepia .custom-modal-content .modal-cancel-btn:hover {
    background-color: rgba(139, 69, 19, 0.1) !important;
}

/* عنوان مودال در تم کاغذی */
html.theme-sepia .custom-modal-content h3 {
    background: none !important;
    -webkit-text-fill-color: #4b3b2b !important;
    color: #4b3b2b !important;
}
html.theme-sepia .toast-notification {
    background-color: #8b4513 !important;
}
/* سایر المان‌های پرکاربرد */
html.theme-sepia .bg-white,
html.theme-sepia [style*="background-color: white"] {
    background-color: #fffaf1 !important;
}
html.theme-sepia .text-gray-800,
html.theme-sepia .text-gray-900,
html.theme-sepia h1, html.theme-sepia h2, html.theme-sepia h3 {
    color: #4b3b2b !important;
}
html.theme-sepia .text-gray-600,
html.theme-sepia .text-gray-700 {
    color: #5c4a33 !important;
}
html.theme-sepia .border-gray-200,
html.theme-sepia .border-gray-100 {
    border-color: #d6c8a9 !important;
}
html.theme-sepia .chat-bubble.sent {
    background-color: #d2b48c !important;
    color: #2c1e0e !important;
}
html.theme-sepia .chat-bubble.received {
    background-color: #fff6e5 !important;
    border-color: #c9b896 !important;
    color: #3b2c1a !important;
}
/* نوار بالایی و نویگیشن */
html.theme-sepia .sticky.top-0 {
    background-color: rgba(255, 248, 235, 0.9) !important;
    border-color: #c9b896 !important;
}
html.theme-sepia #bottom-nav {
    background-color: rgba(255, 248, 235, 0.7) !important;
    border-color: #d6c8a9 !important;
}
/* استایل پلیر ویدیو - هماهنگ با پلتفرم */
.custom-video-player {
    width: 100%;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.4);
    background-color: #0f0f0f;
}

.custom-video-player video {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    outline: none;
}

/* استایل کنترل‌های پیش‌فرض مرورگر (فقط در مرورگرهای مبتنی بر chromium قابل شخصی‌سازی جزئی) */
.custom-video-player video::-webkit-media-controls-panel {
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3));
    border-radius: 0.75rem;
    padding: 0 10px;
}

.custom-video-player video::-webkit-media-controls-play-button,
.custom-video-player video::-webkit-media-controls-volume-slider,
.custom-video-player video::-webkit-media-controls-timeline {
    filter: drop-shadow(0 0 2px #8b5cf6);
}

/* برای مرورگرهایی که از وی‌پاد پشتیبانی نمی‌کنند، یک استایل جایگزین */
@supports not (selector(::-webkit-media-controls-panel)) {
    .custom-video-player {
        border: 2px solid rgba(139, 92, 246, 0.5);
    }
}

/* انیمیشن ورود پلیر */
@keyframes fadeScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.custom-video-player {
    animation: fadeScale 0.3s ease-out;
}
/* مودال ویدئو – تمام صفحه در موبایل، با حداکثر عرض مشخص در دسکتاپ */
#video-modal {
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(4px);
}

#video-modal .modal-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

#player {
    width: 100%;
    max-width: 1152px;    /* حداکثر عرض دلخواه */
    height: auto;
    aspect-ratio: 1152 / 860;   /* نسبت ابعاد 4:3 تقریبی */
    background: #000;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* برای نمایشگرهای بزرگتر از 1200px */
@media (min-width: 1200px) {
    #player {
        width: 1152px;
        height: 860px;
        aspect-ratio: unset;
    }
}

/* در موبایل، پلیر کل عرض را می‌گیرد و ارتفاع متناسب حفظ می‌شود */
@media (max-width: 640px) {
    #player {
        border-radius: 0.75rem;
    }
}

/* وسط‌چین کردن محتوای iframe داخل پلیر */
#player iframe {
    width: 100% !important;
    height: 100% !important;
    display: block;
    margin: 0 auto;
}
/* انیمیشن خروج برای مودال‌ها */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes modalPopOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
}
.modal-exit-backdrop {
    animation: fadeOut 0.3s ease-out forwards;
}
.modal-exit-content {
    animation: modalPopOut 0.3s ease-out forwards;
}
/* ثابت نگه داشتن ستون درصد در هنگام اسکرول افقی */
.sticky-percent {
    position: sticky !important;
    right: 0 !important; /*因为在 RTL 布局中，右侧是固定的 */
    background-color: inherit !important;
    z-index: 15 !important;
    box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);
}

/* برای هدر جدول نیز باید sticky باشد */
thead th.sticky-percent {
    background-color: #f3f4f6; /* matching thead background */
    z-index: 20;
}
html.dark thead th.sticky-percent {
    background-color: #374151;
}
/* استایل نوار اسکرول افقی */
.overflow-x-auto::-webkit-scrollbar {
    height: 8px;
}
.overflow-x-auto::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
    background: #c4b5fd;
    border-radius: 10px;
}
.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #a78bfa;
}
/* Scrollbar اختصاصی برای پنل تنظیمات (باریک و بنفش) */
#settings-panel::-webkit-scrollbar {
    width: 4px;
}
#settings-panel::-webkit-scrollbar-track {
    background: rgba(203, 213, 225, 0.3);
    border-radius: 10px;
}
#settings-panel::-webkit-scrollbar-thumb {
    background: #c084fc; /* purple-400 */
    border-radius: 10px;
}
#settings-panel::-webkit-scrollbar-thumb:hover {
    background: #a855f7; /* purple-500 */
}
#settings-panel {
    scrollbar-width: thin;
    scrollbar-color: #c084fc rgba(203, 213, 225, 0.3);
}
/* ===== REACTIONS STYLES ===== */
.chat-popover {
    position: fixed;
    background: rgba(30, 30, 40, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 28px;
    border: 1px solid rgba(139, 92, 246, 0.4);
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(139, 92, 246, 0.2) inset;
    z-index: 10000;
    padding: 8px;
    min-width: 180px;
    max-width: 300px;
    display: none;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: scale(0.95) translateY(5px);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    /* برای انیمیشن ورود توسط JS اضافه می‌شود */
}
.chat-popover.show {
    opacity: 1;
    transform: scale(1) translateY(0);
}
html.dark .chat-popover {
    background: rgba(20, 20, 30, 0.85);
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(139, 92, 246, 0.3) inset;
}

/* ردیف ایموجی‌ها با اسکرول نرم */
.chat-popover-emoji-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.chat-popover-emoji-row::-webkit-scrollbar {
    height: 3px;
}
.chat-popover-emoji-row::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.chat-popover-emoji-row::-webkit-scrollbar-thumb {
    background: #a855f7;
    border-radius: 10px;
}
html.dark .chat-popover-emoji-row {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* هر ایموجی */
.chat-popover-emoji {
    font-size: 1.6rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    flex-shrink: 0;
}
.chat-popover-emoji:hover {
    background: rgba(139, 92, 246, 0.2);
    transform: scale(1.15);
    backdrop-filter: blur(4px);
}

/* دکمه‌های اکشن (پاسخ، کپی، ...) */
.chat-popover-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    font-weight: 500;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.03);
    border: none;
}
html.dark .chat-popover-btn {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.02);
}
.chat-popover-btn:hover {
    background: rgba(139, 92, 246, 0.25);
    transform: translateX(-3px);
    backdrop-filter: blur(4px);
}
.chat-popover-btn.delete {
    color: #f87171;
}
.chat-popover-btn.delete:hover {
    background: rgba(239, 68, 68, 0.2);
}
.chat-popover-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}
.reaction-badge {
    background: rgba(0,0,0,0.05);
    border-radius: 9999px;        /* ← این خط را تغییر دهید: بیضی کامل */
    padding: 2px 12px;            /* ← کمی فضای داخلی بیشتر برای ظاهر بهتر */
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;                     /* ← فاصله بین ایموجی و عدد */
}
html.dark .reaction-badge {
    background: rgba(255,255,255,0.1);
}
.reaction-badge:hover {
    background: #e9d5ff;
    transform: scale(1.05);
}
/* ==================== دکمه ارسال مدرن ==================== */
#chat-send-btn {
    background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
    border-radius: 9999px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
}
#chat-send-btn:hover {
    transform: scale(1.05) translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4) !important;
}
#chat-send-btn:active {
    transform: scale(0.95) !important;
}
#chat-send-btn svg {
    transition: transform 0.2s ease;
}
#chat-send-btn:hover svg {
    transform: translateX(2px) rotate(-5deg);
}
#chat-send-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}
#chat-send-btn:active::after {
    width: 120%;
    height: 120%;
}
.chat-send-btn-loading {
    pointer-events: none;
    opacity: 0.7;
}
.chat-send-btn-loading svg {
    animation: spin 1s linear infinite;
    transform-origin: center;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
#chat-message-input {
    overflow-y: auto;
    resize: none;
    transition: height 0.1s ease;
}
#voice-record-btn {
    touch-action: none; /* جلوگیری از اسکرول صفحه هنگام لمس */
    user-select: none;  /* جلوگیری از انتخاب متن */
    -webkit-tap-highlight-color: transparent;
}
.group-card {
    transition: all 0.25s ease;
}
.group-card:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 92, 246, 0.5);
}
/* افکت هایلایت زیبا برای پیام پین شده */
.highlight-message {
    animation: softGlow 0.4s ease-out, fadeOutGlow 2s ease-in forwards;
    border-radius: 1rem;
    position: relative;
    z-index: 10;
}

@keyframes softGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
        background-color: rgba(139, 92, 246, 0.1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.3);
        background-color: rgba(139, 92, 246, 0.2);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
        background-color: rgba(139, 92, 246, 0.15);
    }
}

@keyframes fadeOutGlow {
    0% {
        box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
        background-color: rgba(139, 92, 246, 0.15);
    }
    70% {
        background-color: rgba(139, 92, 246, 0.05);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
        background-color: transparent;
    }
}

/* اطمینان از اینکه افکت روی حباب چت تأثیر نگذارد (اختیاری) */
.chat-bubble.highlight-message {
    transition: all 0.2s ease;
}
/* دکمه اسکرول به پایین - نسخه شیشه‌ای مدرن */
#chat-scroll-bottom-btn {
    position: absolute;
    bottom: 85px;
    left: 20px;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    z-index: 45;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
}

#chat-scroll-bottom-btn:not(.hidden) {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

#chat-scroll-bottom-btn:hover {
    background: rgba(139, 92, 246, 0.7);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.35);
    transform: scale(1.08);
}

#chat-scroll-bottom-btn:active {
    transform: scale(0.95);
}

/* آیکون داخل دکمه */
#chat-scroll-bottom-btn svg {
    width: 24px;
    height: 24px;
    stroke: white;
    stroke-width: 2;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: transform 0.2s ease;
}

#chat-scroll-bottom-btn:hover svg {
    transform: translateY(2px);
}

/* نسخه موبایل (کمی کوچک‌تر) */
@media (max-width: 640px) {
    #chat-scroll-bottom-btn {
        width: 42px;
        height: 42px;
        bottom: 75px;
        left: 16px;
    }
    #chat-scroll-bottom-btn svg {
        width: 20px;
        height: 20px;
    }
}
/* --- Telegram-like User Profile Modal --- */
#user-profile-modal {
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.4);
    transition: opacity 0.2s ease;
}
.modal-content-custom {
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1), opacity 0.2s ease;
    will-change: transform, opacity;
}
/* ظاهر شیشه‌ای و مدرن برای مودال پروفایل تلگرامی */
#user-profile-modal .modal-content-custom {
    max-width: 90vw;
    width: 360px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.65) !important; /* سفید بسیار شفاف */
    backdrop-filter: blur(24px) !important; /* بلر قوی */
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 25px 50px -12px rgba(109, 40, 217, 0.25); /* سایه بنفش ملایم */
    overflow: hidden;
}
html.dark #user-profile-modal .modal-content-custom {
    background: rgba(31, 41, 55, 0.65) !important; /* سرمه‌ای شفاف */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}
#user-profile-modal .modal-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    z-index: 2;
}
html.dark #user-profile-modal .modal-close {
    background: rgba(255,255,255,0.15);
}
#user-profile-modal .modal-close:hover {
    background: rgba(0,0,0,0.2);
}
#user-profile-modal .avatar-wrapper {
    width: 88px;
    height: 88px;
    margin: 28px auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #c084fc);
    padding: 2px;
}
#user-profile-modal .avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
html.dark #user-profile-modal .avatar-inner {
    background: #1f2937;
}
#user-profile-modal .user-name {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    margin-top: 10px;
    color: #1f2937;
}
html.dark #user-profile-modal .user-name {
    color: #f3f4f6;
}
#user-profile-modal .user-role {
    text-align: center;
    font-size: 0.7rem;
    color: #8b5cf6;
    background: rgba(139,92,246,0.12);
    display: inline-block;
    padding: 3px 12px;
    border-radius: 30px;
    margin: 8px auto 0;
    width: fit-content;
}
#user-profile-modal .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 20px 20px 24px;
}
#user-profile-modal .stat-card {
    background: rgba(0,0,0,0.03);
    border-radius: 20px;
    padding: 12px 8px;
    text-align: center;
    transition: 0.1s;
}
html.dark #user-profile-modal .stat-card {
    background: rgba(255,255,255,0.05);
}
#user-profile-modal .stat-icon {
    font-size: 1.5rem;
    margin-bottom: 4px;
}
#user-profile-modal .stat-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: -0.2px;
}
html.dark #user-profile-modal .stat-label {
    color: #9ca3af;
}
#user-profile-modal .stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-top: 4px;
}
html.dark #user-profile-modal .stat-value {
    color: #f9fafb;
}
#user-profile-modal .privacy-note {
    font-size: 0.65rem;
    text-align: center;
    padding: 12px 16px;
    background: rgba(0,0,0,0.02);
    border-top: 0.5px solid rgba(0,0,0,0.05);
    color: #6b7280;
}
html.dark #user-profile-modal .privacy-note {
    background: rgba(255,255,255,0.02);
    border-top-color: rgba(255,255,255,0.05);
    color: #9ca3af;
}
/* تنظیمات مودال تصویر برای زوم لمسی */
#story-viewer-modal {
    touch-action: none; /* جلوگیری از اسکرول صفحه هنگام زوم روی تصویر */
}

#story-viewer-image {
    transform-origin: center center;
    transition: transform 0.05s linear; /* نرمی در هنگام زوم */
    will-change: transform;
    cursor: zoom-in;
}

/* وقتی تصویر بزرگ‌تر از ۱ است، حالت cursor تغییر کند */
#story-viewer-image[data-scale="1"] {
    cursor: zoom-in;
}
#story-viewer-image[data-scale]:not([data-scale="1"]) {
    cursor: grab;
}
#story-viewer-image[data-scale]:not([data-scale="1"]):active {
    cursor: grabbing;
}
.discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #10b981, #34d399);
    color: white;
    font-size: 1rem;
    font-weight: 800;
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35);
    backdrop-filter: blur(4px);
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: soft-pulse 2s infinite ease-in-out;
}
.discount-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.5);
}
@keyframes soft-pulse {
    0%, 100% { opacity: 0.95; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}
html.dark .discount-badge {
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 4px 10px rgba(5, 150, 105, 0.4);
}
/* --- بهبود اسکرول نمودارها --- */
        .chart-scroll-container {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch; /* اسکرول بسیار نرم و پرتابی در موبایل */
            scroll-behavior: smooth;
            padding-bottom: 0.5rem;
            cursor: grab; /* تغییر شکل ماوس در کامپیوتر */
        }
        .chart-scroll-container:active {
            cursor: grabbing;
        }
        .chart-scroll-container::-webkit-scrollbar {
            height: 6px;
        }
        .chart-scroll-container::-webkit-scrollbar-track {
            background: rgba(139, 92, 246, 0.05);
            border-radius: 10px;
        }
        .chart-scroll-container::-webkit-scrollbar-thumb {
            background: rgba(139, 92, 246, 0.3);
            border-radius: 10px;
        }
        .chart-scroll-container::-webkit-scrollbar-thumb:hover {
            background: rgba(139, 92, 246, 0.5);
        }
        /* --- استفاده از GPU برای نرم شدن اسکرول تنظیمات و فرم‌ها --- */
        #settings-panel {
            -webkit-overflow-scrolling: touch; /* فعال‌سازی اسکرول پرتابی و بسیار نرم در موبایل */
            overscroll-behavior-y: contain; /* جلوگیری از کشیده شدن کل صفحه */
            scroll-behavior: smooth;
        }

        #login-form, #register-form {
            will-change: transform, opacity; /* آماده‌باش به کارت گرافیک گوشی */
            backface-visibility: hidden; /* جلوگیری از پرپر زدن انیمیشن */
            transform: translateZ(0); /* انتقال پردازش از CPU به GPU */
        }
        /* انیمیشن پالس و حرکت کشویی پیکان راهنمای صوتی به سمت چپ */
@keyframes slideLeftArrow {
    0%, 100% { 
        transform: translateX(0); 
        opacity: 0.4; 
    }
    50% { 
        transform: translateX(-6px); 
        opacity: 1; 
    }
}

.animate-slide-left-arrow {
    animation: slideLeftArrow 1.2s infinite ease-in-out;
    display: inline-block;
}
/* بازطراحی شیشه‌ای، فشرده و ۱۰۰٪ واکنش‌گرا تصویر مقالات (بدون حذف یا برش لبه‌ها) */

/* ۱. بهینه‌سازی کانتینر نگهدارنده تصویر مقاله */
#blog-posts-container .relative.w-full.h-48 {
    /* حذف ارتفاع سخت‌کد شده تلویند در موبایل و دسکتاپ */
    height: auto !important; 
    /* تعریف نسبت ابعاد استاندارد سینمایی ۱۶:۹ برای پایداری در تمام نمایشگرها */
    aspect-ratio: 16 / 9 !important; 
    background-color: rgba(15, 23, 42, 0.4) !important; /* پس‌زمینه شیشه‌ای تیره */
    border-radius: 1.5rem 1.5rem 0 0 !important; /* هماهنگی نرم با لبه‌های بالایی کارت */
}

/* برای تصاویر در دسکتاپ (ابعاد استاندارد کارت‌های بزرگتر) */
@media (min-width: 768px) {
    #blog-posts-container .relative.w-full.h-48 {
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
    }
}

/* ۲. بهینه‌سازی تگ تصویر درون کادر */
#blog-posts-container img {
    width: 100% !important;
    height: 100% !important;
    /* نمایش کامل کل عکس بدون کشیدگی و بدون برش خوردن لبه‌ها */
    object-fit: contain !important; 
    transition: transform 0.4s ease-in-out;
}

/* افکت بزرگ‌نمایی ملایم تصویر روی هاور دسکتاپ */
#blog-posts-container .group:hover img {
    transform: scale(1.03);
}

/* ۳. بازطراحی توست به سبک شیشه‌ای درخشان و فشرده (قوانین قبلی توست بدون تغییر) */
.toast-notification {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 1.25rem);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-right: 3.5px solid #6366f1;
    color: #ffffff;
    padding: 0.65rem 1.15rem;
    border-radius: 0.85rem;
    font-weight: 700;
    font-size: 0.8rem;
    direction: rtl;
    text-align: right;
    max-width: 85vw;
    width: max-content;
    white-space: nowrap;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.3), 0 5px 15px -5px rgba(0, 0, 0, 0.2);
    z-index: 999999; 
    opacity: 0;
    animation: slideDownIn 0.35s cubic-bezier(0.19, 1, 0.22, 1) forwards, 
              slideUpOut 0.35s 2.65s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.toast-success { border-right-color: #10b981 !important; }
.toast-error { border-right-color: #f43f5e !important; }
.toast-info { border-right-color: #6366f1 !important; }

@keyframes slideDownIn { from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.96); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes slideUpOut { from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } to { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.96); } }

      /* تنظیم فاصله امن از بالای صفحه (ناچ گوشی) */
.safe-pt {
    /* عدد 0.75rem همان پدینگ پیش‌فرض (py-3) هدر شماست که با ارتفاع ناچ جمع می‌شود */
    padding-top: calc(env(safe-area-inset-top) + 0.75rem) !important;
}
        body { 
            font-family:'Vazir', sans-serif; 
            background-color: #f3f4f6; /* A neutral fallback */
            background-image:
                radial-gradient(at 0% 0%, hsla(253, 100%, 95%, 1) 0px, transparent 50%),
                radial-gradient(at 100% 0%, hsla(280, 100%, 90%, 1) 0px, transparent 50%),
                radial-gradient(at 100% 100%, hsla(240, 100%, 90%, 1) 0px, transparent 50%),
                radial-gradient(at 0% 100%, hsla(300, 100%, 95%, 1) 0px, transparent 50%);
            background-attachment: fixed; /* Keep the gradient fixed during scroll */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .hidden { display: none; }
        .card { 
            background-color: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 1.5rem; 
            box-shadow: 0 20px 30px -10px rgba(109, 40, 217, 0.2); 
            padding: 1.5rem; /* Base padding for mobile */
            transition: all 0.3s ease-in-out; 
        }
        @media (min-width: 640px) { /* sm breakpoint */
            .card {
                padding: 2.5rem; /* Larger padding for larger screens */
            }
        }
        .btn { 
            padding: 0.75rem 1.5rem; 
            border-radius: 0.75rem; 
            font-weight: 700; 
            color: white; 
            transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-position 0.4s ease;
            cursor: pointer; 
            display: inline-flex; 
            align-items: center; 
            justify-content: center;
            border: none;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            overflow: hidden;
            position: relative;
        }
        .btn:disabled { 
            background-image: none;
            background-color: #9ca3af; 
            cursor: not-allowed; 
            box-shadow: none;
        }
        .btn-primary { 
            background-image: linear-gradient(to right, #8b5cf6, #7c3aed, #a78bfa, #8b5cf6);
            background-size: 200% auto;
            background-position: 0% 0%;
        }
        .btn-primary:hover:not(:disabled) { 
            background-position: 100% 0%;
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.4), 0 4px 6px -2px rgba(124, 58, 237, 0.2);
        }
        .btn:active:not(:disabled) {
            transform: translateY(-1px) scale(0.98);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .input-field { 
            width: 100%; 
            /* FIX: Reduced top/bottom padding to make fields shorter */
            padding: 0.65rem 0.85rem; 
            border-radius: 0.75rem; 
            border: 1px solid #d1d5db;
            background-color: rgba(255, 255, 255, 0.5);
            transition: all 0.2s ease;
        }
        .input-field:focus {
            outline: none;
            border-color: #a78bfa;
            box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.4);
        }
        .option { 
            border: 2px solid #e5e7eb; 
            padding: 0.75rem; 
            border-radius: 0.75rem; 
            cursor: pointer; 
            transition: all 0.2s ease-in-out;
            background-color: rgba(255, 255, 255, 0.4);
        }
        .option:hover { 
            border-color: #8b5cf6; 
            background-color: #f5f3ff; 
            transform: translateY(-2px) scale(1.01);
        }
        .option.selected { 
            background-color: #ede9fe; 
            border-color: #8b5cf6; 
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3); 
        }
        .tab-btn { 
            padding: 0.75rem 1rem; 
            border-radius: 0.75rem; 
            font-weight: 600; 
            border: 2px solid transparent; 
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        .tab-btn.active { 
            background-color: #8b5cf6; 
            color: white; 
            box-shadow: 0 4px 10px -2px rgba(139, 92, 246, 0.4); 
        }
        .tab-btn:not(.active):hover {
            background-color: #f5f3ff;
            color: #7c3aed;
        }

                /* --- UPDATED AUTH TAB STYLES (Mentor Edition) --- */
        .auth-tab-btn {
            padding: 0.6rem 1.5rem;
            border-radius: 0.85rem;
            font-weight: 700;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            position: relative;
            z-index: 1;
        }
        .auth-tab-btn.active {
            background-color: white;
            color: #6d28d9; /* purple-700 */
            box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.08);
        }
        html.dark .auth-tab-btn.active {
            background-color: #374151; /* gray-700 */
            color: #c4b5fd; /* purple-300 */
            box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.3);
        }
        .auth-tab-btn:not(.active) {
            background-color: transparent;
            color: #6b7280; /* gray-500 */
        }
        .auth-tab-btn:not(.active):hover {
            color: #7c3aed; /* purple-700 */
        }
        html.dark .auth-tab-btn:not(.active):hover {
            color: #c4b5fd;
        }
        /* --- END UPDATED AUTH TAB STYLES --- */
        /* --- NEW STYLES FOR CATEGORY TABS --- */
        /* Override .tab-btn padding and border-radius to fit the line-tab style */
        .category-tab-btn {
            padding: 0.6rem 0.25rem; /* Smaller padding */
            font-size: 0.9rem; /* Smaller font */
            border-radius: 0; /* Remove rounded corners for a tab look */
            border-width: 0 0 3px 0; /* Only bottom border */
            border-bottom-color: transparent; /* Default transparent border */
            background-color: transparent !important; /* Ensure no bg color */
            color: #6b7280; /* text-gray-500 */
            box-shadow: none !important; /* Remove shadow */
        }
        
        /* Style for the active category tab */
        .category-tab-btn.active {
            background-color: transparent; /* Override .tab-btn.active */
            color: #8b5cf6; /* Keep the brand color for text */
            border-bottom-color: #8b5cf6; /* Active line */
            box-shadow: none; /* Override .tab-btn.active shadow */
        }

        /* Style for hover (non-active) */
        .category-tab-btn:not(.active):hover {
            background-color: transparent; /* Override .tab-btn hover */
            color: #7c3aed; /* Darker purple on hover */
            border-bottom-color: #c4b5fd; /* Lighter purple line on hover */
        }
        /* --- END OF NEW STYLES --- */

        /* --- STYLES FOR TAB SCROLL INDICATOR --- */
        .tab-scroll-wrapper {
            position: relative;
        }

        /* Hide scrollbar - MOVED from .tab-scroll-wrapper */
        #inner-tab-scroller {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
        #inner-tab-scroller::-webkit-scrollbar {
            display: none; /* Safari and Chrome */
        }
        
        /* Gradient fade-out effect for RTL (on the left) */
        .tab-scroll-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: -2px; /* Cover the border-b */
            width: 50px; /* Width of the fade */
            pointer-events: none; /* Allow clicks through */
            /* Fades from transparent to a light purple (violet-100) */
            background: linear-gradient(to left, rgba(237, 233, 254, 0) 0%, rgba(237, 233, 254, 1) 100%);
            z-index: 1; /* Sit above tabs but below arrow */
        }
        
        /* Arrow icon for RTL (on the left) */
        .tab-scroll-wrapper::before {
            /* Inline SVG arrow, color-encoded for data URI */
            content: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="%238b5cf6" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>');
            position: absolute;
            left: 8px; 
            top: 50%;
            /* Adjust vertical alignment based on new tab height */
            transform: translateY(-70%); 
            pointer-events: none;
            z-index: 2; /* On top of the fade */
            opacity: 0.7;
            /* animation: pulse-arrow 1.8s infinite ease-in-out; -- REMOVED */
        }
        
        @keyframes pulse-arrow {
            /* -- ANIMATION NO LONGER USED, BUT KEPT TO AVOID BREAKING OTHER STYLES IF REFERENCED -- */
            /* (This block can be safely removed, but leaving it has no harm) */
            0%, 100% {
                opacity: 0.2;
                transform: translateY(-70%) translateX(2px);
            }
            50% {
                opacity: 0.9;
                transform: translateY(-70%) translateX(0);
            }
        }
        /* --- END OF TAB SCROLL INDICATOR STYLES --- */


        .loader { width: 1.2rem; height: 1.2rem; border: 2px solid #FFF; border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; margin-left: 0.5rem; }
        @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        #ai-consultation-content { font-size: 1.1rem; line-height: 1.9; }
        #ai-consultation-content ul { list-style-type: disc; padding-right: 1.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem; }
        #ai-consultation-content li { margin-bottom: 0.5rem; }
        
        .payment-subtab-btn.active {
            border-color: #8b5cf6;
            color: #8b5cf6;
        }
        .loading-dots span {
            display: inline-block;
            width: 12px;
            height: 12px;
            background-color: #8b5cf6;
            border-radius: 50%;
            animation: pulse 1.4s infinite ease-in-out both;
        }
        .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
        .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
        @keyframes pulse {
            0%, 80%, 100% { transform: scale(0); } 
            40% { transform: scale(1.0); }
        }
        
        /* --- MODIFIED Animation Keyframes for smoother feel --- */
        @keyframes softSlideUp {
            from {
                opacity: 0;
                transform: translateY(15px) scale(0.98);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        .animate-slide-up {
            /* Use the new softer animation */
            animation: softSlideUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
            opacity: 0;
        }
        /* --- End MODIFIED Animations --- */
        
        .animate-stagger-item {
            opacity: 0;
            /* Use the new softer animation */
            animation: softSlideUp 0.5s ease-out forwards;
        }

        /* --- NEW Animation Keyframes --- */
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInLeft {
            from { opacity: 0; transform: translateX(-30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes fadeInRight {
            from { opacity: 0; transform: translateX(30px); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* --- NEW Animation Classes --- */
        .animate-fade-in-down {
            animation: fadeInDown 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
            opacity: 0;
        }
        .animate-fade-in-up {
            animation: fadeInUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
            opacity: 0;
        }
        .animate-fade-in-left {
            animation: fadeInLeft 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s forwards; /* Added 0.1s delay */
            opacity: 0;
        }
        .animate-fade-in-right {
            animation: fadeInRight 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s forwards; /* Added 0.1s delay */
            opacity: 0;
        }
        /* --- End NEW Animations --- */


        #progress-bar {
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        /* Custom modal styles */
       /* Custom modal styles */
        .custom-modal-backdrop {
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999; /* همیشه روی نوار پایین و هدر قرار می‌گیرد */
            opacity: 0;
            animation: fadeIn 0.3s ease-out forwards;
            padding: 1rem 0; /* برای اینکه در صورت اسکرول طولانی، بالا و پایین مودال به لبه‌های صفحه نچسبد */
        }
      /* ظاهر شیشه‌ای و فوق‌مدرن برای کانتینر مودال */
        .custom-modal-content {
            background: rgba(255, 255, 255, 0.85); /* سفید نیمه‌شفاف */
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 1.75rem; /* گوشه‌های گردتر */
            box-shadow: 0 25px 50px -12px rgba(109, 40, 217, 0.2); /* سایه ملایم بنفش */
            padding: 1.5rem;
            margin: 1rem;
            width: calc(100% - 2rem);
            max-width: 32rem;
            opacity: 0;
            transform: scale(0.95) translateY(10px);
            animation: modalPopIn 0.4s 0.1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }
        
        /* بهینه‌سازی پدینگ برای تبلت و لپ‌تاپ */
        @media (min-width: 640px) {
            .custom-modal-content {
                padding: 1.5rem;
            }
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes modalPopIn {
            from { opacity: 0; transform: scale(0.95) translateY(10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        /* Toast Notification Styles */

.toast-notification {
    position: fixed;
    /* تنظیم پویای ارتفاع متناسب با فضای امن بالای گوشی (ناچ) */
    top: calc(env(safe-area-inset-top) + 1.25rem);
    left: 50%;
    transform: translateX(-50%);
    
    /* افکت شیشه‌ای غلیظ و درخشان */
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    
    /* لبه‌های شیشه‌ای درخشان نقره‌ای */
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    /* نوار وضعیت عمودی ظریف سمت راست */
    border-right: 3.5px solid #6366f1; /* پیش‌فرض اطلاع */
    color: #ffffff;
    
    /* حاشیه داخلی فشرده */
    padding: 0.65rem 1.15rem;
    border-radius: 0.85rem;
    
    font-weight: 700;
    font-size: 0.8rem;
    direction: rtl;
    text-align: right;
    
    /* ✅ اصلاح ابعاد پویا جهت شکستن اتوماتیک متون طولانی */
    max-width: 85vw;
    width: fit-content; /* تراز خودکار با طول‌های متفاوت پیام */
    
    /* سایه معلق و بسیار نرم */
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.3), 0 5px 15px -5px rgba(0, 0, 0, 0.2);
    z-index: 999999; 
    opacity: 0;
    
    /* انیمیشن باز شدن و بسته شدن نرم کشویی */
    animation: slideDownIn 0.35s cubic-bezier(0.19, 1, 0.22, 1) forwards, 
              slideUpOut 0.35s 2.65s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* رنگ‌بندی نوار لبه سمت راست */
.toast-success { 
    border-right-color: #10b981 !important; /* سبز زمردی موفقیت */
}
.toast-error { 
    border-right-color: #f43f5e !important; /* رز قرمز خطا */
}
.toast-info { 
    border-right-color: #6366f1 !important; /* آبی نیلی اطلاع */
}

/* انیمیشن‌های فشرده و بهینه‌سازی شده */
@keyframes slideDownIn {
    from { 
        opacity: 0; 
        transform: translateX(-50%) translateY(-12px) scale(0.96); 
    }
    to { 
        opacity: 1; 
        transform: translateX(-50%) translateY(0) scale(1); 
    }
}

@keyframes slideUpOut {
    from { 
        opacity: 1; 
        transform: translateX(-50%) translateY(0) scale(1); 
    }
    to { 
        opacity: 0; 
        transform: translateX(-50%) translateY(-12px) scale(0.96); 
    }
}
        /* --- STYLES FOR TAB PROGRESS DOTS --- */
        .progress-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #d1d5db; /* gray-300 */
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .progress-dot:hover {
            background-color: #c4b5fd; /* purple-300 */
        }
        .progress-dot.active {
            background-color: #8b5cf6; /* purple-600 */
            transform: scale(1.2);
            box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.4);
        }
        
        /* Responsive tables for Admin Panel */
       /* ==================== بهبود ریسپانسیو جداول ==================== */
.responsive-table-wrapper {
    @apply w-full overflow-x-auto custom-scrollbar rounded-2xl border border-white/20 dark:border-gray-700/30 bg-white/30 dark:bg-gray-800/30 backdrop-blur-xl shadow-lg;
}

.responsive-table {
    @apply w-full text-sm text-right text-gray-700 dark:text-gray-300 whitespace-nowrap;
}

/* هاور ردیف‌ها در دسکتاپ */
@media (min-width: 768px) {
    .responsive-table tbody tr {
        @apply transition-all duration-200 hover:bg-purple-50/50 dark:hover:bg-purple-900/20;
    }
}

@media (max-width: 767px) {
    .responsive-table thead {
        display: none;
    }
    .responsive-table tbody, .responsive-table tr, .responsive-table td {
        display: block;
        width: 100%;
    }
    .responsive-table tr {
        /* استایل کارت‌های شیشه‌ای برای هر ردیف در موبایل */
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 1.25rem; /* rounded-xl */
        margin-bottom: 1rem;
        padding: 1rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    html.dark .responsive-table tr {
        background: rgba(31, 41, 55, 0.6);
        border-color: rgba(255, 255, 255, 0.05);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    }
    .responsive-table tr:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 20px -5px rgba(139, 92, 246, 0.15);
    }
    .responsive-table td {
        padding: 0.6rem 0.5rem;
        border: none;
        border-bottom: 1px dashed rgba(0,0,0,0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    html.dark .responsive-table td {
        border-bottom-color: rgba(255,255,255,0.05);
    }
    .responsive-table td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .responsive-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #6b7280; /* text-gray-500 */
        text-align: right;
        font-size: 0.8rem;
    }
    html.dark .responsive-table td::before {
        color: #9ca3af;
    }
    .responsive-table td.responsive-action-cell {
        display: flex;
        gap: 0.5rem;
        flex-direction: row;
        justify-content: flex-end;
        padding-top: 1rem;
        margin-top: 0.5rem;
    }
    .responsive-table td.responsive-action-cell::before {
        display: none;
    }
}
        /* --- Custom Scrollbar --- */
        .custom-scrollbar::-webkit-scrollbar {
            width: 8px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f3f4f6; /* gray-100 */
            border-radius: 10px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #d1d5db; /* gray-300 */
            border-radius: 10px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #9ca3af; /* gray-400 */
        }
        .custom-scrollbar {
            scrollbar-width: thin; /* Firefox */
            scrollbar-color: #d1d5db #f3f4f6; /* Firefox */
        }
        /* --- End Custom Scrollbar --- */
/* --- DARK MODE GLOBAL OVERRIDES --- */
        html.dark body {
            background-color: #111827 !important;
            background-image:
                radial-gradient(at 0% 0%, hsla(253, 50%, 15%, 1) 0px, transparent 50%),
                radial-gradient(at 100% 0%, hsla(280, 50%, 15%, 1) 0px, transparent 50%),
                radial-gradient(at 100% 100%, hsla(240, 50%, 15%, 1) 0px, transparent 50%),
                radial-gradient(at 0% 100%, hsla(300, 50%, 15%, 1) 0px, transparent 50%) !important;
            color: #f3f4f6 !important;
        }
        #main-container {
    transition: opacity 0.25s ease, transform 0.25s ease;
}
        /* اجزای اختصاصی */
        html.dark .card { background-color: rgba(31, 41, 55, 0.8) !important; border-color: rgba(255, 255, 255, 0.05) !important; box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.5) !important; }
        html.dark .input-field { background-color: rgba(17, 24, 39, 0.6) !important; border-color: #4b5563 !important; color: #f3f4f6 !important; }
        html.dark .input-field::placeholder { color: #9ca3af !important; }
        html.dark .option { background-color: rgba(55, 65, 81, 0.4) !important; border-color: #4b5563 !important; color: #e5e7eb !important; }
        html.dark .option:hover { background-color: rgba(75, 85, 99, 0.6) !important; border-color: #8b5cf6 !important; }
        html.dark .option.selected { background-color: rgba(139, 92, 246, 0.2) !important; border-color: #8b5cf6 !important; }
        html.dark .custom-modal-content { 
            background: rgba(31, 41, 55, 0.75) !important; /* سرمه‌ای نیمه‌شفاف */
            border: 1px solid rgba(255, 255, 255, 0.1) !important; 
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
            color: #f3f4f6 !important; 
        }
        html.dark .tab-btn:not(.active), html.dark .category-tab-btn:not(.active) { color: #9ca3af !important; }
        html.dark .tab-btn:not(.active):hover, html.dark .category-tab-btn:not(.active):hover { color: #c4b5fd !important; background-color: transparent !important; }
        html.dark .tab-scroll-wrapper::after { background: linear-gradient(to left, rgba(31, 41, 55, 0) 0%, rgba(31, 41, 55, 1) 100%) !important; }
        

        /* بازنویسی رنگ‌های پیش‌فرض تیلویند که درون جاوااسکریپت هاردکد شده‌اند */
        html.dark .bg-white, html.dark [style*="background-color: white"] { background-color: #1f2937 !important; }
        html.dark .bg-gray-50, html.dark .bg-gray-100 { background-color: #374151 !important; }
        html.dark .text-gray-900, html.dark .text-gray-800 { color: #f9fafb !important; }
        html.dark .text-gray-700 { color: #e5e7eb !important; }
        html.dark .text-gray-600 { color: #d1d5db !important; }
        html.dark .text-gray-500 { color: #9ca3af !important; }
        html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300 { border-color: #4b5563 !important; }
        html.dark .border-b, html.dark .border-t { border-color: #4b5563 !important; }
        html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #4b5563 !important; }
        html.dark .responsive-table tr { background-color: #1f2937 !important; border-color: #4b5563 !important; }
        html.dark .responsive-table td { border-color: #374151 !important; }
        html.dark .responsive-table td::before { color: #d1d5db !important; }

        /* اصلاح رنگ برچسب‌ها (مباحث آزمون) در دارک مد */
        html.dark .bg-purple-100 { background-color: rgba(139, 92, 246, 0.25) !important; }
        html.dark .text-purple-800 { color: #c4b5fd !important; }
        html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.25) !important; }
        html.dark .text-blue-800 { color: #93c5fd !important; }
        html.dark .bg-purple-50 { background-color: rgba(139, 92, 246, 0.1) !important; }

        /* اصلاح رنگ باکس‌های بررسی پاسخ (صحیح/غلط) در دارک مد */
        html.dark .bg-green-50, html.dark .\!bg-green-50 { background-color: rgba(16, 185, 129, 0.15) !important; }
        html.dark .bg-green-100, html.dark .\!bg-green-100 { background-color: rgba(16, 185, 129, 0.25) !important; }
        html.dark .text-green-800 { color: #6ee7b7 !important; }
        html.dark .border-green-500, html.dark .\!border-green-500 { border-color: #059669 !important; }

        html.dark .bg-red-50, html.dark .\!bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; }
        html.dark .bg-red-100, html.dark .\!bg-red-100 { background-color: rgba(239, 68, 68, 0.25) !important; }
        html.dark .text-red-800 { color: #fca5a5 !important; }
        html.dark .border-red-500, html.dark .\!border-red-500 { border-color: #dc2626 !important; }
         
        /* --- NEW: استادیار پلاس استایلز --- */
.mentor-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 2rem;
    box-shadow: 0 25px 50px -12px rgba(109, 40, 217, 0.15);
    transition: all 0.3s ease;
}
html.dark .mentor-card {
    background: rgba(31, 41, 55, 0.8);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.mentor-hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mentor-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.2);
}
html.dark .mentor-hover-lift:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

.mentor-gradient-header {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(236, 72, 153, 0.05) 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}
html.dark .mentor-gradient-header {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(236, 72, 153, 0.08) 100%);
    border-color: rgba(139, 92, 246, 0.2);
}
/* انیمیشن شناور ملایم برای تصویر استاد */
@keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.animate-float {
    animation: float 3.5s ease-in-out infinite;
}
.animate-fade-in-scale {
    animation: fadeInScale 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    opacity: 0;
}
/* === بهینه‌سازی فواصل و سایزها برای موبایل === */
@media (max-width: 640px) {
    .card {
        padding: 1.25rem; /* کاهش پدینگ کارت‌ها */
    }
    .space-y-8 {
        gap: 1.5rem; /* کاهش فاصله عمودی */
    }
    .mt-12, .mt-6 {
        margin-top: 1.5rem; /* کاهش حاشیه بالا */
    }
    .mb-6, .mb-8 {
        margin-bottom: 1.25rem;
    }
    .text-2xl {
        font-size: 1.3rem;
    }
    .text-3xl {
        font-size: 1.6rem;
    }
    /* تنظیم Toast */
    .toast-notification {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
    /* تنظیم Input Area چت */
    .chat-input-area {
        padding: 0.5rem 0.75rem;
    }
}
/* ==================== صفحه ورود/ثبت نام جمع و جور ==================== */
#login-form .space-y-4,
#register-form .space-y-4 {
    gap: 0.75rem; /* کاهش فاصله بین فیلدها از 1rem به 0.75rem */
}

#login-form .input-field,
#register-form .input-field {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
}

#login-form .btn,
#register-form .btn {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* کاهش فاصله‌های عمودی در فرم */
.mentor-card .p-6.sm\:p-10 {
    padding: 1.25rem !important;
}

@media (min-width: 640px) {
    .mentor-card .p-6.sm\:p-10 {
        padding: 1.5rem !important;
    }
}

/* کاهش فاصله تب‌ها از فرم */
.mentor-card .mb-8 {
    margin-bottom: 0.75rem !important;
}

/* کاهش سایز عنوان خوش‌آمدگویی */
.mentor-card h2 {
    font-size: 1.4rem !important;
    margin-bottom: 0.5rem !important;
}

.mentor-card .leading-relaxed {
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
}

/* جمع‌وجورتر کردن پنل سمت چپ (گرادینت) */
.mentor-card .hidden.md\:flex {
    padding: 1.25rem !important;
}

.mentor-card .w-16.h-16 {
    width: 2.75rem !important;
    height: 2.75rem !important;
}

.mentor-card .w-16.h-16 svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/* کاهش فاصله آیکون موبایل */
.mentor-card .w-14.h-14 {
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* کاهش عرض کلی کارت */
.mentor-card {
    max-width: 100%;
}

/* کاهش padding کلی بخش فرم */
.mentor-card .md\:col-span-3 {
    padding: 1.25rem !important;
}

@media (min-width: 640px) {
    .mentor-card .md\:col-span-3 {
        padding: 1.5rem !important;
    }
}

/* کاهش فضای تب‌های ورود/ثبت‌نام */
.auth-tab-btn {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.8rem !important;
}

/* کاهش سایز لیبل‌ها */
.mentor-card label {
    font-size: 0.8rem !important;
    margin-bottom: 0.25rem !important;
}

/* کاهش ارتفاع placeholder‌ها */
.mentor-card .input-field::placeholder {
    font-size: 0.8rem;
}

/* فشرده‌تر شدن تگ‌های شیشه‌ای */
.mentor-card .px-3.py-1\.5 {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.65rem !important;
}

/* کاهش margin پایینی پیام خطا */
#login-error,
#register-error {
    margin-top: 0 !important;
    height: 1rem !important;
    font-size: 0.75rem !important;
}

/* کاهش فاصله بین تب‌ها و فرم */
#login-tab-btn,
#register-tab-btn {
    margin-bottom: 0 !important;
}

.mentor-card form {
    margin-top: 0.25rem !important;
}

/* تنظیم دکمه submit */
.mentor-card .btn.btn-primary.w-full.\!rounded-xl {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    font-size: 0.9rem !important;
    margin-top: 0.25rem !important;
}