/* ==========================================================================
   STARTIMES & KOOORA FORUMS - Authentic Startimes Theme & Light Control Engine
   ========================================================================== */

:root {
    /* Classic Startimes Colors */
    --startimes-blue: #0284c7;
    --startimes-dark-blue: #0369a1;
    --startimes-header-bg: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
    --startimes-subheader-bg: #e0f2fe;
    --startimes-orange: #f97316;
    
    /* Surface Colors (Light Forum Theme) */
    --bg-body: #edf2f7;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f8fafc;
    --bg-lime-admin: #ecfccb;
    --bg-lime-admin-hover: #e2f8b8;
    --border-color: #cbd5e1;
    --border-subtle: #e2e8f0;
    --border-table: #93c5fd;

    /* Text Colors */
    --text-main: #0f172a;
    --text-muted: #475569;
    --text-light: #ffffff;

    /* User Role Colors */
    --role-director: #0000ff;   /* لون المدير الأصلي فقط */
    --role-supermod: #e11d48;   /* أحمر مراقب عام */
    --role-moderator: #059669;  /* أخضر مشرف */
    --role-special: #d97706;    /* ذهبي مميز */
    --role-member: #0284c7;     /* سماوي عضو */

    /* Radii & Shadows */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 9999px;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-dock: 0 8px 24px rgba(2, 132, 199, 0.18), 0 2px 6px rgba(0,0,0,0.08);
}

/* الخط المخصص لعناوين وترويسات ستار تايمز */
@font-face {
    font-family: 'LaureenBold';
    src: url('../fonts/LaureenproArabicBold.woff') format('woff'),
         url('/static/fonts/LaureenproArabicBold.woff') format('woff'),
         url('../fonts/laureen.woff') format('woff'),
         url('/static/fonts/laureen.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 15px; /* تكبير الحجم الأساسي ليكون الخط أكبر وأوضح */
    scroll-behavior: smooth;
    direction: rtl;
    overflow-x: hidden;
}

body {
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.5;
    min-height: 100vh;
    padding-bottom: 90px;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ==========================================================================
   Header Bar (الشعار على اليمين وأيقونة العضو والبرجر على اليسار)
   ========================================================================== */
.startimes-header {
    background: #ffffff;
    border-bottom: 2.5px solid var(--startimes-blue);
    padding: 0.65rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 90;
}

.header-inner {
    width: 98%;
    max-width: 1650px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
}

.header-right {
    display: flex;
    align-items: center;
}

.startimes-brand,
.startimes-brand-box {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    user-select: none;
}

.brand-logo-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.brand-logo-icon-link:hover {
    transform: scale(1.04);
}

.startimes-logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-text-col {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.25;
}

.brand-link-title {
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
    font-family: 'LaureenBold', Arial, sans-serif;
    display: inline-block;
}

.brand-name,
.brand-name-link {
    font-family: 'LaureenBold', Arial, sans-serif !important;
    font-size: 1.35rem;
    font-weight: bold;
    color: #0369a1;
    line-height: 1.15;
    letter-spacing: -0.3px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.brand-name-link:hover {
    color: #dc2626 !important;
}

.brand-page-title,
.brand-page-link {
    font-family: 'LaureenBold', Arial, sans-serif !important;
    font-size: 0.98rem;
    font-weight: bold;
    color: #f97316;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.brand-page-link:hover {
    color: #dc2626 !important;
}

.header-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hamburger-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.hamburger-btn:hover {
    background: #e2e8f0;
}

.hamburger-btn .bar {
    width: 28px;
    height: 3.5px;
    background-color: #0369a1;
    border-radius: 2px;
}

.supervisor-status-chip {
    position: relative;
    display: flex;
    align-items: center;
}

.sup-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e2e8f0;
    border: 2px solid #0000ff;
    object-fit: cover;
}

.sup-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    background-color: #22c55e;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.nav-arrows-group {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.nav-arr-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 800;
    color: #0369a1;
}

/* ==========================================================================
   Startimes & Kooora Authentic Tables (امتداد مثالي وخطوط واضحة وكبيرة)
   ========================================================================== */
.startimes-main-container {
    width: 98%;
    max-width: 1650px;
    margin: 0.85rem auto 2.5rem auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0; /* متصلة بدون أي فراغات فاصلة مثل ستار تايمز */
    direction: rtl;
    border: 1.5px solid #0284c7;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.category-table-block {
    background: #ffffff;
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    margin-bottom: 0;
    border-bottom: 2px solid #0284c7;
}

.category-table-block:last-child {
    border-bottom: none;
}

.category-main-header {
    background: linear-gradient(90deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    padding: 0.5rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0;
}

.cat-header-title {
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -0.2px;
}

.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: 0;
}

.startimes-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
    font-size: 0.95rem; /* خط أوضح وأكبر مطابق لكووورة */
    direction: rtl;
}

/* ترويسة الأعمدة الموحدة في الرئيسية (مطابقة 100% لأصل ستار تايمز بالصورة 2) */
.table-columns-header {
    background-color: #0279b8 !important;
    border-bottom: 1.5px solid #0279b8 !important;
}

.table-columns-header th {
    padding: 0.55rem 0.85rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    font-size: 0.96rem !important;
}

.table-columns-header th:last-child {
    border-left: none !important;
}

.table-columns-header th.col-forum-title {
    text-align: center !important;
}

.table-columns-header th a.st-cat-link,
.table-columns-header th .st-cat-link {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    display: inline-block;
    text-align: center !important;
    transition: color 0.15s ease;
}

.table-columns-header th a.st-cat-link:hover,
.table-columns-header th .st-cat-link:hover {
    color: #e2f952 !important; /* لون ليموني أصلي مطابق لستار تايمز بدلا من الأحمر */
    text-decoration: none !important;
}

/* توزيع الأعمدة الممتدة بشكل مثالي عبر الشاشة مطابق لأصل ستار تايمز */
.col-forum-title { width: 30.5% !important; text-align: center !important; }
.col-topics { width: 4.5% !important; text-align: center; }
.col-posts { width: 4.5% !important; text-align: center; }
.col-members { width: 4% !important; text-align: center; }
.col-lastpost { width: 8.5% !important; text-align: center !important; white-space: nowrap !important; }
.col-supervisor { width: 8.5% !important; text-align: center !important; white-space: nowrap !important; }
.col-deputy { width: 8.5% !important; text-align: center !important; white-space: nowrap !important; }
.col-moderators { width: 26.5% !important; text-align: center !important; }
.col-admin-actions { width: 3% !important; text-align: center; }

td.cell-forum-name {
    text-align: right !important;
}

.cell-moderators-list {
    text-align: center !important;
    white-space: nowrap !important;
    padding: 0.5rem 0.85rem !important;
}

.moderators-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    text-align: center !important;
    width: 100%;
}

.forum-row-item {
    border-bottom: 1px solid #cbd5e1;
    background: #ffffff;
    transition: background-color 0.15s;
}

.forum-row-item:hover {
    background-color: #f0f9ff;
}

.forum-row-item.row-lime-admin {
    background-color: var(--bg-lime-admin) !important;
}

.forum-row-item.row-lime-admin:hover {
    background-color: var(--bg-lime-admin-hover) !important;
}

.startimes-table td {
    padding: 0.65rem 0.85rem;
    border-left: 1px solid #e2e8f0;
    vertical-align: middle;
}

.forum-entry-flex {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    direction: rtl;
}

.forum-circle-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: #e0f2fe;
    border: 1.5px solid #93c5fd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
}

.forum-text-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.forum-link-title {
    font-size: 1.08rem; /* خط العنوان كبير وواضح جداً */
    font-weight: 900;
    color: #0279b8;
}

.forum-link-title:hover {
    color: #0284c7;
    text-decoration: underline;
}

.forum-desc-summary {
    font-size: 0.84rem; /* خط الوصف أوضح */
    color: #475569;
    line-height: 1.4;
}

.cell-topics-count, .cell-posts-count, .cell-members-count {
    text-align: center;
}

.num-val {
    font-weight: 800;
    font-family: 'Plus Jakarta Sans', 'Cairo', monospace;
    color: #0279b8;
    font-size: 1.05rem; /* الأرقام واضحة وكبيرة */
}

.last-reply-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.reply-timestamp {
    font-size: 0.82rem;
    color: #475569;
    font-family: 'Plus Jakarta Sans', monospace;
    font-weight: 700;
    direction: ltr;
}

.reply-author-link {
    font-weight: 900;
    font-size: 0.95rem;
}

.author-director-pure-blue {
    color: #0000ff !important;
    font-weight: 900;
}

.cell-supervisor-name, .cell-deputy-name {
    text-align: center;
    font-size: 0.95rem;
}

.supervisor-pill, .deputy-pill {
    font-weight: 900;
    color: #e11d48;
}

.moderators-inline {
    font-size: 0.92rem;
    font-weight: 800;
}

.mod-link {
    font-weight: 800;
    color: #0f172a;
}

.mod-link:hover {
    color: #0284c7;
    text-decoration: underline;
}

.plus-sep {
    color: #f97316;
    font-weight: 900;
    margin: 0 2px;
}

.admin-quick-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.btn-dots-menu, .btn-edit-note {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    color: #475569;
}

/* ==========================================================================
   AUTHENTIC STARTIMES TOPICS VIEW (/f.aspx)
   ========================================================================== */

/* Header page navigation pill (الصفحة: 1 من N - مطابق لستار تايمز بالصورتين 2 و 3) */
.header-page-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #ffffff;
    border: 1.5px solid #2b82d9;
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.65rem;
    font-size: 0.88rem;
    font-weight: 800;
    font-family: 'Cairo', sans-serif;
    color: #0b385e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    direction: rtl;
}

.header-page-nav-pill .page-nav-label {
    color: #0b385e;
    font-weight: 800;
    font-size: 0.88rem;
    user-select: none;
}

.header-page-select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.header-page-trigger-btn {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    color: #0284c7;
    font-size: 0.92rem;
    font-weight: 900;
    font-family: 'Cairo', sans-serif;
    padding: 0.1rem 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.header-page-trigger-btn:hover {
    color: #0369a1;
    background: rgba(2, 132, 199, 0.08);
}

.header-page-trigger-btn .select-chevron-icon {
    font-size: 0.72rem;
    font-weight: bold;
    color: #0284c7;
    transition: transform 0.15s ease;
}

.header-page-dropdown-menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 50%;
    transform: translateX(50%);
    min-width: 72px;
    background: #ffffff;
    border: 1px solid #708090;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    border-radius: 4px;
    z-index: 999999;
    flex-direction: column;
    padding: 2px 0;
    max-height: 260px;
    overflow-y: auto;
    direction: rtl;
}

.header-page-dropdown-item {
    display: block;
    padding: 4px 10px;
    text-align: center;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 800;
    font-family: 'Cairo', Tahoma, sans-serif;
    color: #0284c7;
    transition: background-color 0.12s, color 0.12s;
    white-space: nowrap;
}

.header-page-dropdown-item.is-active {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 900;
}

.header-page-dropdown-item:hover:not(.is-active) {
    background-color: #e0f2fe;
    color: #0369a1;
}

.header-page-dropdown-item.archive-item {
    border-top: 1px dotted #8ba8c8;
    margin-top: 2px;
    padding-top: 5px;
    font-weight: 900;
}

.header-page-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    color: #0284c7;
    font-size: 0.92rem;
    font-weight: 900;
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
    padding: 0 0.85rem 0 0.2rem;
    text-align: center;
    direction: rtl;
}

.header-page-select option {
    background-color: #ffffff;
    color: #0b385e;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 4px 10px;
    direction: rtl;
}

.header-page-select-wrapper .select-chevron-icon {
    position: absolute;
    left: 0;
    pointer-events: none;
    color: #0284c7;
    font-size: 0.75rem;
    font-weight: bold;
}

.header-page-nav-pill .page-nav-total {
    color: #0b385e;
    font-weight: 800;
    font-size: 0.88rem;
    user-select: none;
}

.btn-page-nav-step {
    border: none;
    background: transparent;
    color: #0284c7;
    font-weight: 900;
    cursor: pointer;
    padding: 0 0.25rem;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease;
}

.btn-page-nav-step:hover {
    color: #0369a1;
}

.btn-page-nav-step.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

body.forum-topics-view {
    padding-bottom: 44px !important;
}

.startimes-forum-container {
    width: 99.4% !important;
    max-width: none !important;
    margin: 0.4rem auto 0 auto !important;
    direction: rtl;
}

.forum-topics-view .header-inner {
    width: 99.4% !important;
    max-width: none !important;
}

.forum-topics-view .startimes-header {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

/* 1. Control Capsule Strip (شريط الكبسولات البيضاوية الأصلي - مطابق لصورة 2) */
.st-control-capsule-strip {
    width: 100%;
    margin: 0 0 0.65rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    gap: 1.25rem;
}

/* الكبسولة الطويلة الممتدة على اليمين مع أيقونة واسم المنتدى */
.st-forum-long-capsule {
    flex: 1;
    min-width: 250px;
    height: 42px;
    background: #ffffff;
    border: 1.5px solid #7cb1ea;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 1.15rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.capsule-inner-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    direction: rtl;
}

.forum-capsule-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: #e0f2fe;
    border: 1.5px solid #93c5fd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    overflow: hidden;
    flex-shrink: 0;
}

.forum-capsule-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.forum-capsule-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
}

.forum-capsule-title {
    font-size: 1.02rem;
    font-weight: 800;
    color: #0279b8 !important;
    font-family: 'Cairo', sans-serif;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

/* شريط المشرفين في الكبسولة (مطابق للصورة 3 من ستار تايمز) */
.forum-capsule-moderators {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    direction: rtl;
    font-size: 0.96rem;
}

.moderators-label {
    font-weight: 800;
    color: #f2720c; /* برتقالي أصلي لستار تايمز مطابق للصورة 3 */
    font-size: 0.96rem;
}

.moderators-list {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.96rem;
}

.moderators-sep {
    color: #f2720c; /* إشارة + باللون البرتقالي كما في الصورة 3 */
    font-weight: bold;
    font-size: 0.96rem;
    user-select: none;
}

.forum-mod-link {
    color: #0369a1; /* أزرق داكن كلاسيكي لروابط المشرفين */
    font-weight: 800;
    text-decoration: none;
    transition: color 0.15s ease, text-decoration 0.15s ease;
}

.forum-mod-link:hover {
    color: #0284c7;
    text-decoration: underline;
}

.st-filter-pills-group {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: nowrap;
}

.st-oval-filter-pill {
    position: relative;
    border: 1.5px solid #7cb1ea;
    border-radius: var(--radius-pill);
    background: #ffffff;
    padding: 0.35rem 0.95rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e3a8a;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.st-inline-select {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    color: #0284c7;
    cursor: pointer;
    outline: none;
}

.pill-bold-num {
    color: #0284c7;
    font-size: 0.95rem;
    font-weight: 900;
}

/* 1.5 شريط خيارات الإشراف أسفل مربع بإشراف وأعلى الوصلات (مطابق للصورة 3 و 4) */
.st-mod-options-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 4px 0 6px 0;
    direction: rtl;
    position: relative;
    user-select: none;
}

.st-mod-options-dropdown-wrap {
    position: relative;
    display: inline-block;
}

.st-mod-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: #ffffff;
    border: 1px solid #7a9cb9;
    border-radius: 12px;
    padding: 2px 10px;
    font-family: 'Cairo', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0b385e;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.st-mod-dropdown-trigger:hover {
    background-color: #f0f7fd;
    border-color: #0279b8;
}

.st-mod-dropdown-trigger .mod-opt-chevron {
    font-size: 0.75rem;
    color: #557799;
}

.st-mod-dropdown-menu {
    position: absolute;
    top: calc(100% + 3px);
    right: 0;
    min-width: 255px;
    background-color: #ffffff;
    border: 1px solid #7a9cb9;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.st-mod-menu-item {
    display: block;
    padding: 5px 12px;
    font-family: 'Cairo', sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
    color: #0b385e;
    text-decoration: none;
    background-color: #ffffff;
    border-bottom: 1px solid #eef4f9;
    text-align: right;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
}

.st-mod-menu-item:last-child {
    border-bottom: none;
}

.st-mod-menu-item:hover {
    background-color: #0279b8 !important;
    color: #ffffff !important;
}

.st-mod-menu-item.is-active {
    background-color: #0279b8 !important;
    color: #ffffff !important;
    font-weight: 800;
}

.st-mod-quick-links {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.st-mod-btn-dotted {
    display: inline-block;
    padding: 2px 10px;
    background-color: #ffffff;
    border: 1px dotted #8ba8c8;
    border-radius: 3px;
    font-family: 'Cairo', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0b385e;
    text-decoration: none;
    user-select: none;
    transition: all 0.15s ease;
    cursor: pointer;
}

.st-mod-btn-dotted:hover {
    background-color: #f0f7fd !important;
    border-color: #0279b8 !important;
    color: #0279b8 !important;
    box-shadow: 0 1px 3px rgba(2, 121, 184, 0.2) !important;
}

.st-mod-btn-dotted.has-unread-mail {
    background-color: #d32f2f !important;
    color: #ffffff !important;
    border: 1px solid #991b1b !important;
    box-shadow: 0 1px 3px rgba(211, 47, 47, 0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.st-mod-btn-dotted.has-unread-mail:hover {
    background-color: #b71c1c !important;
    color: #ffffff !important;
    border-color: #7f1d1d !important;
}

.st-mod-mail-badge {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif !important;
    border: 1.5px solid #000000 !important;
    border-radius: 12px !important;
    padding: 0 5px !important;
    min-width: 18px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

/* 2. Sub Actions Bar & StarTimes Forum Links Carousel */
.st-sub-actions-bar {
    width: 100%;
    margin: 0.3rem 0 0.75rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    gap: 0.75rem;
}

.carousel-wrapper {
    position: relative;
    padding: 0;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.carouselbutton {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: none;
    background-color: #20639b;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    user-select: none;
    transition: background 0.15s ease;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
}

.carouselbutton:hover {
    background-color: #164771;
}

.carouselbutton--next {
    right: 0;
}

.carouselbutton--previous {
    left: 0;
}

ul.fixedtopic {
    list-style: none;
    margin: 0;
    padding: 2px 2px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    align-items: center;
}
ul.fixedtopic::-webkit-scrollbar {
    display: none;
}

/* وصلة أساسية: خلفية سماوية (مثل قوانين وفرق المنتدى في صورة 1) */
li.fixedtopic2 {
    display: inline-flex;
    align-items: center;
    border: 2px solid #20639b;
    background-color: #cbe3fb;
    padding: 3px 10px;
    border-radius: 10px;
    flex-shrink: 0;
    line-height: 1.4;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* وصلة عادية: خلفية بيضاء (كما طلب المستخدم: والعادية تكون خلفيتها بيضاء) */
li.fixedtopic {
    display: inline-flex;
    align-items: center;
    border: 2px solid #20639b;
    background-color: #ffffff;
    padding: 3px 10px;
    border-radius: 10px;
    flex-shrink: 0;
    line-height: 1.4;
    transition: background 0.15s ease, border-color 0.15s ease;
}

li.fixedtopic2:hover {
    background-color: #b5d8fa;
}

li.fixedtopic:hover {
    background-color: #f8fafc;
}

a.fixedtopic {
    color: #0b385e !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    display: inline-block;
}

a.fixedtopic:hover {
    text-decoration: underline !important;
    color: #004085 !important;
}

.btn-st-new-topic {
    background: linear-gradient(90deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff !important;
    border: 1px solid #0369a1;
    border-radius: 6px;
    padding: 0.45rem 1.25rem;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(2,132,199,0.25);
    transition: all 0.15s ease;
}

.btn-st-new-topic:hover {
    filter: brightness(1.08);
    box-shadow: 0 3px 8px rgba(2,132,199,0.35);
}

/* 3. Topics Table Frame (متلاصق 100% بدون فراغات - حواف منقطة كلاسيكية مطابقة للدوك السفلي) */
.startimes-table-frame {
    width: 100%;
    margin: 0 0 6px 0;
    border: 1px dotted #8ba8c8;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: none;
    direction: rtl;
}

.st-authentic-topics-table {
    width: 100%;
    height: auto;
    border-collapse: collapse;
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

.st-thead-row {
    background-color: #0279b8;
    color: #ffffff;
}

.st-thead-row th {
    background-color: #0279b8 !important;
    color: #ffffff !important;
    padding: 0.45rem 0.65rem !important;
    font-weight: bold !important;
    font-size: 16px !important;
    font-family: 'LaureenBold', Arial, Tahoma, sans-serif !important;
    border-bottom: 1px dotted #8ba8c8;
    vertical-align: middle !important;
    user-select: none;
}

.col-th-subject {
    text-align: right;
    width: 54%;
}

.col-th-sep {
    width: 35px;
    text-align: center;
}

.col-th-author {
    text-align: center;
    width: 165px;
    border-right: 1px solid rgba(255,255,255,0.25);
    border-left: 1px solid rgba(255,255,255,0.25);
}

.col-th-replies {
    text-align: center;
    width: 80px;
    border-left: 1px solid rgba(255,255,255,0.25);
}

.col-th-views {
    text-align: center;
    width: 80px;
    border-left: 1px solid rgba(255,255,255,0.25);
}

.col-th-lastpost {
    text-align: center;
    width: 170px;
}

/* Table Body Rows - متلاصقة تماماً بدون أي هوامش أو فراغات وفواصل منقطة كلاسيكية */
.st-authentic-topics-table tbody tr {
    margin: 0 !important;
    border-bottom: 1px dotted #8ba8c8;
    background-color: #ffffff !important;
    transition: background-color 0.12s ease;
}

/* المواضيع غير المثبتة دائماً بيضاء ناصعة 100% بدون أي تلوين زوجي/فردي */
.st-authentic-topics-table tbody tr,
.st-authentic-topics-table tbody tr.row-normal,
.st-authentic-topics-table tbody tr.row-toptopic {
    background-color: #ffffff !important;
}

.st-authentic-topics-table tbody tr td,
.st-authentic-topics-table tbody tr.row-normal td,
.st-authentic-topics-table tbody tr.row-toptopic td {
    background-color: #ffffff !important;
}

.st-authentic-topics-table tbody tr:hover,
.st-authentic-topics-table tbody tr:hover td,
.st-authentic-topics-table tbody tr.row-normal:hover,
.st-authentic-topics-table tbody tr.row-normal:hover td,
.st-authentic-topics-table tbody tr.row-toptopic:hover,
.st-authentic-topics-table tbody tr.row-toptopic:hover td {
    background-color: #eaf3fd !important;
}

/* المواضيع المثبتة تأخذ اللون السماوي الفاتح الأصلي (#e1f0fc) المطابق للصورة */
.st-authentic-topics-table tbody tr.row-pinned,
.st-authentic-topics-table tbody tr.row-pinned td {
    background-color: #e1f0fc !important;
}

.st-authentic-topics-table tbody tr.row-pinned:hover,
.st-authentic-topics-table tbody tr.row-pinned:hover td {
    background-color: #cfe4fa !important;
}

/* اللون الليموني يظهر حصراً للمواضيع المخفية فقط في الأقسام */
.st-authentic-topics-table tbody tr.row-hidden,
.st-authentic-topics-table tbody tr.row-hidden td {
    background-color: #d7eea8 !important;
}

.st-authentic-topics-table tbody tr.row-hidden:hover,
.st-authentic-topics-table tbody tr.row-hidden:hover td {
    background-color: #cce69b !important;
}

/* المواضيع التي تنتظر الموافقة تأخذ نفس لون خلفية المشاركة التي تنتظر الموافقة (#eceff9) */
.st-authentic-topics-table tbody tr.row-pending-approval,
.st-authentic-topics-table tbody tr.row-pending-approval td {
    background-color: #eceff9 !important;
}

.st-authentic-topics-table tbody tr.row-pending-approval:hover,
.st-authentic-topics-table tbody tr.row-pending-approval:hover td {
    background-color: #dfe6f5 !important;
}

.st-authentic-topics-table tbody tr.row-deleted,
.st-authentic-topics-table tbody tr.row-deleted td {
    background-color: #f2bdbc !important;
}

.st-authentic-topics-table tbody tr.row-locked {
    background-color: #f8fafc;
}

.st-authentic-topics-table tbody tr.st-topic-row-item,
.st-authentic-topics-table td {
    padding: 0.22rem 0.65rem !important;
    height: 33px !important;
    vertical-align: middle !important;
}

/* Subject Cell */
.col-td-subject .subject-cell-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    gap: 0.85rem;
}

.topic-title-area {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.st-topic-title-link {
    color: #000000 !important;
    font-weight: 800;
    font-size: 1.02rem;
    font-family: Arial, sans-serif !important;
    text-decoration: none !important;
    transition: color 0.12s ease;
}

.st-topic-title-link:hover,
.st-topic-row-item:hover .st-topic-title-link {
    color: #ff0000 !important;
    text-decoration: none !important;
}

/* StarTimes Authentic Topic Status Icons & Luxury Tooltip (ALT فاخر مطابق للصور 3 و 4 و 5) */
.st-icon-badge-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    line-height: 1;
    vertical-align: middle;
}

.st-topic-icon-img {
    display: inline-block;
    vertical-align: middle;
    user-select: none;
}

.st-topic-icon-img.toptopic-medal {
    width: 14px;
    height: 18px;
    object-fit: contain;
}

.st-topic-icon-img.star-red {
    width: 13px;
    height: 12px;
    object-fit: contain;
}

/* Luxurious Charcoal Tooltip with Arrow (مطابق للصور 3 و 4 و 5 في ستار تايمز) */
.st-lux-tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    transform: translateY(-50%) scale(0.95);
    background: #262626;
    color: #ffffff !important;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: 'Cairo', system-ui, sans-serif;
    padding: 3px 9px;
    border-radius: 3px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 99999;
    line-height: 1.4;
    user-select: none;
}

/* Arrow pointing to the right towards the icon */
.st-lux-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-width: 5px 0 5px 6px;
    border-style: solid;
    border-color: transparent transparent transparent #262626;
}

.st-icon-badge-wrap:hover .st-lux-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

.topic-badges-area {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.st-tag-pill {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    display: inline-block;
    white-space: nowrap;
}

.st-tag-pill.tag-reply,
.st-tag-pill.tag-page,
.tag-reply,
.tag-page {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 1.5px 8px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    font-family: Arial, Tahoma, sans-serif !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    height: 18px !important;
    box-sizing: border-box !important;
    transition: background 0.15s ease !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    white-space: nowrap !important;
}

.st-tag-pill.tag-reply:hover,
.st-tag-pill.tag-page:hover,
.tag-reply:hover,
.tag-page:hover {
    background: #0369a1 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.tag-pin,
.st-tag-pill.tag-pin {
    display: none !important;
}

/* Separator / List bullet icon (علامة البرجر ☰ للمثبتة، ونقاط عمودية ⋮ لغير المثبتة) */
.col-td-sep {
    text-align: center;
    border-right: 1px solid #d4e4f3;
    cursor: pointer;
    width: 28px;
    vertical-align: middle;
    user-select: none;
}

.col-td-sep:hover .st-menu-burger-icon,
.col-td-sep:hover .st-menu-dots-icon {
    color: #0078d7;
    transform: scale(1.25);
}

.st-menu-burger-icon {
    color: #1e293b;
    font-size: 1.15rem;
    font-weight: 900;
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s ease, color 0.15s ease;
}

.st-menu-dots-icon {
    color: #1e293b;
    font-size: 1.35rem;
    font-weight: 900;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    transition: transform 0.15s ease, color 0.15s ease;
}

.st-menu-bullet-icon {
    color: #1e293b;
    font-size: 1.15rem;
    font-weight: 900;
    cursor: pointer;
    user-select: none;
}

/* Author Cell */
.col-td-author {
    text-align: center;
    border-right: 1px solid #d4e4f3;
    border-left: 1px solid #d4e4f3;
}

.author-cell-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1.15;
}

.author-user-link {
    font-weight: bold;
    font-size: 15px;
    font-family: Arial, sans-serif !important;
    text-decoration: none !important;
    transition: color 0.12s ease;
}

.author-user-link.role-admin:hover,
.author-user-link.role-supermod:hover,
.author-user-link.role-deputy:hover {
    color: #ff0000 !important;
    text-decoration: none !important;
}

.author-user-link.role-moderator:hover {
    color: #000000 !important;
    text-decoration: none !important;
}

.author-user-link:hover {
    color: #ff0000 !important;
    text-decoration: none !important;
}

.author-timestamp-green {
    font-size: 14px !important;
    color: #059669 !important;
    font-weight: bold !important;
    font-family: Arial, sans-serif !important;
    direction: ltr !important;
    display: inline-block;
}

/* Replies & Views */
.col-td-replies {
    text-align: center;
    border-left: 1px solid #d4e4f3;
}

.col-td-views {
    text-align: center;
    border-left: 1px solid #d4e4f3;
}

.num-stat-bold {
    font-weight: 800;
    font-size: 1.05rem;
    color: #0f172a;
    font-family: 'Plus Jakarta Sans', 'Cairo', monospace;
}

/* Last Post Cell */
.col-td-lastpost {
    text-align: center;
}

.lastpost-cell-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1.15;
}

.last-user-link {
    font-weight: bold;
    font-size: 15px;
    font-family: Arial, sans-serif !important;
    text-decoration: none !important;
    transition: color 0.12s ease;
}

.last-user-link.role-admin:hover,
.last-user-link.role-supermod:hover,
.last-user-link.role-deputy:hover {
    color: #ff0000 !important;
    text-decoration: none !important;
}

.last-user-link.role-moderator:hover {
    color: #000000 !important;
    text-decoration: none !important;
}

.last-user-link:hover {
    color: #ff0000 !important;
    text-decoration: none !important;
}

.last-timestamp-green {
    font-size: 14px !important;
    color: #059669 !important;
    font-weight: bold !important;
    font-family: Arial, sans-serif !important;
    direction: ltr !important;
    display: inline-block;
}

.td-no-topics {
    text-align: center;
    padding: 2.5rem 1rem !important;
    font-size: 1rem;
    color: #64748b;
    font-weight: 700;
}

/* ==========================================================================
   AUTHENTIC USER PROFILE (مطابقة 100% للصورة المرفقة)
   ========================================================================== */
.user-profile-container {
    max-width: 1300px;
    margin: 1.5rem auto 3rem auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    direction: rtl;
}

.profile-block-card {
    background: #ffffff;
    border: 1.5px solid #93c5fd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.profile-blue-header {
    background: linear-gradient(90deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    padding: 0.6rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
}

.profile-blue-header.center-title {
    position: relative;
    justify-content: center;
}

.profile-header-title {
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.header-corner-circles {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
}

.header-dot-btn {
    width: 14px;
    height: 14px;
    background: rgba(255,255,255,0.4);
    border: 1.5px solid #ffffff;
    border-radius: 50%;
}

.profile-body-flex-authentic {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    padding: 1.5rem;
    align-items: center;
    direction: rtl;
}

.profile-avatar-frame-box-right {
    flex-shrink: 0;
}

.profile-avatar-inner {
    border: none !important;
    border-radius: 6px;
    padding: 0;
    background: transparent;
    box-shadow: none !important;
    outline: none !important;
}

.profile-dashed-table-wrapper {
    flex: 1;
}

.authentic-user-info-table {
    width: 100%;
    border-collapse: collapse;
    direction: rtl;
}

.authentic-user-info-table tr {
    border-bottom: 1px dashed #93c5fd;
}

.info-label-cell {
    width: 160px;
    padding: 0.65rem 1rem;
    font-weight: 900;
    color: #ffffff;
    background: #2172b8 !important;
    border: 1px solid #1a5b94;
    font-size: 0.95rem;
    text-align: center;
    border-radius: 4px;
}

.info-value-cell {
    padding: 0.65rem 1.5rem;
    font-weight: 800;
    color: #0f172a;
    font-size: 1rem;
    text-align: right;
}

.profile-descriptions-body {
    padding: 1.15rem;
    text-align: center;
    background: #ffffff;
}

.desc-role-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
    display: inline-block;
}

.profile-stats-bar-authentic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2.5rem;
    background: #ffffff;
    border-bottom: 1px dashed #cbd5e1;
    direction: rtl;
}

.stat-lbl-gray {
    color: #475569;
    font-weight: normal;
    font-size: 14px;
}

.stat-val-bold,
.stat-val-normal {
    color: #000000;
    font-weight: normal;
    font-size: 14px;
    font-family: Arial, sans-serif;
}

.profile-medals-grid-authentic {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1.5rem;
    background: #ffffff;
    direction: rtl;
}

.medal-pill-box-authentic {
    background: #f8fafc;
    border: 1.5px solid #93c5fd;
    border-radius: var(--radius-pill);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    direction: rtl;
}

.medal-forum-name {
    font-size: 0.95rem;
    font-weight: 900;
    color: #0284c7;
}

.medal-award-title {
    font-size: 0.85rem;
    color: #1e293b;
    font-weight: 700;
}

/* ==========================================================================
   LIGHT CONTROL PANEL (لوحة التحكم الفاتحة بنفس ألوان المنتدى)
   ========================================================================== */
.admin-luxury-body {
    background-color: #edf2f7 !important;
    color: #0f172a !important;
    min-height: 100vh;
    padding-bottom: 3rem;
    font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif;
}

.admin-luxury-header {
    background: #ffffff;
    border-bottom: 2.5px solid var(--startimes-blue);
    padding: 0.75rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 100;
}

.admin-header-inner {
    width: 98%;
    max-width: 1650px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
}

.admin-brand-block {
    display: flex;
    align-items: center;
}

.admin-brand-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.brand-logo-glow {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
}

.brand-titles {
    display: flex;
    flex-direction: column;
}

.brand-app-name {
    font-size: 1.25rem;
    font-weight: 900;
    color: #0369a1;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.badge-ver {
    background: #e0f2fe;
    color: #0284c7;
    border: 1px solid #93c5fd;
    font-size: 0.75rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-weight: 800;
}

.brand-panel-tag {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 700;
}

.server-live-chip {
    background: #ecfdf5;
    border: 1.5px solid #a7f3d0;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.85rem;
}

.live-pulse-dot {
    width: 9px;
    height: 9px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
}

.live-engine-text {
    color: #065f46;
    font-weight: 800;
}

.live-port-tag {
    background: #d1fae5;
    color: #047857;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-family: monospace;
    font-weight: 800;
}

.btn-goto-forum {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    color: #0369a1;
    padding: 0.45rem 1.1rem;
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    font-weight: 800;
    transition: all 0.2s;
}

.btn-goto-forum:hover {
    background: #0284c7;
    border-color: #0284c7;
    color: white;
}

.director-chip-profile {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: #ffffff;
    border: 1.5px solid #93c5fd;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
}

.director-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #0000ff;
}

.director-name-sm {
    font-size: 0.9rem;
    font-weight: 900;
    color: #0000ff;
}

.director-role-sm {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 700;
}

/* Admin Layout (Light Theme) */
.admin-luxury-layout {
    width: 98%;
    max-width: 1650px;
    margin: 1.25rem auto;
    padding: 0;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    direction: rtl;
}

.admin-luxury-sidebar {
    background: #ffffff;
    border: 1.5px solid #93c5fd;
    border-radius: 12px;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: fit-content;
    box-shadow: var(--shadow-card);
}

.sidebar-menu-title {
    font-size: 0.8rem;
    font-weight: 900;
    color: #0369a1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 0.5rem;
}

.sidebar-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.nav-tab-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: #334155;
    font-size: 0.95rem;
    font-weight: 800;
    transition: all 0.2s;
}

.nav-tab-item:hover {
    background: #f0f9ff;
    color: #0284c7;
}

.nav-tab-item.active {
    background: linear-gradient(90deg, #0284c7, #0369a1);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.admin-luxury-content {
    background: #ffffff;
    border: 1.5px solid #93c5fd;
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: var(--shadow-card);
}

.pane-headline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 1rem;
}

.pane-title {
    font-size: 1.45rem;
    font-weight: 900;
    color: #0f172a;
}

.pane-sub {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
}

/* Light Metric Cards */
.luxury-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.luxury-card {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.card-kpi-label {
    font-size: 0.9rem;
    color: #475569;
    font-weight: 800;
}

.card-icon-bubble {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-cyan { background: #e0f2fe; color: #0284c7; }
.bg-indigo { background: #e0e7ff; color: #4338ca; }
.bg-emerald { background: #d1fae5; color: #059669; }
.bg-amber { background: #fef3c7; color: #d97706; }

.card-val-number {
    font-size: 1.75rem;
    font-weight: 900;
    color: #0f172a;
    font-family: 'Plus Jakarta Sans', monospace;
    line-height: 1.1;
}

.card-trend-tag {
    font-size: 0.8rem;
    font-weight: 800;
}

.card-trend-tag.positive {
    color: #059669;
}

/* Light Tables in Admin */
.luxury-table-card {
    background: #ffffff;
    border: 1.5px solid #93c5fd;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.table-card-header {
    background: #e0f2fe;
    padding: 0.85rem 1.25rem;
    border-bottom: 1.5px solid #93c5fd;
}

.table-header-titles h3 {
    font-size: 1.05rem;
    font-weight: 900;
    color: #0369a1;
}

.table-header-titles span {
    font-size: 0.82rem;
    color: #475569;
    font-weight: 600;
}

.luxury-data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
    font-size: 0.95rem;
}

.luxury-data-table th {
    background: #f1f5f9;
    padding: 0.75rem 1.15rem;
    color: #0369a1;
    font-weight: 900;
    border-bottom: 1.5px solid #cbd5e1;
}

.luxury-data-table td {
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid #e2e8f0;
    color: #1e293b;
    vertical-align: middle;
}

.luxury-data-table tr:hover {
    background: #f8fafc;
}

.num-mono {
    font-family: 'Plus Jakarta Sans', monospace;
    font-weight: 800;
    color: #0f172a;
}

.time-muted-pill {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #475569;
    font-weight: 700;
}

.badge-locked-pill {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.8rem;
}

.badge-admintopics-pill {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fcd34d;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.8rem;
}

.badge-active-pill {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.8rem;
}

.badge-pinned-pill {
    background: #eff6ff;
    color: #0284c7;
    border: 1px solid #93c5fd;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.78rem;
}

.badge-slug-mono {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 800;
}

.category-block-luxury {
    background: #ffffff;
    border: 1.5px solid #93c5fd;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.cat-bar-luxury {
    background: linear-gradient(90deg, #0284c7 0%, #0369a1 100%);
    padding: 0.75rem 1.25rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cat-title-text {
    font-size: 1.15rem;
    font-weight: 900;
    color: #ffffff;
}

.btn-luxury-primary {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: white;
    border: none;
    padding: 0.65rem 1.4rem;
    border-radius: 8px;
    font-weight: 900;
    font-family: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.3);
}

.btn-luxury-secondary {
    background: #f8fafc;
    color: #0369a1;
    border: 1.5px solid #93c5fd;
    padding: 0.65rem 1.4rem;
    border-radius: 8px;
    font-weight: 900;
    font-family: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-table-icon {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #0369a1;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-table-icon:hover {
    background: #0284c7;
    color: white;
    border-color: #0284c7;
}

.btn-mini-action {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-mini-action:hover {
    background: #e2e8f0;
}

.text-danger { color: #dc2626 !important; }
.text-cyan { color: #0284c7 !important; }
.text-indigo { color: #4338ca !important; }
.text-emerald { color: #059669 !important; }

/* Light Luxury Forms */
.luxury-form-card {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 1.75rem;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.luxury-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1.25rem;
}

.luxury-input-group label {
    font-size: 0.9rem;
    font-weight: 900;
    color: #1e293b;
}

.luxury-input, .luxury-select, .luxury-textarea {
    background: #ffffff;
    border: 1.5px solid #94a3b8;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #0f172a;
    font-family: inherit;
    font-size: 0.92rem;
    outline: none;
}

.luxury-input:focus, .luxury-select:focus, .luxury-textarea:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
}

.toggles-box {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 1.25rem 0;
}

.luxury-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.92rem;
    color: #1e293b;
    font-weight: 800;
    cursor: pointer;
}

/* Light Modals */
.luxury-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    padding: 1.5rem;
    direction: rtl;
}

.luxury-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.luxury-modal-card {
    background: #ffffff;
    border: 2px solid #0284c7;
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: scale(0.96);
    transition: transform 0.2s;
}

.luxury-modal-overlay.open .luxury-modal-card {
    transform: scale(1);
}

.modal-card-top {
    background: linear-gradient(90deg, #0284c7, #0369a1);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
}

.modal-close-x {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-card-body {
    padding: 1.5rem;
    background: #ffffff;
}

.modal-card-footer {
    background: #f8fafc;
    padding: 1rem 1.5rem;
    border-top: 1px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ==========================================================================
   LEGACY DOCK STYLES
   ========================================================================== */
.dock-pill-container {
    background: #ffffff;
    border: 1.5px solid #0284c7;
    border-radius: var(--radius-pill);
    padding: 0.4rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-dock);
}

.dock-btn {
    background: transparent;
    border: none;
    color: #0369a1;
    font-size: 1.25rem;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.dock-btn:hover {
    background: #e0f2fe;
    transform: translateY(-2px);
    color: #0284c7;
}

/* ==========================================================================
   3-LINE SIMPLE FOOTER
   ========================================================================== */
.forumrexar-simple-footer {
    width: 98%;
    max-width: 1650px;
    margin: 3rem auto 1rem auto;
    text-align: center;
    padding: 1.5rem 0;
    border-top: 1.5px solid #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-family: 'Plus Jakarta Sans', 'Cairo', sans-serif;
    direction: rtl;
}

.foot-l1 {
    color: #475569;
    font-size: 0.9rem;
    font-weight: 700;
}

.foot-l2 {
    color: #0284c7;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.foot-l3 {
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 800;
}

/* ==========================================================================
   HOMEPAGE CUSTOM SPLIT FOOTER (سطر واحد: يساراً البرنامج ويميناً الحقوق)
   ========================================================================== */
body.home-view {
    padding-bottom: 50px !important;
}

.forumrexar-home-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    direction: rtl !important;
    padding: 0 4px !important;
    margin: 8px auto 6px auto !important;
    max-width: 1400px !important;
    width: 98% !important;
    box-sizing: border-box !important;
    border: none !important;
    background: transparent !important;
    height: auto !important;
    min-height: unset !important;
}

.home-footer-dock-strip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 30px !important;
    padding: 0 16px !important;
    background: #eef5fb !important;
    border: 1px solid #b4cde3 !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    font-family: Arial, Tahoma, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: bold !important;
    color: #1e293b !important;
    direction: rtl !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}

.home-footer-dock-strip:hover {
    background: #e2eefa !important;
    border-color: #92b8d9 !important;
}

.home-footer-dock-strip .footer-brand-blue {
    color: #0279b8 !important;
    font-weight: bold !important;
    margin: 0 3px !important;
}

.footer-version-link {
    color: #0279b8 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-weight: bold !important;
    transition: color 0.15s ease !important;
}

.footer-version-link:hover {
    color: #f2720c !important; /* لون برتقالي مميز عند تمرير الماوس */
    text-decoration: none !important;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100000000 !important;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    direction: rtl;
}

.luxury-toast {
    background: #ffffff;
    border: 1.5px solid #0284c7;
    border-radius: 10px;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #0f172a;
    font-weight: 800;
    font-size: 0.92rem;
}

.luxury-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.luxury-toast.toast-success {
    border-color: #10b981;
    background: #ecfdf5;
    color: #065f46;
}

.luxury-toast.toast-error {
    border-color: #ef4444;
    background: #fef2f2;
    color: #991b1b;
}

/* Sidebar Drawer */
.sidebar-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.sidebar-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-drawer {
    position: fixed;
    top: 0;
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%);
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    background: #ffffff;
    border-right: 2px solid #7cb1ea;
    border-left: none !important;
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.22);
    z-index: 9999;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    direction: rtl;
}

.sidebar-drawer.open,
.sidebar-drawer.active {
    transform: translateX(0) !important;
    left: 0 !important;
    right: auto !important;
}

.drawer-header-top {
    padding: 0.65rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #cbd5e1;
    display: flex;
    justify-content: flex-start;
}

.drawer-close-btn {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: #475569;
    cursor: pointer;
}

.drawer-scroll-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.drawer-user-card {
    background: #f0f9ff;
    border: 1.5px solid #0284c7;
    border-radius: 8px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.user-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-nickname-blue {
    font-size: 1.1rem;
    font-weight: 900;
    color: #0000ff;
}

.user-year-badge {
    font-size: 0.8rem;
    color: #475569;
    font-weight: 800;
}

.user-id-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.member-id-tag {
    font-size: 1.05rem;
    font-weight: 900;
    color: #0369a1;
    font-family: monospace;
}

.id-icons {
    display: flex;
    gap: 4px;
}

.id-circle {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1.5px solid #0284c7;
}

.id-circle.filled {
    background: #0284c7;
}

.ip-track-box {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    font-size: 0.78rem;
    color: #1e293b;
    text-align: center;
    font-family: monospace;
    font-weight: 800;
}

.admin-panel-drawer-link {
    margin-top: 0.45rem;
}

.drawer-select-forum {
    width: 100%;
    padding: 0.5rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: inherit;
    font-weight: 700;
}

.drawer-box {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
}

.drawer-box-header {
    background: #e0f2fe;
    padding: 0.45rem 0.85rem;
    border-bottom: 1px solid #cbd5e1;
}

.drawer-box-header h4 {
    font-size: 0.88rem;
    font-weight: 900;
    color: #0369a1;
}

.color-swatches-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 0.6rem;
}

.swatch-btn {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.25rem 0;
    cursor: pointer;
}

.timezone-display {
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    color: #475569;
    text-align: center;
    background: #f1f5f9;
    font-weight: 700;
}

.display-controls-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 0.6rem;
}

.ctrl-btn {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.8rem;
    padding: 0.3rem 0;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
}

.drawer-services-authentic-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 0.75rem 0.4rem;
    direction: rtl;
}

.srv-btn-authentic {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.5rem 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.srv-btn-authentic:hover {
    background: #e0f2fe;
    border-color: #0284c7;
    transform: translateY(-1px);
}

.srv-btn-authentic .icon {
    font-size: 1.35rem; /* الأيقونات واضحة وكبيرة */
    line-height: 1;
    display: block;
}

.srv-btn-authentic .lbl {
    font-size: 0.72rem; /* الخطوط داكنة ومقروءة */
    font-weight: 800;
    color: #0f172a;
    display: block;
    white-space: nowrap;
}

.btn-logout-drawer {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
}

.btn-logout-drawer:hover {
    background: #fecaca !important;
    border-color: #ef4444 !important;
}

.btn-logout-drawer .lbl {
    color: #b91c1c !important;
    font-weight: 900 !important;
}

/* Logout Luxury Modal */
.logout-modal-card {
    max-width: 480px;
    text-align: center;
}

.logout-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.75rem 1.5rem;
}

.logout-icon-bubble {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fee2e2;
    border: 2px solid #fca5a5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.logout-prompt-title {
    font-size: 1.25rem;
    font-weight: 900;
    color: #0f172a;
}

.logout-prompt-desc {
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.5;
}

.btn-logout-confirm-red {
    background: linear-gradient(135deg, #e11d48, #be123c);
    color: white;
    border: none;
    padding: 0.65rem 1.5rem;
    border-radius: 8px;
    font-weight: 900;
    font-size: 0.92rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(225, 29, 72, 0.3);
}

.btn-logout-confirm-red:hover {
    background: #be123c;
}

.member-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0.75rem;
}

.srv-icon-btn {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
}

.basic-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 0.65rem;
}

.basic-link-btn {
    background: #f0f9ff;
    border: 1.5px solid #bae6fd;
    border-radius: 6px;
    padding: 0.45rem 0;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 800;
    color: #0369a1;
    text-align: center;
}

.supervisor-tools-box {
    border-color: #e11d48;
}

.supervisor-tools-box .drawer-box-header {
    background: #ffe4e6;
}

.supervisor-tools-box h4 {
    color: #e11d48;
}

.sup-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 0.65rem;
}

.sup-tool-btn {
    background: #fff1f2;
    border: 1.5px solid #fecdd3;
    border-radius: 6px;
    padding: 0.45rem 0;
    font-size: 0.82rem;
    font-family: inherit;
    font-weight: 900;
    color: #be123c;
    cursor: pointer;
}

.sup-tool-btn.danger-tool {
    background: #e11d48;
    color: white;
    grid-column: span 2;
    border-color: #be123c;
}

/* ==========================================================================
   AUTHENTIC STARTIMES / KOOORA NEW TOPIC EDITOR (مطابقة تامة للصورة 5)
   ========================================================================== */
.editor-page-container {
    max-width: 1500px;
    margin: 1rem auto 3rem auto;
}

.startimes-top-pill-banner {
    background: linear-gradient(90deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-card);
    margin-bottom: 1rem;
}

.startimes-top-pill-banner h2 {
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.startimes-editor-outer-frame {
    background: #ffffff;
    border: 2px solid #0284c7;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* 2. The Blue Capsule Title Bar (مطابقة للصورة 5) */
.startimes-title-capsule-bar {
    background: linear-gradient(90deg, #0284c7 0%, #0369a1 100%);
    border-radius: var(--radius-pill);
    padding: 0.45rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    direction: rtl;
}

.capsule-label-wrap {
    flex-shrink: 0;
}

.capsule-label-text {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 900;
}

.capsule-input-wrap {
    flex: 1;
}

.startimes-authentic-title-input {
    width: 100%;
    background: #ffffff;
    border: 1.5px solid #ffffff;
    border-radius: var(--radius-pill);
    padding: 0.45rem 1.25rem;
    font-size: 1rem;
    font-weight: 800;
    font-family: inherit;
    color: #0f172a;
    outline: none;
    transition: all 0.2s;
}

.startimes-authentic-title-input:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

.capsule-stamps-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.stamp-pill-red {
    background: linear-gradient(135deg, #e11d48, #be123c);
    color: #ffffff;
    border: 1.5px solid #ffffff;
    padding: 0.2rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
}

/* 3. The Authentic Startimes Toolbar Row (الصورة 5) */
.startimes-rich-toolbar-row {
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    direction: rtl;
}

.toolbar-btn-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-sep {
    width: 1px;
    height: 22px;
    background: #cbd5e1;
    margin: 0 0.25rem;
}

.st-tool-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.25rem 0.55rem;
    font-size: 0.88rem;
    font-weight: 800;
    color: #1e293b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    transition: all 0.15s;
    font-family: inherit;
}

.st-tool-btn:hover {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.st-select-dropdown {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.2rem 0.45rem;
    font-size: 0.8rem;
    font-family: inherit;
    font-weight: 700;
    color: #1e293b;
    height: 28px;
    outline: none;
}

.highlight-upload-btn {
    background: #ecfccb !important;
    border-color: #bef264 !important;
    color: #365314 !important;
    font-weight: 900 !important;
}

.highlight-upload-btn:hover {
    background: #d9f99d !important;
    color: #1a2e05 !important;
}

/* 4. Textarea Editor Canvas (مطابقة للوحة البيضاء في الصورة 5) */
.startimes-editor-canvas-container {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-top: 2px dashed #93c5fd; /* الخط المنقط العلوي المعتمد */
    border-radius: 8px;
    padding: 1rem;
    min-height: 380px;
    display: flex;
    flex-direction: column;
}

.startimes-canvas-textarea {
    width: 100%;
    min-height: 360px;
    border: none;
    outline: none;
    font-family: 'Cairo', system-ui, sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #0f172a;
    resize: vertical;
    background: transparent;
}

/* 5. Editor Bottom Bar */
.startimes-editor-bottom-bar {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
}

.editor-options-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.editor-actions-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-publish-st {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    border: none;
    padding: 0.65rem 1.85rem;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 900;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
    transition: transform 0.15s;
}

.btn-publish-st:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.45);
}

.btn-cancel-st {
    background: #e2e8f0;
    color: #475569;
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius-pill);
    font-weight: 800;
    font-size: 0.95rem;
}

/* ==========================================================================
   AUTHENTIC STARTIMES TOPIC VIEW (مطابقة 100% للصورة 2)
   ========================================================================== */
.topic-view-main-container {
    width: 99.4% !important;
    max-width: none !important;
    margin: 0.4rem auto 0 auto !important;
    padding: 0 !important;
}

.breadcrumb-banner-topic {
    background: #ffffff;
    border: 1.5px solid #93c5fd;
    border-radius: 6px;
    padding: 0.45rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    margin-bottom: 4px;
}

.bc-crumbs {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
    font-weight: 800;
}

.bc-link {
    color: #0369a1;
}

.bc-link:hover {
    color: #0284c7;
    text-decoration: underline;
}

.bc-sep {
    color: #f97316;
    font-weight: 900;
}

.bc-current {
    color: #0f172a;
}

.topic-sup-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.btn-sup-action {
    background: #f0f9ff;
    border: 1px solid #93c5fd;
    color: #0369a1;
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}

.btn-sup-action:hover {
    background: #0284c7;
    color: white;
}

.btn-sup-danger {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.btn-sup-danger:hover {
    background: #dc2626;
    color: white;
}

/* 2. The Blue Topic Banner (الصورة 2) */
.startimes-topic-blue-banner {
    background: #0279b8;
    color: #ffffff;
    border-radius: 6px;
    padding: 0.5rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    box-shadow: var(--shadow-card);
    margin-bottom: 4px;
}

.banner-right-side {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.badge-announcement-red {
    background: #e11d48;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 0.15rem 0.65rem;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 900;
}

.topic-banner-title-h1 {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -0.2px;
}

.btn-bottom-page-pill {
    background: #cbe3fb;
    color: #0b385e;
    border: 1.5px dotted #20639b;
    padding: 0.35rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 800;
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: background 0.15s ease;
    white-space: nowrap;
}

.btn-bottom-page-pill:hover {
    background: #b5d8fa;
    color: #004085;
}

/* 3. The Authentic Posts Stream (الصورة 2) */
.posts-stream-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    direction: rtl;
    margin-bottom: 4px;
    width: 100%;
}

.st-post-item-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.st-post-box-authentic {
    background: #ffffff;
    border: 1.5px solid #93c5fd;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.st-post-grid-layout {
    display: grid;
    grid-template-columns: 162px 1fr; /* عمود العضو على اليمين مطابق تماماً لستار تايمز 162px والمحتوى على اليسار */
    direction: rtl;
    min-height: 280px;
}

/* Author Sidebar Card (مطابق 100% لستار تايمز 162px - td.topic_member) */
.st-author-sidebar-col {
    background: #f8fafc;
    border-left: 1.5px solid #cbd5e1;
    padding: 6px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    box-sizing: border-box;
    width: 162px;
    max-width: 162px;
    overflow: hidden;
}

.admin-top-pill,
.leadership-top-pill {
    width: 96%;
    max-width: 152px;
    border-radius: 20px;
    padding: 3px 6px;
    min-height: 28px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    margin-bottom: 4px;
    box-sizing: border-box;
    overflow: hidden;
}

.leadership-top-pill.bgadmin,
.admin-top-pill {
    background-color: #0000ff !important;
    background: #0000ff !important;
    color: #ffffff !important;
}

.leadership-top-pill.bgsupermod {
    background-color: #cc8811 !important;
    background: #cc8811 !important;
    color: #ffffff !important;
}

.leadership-top-pill.bgdeputy {
    background-color: #ff5500 !important;
    background: #ff5500 !important;
    color: #ffffff !important;
}

.admin-pill-link,
.leadership-pill-link {
    color: #ffffff !important;
    font-size: 20px;
    font-weight: 700 !important;
    font-family: Arial, sans-serif !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1 !important;
    padding-top: 2px !important;
    transition: color 0.15s ease;
}

.admin-pill-link:hover,
.leadership-pill-link:hover {
    color: #e2f952 !important; /* تحول النص للون الليموني عند مرور الماوس بدلاً من الأحمر */
    text-decoration: none !important;
}

.leadership-role-pill {
    display: inline-block;
    width: 92%;
    border-radius: 10px;
    padding: 1.5px 8px;
    color: #ffffff !important;
    text-align: center;
    font-size: 0.78rem !important;
    font-weight: 700;
    font-family: Arial, sans-serif !important;
    margin: 1.5px 0;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.leadership-role-pill:hover {
    color: #e2f952 !important; /* تحول الأبيض للون الليموني عند مرور الماوس بدلاً من الأحمر */
    text-decoration: none !important;
}

.leadership-role-pill.bgsupermod,
.leadership-role-pill.bg-supermod,
.bg-supermod {
    background-color: #cc8811 !important;
    background: #cc8811 !important;
    color: #ffffff !important;
}

.leadership-role-pill.bgdeputy,
.leadership-role-pill.bg-deputy,
.bg-deputy {
    background-color: #ff5500 !important;
    background: #ff5500 !important;
    color: #ffffff !important;
}

.author-plain-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    margin-bottom: 2px;
    width: 100%;
}

.author-plain-name {
    color: #000000 !important;
    font-family: Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    text-decoration: none !important;
    line-height: normal !important;
    display: block;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-bottom: 0px;
    transition: color 0.15s ease;
}

.author-plain-name.role-moderator:hover,
.author-plain-name:hover {
    color: #ff0000 !important;
    text-decoration: none !important;
}

.mod-red-stars-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-top: 1px;
    margin-bottom: 3px;
    line-height: 1;
}

.mod-red-stars-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;
    line-height: 0.95;
    letter-spacing: -2px;
}

.star-green {
    color: #008000 !important;
    font-size: 16px;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.star-red {
    color: #cc0000 !important;
    font-size: 16px;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.star-orange {
    color: #ff6633 !important;
    font-size: 16px;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.star-gold {
    color: #cc8811 !important;
    font-size: 16px;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.author-avatar-container {
    width: 110px;
    height: 110px;
    border: 1.5px solid #555555;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.author-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-role-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #000000;
    margin-top: 2px;
    margin-bottom: 2px;
    line-height: 1.25;
    text-align: center;
    width: 100%;
}

.admin-role-text,
.member-role-text,
.user-custom-role-title {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    font-family: Arial, sans-serif !important;
    color: #000000 !important;
    line-height: 1.25 !important;
    display: block;
    margin: 1px 0;
}

.staff-role-line {
    font-size: 0.78rem;
    font-weight: 700;
    font-family: Arial, sans-serif !important;
    line-height: 1.25;
    margin: 1px 0;
}

.staff-role-link {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    font-family: Arial, sans-serif !important;
    color: #cc0000 !important;
    line-height: 1.25 !important;
    display: block;
    margin: 1.5px 0;
    text-decoration: none !important;
    transition: color 0.15s ease;
    text-align: center;
}

.staff-role-link:hover {
    color: #ff0000 !important;
    text-decoration: none !important;
}

.author-stats-lines {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
    margin: 1px 0;
}

.author-stats-green-lines {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
    margin: 1px 0;
}

.stat-line-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    line-height: 1.22;
    direction: rtl;
    font-family: 'Cairo', sans-serif;
    font-size: 0.78rem !important;
    margin: 0px 0;
}

.stat-line-item .stat-lbl,
.stat-line-item .stat-num {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
}

.stat-red-line {
    color: #cc0000 !important;
    font-size: 0.78rem !important;
}

.stat-black-line {
    color: #000000 !important;
    font-size: 0.78rem !important;
}

.stat-green-line {
    color: #008000 !important;
    font-size: 0.76rem !important;
}

.stat-green-line .stat-lbl,
.stat-green-line .stat-num {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #008000 !important;
}

.author-flag-container {
    margin: 2px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.author-real-flag-img {
    width: 28px;
    height: 18px;
    object-fit: cover;
    border: 1px solid #333333;
    display: inline-block;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.profile-header-user-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.profile-subtitles-under-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
}

.profile-subtitles-under-name .staff-role-link {
    font-size: 0.82rem !important;
}

.profile-desc-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.profile-desc-item .staff-role-link {
    font-size: 0.90rem !important;
    margin: 2px 0;
}

.author-latest-medal-card {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.medal-card-label {
    color: #000000;
    font-size: 0.84rem;
    font-weight: 800;
    margin-bottom: 2px;
    text-align: center;
}

.medal-card-box {
    background: #ebf4fb;
    border: 1px dotted #7ab0d6;
    border-radius: 12px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88%;
    box-sizing: border-box;
}

.author-medal-img {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #335577;
    background: #ffffff;
    padding: 2px;
}

/* Post Content & Toolbar (الصورة 2) */
.st-post-content-col {
    padding: 0.85rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.st-post-top-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed #cbd5e1;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

.post-date-pill {
    background: #f1f5f9;
    border: 1px solid #93c5fd;
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 800;
    font-family: monospace;
    color: #0369a1;
}

.post-micro-actions-list {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-micro-tool {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-micro-tool:hover {
    background: #0284c7;
    color: white;
    border-color: #0284c7;
}

.st-post-text-body {
    font-size: 1.15rem;
    line-height: 2;
    color: #0f172a;
    font-weight: 700;
    font-family: Arial, sans-serif !important;
    text-align: right;
    min-height: 60px;
    padding: 0.25rem 0 1rem 0;
    margin: 0;
}

.st-post-text-body *,
.st-rendered-content,
.st-rendered-content * {
    font-family: Arial, sans-serif !important;
}

.st-post-image-container {
    margin: 1.25rem auto;
    text-align: center;
}

.st-post-uploaded-image {
    max-width: 85%;
    max-height: 520px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    border: 1px solid #cbd5e1;
    object-fit: contain;
}

.st-post-signature-wrapper {
    margin-top: 1.5rem;
}

.st-signature-divider {
    border-top: 1px dotted #93c5fd;
    margin-bottom: 0.5rem;
}

.st-signature-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 4. Quick Reply Authentic (الصورة 2) */
.quick-reply-card-authentic {
    background: #ffffff;
    border: 1.5px solid #93c5fd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    margin-top: 0;
    direction: rtl;
}

.quick-reply-banner {
    background: linear-gradient(90deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    padding: 0.55rem 1.25rem;
}

.quick-reply-banner h3 {
    font-size: 1.05rem;
    font-weight: 900;
}

.quick-reply-form-inner {
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quick-reply-card-authentic .startimes-editor-canvas-container {
    min-height: auto !important;
    padding: 0 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-top: 2px dashed #93c5fd !important;
    border-radius: 6px !important;
    background: #ffffff !important;
}

.reply-toolbar-box {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.reply-textarea-authentic {
    width: 100%;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.85rem;
    font-size: 1.05rem;
    font-family: 'Cairo', sans-serif;
    outline: none;
    line-height: 1.7;
}

.reply-textarea-authentic:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.reply-submit-bar-authentic {
    display: flex;
    justify-content: flex-start; /* زر إضافة الرد على اليمين مطابق للصورة 5 */
    margin-top: 0.4rem;
}

.btn-send-reply-st {
    background: linear-gradient(90deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: none;
    padding: 0.55rem 1.75rem;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 900;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    transition: filter 0.15s ease, opacity 0.15s ease;
}

.btn-send-reply-st:hover {
    filter: brightness(1.08);
}

/* 5. شريط عنوان الموضوع أسفل الصفحة وزر بداية الصفحة (الصورة 5 بدون أيقونة التثبيت) */
.startimes-topic-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    gap: 0.85rem;
    margin-top: 6px;
    margin-bottom: 0;
}

.bottom-bar-right-title {
    flex: 1;
    background: #0279b8;
    border-radius: 6px;
    padding: 0.45rem 1.25rem;
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
}

.topic-bottom-title-text {
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.bottom-bar-left-action {
    display: flex;
    align-items: center;
}

.btn-top-page-pill {
    background: #cbe3fb;
    color: #0b385e;
    border: 1.5px dotted #20639b;
    border-radius: 10px;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    font-weight: 800;
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: background 0.15s ease;
    white-space: nowrap;
}

.btn-top-page-pill:hover {
    background: #b5d8fa;
    color: #004085;
}

/* 6. إلغاء الفراغ مع الدوك السفلي داخل صفحات المواضيع والأقسام (مطابقة 100% لستار تايمز) */
.topic-view-body,
.forum-topics-view {
    padding-bottom: 44px !important;
}

.startimes-main-container.topic-view-main-container {
    width: 99.4% !important;
    max-width: none !important;
    margin: 0.4rem auto 0 auto !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.topic-view-body .header-inner {
    width: 99.4% !important;
    max-width: none !important;
}

.topic-view-body .startimes-header {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

/* 7. التمدد الكامل للشاشة وإلغاء الفوتر والفراغات للرئيسية ولمشاركاتك وللمواضيع النشطة والرسائل الخاصة (مطابقة 100% لستار تايمز) */
body.home-view,
body.user-posts-view,
body.active-topics-view,
body.user-mail-view {
    padding-bottom: 44px !important;
}

body.home-view,
body.user-posts-view,
body.user-mail-view {
    font-family: Arial, Tahoma, sans-serif !important;
}

.home-view,
.home-view *,
.user-posts-view,
.user-posts-view *,
.user-mail-view,
.user-mail-view * {
    font-family: Arial, Tahoma, sans-serif;
}

/* اسم المنتدى والصفحة الرئيسية واسم القسم الرئيسي في الترويسة يطابق خط ستار تايمز LaureenBold */
.home-view .brand-name-link,
.home-view .brand-page-link,
.home-view .brand-link-title,
.home-view .st-cat-link,
.home-view .table-columns-header th.col-forum-title a,
.home-view .table-columns-header th.col-forum-title span,
.user-posts-view .brand-name,
.user-posts-view .brand-page-title,
.user-posts-view .table-columns-header th,
.user-mail-view .st-mail-table thead th {
    font-family: 'LaureenBold', Arial, Tahoma, sans-serif !important;
}

.home-view .forum-link-title,
.home-view .table-columns-header th,
.home-view .num-val,
.home-view .reply-author-link,
.home-view .reply-timestamp,
.home-view .sup-home-link,
.home-view .dep-home-link,
.home-view .mod-home-link,
.user-mail-view .msg-link-title,
.user-mail-view .msg-sender-name,
.user-mail-view .msg-green-date {
    font-family: Arial, Tahoma, sans-serif !important;
}

.home-view .startimes-main-container,
.home-main-container,
.user-posts-view .startimes-main-container,
.user-posts-main-container,
.active-topics-view .startimes-main-container,
.active-topics-main-container,
.user-mail-view .mail-main-layout,
.mail-main-layout {
    width: 99.4% !important;
    max-width: none !important;
    margin: 0.4rem auto 0 auto !important;
    margin-bottom: 0 !important;
    direction: rtl;
    border: 1px solid #7cb1ea !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 0.5px !important;
}

.home-view .category-table-block {
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin-bottom: 0.5px !important;
    box-shadow: none !important;
}

.home-view .category-table-block:last-child {
    margin-bottom: 0 !important;
}

.user-posts-view .category-table-block,
.active-topics-view .category-table-block {
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

.home-view .table-responsive-wrapper,
.user-posts-view .table-responsive-wrapper,
.active-topics-view .category-table-wrapper {
    margin-bottom: 0 !important;
}

.home-view .startimes-table,
.user-posts-view .startimes-table,
.active-topics-view .startimes-table {
    margin-bottom: 0 !important;
}

.home-view .header-inner,
.user-posts-view .header-inner,
.active-topics-view .header-inner,
.user-mail-view .header-inner,
.st-services-page .header-inner,
.st-services-view .header-inner {
    width: 99.4% !important;
    max-width: none !important;
}

.home-view .startimes-header,
.user-posts-view .startimes-header,
.active-topics-view .startimes-header,
.user-mail-view .startimes-header,
.st-services-page .startimes-header,
.st-services-view .startimes-header {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

.home-view .forumrexar-simple-footer,
.user-posts-view .forumrexar-simple-footer,
.active-topics-view .forumrexar-simple-footer,
.user-mail-view .forumrexar-simple-footer,
.st-services-page .forumrexar-simple-footer,
.st-services-view .forumrexar-simple-footer {
    display: none !important;
}

.topic-locked-notice-banner {
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    text-align: center;
    color: #991b1b;
    font-weight: 800;
    font-size: 1rem;
    margin-top: 1.5rem;
}

@media (max-width: 992px) {
    .admin-luxury-layout {
        grid-template-columns: 1fr;
    }
    .form-row-2, .profile-body-flex-authentic {
        grid-template-columns: 1fr;
    }
    .startimes-table-frame {
        overflow-x: auto;
    }
    .startimes-title-capsule-bar {
        flex-direction: column;
        border-radius: 12px;
    }
    .startimes-editor-bottom-bar {
        flex-direction: column;
    }
}

/* ==========================================================================
   SIDEBAR DRAWER (قائمة البرجر الجانبية التفاعلية)
   ========================================================================== */
.sidebar-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.sidebar-drawer-overlay.active,
.sidebar-drawer-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.sidebar-drawer {
    position: fixed;
    top: 0;
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%);
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    background: #ffffff;
    border-right: 2px solid #7cb1ea;
    border-left: none !important;
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.22);
    z-index: 9999;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    direction: rtl;
}

.sidebar-drawer.active,
.sidebar-drawer.open {
    transform: translateX(0) !important;
    left: 0 !important;
    right: auto !important;
}

.drawer-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1.5px solid #cbd5e1;
    background: #f8fafc;
}

.drawer-header-title {
    font-size: 1rem;
    font-weight: 900;
    color: #0369a1;
}

.drawer-close-btn {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #dc2626;
    font-size: 1.35rem;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    transition: all 0.15s;
}

.drawer-close-btn:hover {
    background: #ef4444;
    color: #ffffff;
}

.drawer-scroll-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

.drawer-user-card {
    background: #f0f9ff;
    border: 1.5px solid #93c5fd;
    border-radius: 8px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.user-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-nickname-blue {
    font-size: 1.2rem;
    font-weight: 900;
    color: #0000ff;
    text-decoration: none;
}

.user-nickname-blue:hover {
    text-decoration: underline;
}

.user-year-badge {
    background: #dbeafe;
    color: #0369a1;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
}

.user-id-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #475569;
    font-weight: 800;
}

.member-id-tag {
    background: #0284c7;
    color: white;
    padding: 0.15rem 0.65rem;
    border-radius: 4px;
    font-family: monospace;
    font-weight: 900;
}

.ip-track-box {
    font-size: 0.8rem;
    color: #64748b;
    font-family: monospace;
}

.drawer-admin-enter-link {
    display: block;
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    color: #0369a1;
    font-size: 0.85rem;
    font-weight: 800;
    text-align: center;
    padding: 0.4rem;
    border-radius: 6px;
    margin-top: 0.25rem;
    text-decoration: none;
    transition: all 0.15s;
}

.drawer-admin-enter-link:hover {
    background: #0284c7;
    color: #ffffff;
}

/* بطاقة تسجيل الخروج البارزة والواضحة */
.drawer-logout-block {
    margin: 0.25rem 0;
}

.btn-drawer-logout-prominent {
    width: 100%;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 2px solid #ef4444;
    color: #b91c1c;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-size: 1.05rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.18);
    transition: all 0.18s;
    font-family: inherit;
}

.btn-drawer-logout-prominent:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}

.btn-drawer-logout-prominent .logout-icon {
    font-size: 1.35rem;
}

.btn-drawer-login-prominent {
    width: 100%;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border: none;
    color: #ffffff;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    transition: all 0.18s;
    font-family: inherit;
    margin-top: 0.4rem;
}

.btn-drawer-login-prominent:hover {
    background: #0369a1;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

.drawer-box {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
}

.drawer-box-header {
    background: #f8fafc;
    border-bottom: 1px solid #cbd5e1;
    padding: 0.45rem 0.75rem;
}

.drawer-box-header h4 {
    font-size: 0.88rem;
    font-weight: 900;
    color: #0f172a;
}

.basic-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 0.65rem;
}

.basic-link-btn {
    background: #f0f9ff;
    border: 1.5px solid #93c5fd;
    color: #0369a1;
    border-radius: 6px;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    display: block;
    text-decoration: none;
}

.basic-link-btn:hover {
    background: #0284c7;
    color: white;
}

.basic-link-btn.logout-direct-btn {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #e11d48;
}

.basic-link-btn.logout-direct-btn:hover {
    background: #e11d48;
    color: white;
}

.sup-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 0.65rem;
}

.sup-tool-btn {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #15803d;
    border-radius: 6px;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
}

.sup-tool-btn:hover {
    background: #15803d;
    color: white;
}

.sup-tool-btn.danger-tool {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.sup-tool-btn.danger-tool:hover {
    background: #b91c1c;
    color: white;
}

/* Real Drawer Login Form */
.drawer-real-login-form {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    text-align: right;
    direction: rtl;
}

.drawer-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.drawer-field-group label {
    font-size: 0.8rem;
    font-weight: 800;
    color: #475569;
}

.drawer-auth-input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    outline: none;
    transition: border-color 0.15s;
    background: #ffffff;
}

.drawer-auth-input:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.btn-drawer-login-submit {
    width: 100%;
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 0.65rem 1rem;
    font-size: 0.92rem;
    font-weight: 900;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
    box-shadow: 0 2px 5px rgba(2, 132, 199, 0.25);
    margin-top: 0.25rem;
}

.btn-drawer-login-submit:hover {
    background: #0369a1;
}

.btn-drawer-login-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.drawer-login-alert {
    padding: 0.45rem 0.65rem;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
}

.drawer-login-alert.error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.drawer-login-alert.success {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #86efac;
}

.btn-guest-avatar-trigger {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

/* ==========================================================================
   AUTHENTIC STARTIMES GUEST LOGIN BANNER (الصورة 2 - بنر دخول الأعضاء)
   ========================================================================== */
.st-guest-login-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
    border-radius: 8px 8px 12px 12px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.st-guest-login-banner .banner-header {
    background: #0279b8 !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-align: center !important;
    border-radius: 8px 8px 0 0 !important;
    font-family: 'LaureenBold', Arial, Tahoma, sans-serif !important;
}

.st-guest-login-banner .banner-header h3 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    font-family: 'LaureenBold', Arial, Tahoma, sans-serif !important;
}

.st-guest-login-banner .banner-body {
    padding: 12px 16px 12px 16px !important;
    background: #ffffea !important;
    background-color: #ffffea !important;
    border: 1px solid #7ea7c8 !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

.st-login-inputs-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    direction: rtl !important;
}

.st-login-field {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.st-login-field label {
    font-size: 0.92rem !important;
    font-weight: bold !important;
    color: #008000 !important;
    white-space: nowrap !important;
    font-family: Arial, Tahoma, sans-serif !important;
}

.st-login-input {
    background: #eef4fa !important;
    background-color: #eef4fa !important;
    border: 1px solid #7ea7c8 !important;
    border-radius: 14px !important;
    padding: 2px 10px !important;
    font-size: 0.92rem !important;
    font-weight: bold !important;
    color: #000000 !important;
    font-family: Arial, sans-serif !important;
    outline: none !important;
    width: 180px !important;
    height: 28px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}

.st-login-input:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25) !important;
}

.st-login-btns-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.btn-guest-action-circ {
    background: #0279b8 !important;
    background-color: #0279b8 !important;
    border: none !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: opacity 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}

.btn-guest-action-circ:hover {
    opacity: 0.85 !important;
}

.st-login-sublinks {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 35px !important;
    margin-top: 4px !important;
    direction: rtl !important;
}

.st-login-sublink {
    color: #008000 !important;
    font-size: 0.90rem !important;
    font-weight: bold !important;
    font-family: Arial, Tahoma, sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}

.st-login-sublink:hover {
    color: #ff0000 !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   DRAWER GUEST STYLES (الصورة 4 - القائمة الجانبية للزائر)
   ========================================================================== */
.drawer-close-btn-left {
    margin-right: auto !important; /* In RTL: pushes it to the far left */
    margin-left: 0 !important;
}

.drawer-timezone-box {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
}

.drawer-timezone-header {
    background: #f8fafc;
    border-bottom: 1px solid #cbd5e1;
    padding: 0.4rem 0.65rem;
    font-size: 0.82rem;
    font-weight: 900;
    color: #334155;
}

.drawer-timezone-body {
    padding: 0.55rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timezone-pill-badge {
    background: #e2f8b8;
    border: 1px solid #84cc16;
    color: #3f6212;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.guest-basic-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 0.5rem 0.35rem;
}

.guest-link-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.45rem 0.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-decoration: none;
    transition: all 0.15s;
}

.guest-link-card:hover {
    background: #f0f9ff;
    border-color: #0284c7;
    transform: translateY(-1px);
}

.guest-link-card .card-icon {
    font-size: 1.15rem;
}

.guest-link-card .card-title {
    font-size: 0.65rem;
    font-weight: 800;
    color: #1e293b;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ==========================================================================
   STARTIMES OFFICIAL ROLES LEGEND & STAFF ASSIGNMENT MODAL
   ========================================================================== */
.roles-legend-bar {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 0.85rem 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.roles-legend-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #334155;
}

.legend-items-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.legend-role-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1.5px solid;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.88rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.role-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.role-color-code {
    font-family: monospace;
    font-size: 0.75rem;
    opacity: 0.8;
    direction: ltr;
}

/* Staff Modal */
.staff-modal-large {
    max-width: 680px;
    width: 95%;
}

.staff-assignment-section {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 0.75rem;
}

.staff-slot-card {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.slot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slot-title {
    font-weight: 800;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.slot-badge {
    font-size: 0.82rem;
    font-weight: 800;
    border: 1.5px solid;
    padding: 0.2rem 0.65rem;
    border-radius: 6px;
    background: #ffffff;
}

.slot-actions-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
}

.search-member-box {
    position: relative;
    flex: 1;
}

.search-input-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    width: 100%;
}

.member-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    background: #ffffff;
    border: 1.5px solid #0284c7;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 9999;
    max-height: 200px;
    overflow-y: auto;
}

.member-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
}

.member-search-item:hover {
    background: #f0f9ff;
}

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

.ms-username {
    font-weight: 800;
    font-size: 0.88rem;
    color: #0f172a;
}

.ms-meta {
    font-size: 0.75rem;
    color: #64748b;
}

.moderators-tags-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-height: 32px;
}

.moderator-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fef2f2;
    border: 1.5px solid #cc0033;
    color: #cc0033;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.82rem;
}

.moderator-tag-pill .btn-remove-tag {
    cursor: pointer;
    background: none;
    border: none;
    color: #cc0033;
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
    padding: 0 2px;
}

.moderator-tag-pill .btn-remove-tag:hover {
    transform: scale(1.2);
}

.role-auto-notice {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #475569;
    margin-top: 0.5rem;
}

/* Topic Author Card Flag & Dynamic Stats Colors */
.author-flag-container {
    text-align: center;
    margin: 0.25rem 0 0.4rem 0;
    font-size: 1.35rem;
    line-height: 1;
}

.stat-num.stat-red {
    color: #cc0000 !important;
    font-weight: 800 !important;
}

.stat-num.stat-green {
    color: #15803d !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   Startimes Authentic Roles & Badges System (مطابق 100% للملفات الأصلية)
   ========================================================================== */

:root {
    --madmin: #0000ff;
    --msup: #cc8811;
    --mvsup: #ff6633;
    --mmod: #cc0033;
    --mmember: #000000;
}

/* Text links with authentic Startimes colors and hovers */
.madmin {
    color: var(--madmin) !important;
    font-weight: 700;
    text-decoration: none;
}
.madmin:hover {
    color: #dc2626 !important;
}

.msup {
    color: var(--msup) !important;
    font-weight: 700;
    text-decoration: none;
}
.msup:hover {
    color: #dc2626 !important;
}

.mvsup {
    color: var(--mvsup) !important;
    font-weight: 700;
    text-decoration: none;
}
.mvsup:hover {
    color: #dc2626 !important;
}

.mmod {
    color: var(--mmod) !important;
    font-weight: 700;
    text-decoration: none;
}
.mmod:hover {
    color: #000000 !important;
}

.mmember {
    color: var(--mmember) !important;
    font-weight: 700;
    text-decoration: none;
}

/* Background fills for Leadership Ranks */
.bgadmin {
    background: #0000ff !important;
    background-color: #0000ff !important;
    color: #ffffff !important;
}
.bgsup {
    background: #cc8811 !important;
    background-color: #cc8811 !important;
    color: #ffffff !important;
}
.bgvsup {
    background: #ff6633 !important;
    background-color: #ff6633 !important;
    color: #ffffff !important;
}

/* Topic Postbit - Leadership Author Badge (المدير، المراقب، النائب فقط) */
.author-nickname-pill.bgadmin,
.author-nickname-pill.bgsup,
.author-nickname-pill.bgvsup {
    width: 100%;
    border-radius: 25px !important;
    padding: 0.4rem 0.85rem !important;
    text-align: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.22) !important;
    display: block !important;
}
.author-nickname-pill.bgadmin {
    background: #0000ff !important;
    background-color: #0000ff !important;
}
.author-nickname-pill.bgsup {
    background: #cc8811 !important;
    background-color: #cc8811 !important;
}
.author-nickname-pill.bgvsup {
    background: #ff6633 !important;
    background-color: #ff6633 !important;
}

.author-nickname-pill.bgadmin a,
.author-nickname-pill.bgsup a,
.author-nickname-pill.bgvsup a {
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 1.15rem !important;
    text-decoration: none !important;
    display: block !important;
}

/* Topic Postbit - Plain Author (المشرفون مثل SALEH والأعضاء العاديون) */
.author-plain-box {
    width: 100%;
    text-align: center;
    padding: 0.2rem 0;
}
.author-plain-name {
    color: #000000 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    font-family: Arial, sans-serif !important;
    line-height: normal !important;
    text-decoration: none !important;
    display: inline-block;
}
.author-plain-name:hover {
    text-decoration: underline;
    color: #cc0033 !important;
}

/* Red Stars by Post Count (كل صف 5 نجوم كحد أقصى) */
.mod-red-stars-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    margin-top: 3px;
    user-select: none;
}
.mod-red-stars-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    line-height: 1;
}
.star-red {
    color: #cc0033 !important;
    font-size: 1.25rem !important;
    line-height: 1;
}

.star-green {
    color: #008800 !important;
    font-size: 1.25rem !important;
    line-height: 1;
}

.st-cat-link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.st-cat-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* Homepage Staff Links: Larger and Bold with Arial Narrow */
.sup-home-link,
.dep-home-link,
.mod-home-link {
    font-family: 'Arial Narrow', Arial, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: bold !important;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.sup-home-link:hover,
.dep-home-link:hover,
.mod-home-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.mod-role-text {
    color: #cc0033 !important;
    font-size: 0.95rem;
    font-weight: 800;
    display: inline-block;
}
.admin-role-text {
    color: #000000 !important;
    font-size: 0.95rem;
    font-weight: 800;
    display: inline-block;
}
.member-role-text {
    font-size: 0.88rem;
    font-weight: 700;
    color: #000000;
}

/* StarTimes Unified Profile Headers (Color does not change with ranks) */
.profile-role-header {
    background: #2172b8 !important; /* Classic StarTimes Blue */
    padding: 0.65rem 1.25rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 6px 6px 0 0;
}
.profile-role-header.bgadmin-header,
.profile-role-header.bgsup-header,
.profile-role-header.bgvsup-header,
.profile-role-header.classic-header {
    background: #2172b8 !important;
}

/* User Profile Authentic Elements */
.user-profile-real-img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
    background: #ffffff;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.member_points_box {
    margin-top: 0.5rem;
    background: #ff9900 !important;
    border: none !important;
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: #000000 !important;
    text-align: center;
}

/* Authentic Quick Action List in Profile */
.useraction-bar {
    list-style: none;
    padding: 0.6rem 0.85rem;
    margin: 0.6rem 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 6px 6px;
}
.user_action_item {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e40af;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.3rem 0.65rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.user_action_item:hover {
    background: #e0e7ff;
    border-color: #3b82f6;
    color: #1d4ed8;
}

/* ==========================================
   STARTIMES AUTHENTIC BOTTOM BAR DOCK
   ========================================== */
.startimes-bottom-dock {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    height: 38px !important;
    background: #eef5fb !important;
    border-top: 1px dotted #8ba8c8 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Always centered like StarTimes images 3, 4, 5 */
    padding: 0 16px !important;
    direction: rtl !important;
    box-sizing: border-box !important;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04) !important;
    font-family: Tahoma, Arial, sans-serif !important;
}

.st-dock-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.st-dock-member-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.st-dock-staff-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.st-dock-divider {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: #8ba8c8;
    margin: 0 6px;
}

.st-dock-circle-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.15s ease, filter 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.st-btn-services,
.st-btn-moderation {
    background-color: #2b7a9e !important; /* Neutral teal by default like Image 5 */
}

.st-dock-circle-btn:hover,
.st-btn-moderation:hover,
.st-mod-btn:hover,
.st-btn-services:hover,
.st-services-btn:hover {
    background-color: #ff7700 !important;
    transform: scale(1.15);
    filter: brightness(1.05);
}

.st-dock-circle-btn.st-icon-active {
    background-color: #ff7700 !important; /* Orange only when page is visited */
}

.st-dock-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2b7a9e !important;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.st-dock-icon-btn svg {
    fill: currentColor !important;
}

.st-dock-icon-btn:hover {
    color: #ff7700 !important;
}

.st-dock-icon-btn.st-icon-active,
.st-dock-icon-btn.st-icon-active svg,
.st-dock-icon-btn.st-icon-active path {
    color: #ff7700 !important;
    fill: #ff7700 !important;
}

.st-dock-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    background-color: #1d5773;
    border: 1px solid #ffffff;
    border-radius: 50%;
}

/* StarTimes Unified Bottom Dock Luxury Tooltip System (Image 2 Authentic) */
.st-dock-item-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.st-dock-tooltip {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: #333333;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    font-family: Tahoma, Arial, sans-serif;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1000000;
    line-height: 1.3;
    display: flex;
    align-items: center;
}

.st-tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 4px solid #333333;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: none;
}

.st-dock-tooltip.st-dock-tooltip-side {
    bottom: 2px;
    right: calc(100% + 8px);
    left: auto;
    transform: none;
}

.st-tooltip-arrow-side {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-width: 4px;
    border-style: solid;
    border-color: transparent transparent transparent #333333;
}

.st-dock-item-wrap:hover .st-dock-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Backward compatibility */
.st-dock-posts-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.st-dock-posts-tooltip {
    position: absolute;
    bottom: 2px;
    right: calc(100% + 8px);
    background: #333333;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    font-family: Tahoma, Arial, sans-serif;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    z-index: 100000;
}

.st-dock-posts-wrapper:hover .st-dock-posts-tooltip {
    opacity: 1;
}

/* ============================================================
   STARTIMES SUPERVISOR TOPIC MODERATION TOOLBAR & COMPONENTS
   ============================================================ */
.st-topic-mod-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #c0d0e0;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 0.65rem;
    direction: rtl;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.st-mod-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0f4f8;
    color: #003399;
    border: 1px solid #b0c4de;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    font-family: inherit;
}

.st-mod-tool-btn:hover {
    background: #003399;
    color: #ffffff;
    border-color: #002266;
}

.st-mod-tool-btn .tool-icon {
    font-size: 0.95rem;
}

.st-mod-tool-danger {
    color: #cc0000;
    border-color: #fca5a5;
    background: #fef2f2;
}

.st-mod-tool-danger:hover {
    background: #cc0000;
    color: #ffffff;
    border-color: #990000;
}

/* Forum Main Links Box */
.st-forum-mainlinks-box {
    background: #f4f8fc;
    border: 1px solid #1b4f72;
    border-radius: 4px;
    margin-bottom: 0.85rem;
    overflow: hidden;
    direction: rtl;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.mainlinks-header {
    background: #1b4f72;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mainlinks-list {
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mainlink-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    padding: 3px 0;
}

.mainlink-priority .mainlink-anchor {
    font-weight: 800;
    color: #cc0000;
}

.mainlink-anchor {
    color: #003399;
    text-decoration: none;
}

.mainlink-anchor:hover {
    text-decoration: underline;
}

.mainlink-author {
    color: #666666;
    font-size: 0.8rem;
}

/* Context Menu */
.st-topic-opter-cell {
    cursor: pointer;
    user-select: none;
    text-align: center;
}

.st-topic-opter-cell:hover .st-menu-burger-icon,
.st-topic-opter-cell:hover .st-menu-dots-icon {
    color: #003399;
    font-weight: 900;
    transform: scale(1.15);
}

.st-menu-burger-icon, .st-menu-dots-icon {
    display: inline-block;
    transition: transform 0.15s ease;
    font-size: 1.15rem;
    font-weight: 900;
}

/* ==============================================================
   1. قائمة خيارات الموضوع المنسدلة (مطابقة 100% للصورة 2 والصورة 3)
   ============================================================== */
.st-context-menu-authentic, .st-context-menu {
    display: none;
    position: fixed;
    z-index: 9999999;
    background: #ffffff;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
    min-width: 220px;
    max-width: 320px;
    direction: rtl;
    overflow: hidden;
    padding: 3px 0 5px 0;
    font-family: Tahoma, Arial, 'Cairo', sans-serif;
    animation: stCtxFadeIn 0.12s ease-out;
}

.st-context-menu-authentic.is-open, .st-context-menu.is-open {
    display: block !important;
}

@keyframes stCtxFadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

/* الترويسة الحمراء المعتمدة لعنوان الموضوع (الصورة 2 و 3) */
.ctx-header-authentic {
    padding: 6px 12px 2px 12px;
}

.ctx-title-red {
    color: #cc0000;
    font-weight: 800;
    font-size: 0.95rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    padding: 0 4px;
}

.ctx-header-divider {
    border-bottom: 1px solid #cfcfcf;
    margin: 5px 4px 4px 4px;
}

.ctx-list-authentic {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    direction: rtl !important;
}

/* كل صف في القائمة: النص يميناً والأيقونة يساراً والتحويم بالأزرق (الصورة 3) */
.ctx-row-authentic {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 5px 14px !important;
    cursor: pointer !important;
    color: #1e293b !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    direction: rtl !important;
    user-select: none !important;
    list-style: none !important;
    list-style-type: none !important;
    transition: background 0.1s ease, color 0.1s ease !important;
}

.ctx-row-authentic.is-hidden,
.ctx-sup-only.is-hidden {
    display: none !important;
}

.ctx-lbl {
    text-align: right;
    flex: 1;
    white-space: nowrap;
}

.ctx-ico {
    font-size: 1rem;
    width: 24px;
    text-align: left;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.ctx-row-authentic:hover {
    background-color: #0078d7 !important;
    color: #ffffff !important;
}

.ctx-row-authentic:hover .ctx-lbl,
.ctx-row-authentic:hover .ctx-ico {
    color: #ffffff !important;
}

/* ==============================================================
   2. نافذة تغيير خصائص الموضوع (مطابقة 100% للصورة 4 من ستار تايمز)
   ============================================================== */
.st-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    direction: rtl;
}

.st-modal-backdrop.is-open {
    display: flex !important;
}

.st-modal-dialog {
    background: #ffffff;
    border: 2px solid #20639b;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
    max-width: 95vw;
    width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: stModalFadeIn 0.2s ease-out;
}

@keyframes stModalFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.st-properties-dialog-authentic {
    background: #d6e6f2;
    border: 2px solid #20639b;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    width: 620px;
    max-width: 95vw;
    overflow: hidden;
    direction: rtl;
}

.st-dialog-titlebar-authentic {
    background: #20639b;
    color: #ffffff;
    padding: 8px 16px;
    text-align: center;
    font-weight: 800;
    font-size: 1.05rem;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.titlebar-text-center {
    display: block;
    text-align: center;
    font-family: inherit;
}

.st-prop-table-wrapper {
    padding: 8px 12px;
    background: #c6daf0;
}

.st-properties-table-authentic {
    width: 100%;
    border-collapse: collapse;
    border: 1.5px solid #ffffff;
    background: #d6e6f2;
}

.st-properties-table-authentic tr {
    border-bottom: 1.5px solid #ffffff;
}

.st-properties-table-authentic td {
    border-left: 1.5px solid #ffffff;
    border-right: 1.5px solid #ffffff;
    padding: 6px 10px;
    vertical-align: middle;
}

.prop-th-authentic {
    background: #20639b;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.92rem;
    width: 135px;
    text-align: right;
    padding-right: 10px;
    vertical-align: middle;
}

.prop-th-title {
    background: #c6daf0 !important;
    color: #000000 !important;
    font-weight: bold;
    font-size: 0.92rem;
}

.prop-td-authentic {
    background: #d6e6f2;
    padding: 6px 10px;
}

/* حقل عنوان الموضوع الأصفر المنقط (الصورة 4) */
.st-input-prop-yellow {
    width: 100%;
    background: #ffffcc;
    border: 1px dotted #333333;
    padding: 5px 8px;
    font-size: 0.95rem;
    font-weight: bold;
    color: #000000;
    box-sizing: border-box;
    outline: none;
    font-family: Tahoma, Arial, sans-serif;
    text-align: right;
}

.st-select-poll-authentic, .st-select-forum-authentic {
    width: 100%;
    background: #ffffff;
    border: 1px solid #7f9db9;
    padding: 4px 6px;
    font-size: 0.9rem;
    font-weight: bold;
    color: #000000;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}

.prop-radio-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.prop-radio-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: bold;
    color: #000000;
}

.prop-radio-item input[type="radio"] {
    cursor: pointer;
    accent-color: #0066cc;
    margin: 0;
}

/* الأزرار البيضاوية الزرقاء الثلاثة (الصورة 4) */
.st-properties-actions-authentic {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 12px 16px 6px 16px;
    background: #c6daf0;
}

.st-pill-btn-blue {
    background: #2a75b3;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 6px 24px;
    font-size: 0.92rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    font-family: inherit;
    transition: background 0.15s ease;
}

.st-pill-btn-blue:hover {
    background: #1f5b8c;
}

.st-properties-bottom-notice {
    color: #cc0000;
    font-weight: bold;
    font-size: 0.85rem;
    text-align: center;
    padding-bottom: 12px;
    padding-top: 4px;
    background: #c6daf0;
}

/* ==============================================================
   3. الأيقونات الإشرافية الدائرية داخل الموضوع (مطابقة للصورة 5)
   ============================================================== */
.post-date-and-tools-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    direction: rtl;
    width: 100%;
}

.st-post-circular-strip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    direction: rtl;
    flex-wrap: wrap;
}

.st-post-circ-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: #d3e5f5;
    border: 1px dotted #6b9ec7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    cursor: pointer;
    color: #000000;
    text-decoration: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    transition: transform 0.15s ease, background 0.15s ease;
    box-sizing: border-box;
}

.st-post-circ-btn:hover {
    background: #b5d5f5;
    transform: scale(1.15);
}

.circ-btn-alert {
    color: #cc0000 !important;
    font-size: 0.88rem;
}

.circ-btn-menu-trigger {
    font-weight: bold;
    font-size: 1rem;
    color: #1b4f72;
}

/* Stats Modal Styling */
.st-dialog-content-body {
    padding: 12px 16px;
    overflow-y: auto;
    max-height: calc(90vh - 110px);
}

.stats-header-info {
    font-size: 0.92rem;
    margin-bottom: 10px;
    color: #1b4f72;
}

.st-table-wrap {
    overflow-x: auto;
    border: 1px solid #c0d0e0;
    border-radius: 3px;
}

.st-topic-title-header-link {
    color: #ffffff !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: color 0.15s ease;
    font-size: inherit;
    font-weight: inherit;
    display: inline-block;
}

.st-topic-title-header-link:hover {
    color: #e2f952 !important; /* لون التمرير الليموني الأصلي لستار تايمز */
    text-decoration: none !important;
}

.st-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    direction: rtl;
}

.st-stats-table th {
    background: #1b4f72;
    color: #ffffff;
    font-weight: 800;
    padding: 7px 8px;
    border: 1px solid #2874a6;
    text-align: center;
}

.st-stats-table th:first-child {
    text-align: right;
    padding-right: 12px;
}

.st-stats-table td {
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    vertical-align: middle;
    text-align: center;
}

.st-stats-table td:first-child {
    text-align: right;
    padding-right: 12px;
}

.st-stats-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

.st-stats-table tbody tr:hover {
    background: #edf4fa;
}

.stats-pct-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-pct-bar {
    height: 8px;
    background: #0284c7;
    border-radius: 4px;
    min-width: 4px;
}

.stats-pct-num {
    font-weight: bold;
    color: #333;
    font-size: 0.82rem;
    min-width: 32px;
}

/* Edit History Card Styling */
.history-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-card-item {
    background: #fdfefe;
    border: 1px solid #b0c4de;
    border-radius: 4px;
    padding: 10px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.history-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 6px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.hist-time {
    color: #008000;
    font-weight: 700;
}

.hist-editor {
    color: #1b4f72;
}

.btn-revert-hist {
    background: #fef2f2;
    color: #cc0000;
    border: 1px solid #fca5a5;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-revert-hist:hover {
    background: #cc0000;
    color: #ffffff;
    border-color: #990000;
}

.hist-title-prev {
    font-size: 0.9rem;
    color: #222222;
    margin-bottom: 6px;
}

.hist-content-prev {
    font-size: 0.85rem;
    color: #444444;
}

.hist-body-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 8px 10px;
    margin-top: 4px;
    white-space: pre-wrap;
    max-height: 180px;
    overflow-y: auto;
    font-family: inherit;
}

/* Badges for sponsor pin, held, deleted */
.st-tag-pill.tag-sponsor {
    background: #fff0f5;
    color: #c0392b;
    border: 1px solid #e74c3c;
    font-weight: 800;
}

.st-tag-pill.tag-held {
    background: #fef9e7;
    color: #b7950b;
    border: 1px solid #f1c40f;
    font-weight: 800;
}

.st-tag-pill.tag-deleted {
    background: #f2f3f4;
    color: #7f8c8d;
    border: 1px solid #bdc3c7;
    font-weight: 800;
}

/* ==============================================================
   الأيقونات الدائرية الإشرافية (فيكتور SVG نقي مطابق لستار تايمز)
   ============================================================== */
.st-post-circ-btn svg {
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.12s ease;
}

/* ==============================================================
   واجهة تعديل محتوى الموضوع (مطابقة 100% للصورة 4 من ستار تايمز)
   ============================================================== */
.st-topic-edit-container {
    background: #ffffff;
    border: 1px solid #7f9db9;
    border-radius: 8px 8px 0 0;
    margin-bottom: 20px;
    direction: rtl;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.st-topic-edit-blue-bar {
    background: #20639b;
    padding: 10px 16px 14px 16px;
    border-radius: 6px 6px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.st-topic-edit-title-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.1rem;
}

.st-edit-pencil-icon {
    font-size: 1.05rem;
}

.st-topic-edit-input-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 800px;
}

.st-topic-edit-label {
    color: #ffffff;
    font-weight: bold;
    font-size: 0.95rem;
    white-space: nowrap;
}

.st-topic-edit-input {
    flex: 1;
    max-width: 600px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    padding: 5px 18px;
    font-size: 0.95rem;
    font-weight: bold;
    text-align: center;
    color: #000000;
    box-sizing: border-box;
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.st-topic-edit-input:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
}

.st-topic-edit-editor-area {
    padding: 14px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}

.st-topic-edit-editor-area .ck-editor__editable {
    min-height: 380px !important;
}

.st-topic-edit-footer-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 12px 16px 14px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.st-btn-save-edit, .st-btn-cancel-edit {
    padding: 6px 26px !important;
    font-size: 12px !important;
    cursor: pointer !important;
}

.st-topic-edit-legacy-line {
    padding: 4px 14px 8px 14px;
    background: #f8fafc;
    text-align: right;
}

.st-legacy-editor-link {
    display: inline-block;
    background: #8fa0b5;
    color: #ffffff;
    padding: 3px 12px;
    border-radius: 3px;
    font-size: 11px;
    text-decoration: none;
    font-weight: bold;
}

.st-legacy-editor-link:hover {
    background: #738499;
    color: #ffffff;
}

/* شريط إشعار تصفية ردود عضوية معينة داخل الموضوع (مطابق 100% لستار تايمز - الصور 2 و 3) */
.st-filtered-member-banner {
    width: 100%;
    background-color: #eaf2fa;
    border-top: 1px dotted #4080bf;
    border-bottom: 1px dotted #4080bf;
    padding: 2.5px 8px;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    box-sizing: border-box;
    line-height: 1.25;
}

.st-filtered-member-link {
    display: block;
    width: 100%;
    color: #000000 !important;
    font-family: 'Cairo', Tahoma, Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none !important;
    text-align: center;
    transition: color 0.15s ease;
    cursor: pointer;
    line-height: 1.25;
}

.st-filtered-member-link:hover {
    color: #ff0000 !important;
    text-decoration: none !important;
}

.st-filtered-member-banner + .st-post-box-authentic {
    margin-top: 0 !important;
}

/* ==========================================================================
   HOMEPAGE STARTIMES AUTHENTIC DESIGN (تطبيق توجيه جروك والصورة 2 بدقة تامة)
   ========================================================================== */
body.home-view {
    padding-bottom: 40px !important; /* مسافة شريط الدوق السفلي فقط */
    margin: 0 !important;
    background-color: #f1f5f9;
}

/* الحاوية الرئيسية لكافة كتل الأقسام - نفس حاوية وتنسيق مشاركاتك بالضبط (99.4% مع إطار مطرز 1px solid #7cb1ea) */
.home-view .startimes-main-container,
.home-main-container {
    width: 99.4% !important;
    max-width: none !important;
    margin: 0.4rem auto 0 auto !important;
    margin-bottom: 0 !important;
    direction: rtl;
    border: 1px solid #7cb1ea !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

/* كتلة القسم الفردي - تباعد نصف بكسل (0.5px) */
.home-view .category-table-block {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    margin-bottom: 0.5px !important;
    border-bottom: 1px solid #7cb1ea !important;
}

.home-view .category-table-block:last-child {
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

.home-view .table-responsive-wrapper {
    margin-bottom: 0 !important;
}

.home-view .startimes-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    direction: rtl !important;
}

/* 1. القسم الرئيسي ورؤوس الجدول -> خط LaureenBold بحجم 16px (Bold) أبيض على خلفية زرقاء */
.home-view .table-columns-header {
    background-color: #0279b8 !important;
    border-bottom: 1.5px solid #0279b8 !important;
}

.home-view .table-columns-header th {
    padding: 0.45rem 0.65rem !important;
    font-family: 'LaureenBold', Arial, Tahoma, sans-serif !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    border-left: 1px solid rgba(255, 255, 255, 0.35) !important;
    vertical-align: middle !important;
    text-align: center !important;
}

.home-view .table-columns-header th:last-child {
    border-left: none !important;
}

/* اسم القسم الرئيسي في الترويسة - توسيط وتحويم ليموني */
.home-view .table-columns-header th.col-forum-title {
    text-align: center !important;
}

.home-view .table-columns-header th a.st-cat-link,
.home-view .table-columns-header th .st-cat-link {
    color: #ffffff !important;
    font-family: 'LaureenBold', Arial, Tahoma, sans-serif !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-align: center !important;
    display: inline-block !important;
    transition: color 0.15s ease;
    text-decoration: none !important;
}

.home-view .table-columns-header th a.st-cat-link:hover,
.home-view .table-columns-header th .st-cat-link:hover {
    color: #e2f952 !important; /* تحول النص للون الليموني عند مرور الماوس */
    text-decoration: none !important;
}

/* عرض الأعمدة المتناسق والموحد عبر كافة الجداول - تساوي تام بين آخر رد ومراقب ونائب */
.home-view .col-forum-title { width: 30.5% !important; text-align: center !important; }
.home-view .col-topics { width: 4.5% !important; text-align: center !important; }
.home-view .col-posts { width: 4.5% !important; text-align: center !important; }
.home-view .col-members { width: 4% !important; text-align: center !important; }
.home-view .col-lastpost { width: 8.5% !important; text-align: center !important; white-space: nowrap !important; }
.home-view .col-supervisor { width: 8.5% !important; text-align: center !important; white-space: nowrap !important; }
.home-view .col-deputy { width: 8.5% !important; text-align: center !important; white-space: nowrap !important; }
.home-view .col-moderators { width: 26.5% !important; text-align: center !important; }
.home-view .col-admin-actions { width: 3% !important; text-align: center !important; }

/* أبعاد الأسطر وخلايا الجدول - مطابقة تامة لسمك وعرض سطر المواضيع بالصورة 2 */
.home-view .startimes-table tr.forum-row-item,
.home-view .startimes-table td,
.user-posts-view .startimes-table tr.forum-row-item,
.user-posts-view .startimes-table td,
.active-topics-view .startimes-table tr.forum-row-item,
.active-topics-view .startimes-table tr.st-active-row-item,
.active-topics-view .startimes-table td,
.user-mail-view .st-mail-table tr,
.user-mail-view .st-mail-table td {
    padding: 0.22rem 0.65rem !important;
    border-left: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    vertical-align: middle !important;
    height: 33px !important;
}

.home-view .startimes-table tr:last-child td,
.user-posts-view .startimes-table tr:last-child td,
.active-topics-view .startimes-table tr:last-child td,
.user-mail-view .st-mail-table tr:last-child td {
    border-bottom: none !important;
}

/* تمييز خلفية السطر باللون الرمادي إذا كان آخر رد هو العضو الحالي (مطابق لستار تايمز) */
.user-posts-view .startimes-table tbody tr.row-last-by-me,
.user-posts-view .startimes-table tbody tr.row-last-by-me td {
    background-color: #ededed !important;
}

.user-posts-view .startimes-table tbody tr.row-last-by-me:hover,
.user-posts-view .startimes-table tbody tr.row-last-by-me:hover td {
    background-color: #e2e2e2 !important;
}

/* عمود اسم المنتدى والوصف */
.home-view td.cell-forum-name,
.user-posts-view td.cell-forum-name {
    text-align: right !important;
}

.home-view .forum-entry-flex,
.user-posts-view .forum-entry-flex,
.active-topics-view .forum-cell-flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    direction: rtl;
}

.home-view .forum-entry-flex {
    width: 100% !important;
    position: relative !important;
}

/* عمود القفل الأحمر لستار تايمز على يسار سطر المنتدى */
.home-view .st-forum-lock-col {
    margin-right: auto !important;
    margin-left: 2px !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: default !important;
    flex-shrink: 0 !important;
}

.home-view .st-lock-red-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    height: 17px !important;
    line-height: 1 !important;
}

.home-view .st-lock-red-icon svg {
    display: block !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

/* تلميح القفل مطابق تماماً لصورة ستار تايمز 3 */
.home-view .st-lock-msg-bubble {
    position: absolute !important;
    right: calc(100% + 7px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #2b2b2b !important;
    color: #ffffff !important;
    font-family: Arial, Tahoma, sans-serif !important;
    font-size: 11px !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    padding: 3px 8px !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.15s ease, visibility 0.15s ease !important;
    z-index: 99 !important;
    line-height: 1.3 !important;
}

/* سهم المؤشر البارز باتجاه القفل يميناً */
.home-view .st-lock-msg-bubble::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: -5px !important;
    transform: translateY(-50%) !important;
    border-width: 4px 0 4px 5px !important;
    border-style: solid !important;
    border-color: transparent transparent transparent #2b2b2b !important;
}

.home-view .st-forum-lock-col:hover .st-lock-msg-bubble {
    opacity: 1 !important;
    visibility: visible !important;
}

.home-view .forum-circle-icon,
.user-posts-view .forum-circle-icon,
.active-topics-view .forum-round-badge {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    border-radius: 50% !important;
    background: #e0f2fe !important;
    border: 1.5px solid #93c5fd !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem !important;
}

/* 2. أسماء الأقسام الفرعية والوصف -> خط Arial، وعند مرور الماوس على الاسم أو الوصف حصراً برتقالي بدون خط مطابق للصورة 3 */
.home-view .forum-text-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.home-view .forum-link-title {
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #0279b8 !important;
    text-decoration: none !important;
    line-height: 1.25 !important;
    transition: color 0.12s ease;
}

.home-view .forum-desc-summary {
    font-family: Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #555555 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    display: block;
    cursor: pointer;
    transition: color 0.12s ease;
}

/* عند مرور الماوس على اسم القسم أو وصف المنتدى (مجموعة النص) يتحول الاسمان معاً للون البرتقالي وبدون خط */
.home-view .forum-text-group:hover .forum-link-title,
.home-view .forum-text-group:hover .forum-desc-summary,
.home-view .forum-link-title:hover,
.home-view .forum-desc-summary:hover {
    color: #f2720c !important; /* برتقالي ستار تايمز للعنوان والوصف معاً عند مرور الماوس */
    text-decoration: none !important;
}

/* 3. الأسماء -> خط Arial بحجم 14.5px (Bold) متناسق ومطابق لأصل ستار تايمز بالصورة 2 */
.home-view .cell-supervisor-name,
.home-view .cell-deputy-name {
    text-align: center !important;
    white-space: nowrap !important;
    padding: 0.22rem 0.35rem !important;
    overflow: hidden !important;
}

.home-view .sup-home-link {
    font-family: Arial, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: bold !important;
    color: #cc8811 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-block !important;
    transition: color 0.12s ease;
}

.home-view .dep-home-link {
    font-family: Arial, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: bold !important;
    color: #ff6633 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-block !important;
    transition: color 0.12s ease;
}

.home-view .mod-home-link {
    font-family: Arial, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: bold !important;
    color: #000000 !important;
    text-decoration: none !important;
    transition: color 0.12s ease;
}

.home-view .reply-author-link {
    font-family: Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: color 0.12s ease;
}

/* تحويم الأسماء في الرئيسية - قواعد دقيقة حسب الرتب وبدون أي خط */
/* 1. المشرفين في عمود إشراف: يتحول للأحمر وبدون خط */
.home-view .mod-home-link:hover {
    color: #cc0000 !important;
    text-decoration: none !important;
}

/* 2. المراقبين والنواب: يتحول للأحمر وبدون خط في عمودهم وفي عمود آخر رد */
.home-view .sup-home-link:hover,
.home-view .dep-home-link:hover,
.home-view .reply-author-link.role-supermod:hover,
.home-view .reply-author-link.role-deputy:hover {
    color: #cc0000 !important;
    text-decoration: none !important;
}

/* 3. المشرفين في عمود آخر رد (أحمر بالأصل): عند مرور الماوس يتحولون للأسود لتفاعل صريح وواضح */
.home-view .reply-author-link.role-mod:hover,
.home-view .reply-author-link.role-moderator:hover {
    color: #000000 !important;
    text-decoration: none !important;
}

/* 4. الأعضاء العاديين: لا يتحول إلى شيء (يبقى أسود بدون خط) */
.home-view .reply-author-link.role-member:hover,
.home-view .reply-author-link:not(.role-admin):not(.role-supermod):not(.role-deputy):not(.role-mod):not(.role-moderator):hover {
    color: #000000 !important;
    text-decoration: none !important;
}

/* 5. المدير: يتحول إلى لون ليموني وبدون خط (تطابق حصري للمدير دون العضويات التي تحوي رقم 1) */
.home-view .reply-author-link.role-admin:hover,
.home-view .sup-home-link.role-admin:hover,
.home-view .dep-home-link.role-admin:hover,
.home-view .mod-home-link.role-admin:hover,
.home-view a[href="/f.aspx?member=1"].reply-author-link:hover,
.home-view .reply-author-link[title="المدير"]:hover,
.home-view .role-admin:hover {
    color: #70b500 !important;
    text-decoration: none !important;
}

/* إلغاء الخط نهائياً عند التحويم لجميع وصلات الأسماء في جدول الرئيسية */
.home-view .cell-supervisor-name a:hover,
.home-view .cell-deputy-name a:hover,
.home-view .cell-moderators-list a:hover,
.home-view .cell-last-post a:hover,
.home-view .sup-home-link:hover,
.home-view .dep-home-link:hover,
.home-view .mod-home-link:hover,
.home-view .reply-author-link:hover {
    text-decoration: none !important;
}

/* عمود إشراف */
.home-view .cell-moderators-list {
    text-align: center !important;
    white-space: nowrap !important;
    padding: 0.22rem 0.65rem !important;
}

.home-view .moderators-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    text-align: center !important;
    width: 100%;
}

.home-view .moderators-inline .plus-sep {
    color: #ff6633 !important;
    font-weight: bold !important;
    margin: 0 4px !important;
    font-family: Arial, sans-serif !important;
    font-size: 15px !important;
}

/* 4. الأرقام والتواريخ -> خط Arial بحجم 16px (Bold) بلون أزرق مطابق لاسم القسم الفرعي #004488 */
.home-view .cell-topics-count,
.home-view .cell-posts-count,
.home-view .cell-members-count {
    text-align: center !important;
}

.home-view .num-val {
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #0279b8 !important; /* لون عداد المواضيع والردود */
}

/* آخر رد - متطابق بالعرض والهوامش تماماً مع عمودي المراقب والنائب */
.home-view .cell-last-post {
    text-align: center !important;
    white-space: nowrap !important;
    padding: 0.22rem 0.35rem !important;
    overflow: hidden !important;
}

.home-view .last-reply-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    white-space: nowrap !important;
}

.home-view .reply-author-link {
    font-family: Arial, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.home-view .reply-timestamp {
    font-family: Arial, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: bold !important;
    color: #0279b8 !important; /* لون التاريخ والوقت */
    direction: ltr !important;
    display: inline-block;
    white-space: nowrap !important;
}

.home-view .empty-dash {
    color: #94a3b8;
    font-weight: bold;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
}

/* ==========================================================================
   المواضيع المخفية والمشاركات والمخولون بالدخول (مطابقة 100% لستار تايمز)
   ========================================================================== */

/* 1. خلفية الموضوع المخفي - المشاركة الأولى فقط باللون الليموني الأصلي */
.st-post-box-authentic.is-hidden-topic-post {
    border: 1.5px solid #a3cc66 !important;
}

.st-post-box-authentic.is-hidden-topic-post .st-post-content-col,
.st-post-box-authentic.is-hidden-topic-post .st-post-top-toolbar,
.st-post-box-authentic.is-hidden-topic-post .st-post-text-body {
    background-color: #d7eea8 !important;
}

.st-post-box-authentic.is-hidden-topic-post .st-author-sidebar-col {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border-left: 1.5px solid #cbd5e1 !important;
}

.st-post-box-authentic.is-hidden-topic-post .author-plain-box,
.st-post-box-authentic.is-hidden-topic-post .author-role-label,
.st-post-box-authentic.is-hidden-topic-post .author-stats-container,
.st-post-box-authentic.is-hidden-topic-post .st-post-author-box,
.st-post-box-authentic.is-hidden-topic-post .st-author-card-modern,
.st-post-box-authentic.is-hidden-topic-post .author-avatar-container {
    background: transparent !important;
    background-color: transparent !important;
}

/* 2. شريط التنبيه المطرز نفس تطريز الدوق في المنتصف (مطابق 100% للصورة 2) */
.st-hidden-topic-notice-banner {
    display: block !important;
    width: calc(100% - 24px) !important;
    max-width: 98% !important;
    margin: 6px auto 14px auto !important;
    padding: 6px 14px !important;
    background-color: #dbeaff !important;
    border: 1px dashed #20639b !important;
    border-radius: 12px !important;
    color: #0b385e !important;
    font-size: 0.94rem !important;
    font-weight: bold !important;
    font-family: Arial, Tahoma, 'Cairo', sans-serif !important;
    text-align: center !important;
    box-sizing: border-box !important;
    letter-spacing: 0.2px !important;
}

/* 3. نافذة المخولون برؤية مواضيع مخفية (مطابقة 100% لنافذة إحصائيات الردود بالموضوع - الصورة 4) */
.st-allowed-users-dialog {
    max-width: 650px !important;
    width: 95% !important;
}

/* ==========================================================================
   العضوية المقفولة (مطابقة للصورة 4 بلون رمادي #888888 لاسم العضو في القوائم والجداول)
   ========================================================================== */
.role-locked,
.role-locked a,
a.role-locked,
.last-user-link.role-locked,
.author-user-link.role-locked,
.reply-author-link.role-locked,
.home-view .reply-author-link.role-locked,
.home-view .reply-author-link.role-locked:hover,
a.role-locked:hover,
a[data-user-locked="true"] {
    color: #888888 !important;
}

/* ==========================================================================
   حماية تصميم الديسكتوب: إخفاء واجهات الجوال عن متصفحات الكمبيوتر بشكل صارم
   ========================================================================== */
.mobile-category-block,
.mobile-topics-container,
.mobile-only {
    display: none !important;
}

/* العزل التام لحاويات الجوال عن متصفح الكمبيوتر */
.author-stats-flag-wrapper {
    display: contents;
}