:root {
    --bg:        #eef0f5;
    --card:      #ffffff;
    --card2:     #f3f4f8;
    --txt:       #1c1e26;
    --muted:     #8a8f9c;
    --blue:      #1877f2;
    --blue-dark: #0d5bd9;
    --orange:    #0ea5e9;
    --red:       #e23b3b;
    --green:     #22c55e;
    --diamond:   #4fc3f7;
    --vip:       #8b7cf6;
    --premium:   #22b14c;
    --pink:      #ff3da6;
    --text:      #1c1e26;
    --primary:   #1877f2;
    --border:    #e4e6ef;
    --radius:    16px;
    --shadow:    0 2px 10px rgba(20,30,60,.07);
    --topbar-h:  54px;
    --nav-h:     54px;
    --side-w:    300px;
}

/* ─── ألوان الرتب كـ CSS custom properties ─── */
:root {
    --role-owner:       #f59e0b;
    --role-supervisor:  #e23b3b;
    --role-admin:       #0ea5e9;
    --role-moderator:   #0ea5e9;
    --role-legend:      #ff8a00;
    --role-vip:         #8b7cf6;
    --role-premium:     #22b14c;
    --role-plus:        #1877f2;
    --role-user:        #1c1e26;
    --role-guest:       #8a8f9c;
}

/* كلاسات الرتب — تستخدم المتغيرات */
.role-owner      { color: var(--role-owner) !important; }
.role-supervisor { color: var(--role-supervisor) !important; }
.role-admin      { color: var(--role-admin) !important; }
.role-moderator  { color: var(--role-moderator) !important; }
.role-legend     { color: var(--role-legend) !important; }
.role-vip        { color: var(--role-vip) !important; }
.role-premium    { color: var(--role-premium) !important; }
.role-plus       { color: var(--role-plus) !important; }
.role-user       { color: var(--role-user); }
.role-guest      { color: var(--role-guest); }

.blue-txt    { color: var(--blue); }
.muted       { color: var(--muted); }